super-time-tracker-ui 0.1.2

package/components/entry-list-sort-setting.tsx

@@ -0,0 +1,41 @@
+'use client'
+
+import { useSyncExternalStore } from 'react'
+
+import { SettingRadioGroup } from '@/components/setting-radio-group'
+import { entry_list_sort_preference } from '@/lib/preferences/entry_list_sort_preference'
+import { persist_ui_preference } from '@/lib/persist_ui_preference'
+import { type EntryListSort } from '@/lib/types/ui_preferences'
+
+const options: { value: EntryListSort; label: string }[] = [
+  { value: 'newest', label: 'Newest first' },
+  { value: 'oldest', label: 'Oldest first' },
+  { value: 'duration', label: 'Longest duration' },
+  { value: 'description', label: 'Description (A–Z)' },
+]
+
+const set_entry_list_sort = (value: EntryListSort): void => {
+  persist_ui_preference(entry_list_sort_preference, value)
+}
+
+/**
+ * Setting: default sort order for the entry list on the home view.
+ */
+export function EntryListSortSetting() {
+  const value = useSyncExternalStore(
+    entry_list_sort_preference.subscribe,
+    entry_list_sort_preference.get_snapshot,
+    entry_list_sort_preference.get_server_snapshot,
+  )
+
+  return (
+    <SettingRadioGroup<EntryListSort>
+      name="entry-list-sort"
+      legend="Entry list sort"
+      description="How entries are ordered on the active sheet."
+      value={value}
+      options={options}
+      on_change={set_entry_list_sort}
+    />
+  )
+}

package/components/entry-list.tsx

@@ -0,0 +1,336 @@
+'use client'
+
+import { useEffect, useState } from 'react'
+
+import { Checkbox } from '@/components/checkbox'
+import { use_confirm_dialog } from '@/components/confirm-dialog-provider'
+import { EntryActionsMenu } from '@/components/entry-actions-menu'
+import { EntryNotesList } from '@/components/entry-notes-list'
+import { EntryEditForm, type EntryEditFormValues } from '@/components/entry-edit-form'
+import { EntryListBulkBar } from '@/components/entry-list-bulk-bar'
+import { format_time } from '@/components/format_time'
+import { get_delete_entries_confirm_dialog } from '@/lib/get_delete_entries_confirm_dialog'
+import { get_delete_entry_confirm_dialog } from '@/lib/get_delete_entry_confirm_dialog'
+import { format_display_tag } from '@/lib/format_display_tag'
+import { format_duration } from '@/lib/format_duration'
+import { get_entry_row_key } from '@/lib/get_entry_row_key'
+import { use_confirm_destructive_actions } from '@/lib/use_confirm_destructive_actions'
+import { use_duration_format } from '@/lib/use_duration_format'
+import { use_time_format } from '@/lib/use_time_format'
+import {
+  type SerializedEntry,
+  type SerializedSheet,
+} from '@/lib/types/tracker_state'
+
+interface EntryListProps {
+  title: string
+  entries: SerializedEntry[]
+  sheets: SerializedSheet[]
+  total_ms: number
+  empty_message: string
+  is_pending: boolean
+  show_sheet_name?: boolean
+  on_delete: (entry: SerializedEntry) => void
+  on_edit: (entry: SerializedEntry, values: EntryEditFormValues) => void
+  on_move: (entry: SerializedEntry, target_sheet_name: string) => void
+  on_move_many: (
+    entries: SerializedEntry[],
+    target_sheet_name: string,
+  ) => void
+  on_delete_many: (entries: SerializedEntry[]) => void
+  on_edit_note: (
+    entry: SerializedEntry,
+    timestamp: string,
+    text: string,
+  ) => void
+  on_add_note: (entry: SerializedEntry, text: string) => void
+  on_resume: (entry: SerializedEntry) => void
+}
+
+const tag_item_class =
+  'rounded-full bg-tag-bg px-2 py-0.5 text-xs text-tag-text'
+
+/**
+ * Renders a list of time sheet entries with edit and delete actions.
+ */
+export function EntryList({
+  title,
+  entries,
+  sheets,
+  total_ms,
+  empty_message,
+  is_pending,
+  show_sheet_name = true,
+  on_delete,
+  on_edit,
+  on_move,
+  on_move_many,
+  on_delete_many,
+  on_edit_note,
+  on_add_note,
+  on_resume,
+}: EntryListProps) {
+  const { confirm } = use_confirm_dialog()
+  const confirm_destructive_actions = use_confirm_destructive_actions()
+  const time_format = use_time_format()
+  const duration_format = use_duration_format()
+  const [editing_key, set_editing_key] = useState<string | null>(null)
+  const [selected_keys, set_selected_keys] = useState<Set<string>>(() => new Set())
+
+  const entry_keys = entries.map((entry) => get_entry_row_key(entry))
+  const selected_entries = entries.filter((entry) =>
+    selected_keys.has(get_entry_row_key(entry)),
+  )
+  const all_selected =
+    entries.length > 0 && selected_entries.length === entries.length
+  const some_selected =
+    selected_entries.length > 0 && selected_entries.length < entries.length
+
+  useEffect(() => {
+    set_selected_keys((previous) => {
+      const valid_keys = new Set(entry_keys)
+      const next = new Set(
+        [...previous].filter((key) => valid_keys.has(key)),
+      )
+
+      return next.size === previous.size ? previous : next
+    })
+  }, [entry_keys.join('|')])
+
+  const toggle_entry = (row_key: string): void => {
+    set_selected_keys((previous) => {
+      const next = new Set(previous)
+
+      if (next.has(row_key)) {
+        next.delete(row_key)
+      } else {
+        next.add(row_key)
+      }
+
+      return next
+    })
+  }
+
+  const toggle_all = (): void => {
+    if (all_selected) {
+      set_selected_keys(new Set())
+      return
+    }
+
+    set_selected_keys(new Set(entry_keys))
+  }
+
+  const clear_selection = (): void => {
+    set_selected_keys(new Set())
+  }
+
+  const handle_bulk_move = (target_sheet_name: string): void => {
+    on_move_many(selected_entries, target_sheet_name)
+    clear_selection()
+  }
+
+  const handle_bulk_delete = async (): Promise<void> => {
+    if (selected_entries.length === 0) {
+      return
+    }
+
+    const confirmed = confirm_destructive_actions
+      ? await confirm(get_delete_entries_confirm_dialog(selected_entries))
+      : true
+
+    if (!confirmed) {
+      return
+    }
+
+    on_delete_many(selected_entries)
+    clear_selection()
+  }
+
+  const has_selection = selected_entries.length > 0
+
+  return (
+    <section className="min-w-0">
+      <header className="mb-3 flex flex-col gap-2 border-b border-panel-border pb-2.5 compact:mb-2 compact:pb-1.5">
+        {has_selection ? (
+          <EntryListBulkBar
+            selected_count={selected_entries.length}
+            total_count={entries.length}
+            all_selected={all_selected}
+            some_selected={some_selected}
+            selected_entries={selected_entries}
+            sheets={sheets}
+            is_pending={is_pending}
+            on_toggle_all={toggle_all}
+            on_move={handle_bulk_move}
+            on_delete={() => void handle_bulk_delete()}
+            on_clear={clear_selection}
+          />
+        ) : (
+          <div className="flex items-center justify-between gap-3">
+            <div className="flex min-w-0 items-center gap-2.5">
+              {entries.length > 0 ? (
+                <Checkbox
+                  className="shrink-0"
+                  checked={all_selected}
+                  indeterminate={some_selected}
+                  disabled={is_pending}
+                  aria_label="Select all entries"
+                  on_change={toggle_all}
+                />
+              ) : null}
+              <h2 className="m-0 text-[0.72rem] font-semibold uppercase tracking-[0.06em]">
+                {title}
+              </h2>
+              <span className="text-[0.8rem] text-muted">
+                {entries.length === 0
+                  ? null
+                  : entries.length === 1
+                    ? '1 entry'
+                    : `${entries.length} entries`}
+              </span>
+            </div>
+            <p className="m-0 font-mono text-[0.85rem] text-muted">
+              {format_duration(total_ms, duration_format)} total
+            </p>
+          </div>
+        )}
+      </header>
+      {entries.length === 0 ? (
+        <p className="m-0 text-muted">{empty_message}</p>
+      ) : (
+        <>
+          <ul className="m-0 flex list-none flex-col p-0">
+            {entries.map((entry) => {
+              const row_key = get_entry_row_key(entry)
+              const is_editing = editing_key === row_key
+              const is_selected = selected_keys.has(row_key)
+
+              if (is_editing) {
+                return (
+                  <li
+                    key={row_key}
+                    className="block border-b border-panel-border py-2.5 last:border-b-0 compact:py-1.5"
+                  >
+                    <EntryEditForm
+                      entry={entry}
+                      is_pending={is_pending}
+                      on_cancel={() => set_editing_key(null)}
+                      on_save={(values) => {
+                        on_edit(entry, values)
+                        set_editing_key(null)
+                      }}
+                    />
+                  </li>
+                )
+              }
+
+              return (
+                <li
+                  key={row_key}
+                  className={`group relative flex flex-col gap-0 border-b border-panel-border px-2 py-2.5 transition-colors duration-150 last:border-b-0 hover:bg-surface-hover compact:py-1.5 ${
+                    is_selected
+                      ? 'bg-accent-soft hover:bg-accent-soft'
+                      : ''
+                  }`}
+                >
+                  <div className="flex w-full min-w-0 items-center gap-2.5 compact:gap-1.5">
+                    <label
+                      className="flex min-w-0 flex-1 cursor-pointer items-center gap-2 has-disabled:cursor-not-allowed"
+                      aria-label={`Select entry ${entry.description || 'Untitled entry'}`}
+                    >
+                      <Checkbox
+                        nested
+                        className={`shrink-0 pr-1 transition-opacity duration-150 compact:pr-0.5 ${
+                          is_selected || has_selection
+                            ? 'opacity-100'
+                            : 'opacity-0 group-hover:opacity-100 group-focus-within:opacity-100'
+                        }`}
+                        checked={is_selected}
+                        disabled={is_pending}
+                        on_change={() => toggle_entry(row_key)}
+                      />
+                      <div className="min-w-0 flex-1">
+                        <p className="m-0 overflow-wrap-anywhere font-semibold leading-snug compact:text-[0.9rem] compact:leading-tight">
+                          {entry.description || 'Untitled entry'}
+                        </p>
+                        <div className="mt-0.5 flex flex-wrap items-center gap-1 text-[0.8rem] text-muted compact:mt-px compact:gap-0.5 compact:text-[0.72rem]">
+                          {show_sheet_name ? (
+                            <>
+                              <span>{entry.sheetName}</span>
+                              <span>·</span>
+                            </>
+                          ) : null}
+                          <span>#{entry.id}</span>
+                          <span>·</span>
+                          <span className="whitespace-nowrap">
+                            {format_time(entry.start, time_format)}
+                            {entry.end === null
+                              ? ' → now'
+                              : ` → ${format_time(entry.end, time_format)}`}
+                          </span>
+                          {entry.tags.length > 0 ? (
+                            <ul className="m-0 flex list-none flex-wrap gap-1 p-0">
+                              {entry.tags.map((tag) => (
+                                <li key={tag} className={tag_item_class}>
+                                  {format_display_tag(tag)}
+                                </li>
+                              ))}
+                            </ul>
+                          ) : null}
+                        </div>
+                      </div>
+                    </label>
+                    <div className="flex shrink-0 flex-row items-center gap-2 max-[860px]:flex-wrap max-[860px]:justify-end compact:gap-1.5">
+                      <p
+                        className={`m-0 whitespace-nowrap text-right font-mono text-[0.9rem] text-muted compact:text-[0.8rem] ${
+                          entry.isActive ? 'text-accent' : ''
+                        }`}
+                      >
+                        {format_duration(entry.durationMs, duration_format)}
+                      </p>
+                      <EntryActionsMenu
+                        current_sheet_name={entry.sheetName}
+                        sheets={sheets}
+                        is_pending={is_pending}
+                        on_edit={() => set_editing_key(row_key)}
+                        on_add_note={(text) => on_add_note(entry, text)}
+                        on_resume={() => on_resume(entry)}
+                        entry_is_active={entry.isActive}
+                        on_move={(target_sheet_name) =>
+                          on_move(entry, target_sheet_name)
+                        }
+                        on_delete={async () => {
+                          const confirmed = confirm_destructive_actions
+                            ? await confirm(
+                                get_delete_entry_confirm_dialog(entry),
+                              )
+                            : true
+
+                          if (confirmed) {
+                            on_delete(entry)
+                          }
+                        }}
+                      />
+                    </div>
+                  </div>
+                  {entry.notes.length > 0 ? (
+                    <div className="w-full pt-1 pl-[calc(0.85rem+0.5rem+0.35rem)] compact:pt-0.5 compact:pl-[calc(0.85rem+0.35rem+0.2rem)]">
+                      <EntryNotesList
+                        notes={entry.notes}
+                        variant="inline"
+                        is_pending={is_pending}
+                        on_edit_note={(timestamp, text) =>
+                          on_edit_note(entry, timestamp, text)
+                        }
+                      />
+                    </div>
+                  ) : null}
+                </li>
+              )
+            })}
+          </ul>
+        </>
+      )}
+    </section>
+  )
+}

package/components/entry-notes-list.tsx

@@ -0,0 +1,211 @@
+'use client'
+
+import { type MouseEvent, type ReactNode, useState } from 'react'
+
+import { ChevronIcon } from '@/components/chevron-icon'
+import { format_time } from '@/components/format_time'
+import { NoteEditForm } from '@/components/note-edit-form'
+import { PencilIcon } from '@/components/pencil-icon'
+import { TrashIcon } from '@/components/trash-icon'
+import { use_time_format } from '@/lib/use_time_format'
+import { type SerializedNote } from '@/lib/types/tracker_state'
+
+type EntryNotesListVariant = 'panel' | 'inline'
+
+interface EntryNotesListProps {
+  notes: SerializedNote[]
+  variant?: EntryNotesListVariant
+  in_bar?: boolean
+  is_pending?: boolean
+  on_edit_note?: (timestamp: string, text: string) => void
+  on_delete_note?: (timestamp: string) => void
+}
+
+const edit_button_class =
+  'inline-flex h-6 w-6 shrink-0 cursor-pointer items-center justify-center rounded-[0.35rem] border-0 bg-transparent p-0 text-muted hover:bg-surface-hover hover:text-foreground disabled:cursor-not-allowed disabled:opacity-55'
+
+/**
+ * Renders notes attached to a time sheet entry.
+ */
+export function EntryNotesList({
+  notes,
+  variant = 'panel',
+  in_bar = false,
+  is_pending = false,
+  on_edit_note,
+  on_delete_note,
+}: EntryNotesListProps) {
+  const time_format = use_time_format()
+  const [editing_timestamp, set_editing_timestamp] = useState<string | null>(
+    null,
+  )
+  const [is_expanded, set_is_expanded] = useState(false)
+
+  if (notes.length === 0) {
+    return null
+  }
+
+  const sorted_notes = [...notes].sort(
+    (left, right) =>
+      new Date(left.timestamp).getTime() - new Date(right.timestamp).getTime(),
+  )
+
+  const is_inline = variant === 'inline'
+  const is_list_visible = is_expanded || editing_timestamp !== null
+  const toggle_label = is_inline
+    ? `${notes.length} ${notes.length === 1 ? 'note' : 'notes'}`
+    : `Notes (${notes.length})`
+
+  const root_class = [
+    is_inline ? 'm-0 w-full p-0' : 'border-t border-accent-border pt-3.5',
+    in_bar && !is_inline
+      ? 'border-[color-mix(in_srgb,var(--accent-border)_65%,var(--panel-border))]'
+      : '',
+  ]
+    .filter(Boolean)
+    .join(' ')
+
+  const toggle_class = is_inline
+    ? 'inline-flex cursor-pointer items-center gap-1.5 border-0 bg-transparent p-0 font-inherit text-xs font-medium normal-case tracking-normal text-muted hover:text-foreground'
+    : 'inline-flex cursor-pointer items-center gap-1.5 border-0 bg-transparent px-0 py-0.5 font-inherit text-[0.72rem] font-semibold uppercase tracking-[0.04em] text-muted hover:text-foreground'
+
+  const list_class = is_inline
+    ? `m-0 flex list-none flex-col gap-1.5 overflow-visible p-0 compact:gap-0.5 ${is_list_visible ? 'mt-1.5' : 'hidden'}`
+    : `m-0 grid max-h-48 list-none grid-cols-2 gap-2 overflow-y-auto p-0 max-[860px]:grid-cols-1 ${is_list_visible ? 'mt-1.5' : 'hidden'}`
+
+  const item_class = is_inline
+    ? 'flex flex-col gap-0.5 rounded-sm border border-panel-border bg-ghost-bg px-2 py-1.5 compact:rounded-none compact:px-1.5 compact:py-1'
+    : 'flex flex-col gap-0.5 rounded-sm border border-panel-border bg-[color-mix(in_srgb,var(--panel)_55%,var(--background))] px-2.5 py-2'
+
+  const handle_save = (timestamp: string, text: string): void => {
+    on_edit_note?.(timestamp, text)
+    set_editing_timestamp(null)
+  }
+
+  const start_editing = (timestamp: string): void => {
+    set_is_expanded(true)
+    set_editing_timestamp(timestamp)
+  }
+
+  const handle_delete = (timestamp: string): void => {
+    if (editing_timestamp === timestamp) {
+      set_editing_timestamp(null)
+    }
+
+    on_delete_note?.(timestamp)
+  }
+
+  const render_note_actions = (note: SerializedNote): ReactNode => {
+    if (on_edit_note === undefined && on_delete_note === undefined) {
+      return null
+    }
+
+    return (
+      <div className="flex shrink-0 gap-0.5">
+        {on_edit_note !== undefined ? (
+          <button
+            type="button"
+            className={edit_button_class}
+            aria-label="Edit note"
+            title="Edit note"
+            disabled={is_pending}
+            onClick={(event) => {
+              event.stopPropagation()
+              start_editing(note.timestamp)
+            }}
+          >
+            <PencilIcon />
+          </button>
+        ) : null}
+        {on_delete_note !== undefined ? (
+          <button
+            type="button"
+            className={`${edit_button_class} hover:text-danger`}
+            aria-label="Delete note"
+            title="Delete note"
+            disabled={is_pending}
+            onClick={(event) => {
+              event.stopPropagation()
+              handle_delete(note.timestamp)
+            }}
+          >
+            <TrashIcon />
+          </button>
+        ) : null}
+      </div>
+    )
+  }
+
+  const handle_toggle = (event: MouseEvent<HTMLButtonElement>): void => {
+    event.stopPropagation()
+
+    if (editing_timestamp !== null) {
+      return
+    }
+
+    set_is_expanded((previous) => !previous)
+  }
+
+  return (
+    <section className={root_class} aria-label="Entry notes">
+      <button
+        type="button"
+        className={toggle_class}
+        aria-expanded={is_list_visible}
+        onClick={handle_toggle}
+      >
+        <ChevronIcon rotated={is_list_visible} />
+        <span>{toggle_label}</span>
+      </button>
+      <ul className={list_class}>
+        {sorted_notes.map((note, index) => {
+          const is_editing = editing_timestamp === note.timestamp
+
+          return (
+            <li key={`${note.timestamp}-${index}`} className={item_class}>
+              {is_editing ? (
+                <NoteEditForm
+                  initial_text={note.text}
+                  inline={is_inline}
+                  is_pending={is_pending}
+                  on_cancel={() => set_editing_timestamp(null)}
+                  on_save={(text) => handle_save(note.timestamp, text)}
+                />
+              ) : is_inline ? (
+                <div className="flex w-full items-start justify-between gap-1.5">
+                  <p className="m-0 flex min-w-0 flex-1 items-baseline gap-1.5 text-xs leading-snug text-foreground compact:text-[0.72rem]">
+                    <time
+                      className="shrink-0 font-mono text-[0.68rem] text-muted"
+                      dateTime={note.timestamp}
+                    >
+                      {format_time(note.timestamp, time_format)}
+                    </time>
+                    <span className="min-w-0 overflow-wrap-anywhere whitespace-pre-wrap">
+                      {note.text}
+                    </span>
+                  </p>
+                  {render_note_actions(note)}
+                </div>
+              ) : (
+                <>
+                  <div className="flex w-full items-start justify-between gap-1.5">
+                    <time
+                      className="font-mono text-[0.72rem] text-muted"
+                      dateTime={note.timestamp}
+                    >
+                      {format_time(note.timestamp, time_format)}
+                    </time>
+                    {render_note_actions(note)}
+                  </div>
+                  <p className="m-0 overflow-wrap-anywhere text-[0.9rem] leading-snug whitespace-pre-wrap">
+                    {note.text}
+                  </p>
+                </>
+              )}
+            </li>
+          )
+        })}
+      </ul>
+    </section>
+  )
+}

package/components/entry-tag-filter.tsx

@@ -0,0 +1,99 @@
+'use client'
+
+import { useEffect, useSyncExternalStore } from 'react'
+
+import { format_display_tag } from '@/lib/format_display_tag'
+import { get_button_class_name } from '@/lib/get_button_class_name'
+import {
+  get_sheet_tag_filter_server_snapshot,
+  get_sheet_tag_filter_snapshot,
+} from '@/lib/get_sheet_tag_filter_snapshot'
+import { prune_sheet_tag_filter } from '@/lib/prune_sheet_tag_filter'
+import { set_sheet_tag_filter } from '@/lib/set_sheet_tag_filter'
+import { subscribe_sheet_tag_filters } from '@/lib/subscribe_sheet_tag_filters'
+import { tags_are_equal } from '@/lib/tags_are_equal'
+import { toggle_sheet_tag_filter } from '@/lib/toggle_sheet_tag_filter'
+import { use_tag_filter_mode } from '@/lib/use_tag_filter_mode'
+import { type TagStat } from '@/lib/types/tag_management'
+
+interface EntryTagFilterProps {
+  sheet_name: string
+  sheet_tags: TagStat[]
+}
+
+/**
+ * Toggle filters for showing only entries that match selected tags.
+ */
+export function EntryTagFilter({ sheet_name, sheet_tags }: EntryTagFilterProps) {
+  const tag_filter_mode = use_tag_filter_mode()
+  const filter_tags = useSyncExternalStore(
+    subscribe_sheet_tag_filters,
+    () => get_sheet_tag_filter_snapshot(sheet_name),
+    get_sheet_tag_filter_server_snapshot,
+  )
+
+  useEffect(() => {
+    prune_sheet_tag_filter(
+      sheet_name,
+      sheet_tags.map((tag) => tag.name),
+    )
+  }, [sheet_name, sheet_tags])
+
+  if (sheet_tags.length === 0) {
+    return null
+  }
+
+  const has_filter = filter_tags.length > 0
+
+  return (
+    <fieldset className="m-0 rounded-lg border border-panel-border bg-panel p-3.5 shadow-sm compact:p-3">
+      <legend className="px-0.5 text-[0.72rem] font-semibold uppercase tracking-[0.06em] text-muted">
+        Filter by tag
+      </legend>
+      <div className="flex flex-wrap items-center gap-x-3 gap-y-2">
+        <p className="m-0 shrink-0 text-[0.8rem] leading-snug text-muted">
+          {tag_filter_mode === 'any'
+            ? 'Show entries that include any selected tag.'
+            : 'Show entries that include every selected tag.'}
+        </p>
+        <div
+          className="flex min-w-0 flex-1 flex-wrap justify-end gap-1.5"
+          role="group"
+          aria-label="Filter by tag"
+        >
+          {sheet_tags.map((tag) => {
+            const is_selected = filter_tags.some((filter_tag) =>
+              tags_are_equal(filter_tag, tag.name),
+            )
+
+            return (
+              <button
+                key={tag.name}
+                type="button"
+                className={`${get_button_class_name('ghost', 'small')} ${
+                  is_selected
+                    ? 'border-accent-border bg-accent-soft text-foreground'
+                    : ''
+                }`}
+                aria-pressed={is_selected}
+                onClick={() => toggle_sheet_tag_filter(sheet_name, tag.name)}
+              >
+                {format_display_tag(tag.name)}
+                <span className="ml-1 font-normal text-muted">({tag.entryCount})</span>
+              </button>
+            )
+          })}
+        </div>
+      </div>
+      {has_filter ? (
+        <button
+          type="button"
+          className={`${get_button_class_name('ghost', 'small')} mt-2.5`}
+          onClick={() => set_sheet_tag_filter(sheet_name, [])}
+        >
+          Clear filter
+        </button>
+      ) : null}
+    </fieldset>
+  )
+}

package/components/format_datetime_hint.ts

@@ -0,0 +1,8 @@
+import { format } from "date-fns";
+
+/**
+ * Formats an ISO timestamp as a readable hint for edit forms.
+ */
+export function format_datetime_hint(iso: string): string {
+  return format(new Date(iso), "MMM d, h:mm a");
+}