UI/UX and style overhaul: refactor Home, Index, and global styles

[FisherSkyi]

Summary

A significant restyling and refactor of the main UI was introduced. This change affects the overall look and structure by updating color themes, component structure, and removing legacy workspace/chat references.

Key Changes

• Global Styles: The CSS variables for background, foreground, and UI elements were updated for a light theme, replaced Inter with Manrope fonts, and modernized color tokens across src/index.css.
• App Wrapper: The #root and base layout in src/App.css were simplified; styles for .logo, .card, etc. were removed, focusing on full-height panels.
• Room Home Page (src/pages/Home.tsx):
  • Fully redesigned the UX to feature "Shared AI rooms" and removed old workspace mocks and references.
  • Now shows three hardcoded recent rooms, cleaner grid/list layout, and improved header.
  • Updated icon usage and structure; removed dependencies on mock data.
• Main Chat Page (src/pages/Index.tsx):
  • Large refactor to a scripted, demonstration-focused room with better onboarding.
  • Replaces old queue/message simulation with timeline-based scripted messages and presence.
  • Introduces participants, better sidebar organization, and a redesigned poster preview panel.
  • Features contextual onboarding, activity timeline, presence/people sidebar, and new sharing modal.
• Other:
  • Modernized scrollbar and selection styling.
  • Numerous removals of old logic/styles related to obsolete "workspace" concept.

Impact

• UI/UX consistency improved across all main pages.
• Dark theme and old card/grid layouts are deprecated in favor of a single-column, light-themed interface.
• Major improvement in onboarding, feature discoverability, and overall visual polish.

No core business logic was changed. This is strictly a UI/UX and style refactor.

---

Files changed:

• src/App.css
• src/index.css
• src/pages/Home.tsx
• src/pages/Index.tsx
• package-lock.json

---

Please review for unintended UI regressions, style conflicts, or missing onboarding info.

[FisherSkyi]

@claude Review for change. We intend to use stub since now we are in planning stage and just need a prototype.

[claude]

Claude finished @FisherSkyi's task in 1m 31s —— View job

---

Code Review

• Gather context and read changed files
• Review src/index.css — global styles
• Review src/App.css — app wrapper styles
• Review src/pages/Home.tsx — room home page
• Review src/pages/Index.tsx — main chat page
• Summarize findings

---

Overall

The prototype is well-structured and visually cohesive. The stub-first approach (hardcoded data, scripted demo) is appropriate for this stage. Notes below are flagged by priority so you know what to address before moving to a real implementation.

---

src/index.css

Good:

• Clean CSS variable structure using HSL tokens — easy to retheme later.
• Manrope + JetBrains Mono is a solid font pairing.
• Minimal scrollbar styling is a nice touch.

Note for later (not blocking):

• --primary and --accent share identical values (217 91% 60%). Fine for now, but if they diverge in the real design these will need to be differentiated.
• No dark mode variables (@media (prefers-color-scheme: dark) or .dark {}) — per the issue this is intentional. Just confirm this is a permanent decision before building components that assume dark mode is gone.

---

src/App.css

Clean and minimal — good simplification. No issues.

---

src/pages/Home.tsx

Good:

• ROOM_CARDS as a top-level const is the right stub pattern — easy to swap for an API call later.
• Client-side search filter is appropriate for prototype scale.
• Responsive layout (sm:flex-row, lg:grid-cols-[1.5fr_0.9fr]) is well thought-out.

Issues to be aware of:

1. "New room" navigates to hardcoded /chat/room-1 (line 63). This means clicking "New room" opens an existing stub room rather than creating one. Acceptable for prototype, but worth a // TODO: replace with room creation flow comment to avoid confusion.

2. Room-2 and room-3 routes are undefined. Clicking those cards navigates to /chat/room-2 and /chat/room-3, but Index.tsx always renders the same "Spring Campaign Poster" regardless of the route param. All three rooms look identical. Again, fine for a stub — just note this when demoing.

3. Sidebar stats are static strings ("8 rooms active, 23 prompts added...") — expected for a prototype, but worth marking with a // STUB comment so they don't accidentally ship as-is.

---

src/pages/Index.tsx

Good:

• Timer-based scripted messages (useEffect + window.setTimeout) create a convincing live demo without requiring a backend. The cleanup (timers.forEach(clearTimeout)) is correct.
• The poster preview embedded inline in the last AI message is a strong visual for demos.
• renderPromptMentions is a clean utility for highlighting @mention tokens.
• The share modal with copy-link + invite flow covers the right interaction surface.

Issues to be aware of:

1. inviteEmail defaults to "sarah@netcolab.ai" (line 148). This pre-filled value looks like real data during a demo. On submit it clears correctly, but an empty default ("") with a placeholder would be less surprising.

2. Send button is non-functional (line 471). It renders with no onClick. For a prototype this is fine, but if someone clicks it during a demo it's a dead end. A no-op handler with a toast like "Live sending not yet implemented" would improve demo resilience.

3. Room title is hardcoded ("Spring Campaign Poster" at lines 253, 608). When room-2 or room-3 routes eventually land here, they'll show the wrong title. If you add routing later, this title should come from the route params or a lookup map.

4. Sidebar only visible at xl: breakpoint (line 487 xl:flex). On smaller viewports the sidebar toggle button still appears in the header (line 284-289) but clicking it does nothing visible. Either hide the toggle at non-xl sizes or make the sidebar a drawer at those sizes.

5. bg-user-cyan, bg-user-pink, bg-user-amber — these map to CSS variables in index.css but they're used as Tailwind utility classes (e.g., bg-user-cyan). These will only work if Tailwind's config extends the color palette with these names. Verify this is set up in tailwind.config.*, otherwise the avatar backgrounds will silently fall back.

---

Summary for Prototype Stage

Area	Status
Visual design & token system	✅ Solid
Stub data structure	✅ Clean, easy to replace
Scripted demo flow	✅ Works well
Routing between rooms	⚠️ All rooms show same content
Sidebar at non-xl screens	⚠️ Toggle visible but no effect
User color Tailwind mapping	⚠️ Verify tailwind.config extends these
Non-functional inputs	ℹ️ Expected for prototype

Nothing here is a blocker for a prototype/planning demo. The main thing to verify before the next stage is the Tailwind color config for user avatar colors.