super-time-tracker-ui 0.1.2

package/components/chevron-icon.tsx

@@ -0,0 +1,25 @@
+interface ChevronIconProps {
+  rotated?: boolean
+  className?: string
+}
+
+/**
+ * Renders a chevron for expand/collapse controls.
+ */
+export function ChevronIcon({ rotated = false, className = '' }: ChevronIconProps) {
+  return (
+    <svg
+      className={`h-3 w-3 shrink-0 transition-transform duration-150 ${rotated ? 'rotate-90' : ''} ${className}`.trim()}
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      aria-hidden="true"
+    >
+      <path d="m9 18 6-6-6-6" />
+    </svg>
+  )
+}

package/components/clear-tag-filters-on-sheet-change-setting.tsx

@@ -0,0 +1,45 @@
+'use client'
+
+import { useSyncExternalStore } from 'react'
+
+import { clear_tag_filters_on_sheet_change_preference } from '@/lib/preferences/clear_tag_filters_on_sheet_change_preference'
+import { persist_ui_preference } from '@/lib/persist_ui_preference'
+
+const set_clear_tag_filters_on_sheet_change = (enabled: boolean): void => {
+  persist_ui_preference(
+    clear_tag_filters_on_sheet_change_preference,
+    enabled ? 'true' : 'false',
+  )
+}
+
+/**
+ * Setting: reset tag filters when switching sheets.
+ */
+export function ClearTagFiltersOnSheetChangeSetting() {
+  const value = useSyncExternalStore(
+    clear_tag_filters_on_sheet_change_preference.subscribe,
+    clear_tag_filters_on_sheet_change_preference.get_snapshot,
+    clear_tag_filters_on_sheet_change_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_clear_tag_filters_on_sheet_change(event.target.checked)
+        }
+      />
+      <span className="flex flex-col gap-0.5">
+        <span className="text-[0.95rem] font-semibold">
+          Clear tag filters on sheet change
+        </span>
+        <span className="text-[0.8rem] leading-snug text-muted">
+          Remove tag filters when you switch to another sheet.
+        </span>
+      </span>
+    </label>
+  )
+}

package/components/color-palette-setting.tsx

@@ -0,0 +1,75 @@
+'use client'
+
+import { useSyncExternalStore } from 'react'
+
+import { SettingRadioGroup } from '@/components/setting-radio-group'
+import { notify_settings_saved } from '@/lib/notify_settings_saved'
+import { color_palette_preference } from '@/lib/preferences/color_palette_preference'
+import { set_color_palette } from '@/lib/set_color_palette'
+import { type ColorPalette } from '@/lib/types/ui_preferences'
+
+const options: {
+  value: ColorPalette
+  label: string
+  description: string
+}[] = [
+  {
+    value: 'default',
+    label: 'Default',
+    description: 'Balanced blue-gray surfaces for light and dark.',
+  },
+  {
+    value: 'midnight',
+    label: 'Midnight',
+    description: 'Cooler, deeper backgrounds with crisp panels.',
+  },
+  {
+    value: 'warm',
+    label: 'Warm',
+    description: 'Stone and sepia tones, easy on the eyes.',
+  },
+  {
+    value: 'ocean',
+    label: 'Ocean',
+    description: 'Soft blue-tinted surfaces and shadows.',
+  },
+  {
+    value: 'forest',
+    label: 'Forest',
+    description: 'Muted green-gray backgrounds.',
+  },
+  {
+    value: 'contrast',
+    label: 'High contrast',
+    description: 'Stronger text and border contrast for readability.',
+  },
+]
+
+/**
+ * Setting: base color palette for light and dark themes.
+ */
+export function ColorPaletteSetting() {
+  const value = useSyncExternalStore(
+    color_palette_preference.subscribe,
+    color_palette_preference.get_snapshot,
+    color_palette_preference.get_server_snapshot,
+  )
+
+  return (
+    <SettingRadioGroup<ColorPalette>
+      name="color-palette"
+      legend="Color palette"
+      description="Backgrounds, surfaces, and highlight colors for light and dark mode."
+      value={value}
+      options={options}
+      on_change={(palette) => {
+        if (palette === value) {
+          return
+        }
+
+        set_color_palette(palette)
+        notify_settings_saved()
+      }}
+    />
+  )
+}

package/components/compact-lists-setting.tsx

@@ -0,0 +1,42 @@
+'use client'
+
+import { useSyncExternalStore } from 'react'
+
+import {
+  get_compact_lists_server_snapshot,
+  get_compact_lists_snapshot,
+} from '@/lib/get_compact_lists_snapshot'
+import { notify_settings_saved } from '@/lib/notify_settings_saved'
+import { set_compact_lists } from '@/lib/set_compact_lists'
+import { subscribe_compact_lists } from '@/lib/subscribe_compact_lists'
+
+/**
+ * Toggles denser entry list rows without rounded corners.
+ */
+export function CompactListsSetting() {
+  const compact_lists = useSyncExternalStore(
+    subscribe_compact_lists,
+    get_compact_lists_snapshot,
+    get_compact_lists_server_snapshot,
+  )
+
+  return (
+    <label className="flex w-full cursor-pointer items-center gap-2.5">
+      <input
+        type="checkbox"
+        className="shrink-0"
+        checked={compact_lists}
+        onChange={(event) => {
+          set_compact_lists(event.target.checked)
+          notify_settings_saved()
+        }}
+      />
+      <span className="flex flex-col gap-0.5">
+        <span className="text-[0.95rem] font-semibold">Compact lists</span>
+        <span className="text-[0.8rem] leading-snug text-muted">
+          Flatter, tighter rows in the sheet entry list
+        </span>
+      </span>
+    </label>
+  )
+}

package/components/confirm-before-checkout-setting.tsx

@@ -0,0 +1,42 @@
+'use client'
+
+import { useSyncExternalStore } from 'react'
+
+import { confirm_before_checkout_preference } from '@/lib/preferences/confirm_before_checkout_preference'
+import { persist_ui_preference } from '@/lib/persist_ui_preference'
+
+const set_confirm_before_checkout = (enabled: boolean): void => {
+  persist_ui_preference(
+    confirm_before_checkout_preference,
+    enabled ? 'true' : 'false',
+  )
+}
+
+/**
+ * Setting: ask for confirmation before checking out of an active timer.
+ */
+export function ConfirmBeforeCheckoutSetting() {
+  const value = useSyncExternalStore(
+    confirm_before_checkout_preference.subscribe,
+    confirm_before_checkout_preference.get_snapshot,
+    confirm_before_checkout_preference.get_server_snapshot,
+  )
+  const is_enabled = value === 'true'
+
+  return (
+    <label className="flex w-full cursor-pointer items-center gap-2.5">
+      <input
+        type="checkbox"
+        className="shrink-0"
+        checked={is_enabled}
+        onChange={(event) => set_confirm_before_checkout(event.target.checked)}
+      />
+      <span className="flex flex-col gap-0.5">
+        <span className="text-[0.95rem] font-semibold">Confirm before checkout</span>
+        <span className="text-[0.8rem] leading-snug text-muted">
+          Show a confirmation dialog when you stop the active timer.
+        </span>
+      </span>
+    </label>
+  )
+}

package/components/confirm-destructive-actions-setting.tsx

@@ -0,0 +1,46 @@
+'use client'
+
+import { useSyncExternalStore } from 'react'
+
+import { confirm_destructive_actions_preference } from '@/lib/preferences/confirm_destructive_actions_preference'
+import { persist_ui_preference } from '@/lib/persist_ui_preference'
+
+const set_confirm_destructive_actions = (enabled: boolean): void => {
+  persist_ui_preference(
+    confirm_destructive_actions_preference,
+    enabled ? 'true' : 'false',
+  )
+}
+
+/**
+ * Setting: ask for confirmation before deleting entries or sheets.
+ */
+export function ConfirmDestructiveActionsSetting() {
+  const value = useSyncExternalStore(
+    confirm_destructive_actions_preference.subscribe,
+    confirm_destructive_actions_preference.get_snapshot,
+    confirm_destructive_actions_preference.get_server_snapshot,
+  )
+  const is_enabled = value === 'true'
+
+  return (
+    <label className="flex w-full cursor-pointer items-center gap-2.5">
+      <input
+        type="checkbox"
+        className="shrink-0"
+        checked={is_enabled}
+        onChange={(event) =>
+          set_confirm_destructive_actions(event.target.checked)
+        }
+      />
+      <span className="flex flex-col gap-0.5">
+        <span className="text-[0.95rem] font-semibold">
+          Confirm destructive actions
+        </span>
+        <span className="text-[0.8rem] leading-snug text-muted">
+          Ask before deleting entries or sheets. Turn off for fast mode.
+        </span>
+      </span>
+    </label>
+  )
+}

package/components/confirm-dialog-provider.tsx

@@ -0,0 +1,71 @@
+'use client'
+
+import {
+  createContext,
+  type ReactNode,
+  useCallback,
+  useContext,
+  useState,
+} from 'react'
+
+import { ConfirmDialog } from '@/components/confirm-dialog'
+import { type ConfirmDialogOptions } from '@/lib/types/confirm_dialog'
+
+interface ConfirmDialogRequest {
+  options: ConfirmDialogOptions
+  resolve: (confirmed: boolean) => void
+}
+
+interface ConfirmDialogContextValue {
+  confirm: (options: ConfirmDialogOptions) => Promise<boolean>
+}
+
+const ConfirmDialogContext = createContext<ConfirmDialogContextValue | null>(null)
+
+/**
+ * Returns the promise-based confirm dialog API from context.
+ */
+export function use_confirm_dialog(): ConfirmDialogContextValue {
+  const context = useContext(ConfirmDialogContext)
+
+  if (context === null) {
+    throw new Error('use_confirm_dialog must be used within ConfirmDialogProvider')
+  }
+
+  return context
+}
+
+interface ConfirmDialogProviderProps {
+  children: ReactNode
+}
+
+/**
+ * Provides a themed confirm dialog for the application tree.
+ */
+export function ConfirmDialogProvider({ children }: ConfirmDialogProviderProps) {
+  const [request, set_request] = useState<ConfirmDialogRequest | null>(null)
+
+  const confirm = useCallback((options: ConfirmDialogOptions): Promise<boolean> => {
+    return new Promise<boolean>((resolve) => {
+      set_request({ options, resolve })
+    })
+  }, [])
+
+  const close = (confirmed: boolean): void => {
+    request?.resolve(confirmed)
+    set_request(null)
+  }
+
+  return (
+    <ConfirmDialogContext.Provider value={{ confirm }}>
+      {children}
+      {request !== null ? (
+        <ConfirmDialog
+          options={request.options}
+          on_confirm={() => close(true)}
+          on_cancel={() => close(false)}
+        />
+      ) : null}
+    </ConfirmDialogContext.Provider>
+  )
+}

package/components/confirm-dialog.tsx

@@ -0,0 +1,90 @@
+'use client'
+
+import { useEffect, useId, useRef } from 'react'
+
+import { get_button_class_name } from '@/lib/get_button_class_name'
+import { type ConfirmDialogOptions } from '@/lib/types/confirm_dialog'
+
+interface ConfirmDialogProps {
+  options: ConfirmDialogOptions
+  on_confirm: () => void
+  on_cancel: () => void
+}
+
+/**
+ * Themed modal dialog for destructive or important confirmations.
+ */
+export function ConfirmDialog({
+  options,
+  on_confirm,
+  on_cancel,
+}: ConfirmDialogProps) {
+  const title_id = useId()
+  const confirm_ref = useRef<HTMLButtonElement>(null)
+  const {
+    cancelLabel = 'Cancel',
+    confirmLabel = 'Confirm',
+    message,
+    title,
+    variant = 'default',
+  } = options
+  const confirm_variant = variant === 'danger' ? 'danger' : 'primary'
+
+  useEffect(() => {
+    confirm_ref.current?.focus()
+
+    const handle_key_down = (event: KeyboardEvent): void => {
+      if (event.key === 'Escape') {
+        on_cancel()
+      }
+    }
+
+    document.addEventListener('keydown', handle_key_down)
+
+    return () => {
+      document.removeEventListener('keydown', handle_key_down)
+    }
+  }, [on_cancel])
+
+  return (
+    <div
+      className="fixed inset-0 z-100 flex items-center justify-center p-5"
+      role="presentation"
+    >
+      <button
+        type="button"
+        className="absolute inset-0 cursor-default border-0 bg-overlay p-0"
+        aria-label="Dismiss dialog"
+        onClick={on_cancel}
+      />
+      <div
+        role="dialog"
+        aria-modal="true"
+        aria-labelledby={title_id}
+        className="relative z-1 w-full max-w-md rounded-lg border border-panel-border bg-panel p-5 shadow-md"
+      >
+        <h2 id={title_id} className="m-0 text-[1.1rem] font-[650] tracking-tight">
+          {title}
+        </h2>
+        <p className="m-0 mt-2 text-[0.9rem] leading-relaxed text-muted">{message}</p>
+        <div className="mt-5 flex flex-wrap justify-end gap-2">
+          <button
+            type="button"
+            className={get_button_class_name('ghost')}
+            onClick={on_cancel}
+          >
+            {cancelLabel}
+          </button>
+          <button
+            ref={confirm_ref}
+            type="button"
+            className={get_button_class_name(confirm_variant)}
+            onClick={on_confirm}
+          >
+            {confirmLabel}
+          </button>
+        </div>
+      </div>
+    </div>
+  )
+}

package/components/data-settings-view.tsx

@@ -0,0 +1,47 @@
+import Link from 'next/link'
+
+import { BackupRestoreSetting } from '@/components/backup-restore-setting'
+import { SettingsPageLayout } from '@/components/settings-page-layout'
+
+interface DataSettingsViewProps {
+  db_path: string
+}
+
+/**
+ * Settings page: backup, restore, and tag management entry point.
+ */
+export function DataSettingsView({ db_path }: DataSettingsViewProps) {
+  return (
+    <SettingsPageLayout
+      breadcrumb={{
+        current: 'Data & backup',
+        parent: { label: 'Settings', href: '/settings' },
+      }}
+      title="Data & backup"
+      description="Database backups and bulk operations on stored entries."
+    >
+      <ul
+        className="m-0 flex w-full list-none flex-col gap-2 p-0"
+        aria-label="Data settings"
+      >
+        <li className="rounded-md border border-panel-border bg-panel p-3.5 shadow-sm">
+          <BackupRestoreSetting db_path={db_path} />
+        </li>
+        <li className="rounded-md border border-panel-border bg-panel p-3.5 shadow-sm">
+          <div className="flex flex-col gap-0.5">
+            <span className="text-[0.95rem] font-semibold">Tag management</span>
+            <span className="text-[0.8rem] leading-snug text-muted">
+              Rename or merge @tags used across all entries.
+            </span>
+            <Link
+              className="mt-2 self-start text-[0.85rem] font-semibold text-accent no-underline hover:underline"
+              href="/settings/tags"
+            >
+              Manage tags
+            </Link>
+          </div>
+        </li>
+      </ul>
+    </SettingsPageLayout>
+  )
+}

package/components/default-reporting-range-setting.tsx

@@ -0,0 +1,56 @@
+'use client'
+
+import { useSyncExternalStore } from 'react'
+
+import { SettingRadioGroup } from '@/components/setting-radio-group'
+import { default_reporting_range_preference } from '@/lib/preferences/default_reporting_range_preference'
+import { persist_ui_preference } from '@/lib/persist_ui_preference'
+import { type DefaultReportingRange } from '@/lib/types/ui_preferences'
+
+const options: {
+  value: DefaultReportingRange
+  label: string
+  description: string
+}[] = [
+  {
+    value: 'none',
+    label: 'All time',
+    description: 'Open with no date filter applied.',
+  },
+  {
+    value: 'today',
+    label: 'Today',
+    description: 'Pre-select today’s date range.',
+  },
+  {
+    value: 'week',
+    label: 'This week',
+    description: 'Pre-select the current week (respects week starts on).',
+  },
+]
+
+const set_default_reporting_range = (value: DefaultReportingRange): void => {
+  persist_ui_preference(default_reporting_range_preference, value)
+}
+
+/**
+ * Setting: initial date range when opening reporting.
+ */
+export function DefaultReportingRangeSetting() {
+  const value = useSyncExternalStore(
+    default_reporting_range_preference.subscribe,
+    default_reporting_range_preference.get_snapshot,
+    default_reporting_range_preference.get_server_snapshot,
+  )
+
+  return (
+    <SettingRadioGroup<DefaultReportingRange>
+      name="default-reporting-range"
+      legend="Default reporting range"
+      description="Date filter applied when you open the Reporting page."
+      value={value}
+      options={options}
+      on_change={set_default_reporting_range}
+    />
+  )
+}

package/components/default-reporting-sort-setting.tsx

@@ -0,0 +1,45 @@
+'use client'
+
+import { useSyncExternalStore } from 'react'
+
+import { SettingRadioGroup } from '@/components/setting-radio-group'
+import { default_reporting_sort_preference } from '@/lib/preferences/default_reporting_sort_preference'
+import { persist_ui_preference } from '@/lib/persist_ui_preference'
+import { type DefaultReportingSort } from '@/lib/types/ui_preferences'
+
+const options: {
+  value: DefaultReportingSort
+  label: string
+  description?: string
+}[] = [
+  { value: 'duration', label: 'Duration' },
+  { value: 'name', label: 'Name' },
+  { value: 'entry_count', label: 'Entries' },
+  { value: 'active_first', label: 'Active first' },
+]
+
+const set_default_reporting_sort = (value: DefaultReportingSort): void => {
+  persist_ui_preference(default_reporting_sort_preference, value)
+}
+
+/**
+ * Setting: default sort order for the reporting view.
+ */
+export function DefaultReportingSortSetting() {
+  const value = useSyncExternalStore(
+    default_reporting_sort_preference.subscribe,
+    default_reporting_sort_preference.get_snapshot,
+    default_reporting_sort_preference.get_server_snapshot,
+  )
+
+  return (
+    <SettingRadioGroup<DefaultReportingSort>
+      name="default-reporting-sort"
+      legend="Default reporting sort"
+      description="The Reporting view opens with this sort selected."
+      value={value}
+      options={options}
+      on_change={set_default_reporting_sort}
+    />
+  )
+}