super-time-tracker-ui 0.1.2

package/components/active-entry-panel.tsx

@@ -0,0 +1,199 @@
+'use client'
+
+import { useEffect, useState } from 'react'
+
+import { CheckoutButtonGroup } from '@/components/checkout-button-group'
+import { use_confirm_dialog } from '@/components/confirm-dialog-provider'
+import { EntryActionsMenu } from '@/components/entry-actions-menu'
+import { EntryEditForm, type EntryEditFormValues } from '@/components/entry-edit-form'
+import { EntryNotesList } from '@/components/entry-notes-list'
+import { NoteForm } from '@/components/note-form'
+import { format_display_tag } from '@/lib/format_display_tag'
+import { format_duration } from '@/lib/format_duration'
+import { use_confirm_destructive_actions } from '@/lib/use_confirm_destructive_actions'
+import { use_duration_format } from '@/lib/use_duration_format'
+import { use_timer_show_seconds } from '@/lib/use_timer_show_seconds'
+import { get_button_class_name } from '@/lib/get_button_class_name'
+import { get_delete_entry_confirm_dialog } from '@/lib/get_delete_entry_confirm_dialog'
+import { get_delete_note_confirm_dialog } from '@/lib/get_delete_note_confirm_dialog'
+import { get_active_panel_class_name } from '@/lib/get_active_panel_class_name'
+import {
+  type SerializedEntry,
+  type SerializedSheet,
+} from '@/lib/types/tracker_state'
+
+interface ActiveEntryPanelProps {
+  entry: SerializedEntry
+  sheets: SerializedSheet[]
+  in_bar?: 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
+  is_pending: boolean
+}
+
+const tag_item_class =
+  'rounded-full bg-tag-bg px-2 py-0.5 text-xs text-tag-text'
+
+/**
+ * Shows the running active entry with a live duration timer.
+ */
+export function ActiveEntryPanel({
+  entry,
+  sheets,
+  in_bar = false,
+  on_check_out,
+  on_delete,
+  on_edit,
+  on_move,
+  on_add_note,
+  on_edit_note,
+  on_delete_note,
+  is_pending,
+}: ActiveEntryPanelProps) {
+  const { confirm } = use_confirm_dialog()
+  const confirm_destructive_actions = use_confirm_destructive_actions()
+  const duration_format = use_duration_format()
+  const show_seconds = use_timer_show_seconds()
+  const [duration_ms, set_duration_ms] = useState(entry.durationMs)
+  const [is_editing, set_is_editing] = useState(false)
+  const [is_adding_note, set_is_adding_note] = useState(false)
+
+  useEffect(() => {
+    set_is_adding_note(false)
+  }, [entry.id, entry.sheetName])
+
+  useEffect(() => {
+    set_duration_ms(entry.durationMs)
+
+    const interval = window.setInterval(() => {
+      set_duration_ms(Date.now() - new Date(entry.start).getTime())
+    }, 1000)
+
+    return () => window.clearInterval(interval)
+  }, [entry.durationMs, entry.start])
+
+  const panel_class = get_active_panel_class_name(in_bar, is_editing)
+
+  const handle_delete_note = async (timestamp: string): Promise<void> => {
+    const note = entry.notes.find((item) => item.timestamp === timestamp)
+    const confirmed = confirm_destructive_actions
+      ? await confirm(get_delete_note_confirm_dialog(note?.text ?? ''))
+      : true
+
+    if (confirmed) {
+      on_delete_note(timestamp)
+    }
+  }
+
+  if (is_editing) {
+    return (
+      <section className={panel_class}>
+        <EntryEditForm
+          entry={entry}
+          is_pending={is_pending}
+          in_active_panel
+          on_cancel={() => set_is_editing(false)}
+          on_save={(values) => {
+            on_edit(values)
+            set_is_editing(false)
+          }}
+        />
+      </section>
+    )
+  }
+
+  return (
+    <section className={panel_class}>
+      <div className="flex items-start justify-between gap-3">
+        <div className="flex min-w-0 flex-col gap-1.5">
+          {!in_bar ? (
+            <span className="self-start rounded-full bg-accent px-2 py-0.5 text-[0.68rem] font-bold uppercase leading-none tracking-wider text-accent-text-on">
+              Tracking
+            </span>
+          ) : null}
+          <h2 className="m-0 text-xl font-[650] leading-tight tracking-tight">
+            {entry.description || 'Untitled entry'}
+          </h2>
+        </div>
+        <EntryActionsMenu
+          current_sheet_name={entry.sheetName}
+          sheets={sheets}
+          is_pending={is_pending}
+          on_edit={() => set_is_editing(true)}
+          on_show_add_note_form={() => set_is_adding_note(true)}
+          on_move={on_move}
+          on_delete={async () => {
+            const confirmed = confirm_destructive_actions
+              ? await confirm(get_delete_entry_confirm_dialog(entry))
+              : true
+
+            if (confirmed) {
+              on_delete()
+            }
+          }}
+        />
+      </div>
+      <div className="flex items-end justify-between gap-4 max-[860px]:flex-col max-[860px]:items-stretch">
+        <div className="flex min-w-0 flex-col gap-2">
+          <p className="m-0 font-mono text-[2rem] font-medium leading-none tracking-tight text-accent">
+            {format_duration(duration_ms, duration_format, show_seconds)}
+          </p>
+          {entry.tags.length > 0 ? (
+            <ul className="m-0 flex list-none flex-wrap gap-1.5 p-0">
+              {entry.tags.map((tag) => (
+                <li key={tag} className={tag_item_class}>
+                  {format_display_tag(tag)}
+                </li>
+              ))}
+            </ul>
+          ) : null}
+        </div>
+        <div
+          className={`inline-flex shrink-0 items-center gap-2 ${in_bar ? 'min-w-0 max-[860px]:w-full max-[860px]:justify-end' : 'min-w-30 max-[860px]:w-full max-[860px]:justify-stretch'}`}
+        >
+          {!is_adding_note ? (
+            <button
+              type="button"
+              className={`${get_button_class_name('ghost')} max-[860px]:flex-1`}
+              disabled={is_pending}
+              onClick={() => set_is_adding_note(true)}
+            >
+              Add note
+            </button>
+          ) : null}
+          <CheckoutButtonGroup
+            in_bar={in_bar}
+            is_pending={is_pending}
+            on_check_out={on_check_out}
+          />
+        </div>
+      </div>
+      <EntryNotesList
+        notes={entry.notes}
+        variant="panel"
+        in_bar={in_bar}
+        is_pending={is_pending}
+        on_edit_note={on_edit_note}
+        on_delete_note={handle_delete_note}
+      />
+      {is_adding_note ? (
+        <NoteForm
+          in_active_panel
+          in_bar={in_bar}
+          allow_at
+          is_pending={is_pending}
+          on_cancel={() => set_is_adding_note(false)}
+          on_submit={(text, at) => {
+            on_add_note(text, at)
+            set_is_adding_note(false)
+          }}
+        />
+      ) : null}
+    </section>
+  )
+}

package/components/backup-restore-setting.tsx

@@ -0,0 +1,168 @@
+'use client'
+
+import { useRouter } from 'next/navigation'
+import { useRef, useState } from 'react'
+
+import { use_confirm_dialog } from '@/components/confirm-dialog-provider'
+import { get_button_class_name } from '@/lib/get_button_class_name'
+import { get_restore_db_confirm_dialog } from '@/lib/get_restore_db_confirm_dialog'
+
+interface BackupRestoreSettingProps {
+  db_path: string
+}
+
+/**
+ * Downloads or restores the tracker database from Settings.
+ */
+export function BackupRestoreSetting({ db_path }: BackupRestoreSettingProps) {
+  const router = useRouter()
+  const { confirm } = use_confirm_dialog()
+  const file_input_ref = useRef<HTMLInputElement>(null)
+  const [error, set_error] = useState<string | null>(null)
+  const [status_message, set_status_message] = useState<string | null>(null)
+  const [is_downloading, set_is_downloading] = useState(false)
+  const [is_restoring, set_is_restoring] = useState(false)
+
+  const handle_download = async (): Promise<void> => {
+    set_is_downloading(true)
+    set_error(null)
+    set_status_message(null)
+
+    try {
+      const response = await fetch('/api/backup')
+
+      if (!response.ok) {
+        const body = (await response.json()) as { error?: string }
+        throw new Error(body.error ?? 'Download failed')
+      }
+
+      const blob = await response.blob()
+      const url = URL.createObjectURL(blob)
+      const link = document.createElement('a')
+
+      link.href = url
+      link.download = 'db.json'
+      link.click()
+      URL.revokeObjectURL(url)
+      set_status_message('Backup downloaded.')
+    } catch (download_error: unknown) {
+      set_error(
+        download_error instanceof Error
+          ? download_error.message
+          : String(download_error),
+      )
+    } finally {
+      set_is_downloading(false)
+    }
+  }
+
+  const handle_restore_click = (): void => {
+    file_input_ref.current?.click()
+  }
+
+  const handle_file_change = async (
+    event: React.ChangeEvent<HTMLInputElement>,
+  ): Promise<void> => {
+    const file = event.target.files?.[0]
+
+    event.target.value = ''
+
+    if (file === undefined) {
+      return
+    }
+
+    const confirmed = await confirm(get_restore_db_confirm_dialog())
+
+    if (!confirmed) {
+      return
+    }
+
+    set_is_restoring(true)
+    set_error(null)
+    set_status_message(null)
+
+    try {
+      const text = await file.text()
+      let uploaded: unknown
+
+      try {
+        uploaded = JSON.parse(text)
+      } catch {
+        throw new Error('Invalid backup file: file is not valid JSON.')
+      }
+      const response = await fetch('/api/backup', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(uploaded),
+      })
+
+      if (!response.ok) {
+        const body = (await response.json()) as { error?: string }
+        throw new Error(body.error ?? 'Restore failed')
+      }
+
+      set_status_message('Backup restored. Opening tracker…')
+      router.push('/')
+      router.refresh()
+    } catch (restore_error: unknown) {
+      set_error(
+        restore_error instanceof Error
+          ? restore_error.message
+          : String(restore_error),
+      )
+    } finally {
+      set_is_restoring(false)
+    }
+  }
+
+  const is_busy = is_downloading || is_restoring
+
+  return (
+    <div className="flex w-full flex-col gap-3">
+      <div className="flex flex-col gap-0.5">
+        <h2 className="m-0 text-[0.95rem] font-semibold">Backup and restore</h2>
+        <p className="m-0 text-[0.8rem] leading-snug text-muted">
+          Download a copy of your database or replace it with a previously saved
+          backup file.
+        </p>
+      </div>
+      <p
+        className="m-0 overflow-wrap-anywhere font-mono text-[0.65rem] leading-snug text-muted"
+        title={db_path}
+      >
+        {db_path}
+      </p>
+      <div className="flex flex-wrap gap-2">
+        <button
+          type="button"
+          className={get_button_class_name('ghost', 'small')}
+          disabled={is_busy}
+          onClick={() => void handle_download()}
+        >
+          {is_downloading ? 'Downloading…' : 'Download backup'}
+        </button>
+        <button
+          type="button"
+          className={get_button_class_name('danger', 'small')}
+          disabled={is_busy}
+          onClick={handle_restore_click}
+        >
+          {is_restoring ? 'Restoring…' : 'Restore from file'}
+        </button>
+        <input
+          ref={file_input_ref}
+          type="file"
+          accept="application/json,.json"
+          className="hidden"
+          onChange={(event) => void handle_file_change(event)}
+        />
+      </div>
+      {status_message !== null ? (
+        <p className="m-0 text-[0.82rem] text-accent">{status_message}</p>
+      ) : null}
+      {error !== null ? (
+        <p className="m-0 text-[0.82rem] text-danger">{error}</p>
+      ) : null}
+    </div>
+  )
+}

package/components/check-in-form-collapsed-setting.tsx

@@ -0,0 +1,44 @@
+'use client'
+
+import { useSyncExternalStore } from 'react'
+
+import { check_in_form_collapsed_preference } from '@/lib/preferences/check_in_form_collapsed_preference'
+import { persist_ui_preference } from '@/lib/persist_ui_preference'
+
+const set_check_in_form_collapsed = (collapsed: boolean): void => {
+  persist_ui_preference(
+    check_in_form_collapsed_preference,
+    collapsed ? 'true' : 'false',
+  )
+}
+
+/**
+ * Setting: collapse the check-in form into a single button by default.
+ */
+export function CheckInFormCollapsedSetting() {
+  const value = useSyncExternalStore(
+    check_in_form_collapsed_preference.subscribe,
+    check_in_form_collapsed_preference.get_snapshot,
+    check_in_form_collapsed_preference.get_server_snapshot,
+  )
+  const is_collapsed = value === 'true'
+
+  return (
+    <label className="flex w-full cursor-pointer items-center gap-2.5">
+      <input
+        type="checkbox"
+        className="shrink-0"
+        checked={is_collapsed}
+        onChange={(event) => set_check_in_form_collapsed(event.target.checked)}
+      />
+      <span className="flex flex-col gap-0.5">
+        <span className="text-[0.95rem] font-semibold">
+          Collapse check-in form
+        </span>
+        <span className="text-[0.8rem] leading-snug text-muted">
+          Show a single &ldquo;Check in&rdquo; button until clicked, instead of the full form.
+        </span>
+      </span>
+    </label>
+  )
+}

package/components/check-in-form-collapsible.tsx

@@ -0,0 +1,52 @@
+'use client'
+
+import { useState } from 'react'
+
+import { CheckInForm, type CheckInFormValues } from '@/components/check-in-form'
+import { get_button_class_name } from '@/lib/get_button_class_name'
+import { use_check_in_form_collapsed } from '@/lib/use_check_in_form_collapsed'
+
+interface CheckInFormCollapsibleProps {
+  known_tags: string[]
+  is_pending: boolean
+  on_submit: (values: CheckInFormValues) => void
+}
+
+/**
+ * Renders the check-in form, collapsible to a button when the preference is set.
+ */
+export function CheckInFormCollapsible({
+  known_tags,
+  is_pending,
+  on_submit,
+}: CheckInFormCollapsibleProps) {
+  const should_collapse_by_default = use_check_in_form_collapsed()
+  const [is_expanded, set_is_expanded] = useState(!should_collapse_by_default)
+
+  if (should_collapse_by_default && !is_expanded) {
+    return (
+      <button
+        type="button"
+        className={`${get_button_class_name('primary')} self-start`}
+        disabled={is_pending}
+        onClick={() => set_is_expanded(true)}
+      >
+        Check in
+      </button>
+    )
+  }
+
+  return (
+    <CheckInForm
+      known_tags={known_tags}
+      is_pending={is_pending}
+      on_submit={(values) => {
+        on_submit(values)
+
+        if (should_collapse_by_default) {
+          set_is_expanded(false)
+        }
+      }}
+    />
+  )
+}

package/components/check-in-form.tsx

@@ -0,0 +1,89 @@
+'use client'
+
+import { type FormEvent, useState } from 'react'
+
+import { TagAutocompleteInput } from '@/components/tag-autocomplete-input'
+import { get_button_class_name } from '@/lib/get_button_class_name'
+import { get_input_class_name } from '@/lib/get_input_class_name'
+
+export interface CheckInFormValues {
+  description: string
+  at?: string
+}
+
+interface CheckInFormProps {
+  known_tags: string[]
+  on_submit: (values: CheckInFormValues) => void
+  is_pending: boolean
+}
+
+/**
+ * Form for starting a new time sheet entry.
+ */
+export function CheckInForm({
+  known_tags,
+  on_submit,
+  is_pending,
+}: CheckInFormProps) {
+  const [description, set_description] = useState('')
+  const [at, set_at] = useState('')
+
+  const handle_submit = (event: FormEvent<HTMLFormElement>): void => {
+    event.preventDefault()
+    const trimmed_description = description.trim()
+
+    if (trimmed_description.length === 0) {
+      return
+    }
+
+    const trimmed_at = at.trim()
+
+    on_submit({
+      description: trimmed_description,
+      ...(trimmed_at.length > 0 ? { at: trimmed_at } : {}),
+    })
+    set_description('')
+    set_at('')
+  }
+
+  return (
+    <form
+      className="flex flex-col gap-2 rounded-lg border border-panel-border bg-panel p-[1.1rem] shadow-sm"
+      onSubmit={handle_submit}
+    >
+      <label className="text-[0.85rem] text-muted" htmlFor="check-in-description">
+        What are you working on?
+      </label>
+      <div className="grid grid-cols-[minmax(0,1fr)_auto] gap-2 max-[860px]:grid-cols-1">
+        <TagAutocompleteInput
+          id="check-in-description"
+          value={description}
+          known_tags={known_tags}
+          placeholder="e.g. crafting something @design"
+          disabled={is_pending}
+          autoFocus
+          on_change={set_description}
+        />
+        <button
+          type="submit"
+          className={get_button_class_name('primary')}
+          disabled={is_pending || description.trim().length === 0}
+        >
+          Check in
+        </button>
+      </div>
+      <label className="text-[0.85rem] text-muted" htmlFor="check-in-at">
+        Start time{' '}
+        <span className="font-normal opacity-85">(optional, natural language)</span>
+      </label>
+      <input
+        id="check-in-at"
+        className={get_input_class_name()}
+        value={at}
+        onChange={(event) => set_at(event.target.value)}
+        placeholder="e.g. 30 minutes ago"
+        disabled={is_pending}
+      />
+    </form>
+  )
+}

package/components/checkbox.tsx

@@ -0,0 +1,75 @@
+'use client'
+
+import { useEffect, useRef } from 'react'
+
+interface CheckboxProps {
+  checked: boolean
+  disabled?: boolean
+  indeterminate?: boolean
+  nested?: boolean
+  on_change: () => void
+  label?: string
+  aria_label?: string
+  className?: string
+}
+
+const root_base =
+  'inline-flex shrink-0 cursor-pointer items-center gap-1.5'
+
+const control_class =
+  'relative block h-[0.85rem] w-[0.85rem] shrink-0 rounded-[0.2rem] border border-panel-border bg-input-bg box-border transition-[background-color,border-color] duration-150 peer-checked:border-accent peer-checked:bg-accent peer-indeterminate:border-accent peer-indeterminate:bg-accent peer-focus-visible:outline peer-focus-visible:outline-2 peer-focus-visible:outline-input-focus-border peer-focus-visible:outline-offset-1 peer-disabled:cursor-not-allowed peer-disabled:opacity-55 after:absolute after:left-1/2 after:top-[44%] after:hidden after:h-[0.28rem] after:w-[0.45rem] after:-translate-x-1/2 after:-translate-y-[60%] after:rotate-[-45deg] after:border-b-[1.5px] after:border-l-[1.5px] after:border-accent-text-on after:content-[""] peer-checked:after:block peer-indeterminate:after:top-1/2 peer-indeterminate:after:block peer-indeterminate:after:h-[1.5px] peer-indeterminate:after:w-[0.45rem] peer-indeterminate:after:-translate-x-1/2 peer-indeterminate:after:-translate-y-1/2 peer-indeterminate:after:rotate-0 peer-indeterminate:after:border-0 peer-indeterminate:after:bg-accent-text-on'
+
+/**
+ * Accessible custom-styled checkbox control.
+ */
+export function Checkbox({
+  checked,
+  disabled = false,
+  indeterminate = false,
+  nested = false,
+  on_change,
+  label,
+  aria_label,
+  className,
+}: CheckboxProps) {
+  const input_ref = useRef<HTMLInputElement>(null)
+
+  useEffect(() => {
+    if (input_ref.current !== null) {
+      input_ref.current.indeterminate = indeterminate
+    }
+  }, [indeterminate])
+
+  const root_class =
+    className === undefined ? root_base : `${root_base} ${className}`
+
+  const control = (
+    <>
+      <input
+        ref={input_ref}
+        type="checkbox"
+        className="peer absolute m-0 h-px w-px overflow-hidden opacity-0"
+        checked={checked}
+        disabled={disabled}
+        aria-label={nested && label === undefined ? aria_label : undefined}
+        onChange={on_change}
+      />
+      <span className={control_class} aria-hidden="true" />
+    </>
+  )
+
+  if (nested) {
+    return <span className={root_class}>{control}</span>
+  }
+
+  return (
+    <label className={root_class}>
+      {control}
+      {label !== undefined ? (
+        <span className="select-none text-[0.8rem] leading-tight text-muted">
+          {label}
+        </span>
+      ) : null}
+    </label>
+  )
+}

package/components/checkout-button-group.tsx

@@ -0,0 +1,73 @@
+'use client'
+
+import { use_confirm_dialog } from '@/components/confirm-dialog-provider'
+import { get_button_class_name } from '@/lib/get_button_class_name'
+import { get_check_out_confirm_dialog } from '@/lib/get_check_out_confirm_dialog'
+import { prompt_check_out_at } from '@/lib/prompt_check_out_at'
+import { use_confirm_before_checkout } from '@/lib/use_confirm_before_checkout'
+
+interface CheckoutButtonGroupProps {
+  in_bar?: boolean
+  is_pending: boolean
+  on_check_out: (at?: string) => void
+}
+
+const group_button_class = `${get_button_class_name('danger')} rounded-none first:rounded-l-[0.65rem] last:rounded-r-[0.65rem] not-first:-ml-px not-first:min-w-12 not-first:border-l not-first:border-l-[color-mix(in_srgb,var(--danger-text)_30%,var(--background))] max-[860px]:flex-1 max-[860px]:basis-1/2`
+
+/**
+ * Check out now or at a natural-language time in a joined button group.
+ */
+export function CheckoutButtonGroup({
+  in_bar = false,
+  is_pending,
+  on_check_out,
+}: CheckoutButtonGroupProps) {
+  const { confirm } = use_confirm_dialog()
+  const confirm_before_checkout = use_confirm_before_checkout()
+
+  const check_out_with_confirm = async (at?: string): Promise<void> => {
+    if (confirm_before_checkout) {
+      const confirmed = await confirm(get_check_out_confirm_dialog(at))
+
+      if (!confirmed) {
+        return
+      }
+    }
+
+    on_check_out(at)
+  }
+
+  const handle_at = (): void => {
+    const at = prompt_check_out_at()
+
+    if (at === null) {
+      return
+    }
+
+    void check_out_with_confirm(at)
+  }
+
+  return (
+    <div
+      className={`inline-flex shrink-0 ${in_bar ? 'min-w-0 max-[860px]:w-full' : 'min-w-30 max-[860px]:w-full'}`}
+    >
+      <button
+        type="button"
+        className={group_button_class}
+        disabled={is_pending}
+        onClick={() => void check_out_with_confirm()}
+      >
+        Check out
+      </button>
+      <button
+        type="button"
+        className={group_button_class}
+        disabled={is_pending}
+        title="Check out at a specific time"
+        onClick={handle_at}
+      >
+        @
+      </button>
+    </div>
+  )
+}