mosaic/stack
1
0
Fork 0
Code Issues 10 Pull Requests Actions Packages Projects Releases 2 Wiki Activity

Phase 1: Design System & App Shell Foundation #448

New Issue
Closed
opened 2026-02-22 20:27:01 +00:00 by jason.woltje · 0 comments
jason.woltje commented 2026-02-22 20:27:01 +00:00
Owner
Copy Link

Overview

Overhaul the CSS design token system and implement the app shell layout from the dashboard.html reference design.

Tasks

  • MS15-FE-001: Replace CSS design token system (globals.css → dashboard.html tokens)
  • MS15-FE-002: Implement app shell grid layout (sidebar + header + main)
  • MS15-FE-003: Implement sidebar component (collapsible, nav groups, icons, badges)
  • MS15-FE-004: Implement topbar/header component (logo, search, status, notifications, avatar dropdown)
  • MS15-FE-005: Responsive layout (breakpoints, hamburger button, sidebar auto-hide)
  • MS15-FE-006: Loading spinner (Mosaic logo icon with rotation animation)

Acceptance Criteria

  • Design tokens from dashboard.html reference are implemented
  • App shell renders with full-width header, collapsible sidebar, main content
  • Sidebar has all nav groups with icons, collapses to icon-only mode
  • Header has logo, search, system status, notifications, theme toggle, avatar dropdown
  • Hamburger button at mobile breakpoints, sidebar hidden by default
  • Mosaic logo spinner component available
  • Grain overlay texture applied
  • Lint and typecheck pass
## Overview Overhaul the CSS design token system and implement the app shell layout from the dashboard.html reference design. ## Tasks - MS15-FE-001: Replace CSS design token system (globals.css → dashboard.html tokens) - MS15-FE-002: Implement app shell grid layout (sidebar + header + main) - MS15-FE-003: Implement sidebar component (collapsible, nav groups, icons, badges) - MS15-FE-004: Implement topbar/header component (logo, search, status, notifications, avatar dropdown) - MS15-FE-005: Responsive layout (breakpoints, hamburger button, sidebar auto-hide) - MS15-FE-006: Loading spinner (Mosaic logo icon with rotation animation) ## Acceptance Criteria - [ ] Design tokens from dashboard.html reference are implemented - [ ] App shell renders with full-width header, collapsible sidebar, main content - [ ] Sidebar has all nav groups with icons, collapses to icon-only mode - [ ] Header has logo, search, system status, notifications, theme toggle, avatar dropdown - [ ] Hamburger button at mobile breakpoints, sidebar hidden by default - [ ] Mosaic logo spinner component available - [ ] Grain overlay texture applied - [ ] Lint and typecheck pass
jason.woltje added this to the MS15-DashboardShell milestone 2026-02-22 20:27:01 +00:00
jason.woltje added the web label 2026-02-22 20:27:01 +00:00
Sign in to join this conversation.
No Branch/Tag Specified
Branches Tags
Labels
Clear labels
ai
AI/LLM integration
 api
Backend/API work
 api
auth
Authentication
 database
database
Database/schema work
 devops
Docker/deployment
 docs
Documentation
 frontend
graph
knowledge-module
migration
Data migration
 orchestrator
Orchestrator service (apps/orchestrator/)
 p0
Critical priority
 p1
High priority
 p2
Medium priority
 p3
Low priority
 performance
Performance work
 phase-1
phase-2
phase-3
phase-4
phase-5
plugin
MoltBot plugin work
 search
security
Security-related
 setup
Initial setup
 testing
Testing/QA
 web
Frontend work
No Label web
Milestone
No items
No Milestone MS15-DashboardShell
Projects
Clear projects
No project
Assignees
Clear assignees
jason.woltje
No Assignees
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: mosaic/stack#448
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?