super-time-tracker-ui 0.1.2

package/app/api/tags/route.ts

@@ -0,0 +1,75 @@
+import { NextResponse } from 'next/server'
+
+import { api_error_response } from '@/lib/api_error_response'
+import { collect_tag_stats } from '@/lib/collect_tag_stats'
+import { merge_tags_across_db } from '@/lib/merge_tags_across_db'
+import { read_db } from '@/lib/read_db'
+import { rename_tag_across_db } from '@/lib/rename_tag_across_db'
+
+interface RenameTagBody {
+  action: 'rename'
+  fromTag?: string
+  toTag?: string
+}
+
+interface MergeTagsBody {
+  action: 'merge'
+  sourceTags?: string[]
+  targetTag?: string
+}
+
+type TagMutationBody = RenameTagBody | MergeTagsBody
+
+/**
+ * Returns tag usage statistics for the tag management screen.
+ */
+export async function GET(): Promise<NextResponse> {
+  try {
+    const db = await read_db()
+
+    return NextResponse.json({ tags: collect_tag_stats(db) })
+  } catch (error: unknown) {
+    return api_error_response(error, 500)
+  }
+}
+
+/**
+ * Renames or merges tags across all entries.
+ */
+export async function PATCH(request: Request): Promise<NextResponse> {
+  try {
+    const body = (await request.json()) as TagMutationBody
+
+    if (body.action === 'rename') {
+      const from_tag = body.fromTag?.trim() ?? ''
+      const to_tag = body.toTag?.trim() ?? ''
+
+      if (from_tag.length === 0 || to_tag.length === 0) {
+        return api_error_response(new Error('Both tag names are required.'))
+      }
+
+      const result = await rename_tag_across_db(from_tag, to_tag)
+
+      return NextResponse.json(result)
+    }
+
+    if (body.action === 'merge') {
+      const source_tags = body.sourceTags ?? []
+      const target_tag = body.targetTag?.trim() ?? ''
+
+      if (source_tags.length === 0 || target_tag.length === 0) {
+        return api_error_response(
+          new Error('Source tags and a target tag are required.'),
+        )
+      }
+
+      const result = await merge_tags_across_db(source_tags, target_tag)
+
+      return NextResponse.json(result)
+    }
+
+    return api_error_response(new Error('Unknown tag action.'))
+  } catch (error: unknown) {
+    return api_error_response(error, 400)
+  }
+}

package/app/color-palettes.css

@@ -0,0 +1,260 @@
+/* Midnight — cool, deep */
+[data-theme='dark'][data-palette='midnight'] {
+  --background: #05070b;
+  --foreground: #e4eaf4;
+  --panel: #0c1018;
+  --panel-border: #1e2838;
+  --surface-raised: #111722;
+  --surface-hover: #182030;
+  --muted: #8a97ad;
+  --input-bg: #080c12;
+  --ghost-bg: #151d2a;
+  --tag-bg: #1a2434;
+  --tag-text: #b4c2d8;
+  --overlay: #0000008c;
+  --accent: #60a5fa;
+  --accent-soft: #0e2240;
+  --accent-border: #60a5fa55;
+  --accent-text-on: #0b1a32;
+  --input-focus-border: #60a5fa88;
+  --active-panel-bg: linear-gradient(160deg, #0e2240 0%, #0c1018 55%);
+  --body-gradient: radial-gradient(
+    ellipse 80% 50% at 50% -10%,
+    #152238 0%,
+    transparent 70%
+  );
+}
+
+[data-theme='light'][data-palette='midnight'] {
+  --background: #e4e9f2;
+  --foreground: #0c1424;
+  --panel: #f8fafc;
+  --panel-border: #c5d0e2;
+  --surface-raised: #eef2f8;
+  --surface-hover: #e2e8f2;
+  --muted: #4f5f78;
+  --input-bg: #ffffff;
+  --ghost-bg: #e8edf5;
+  --tag-bg: #dce4f0;
+  --tag-text: #2a3a52;
+  --overlay: #0c142466;
+  --accent: #2563eb;
+  --accent-soft: #eff6ff;
+  --accent-border: #93c5fd55;
+  --accent-text-on: #ffffff;
+  --input-focus-border: #2563eb88;
+  --active-panel-bg: linear-gradient(160deg, #eff6ff 0%, #f8fafc 50%);
+  --body-gradient: radial-gradient(
+    ellipse 80% 50% at 50% -10%,
+    #c8d8f0 0%,
+    transparent 70%
+  );
+}
+
+/* Warm — stone / sepia */
+[data-theme='dark'][data-palette='warm'] {
+  --background: #100e0c;
+  --foreground: #f0ebe3;
+  --panel: #1a1714;
+  --panel-border: #322c26;
+  --surface-raised: #211e1a;
+  --surface-hover: #2c2722;
+  --muted: #a89a8c;
+  --input-bg: #141210;
+  --ghost-bg: #252019;
+  --tag-bg: #2e2820;
+  --tag-text: #d4c8b8;
+  --overlay: #00000080;
+  --accent: #fbbf24;
+  --accent-soft: #3a2a0a;
+  --accent-border: #fbbf2455;
+  --accent-text-on: #422006;
+  --input-focus-border: #fbbf2488;
+  --active-panel-bg: linear-gradient(160deg, #3a2a0a 0%, #1a1714 55%);
+  --body-gradient: radial-gradient(
+    ellipse 80% 50% at 50% -10%,
+    #3a2a18 0%,
+    transparent 70%
+  );
+}
+
+[data-theme='light'][data-palette='warm'] {
+  --background: #f3ede4;
+  --foreground: #1c1814;
+  --panel: #fffdf9;
+  --panel-border: #ddd4c8;
+  --surface-raised: #f8f4ec;
+  --surface-hover: #efe8dc;
+  --muted: #6b5f52;
+  --input-bg: #ffffff;
+  --ghost-bg: #f0e8dc;
+  --tag-bg: #e8dfd0;
+  --tag-text: #4a4034;
+  --overlay: #1c181466;
+  --accent: #b45309;
+  --accent-soft: #fffbeb;
+  --accent-border: #fcd34d55;
+  --accent-text-on: #ffffff;
+  --input-focus-border: #b4530988;
+  --active-panel-bg: linear-gradient(160deg, #fffbeb 0%, #fffdf9 50%);
+  --body-gradient: radial-gradient(
+    ellipse 80% 50% at 50% -10%,
+    #ead9c0 0%,
+    transparent 70%
+  );
+}
+
+/* Ocean — blue-tinted */
+[data-theme='dark'][data-palette='ocean'] {
+  --background: #061018;
+  --foreground: #e2edf5;
+  --panel: #0c1620;
+  --panel-border: #1a2a3c;
+  --surface-raised: #101c28;
+  --surface-hover: #162636;
+  --muted: #88a0b4;
+  --input-bg: #081018;
+  --ghost-bg: #142030;
+  --tag-bg: #1a2c40;
+  --tag-text: #b8cce0;
+  --overlay: #00000085;
+  --accent: #38bdf8;
+  --accent-soft: #0c2a40;
+  --accent-border: #38bdf855;
+  --accent-text-on: #082032;
+  --input-focus-border: #38bdf888;
+  --active-panel-bg: linear-gradient(160deg, #0c2a40 0%, #0c1620 55%);
+  --body-gradient: radial-gradient(
+    ellipse 80% 50% at 50% -10%,
+    #123050 0%,
+    transparent 70%
+  );
+}
+
+[data-theme='light'][data-palette='ocean'] {
+  --background: #e2eff8;
+  --foreground: #0a1828;
+  --panel: #f8fcff;
+  --panel-border: #c4d8ea;
+  --surface-raised: #eef6fc;
+  --surface-hover: #e0eef8;
+  --muted: #4a6478;
+  --input-bg: #ffffff;
+  --ghost-bg: #e4f0fa;
+  --tag-bg: #d4e8f4;
+  --tag-text: #2a4860;
+  --overlay: #0a182866;
+  --accent: #0284c7;
+  --accent-soft: #e0f2fe;
+  --accent-border: #7dd3fc55;
+  --accent-text-on: #ffffff;
+  --input-focus-border: #0284c788;
+  --active-panel-bg: linear-gradient(160deg, #e0f2fe 0%, #f8fcff 50%);
+  --body-gradient: radial-gradient(
+    ellipse 80% 50% at 50% -10%,
+    #b8daf0 0%,
+    transparent 70%
+  );
+}
+
+/* Forest — green-gray */
+[data-theme='dark'][data-palette='forest'] {
+  --background: #080e0a;
+  --foreground: #e4ede6;
+  --panel: #101814;
+  --panel-border: #1e2e24;
+  --surface-raised: #141e18;
+  --surface-hover: #1a2a20;
+  --muted: #8aa494;
+  --input-bg: #0a100c;
+  --ghost-bg: #162018;
+  --tag-bg: #1c2e22;
+  --tag-text: #b8d0be;
+  --overlay: #00000080;
+  --accent: #34d399;
+  --accent-soft: #0d2f25;
+  --accent-border: #34d39955;
+  --accent-text-on: #022c22;
+  --input-focus-border: #34d39988;
+  --active-panel-bg: linear-gradient(160deg, #0d2f25 0%, #101814 55%);
+  --body-gradient: radial-gradient(
+    ellipse 80% 50% at 50% -10%,
+    #143020 0%,
+    transparent 70%
+  );
+}
+
+[data-theme='light'][data-palette='forest'] {
+  --background: #eaf2ec;
+  --foreground: #0e1a12;
+  --panel: #f9fbf9;
+  --panel-border: #c8dcd0;
+  --surface-raised: #f0f6f2;
+  --surface-hover: #e4eee6;
+  --muted: #4a6454;
+  --input-bg: #ffffff;
+  --ghost-bg: #e6f0e8;
+  --tag-bg: #d8e8dc;
+  --tag-text: #2a4434;
+  --overlay: #0e1a1266;
+  --accent: #047857;
+  --accent-soft: #ecfdf5;
+  --accent-border: #6ee7b755;
+  --accent-text-on: #ffffff;
+  --input-focus-border: #04785788;
+  --active-panel-bg: linear-gradient(160deg, #ecfdf5 0%, #f9fbf9 50%);
+  --body-gradient: radial-gradient(
+    ellipse 80% 50% at 50% -10%,
+    #c4e0cc 0%,
+    transparent 70%
+  );
+}
+
+/* High contrast */
+[data-theme='dark'][data-palette='contrast'] {
+  --background: #000000;
+  --foreground: #ffffff;
+  --panel: #121212;
+  --panel-border: #5a5a5a;
+  --surface-raised: #1a1a1a;
+  --surface-hover: #262626;
+  --muted: #c8c8c8;
+  --input-bg: #0a0a0a;
+  --ghost-bg: #222222;
+  --tag-bg: #2e2e2e;
+  --tag-text: #f0f0f0;
+  --overlay: #000000b3;
+  --accent: #ffffff;
+  --accent-soft: #333333;
+  --accent-border: #ffffff66;
+  --accent-text-on: #000000;
+  --input-focus-border: #ffffff88;
+  --active-panel-bg: linear-gradient(160deg, #1a1a1a 0%, #121212 55%);
+  --shadow-sm: 0 1px 2px #00000080;
+  --shadow-md: 0 8px 24px #000000a0;
+  --body-gradient: none;
+}
+
+[data-theme='light'][data-palette='contrast'] {
+  --background: #ffffff;
+  --foreground: #000000;
+  --panel: #f5f5f5;
+  --panel-border: #404040;
+  --surface-raised: #eeeeee;
+  --surface-hover: #e0e0e0;
+  --muted: #333333;
+  --input-bg: #ffffff;
+  --ghost-bg: #e8e8e8;
+  --tag-bg: #d8d8d8;
+  --tag-text: #111111;
+  --overlay: #00000040;
+  --accent: #000000;
+  --accent-soft: #e0e0e0;
+  --accent-border: #00000044;
+  --accent-text-on: #ffffff;
+  --input-focus-border: #00000088;
+  --active-panel-bg: linear-gradient(160deg, #eeeeee 0%, #f5f5f5 50%);
+  --shadow-sm: 0 1px 2px #00000020;
+  --shadow-md: 0 8px 24px #00000030;
+  --body-gradient: none;
+}

package/app/globals.css

@@ -0,0 +1,140 @@
+@import 'tailwindcss';
+@import './color-palettes.css';
+
+@custom-variant compact (&:is([data-compact-lists='true'], [data-compact-lists='true'] *));
+
+[data-theme='dark'] {
+  color-scheme: dark;
+  --background: #090b10;
+  --foreground: #e8edf5;
+  --panel: #12161f;
+  --panel-border: #252f42;
+  --surface-raised: #171d28;
+  --surface-hover: #1e2634;
+  --muted: #8b98ad;
+  --accent: #5eead4;
+  --accent-soft: #0f2e2b;
+  --accent-border: #2dd4bf55;
+  --accent-text-on: #042f2e;
+  --danger: #fb7185;
+  --danger-soft: #3a1520;
+  --danger-border: #fb718544;
+  --danger-text: #fecdd3;
+  --input-bg: #0d1118;
+  --ghost-bg: #1a2230;
+  --tag-bg: #1f2a3d;
+  --tag-text: #b9c7de;
+  --overlay: #00000080;
+  --active-panel-bg: linear-gradient(160deg, #0f2420 0%, #12161f 55%);
+  --body-gradient: radial-gradient(ellipse 80% 50% at 50% -10%, #1a2a40 0%, transparent 70%);
+  --input-focus-border: #2dd4bf88;
+  --shadow-sm: 0 1px 2px #00000040;
+  --shadow-md: 0 8px 24px #00000055;
+  --radius-sm: 0.5rem;
+  --radius-md: 0.75rem;
+  --radius-lg: 1rem;
+}
+
+[data-theme='light'] {
+  color-scheme: light;
+  --background: #eef1f6;
+  --foreground: #0f1729;
+  --panel: #ffffff;
+  --panel-border: #d8e0ec;
+  --surface-raised: #f8fafc;
+  --surface-hover: #eef2f7;
+  --muted: #5c6b82;
+  --accent: #0d9488;
+  --accent-soft: #ecfdf5;
+  --accent-border: #99f6e455;
+  --accent-text-on: #ffffff;
+  --danger: #e11d48;
+  --danger-soft: #fff1f2;
+  --danger-border: #fecdd3;
+  --danger-text: #9f1239;
+  --input-bg: #ffffff;
+  --ghost-bg: #f1f5f9;
+  --tag-bg: #e8eef6;
+  --tag-text: #3d4f66;
+  --overlay: #0f172966;
+  --active-panel-bg: linear-gradient(160deg, #ecfdf5 0%, #ffffff 50%);
+  --body-gradient: radial-gradient(ellipse 80% 50% at 50% -10%, #dbeafe 0%, transparent 70%);
+  --input-focus-border: #0d948888;
+  --shadow-sm: 0 1px 2px #0f172912;
+  --shadow-md: 0 10px 30px #0f172918;
+  --radius-sm: 0.5rem;
+  --radius-md: 0.75rem;
+  --radius-lg: 1rem;
+}
+
+html[data-theme='dark'],
+html[data-theme='light'] {
+  min-height: 100%;
+  background-color: var(--background);
+  background-image: var(--body-gradient);
+  background-repeat: no-repeat;
+  background-attachment: fixed;
+  color: var(--foreground);
+  accent-color: var(--accent);
+}
+
+body {
+  min-height: 100%;
+  background-color: transparent;
+  color: inherit;
+}
+
+a {
+  color: var(--accent);
+}
+
+:focus-visible {
+  outline: 2px solid var(--accent);
+  outline-offset: 2px;
+}
+
+::selection {
+  background: var(--accent-soft);
+  color: var(--foreground);
+}
+
+input::placeholder,
+textarea::placeholder {
+  color: var(--muted);
+}
+
+select option {
+  background: var(--panel);
+  color: var(--foreground);
+}
+
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-panel: var(--panel);
+  --color-panel-border: var(--panel-border);
+  --color-surface-raised: var(--surface-raised);
+  --color-surface-hover: var(--surface-hover);
+  --color-muted: var(--muted);
+  --color-accent: var(--accent);
+  --color-accent-soft: var(--accent-soft);
+  --color-accent-border: var(--accent-border);
+  --color-accent-text-on: var(--accent-text-on);
+  --color-danger: var(--danger);
+  --color-danger-soft: var(--danger-soft);
+  --color-danger-border: var(--danger-border);
+  --color-danger-text: var(--danger-text);
+  --color-input-bg: var(--input-bg);
+  --color-ghost-bg: var(--ghost-bg);
+  --color-tag-bg: var(--tag-bg);
+  --color-tag-text: var(--tag-text);
+  --color-overlay: var(--overlay);
+  --color-input-focus-border: var(--input-focus-border);
+  --radius-sm: var(--radius-sm);
+  --radius-md: var(--radius-md);
+  --radius-lg: var(--radius-lg);
+  --shadow-sm: var(--shadow-sm);
+  --shadow-md: var(--shadow-md);
+  --font-sans: var(--font-geist-sans), system-ui, sans-serif;
+  --font-mono: var(--font-geist-mono), monospace;
+}

package/app/layout.tsx

@@ -0,0 +1,54 @@
+import type { Metadata } from 'next'
+import { Geist, Geist_Mono } from 'next/font/google'
+import Script from 'next/script'
+
+import { ConfirmDialogProvider } from '@/components/confirm-dialog-provider'
+import { ThemeModeSystemListener } from '@/components/theme-mode-system-listener'
+import { theme_init_script } from '@/lib/theme_init_script'
+import { ui_settings_init_script } from '@/lib/ui_settings_init_script'
+
+import './globals.css'
+
+const geist_sans = Geist({
+  variable: '--font-geist-sans',
+  subsets: ['latin'],
+})
+
+const geist_mono = Geist_Mono({
+  variable: '--font-geist-mono',
+  subsets: ['latin'],
+})
+
+export const metadata: Metadata = {
+  title: 'super-time-tracker',
+  description: 'Web UI for the super-time-tracker CLI time sheets',
+}
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode
+}>) {
+  return (
+    <html
+      lang="en"
+      className={`${geist_sans.variable} ${geist_mono.variable} h-full antialiased`}
+      suppressHydrationWarning
+    >
+      <body className="min-h-full font-sans transition-[background-color,color] duration-200">
+        <Script
+          id="theme-init"
+          strategy="beforeInteractive"
+          dangerouslySetInnerHTML={{ __html: theme_init_script }}
+        />
+        <Script
+          id="ui-settings-init"
+          strategy="beforeInteractive"
+          dangerouslySetInnerHTML={{ __html: ui_settings_init_script }}
+        />
+        <ThemeModeSystemListener />
+        <ConfirmDialogProvider>{children}</ConfirmDialogProvider>
+      </body>
+    </html>
+  )
+}

package/app/page.tsx

@@ -0,0 +1,24 @@
+import { cookies } from 'next/headers'
+
+import { TrackerApp } from '@/components/tracker-app'
+import { get_initial_preferred_sheet_name } from '@/lib/get_initial_preferred_sheet_name'
+import { get_tracker_state } from '@/lib/get_tracker_state'
+import { read_db } from '@/lib/read_db'
+import {
+  ACTIVE_SHEET_COOKIE_NAME,
+  DEFAULT_SHEET_FIXED_NAME_COOKIE_NAME,
+  DEFAULT_SHEET_SESSION_MODE_COOKIE_NAME,
+} from '@/lib/types/ui_settings'
+
+export default async function Home() {
+  const cookie_store = await cookies()
+  const db = await read_db()
+  const preferred_sheet = get_initial_preferred_sheet_name(db, {
+    session_mode: cookie_store.get(DEFAULT_SHEET_SESSION_MODE_COOKIE_NAME)?.value,
+    fixed_sheet_name: cookie_store.get(DEFAULT_SHEET_FIXED_NAME_COOKIE_NAME)?.value,
+    last_viewed_sheet: cookie_store.get(ACTIVE_SHEET_COOKIE_NAME)?.value,
+  })
+  const initial_state = await get_tracker_state(preferred_sheet)
+
+  return <TrackerApp initial_state={initial_state} />
+}

package/app/reporting/page.tsx

@@ -0,0 +1,11 @@
+import { ReportingView } from '@/components/reporting-view'
+import { get_reporting_stats } from '@/lib/get_reporting_stats'
+
+/**
+ * Per-sheet time-tracking reporting route.
+ */
+export default async function ReportingPage() {
+  const { sourceSheets } = await get_reporting_stats()
+
+  return <ReportingView source_sheets={sourceSheets} />
+}

package/app/settings/data/page.tsx

@@ -0,0 +1,9 @@
+import { DataSettingsView } from '@/components/data-settings-view'
+import { DB_PATH } from '@/lib/config'
+
+/**
+ * Data & backup settings route.
+ */
+export default function DataSettingsPage() {
+  return <DataSettingsView db_path={DB_PATH} />
+}

package/app/settings/display/page.tsx

@@ -0,0 +1,8 @@
+import { DisplaySettingsView } from '@/components/display-settings-view'
+
+/**
+ * Display & layout settings route.
+ */
+export default function DisplaySettingsPage() {
+  return <DisplaySettingsView />
+}

package/app/settings/page.tsx

@@ -0,0 +1,12 @@
+import { GeneralSettingsView } from '@/components/general-settings-view'
+import { read_db } from '@/lib/read_db'
+
+/**
+ * Settings index route — general tracker behavior.
+ */
+export default async function SettingsPage() {
+  const db = await read_db()
+  const sheet_names = db.sheets.map((sheet) => sheet.name)
+
+  return <GeneralSettingsView sheet_names={sheet_names} />
+}

package/app/settings/tags/page.tsx

@@ -0,0 +1,13 @@
+import { TagManagementView } from '@/components/tag-management-view'
+import { collect_tag_stats } from '@/lib/collect_tag_stats'
+import { read_db } from '@/lib/read_db'
+
+/**
+ * Tag rename and merge management route.
+ */
+export default async function TagManagementPage() {
+  const db = await read_db()
+  const initial_tags = collect_tag_stats(db)
+
+  return <TagManagementView initial_tags={initial_tags} />
+}

package/bin/stt-ui.js

@@ -0,0 +1,63 @@
+#!/usr/bin/env node
+'use strict'
+
+const { spawn } = require('child_process')
+const { existsSync, cpSync } = require('fs')
+const { join } = require('path')
+
+const root = join(__dirname, '..')
+const standalone_dir = join(root, '.next', 'standalone')
+const server_js = join(standalone_dir, 'server.js')
+
+/**
+ * Copies build artifacts required by the Next.js standalone server.
+ */
+function sync_standalone_assets() {
+  const static_src = join(root, '.next', 'static')
+  const static_dest = join(standalone_dir, '.next', 'static')
+
+  if (existsSync(static_src)) {
+    cpSync(static_src, static_dest, { recursive: true })
+  }
+
+  const public_src = join(root, 'public')
+  const public_dest = join(standalone_dir, 'public')
+
+  if (existsSync(public_src)) {
+    cpSync(public_src, public_dest, { recursive: true })
+  }
+}
+
+if (!existsSync(server_js)) {
+  console.error(
+    'Standalone build not found. Run `pnpm build` first, then `stt-ui`.',
+  )
+  process.exit(1)
+}
+
+sync_standalone_assets()
+
+const port = process.env.PORT ?? '3000'
+const hostname = process.env.HOSTNAME ?? '127.0.0.1'
+
+const child = spawn(process.execPath, [server_js], {
+  cwd: standalone_dir,
+  env: {
+    ...process.env,
+    NODE_ENV: 'production',
+    HOSTNAME: hostname,
+    PORT: port,
+  },
+  stdio: 'inherit',
+})
+
+child.on('exit', (code, signal) => {
+  if (signal !== null) {
+    process.kill(process.pid, signal)
+    return
+  }
+
+  process.exit(code ?? 0)
+})
+
+console.error(`stt-ui listening on http://${hostname}:${port}`)