Complete WebUI redesign with modern theming #98

New issue

Closed

opened 2026-01-22 21:50:03 +00:00 by jack · 0 comments

jack commented

2026-01-22 21:50:03 +00:00

Owner

Feature Request

Complete redesign of the WebUI with a modern, polished visual style.

Design References

Two reference templates available at ~/references/:

Nexus - Admin Dashboard (Tailwind CSS v4 + daisyUI v5 + Alpine.js)
Scalo - Startup Template (Tailwind CSS v4 + daisyUI v5)

Technology Stack (aligned with references)

Tailwind CSS v4 - CSS-based config via @theme, no tailwind.config.js
daisyUI v5 - Component library for consistent UI elements
Phosphor Icons - Larger icon set with 6 weights (thin, light, regular, bold, fill, duotone)
- Via Iconify: <span class="iconify ph--icon-name"></span>
- Or React: @phosphor-icons/react
Keep React as framework (just update styling approach)

Design Direction

Theme System

Based on Nexus, implement multiple theme variants:

Dark (default) - #121416 root, #181c20 sidebar, vibrant accent colors
Light - Clean white with subtle gray tones
Dim - Softer dark variant for reduced eye strain
Consider "material" variant with larger border-radius (20px)

Color Palette (from Nexus dark theme)

--color-primary: #378dff;      /* Blue - actions, links */
--color-secondary: #b071ff;    /* Purple - secondary actions */
--color-accent: #00d3bb;       /* Teal - highlights */
--color-success: #0bbf58;      /* Green - completed, success */
--color-warning: #f5a524;      /* Orange - warnings */
--color-error: #f31260;        /* Red - errors, bugs */
--color-info: #14b4ff;         /* Light blue - info */

Layout Improvements

Collapsible sidebar with hover-to-expand mode (like Nexus)
Sticky topbar with blur effect on scroll (like Scalo)
Subtle background effects - mesh/grid patterns at low opacity
Card-based content with consistent padding (--card-p: 20px)
Small border-radius (0.25rem) for sharp, modern look

Specific UI Elements

Session Cards:

Clean card design with subtle border (border-base-300)
Expandable sections for file lists (addresses #94)
Visual timeline markers for summaries
Status indicators with semantic colors

Dashboard:

Stats cards with icon + number + label pattern
Charts with matching color scheme
Activity feed with timestamps

Navigation:

Icon + label sidebar items
Collapsible menu groups
Active state highlighting
Breadcrumbs for deep navigation

Search:

Full-width search input with icon
Filter chips/tags
Results with highlighted matches

Animations & Transitions

Smooth sidebar collapse (transition-all duration-300)
Hover states on interactive elements
Loading skeletons for async content
Subtle fade-ins for new content

Implementation Approach

Phase 1: Set up daisyUI v5 + Tailwind v4, define theme CSS
Phase 2: Redesign layout (sidebar, topbar, content area)
Phase 3: Update individual views (dashboard, sessions, search)
Phase 4: Add micro-interactions and polish

#92 Auto-refresh for WebUI sessions view
#94 Show file details for read/modified counts
#95 Narrative/facts view toggle
#96 Chronological summaries in timeline
#97 Search filters functionality

Notes

The current stack uses React with custom CSS. Migration path:

Add Tailwind v4 + daisyUI v5 to build
Gradually replace custom components with daisyUI equivalents
Extract shared styles to theme CSS variables
Remove old CSS as components are migrated

## Feature Request Complete redesign of the WebUI with a modern, polished visual style. ## Design References Two reference templates available at `~/references/`: - **Nexus** - Admin Dashboard (Tailwind CSS v4 + daisyUI v5 + Alpine.js) - **Scalo** - Startup Template (Tailwind CSS v4 + daisyUI v5) ## Technology Stack (aligned with references) - **Tailwind CSS v4** - CSS-based config via `@theme`, no tailwind.config.js - **daisyUI v5** - Component library for consistent UI elements - **Phosphor Icons** - Larger icon set with 6 weights (thin, light, regular, bold, fill, duotone) - Via Iconify: `<span class="iconify ph--icon-name"></span>` - Or React: `@phosphor-icons/react` - Keep React as framework (just update styling approach) ## Design Direction ### Theme System Based on Nexus, implement multiple theme variants: - **Dark** (default) - `#121416` root, `#181c20` sidebar, vibrant accent colors - **Light** - Clean white with subtle gray tones - **Dim** - Softer dark variant for reduced eye strain - Consider "material" variant with larger border-radius (20px) ### Color Palette (from Nexus dark theme) ```css --color-primary: #378dff; /* Blue - actions, links */ --color-secondary: #b071ff; /* Purple - secondary actions */ --color-accent: #00d3bb; /* Teal - highlights */ --color-success: #0bbf58; /* Green - completed, success */ --color-warning: #f5a524; /* Orange - warnings */ --color-error: #f31260; /* Red - errors, bugs */ --color-info: #14b4ff; /* Light blue - info */ ``` ### Layout Improvements - **Collapsible sidebar** with hover-to-expand mode (like Nexus) - **Sticky topbar** with blur effect on scroll (like Scalo) - **Subtle background effects** - mesh/grid patterns at low opacity - **Card-based content** with consistent padding (`--card-p: 20px`) - **Small border-radius** (`0.25rem`) for sharp, modern look ### Specific UI Elements **Session Cards:** - Clean card design with subtle border (`border-base-300`) - Expandable sections for file lists (addresses #94) - Visual timeline markers for summaries - Status indicators with semantic colors **Dashboard:** - Stats cards with icon + number + label pattern - Charts with matching color scheme - Activity feed with timestamps **Navigation:** - Icon + label sidebar items - Collapsible menu groups - Active state highlighting - Breadcrumbs for deep navigation **Search:** - Full-width search input with icon - Filter chips/tags - Results with highlighted matches ### Animations & Transitions - Smooth sidebar collapse (`transition-all duration-300`) - Hover states on interactive elements - Loading skeletons for async content - Subtle fade-ins for new content ## Implementation Approach 1. **Phase 1**: Set up daisyUI v5 + Tailwind v4, define theme CSS 2. **Phase 2**: Redesign layout (sidebar, topbar, content area) 3. **Phase 3**: Update individual views (dashboard, sessions, search) 4. **Phase 4**: Add micro-interactions and polish ## Related Issues - #92 Auto-refresh for WebUI sessions view - #94 Show file details for read/modified counts - #95 Narrative/facts view toggle - #96 Chronological summaries in timeline - #97 Search filters functionality ## Notes The current stack uses React with custom CSS. Migration path: 1. Add Tailwind v4 + daisyUI v5 to build 2. Gradually replace custom components with daisyUI equivalents 3. Extract shared styles to theme CSS variables 4. Remove old CSS as components are migrated