Commit graph

17 commits

Author SHA1 Message Date
Richard R
f2c7760381
Redesign: shared UI design system + app-wide migration (#96)
* phase 0: token foundation

* phase 1: motion language

* phase 2: primitives and semantic tokens

* phase 3: depth and rhythm polish

* phase 4: enforce design system lint rules

* phase 5: split ui primitives into modules

* phase 7: refactor app surfaces to ui layer

* phase 9: enforce ui architecture imports

* phase 10: add ui system harness

* fix compact reader auth control

* fix pdf loader flash

* Converge sidebar and reader controls

* refactor: remove initial loader state and related logic from PDFViewerPage

* Remove legacy UI shim imports

* Converge modal and drawer frames

* Migrate secondary modals to shared frame

* Move settings modal onto shared frame

* Use shared cards in audiobook settings

* Converge choice and popover surfaces

* Converge reader navigation buttons

* Refactor UI components to use consistent button and icon styles across the application

* refactor(ui): unify button usage in settings, admin, and doclist components

Replace native button elements with shared Button, ChoiceTile, and IconButton
components for consistent UI behavior and styling. Update classNames and
props to match new component APIs. Adjust FinderSidebar to use utility
function for conditional class merging.

* feat(ui): introduce shared Listbox components for unified select and dropdown styling

Replace direct usage of Headless UI Listbox primitives with new SharedListboxButton,
SharedListboxOption, and SharedListboxOptions components across AudiobookExportModal,
FinderToolbar, VoicesControlBase, and select UI. Refactor related imports and classNames
to centralize dropdown styling and logic. Simplify UserMenu button markup for improved
consistency.

This change consolidates dropdown/select UI patterns, reduces duplication, and
improves maintainability by providing a single source of truth for Listbox styling
and behavior.

* refactor(ui): consolidate button, menu, popover, and range primitives for unified usage

Remove legacy UI harness and dev/demo files. Replace scattered button, menu, popover, and range input utilities with shared, composable primitives: Button, ButtonLink, ButtonAnchor, MenuActionItem, MenuItemsSurface, PopoverSurface, PopoverTrigger, and RangeInput. Update all usages across app, admin, player, and document components to use these new primitives, eliminating duplicated class logic and improving consistency. Remove obsolete utility files and class exports. This change streamlines UI code, centralizes styling, and reduces maintenance overhead.

* feat(ui): redesign range input with dynamic progress styling and improved accessibility

Revamp the range input component to support dynamic progress indication using CSS custom properties and linear gradients. Add logic to compute and set the progress percentage based on current value, min, and max. Refine focus and disabled states for better accessibility and usability. Update styling for both WebKit and Mozilla engines to ensure consistent appearance. This change enhances visual feedback and modernizes the range slider UI.

* style(ui): update range input to use secondary accent color for progress

Switch range input progress styling from primary to secondary accent color
for both WebKit and Mozilla engines. Remove drop shadow from slider thumb
for a cleaner appearance. This change aligns the component with the updated
design palette and simplifies visual effects.

* refactor(app): remove unused Link imports from public pages and components

Eliminate redundant imports of the Link component from Next.js in several
public-facing pages and components. These imports were no longer in use
after recent UI refactoring and consolidation of navigation elements.
This cleanup reduces bundle size and improves code clarity.

* chore(ui): remove unused export of segmented control classes from select component

Eliminate unnecessary export statements for segmentedButtonClass and
segmentedGroupClass in the select component to streamline the module's
public API and reduce potential confusion.

* test(accessibility): improve confirm dialog test coverage and refactor media state helper

Expand accessibility tests for ConfirmDialog to assert dialog semantics,
ARIA attributes, and visible destructive actions using test IDs. Refactor
expectMediaState helper to check both UI control state and underlying
media signals for more robust playback state detection.

* refactor(ui): improve segmented control accessibility and update danger color tokens

Update SegmentedControl to support full keyboard navigation and focus management,
enhancing accessibility. Replace string indicator in Select with icon, and update
button danger variant to use new --danger-strong variable for hover states. Add
danger-strong token to Tailwind config and globals. Refine dropzone disabled
behavior, adjust focus ring for better contrast, and apply minor UI consistency
tweaks across components.

* feat(ui): convert SidebarNavLink to forwardRef component

Refactor SidebarNavLink to use React.forwardRef, enabling parent components
to access the underlying anchor element's ref. Update prop typing and
function signature accordingly for improved composability and integration
with higher-order components.
2026-06-01 16:17:12 -06:00
Richard R
b359d66352 refactor(doclist): update GalleryView keyboard handling and icon visuals
- Add Delete/Backspace keyboard shortcut for document deletion in GalleryView
- Use buttonClass utility for consistent button styling
- Simplify GalleryViewIcon SVG for improved clarity and alignment

These changes streamline user interactions and enhance visual consistency in the document gallery view.
2026-05-30 18:06:12 -06:00
Richard R
0448835892 style(ui): improve bottom padding for safe area compatibility
update bottom padding on banners, status bars, and player controls to use
env(safe-area-inset-bottom) for better support on devices with display
cutouts or home indicators. also add viewportFit: cover to layout for
full-viewport rendering on mobile browsers.
2026-05-30 15:35:02 -06:00
Richard R
2695c7055b Fix narrow-screen initial render in FinderWindow 2026-05-29 22:27:30 -06:00
Richard R
b295d2f38d feat(doclist): add mobile sidebar close handler to FinderWindow and DocumentList
Introduce onRequestSidebarClose prop to FinderWindow and implement its
usage in DocumentList to enable closing the sidebar on mobile via
backdrop tap or Esc key. Enhances mobile usability by allowing users to
dismiss the sidebar more intuitively.
2026-05-29 21:58:45 -06:00
Richard R
503319d46e style(ui): adjust sidebar hover effects and document skeleton timeout
Update FinderSidebar to remove background color on inactive hover for
improved visual clarity. Extend the DocumentSkeleton warning timeout to
10 seconds to allow more time before displaying the alert. Refine test
description for icons grid layout to clarify auto-fit behavior.
2026-05-29 21:49:13 -06:00
Richard R
dca1a9b35d feat(doclist): unify document identity handling and improve drag-and-drop robustness
Introduce a document identity key combining type and id for consistent
identification across document operations, including selection, drag-and-drop,
and folder management. Refactor drag item structures to use identity objects
instead of plain ids, preventing cross-type collisions and improving merge
accuracy. Update Dexie recently opened map to use identity keys. Enhance
document size formatting for small files and improve error feedback in the
uploader. Clean up redundant props and standardize icon SVG handling.
2026-05-28 22:27:15 -06:00
Richard R
5a684214c8 fix(doclist): mobile drawer close behavior and recents toolbar polish 2026-05-28 17:45:05 -06:00
Richard R
98736bf6e3 refactor(doclist): remove columns view and update text labeling
Eliminate the deprecated "columns" view mode from the document list, toolbar,
icons, and skeleton components. Update all related types and logic to only
support "icons", "list", and "gallery" views. Standardize user-facing labels
from "HTML" to "Text" for improved clarity across the sidebar, segment
locator labels, and document counts. Clean up associated code and types to
reflect these changes.
2026-05-28 17:20:02 -06:00
Richard R
c12f795026 feat(ui): move app actions to sidebar and add sidebar user menu variant
Shift app-level actions (settings and user menu) from the top bar to the bottom
of the sidebar for improved navigation consistency. Introduce a new "sidebar"
variant for the UserMenu component with tailored styling and behavior for
sidebar placement. Update SettingsModal to support a customizable trigger label
and styling for sidebar integration. Refactor FinderSidebar to accept an
optional bottomSlot, enabling flexible placement of sidebar controls.
2026-05-28 14:58:03 -06:00
Richard R
eff25ad8df feat(doclist): add bulk folder removal with sidebar menu and confirmation
Introduce a "Remove All Folders" action accessible via a new sidebar menu,
allowing users to clear all folders at once. Add a confirmation dialog to
prevent accidental removal. Update the FinderSidebar to include a menu button
with the new action, and implement supporting state and handlers in the
document list. Add DotsHorizontalIcon for menu UI. Expand folder tests to
cover the new bulk removal flow.
2026-05-28 05:18:53 -06:00
Richard R
85aff2c1be refactor(doclist): flatten foldered document structure and remove folder UI
Eliminate folder grouping logic and related UI from all document list views.
Switch to a flat document array model for rendering, selection, and filtering.
Remove folder collapse/expand state and folder drag-and-drop handling. Update
sidebar and toolbar components to remove folder creation and management
controls. Simplify props and internal state across all views for consistency.
2026-05-28 04:36:08 -06:00
Richard R
495c197c4c feat(doclist): add recently opened sorting and metadata to documents list
Introduce recentlyOpenedAt field to document types and fetch per-document
recently opened timestamps from local cache. Update the "Recently Opened"
sidebar filter to sort by this value and show only documents with recent
activity. Adjust grid layout logic for icons view to better handle small
numbers of documents. Update sidebar label for clarity.
2026-05-27 23:13:53 -06:00
Richard R
13e0647b47 refactor(doclist): convert icon size controls to dropdown for icons view toggle
Replace inline icon size buttons with a dropdown menu that appears when
the icons view toggle is active. This change improves toolbar clarity by
grouping related controls and enhances accessibility with better focus
handling. The update also streamlines the button structure for view mode
selection.
2026-05-27 21:10:01 -06:00
Richard R
53993aa3c6 feat(doclist): improve sidebar responsiveness and toolbar interaction in document list
Enhance mobile and desktop sidebar behavior by introducing a separate state for mobile sidebar visibility and ensuring it does not persist from desktop state. Update FinderToolbar to visually indicate sidebar open state and make the toolbar sticky for better accessibility. Refine FinderSidebar width handling for improved responsiveness. Remove redundant border in mobile sidebar dialog for a cleaner appearance. These changes provide a more consistent and intuitive sidebar experience across viewports.
2026-05-27 20:11:43 -06:00
Richard R
eb8820d888 feat(doclist): enhance document list UI with overlay uploader and improved file size formatting
Integrate DocumentUploader in overlay mode to wrap all document views, enabling drag-and-drop uploads across the entire list area. Refine file size formatting to support KB, MB, and GB units in all views and tiles. Standardize button scaling and padding for consistent UI rhythm. Update DocumentPreview and detail panels to display both type and human-readable size. Add overlay drag visual feedback for uploads.

These changes improve usability, visual clarity, and consistency in the document list interface.
2026-05-27 19:35:03 -06:00
Richard R
7a88dabc53 refactor(doclist): redesign document list with new views, DnD, and windowed UI
Revamp the document list experience by introducing a Finder-style window
interface with multiple views (icons, list, columns, gallery) and a new
sidebar filter system. Remove legacy folder and list item components in
favor of modular, windowed views. Integrate react-dnd-touch-backend and
custom DnD context for improved drag-and-drop, including mobile support.
Update uploader and dialog styles for consistency. Extend document types
to support new view modes, icon sizing, and sidebar state.
2026-05-27 18:59:13 -06:00