kindred/silo
1
1
Fork 0
Code Issues 30 Pull Requests Actions Packages Projects Releases Wiki Activity

feat(web): migrate Items page to React with UI improvements #8

New Issue
Closed
opened 2026-02-06 20:43:55 +00:00 by forbes · 0 comments
forbes commented 2026-02-06 20:43:55 +00:00
Owner
Copy Link

Phase 2 of #6 — Frontend Migration

Goal

Rebuild the Items page (currently 4,243 lines in items.html) as React components with the UI improvements specified in the epic. This is the largest and most complex page — once this is done, the remaining pages are straightforward.

UI Improvements (from epic discussion)

Footer Stats (replace top cards)

  • Remove the 4 stat cards from the top of the page
  • Add a single-line footer bar showing: Total Items | Parts | Assemblies | Documents
  • Footer should be fixed at the bottom, minimal height (~28px)
  • Counts update reactively as filters change

Row Density

  • Reduce vertical padding per row (aim for ~28-32px row height)
  • Alternating row background colors using Catppuccin surface0/surface1
  • Compact typography — smaller font size for table cells

Right-Click Column Configuration

  • Custom context menu component (not browser default)
  • Right-click on table header shows column toggle menu
  • Checkboxes for each available column (PN, Description, Category, Status, Rev, Created, etc.)
  • Column visibility persisted to localStorage
  • Separate column configs for horizontal vs vertical layout (preserve existing behavior)

Layout Toggle

  • Keep horizontal/vertical toggle button in toolbar
  • Horizontal: item list left, detail panel right (resizable split)
  • Vertical: detail panel top, item list bottom
  • Layout preference persisted to localStorage

Components to Build

ItemsPage

  • Top toolbar: search input, filter pills (project, category, type), layout toggle, search scope
  • Main workspace with split panel (list + detail)
  • Footer stats bar

ItemTable

  • Virtual scrolling or pagination for large datasets
  • Sortable columns (click header to sort)
  • Column resize handles
  • Row selection with keyboard navigation (arrow keys, Enter to open detail)
  • Alternating row colors
  • Loading skeleton state

ContextMenu (reusable component)

  • Positioned at cursor on right-click
  • Closes on click outside or Escape
  • Supports checkboxes, dividers, and action items
  • Used for column config and potentially row actions later

ItemDetail (split panel)

  • Tabbed interface: Main, Properties, Revisions, BOM, Where Used
  • Main tab: part number, description, category, status, dates
  • Properties tab: key-value pairs from revision properties
  • Revisions tab: revision list with comparison
  • BOM tab: children table with quantity, ref designator
  • Where Used tab: parent assemblies

Filters and Search

  • Project dropdown (from /api/projects)
  • Category filter
  • Type filter (part/assembly/document)
  • Search input with debounce
  • Search scope toggle (All / PN / Description)
  • Ctrl+F opens filter bar (match existing shortcut)

Data Flow

  • Items fetched from GET /api/items with query params
  • Detail fetched from GET /api/items/{pn} on row click
  • BOM from GET /api/items/{pn}/bom
  • Revisions from GET /api/items/{pn}/revisions
  • Where-used from GET /api/items/{pn}/bom/where-used
  • All CRUD operations via existing API endpoints

Acceptance Criteria

  • Items page fully functional in React — feature parity with Go template version
  • All UI improvements implemented (footer stats, row density, alternating colors, context menu)
  • Horizontal and vertical layouts work correctly
  • Column configuration persisted per layout mode
  • Detail panel shows all 5 tabs with correct data
  • Search and filters work
  • CRUD operations work (create, update, archive items)
  • File upload/download works
  • Performance: smooth scrolling with 500+ items

Dependencies

Requires #7 (scaffold, API client, auth, router).

## Phase 2 of #6 — Frontend Migration ### Goal Rebuild the Items page (currently 4,243 lines in items.html) as React components with the UI improvements specified in the epic. This is the largest and most complex page — once this is done, the remaining pages are straightforward. ### UI Improvements (from epic discussion) #### Footer Stats (replace top cards) - [ ] Remove the 4 stat cards from the top of the page - [ ] Add a single-line footer bar showing: Total Items | Parts | Assemblies | Documents - [ ] Footer should be fixed at the bottom, minimal height (~28px) - [ ] Counts update reactively as filters change #### Row Density - [ ] Reduce vertical padding per row (aim for ~28-32px row height) - [ ] Alternating row background colors using Catppuccin surface0/surface1 - [ ] Compact typography — smaller font size for table cells #### Right-Click Column Configuration - [ ] Custom context menu component (not browser default) - [ ] Right-click on table header shows column toggle menu - [ ] Checkboxes for each available column (PN, Description, Category, Status, Rev, Created, etc.) - [ ] Column visibility persisted to localStorage - [ ] Separate column configs for horizontal vs vertical layout (preserve existing behavior) #### Layout Toggle - [ ] Keep horizontal/vertical toggle button in toolbar - [ ] Horizontal: item list left, detail panel right (resizable split) - [ ] Vertical: detail panel top, item list bottom - [ ] Layout preference persisted to localStorage ### Components to Build #### ItemsPage - [ ] Top toolbar: search input, filter pills (project, category, type), layout toggle, search scope - [ ] Main workspace with split panel (list + detail) - [ ] Footer stats bar #### ItemTable - [ ] Virtual scrolling or pagination for large datasets - [ ] Sortable columns (click header to sort) - [ ] Column resize handles - [ ] Row selection with keyboard navigation (arrow keys, Enter to open detail) - [ ] Alternating row colors - [ ] Loading skeleton state #### ContextMenu (reusable component) - [ ] Positioned at cursor on right-click - [ ] Closes on click outside or Escape - [ ] Supports checkboxes, dividers, and action items - [ ] Used for column config and potentially row actions later #### ItemDetail (split panel) - [ ] Tabbed interface: Main, Properties, Revisions, BOM, Where Used - [ ] Main tab: part number, description, category, status, dates - [ ] Properties tab: key-value pairs from revision properties - [ ] Revisions tab: revision list with comparison - [ ] BOM tab: children table with quantity, ref designator - [ ] Where Used tab: parent assemblies #### Filters and Search - [ ] Project dropdown (from /api/projects) - [ ] Category filter - [ ] Type filter (part/assembly/document) - [ ] Search input with debounce - [ ] Search scope toggle (All / PN / Description) - [ ] Ctrl+F opens filter bar (match existing shortcut) ### Data Flow - Items fetched from `GET /api/items` with query params - Detail fetched from `GET /api/items/{pn}` on row click - BOM from `GET /api/items/{pn}/bom` - Revisions from `GET /api/items/{pn}/revisions` - Where-used from `GET /api/items/{pn}/bom/where-used` - All CRUD operations via existing API endpoints ### Acceptance Criteria - Items page fully functional in React — feature parity with Go template version - All UI improvements implemented (footer stats, row density, alternating colors, context menu) - Horizontal and vertical layouts work correctly - Column configuration persisted per layout mode - Detail panel shows all 5 tabs with correct data - Search and filters work - CRUD operations work (create, update, archive items) - File upload/download works - Performance: smooth scrolling with 500+ items ### Dependencies Requires #7 (scaffold, API client, auth, router).
Sign in to join this conversation.
No Branch/Tag Specified
Branches Tags
Labels
No items
No Label
Milestone
No items
No Milestone
Projects
Clear projects
No project
Assignees
Clear assignees
forbes
No Assignees
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: kindred/silo#8
Delete Branch "%!s()"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?