super-time-tracker-ui 0.1.2

package/components/tag-management-view.tsx

@@ -0,0 +1,290 @@
+'use client'
+
+import { useMemo, useState } from 'react'
+
+import { use_confirm_dialog } from '@/components/confirm-dialog-provider'
+import { SettingsPageLayout } from '@/components/settings-page-layout'
+import { TagAutocompleteInput } from '@/components/tag-autocomplete-input'
+import { format_display_tag } from '@/lib/format_display_tag'
+import { get_button_class_name } from '@/lib/get_button_class_name'
+import { get_input_class_name } from '@/lib/get_input_class_name'
+import { get_merge_tags_confirm_dialog } from '@/lib/get_merge_tags_confirm_dialog'
+import { type TagStat } from '@/lib/types/tag_management'
+
+interface TagManagementViewProps {
+  initial_tags: TagStat[]
+}
+
+/**
+ * Manages renaming and merging tags across all time entries.
+ */
+export function TagManagementView({ initial_tags }: TagManagementViewProps) {
+  const { confirm } = use_confirm_dialog()
+  const [tags, set_tags] = useState<TagStat[]>(initial_tags)
+  const [selected_tags, set_selected_tags] = useState<Set<string>>(() => new Set())
+  const [rename_values, set_rename_values] = useState<Record<string, string>>({})
+  const [merge_target, set_merge_target] = useState('')
+  const [error, set_error] = useState<string | null>(null)
+  const [status_message, set_status_message] = useState<string | null>(null)
+  const [is_pending, set_is_pending] = useState(false)
+
+  const known_tag_names = useMemo(() => tags.map((tag) => tag.name), [tags])
+
+  const selected_tag_stats = tags.filter((tag) => selected_tags.has(tag.name))
+  const selected_entry_count = selected_tag_stats.reduce(
+    (total, tag) => total + tag.entryCount,
+    0,
+  )
+
+  const toggle_selected = (tag_name: string): void => {
+    set_selected_tags((previous) => {
+      const next = new Set(previous)
+
+      if (next.has(tag_name)) {
+        next.delete(tag_name)
+      } else {
+        next.add(tag_name)
+      }
+
+      return next
+    })
+  }
+
+  const patch_tags = async (body: Record<string, unknown>): Promise<void> => {
+    const response = await fetch('/api/tags', {
+      method: 'PATCH',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify(body),
+    })
+
+    if (!response.ok) {
+      const payload = (await response.json()) as { error?: string }
+      throw new Error(payload.error ?? 'Tag update failed')
+    }
+
+    const result = (await response.json()) as {
+      tags: TagStat[]
+      entries_updated: number
+    }
+
+    set_tags(result.tags)
+    set_selected_tags(new Set())
+    set_status_message(
+      result.entries_updated === 1
+        ? 'Updated 1 entry.'
+        : `Updated ${result.entries_updated} entries.`,
+    )
+  }
+
+  const handle_rename = async (from_tag: string): Promise<void> => {
+    const to_tag = rename_values[from_tag]?.trim() ?? ''
+
+    if (to_tag.length === 0) {
+      set_error('Enter a new tag name.')
+      return
+    }
+
+    const source_stat = tags.find((tag) => tag.name === from_tag)
+
+    if (source_stat === undefined) {
+      return
+    }
+
+    const target_stat = tags.find(
+      (tag) => format_display_tag(tag.name) === format_display_tag(to_tag),
+    )
+    const affected_entries =
+      target_stat !== undefined && target_stat.name !== from_tag
+        ? source_stat.entryCount + target_stat.entryCount
+        : source_stat.entryCount
+
+    const confirmed = await confirm(
+      get_merge_tags_confirm_dialog([from_tag], to_tag, affected_entries),
+    )
+
+    if (!confirmed) {
+      return
+    }
+
+    set_is_pending(true)
+    set_error(null)
+    set_status_message(null)
+
+    try {
+      await patch_tags({
+        action: 'rename',
+        fromTag: from_tag,
+        toTag: to_tag,
+      })
+      set_rename_values((previous) => {
+        const next = { ...previous }
+        delete next[from_tag]
+        return next
+      })
+    } catch (rename_error: unknown) {
+      set_error(
+        rename_error instanceof Error ? rename_error.message : String(rename_error),
+      )
+    } finally {
+      set_is_pending(false)
+    }
+  }
+
+  const handle_merge = async (): Promise<void> => {
+    const source_tags = [...selected_tags]
+
+    if (source_tags.length < 2) {
+      set_error('Select at least two tags to merge.')
+      return
+    }
+
+    if (merge_target.trim().length === 0) {
+      set_error('Enter a target tag for the merge.')
+      return
+    }
+
+    const confirmed = await confirm(
+      get_merge_tags_confirm_dialog(
+        source_tags,
+        merge_target,
+        selected_entry_count,
+      ),
+    )
+
+    if (!confirmed) {
+      return
+    }
+
+    set_is_pending(true)
+    set_error(null)
+    set_status_message(null)
+
+    try {
+      await patch_tags({
+        action: 'merge',
+        sourceTags: source_tags,
+        targetTag: merge_target,
+      })
+      set_merge_target('')
+    } catch (merge_error: unknown) {
+      set_error(
+        merge_error instanceof Error ? merge_error.message : String(merge_error),
+      )
+    } finally {
+      set_is_pending(false)
+    }
+  }
+
+  return (
+    <SettingsPageLayout
+      breadcrumb={{
+        current: 'Tag management',
+        parent: { label: 'Settings', href: '/settings' },
+      }}
+      title="Tag management"
+      description="Rename or merge tags across every entry in your database."
+    >
+
+        <section className="rounded-md border border-panel-border bg-panel p-3.5 shadow-sm">
+          <h2 className="m-0 text-[0.95rem] font-semibold">Merge tags</h2>
+          <p className="m-0 mt-1 text-[0.8rem] leading-snug text-muted">
+            Select two or more tags below, then choose the tag they should become.
+          </p>
+          <label className="mt-3 flex flex-col gap-1 text-[0.82rem] text-muted">
+            Target tag
+            <TagAutocompleteInput
+              id="merge-target-tag"
+              value={merge_target}
+              known_tags={known_tag_names}
+              placeholder="e.g. @project"
+              disabled={is_pending}
+              on_change={set_merge_target}
+            />
+          </label>
+          <button
+            type="button"
+            className={`${get_button_class_name('primary', 'small')} mt-3`}
+            disabled={is_pending || selected_tags.size < 2}
+            onClick={() => void handle_merge()}
+          >
+            Merge {selected_tags.size} tags
+          </button>
+        </section>
+
+        {tags.length === 0 ? (
+          <p className="m-0 text-[0.9rem] text-muted">
+            No tags yet. Add @tags when you check in to an entry.
+          </p>
+        ) : (
+          <ul
+            className="m-0 flex list-none flex-col gap-2 p-0"
+            aria-label="Tags"
+          >
+            {tags.map((tag) => (
+              <li
+                key={tag.name}
+                className="rounded-md border border-panel-border bg-panel px-3.5 py-2.5 shadow-sm"
+              >
+                <form
+                  className="flex flex-wrap items-center gap-x-3 gap-y-2"
+                  onSubmit={(event) => {
+                    event.preventDefault()
+                    void handle_rename(tag.name)
+                  }}
+                >
+                  <input
+                    type="checkbox"
+                    className="shrink-0"
+                    checked={selected_tags.has(tag.name)}
+                    disabled={is_pending}
+                    aria-label={`Select ${format_display_tag(tag.name)}`}
+                    onChange={() => toggle_selected(tag.name)}
+                  />
+                  <div className="flex min-w-0 shrink-0 flex-wrap items-baseline gap-x-2 gap-y-0.5">
+                    <span className="font-semibold leading-tight">
+                      {format_display_tag(tag.name)}
+                    </span>
+                    <span className="text-[0.82rem] text-muted">
+                      {tag.entryCount}{' '}
+                      {tag.entryCount === 1 ? 'entry' : 'entries'}
+                    </span>
+                  </div>
+                  <div className="ml-auto flex min-w-[min(100%,14rem)] flex-1 basis-56 items-center justify-end gap-2 sm:max-w-xs">
+                    <input
+                      className={get_input_class_name('compact')}
+                      value={rename_values[tag.name] ?? ''}
+                      placeholder="Rename to…"
+                      aria-label={`Rename ${format_display_tag(tag.name)}`}
+                      disabled={is_pending}
+                      onChange={(event) =>
+                        set_rename_values((previous) => ({
+                          ...previous,
+                          [tag.name]: event.target.value,
+                        }))
+                      }
+                    />
+                    <button
+                      type="submit"
+                      className={`${get_button_class_name('ghost', 'small')} shrink-0`}
+                      disabled={
+                        is_pending || (rename_values[tag.name]?.trim().length ?? 0) === 0
+                      }
+                    >
+                      Rename
+                    </button>
+                  </div>
+                </form>
+              </li>
+            ))}
+          </ul>
+        )}
+
+        {status_message !== null ? (
+          <p className="m-0 text-[0.9rem] text-accent">{status_message}</p>
+        ) : null}
+        {error !== null ? (
+          <p className="m-0 text-[0.9rem] text-danger">{error}</p>
+        ) : null}
+    </SettingsPageLayout>
+  )
+}

package/components/theme-mode-setting.tsx

@@ -0,0 +1,44 @@
+'use client'
+
+import { useSyncExternalStore } from 'react'
+
+import { SettingRadioGroup } from '@/components/setting-radio-group'
+import { theme_mode_preference } from '@/lib/preferences/theme_mode_preference'
+import { notify_settings_saved } from '@/lib/notify_settings_saved'
+import { set_theme_mode } from '@/lib/set_theme_mode'
+import { type ThemeMode } from '@/lib/types/ui_preferences'
+
+const options: { value: ThemeMode; label: string; description: string }[] = [
+  { value: 'light', label: 'Light', description: 'Always use the light theme.' },
+  { value: 'dark', label: 'Dark', description: 'Always use the dark theme.' },
+  {
+    value: 'system',
+    label: 'System',
+    description: 'Match the operating system preference.',
+  },
+]
+
+/**
+ * Setting: light / dark / system theme preference.
+ */
+export function ThemeModeSetting() {
+  const mode = useSyncExternalStore(
+    theme_mode_preference.subscribe,
+    theme_mode_preference.get_snapshot,
+    theme_mode_preference.get_server_snapshot,
+  )
+
+  return (
+    <SettingRadioGroup<ThemeMode>
+      name="theme-mode"
+      legend="Light / dark mode"
+      description="Choose light, dark, or match the system. The topbar toggle flips light and dark."
+      value={mode}
+      options={options}
+      on_change={(mode) => {
+        set_theme_mode(mode)
+        notify_settings_saved()
+      }}
+    />
+  )
+}

package/components/theme-mode-system-listener.tsx

@@ -0,0 +1,43 @@
+'use client'
+
+import { useEffect } from 'react'
+
+import { apply_theme } from '@/lib/apply_theme'
+import { notify_theme_subscribers } from '@/lib/subscribe_theme'
+import { resolve_theme_mode_to_theme } from '@/lib/resolve_theme_mode_to_theme'
+import { theme_mode_preference } from '@/lib/preferences/theme_mode_preference'
+import { write_stored_theme } from '@/lib/write_stored_theme'
+
+/**
+ * Listens to OS-level theme changes and re-applies the theme when the
+ * user's mode preference is "system".
+ */
+export function ThemeModeSystemListener() {
+  useEffect(() => {
+    if (typeof window === 'undefined') {
+      return
+    }
+
+    const media = window.matchMedia('(prefers-color-scheme: light)')
+
+    const handle_change = (): void => {
+      if (theme_mode_preference.read() !== 'system') {
+        return
+      }
+
+      const resolved = resolve_theme_mode_to_theme('system')
+
+      apply_theme(resolved)
+      write_stored_theme(resolved)
+      notify_theme_subscribers()
+    }
+
+    media.addEventListener('change', handle_change)
+
+    return () => {
+      media.removeEventListener('change', handle_change)
+    }
+  }, [])
+
+  return null
+}

package/components/theme_switcher.tsx

@@ -0,0 +1,38 @@
+'use client'
+
+import { useSyncExternalStore } from 'react'
+
+import { get_theme_server_snapshot, get_theme_snapshot } from '@/lib/get_theme_snapshot'
+import { subscribe_theme } from '@/lib/subscribe_theme'
+import { toggle_theme } from '@/lib/toggle_theme'
+
+/**
+ * Toggles between light and dark themes.
+ */
+export function ThemeSwitcher() {
+  const theme = useSyncExternalStore(
+    subscribe_theme,
+    get_theme_snapshot,
+    get_theme_server_snapshot,
+  )
+
+  const active_label = theme === 'dark' ? 'Dark' : 'Light'
+  const switch_label =
+    theme === 'dark' ? 'Switch to light theme' : 'Switch to dark theme'
+
+  return (
+    <button
+      type="button"
+      className="inline-flex cursor-pointer items-center gap-1.5 rounded-full border border-panel-border bg-ghost-bg px-3 py-1.5 font-inherit text-[0.85rem] font-semibold text-inherit hover:bg-surface-hover disabled:cursor-wait disabled:opacity-60"
+      onClick={toggle_theme}
+      aria-label={`${active_label} theme. ${switch_label}`}
+      title={switch_label}
+      suppressHydrationWarning
+    >
+      <span className="text-base leading-none" aria-hidden="true">
+        {theme === 'dark' ? '☾' : '☀'}
+      </span>
+      <span suppressHydrationWarning>{active_label}</span>
+    </button>
+  )
+}

package/components/time-format-setting.tsx

@@ -0,0 +1,39 @@
+'use client'
+
+import { useSyncExternalStore } from 'react'
+
+import { SettingRadioGroup } from '@/components/setting-radio-group'
+import { time_format_preference } from '@/lib/preferences/time_format_preference'
+import { persist_ui_preference } from '@/lib/persist_ui_preference'
+import { type TimeFormat } from '@/lib/types/ui_preferences'
+
+const options: { value: TimeFormat; label: string; description: string }[] = [
+  { value: '12h', label: '12-hour', description: 'e.g. 6:34 PM' },
+  { value: '24h', label: '24-hour', description: 'e.g. 18:34' },
+]
+
+const set_time_format = (value: TimeFormat): void => {
+  persist_ui_preference(time_format_preference, value)
+}
+
+/**
+ * Setting: 12-hour vs 24-hour time display.
+ */
+export function TimeFormatSetting() {
+  const value = useSyncExternalStore(
+    time_format_preference.subscribe,
+    time_format_preference.get_snapshot,
+    time_format_preference.get_server_snapshot,
+  )
+
+  return (
+    <SettingRadioGroup<TimeFormat>
+      name="time-format"
+      legend="Time format"
+      description="Used for entry start/end times and notes timestamps."
+      value={value}
+      options={options}
+      on_change={set_time_format}
+    />
+  )
+}

package/components/timer-in-title-setting.tsx

@@ -0,0 +1,38 @@
+'use client'
+
+import { useSyncExternalStore } from 'react'
+
+import { timer_in_title_preference } from '@/lib/preferences/timer_in_title_preference'
+import { persist_ui_preference } from '@/lib/persist_ui_preference'
+
+const set_timer_in_title = (enabled: boolean): void => {
+  persist_ui_preference(timer_in_title_preference, enabled ? 'true' : 'false')
+}
+
+/**
+ * Setting: show the live timer in the browser tab title.
+ */
+export function TimerInTitleSetting() {
+  const value = useSyncExternalStore(
+    timer_in_title_preference.subscribe,
+    timer_in_title_preference.get_snapshot,
+    timer_in_title_preference.get_server_snapshot,
+  )
+
+  return (
+    <label className="flex w-full cursor-pointer items-center gap-2.5">
+      <input
+        type="checkbox"
+        className="shrink-0"
+        checked={value === 'true'}
+        onChange={(event) => set_timer_in_title(event.target.checked)}
+      />
+      <span className="flex flex-col gap-0.5">
+        <span className="text-[0.95rem] font-semibold">Timer in tab title</span>
+        <span className="text-[0.8rem] leading-snug text-muted">
+          Show elapsed time in the browser tab while a timer is running.
+        </span>
+      </span>
+    </label>
+  )
+}

package/components/timer-show-seconds-setting.tsx

@@ -0,0 +1,41 @@
+'use client'
+
+import { useSyncExternalStore } from 'react'
+
+import { timer_show_seconds_preference } from '@/lib/preferences/timer_show_seconds_preference'
+import { persist_ui_preference } from '@/lib/persist_ui_preference'
+
+const set_timer_show_seconds = (enabled: boolean): void => {
+  persist_ui_preference(
+    timer_show_seconds_preference,
+    enabled ? 'true' : 'false',
+  )
+}
+
+/**
+ * Setting: show seconds on the active timer display.
+ */
+export function TimerShowSecondsSetting() {
+  const value = useSyncExternalStore(
+    timer_show_seconds_preference.subscribe,
+    timer_show_seconds_preference.get_snapshot,
+    timer_show_seconds_preference.get_server_snapshot,
+  )
+
+  return (
+    <label className="flex w-full cursor-pointer items-center gap-2.5">
+      <input
+        type="checkbox"
+        className="shrink-0"
+        checked={value === 'true'}
+        onChange={(event) => set_timer_show_seconds(event.target.checked)}
+      />
+      <span className="flex flex-col gap-0.5">
+        <span className="text-[0.95rem] font-semibold">Show seconds on timer</span>
+        <span className="text-[0.8rem] leading-snug text-muted">
+          Include seconds on the live active timer (humanized duration format).
+        </span>
+      </span>
+    </label>
+  )
+}

package/components/tracker-active-bar.tsx

@@ -0,0 +1,76 @@
+'use client'
+
+import { ActiveEntryPanel } from '@/components/active-entry-panel'
+import { type EntryEditFormValues } from '@/components/entry-edit-form'
+import {
+  type SerializedEntry,
+  type SerializedSheet,
+} from '@/lib/types/tracker_state'
+
+interface TrackerActiveBarProps {
+  active_entry: SerializedEntry | null
+  sheets: SerializedSheet[]
+  is_pending: boolean
+  on_check_out: (at?: string) => void
+  on_delete: () => void
+  on_edit: (values: EntryEditFormValues) => void
+  on_move: (target_sheet_name: string) => void
+  on_add_note: (text: string, at?: string) => void
+  on_edit_note: (timestamp: string, text: string) => void
+  on_delete_note: (timestamp: string) => void
+}
+
+const section_label_class =
+  'text-[0.72rem] font-semibold uppercase tracking-[0.04em] text-muted whitespace-nowrap'
+
+const tracking_pill_class =
+  'shrink-0 rounded-full bg-accent px-2 py-0.5 text-[0.68rem] font-bold uppercase leading-none tracking-wider text-accent-text-on'
+
+/**
+ * Full-width header region for the active sheet and running entry controls.
+ */
+export function TrackerActiveBar({
+  active_entry,
+  sheets,
+  is_pending,
+  on_check_out,
+  on_delete,
+  on_edit,
+  on_move,
+  on_add_note,
+  on_edit_note,
+  on_delete_note,
+}: TrackerActiveBarProps) {
+  return (
+    <div className="w-full border-b border-panel-border bg-[color-mix(in_srgb,var(--accent-soft)_55%,var(--panel))]">
+      <div className="mx-auto flex w-full max-w-[1120px] flex-col gap-3 px-5 py-3.5 max-[860px]:gap-2.5 max-[860px]:py-3">
+        {active_entry !== null ? (
+          <div className="flex flex-col gap-2">
+            <div className="flex min-w-0 flex-wrap items-center gap-2">
+              <span className={`${section_label_class} truncate`}>
+                Sheet {active_entry.sheetName}
+              </span>
+              <span className={tracking_pill_class}>Tracking</span>
+            </div>
+            <ActiveEntryPanel
+              key={`${active_entry.sheetName}-${active_entry.id}`}
+              entry={active_entry}
+              sheets={sheets}
+              in_bar
+              is_pending={is_pending}
+              on_check_out={on_check_out}
+              on_delete={on_delete}
+              on_edit={on_edit}
+              on_move={on_move}
+              on_add_note={on_add_note}
+              on_edit_note={on_edit_note}
+              on_delete_note={on_delete_note}
+            />
+          </div>
+        ) : (
+          <p className="m-0 text-[0.85rem] leading-tight text-muted">Not tracking</p>
+        )}
+      </div>
+    </div>
+  )
+}