super-time-tracker-ui 0.1.2

package/components/default-sheet-session-setting.tsx

@@ -0,0 +1,118 @@
+'use client'
+
+import { useEffect, useState } from 'react'
+
+import { get_input_class_name } from '@/lib/get_input_class_name'
+import { read_stored_default_sheet_fixed_name } from '@/lib/read_stored_default_sheet_fixed_name'
+import { read_stored_default_sheet_session_mode } from '@/lib/read_stored_default_sheet_session_mode'
+import { notify_settings_saved } from '@/lib/notify_settings_saved'
+import { set_default_sheet_fixed_name } from '@/lib/set_default_sheet_fixed_name'
+import { set_default_sheet_session_mode } from '@/lib/set_default_sheet_session_mode'
+import { type DefaultSheetSessionMode } from '@/lib/types/ui_settings'
+
+interface DefaultSheetSessionSettingProps {
+  sheet_names: string[]
+}
+
+const mode_options: {
+  value: DefaultSheetSessionMode
+  label: string
+  description: string
+}[] = [
+  {
+    value: 'last_viewed',
+    label: 'Last viewed',
+    description: 'Open the sheet you were viewing when you last used the tracker.',
+  },
+  {
+    value: 'active_timer',
+    label: 'Sheet with active timer',
+    description: 'Open the sheet that has a running timer, when one exists.',
+  },
+  {
+    value: 'fixed',
+    label: 'Specific sheet',
+    description: 'Always open a chosen sheet when you start a new session.',
+  },
+]
+
+/**
+ * Configures which sheet loads on a new session.
+ */
+export function DefaultSheetSessionSetting({
+  sheet_names,
+}: DefaultSheetSessionSettingProps) {
+  const [mode, set_mode] = useState<DefaultSheetSessionMode>('last_viewed')
+  const [fixed_sheet_name, set_fixed_sheet_name] = useState('')
+
+  useEffect(() => {
+    set_mode(read_stored_default_sheet_session_mode())
+    const stored_fixed_name = read_stored_default_sheet_fixed_name()
+    const fallback_name = sheet_names[0] ?? ''
+
+    set_fixed_sheet_name(stored_fixed_name ?? fallback_name)
+  }, [sheet_names])
+
+  const handle_mode_change = (next_mode: DefaultSheetSessionMode): void => {
+    set_mode(next_mode)
+    set_default_sheet_session_mode(next_mode)
+
+    if (next_mode === 'fixed' && fixed_sheet_name.length > 0) {
+      set_default_sheet_fixed_name(fixed_sheet_name)
+    }
+
+    notify_settings_saved()
+  }
+
+  const handle_fixed_sheet_change = (sheet_name: string): void => {
+    set_fixed_sheet_name(sheet_name)
+    set_default_sheet_fixed_name(sheet_name)
+    notify_settings_saved()
+  }
+
+  return (
+    <fieldset className="m-0 flex w-full flex-col gap-3 border-0 p-0">
+      <legend className="mb-2 text-[0.95rem] font-semibold">
+        Default sheet on new session
+      </legend>
+      <ul className="m-0 flex list-none flex-col gap-2 p-0">
+        {mode_options.map((option) => (
+          <li key={option.value}>
+            <label className="flex w-full cursor-pointer items-start gap-2.5">
+              <input
+                type="radio"
+                name="default-sheet-session-mode"
+                className="mt-0.5 shrink-0"
+                checked={mode === option.value}
+                onChange={() => handle_mode_change(option.value)}
+              />
+              <span className="flex flex-col gap-0.5">
+                <span className="text-[0.9rem] font-semibold">{option.label}</span>
+                <span className="text-[0.8rem] leading-snug text-muted">
+                  {option.description}
+                </span>
+              </span>
+            </label>
+          </li>
+        ))}
+      </ul>
+      {mode === 'fixed' ? (
+        <label className="flex flex-col gap-1 text-[0.82rem] text-muted">
+          Sheet
+          <select
+            className={get_input_class_name('compact')}
+            value={fixed_sheet_name}
+            disabled={sheet_names.length === 0}
+            onChange={(event) => handle_fixed_sheet_change(event.target.value)}
+          >
+            {sheet_names.map((sheet_name) => (
+              <option key={sheet_name} value={sheet_name}>
+                {sheet_name}
+              </option>
+            ))}
+          </select>
+        </label>
+      ) : null}
+    </fieldset>
+  )
+}

package/components/display-settings-view.tsx

@@ -0,0 +1,75 @@
+import { ColorPaletteSetting } from '@/components/color-palette-setting'
+import { CheckInFormCollapsedSetting } from '@/components/check-in-form-collapsed-setting'
+import { CompactListsSetting } from '@/components/compact-lists-setting'
+import { DefaultReportingRangeSetting } from '@/components/default-reporting-range-setting'
+import { DefaultReportingSortSetting } from '@/components/default-reporting-sort-setting'
+import { DurationFormatSetting } from '@/components/duration-format-setting'
+import { EntryListSortSetting } from '@/components/entry-list-sort-setting'
+import { SettingsPageLayout } from '@/components/settings-page-layout'
+import { TagFilterModeSetting } from '@/components/tag-filter-mode-setting'
+import { ThemeModeSetting } from '@/components/theme-mode-setting'
+import { TimeFormatSetting } from '@/components/time-format-setting'
+import { TimerInTitleSetting } from '@/components/timer-in-title-setting'
+import { TimerShowSecondsSetting } from '@/components/timer-show-seconds-setting'
+import { WeekStartsOnSetting } from '@/components/week-starts-on-setting'
+
+/**
+ * Settings page: display, layout, and formatting preferences.
+ */
+export function DisplaySettingsView() {
+  return (
+    <SettingsPageLayout
+      breadcrumb={{
+        current: 'Display & layout',
+        parent: { label: 'Settings', href: '/settings' },
+      }}
+      title="Display & layout"
+      description="How things look across the tracker, reporting, and entry lists."
+    >
+      <ul
+        className="m-0 flex w-full list-none flex-col gap-2 p-0"
+        aria-label="Display settings"
+      >
+        <li className="rounded-md border border-panel-border bg-panel p-3.5 shadow-sm">
+          <ThemeModeSetting />
+        </li>
+        <li className="rounded-md border border-panel-border bg-panel p-3.5 shadow-sm">
+          <ColorPaletteSetting />
+        </li>
+        <li className="rounded-md border border-panel-border bg-panel p-3.5 shadow-sm">
+          <CompactListsSetting />
+        </li>
+        <li className="rounded-md border border-panel-border bg-panel p-3.5 shadow-sm">
+          <CheckInFormCollapsedSetting />
+        </li>
+        <li className="rounded-md border border-panel-border bg-panel p-3.5 shadow-sm">
+          <TimeFormatSetting />
+        </li>
+        <li className="rounded-md border border-panel-border bg-panel p-3.5 shadow-sm">
+          <DurationFormatSetting />
+        </li>
+        <li className="rounded-md border border-panel-border bg-panel p-3.5 shadow-sm">
+          <TimerShowSecondsSetting />
+        </li>
+        <li className="rounded-md border border-panel-border bg-panel p-3.5 shadow-sm">
+          <TimerInTitleSetting />
+        </li>
+        <li className="rounded-md border border-panel-border bg-panel p-3.5 shadow-sm">
+          <EntryListSortSetting />
+        </li>
+        <li className="rounded-md border border-panel-border bg-panel p-3.5 shadow-sm">
+          <TagFilterModeSetting />
+        </li>
+        <li className="rounded-md border border-panel-border bg-panel p-3.5 shadow-sm">
+          <WeekStartsOnSetting />
+        </li>
+        <li className="rounded-md border border-panel-border bg-panel p-3.5 shadow-sm">
+          <DefaultReportingSortSetting />
+        </li>
+        <li className="rounded-md border border-panel-border bg-panel p-3.5 shadow-sm">
+          <DefaultReportingRangeSetting />
+        </li>
+      </ul>
+    </SettingsPageLayout>
+  )
+}

package/components/duration-format-setting.tsx

@@ -0,0 +1,40 @@
+'use client'
+
+import { useSyncExternalStore } from 'react'
+
+import { SettingRadioGroup } from '@/components/setting-radio-group'
+import { duration_format_preference } from '@/lib/preferences/duration_format_preference'
+import { persist_ui_preference } from '@/lib/persist_ui_preference'
+import { type DurationFormat } from '@/lib/types/ui_preferences'
+
+const options: { value: DurationFormat; label: string; description: string }[] = [
+  { value: 'humanized', label: 'Humanized', description: 'e.g. 1 hour 25 minutes' },
+  { value: 'clock', label: 'Clock', description: 'e.g. 01:25:00' },
+  { value: 'decimal', label: 'Decimal hours', description: 'e.g. 1.42h' },
+]
+
+const set_duration_format = (value: DurationFormat): void => {
+  persist_ui_preference(duration_format_preference, value)
+}
+
+/**
+ * Setting: how to display durations across the app.
+ */
+export function DurationFormatSetting() {
+  const value = useSyncExternalStore(
+    duration_format_preference.subscribe,
+    duration_format_preference.get_snapshot,
+    duration_format_preference.get_server_snapshot,
+  )
+
+  return (
+    <SettingRadioGroup<DurationFormat>
+      name="duration-format"
+      legend="Duration format"
+      description="Applies to entry durations, reporting totals, and the active timer."
+      value={value}
+      options={options}
+      on_change={set_duration_format}
+    />
+  )
+}

package/components/entry-actions-menu.tsx

@@ -0,0 +1,207 @@
+'use client'
+
+import { useEffect, useRef, useState } from 'react'
+
+import { HamburgerIcon } from '@/components/hamburger-icon'
+import { prompt_entry_note } from '@/lib/prompt_entry_note'
+import { type SerializedSheet } from '@/lib/types/tracker_state'
+
+interface EntryActionsMenuProps {
+  current_sheet_name: string
+  sheets: SerializedSheet[]
+  is_pending: boolean
+  on_edit: () => void
+  on_add_note?: (text: string) => void
+  on_show_add_note_form?: () => void
+  on_resume?: () => void
+  entry_is_active?: boolean
+  on_delete: () => void
+  on_move: (target_sheet_name: string) => void
+}
+
+const menu_item_class =
+  'block w-full cursor-pointer rounded-[0.45rem] border-0 bg-transparent px-2.5 py-1.5 text-left font-inherit text-[0.85rem] text-inherit hover:bg-surface-hover disabled:cursor-not-allowed disabled:opacity-55'
+
+/**
+ * Hamburger menu for entry edit, move, and delete actions.
+ */
+export function EntryActionsMenu({
+  current_sheet_name,
+  sheets,
+  is_pending,
+  on_edit,
+  on_add_note,
+  on_show_add_note_form,
+  on_resume,
+  entry_is_active = false,
+  on_delete,
+  on_move,
+}: EntryActionsMenuProps) {
+  const current_sheet = sheets.find((sheet) => sheet.name === current_sheet_name)
+  const resume_blocked =
+    entry_is_active ||
+    (current_sheet?.hasActiveEntry === true && !entry_is_active)
+  const resume_blocked_reason = entry_is_active
+    ? 'This entry is already active'
+    : 'Another entry is active on this sheet'
+  const other_sheets = sheets.filter(
+    (sheet) => sheet.name !== current_sheet_name,
+  )
+  const [is_open, set_is_open] = useState(false)
+  const menu_ref = useRef<HTMLDivElement>(null)
+
+  useEffect(() => {
+    if (!is_open) {
+      return
+    }
+
+    const handle_pointer_down = (event: PointerEvent): void => {
+      if (
+        menu_ref.current !== null &&
+        !menu_ref.current.contains(event.target as Node)
+      ) {
+        set_is_open(false)
+      }
+    }
+
+    document.addEventListener('pointerdown', handle_pointer_down)
+
+    return () => {
+      document.removeEventListener('pointerdown', handle_pointer_down)
+    }
+  }, [is_open])
+
+  const close_menu = (): void => {
+    set_is_open(false)
+  }
+
+  return (
+    <div className="relative shrink-0" ref={menu_ref}>
+      <button
+        type="button"
+        className="inline-flex cursor-pointer appearance-none items-center justify-center rounded-none border-0 bg-transparent p-0.5 text-muted shadow-none hover:opacity-75 focus-visible:outline-2 focus-visible:outline-input-focus-border focus-visible:outline-offset-2 disabled:cursor-not-allowed disabled:opacity-55"
+        aria-label="Entry actions"
+        aria-expanded={is_open}
+        aria-haspopup="menu"
+        disabled={is_pending}
+        onClick={() => set_is_open((open) => !open)}
+      >
+        <HamburgerIcon />
+      </button>
+      {is_open ? (
+        <ul
+          className="absolute right-0 top-full z-10 mt-1.5 min-w-56 list-none rounded-md border border-panel-border bg-panel p-1.5 shadow-md"
+          role="menu"
+        >
+          <li role="none">
+            <button
+              type="button"
+              className={menu_item_class}
+              role="menuitem"
+              disabled={is_pending}
+              onClick={() => {
+                close_menu()
+                on_edit()
+              }}
+            >
+              Edit times
+            </button>
+          </li>
+          {on_show_add_note_form !== undefined || on_add_note !== undefined ? (
+            <li role="none">
+              <button
+                type="button"
+                className={menu_item_class}
+                role="menuitem"
+                disabled={is_pending}
+                onClick={() => {
+                  close_menu()
+
+                  if (on_show_add_note_form !== undefined) {
+                    on_show_add_note_form()
+                    return
+                  }
+
+                  const text = prompt_entry_note()
+
+                  if (text !== null && on_add_note !== undefined) {
+                    on_add_note(text)
+                  }
+                }}
+              >
+                Add note
+              </button>
+            </li>
+          ) : null}
+          {on_resume !== undefined ? (
+            <li role="none">
+              <button
+                type="button"
+                className={menu_item_class}
+                role="menuitem"
+                disabled={is_pending || resume_blocked}
+                title={resume_blocked ? resume_blocked_reason : undefined}
+                onClick={() => {
+                  close_menu()
+                  on_resume()
+                }}
+              >
+                Resume
+              </button>
+            </li>
+          ) : null}
+          <li className="my-1 border-t border-panel-border" role="separator" aria-hidden="true" />
+          <li role="none">
+            <p className="m-0 px-2.5 py-0.5 text-[0.72rem] font-semibold uppercase tracking-[0.04em] text-muted">
+              Move to sheet
+            </p>
+          </li>
+          {other_sheets.length === 0 ? (
+            <li role="none">
+              <button type="button" className={menu_item_class} role="menuitem" disabled>
+                No other sheets
+              </button>
+            </li>
+          ) : (
+            other_sheets.map((sheet) => (
+              <li key={sheet.name} role="none">
+                <button
+                  type="button"
+                  className={`${menu_item_class} pl-4`}
+                  role="menuitem"
+                  disabled={is_pending || sheet.hasActiveEntry}
+                  title={
+                    sheet.hasActiveEntry
+                      ? 'That sheet already has an active entry'
+                      : undefined
+                  }
+                  onClick={() => {
+                    close_menu()
+                    on_move(sheet.name)
+                  }}
+                >
+                  {sheet.name}
+                </button>
+              </li>
+            ))
+          )}
+          <li className="my-1 border-t border-panel-border" role="separator" aria-hidden="true" />
+          <li role="none">
+            <button
+              type="button"
+              className={`${menu_item_class} text-danger`}
+              role="menuitem"
+              disabled={is_pending}
+              onClick={() => {
+                close_menu()
+                on_delete()
+              }}
+            >
+              Delete
+            </button>
+          </li>
+        </ul>
+      ) : null}
+    </div>
+  )
+}

package/components/entry-edit-form.tsx

@@ -0,0 +1,113 @@
+'use client'
+
+import { type FormEvent, useState } from 'react'
+
+import { format_datetime_hint } from '@/components/format_datetime_hint'
+import { get_button_class_name } from '@/lib/get_button_class_name'
+import { get_input_class_name } from '@/lib/get_input_class_name'
+import { type SerializedEntry } from '@/lib/types/tracker_state'
+
+export interface EntryEditFormValues {
+  start?: string
+  end?: string
+}
+
+interface EntryEditFormProps {
+  entry: SerializedEntry
+  is_pending: boolean
+  in_active_panel?: boolean
+  on_save: (values: EntryEditFormValues) => void
+  on_cancel: () => void
+}
+
+/**
+ * Form for editing an entry's start and end times with natural language.
+ */
+export function EntryEditForm({
+  entry,
+  is_pending,
+  in_active_panel = false,
+  on_save,
+  on_cancel,
+}: EntryEditFormProps) {
+  const [start, set_start] = useState('')
+  const [end, set_end] = useState('')
+
+  const handle_submit = (event: FormEvent<HTMLFormElement>): void => {
+    event.preventDefault()
+
+    const trimmed_start = start.trim()
+    const trimmed_end = end.trim()
+
+    if (trimmed_start.length === 0 && trimmed_end.length === 0) {
+      return
+    }
+
+    on_save({
+      ...(trimmed_start.length > 0 ? { start: trimmed_start } : {}),
+      ...(trimmed_end.length > 0 ? { end: trimmed_end } : {}),
+    })
+  }
+
+  const end_hint = entry.isActive
+    ? 'still running'
+    : format_datetime_hint(entry.end ?? entry.start)
+
+  return (
+    <form
+      className={`flex flex-col gap-3 rounded-[0.65rem] border border-panel-border bg-input-bg p-3 ${in_active_panel ? 'mt-2' : ''}`}
+      onSubmit={handle_submit}
+    >
+      <p className="m-0 text-[0.85rem] font-semibold">Edit times</p>
+      <div className="grid grid-cols-2 gap-2.5 max-[860px]:grid-cols-1">
+        <label className="flex flex-col gap-1" htmlFor={`entry-start-${entry.id}`}>
+          <span className="text-[0.8rem] font-semibold">Start</span>
+          <span className="text-[0.72rem] text-muted">
+            Current: {format_datetime_hint(entry.start)}
+          </span>
+          <input
+            id={`entry-start-${entry.id}`}
+            className={get_input_class_name('compact')}
+            value={start}
+            onChange={(event) => set_start(event.target.value)}
+            placeholder="e.g. 10am, 30 minutes ago"
+            disabled={is_pending}
+          />
+        </label>
+        <label className="flex flex-col gap-1" htmlFor={`entry-end-${entry.id}`}>
+          <span className="text-[0.8rem] font-semibold">End</span>
+          <span className="text-[0.72rem] text-muted">Current: {end_hint}</span>
+          <input
+            id={`entry-end-${entry.id}`}
+            className={get_input_class_name('compact')}
+            value={end}
+            onChange={(event) => set_end(event.target.value)}
+            placeholder={
+              entry.isActive ? 'e.g. now, 5 minutes ago' : 'e.g. 11:30am'
+            }
+            disabled={is_pending}
+          />
+        </label>
+      </div>
+      <div className="flex flex-wrap gap-2">
+        <button
+          type="submit"
+          className={get_button_class_name('primary', 'small')}
+          disabled={
+            is_pending || (start.trim().length === 0 && end.trim().length === 0)
+          }
+        >
+          Save
+        </button>
+        <button
+          type="button"
+          className={get_button_class_name('ghost', 'small')}
+          disabled={is_pending}
+          onClick={on_cancel}
+        >
+          Cancel
+        </button>
+      </div>
+    </form>
+  )
+}

package/components/entry-list-bulk-bar.tsx

@@ -0,0 +1,128 @@
+'use client'
+
+import { useState } from 'react'
+
+import { Checkbox } from '@/components/checkbox'
+import { get_button_class_name } from '@/lib/get_button_class_name'
+import { get_input_class_name } from '@/lib/get_input_class_name'
+import {
+  type SerializedEntry,
+  type SerializedSheet,
+} from '@/lib/types/tracker_state'
+
+interface EntryListBulkBarProps {
+  selected_count: number
+  total_count: number
+  all_selected: boolean
+  some_selected: boolean
+  selected_entries: SerializedEntry[]
+  sheets: SerializedSheet[]
+  is_pending: boolean
+  on_toggle_all: () => void
+  on_move: (target_sheet_name: string) => void
+  on_delete: () => void
+  on_clear: () => void
+}
+
+/**
+ * Header takeover for bulk actions when entries are selected.
+ */
+export function EntryListBulkBar({
+  selected_count,
+  total_count,
+  all_selected,
+  some_selected,
+  selected_entries,
+  sheets,
+  is_pending,
+  on_toggle_all,
+  on_move,
+  on_delete,
+  on_clear,
+}: EntryListBulkBarProps) {
+  const [target_sheet_name, set_target_sheet_name] = useState('')
+  const has_active_selection = selected_entries.some((entry) => entry.isActive)
+  const movable_sheets = sheets.filter((sheet) => {
+    if (has_active_selection && sheet.hasActiveEntry) {
+      return false
+    }
+
+    return selected_entries.some((entry) => entry.sheetName !== sheet.name)
+  })
+
+  const handle_move = (): void => {
+    const trimmed = target_sheet_name.trim()
+
+    if (trimmed.length === 0) {
+      return
+    }
+
+    on_move(trimmed)
+    set_target_sheet_name('')
+  }
+
+  return (
+    <div className="flex flex-wrap items-center gap-x-3 gap-y-2 rounded-md border border-accent-border bg-accent-soft px-3 py-2">
+      <Checkbox
+        className="shrink-0"
+        checked={all_selected}
+        indeterminate={some_selected}
+        disabled={is_pending}
+        aria_label={all_selected ? 'Deselect all entries' : 'Select all entries'}
+        on_change={on_toggle_all}
+      />
+      <p className="m-0 shrink-0 text-[0.85rem] font-semibold">
+        {selected_count}
+        <span className="text-muted">{` of ${total_count} selected`}</span>
+      </p>
+      <div className="ml-auto flex flex-wrap items-center gap-2">
+        <div className="flex items-center gap-1.5">
+          <select
+            className={`${get_input_class_name('compact')} min-w-32`}
+            value={target_sheet_name}
+            disabled={is_pending || movable_sheets.length === 0}
+            aria-label="Move to sheet"
+            onChange={(event) => set_target_sheet_name(event.target.value)}
+          >
+            <option value="">Move to…</option>
+            {movable_sheets.map((sheet) => (
+              <option key={sheet.name} value={sheet.name}>
+                {sheet.name}
+              </option>
+            ))}
+          </select>
+          <button
+            type="button"
+            className={get_button_class_name('ghost', 'small')}
+            disabled={
+              is_pending ||
+              target_sheet_name.trim().length === 0 ||
+              movable_sheets.length === 0
+            }
+            onClick={handle_move}
+          >
+            Move
+          </button>
+        </div>
+        <button
+          type="button"
+          className={get_button_class_name('danger', 'small')}
+          disabled={is_pending}
+          onClick={on_delete}
+        >
+          Delete
+        </button>
+        <button
+          type="button"
+          className={`${get_button_class_name('ghost', 'small')} shrink-0`}
+          disabled={is_pending}
+          aria-label="Clear selection"
+          title="Clear selection"
+          onClick={on_clear}
+        >
+          ✕
+        </button>
+      </div>
+    </div>
+  )
+}