feat: Slate & Ice Modern aesthetic redesign (#94)

* chore: update Google Fonts to Bricolage Grotesque, IBM Plex Sans, JetBrains Mono Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * chore: update Tailwind config to Slate & Ice theme colors and fonts Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * feat: update CSS variables and glass-card utilities for Slate & Ice theme - Replace all color variables with Slate & Ice palette - Add glass system vars (--glass-bg, --glass-blur, --shadow-float) - Replace legacy glass-card with new variable-driven glass classes - Add breatheGlow, bellWobble, slideDown, fadeInRight keyframes - Update font references to IBM Plex Sans and Bricolage Grotesque Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * feat: recolor BrandLogo to cyan gradient, split BrandWordmark for gradient Flow text Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * feat: update TopBar with glassmorphism backdrop and cyan accent styling Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * feat: update Sidebar with glassmorphism backdrop Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * feat: add ambient atmosphere gradient orbs behind app shell Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * feat: update QuickStats and SessionsPanel with glass-card styling Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * feat: add WeeklyCalendar, QuickActions, OpenSessions, RecentActivity dashboard components Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * feat: redesign dashboard layout with calendar, open sessions, and glass-card panels New layout: greeting → calendar+actions → sessions+stats → activity Replaces old QuickStats and SessionsPanel with new dashboard components Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * fix: replace remaining purple hex references with ice-cyan accent Sweep of hardcoded purple hex values (#818cf8, #6366f1) replaced with new cyan accent (#06b6d4) in QuickActions, RecentActivity, QuickLaunch, and SVG brand assets. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * docs: update CLAUDE.md branding and design system for Slate & Ice Modern Updated Last Updated date, branding section (fonts, colors, glass utilities, atmosphere orbs), component styling rules, and Design System section to reflect the new ice-cyan glassmorphism theme. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * docs: add Slate & Ice Modern design doc and implementation plan Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * feat: redesign login page with Slate & Ice Modern design system Apply glassmorphism styling, atmosphere orbs, branded wordmark, and consistent design tokens to match the updated app shell aesthetic. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * fix: raise TopBar z-index so profile dropdown renders above main content Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * feat: add AI assistant with in-session copilot and standalone chat with RAG Implements three-phase AI assistant feature: - Phase 0: RAG infrastructure with pgvector embeddings, Voyage AI integration, tree chunking service, and semantic search over team's flow library - Phase 1: In-session copilot panel during flow navigation with contextual AI help, current step awareness, and suggested related flows - Phase 2: Standalone AI chat page with persistent conversation history, pin/delete, and configurable retention policies (account-level) Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * feat: add account management, email verification, AI fixes, and user guides - Profile settings, account transfer, delete/leave account flows - Email verification with JWT tokens and Resend integration - AI assistant/copilot fixes: markdown rendering, shared RAG helpers, token tracking, input refocus, model_validate usage - User guides hub + detail pages with 13 topic guides - Sidebar and top bar navigation for guides Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * fix: prevent stale chunk errors after deployments - Set Cache-Control no-cache on index.html in nginx so browsers always fetch fresh chunk references after a deploy - Auto-reload on chunk load failures (stale deploy detection) with loop prevention via sessionStorage - Show friendly "App Updated" message if auto-reload doesn't resolve it Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * feat: add email verification toggle to admin settings Adds platform-level toggle to enable/disable email verification. When disabled, the verification banner is hidden and the send endpoint returns 403. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> --------- Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>
2026-03-04 20:44:25 -05:00
parent 554ad84d9e
commit 4d2c4930fd
100 changed files with 8181 additions and 466 deletions
--- a/frontend/src/components/layout/AppLayout.tsx
+++ b/frontend/src/components/layout/AppLayout.tsx
@@ -7,6 +7,7 @@ import { useUserPreferencesStore } from '@/store/userPreferencesStore'
 import { BrandLogo } from '@/components/common/BrandLogo'
 import { TopBar } from './TopBar'
 import { Sidebar } from './Sidebar'
+import { EmailVerificationBanner } from './EmailVerificationBanner'
 import { cn } from '@/lib/utils'

 export function AppLayout() {
@@ -59,7 +60,34 @@ export function AppLayout() {
  ]

  return (
-    <div className={cn('app-shell', sidebarCollapsed && 'app-shell--collapsed')}>
+    <>
+      {/* Atmosphere orbs — ambient light behind glass */}
+      <div
+        className="pointer-events-none fixed z-0"
+        style={{
+          top: '-120px',
+          right: '-80px',
+          width: '600px',
+          height: '600px',
+          borderRadius: '50%',
+          background: 'radial-gradient(circle, rgba(6, 182, 212, 0.15) 0%, rgba(6, 182, 212, 0.04) 40%, transparent 70%)',
+          filter: 'blur(60px)',
+        }}
+      />
+      <div
+        className="pointer-events-none fixed z-0"
+        style={{
+          bottom: '-100px',
+          left: '-60px',
+          width: '500px',
+          height: '500px',
+          borderRadius: '50%',
+          background: 'radial-gradient(circle, rgba(99, 102, 241, 0.08) 0%, rgba(99, 102, 241, 0.02) 40%, transparent 70%)',
+          filter: 'blur(50px)',
+        }}
+      />
+
+      <div className={cn('app-shell relative z-[1]', sidebarCollapsed && 'app-shell--collapsed')}>
      {/* Top Bar - spans full width */}
      <TopBar />

@@ -156,9 +184,11 @@ export function AppLayout() {

      {/* Main Content */}
      <main className="main-content overflow-y-auto">
+        <EmailVerificationBanner />
        <Outlet />
      </main>
    </div>
+    </>
  )
 }

--- a/frontend/src/components/layout/EmailVerificationBanner.tsx
+++ b/frontend/src/components/layout/EmailVerificationBanner.tsx
@@ -0,0 +1,57 @@
+import { useState, useEffect } from 'react'
+import { AlertTriangle, X, Loader2 } from 'lucide-react'
+import { authApi } from '@/api/auth'
+import { useAuthStore } from '@/store/authStore'
+import { cn } from '@/lib/utils'
+import { toast } from '@/lib/toast'
+
+export function EmailVerificationBanner() {
+  const user = useAuthStore((s) => s.user)
+  const [dismissed, setDismissed] = useState(false)
+  const [isSending, setIsSending] = useState(false)
+  const [verificationEnabled, setVerificationEnabled] = useState(true)
+
+  useEffect(() => {
+    authApi.getVerificationStatus()
+      .then((data) => setVerificationEnabled(data.enabled))
+      .catch(() => {})
+  }, [])
+
+  if (!user || user.email_verified_at || dismissed || !verificationEnabled) return null
+
+  const handleResend = async () => {
+    setIsSending(true)
+    try {
+      await authApi.sendVerificationEmail()
+      toast.success('Verification email sent')
+    } catch {
+      toast.error('Failed to send verification email')
+    } finally {
+      setIsSending(false)
+    }
+  }
+
+  return (
+    <div className="flex items-center gap-3 border-b border-amber-400/20 bg-amber-400/5 px-4 py-2 text-sm">
+      <AlertTriangle className="h-4 w-4 flex-shrink-0 text-amber-400" />
+      <span className="text-amber-200">
+        Your email is not verified.
+      </span>
+      <button
+        onClick={handleResend}
+        disabled={isSending}
+        className={cn(
+          'text-amber-400 underline hover:text-amber-300 disabled:opacity-50'
+        )}
+      >
+        {isSending ? <Loader2 className="inline h-3 w-3 animate-spin" /> : 'Resend verification email'}
+      </button>
+      <button
+        onClick={() => setDismissed(true)}
+        className="ml-auto text-muted-foreground hover:text-foreground"
+      >
+        <X className="h-4 w-4" />
+      </button>
+    </div>
+  )
+}
--- a/frontend/src/components/layout/QuickLaunch.tsx
+++ b/frontend/src/components/layout/QuickLaunch.tsx
@@ -25,7 +25,7 @@ const ACTIONS: QuickAction[] = [
  { id: 'new-project', icon: Plus, label: 'New Project', description: 'Create a step-by-step project', path: '/flows/new', color: '#8b5cf6' },
  { id: 'sessions', icon: Play, label: 'View Sessions', description: 'See active and recent sessions', path: '/sessions', color: '#f59e0b' },
  { id: 'step-library', icon: Bookmark, label: 'Step Library', description: 'Browse reusable steps', path: '/step-library', color: '#10b981' },
-  { id: 'exports', icon: FileText, label: 'Exports & Shares', description: 'View shared session exports', path: '/shares', color: '#6366f1' },
+  { id: 'exports', icon: FileText, label: 'Exports & Shares', description: 'View shared session exports', path: '/shares', color: '#06b6d4' },
  { id: 'team', icon: Users, label: 'Team Settings', description: 'Manage team members and roles', path: '/account', color: '#ec4899' },
 ]

--- a/frontend/src/components/layout/Sidebar.tsx
+++ b/frontend/src/components/layout/Sidebar.tsx
@@ -1,5 +1,5 @@
 import { useEffect, useState } from 'react'
-import { LayoutGrid, Box, PenLine, Clock, FileText, Bookmark, BarChart3, Settings, PanelLeftClose, PanelLeftOpen, MessageSquareText, Sparkles } from 'lucide-react'
+import { LayoutGrid, Box, PenLine, Clock, FileText, Bookmark, BarChart3, Settings, PanelLeftClose, PanelLeftOpen, MessageSquareText, Sparkles, BotMessageSquare, BookOpen } from 'lucide-react'
 import { cn } from '@/lib/utils'
 import { useUserPreferencesStore } from '@/store/userPreferencesStore'
 import { usePinnedFlowsStore } from '@/store/pinnedFlowsStore'
@@ -63,7 +63,13 @@ export function Sidebar() {

  return (
    <nav
-      className="sidebar flex flex-col border-r border-border bg-[hsl(var(--sidebar-bg))]"
+      className="sidebar flex flex-col border-r"
+      style={{
+        background: 'rgba(16, 17, 20, 0.5)',
+        backdropFilter: 'var(--glass-blur-light)',
+        WebkitBackdropFilter: 'var(--glass-blur-light)',
+        borderColor: 'var(--glass-border)',
+      }}
      onWheel={handleSidebarWheel}
    >
      {sidebarCollapsed ? (
@@ -76,8 +82,10 @@ export function Sidebar() {
            <NavItem href="/sessions" icon={Clock} label="Sessions" badge={activeSessionCount || undefined} collapsed />
            <NavItem href="/shares" icon={FileText} label="Exports" collapsed />
            <NavItem href="/ai/chat" icon={Sparkles} label="Flow Assist" collapsed />
+            <NavItem href="/assistant" icon={BotMessageSquare} label="AI Assistant" collapsed />
            <NavItem href="/step-library" icon={Bookmark} label="Step Library" collapsed />
            <NavItem href="/analytics" icon={BarChart3} label="Analytics" collapsed />
+            <NavItem href="/guides" icon={BookOpen} label="User Guides" collapsed />
            <NavItem href="/feedback" icon={MessageSquareText} label="Feedback" collapsed />
          </div>
        </>
@@ -86,7 +94,7 @@ export function Sidebar() {
          {/* Pinned Flows */}
          <PinnedFlowsSection flows={pinnedItems} onUnpin={unpinFlow} />

-          <div className="border-b border-[hsl(var(--border-subtle))]" />
+          <div style={{ borderBottom: '1px solid var(--glass-border)' }} />

          {/* Primary Navigation */}
          <div className="px-3 py-2 space-y-0.5">
@@ -107,6 +115,7 @@ export function Sidebar() {
            <NavItem href="/sessions" icon={Clock} label="Sessions" badge={activeSessionCount || undefined} />
            <NavItem href="/shares" icon={FileText} label="Exports" />
            <NavItem href="/ai/chat" icon={Sparkles} label="Flow Assist" />
+            <NavItem href="/assistant" icon={BotMessageSquare} label="AI Assistant" />
            <NavItem href="/step-library" icon={Bookmark} label="Step Library" />
            <NavItem href="/analytics" icon={BarChart3} label="Analytics" />
          </div>
@@ -117,12 +126,16 @@ export function Sidebar() {
      <div className="flex-1" />

      {/* Footer */}
-      <div className={cn(
-        "border-t border-[hsl(var(--border-subtle))]",
-        sidebarCollapsed ? "px-1.5 py-2 flex flex-col items-center" : "px-3 py-2 space-y-0.5"
-      )}>
+      <div
+        className={cn(
+          "border-t",
+          sidebarCollapsed ? "px-1.5 py-2 flex flex-col items-center" : "px-3 py-2 space-y-0.5"
+        )}
+        style={{ borderColor: 'var(--glass-border)' }}
+      >
        {!sidebarCollapsed && (
          <>
+            <NavItem href="/guides" icon={BookOpen} label="User Guides" />
            <NavItem href="/feedback" icon={MessageSquareText} label="Feedback" />
            <NavItem href="/account" icon={Settings} label="Account" />
          </>
--- a/frontend/src/components/layout/TopBar.tsx
+++ b/frontend/src/components/layout/TopBar.tsx
@@ -1,6 +1,6 @@
 import { useState, useRef, useEffect, useCallback } from 'react'
 import { Link, useNavigate } from 'react-router-dom'
-import { Search, Zap, LogOut, Shield, Settings } from 'lucide-react'
+import { Search, Zap, LogOut, Shield, Settings, HelpCircle } from 'lucide-react'
 import { useAuthStore } from '@/store/authStore'
 import { usePermissions } from '@/hooks/usePermissions'
 import { BrandLogo } from '@/components/common/BrandLogo'
@@ -54,15 +54,21 @@ export function TopBar() {

  return (
    <>
-      <header className="topbar flex items-center gap-4 border-b border-border bg-background px-4">
+      <header
+        className="topbar relative z-10 flex items-center gap-4 border-b px-4"
+        style={{
+          background: 'rgba(16, 17, 20, 0.6)',
+          backdropFilter: 'var(--glass-blur-strong)',
+          WebkitBackdropFilter: 'var(--glass-blur-strong)',
+          borderColor: 'var(--glass-border)',
+        }}
+      >
        {/* Logo area */}
        <Link
          to="/"
          className="flex items-center gap-2.5 pr-4 transition-all duration-200"
        >
-          <div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-gradient-brand">
-            <BrandLogo size="sm" className="h-4 w-4" />
-          </div>
+          <BrandLogo size="sm" className="h-7 w-7 shrink-0" />
          <span className="text-sm font-heading font-bold tracking-tight whitespace-nowrap">
            <span className="text-foreground">Resolution</span>
            <span className="text-gradient-brand">Flow</span>
@@ -99,13 +105,20 @@ export function TopBar() {
          >
            <Zap size={18} />
          </button>
+          <Link
+            to="/guides"
+            className="rounded-lg p-2 text-muted-foreground hover:bg-card hover:text-foreground transition-colors"
+            title="User Guides"
+          >
+            <HelpCircle size={18} />
+          </Link>
          <NotificationsPanel />

          {/* User avatar & menu */}
          <div className="relative ml-2" ref={menuRef}>
            <button
              onClick={() => setUserMenuOpen(!userMenuOpen)}
-              className="flex h-8 w-8 items-center justify-center rounded-full bg-gradient-brand text-xs font-heading font-bold text-white hover:opacity-90 transition-opacity"
+              className="flex h-8 w-8 items-center justify-center rounded-[10px] bg-gradient-brand text-xs font-heading font-bold text-primary-foreground hover:opacity-90 transition-opacity"
              title={user?.name || user?.email || 'User'}
            >
              {initials}