super-time-tracker-ui 0.1.4 → 0.1.7

package/components/settings-page-layout.tsx

@@ -1,53 +0,0 @@
-import { type ReactNode } from 'react'
-
-import { SettingsNav } from '@/components/settings-nav'
-import { SettingsSavedToast } from '@/components/settings-saved-toast'
-import {
-  TrackerTopbar,
-  type TrackerTopbarBreadcrumb,
-} from '@/components/tracker-topbar'
-
-interface SettingsPageLayoutProps {
-  breadcrumb: TrackerTopbarBreadcrumb
-  title: string
-  description?: string
-  children: ReactNode
-}
-
-/**
- * Shared chrome for settings sub-pages: topbar, sidebar nav, and main content.
- */
-export function SettingsPageLayout({
-  breadcrumb,
-  title,
-  description,
-  children,
-}: SettingsPageLayoutProps) {
-  return (
-    <>
-      <SettingsSavedToast />
-      <TrackerTopbar breadcrumb={breadcrumb} />
-      <main className="mx-auto grid w-full max-w-[1120px] grid-cols-[minmax(12rem,16rem)_minmax(0,1fr)] gap-6 px-5 pb-10 pt-6 max-[860px]:grid-cols-1">
-        <aside className="flex flex-col gap-2">
-          <h2 className="m-0 text-[0.72rem] font-semibold uppercase tracking-[0.06em] text-muted">
-            Settings
-          </h2>
-          <SettingsNav />
-        </aside>
-        <section className="flex min-w-0 flex-col gap-4">
-          <header className="flex flex-col gap-1">
-            <h1 className="m-0 text-[1.35rem] font-[650] tracking-tight">
-              {title}
-            </h1>
-            {description !== undefined ? (
-              <p className="m-0 text-[0.9rem] leading-relaxed text-muted">
-                {description}
-              </p>
-            ) : null}
-          </header>
-          {children}
-        </section>
-      </main>
-    </>
-  )
-}

package/components/settings-saved-toast.tsx

@@ -1,57 +0,0 @@
-'use client'
-
-import { useEffect, useState } from 'react'
-
-import {
-  SETTINGS_SAVED_DEFAULT_MESSAGE,
-  subscribe_settings_saved,
-} from '@/lib/notify_settings_saved'
-
-const toast_visible_ms = 2800
-
-/**
- * Fixed toast shown when a settings preference is persisted.
- */
-export function SettingsSavedToast() {
-  const [message, set_message] = useState<string | null>(null)
-
-  useEffect(() => {
-    let hide_timer: ReturnType<typeof setTimeout> | null = null
-
-    const unsubscribe = subscribe_settings_saved((next_message) => {
-      set_message(next_message)
-
-      if (hide_timer !== null) {
-        clearTimeout(hide_timer)
-      }
-
-      hide_timer = setTimeout(() => {
-        set_message(null)
-        hide_timer = null
-      }, toast_visible_ms)
-    })
-
-    return () => {
-      unsubscribe()
-
-      if (hide_timer !== null) {
-        clearTimeout(hide_timer)
-      }
-    }
-  }, [])
-
-  if (message === null) {
-    return null
-  }
-
-  return (
-    <div
-      role="status"
-      aria-live="polite"
-      aria-atomic="true"
-      className="pointer-events-none fixed bottom-6 left-1/2 z-50 -translate-x-1/2 rounded-md border border-accent-border bg-panel px-4 py-2.5 text-[0.88rem] font-medium text-foreground shadow-md transition-[opacity,transform] duration-200"
-    >
-      {message || SETTINGS_SAVED_DEFAULT_MESSAGE}
-    </div>
-  )
-}

package/components/sheet-actions-menu.tsx

@@ -1,108 +0,0 @@
-'use client'
-
-import { useEffect, useRef, useState } from 'react'
-
-import { HamburgerIcon } from '@/components/hamburger-icon'
-
-interface SheetActionsMenuProps {
-  sheet_name: string
-  is_pending: boolean
-  can_delete: boolean
-  on_rename: () => void
-  on_delete: () => void
-}
-
-const menu_item_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 disabled:cursor-not-allowed disabled:opacity-55'
-
-/**
- * Hamburger menu for sheet actions such as rename.
- */
-export function SheetActionsMenu({
-  sheet_name,
-  is_pending,
-  can_delete,
-  on_rename,
-  on_delete,
-}: SheetActionsMenuProps) {
-  const [is_open, set_is_open] = useState(false)
-  const menu_ref = useRef<HTMLDivElement>(null)
-
-  useEffect(() => {
-    if (!is_open) {
-      return
-    }
-
-    const handle_pointer_down = (event: PointerEvent): void => {
-      if (
-        menu_ref.current !== null &&
-        !menu_ref.current.contains(event.target as Node)
-      ) {
-        set_is_open(false)
-      }
-    }
-
-    document.addEventListener('pointerdown', handle_pointer_down)
-
-    return () => {
-      document.removeEventListener('pointerdown', handle_pointer_down)
-    }
-  }, [is_open])
-
-  const close_menu = (): void => {
-    set_is_open(false)
-  }
-
-  return (
-    <div className="relative shrink-0 self-center" ref={menu_ref}>
-      <button
-        type="button"
-        className="inline-flex cursor-pointer appearance-none items-center justify-center rounded-none border-0 bg-transparent p-0.5 text-muted shadow-none hover:opacity-75 focus-visible:outline-2 focus-visible:outline-input-focus-border focus-visible:outline-offset-2 disabled:cursor-not-allowed disabled:opacity-55"
-        aria-label={`Actions for sheet ${sheet_name}`}
-        aria-expanded={is_open}
-        aria-haspopup="menu"
-        disabled={is_pending}
-        onClick={() => set_is_open((open) => !open)}
-      >
-        <HamburgerIcon />
-      </button>
-      {is_open ? (
-        <ul
-          className="absolute right-0 top-full z-10 mt-1.5 min-w-56 list-none rounded-md border border-panel-border bg-panel p-1.5 shadow-md"
-          role="menu"
-        >
-          <li role="none">
-            <button
-              type="button"
-              className={menu_item_class}
-              role="menuitem"
-              disabled={is_pending}
-              onClick={() => {
-                close_menu()
-                on_rename()
-              }}
-            >
-              Rename
-            </button>
-          </li>
-          <li className="my-1 border-t border-panel-border" role="separator" aria-hidden="true" />
-          <li role="none">
-            <button
-              type="button"
-              className={`${menu_item_class} text-danger`}
-              role="menuitem"
-              disabled={is_pending || !can_delete}
-              title={can_delete ? undefined : 'Cannot delete the last sheet'}
-              onClick={() => {
-                close_menu()
-                on_delete()
-              }}
-            >
-              Delete sheet
-            </button>
-          </li>
-        </ul>
-      ) : null}
-    </div>
-  )
-}

package/components/sheet-sidebar.tsx

@@ -1,196 +0,0 @@
-'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

@@ -1,183 +0,0 @@
-'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

@@ -1,47 +0,0 @@
-'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}
-    />
-  )
-}