super-time-tracker-ui 0.1.2

package/components/format_time.ts

@@ -0,0 +1,10 @@
+import { format } from 'date-fns'
+
+import { type TimeFormat } from '@/lib/types/ui_preferences'
+
+/**
+ * Formats an ISO timestamp for display in entry lists.
+ */
+export function format_time(iso: string, time_format: TimeFormat = '12h'): string {
+  return format(new Date(iso), time_format === '24h' ? 'HH:mm' : 'h:mm a')
+}

package/components/general-settings-view.tsx

@@ -0,0 +1,40 @@
+import { ClearTagFiltersOnSheetChangeSetting } from '@/components/clear-tag-filters-on-sheet-change-setting'
+import { ConfirmBeforeCheckoutSetting } from '@/components/confirm-before-checkout-setting'
+import { ConfirmDestructiveActionsSetting } from '@/components/confirm-destructive-actions-setting'
+import { DefaultSheetSessionSetting } from '@/components/default-sheet-session-setting'
+import { SettingsPageLayout } from '@/components/settings-page-layout'
+
+interface GeneralSettingsViewProps {
+  sheet_names: string[]
+}
+
+/**
+ * Settings page: general tracker behavior.
+ */
+export function GeneralSettingsView({ sheet_names }: GeneralSettingsViewProps) {
+  return (
+    <SettingsPageLayout
+      breadcrumb={{ current: 'General', parent: { label: 'Settings' } }}
+      title="General"
+      description="Tracker startup, confirmations, and session behavior."
+    >
+      <ul
+        className="m-0 flex w-full list-none flex-col gap-2 p-0"
+        aria-label="General settings"
+      >
+        <li className="rounded-md border border-panel-border bg-panel p-3.5 shadow-sm">
+          <DefaultSheetSessionSetting sheet_names={sheet_names} />
+        </li>
+        <li className="rounded-md border border-panel-border bg-panel p-3.5 shadow-sm">
+          <ConfirmBeforeCheckoutSetting />
+        </li>
+        <li className="rounded-md border border-panel-border bg-panel p-3.5 shadow-sm">
+          <ConfirmDestructiveActionsSetting />
+        </li>
+        <li className="rounded-md border border-panel-border bg-panel p-3.5 shadow-sm">
+          <ClearTagFiltersOnSheetChangeSetting />
+        </li>
+      </ul>
+    </SettingsPageLayout>
+  )
+}

package/components/hamburger-icon.tsx

@@ -0,0 +1,21 @@
+/**
+ * Renders a three-line menu icon without a filled background.
+ */
+export function HamburgerIcon() {
+  return (
+    <svg
+      className="block h-4 w-4 text-muted"
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      aria-hidden="true"
+    >
+      <path d="M4 7h16" />
+      <path d="M4 12h16" />
+      <path d="M4 17h16" />
+    </svg>
+  )
+}

package/components/note-edit-form.tsx

@@ -0,0 +1,77 @@
+'use client'
+
+import { type FormEvent, useState } from 'react'
+
+import { get_button_class_name } from '@/lib/get_button_class_name'
+import { get_input_class_name } from '@/lib/get_input_class_name'
+
+interface NoteEditFormProps {
+  initial_text: string
+  is_pending: boolean
+  inline?: boolean
+  on_save: (text: string) => void
+  on_cancel: () => void
+}
+
+/**
+ * Inline form for editing an existing entry note.
+ */
+export function NoteEditForm({
+  initial_text,
+  is_pending,
+  inline = false,
+  on_save,
+  on_cancel,
+}: NoteEditFormProps) {
+  const [text, set_text] = useState(initial_text)
+  const line_count = initial_text.split('\n').length
+  const rows = Math.min(6, Math.max(2, line_count))
+
+  const handle_submit = (event: FormEvent<HTMLFormElement>): void => {
+    event.preventDefault()
+    const trimmed = text.trim()
+
+    if (trimmed.length === 0) {
+      return
+    }
+
+    on_save(trimmed)
+  }
+
+  const textarea_class = inline
+    ? `${get_input_class_name()} min-h-10 w-full resize-y text-xs leading-snug`
+    : `${get_input_class_name()} min-h-10 w-full resize-y text-[0.85rem] leading-snug`
+
+  return (
+    <form
+      className="flex w-full flex-col gap-1.5"
+      onSubmit={handle_submit}
+      onClick={(event) => event.stopPropagation()}
+    >
+      <textarea
+        className={textarea_class}
+        value={text}
+        rows={rows}
+        disabled={is_pending}
+        onChange={(event) => set_text(event.target.value)}
+      />
+      <div className="flex justify-end gap-1.5">
+        <button
+          type="button"
+          className={get_button_class_name('ghost')}
+          disabled={is_pending}
+          onClick={on_cancel}
+        >
+          Cancel
+        </button>
+        <button
+          type="submit"
+          className={get_button_class_name('ghost')}
+          disabled={is_pending || text.trim().length === 0}
+        >
+          Save
+        </button>
+      </div>
+    </form>
+  )
+}

package/components/note-form.tsx

@@ -0,0 +1,109 @@
+'use client'
+
+import { type FormEvent, useState } from 'react'
+
+import { get_button_class_name } from '@/lib/get_button_class_name'
+import { get_input_class_name } from '@/lib/get_input_class_name'
+
+interface NoteFormProps {
+  on_submit: (text: string, at?: string) => void
+  on_cancel?: () => void
+  is_pending: boolean
+  in_active_panel?: boolean
+  in_bar?: boolean
+  allow_at?: boolean
+}
+
+/**
+ * Adds a note to the active entry.
+ */
+export function NoteForm({
+  on_submit,
+  on_cancel,
+  is_pending,
+  in_active_panel = false,
+  in_bar = false,
+  allow_at = false,
+}: NoteFormProps) {
+  const [text, set_text] = useState('')
+  const [at, set_at] = useState('')
+
+  const handle_submit = (event: FormEvent<HTMLFormElement>): void => {
+    event.preventDefault()
+    const trimmed = text.trim()
+
+    if (trimmed.length === 0) {
+      return
+    }
+
+    const trimmed_at = at.trim()
+
+    on_submit(trimmed, trimmed_at.length > 0 ? trimmed_at : undefined)
+    set_text('')
+    set_at('')
+  }
+
+  const border_class =
+    in_active_panel && !in_bar
+      ? 'border-t border-accent-border pt-4'
+      : in_bar
+        ? 'border-t border-[color-mix(in_srgb,var(--accent-border)_65%,var(--panel-border))] pt-3.5'
+        : ''
+
+  return (
+    <form
+      className={`flex flex-col gap-2 ${border_class}`}
+      onSubmit={handle_submit}
+    >
+      <label className="text-[0.85rem] text-muted" htmlFor="note-text">
+        Add note
+      </label>
+      <div className="grid grid-cols-[minmax(0,1fr)_auto] gap-2 max-[860px]:grid-cols-1">
+        <input
+          id="note-text"
+          className={get_input_class_name()}
+          value={text}
+          onChange={(event) => set_text(event.target.value)}
+          placeholder="Pair with alice on the widget"
+          disabled={is_pending}
+          autoFocus
+        />
+        <div className="flex flex-wrap items-center gap-2 max-[860px]:w-full">
+          <button
+            type="submit"
+            className={get_button_class_name('ghost')}
+            disabled={is_pending || text.trim().length === 0}
+          >
+            Save note
+          </button>
+          {on_cancel !== undefined ? (
+            <button
+              type="button"
+              className={get_button_class_name('ghost')}
+              disabled={is_pending}
+              onClick={on_cancel}
+            >
+              Cancel
+            </button>
+          ) : null}
+        </div>
+      </div>
+      {allow_at ? (
+        <>
+          <label className="text-[0.85rem] text-muted" htmlFor="note-at">
+            Note time{' '}
+            <span className="font-normal opacity-85">(optional, natural language)</span>
+          </label>
+          <input
+            id="note-at"
+            className={get_input_class_name()}
+            value={at}
+            onChange={(event) => set_at(event.target.value)}
+            placeholder="e.g. 30 minutes ago"
+            disabled={is_pending}
+          />
+        </>
+      ) : null}
+    </form>
+  )
+}

package/components/pencil-icon.tsx

@@ -0,0 +1,21 @@
+/**
+ * Renders a small pencil icon for edit actions.
+ */
+export function PencilIcon() {
+  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="M12 20h9" />
+      <path d="M16.5 3.5a2.12 2.12 0 0 1 3 3L7 19l-4 1 1-4Z" />
+    </svg>
+  )
+}

package/components/reporting-date-range-picker.tsx

@@ -0,0 +1,121 @@
+'use client'
+
+import { get_button_class_name } from '@/lib/get_button_class_name'
+import { get_input_class_name } from '@/lib/get_input_class_name'
+import { get_reporting_date_range_shortcut_inputs } from '@/lib/get_reporting_date_range_shortcut_inputs'
+import { use_week_starts_on } from '@/lib/use_week_starts_on'
+import { week_starts_on_to_index } from '@/lib/week_starts_on_to_index'
+import {
+  type ReportingDateRangeInputs,
+  type ReportingDateRangeShortcut,
+} from '@/lib/types/reporting'
+
+export type { ReportingDateRangeInputs } from '@/lib/types/reporting'
+
+const shortcut_options: {
+  value: ReportingDateRangeShortcut
+  label: string
+}[] = [
+  { value: 'today', label: 'Today' },
+  { value: 'yesterday', label: 'Yesterday' },
+  { value: 'week', label: 'This week' },
+  { value: 'month', label: 'This month' },
+  { value: 'last_month', label: 'Last month' },
+  { value: 'year', label: 'This year' },
+  { value: 'last_year', label: 'Last year' },
+]
+
+interface ReportingDateRangePickerProps {
+  range: ReportingDateRangeInputs
+  is_invalid: boolean
+  on_range_change: (range: ReportingDateRangeInputs) => void
+  on_clear: () => void
+}
+
+/**
+ * Date range filter controls for the reporting view.
+ */
+export function ReportingDateRangePicker({
+  range,
+  is_invalid,
+  on_range_change,
+  on_clear,
+}: ReportingDateRangePickerProps) {
+  const week_starts_on = use_week_starts_on()
+  const week_starts_on_index = week_starts_on_to_index(week_starts_on)
+  const has_filter =
+    range.from_date.length > 0 || range.to_date.length > 0
+
+  return (
+    <fieldset className="m-0 flex w-full max-w-2xl flex-col gap-2 rounded-md border border-panel-border bg-panel p-3.5 shadow-sm">
+      <legend className="mb-2 text-[0.72rem] font-semibold uppercase tracking-[0.06em] text-muted">
+        Date range
+      </legend>
+      <div className="flex flex-wrap gap-1.5" role="group" aria-label="Date range shortcuts">
+        {shortcut_options.map((option) => (
+          <button
+            key={option.value}
+            type="button"
+            className={get_button_class_name('ghost', 'small')}
+            onClick={() =>
+              on_range_change(
+                get_reporting_date_range_shortcut_inputs(
+                  option.value,
+                  new Date(),
+                  week_starts_on_index,
+                ),
+              )
+            }
+          >
+            {option.label}
+          </button>
+        ))}
+      </div>
+      <div className="grid grid-cols-1 gap-2 sm:grid-cols-2">
+        <label className="flex flex-col gap-1 text-[0.82rem] text-muted">
+          From
+          <input
+            type="date"
+            className={get_input_class_name('compact')}
+            value={range.from_date}
+            onChange={(event) =>
+              on_range_change({
+                ...range,
+                from_date: event.target.value,
+              })
+            }
+          />
+        </label>
+        <label className="flex flex-col gap-1 text-[0.82rem] text-muted">
+          To
+          <input
+            type="date"
+            className={get_input_class_name('compact')}
+            value={range.to_date}
+            onChange={(event) =>
+              on_range_change({
+                ...range,
+                to_date: event.target.value,
+              })
+            }
+          />
+        </label>
+      </div>
+      <div className="flex flex-wrap items-center gap-2">
+        <button
+          type="button"
+          className={get_button_class_name('ghost', 'small')}
+          disabled={!has_filter}
+          onClick={on_clear}
+        >
+          Clear
+        </button>
+        {is_invalid ? (
+          <span className="text-[0.82rem] text-danger">
+            Enter a valid from and to date.
+          </span>
+        ) : null}
+      </div>
+    </fieldset>
+  )
+}

package/components/reporting-sort-controls.tsx

@@ -0,0 +1,53 @@
+'use client'
+
+import { get_button_class_name } from '@/lib/get_button_class_name'
+import { type SheetReportSort } from '@/lib/types/reporting'
+
+interface ReportingSortControlsProps {
+  sort: SheetReportSort
+  on_sort_change: (sort: SheetReportSort) => void
+}
+
+const sort_options: { value: SheetReportSort; label: string }[] = [
+  { value: 'duration', label: 'Duration' },
+  { value: 'name', label: 'Name' },
+  { value: 'entry_count', label: 'Entries' },
+  { value: 'active_first', label: 'Active first' },
+]
+
+/**
+ * Sort mode toggles for the reporting sheet lists.
+ */
+export function ReportingSortControls({
+  sort,
+  on_sort_change,
+}: ReportingSortControlsProps) {
+  return (
+    <fieldset className="m-0 flex w-full max-w-2xl flex-col gap-2 border-0 p-0">
+      <legend className="mb-2 text-[0.72rem] font-semibold uppercase tracking-[0.06em] text-muted">
+        Sort by
+      </legend>
+      <div className="flex flex-wrap gap-1.5" role="group" aria-label="Sort sheets by">
+        {sort_options.map((option) => {
+          const is_selected = sort === option.value
+
+          return (
+            <button
+              key={option.value}
+              type="button"
+              className={`${get_button_class_name('ghost', 'small')} ${
+                is_selected
+                  ? 'border-accent-border bg-accent-soft text-foreground'
+                  : ''
+              }`}
+              aria-pressed={is_selected}
+              onClick={() => on_sort_change(option.value)}
+            >
+              {option.label}
+            </button>
+          )
+        })}
+      </div>
+    </fieldset>
+  )
+}