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

epic: migrate frontend from Go templates to React + Vite + TypeScript #6

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

Epic: Frontend Migration

Migrate the Silo web UI from inline Go templates with vanilla JavaScript (~7,000 lines across 6 templates, ~3,500 lines of inline JS in items.html alone) to a React + Vite + TypeScript single-page application.

Motivation

The current frontend uses server-rendered Go templates with hand-rolled vanilla JS doing manual DOM manipulation, global state variables, and getElementById calls. This worked for the initial implementation but is becoming a maintenance burden as UI complexity grows. Upcoming features (context menus, customizable columns, inline editing, audit UI, batch AI workflows) will compound the problem.

React + Vite + TS provides:

  • Component composition and reusability across pages
  • Type safety with TypeScript
  • Declarative UI updates instead of manual DOM manipulation
  • Better state management (hooks, context)
  • Testable components
  • Fast development with Vite HMR
  • Rich ecosystem for complex widgets (context menus, virtual scrolling, drag-and-drop)

Architecture

  • Frontend: web/ directory with React + Vite + TypeScript
  • Backend: Existing Go API unchanged — serves JSON at /api/*
  • Serving: silod serves the built React app as static files at / and API at /api/*
  • Build: npm run build produces static assets in web/dist/, embedded or served by Go
  • Docker: Multi-stage Dockerfile builds frontend then backend
  • Dev: Vite dev server proxies /api/* to Go backend

Design Requirements

Items Page Improvements

  • Move stat cards from top to a single-line footer (minimal vertical footprint)
  • Maximize item row density — reduce vertical space per row
  • Alternating row background colors for visual distinction
  • Right-click context menu for column customization
  • Keep horizontal/vertical layout toggle
  • Catppuccin Mocha dark theme preserved

Phased Sub-Issues

  • #7 — Phase 1: Scaffold React + Vite + TS, shared layout, auth, API client, router
  • #8 — Phase 2: Migrate Items page with UI improvements
  • #9 — Phase 3: Migrate Projects, Schemas, Settings, Login pages
  • #10 — Phase 4: Remove Go templates, clean up, Docker build integration

Non-Goals

  • No backend API changes (the JSON API is already clean)
  • No new features beyond the Items page improvements listed above
  • Audit UI (Issue #5) will be built natively in React after migration
## Epic: Frontend Migration Migrate the Silo web UI from inline Go templates with vanilla JavaScript (~7,000 lines across 6 templates, ~3,500 lines of inline JS in items.html alone) to a React + Vite + TypeScript single-page application. ## Motivation The current frontend uses server-rendered Go templates with hand-rolled vanilla JS doing manual DOM manipulation, global state variables, and getElementById calls. This worked for the initial implementation but is becoming a maintenance burden as UI complexity grows. Upcoming features (context menus, customizable columns, inline editing, audit UI, batch AI workflows) will compound the problem. React + Vite + TS provides: - Component composition and reusability across pages - Type safety with TypeScript - Declarative UI updates instead of manual DOM manipulation - Better state management (hooks, context) - Testable components - Fast development with Vite HMR - Rich ecosystem for complex widgets (context menus, virtual scrolling, drag-and-drop) ## Architecture - **Frontend**: `web/` directory with React + Vite + TypeScript - **Backend**: Existing Go API unchanged — serves JSON at `/api/*` - **Serving**: silod serves the built React app as static files at `/` and API at `/api/*` - **Build**: `npm run build` produces static assets in `web/dist/`, embedded or served by Go - **Docker**: Multi-stage Dockerfile builds frontend then backend - **Dev**: Vite dev server proxies `/api/*` to Go backend ## Design Requirements ### Items Page Improvements - Move stat cards from top to a single-line footer (minimal vertical footprint) - Maximize item row density — reduce vertical space per row - Alternating row background colors for visual distinction - Right-click context menu for column customization - Keep horizontal/vertical layout toggle - Catppuccin Mocha dark theme preserved ## Phased Sub-Issues - #7 — Phase 1: Scaffold React + Vite + TS, shared layout, auth, API client, router - #8 — Phase 2: Migrate Items page with UI improvements - #9 — Phase 3: Migrate Projects, Schemas, Settings, Login pages - #10 — Phase 4: Remove Go templates, clean up, Docker build integration ## Non-Goals - No backend API changes (the JSON API is already clean) - No new features beyond the Items page improvements listed above - Audit UI (Issue #5) will be built natively in React after migration
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#6
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?