super-time-tracker-ui 0.1.2

package/components/sheet-sidebar.tsx

@@ -0,0 +1,196 @@
+'use client'
+
+import { type FormEvent, useState } from 'react'
+
+import { use_confirm_dialog } from '@/components/confirm-dialog-provider'
+import { SheetActionsMenu } from '@/components/sheet-actions-menu'
+import { get_delete_sheet_confirm_dialog } from '@/lib/get_delete_sheet_confirm_dialog'
+import { use_confirm_destructive_actions } from '@/lib/use_confirm_destructive_actions'
+import { get_button_class_name } from '@/lib/get_button_class_name'
+import { get_input_class_name } from '@/lib/get_input_class_name'
+import { type SerializedSheet } from '@/lib/types/tracker_state'
+
+interface SheetSidebarProps {
+  sheets: SerializedSheet[]
+  db_path: string
+  on_select: (name: string) => void
+  on_create: (name: string) => void
+  on_rename: (name: string, new_name: string) => void
+  on_delete: (name: string) => void
+  is_pending: boolean
+}
+
+/**
+ * Lists sheets and supports switching, renaming, or creating new ones.
+ */
+export function SheetSidebar({
+  sheets,
+  db_path,
+  on_select,
+  on_create,
+  on_rename,
+  on_delete,
+  is_pending,
+}: SheetSidebarProps) {
+  const { confirm } = use_confirm_dialog()
+  const confirm_destructive_actions = use_confirm_destructive_actions()
+  const can_delete_sheet = sheets.length > 1
+  const [new_sheet_name, set_new_sheet_name] = useState('')
+  const [editing_sheet_name, set_editing_sheet_name] = useState<string | null>(
+    null,
+  )
+  const [edited_sheet_name, set_edited_sheet_name] = useState('')
+
+  const handle_create = (event: FormEvent<HTMLFormElement>): void => {
+    event.preventDefault()
+    const trimmed = new_sheet_name.trim()
+
+    if (trimmed.length === 0) {
+      return
+    }
+
+    on_create(trimmed)
+    set_new_sheet_name('')
+  }
+
+  const start_rename = (sheet_name: string): void => {
+    set_editing_sheet_name(sheet_name)
+    set_edited_sheet_name(sheet_name)
+  }
+
+  const cancel_rename = (): void => {
+    set_editing_sheet_name(null)
+    set_edited_sheet_name('')
+  }
+
+  const handle_rename = (event: FormEvent<HTMLFormElement>): void => {
+    event.preventDefault()
+
+    if (editing_sheet_name === null) {
+      return
+    }
+
+    const trimmed = edited_sheet_name.trim()
+
+    if (trimmed.length === 0 || trimmed === editing_sheet_name) {
+      cancel_rename()
+      return
+    }
+
+    on_rename(editing_sheet_name, trimmed)
+    cancel_rename()
+  }
+
+  return (
+    <aside className="flex min-w-0 flex-col gap-3 max-[860px]:min-w-0">
+      <h2 className="m-0 text-[0.72rem] font-semibold uppercase tracking-[0.06em] text-muted">
+        Sheets
+      </h2>
+      <ul className="m-0 flex min-h-0 flex-1 list-none flex-col gap-1.5 p-0">
+        {sheets.map((sheet) => (
+          <li key={sheet.name} className="min-w-0">
+            {editing_sheet_name === sheet.name ? (
+              <form className="flex w-full min-w-0 flex-col gap-1.5" onSubmit={handle_rename}>
+                <input
+                  className={get_input_class_name('compact')}
+                  value={edited_sheet_name}
+                  onChange={(event) => set_edited_sheet_name(event.target.value)}
+                  disabled={is_pending}
+                  autoFocus
+                />
+                <div className="flex gap-1.5">
+                  <button
+                    type="submit"
+                    className={`${get_button_class_name('ghost')} flex-1`}
+                    disabled={
+                      is_pending || edited_sheet_name.trim().length === 0
+                    }
+                  >
+                    Save
+                  </button>
+                  <button
+                    type="button"
+                    className={`${get_button_class_name('ghost')} flex-1`}
+                    disabled={is_pending}
+                    onClick={cancel_rename}
+                  >
+                    Cancel
+                  </button>
+                </div>
+              </form>
+            ) : (
+              <div className="flex min-w-0 items-stretch gap-1">
+                <button
+                  type="button"
+                  className="flex min-w-0 flex-1 cursor-pointer items-center justify-between gap-2 rounded-md border border-transparent bg-transparent px-2.5 py-2 text-left transition-[background-color,color] duration-150 hover:bg-surface-hover"
+                  disabled={is_pending}
+                  onClick={() => on_select(sheet.name)}
+                >
+                  <span
+                    className={`min-w-0 flex-1 truncate font-semibold ${
+                      sheet.isActive || sheet.hasActiveEntry ? 'text-accent' : ''
+                    }`}
+                  >
+                    {sheet.name}
+                  </span>
+                  <span
+                    className={`shrink-0 text-xs whitespace-nowrap ${
+                      sheet.hasActiveEntry ? 'text-accent' : 'text-muted'
+                    }`}
+                  >
+                    {sheet.hasActiveEntry
+                      ? '● active'
+                      : `${sheet.entryCount} entries`}
+                  </span>
+                </button>
+                <SheetActionsMenu
+                  sheet_name={sheet.name}
+                  is_pending={is_pending}
+                  can_delete={can_delete_sheet}
+                  on_rename={() => start_rename(sheet.name)}
+                  on_delete={async () => {
+                    const confirmed = confirm_destructive_actions
+                      ? await confirm(
+                          get_delete_sheet_confirm_dialog(
+                            sheet.name,
+                            sheet.entryCount,
+                            sheet.hasActiveEntry,
+                          ),
+                        )
+                      : true
+
+                    if (confirmed) {
+                      on_delete(sheet.name)
+                    }
+                  }}
+                />
+              </div>
+            )}
+          </li>
+        ))}
+      </ul>
+      <form className="flex w-full min-w-0 flex-col gap-2" onSubmit={handle_create}>
+        <input
+          className={get_input_class_name('compact')}
+          value={new_sheet_name}
+          onChange={(event) => set_new_sheet_name(event.target.value)}
+          placeholder="New sheet name"
+          disabled={is_pending}
+        />
+        <button
+          type="submit"
+          className={get_button_class_name('ghost')}
+          disabled={is_pending || new_sheet_name.trim().length === 0}
+        >
+          Add
+        </button>
+      </form>
+      <p
+        className="mt-auto shrink-0 overflow-wrap-anywhere border-t border-panel-border pt-3 font-mono text-[0.65rem] leading-snug text-muted"
+        title={db_path}
+      >
+        {db_path}
+      </p>
+    </aside>
+  )
+}

package/components/tag-autocomplete-input.tsx

@@ -0,0 +1,183 @@
+'use client'
+
+import {
+  type KeyboardEvent,
+  useEffect,
+  useLayoutEffect,
+  useRef,
+  useState,
+} from 'react'
+
+import { apply_tag_autocomplete_selection } from '@/lib/apply_tag_autocomplete_selection'
+import { filter_known_tags } from '@/lib/filter_known_tags'
+import { format_display_tag } from '@/lib/format_display_tag'
+import { get_tag_autocomplete_context } from '@/lib/get_tag_autocomplete_context'
+import { get_input_class_name } from '@/lib/get_input_class_name'
+
+interface TagAutocompleteInputProps {
+  id: string
+  value: string
+  known_tags: string[]
+  placeholder?: string
+  disabled?: boolean
+  autoFocus?: boolean
+  on_change: (value: string) => void
+}
+
+const option_class =
+  'block w-full cursor-pointer rounded-[0.45rem] border-0 bg-transparent px-2.5 py-1.5 text-left font-inherit text-[0.85rem] text-inherit hover:bg-surface-hover'
+
+/**
+ * Text input that suggests existing @tags while typing.
+ */
+export function TagAutocompleteInput({
+  id,
+  value,
+  known_tags,
+  placeholder,
+  disabled = false,
+  autoFocus = false,
+  on_change,
+}: TagAutocompleteInputProps) {
+  const input_ref = useRef<HTMLInputElement>(null)
+  const list_ref = useRef<HTMLUListElement>(null)
+  const pending_cursor_ref = useRef<number | null>(null)
+  const [cursor_index, set_cursor_index] = useState(0)
+  const [highlighted_index, set_highlighted_index] = useState(0)
+
+  const context = get_tag_autocomplete_context(value, cursor_index)
+  const suggestions =
+    context === null ? [] : filter_known_tags(known_tags, context.query)
+  const is_open = context !== null && suggestions.length > 0 && !disabled
+
+  useLayoutEffect(() => {
+    if (pending_cursor_ref.current === null || input_ref.current === null) {
+      return
+    }
+
+    input_ref.current.setSelectionRange(
+      pending_cursor_ref.current,
+      pending_cursor_ref.current,
+    )
+    set_cursor_index(pending_cursor_ref.current)
+    pending_cursor_ref.current = null
+  }, [value])
+
+  useEffect(() => {
+    set_highlighted_index(0)
+  }, [value, cursor_index, suggestions.length])
+
+  const update_cursor_from_input = (): void => {
+    set_cursor_index(input_ref.current?.selectionStart ?? value.length)
+  }
+
+  const close_autocomplete = (): void => {
+    set_highlighted_index(0)
+  }
+
+  const apply_tag = (tag: string): void => {
+    if (context === null) {
+      return
+    }
+
+    const { next_text, next_cursor } = apply_tag_autocomplete_selection(
+      value,
+      context,
+      tag,
+    )
+
+    pending_cursor_ref.current = next_cursor
+    on_change(next_text)
+    close_autocomplete()
+  }
+
+  const handle_key_down = (event: KeyboardEvent<HTMLInputElement>): void => {
+    if (!is_open) {
+      return
+    }
+
+    if (event.key === 'ArrowDown') {
+      event.preventDefault()
+      set_highlighted_index((index) => (index + 1) % suggestions.length)
+      return
+    }
+
+    if (event.key === 'ArrowUp') {
+      event.preventDefault()
+      set_highlighted_index(
+        (index) => (index - 1 + suggestions.length) % suggestions.length,
+      )
+      return
+    }
+
+    if (event.key === 'Enter' || event.key === 'Tab') {
+      event.preventDefault()
+      const selected = suggestions[highlighted_index]
+
+      if (selected !== undefined) {
+        apply_tag(selected)
+      }
+
+      return
+    }
+
+    if (event.key === 'Escape') {
+      event.preventDefault()
+      close_autocomplete()
+    }
+  }
+
+  return (
+    <div className="relative min-w-0">
+      <input
+        ref={input_ref}
+        id={id}
+        type="text"
+        className={get_input_class_name()}
+        value={value}
+        placeholder={placeholder}
+        disabled={disabled}
+        autoFocus={autoFocus}
+        autoComplete="off"
+        aria-autocomplete="list"
+        aria-expanded={is_open}
+        aria-controls={is_open ? `${id}-tag-suggestions` : undefined}
+        onChange={(event) => {
+          on_change(event.target.value)
+          set_cursor_index(event.target.selectionStart ?? event.target.value.length)
+        }}
+        onClick={update_cursor_from_input}
+        onKeyUp={update_cursor_from_input}
+        onKeyDown={handle_key_down}
+        onBlur={() => {
+          window.setTimeout(close_autocomplete, 120)
+        }}
+      />
+      {is_open ? (
+        <ul
+          ref={list_ref}
+          id={`${id}-tag-suggestions`}
+          role="listbox"
+          className="absolute left-0 right-0 top-full z-20 mt-1 max-h-48 list-none overflow-y-auto rounded-md border border-panel-border bg-panel p-1.5 shadow-md"
+        >
+          {suggestions.map((tag, index) => (
+            <li key={tag} role="option" aria-selected={index === highlighted_index}>
+              <button
+                type="button"
+                className={`${option_class} ${
+                  index === highlighted_index ? 'bg-surface-hover' : ''
+                }`}
+                onMouseDown={(event) => {
+                  event.preventDefault()
+                  apply_tag(tag)
+                }}
+              >
+                {format_display_tag(tag)}
+              </button>
+            </li>
+          ))}
+        </ul>
+      ) : null}
+    </div>
+  )
+}

package/components/tag-filter-mode-setting.tsx

@@ -0,0 +1,47 @@
+'use client'
+
+import { useSyncExternalStore } from 'react'
+
+import { SettingRadioGroup } from '@/components/setting-radio-group'
+import { tag_filter_mode_preference } from '@/lib/preferences/tag_filter_mode_preference'
+import { persist_ui_preference } from '@/lib/persist_ui_preference'
+import { type TagFilterMode } from '@/lib/types/ui_preferences'
+
+const options: { value: TagFilterMode; label: string; description: string }[] = [
+  {
+    value: 'all',
+    label: 'Match all tags',
+    description: 'Entry must include every selected tag.',
+  },
+  {
+    value: 'any',
+    label: 'Match any tag',
+    description: 'Entry can include any one of the selected tags.',
+  },
+]
+
+const set_tag_filter_mode = (value: TagFilterMode): void => {
+  persist_ui_preference(tag_filter_mode_preference, value)
+}
+
+/**
+ * Setting: how multiple tag filters are combined.
+ */
+export function TagFilterModeSetting() {
+  const value = useSyncExternalStore(
+    tag_filter_mode_preference.subscribe,
+    tag_filter_mode_preference.get_snapshot,
+    tag_filter_mode_preference.get_server_snapshot,
+  )
+
+  return (
+    <SettingRadioGroup<TagFilterMode>
+      name="tag-filter-mode"
+      legend="Tag filter mode"
+      description="How entries match when multiple tags are selected on a sheet."
+      value={value}
+      options={options}
+      on_change={set_tag_filter_mode}
+    />
+  )
+}