From c5557ce9d633590c6ae4f0b2c0d8268c1fb895af Mon Sep 17 00:00:00 2001
From: christiankrag <christiankrag@gmail.com>
Date: Mon, 15 Dec 2025 11:36:55 +0100
Subject: [PATCH] Consolidate project toolbar and add inline phase indicator
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Replace separate tab navigation with unified project view
- Add compact phase indicator showing design thinking progress
- Add slide-out phases panel for detailed view
- Reduce visual clutter from 3 toolbars to 2
- Improve chat/phases integration per design-thinking methodology

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 src/app/(dashboard)/projects/[id]/page.tsx    |  41 +++----
 .../projects/[id]/project-view.tsx            | 110 ++++++++++++++++++
 .../project/phase-indicator-compact.tsx       |  78 +++++++++++++
 3 files changed, 209 insertions(+), 20 deletions(-)
 create mode 100644 src/app/(dashboard)/projects/[id]/project-view.tsx
 create mode 100644 src/components/project/phase-indicator-compact.tsx

diff --git a/src/app/(dashboard)/projects/[id]/page.tsx b/src/app/(dashboard)/projects/[id]/page.tsx
index f434831..957ca7a 100644
--- a/src/app/(dashboard)/projects/[id]/page.tsx
+++ b/src/app/(dashboard)/projects/[id]/page.tsx
@@ -5,7 +5,7 @@ import Link from 'next/link'
 import { ArrowLeft, Settings } from 'lucide-react'
 import { Button } from '@/components/ui/button'
 import type { Database } from '@/types/database'
-import { ProjectTabs } from './project-tabs'
+import { ProjectView } from './project-view'
 
 type Project = Database['public']['Tables']['projects']['Row']
 type Message = Database['public']['Tables']['messages']['Row']
@@ -32,33 +32,34 @@ export default async function ProjectPage({ params }: { params: Promise<{ id: st
 
   return (
     <div className="h-[calc(100vh-4rem)] flex flex-col">
-      <div className="border-b bg-card px-4 py-3">
+      {/* Consolidated Project Header - compact single row */}
+      <div className="border-b bg-card/80 backdrop-blur-sm px-4 py-2">
         <div className="max-w-7xl mx-auto flex items-center justify-between">
-          <div className="flex items-center gap-4">
-            <Link href="/dashboard" className="text-muted-foreground hover:text-foreground transition-colors">
-              <ArrowLeft className="h-5 w-5" />
+          <div className="flex items-center gap-3">
+            <Link
+              href="/dashboard"
+              className="p-1.5 rounded-md text-muted-foreground hover:text-foreground hover:bg-muted transition-colors"
+            >
+              <ArrowLeft className="h-4 w-4" />
             </Link>
-            <div>
-              <div className="flex items-center gap-2">
-                <h1 className="text-lg font-semibold">{project.name}</h1>
-                <Badge variant={project.status === 'active' ? 'brand' : 'secondary'}>
-                  {project.status}
-                </Badge>
-              </div>
-              {project.description && (
-                <p className="text-sm text-muted-foreground">{project.description}</p>
-              )}
-            </div>
+            <div className="h-4 w-px bg-border" />
+            <h1 className="text-sm font-medium">{project.name}</h1>
+            <Badge
+              variant={project.status === 'active' ? 'brand' : 'secondary'}
+              className="text-xs h-5"
+            >
+              {project.status}
+            </Badge>
           </div>
-          <Button variant="ghost" size="icon">
-            <Settings className="h-5 w-5" />
+          <Button variant="ghost" size="icon" className="h-8 w-8">
+            <Settings className="h-4 w-4" />
           </Button>
         </div>
       </div>
 
-      <ProjectTabs
+      <ProjectView
         projectId={id}
-        projectName={project.name}
+        project={project}
         initialMessages={messages || []}
       />
     </div>
diff --git a/src/app/(dashboard)/projects/[id]/project-view.tsx b/src/app/(dashboard)/projects/[id]/project-view.tsx
new file mode 100644
index 0000000..0415a79
--- /dev/null
+++ b/src/app/(dashboard)/projects/[id]/project-view.tsx
@@ -0,0 +1,110 @@
+'use client'
+
+import { useState } from 'react'
+import { ProjectChat } from '@/components/chat/project-chat'
+import { DesignThinkingDashboard } from '@/components/project/design-thinking-dashboard'
+import { PhaseIndicatorCompact } from '@/components/project/phase-indicator-compact'
+import { useProject } from '@/hooks/use-project'
+import { MessageSquare, Compass, PanelRightOpen, PanelRightClose } from 'lucide-react'
+import { Button } from '@/components/ui/button'
+import { cn } from '@/lib/utils'
+import type { Database } from '@/types/database'
+import type { DesignPhase } from '@/types/design-thinking'
+
+type DBProject = Database['public']['Tables']['projects']['Row']
+type Message = Database['public']['Tables']['messages']['Row']
+
+interface ProjectViewProps {
+  projectId: string
+  project: DBProject
+  initialMessages: Message[]
+}
+
+export function ProjectView({ projectId, initialMessages }: ProjectViewProps) {
+  const [showPhases, setShowPhases] = useState(false)
+  const { project: projectData, phaseStatuses, loading } = useProject(projectId)
+
+  const handlePhaseClick = () => {
+    setShowPhases(true)
+  }
+
+  // Default to 'empathize' if project not loaded yet
+  const currentPhase = projectData?.current_phase || 'empathize'
+
+  return (
+    <div className="flex-1 flex overflow-hidden">
+      {/* Main Chat Area */}
+      <div className={cn(
+        'flex-1 flex flex-col transition-all duration-300',
+        showPhases ? 'lg:mr-80' : ''
+      )}>
+        {/* Inline toolbar with phase indicator */}
+        <div className="border-b bg-muted/30 px-4 py-1.5">
+          <div className="max-w-4xl mx-auto flex items-center justify-between">
+            <div className="flex items-center gap-3">
+              <div className="flex items-center gap-1.5 text-muted-foreground">
+                <MessageSquare className="w-4 h-4" />
+                <span className="text-xs font-medium">Chat</span>
+              </div>
+              <div className="h-4 w-px bg-border" />
+              {!loading && (
+                <PhaseIndicatorCompact
+                  currentPhase={currentPhase}
+                  phaseStatuses={phaseStatuses}
+                  onPhaseClick={handlePhaseClick}
+                />
+              )}
+            </div>
+            <Button
+              variant="ghost"
+              size="sm"
+              className="h-7 gap-1.5 text-xs"
+              onClick={() => setShowPhases(!showPhases)}
+            >
+              {showPhases ? (
+                <>
+                  <PanelRightClose className="w-3.5 h-3.5" />
+                  <span className="hidden sm:inline">Hide Phases</span>
+                </>
+              ) : (
+                <>
+                  <PanelRightOpen className="w-3.5 h-3.5" />
+                  <span className="hidden sm:inline">Show Phases</span>
+                </>
+              )}
+            </Button>
+          </div>
+        </div>
+
+        {/* Chat Content */}
+        <div className="flex-1 overflow-hidden">
+          <ProjectChat projectId={projectId} initialMessages={initialMessages} />
+        </div>
+      </div>
+
+      {/* Phases Sidebar - slides in from right */}
+      <div className={cn(
+        'fixed right-0 top-[calc(4rem+2.5rem+2rem)] bottom-0 w-80 bg-card border-l transform transition-transform duration-300 overflow-y-auto z-40',
+        showPhases ? 'translate-x-0' : 'translate-x-full'
+      )}>
+        <div className="p-4">
+          <div className="flex items-center justify-between mb-4">
+            <div className="flex items-center gap-2">
+              <Compass className="w-4 h-4 text-muted-foreground" />
+              <h2 className="text-sm font-medium">Design Phases</h2>
+            </div>
+            <Button
+              variant="ghost"
+              size="icon"
+              className="h-7 w-7"
+              onClick={() => setShowPhases(false)}
+            >
+              <PanelRightClose className="w-4 h-4" />
+            </Button>
+          </div>
+          <DesignThinkingDashboard projectId={projectId} />
+        </div>
+      </div>
+    </div>
+  )
+}
diff --git a/src/components/project/phase-indicator-compact.tsx b/src/components/project/phase-indicator-compact.tsx
new file mode 100644
index 0000000..e443b58
--- /dev/null
+++ b/src/components/project/phase-indicator-compact.tsx
@@ -0,0 +1,78 @@
+'use client'
+
+import { cn } from '@/lib/utils'
+import { DESIGN_PHASES, designPhases, type DesignPhase, type PhaseStatus } from '@/types/design-thinking'
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from '@/components/ui/tooltip'
+
+interface PhaseIndicatorCompactProps {
+  currentPhase: DesignPhase
+  phaseStatuses?: Record<DesignPhase, PhaseStatus>
+  onPhaseClick?: (phase: DesignPhase) => void
+  className?: string
+}
+
+export function PhaseIndicatorCompact({
+  currentPhase,
+  phaseStatuses,
+  onPhaseClick,
+  className
+}: PhaseIndicatorCompactProps) {
+  const currentIndex = DESIGN_PHASES.indexOf(currentPhase)
+  const currentPhaseData = designPhases.find(p => p.id === currentPhase)
+
+  return (
+    <TooltipProvider>
+      <div className={cn('flex items-center gap-1', className)}>
+        {/* Mini progress dots */}
+        <div className="flex items-center gap-0.5 mr-2">
+          {DESIGN_PHASES.map((phase, index) => {
+            const status = phaseStatuses?.[phase]
+            const isCurrent = index === currentIndex
+            const isCompleted = status === 'completed' || index < currentIndex
+
+            return (
+              <Tooltip key={phase}>
+                <TooltipTrigger asChild>
+                  <button
+                    onClick={() => onPhaseClick?.(phase)}
+                    className={cn(
+                      'w-2 h-2 rounded-full transition-all',
+                      isCurrent && 'w-3 h-3 bg-brand animate-pulse',
+                      isCompleted && !isCurrent && 'bg-emerald-500',
+                      !isCompleted && !isCurrent && 'bg-muted-foreground/30'
+                    )}
+                  />
+                </TooltipTrigger>
+                <TooltipContent side="bottom" className="text-xs">
+                  {designPhases.find(p => p.id === phase)?.label}
+                </TooltipContent>
+              </Tooltip>
+            )
+          })}
+        </div>
+
+        {/* Current phase badge */}
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <button
+              onClick={() => onPhaseClick?.(currentPhase)}
+              className="flex items-center gap-1.5 px-2 py-1 rounded-md bg-brand/10 text-brand text-sm font-medium hover:bg-brand/20 transition-colors"
+            >
+              <span>{currentPhaseData?.icon}</span>
+              <span className="hidden sm:inline">{currentPhaseData?.label}</span>
+            </button>
+          </TooltipTrigger>
+          <TooltipContent side="bottom" className="max-w-xs">
+            <p className="font-medium">{currentPhaseData?.label}</p>
+            <p className="text-xs text-muted-foreground">{currentPhaseData?.shortDescription}</p>
+          </TooltipContent>
+        </Tooltip>
+      </div>
+    </TooltipProvider>
+  )
+}