Add Now button to obs time

common/src/main/scala/explore/components/ui/ExploreStyles.scala

@@ -331,6 +331,7 @@ object ExploreStyles:
   val PAConfigurationAngle: Css         = Css("explore-pa-configuration-angle")
   val AveragePA: Css                    = Css("explore-average-pa")
   val ObsInstantTileTitle: Css          = Css("explore-obs-instant-tile-title")
+  val DatePickerWithNowButton: Css      = Css("explore-datepicker-with-now-button")
   val ConfigurationGrid: Css            = Css("explore-configuration-grid")
   val BasicConfigurationGrid: Css       = Css("explore-basic-configuration-grid")
   val BasicConfigurationForm: Css       = Css("explore-basic-configuration-form")

common/src/main/webapp/sass/explore.scss

@@ -799,6 +799,23 @@ thead tr th.sticky-header {
   }
 }
 
+.explore-datepicker-with-now-button {
+  /* stylelint-disable-next-line selector-class-pattern */
+  .react-datepicker__children-container {
+    position: absolute;
+    bottom: 0;
+    text-align: right;
+    pointer-events: none; // Let clicks pass through to the time selector.
+
+    .p-button {
+      padding-top: 5px;
+      padding-bottom: 6px;
+      margin-bottom: 3px;
+      pointer-events: all; // Capture clicks again.
+    }
+  }
+}
+
 .explore-obs-instant-tile-title {
   @include small-tile-title;
   @include react-datepicker-input;

explore/src/main/scala/explore/config/ObsTimeEditor.scala

@@ -0,0 +1,60 @@
+// Copyright (c) 2016-2023 Association of Universities for Research in Astronomy, Inc. (AURA)
+// For license information see LICENSE or https://opensource.org/licenses/BSD-3-Clause
+
+package explore.config
+
+import cats.syntax.all.*
+import crystal.react.View
+import explore.components.HelpIcon
+import explore.components.ui.ExploreStyles
+import explore.utils.*
+import japgolly.scalajs.react.*
+import japgolly.scalajs.react.vdom.html_<^.*
+import lucuma.react.common.ReactFnProps
+import lucuma.react.datepicker.*
+import lucuma.react.primereact.Button
+import lucuma.refined.*
+import lucuma.typed.reactDatepicker.mod.ReactDatePicker
+import lucuma.ui.syntax.all.given
+
+import java.time.Instant
+
+import scalajs.js
+
+case class ObsTimeEditor(vizTimeView: View[Option[Instant]])
+    extends ReactFnProps(ObsTimeEditor.component)
+
+object ObsTimeEditor {
+  private type Props = ObsTimeEditor
+
+  private val component =
+    ScalaFnComponent
+      .withHooks[Props]
+      .useRef[Option[ReactDatePicker[Any, Any]]](none)
+      .render: (props, ref) =>
+        <.div(ExploreStyles.ObsInstantTileTitle)(
+          React.Fragment(
+            <.label(
+              dataAbbrv := "Time",
+              <.span("Observation time"),
+              HelpIcon("configuration/obstime.md".refined)
+            ),
+            Datepicker(onChange =
+              (newValue, _) =>
+                newValue.fromDatePickerToInstantOpt.foldMap: i =>
+                  props.vizTimeView.set(i.some)
+            )
+              .calendarClassName(ExploreStyles.DatePickerWithNowButton.htmlClass)
+              .showTimeInput(true)
+              .selected(props.vizTimeView.get.getOrElse(Instant.now).toDatePickerJsDate)
+              .dateFormat("yyyy-MM-dd HH:mm")(
+                Button(onClick =
+                  props.vizTimeView.set(Instant.now.some) >>
+                    ref.value.map(r => Callback(r.setOpen(false))).orEmpty
+                )("Now")
+              )
+              .withRef(r => ref.set(r.some).runNow()),
+            <.label("UTC")
+          )
+        )
+}

explore/src/main/scala/explore/tabs/AsterismEditorTile.scala

@@ -10,7 +10,7 @@ import crystal.*
 import crystal.react.*
 import explore.components.Tile
 import explore.components.ui.ExploreStyles
-import explore.config.VizTimeEditor
+import explore.config.ObsTimeEditor
 import explore.model.AsterismIds
 import explore.model.GlobalPreferences
 import explore.model.ObsConfiguration
@@ -63,7 +63,7 @@ object AsterismEditorTile:
       vizTime.withOnMod(t => ObsQueries.updateVisualizationTime[IO](obsIds.toList, t).runAsync)
 
     val control: VdomNode =
-      <.div(ExploreStyles.JustifiedEndTileControl, VizTimeEditor(vizTimeView))
+      <.div(ExploreStyles.JustifiedEndTileControl, ObsTimeEditor(vizTimeView))
 
     Tile(
       ObsTabTilesIds.TargetId.id,

explore/src/main/scala/explore/targeteditor/AsterismEditor.scala

@@ -9,7 +9,7 @@ import crystal.react.*
 import crystal.react.hooks.*
 import explore.components.Tile
 import explore.components.ui.ExploreStyles
-import explore.config.VizTimeEditor
+import explore.config.ObsTimeEditor
 import explore.model.AladinFullScreen
 import explore.model.AppContext
 import explore.model.Asterism
@@ -114,7 +114,7 @@ object AsterismEditor extends AsterismModifier:
               ExploreStyles.AddTargetButton
             )
           ),
-          props.renderInTitle(VizTimeEditor(vizTimeView)),
+          props.renderInTitle(ObsTimeEditor(vizTimeView)),
           TargetTable(
             props.userId.some,
             props.programId,