super-time-tracker-ui 0.1.2

package/components/tracker-app.tsx

@@ -0,0 +1,338 @@
+'use client'
+
+import { useEffect, useMemo, useRef, useState, useSyncExternalStore } from 'react'
+
+import { CheckInFormCollapsible } from '@/components/check-in-form-collapsible'
+import { EntryTagFilter } from '@/components/entry-tag-filter'
+import { EntryList } from '@/components/entry-list'
+import { SheetSidebar } from '@/components/sheet-sidebar'
+import { TrackerActiveBar } from '@/components/tracker-active-bar'
+import { TrackerDocumentTitle } from '@/components/tracker-document-title'
+import { TrackerTopbar } from '@/components/tracker-topbar'
+import { build_resume_description } from '@/lib/build_resume_description'
+import { collect_tags_from_entries } from '@/lib/collect_tags_from_entries'
+import { filter_entries_by_tags } from '@/lib/filter_entries_by_tags'
+import {
+  get_sheet_tag_filter_server_snapshot,
+  get_sheet_tag_filter_snapshot,
+} from '@/lib/get_sheet_tag_filter_snapshot'
+import { get_serialized_entries_total_ms } from '@/lib/get_serialized_entries_total_ms'
+import { delete_tracker_action } from '@/lib/delete_tracker_action'
+import { patch_tracker_action } from '@/lib/patch_tracker_action'
+import { post_tracker_action } from '@/lib/post_tracker_action'
+import { set_sheet_tag_filter } from '@/lib/set_sheet_tag_filter'
+import { sort_serialized_entries } from '@/lib/sort_serialized_entries'
+import { subscribe_sheet_tag_filters } from '@/lib/subscribe_sheet_tag_filters'
+import { sync_active_sheet_preference } from '@/lib/sync_active_sheet_preference'
+import { use_clear_tag_filters_on_sheet_change } from '@/lib/use_clear_tag_filters_on_sheet_change'
+import { use_entry_list_sort } from '@/lib/use_entry_list_sort'
+import { use_tag_filter_mode } from '@/lib/use_tag_filter_mode'
+import { type EntryEditFormValues } from '@/components/entry-edit-form'
+import { type TrackerState } from '@/lib/types/tracker_state'
+
+interface TrackerAppProps {
+  initial_state: TrackerState
+}
+
+/**
+ * Main client application for the super-time-tracker web UI.
+ */
+export function TrackerApp({ initial_state }: TrackerAppProps) {
+  const [state, set_state] = useState<TrackerState>(initial_state)
+  const [error, set_error] = useState<string | null>(null)
+  const [is_pending, set_is_pending] = useState(false)
+  useEffect(() => {
+    sync_active_sheet_preference(initial_state)
+  }, [initial_state])
+
+  const run_action = async (
+    action: () => Promise<TrackerState>,
+  ): Promise<void> => {
+    set_is_pending(true)
+    set_error(null)
+
+    try {
+      const next_state = await action()
+      sync_active_sheet_preference(next_state)
+      set_state(next_state)
+    } catch (action_error: unknown) {
+      set_error(
+        action_error instanceof Error
+          ? action_error.message
+          : String(action_error),
+      )
+    } finally {
+      set_is_pending(false)
+    }
+  }
+
+  const active_sheet =
+    state.sheets.find((sheet) => sheet.isActive)?.name ?? 'main'
+
+  const tag_filter_mode = use_tag_filter_mode()
+  const entry_list_sort = use_entry_list_sort()
+  const clear_tag_filters_on_sheet_change = use_clear_tag_filters_on_sheet_change()
+  const previous_active_sheet_ref = useRef<string | null>(null)
+
+  useEffect(() => {
+    if (
+      !clear_tag_filters_on_sheet_change ||
+      previous_active_sheet_ref.current === null ||
+      previous_active_sheet_ref.current === active_sheet
+    ) {
+      previous_active_sheet_ref.current = active_sheet
+      return
+    }
+
+    set_sheet_tag_filter(active_sheet, [])
+    previous_active_sheet_ref.current = active_sheet
+  }, [active_sheet, clear_tag_filters_on_sheet_change])
+
+  const filter_tags = useSyncExternalStore(
+    subscribe_sheet_tag_filters,
+    () => get_sheet_tag_filter_snapshot(active_sheet),
+    get_sheet_tag_filter_server_snapshot,
+  )
+
+  const sheet_tags = useMemo(
+    () => collect_tags_from_entries(state.activeSheetEntries),
+    [state.activeSheetEntries],
+  )
+
+  const filtered_entries = useMemo(() => {
+    const matching = filter_entries_by_tags(
+      state.activeSheetEntries,
+      filter_tags,
+      tag_filter_mode,
+    )
+
+    return sort_serialized_entries(matching, entry_list_sort)
+  }, [state.activeSheetEntries, filter_tags, tag_filter_mode, entry_list_sort])
+
+  const filtered_total_ms = useMemo(
+    () => get_serialized_entries_total_ms(filtered_entries),
+    [filtered_entries],
+  )
+
+  const entries_empty_message =
+    filter_tags.length > 0
+      ? tag_filter_mode === 'any'
+        ? `No entries on sheet "${active_sheet}" match any selected tag.`
+        : `No entries on sheet "${active_sheet}" match all selected tags.`
+      : `No entries on sheet "${active_sheet}".`
+
+  const edit_entry = (
+    sheet_name: string,
+    entry_id: number,
+    values: EntryEditFormValues,
+  ): Promise<TrackerState> =>
+    patch_tracker_action('/api/entry', {
+      sheetName: sheet_name,
+      entryId: entry_id,
+      ...values,
+    })
+
+  return (
+    <>
+      <TrackerDocumentTitle active_entry={state.activeEntry} />
+      <div className="relative z-1">
+        <TrackerTopbar />
+        <TrackerActiveBar
+          active_entry={state.activeEntry}
+          sheets={state.sheets}
+          is_pending={is_pending}
+          on_check_out={(at) =>
+            run_action(() =>
+              post_tracker_action('/api/out', {
+                sheetName: active_sheet,
+                ...(at !== undefined ? { at } : {}),
+              }),
+            )
+          }
+          on_delete={() =>
+            run_action(() =>
+              post_tracker_action('/api/entry', {
+                sheetName: active_sheet,
+                entryId: state.activeEntry?.id,
+              }),
+            )
+          }
+          on_edit={(values) =>
+            run_action(() =>
+              edit_entry(active_sheet, state.activeEntry?.id ?? 0, values),
+            )
+          }
+          on_move={(target_sheet_name) =>
+            run_action(() =>
+              post_tracker_action('/api/entry/move', {
+                sheetName: active_sheet,
+                entryId: state.activeEntry?.id,
+                targetSheetName: target_sheet_name,
+              }),
+            )
+          }
+          on_add_note={(text, at) =>
+            run_action(() =>
+              post_tracker_action('/api/note', {
+                text,
+                ...(at !== undefined ? { at } : {}),
+                sheetName: active_sheet,
+                entryId: state.activeEntry?.id,
+              }),
+            )
+          }
+          on_edit_note={(timestamp, text) =>
+            run_action(() =>
+              patch_tracker_action('/api/note', {
+                sheetName: active_sheet,
+                entryId: state.activeEntry?.id,
+                timestamp,
+                text,
+              }),
+            )
+          }
+          on_delete_note={(timestamp) =>
+            run_action(() =>
+              delete_tracker_action('/api/note', {
+                sheetName: active_sheet,
+                entryId: state.activeEntry?.id,
+                timestamp,
+              }),
+            )
+          }
+        />
+      </div>
+      <div className="mx-auto max-w-[1120px] px-5 pb-10 pt-5">
+        {error !== null ? (
+          <p className="mb-4 rounded-[0.65rem] border border-danger-border bg-danger-soft px-3 py-2.5 text-danger-text">
+            {error}
+          </p>
+        ) : null}
+
+        <div className="grid grid-cols-[minmax(16rem,20rem)_minmax(0,1fr)] items-start gap-4 max-[860px]:grid-cols-1">
+          <SheetSidebar
+            sheets={state.sheets}
+            db_path={state.dbPath}
+            is_pending={is_pending}
+            on_select={(name) =>
+              run_action(() => post_tracker_action('/api/sheet', { name }))
+            }
+            on_create={(name) =>
+              run_action(() => post_tracker_action('/api/sheet', { name }))
+            }
+            on_rename={(name, new_name) =>
+              run_action(() =>
+                patch_tracker_action('/api/sheet', { name, newName: new_name }),
+              )
+            }
+            on_delete={(name) =>
+              run_action(() =>
+                post_tracker_action('/api/sheet', { name, delete: true }),
+              )
+            }
+          />
+
+          <main className="flex min-w-0 flex-col gap-4 rounded-lg border border-panel-border bg-panel p-4 shadow-sm">
+            {state.activeEntry === null ? (
+              <CheckInFormCollapsible
+                known_tags={state.knownTags}
+                is_pending={is_pending}
+                on_submit={(values) =>
+                  run_action(() =>
+                    post_tracker_action('/api/in', {
+                      ...values,
+                      sheetName: active_sheet,
+                    }),
+                  )
+                }
+              />
+            ) : null}
+
+            <EntryTagFilter sheet_name={active_sheet} sheet_tags={sheet_tags} />
+
+            <EntryList
+              title="Entries"
+              entries={filtered_entries}
+              sheets={state.sheets}
+              total_ms={filtered_total_ms}
+              empty_message={entries_empty_message}
+              is_pending={is_pending}
+              show_sheet_name={false}
+              on_delete={(entry) =>
+                run_action(() =>
+                  post_tracker_action('/api/entry', {
+                    sheetName: entry.sheetName,
+                    entryId: entry.id,
+                  }),
+                )
+              }
+              on_edit={(entry, values) =>
+                run_action(() => edit_entry(entry.sheetName, entry.id, values))
+              }
+              on_move={(entry, target_sheet_name) =>
+                run_action(() =>
+                  post_tracker_action('/api/entry/move', {
+                    sheetName: entry.sheetName,
+                    entryId: entry.id,
+                    targetSheetName: target_sheet_name,
+                  }),
+                )
+              }
+              on_move_many={(entries, target_sheet_name) =>
+                run_action(() =>
+                  post_tracker_action('/api/entry/move-bulk', {
+                    entries: entries.map((entry) => ({
+                      sheetName: entry.sheetName,
+                      entryId: entry.id,
+                    })),
+                    targetSheetName: target_sheet_name,
+                  }),
+                )
+              }
+              on_delete_many={(entries) =>
+                run_action(() =>
+                  post_tracker_action('/api/entry/delete-bulk', {
+                    entries: entries.map((entry) => ({
+                      sheetName: entry.sheetName,
+                      entryId: entry.id,
+                    })),
+                  }),
+                )
+              }
+              on_edit_note={(entry, timestamp, text) =>
+                run_action(() =>
+                  patch_tracker_action('/api/note', {
+                    sheetName: entry.sheetName,
+                    entryId: entry.id,
+                    timestamp,
+                    text,
+                  }),
+                )
+              }
+              on_add_note={(entry, text) =>
+                run_action(() =>
+                  post_tracker_action('/api/note', {
+                    sheetName: entry.sheetName,
+                    entryId: entry.id,
+                    text,
+                  }),
+                )
+              }
+              on_resume={(entry) =>
+                run_action(() =>
+                  post_tracker_action('/api/in', {
+                    description: build_resume_description(
+                      entry.description,
+                      entry.tags,
+                    ),
+                    sheetName: entry.sheetName,
+                  }),
+                )
+              }
+            />
+          </main>
+        </div>
+      </div>
+    </>
+  )
+}

package/components/tracker-breadcrumb.tsx

@@ -0,0 +1,56 @@
+import Link from 'next/link'
+
+export interface TrackerBreadcrumbSegment {
+  label: string
+  href?: string
+}
+
+interface TrackerBreadcrumbProps {
+  current: string
+  parent?: TrackerBreadcrumbSegment
+}
+
+/**
+ * Breadcrumb trail from the tracker home to a sub-page.
+ */
+export function TrackerBreadcrumb({ current, parent }: TrackerBreadcrumbProps) {
+  return (
+    <nav aria-label="Breadcrumb" className="min-w-0 text-left">
+      <ol className="m-0 flex list-none flex-wrap items-center gap-1.5 p-0 text-[0.85rem]">
+        <li>
+          <Link
+            className="text-muted no-underline hover:text-foreground"
+            href="/"
+          >
+            Tracker
+          </Link>
+        </li>
+        {parent !== undefined ? (
+          <>
+            <li className="text-muted" aria-hidden="true">
+              /
+            </li>
+            <li>
+              {parent.href !== undefined ? (
+                <Link
+                  className="text-muted no-underline hover:text-foreground"
+                  href={parent.href}
+                >
+                  {parent.label}
+                </Link>
+              ) : (
+                <span className="text-muted">{parent.label}</span>
+              )}
+            </li>
+          </>
+        ) : null}
+        <li className="text-muted" aria-hidden="true">
+          /
+        </li>
+        <li className="font-medium text-foreground" aria-current="page">
+          {current}
+        </li>
+      </ol>
+    </nav>
+  )
+}

package/components/tracker-document-title.tsx

@@ -0,0 +1,67 @@
+'use client'
+
+import { useEffect, useState } from 'react'
+
+import { format_duration } from '@/lib/format_duration'
+import { use_duration_format } from '@/lib/use_duration_format'
+import { use_timer_in_title } from '@/lib/use_timer_in_title'
+import { use_timer_show_seconds } from '@/lib/use_timer_show_seconds'
+import { type SerializedEntry } from '@/lib/types/tracker_state'
+
+interface TrackerDocumentTitleProps {
+  active_entry: SerializedEntry | null
+}
+
+const base_title = 'super-time-tracker'
+
+/**
+ * Updates the document title with the live timer when enabled.
+ */
+export function TrackerDocumentTitle({ active_entry }: TrackerDocumentTitleProps) {
+  const timer_in_title = use_timer_in_title()
+  const duration_format = use_duration_format()
+  const show_seconds = use_timer_show_seconds()
+  const [duration_ms, set_duration_ms] = useState(
+    active_entry?.durationMs ?? 0,
+  )
+
+  useEffect(() => {
+    if (active_entry === null) {
+      set_duration_ms(0)
+      return
+    }
+
+    set_duration_ms(active_entry.durationMs)
+
+    const interval = window.setInterval(() => {
+      set_duration_ms(Date.now() - new Date(active_entry.start).getTime())
+    }, 1000)
+
+    return () => window.clearInterval(interval)
+  }, [active_entry])
+
+  useEffect(() => {
+    if (!timer_in_title || active_entry === null) {
+      document.title = base_title
+      return
+    }
+
+    const label =
+      active_entry.description.trim() || 'Tracking'
+    const duration = format_duration(duration_ms, duration_format, show_seconds)
+
+    document.title = `${duration} — ${label}`
+
+    return () => {
+      document.title = base_title
+    }
+  }, [
+    active_entry,
+    duration_format,
+    duration_ms,
+    show_seconds,
+    timer_in_title,
+  ])
+
+  return null
+}

package/components/tracker-topbar.tsx

@@ -0,0 +1,63 @@
+'use client'
+
+import Link from 'next/link'
+
+import { ThemeSwitcher } from '@/components/theme_switcher'
+import {
+  TrackerBreadcrumb,
+  type TrackerBreadcrumbSegment,
+} from '@/components/tracker-breadcrumb'
+
+export interface TrackerTopbarBreadcrumb {
+  current: string
+  parent?: TrackerBreadcrumbSegment
+}
+
+interface TrackerTopbarProps {
+  breadcrumb?: TrackerTopbarBreadcrumb
+}
+
+/**
+ * Sticky app navbar with branding, breadcrumbs, and theme switcher.
+ */
+export function TrackerTopbar({ breadcrumb }: TrackerTopbarProps = {}) {
+  return (
+    <header className="relative z-1 border-b border-panel-border bg-[color-mix(in_srgb,var(--panel)_92%,var(--background))] shadow-sm backdrop-blur-[10px]">
+      <div className="mx-auto flex max-w-[1120px] min-h-13 flex-wrap items-center gap-x-4 gap-y-2 px-5">
+        <span className="inline-flex shrink-0 items-center font-mono text-[0.72rem] font-semibold uppercase leading-tight tracking-[0.08em] text-accent whitespace-nowrap">
+          super-time-tracker
+        </span>
+        {breadcrumb !== undefined ? (
+          <TrackerBreadcrumb current={breadcrumb.current} parent={breadcrumb.parent} />
+        ) : null}
+        <div className="ml-auto flex shrink-0 items-center justify-end gap-2">
+          <Link
+            className="rounded-full px-3 py-1.5 text-[0.85rem] font-semibold text-muted no-underline hover:bg-surface-hover hover:text-foreground"
+            href="/"
+          >
+            Tracker
+          </Link>
+          <Link
+            className="rounded-full px-3 py-1.5 text-[0.85rem] font-semibold text-muted no-underline hover:bg-surface-hover hover:text-foreground"
+            href="/reporting"
+          >
+            Reporting
+          </Link>
+          <Link
+            className="rounded-full px-3 py-1.5 text-[0.85rem] font-semibold text-muted no-underline hover:bg-surface-hover hover:text-foreground"
+            href="/settings/tags"
+          >
+            Manage tags
+          </Link>
+          <Link
+            className="rounded-full px-3 py-1.5 text-[0.85rem] font-semibold text-muted no-underline hover:bg-surface-hover hover:text-foreground"
+            href="/settings"
+          >
+            Settings
+          </Link>
+          <ThemeSwitcher />
+        </div>
+      </div>
+    </header>
+  )
+}

package/components/trash-icon.tsx

@@ -0,0 +1,24 @@
+/**
+ * Renders a small trash icon for delete actions.
+ */
+export function TrashIcon() {
+  return (
+    <svg
+      className="h-[0.85rem] w-[0.85rem]"
+      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="M3 6h18" />
+      <path d="M8 6V4h8v2" />
+      <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6" />
+      <path d="M10 11v6" />
+      <path d="M14 11v6" />
+    </svg>
+  )
+}

package/components/week-starts-on-setting.tsx

@@ -0,0 +1,39 @@
+'use client'
+
+import { useSyncExternalStore } from 'react'
+
+import { SettingRadioGroup } from '@/components/setting-radio-group'
+import { week_starts_on_preference } from '@/lib/preferences/week_starts_on_preference'
+import { persist_ui_preference } from '@/lib/persist_ui_preference'
+import { type WeekStartsOn } from '@/lib/types/ui_preferences'
+
+const options: { value: WeekStartsOn; label: string; description: string }[] = [
+  { value: 'monday', label: 'Monday', description: 'ISO 8601 week (default).' },
+  { value: 'sunday', label: 'Sunday', description: 'US-style week.' },
+]
+
+const set_week_starts_on = (value: WeekStartsOn): void => {
+  persist_ui_preference(week_starts_on_preference, value)
+}
+
+/**
+ * Setting: which day starts a week in reporting shortcuts.
+ */
+export function WeekStartsOnSetting() {
+  const value = useSyncExternalStore(
+    week_starts_on_preference.subscribe,
+    week_starts_on_preference.get_snapshot,
+    week_starts_on_preference.get_server_snapshot,
+  )
+
+  return (
+    <SettingRadioGroup<WeekStartsOn>
+      name="week-starts-on"
+      legend="Week starts on"
+      description={'Used for the "this week" reporting shortcuts and totals.'}
+      value={value}
+      options={options}
+      on_change={set_week_starts_on}
+    />
+  )
+}

package/eslint.config.mjs

@@ -0,0 +1,18 @@
+import { defineConfig, globalIgnores } from "eslint/config";
+import nextVitals from "eslint-config-next/core-web-vitals";
+import nextTs from "eslint-config-next/typescript";
+
+const eslintConfig = defineConfig([
+  ...nextVitals,
+  ...nextTs,
+  // Override default ignores of eslint-config-next.
+  globalIgnores([
+    // Default ignores of eslint-config-next:
+    ".next/**",
+    "out/**",
+    "build/**",
+    "next-env.d.ts",
+  ]),
+]);
+
+export default eslintConfig;

package/lib/add_note_to_entry.ts

@@ -0,0 +1,65 @@
+import { find_sheet_with_active_entry } from "@/lib/find_sheet_with_active_entry";
+import { get_sheet } from "@/lib/get_sheet";
+import { parse_natural_language_date } from "@/lib/parse_natural_language_date";
+import { read_db } from "@/lib/read_db";
+import { write_db } from "@/lib/write_db";
+
+export interface AddNoteToEntryArgs {
+  text: string;
+  sheet_name?: string;
+  entry_id?: number;
+  at?: string;
+}
+
+/**
+ * Appends a timestamped note to the active or specified entry.
+ */
+export async function add_note_to_entry(
+  args: AddNoteToEntryArgs,
+): Promise<void> {
+  const {
+    text,
+    at,
+    entry_id: input_entry_id,
+    sheet_name: input_sheet_name,
+  } = args;
+  const db = await read_db();
+  const sheet =
+    input_sheet_name !== undefined && input_sheet_name.length > 0
+      ? get_sheet(db, input_sheet_name)
+      : find_sheet_with_active_entry(db);
+
+  if (sheet === null) {
+    throw new Error("No active sheet");
+  }
+
+  const { name: sheet_name } = sheet;
+  const entry_id = input_entry_id ?? sheet.activeEntryID;
+
+  if (entry_id === null) {
+    throw new Error(`Sheet ${sheet_name} has no active entry`);
+  }
+
+  const entry = sheet.entries.find(({ id }) => id === entry_id);
+
+  if (entry === undefined) {
+    throw new Error(`Entry ${entry_id} not found in sheet ${sheet_name}`);
+  }
+
+  const note_timestamp =
+    at === undefined || at.trim().length === 0
+      ? new Date()
+      : parse_natural_language_date(at);
+  const latest_allowed = entry.end ?? new Date();
+
+  if (+note_timestamp < +entry.start) {
+    throw new Error("Note time must be on or after entry start");
+  }
+
+  if (+note_timestamp > +latest_allowed) {
+    throw new Error("Note time must be on or before entry end");
+  }
+
+  entry.notes.push({ timestamp: note_timestamp, text });
+  await write_db(db);
+}

package/lib/api_error_response.ts

@@ -0,0 +1,10 @@
+import { NextResponse } from "next/server";
+
+/**
+ * Builds a JSON error response from an unknown thrown value.
+ */
+export function api_error_response(error: unknown, status = 400): NextResponse {
+  const message = error instanceof Error ? error.message : String(error);
+
+  return NextResponse.json({ error: message }, { status });
+}