From f94490aa6aea3313ccd30e9094101f9572878d59 Mon Sep 17 00:00:00 2001
From: Vivek R <123vivekr@gmail.com>
Date: Sun, 6 Jul 2025 14:12:05 +0530
Subject: [PATCH] refactor: convert project list to responsive grid layout

- Change from vertical list to responsive grid (1/2/3 columns)
- Update project page container from centered to full-width
- Improve card layout with better vertical spacing
- Simplify session count and file indicators
- Ensure cards have consistent height in grid
---
 src/App.tsx                    | 12 ++---
 src/components/ProjectList.tsx | 80 ++++++++++++++++++----------------
 2 files changed, 48 insertions(+), 44 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index 5f9629c..48a4600 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -282,8 +282,8 @@ function App() {
       
       case "projects":
         return (
-          <div className="flex h-full items-center justify-center p-4 overflow-y-auto">
-            <div className="w-full max-w-2xl">
+          <div className="flex-1 overflow-y-auto">
+            <div className="container mx-auto p-6">
               {/* Header with back button */}
               <motion.div
                 initial={{ opacity: 0, y: -20 }}
@@ -299,7 +299,7 @@ function App() {
                 >
                   ← Back to Home
                 </Button>
-                <div className="text-center">
+                <div className="mb-4">
                   <h1 className="text-3xl font-bold tracking-tight">CC Projects</h1>
                   <p className="mt-1 text-sm text-muted-foreground">
                     Browse your Claude Code sessions
@@ -312,7 +312,7 @@ function App() {
                 <motion.div
                   initial={{ opacity: 0 }}
                   animate={{ opacity: 1 }}
-                  className="mb-4 rounded-lg border border-destructive/50 bg-destructive/10 p-3 text-xs text-destructive"
+                  className="mb-4 rounded-lg border border-destructive/50 bg-destructive/10 p-3 text-xs text-destructive max-w-2xl"
                 >
                   {error}
                 </motion.div>
@@ -350,18 +350,18 @@ function App() {
                       animate={{ opacity: 1, x: 0 }}
                       exit={{ opacity: 0, x: 20 }}
                       transition={{ duration: 0.3 }}
-                      className="space-y-4"
                     >
                       {/* New session button at the top */}
                       <motion.div
                         initial={{ opacity: 0, y: 20 }}
                         animate={{ opacity: 1, y: 0 }}
                         transition={{ duration: 0.5 }}
+                        className="mb-4"
                       >
                         <Button
                           onClick={handleNewSession}
                           size="default"
-                          className="w-full"
+                          className="w-full max-w-md"
                         >
                           <Plus className="mr-2 h-4 w-4" />
                           New Claude Code session
diff --git a/src/components/ProjectList.tsx b/src/components/ProjectList.tsx
index 8b4dbf3..058de96 100644
--- a/src/components/ProjectList.tsx
+++ b/src/components/ProjectList.tsx
@@ -85,7 +85,7 @@ export const ProjectList: React.FC<ProjectListProps> = ({
   
   return (
     <div className={cn("space-y-4", className)}>
-      <div className="space-y-2">
+      <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4">
         {currentProjects.map((project, index) => (
           <motion.div
             key={project.id}
@@ -98,19 +98,21 @@ export const ProjectList: React.FC<ProjectListProps> = ({
             }}
           >
             <Card
-              className="p-4 hover:shadow-md transition-all duration-200 cursor-pointer group"
+              className="p-4 hover:shadow-md transition-all duration-200 cursor-pointer group h-full"
               onClick={() => onProjectClick(project)}
             >
-              <div className="flex items-start justify-between">
-                <div className="flex-1 min-w-0">
-                  <div className="flex items-center gap-3 mb-2">
-                    <FolderOpen className="h-5 w-5 text-primary shrink-0" />
-                    <h3 className="font-semibold text-base truncate">
-                      {getProjectName(project.path)}
-                    </h3>
+              <div className="flex flex-col h-full">
+                <div className="flex-1">
+                  <div className="flex items-start justify-between mb-2">
+                    <div className="flex items-center gap-2 flex-1 min-w-0">
+                      <FolderOpen className="h-5 w-5 text-primary shrink-0" />
+                      <h3 className="font-semibold text-base truncate">
+                        {getProjectName(project.path)}
+                      </h3>
+                    </div>
                     {project.sessions.length > 0 && (
-                      <Badge variant="secondary" className="shrink-0">
-                        {project.sessions.length} session{project.sessions.length !== 1 ? 's' : ''}
+                      <Badge variant="secondary" className="shrink-0 ml-2">
+                        {project.sessions.length}
                       </Badge>
                     )}
                   </div>
@@ -118,41 +120,43 @@ export const ProjectList: React.FC<ProjectListProps> = ({
                   <p className="text-sm text-muted-foreground mb-3 font-mono truncate">
                     {project.path}
                   </p>
-                  
-                  <div className="flex items-center gap-4 text-xs text-muted-foreground">
+                </div>
+                
+                <div className="flex items-center justify-between">
+                  <div className="flex items-center gap-3 text-xs text-muted-foreground">
                     <div className="flex items-center gap-1">
                       <Calendar className="h-3 w-3" />
                       <span>{formatTimeAgo(project.created_at * 1000)}</span>
                     </div>
                     <div className="flex items-center gap-1">
                       <FileText className="h-3 w-3" />
-                      <span>{project.sessions.length} conversations</span>
+                      <span>{project.sessions.length}</span>
                     </div>
                   </div>
-                </div>
-                
-                <div className="flex items-center gap-2 opacity-0 group-hover:opacity-100 transition-opacity">
-                  {onProjectSettings && (
-                    <DropdownMenu>
-                      <DropdownMenuTrigger asChild onClick={(e) => e.stopPropagation()}>
-                        <Button variant="ghost" size="sm" className="h-8 w-8 p-0">
-                          <MoreVertical className="h-4 w-4" />
-                        </Button>
-                      </DropdownMenuTrigger>
-                      <DropdownMenuContent align="end">
-                        <DropdownMenuItem
-                          onClick={(e) => {
-                            e.stopPropagation();
-                            onProjectSettings(project);
-                          }}
-                        >
-                          <Settings className="h-4 w-4 mr-2" />
-                          Hooks
-                        </DropdownMenuItem>
-                      </DropdownMenuContent>
-                    </DropdownMenu>
-                  )}
-                  <ChevronRight className="h-5 w-5 text-muted-foreground" />
+                  
+                  <div className="flex items-center gap-1 opacity-0 group-hover:opacity-100 transition-opacity">
+                    {onProjectSettings && (
+                      <DropdownMenu>
+                        <DropdownMenuTrigger asChild onClick={(e) => e.stopPropagation()}>
+                          <Button variant="ghost" size="sm" className="h-8 w-8 p-0">
+                            <MoreVertical className="h-4 w-4" />
+                          </Button>
+                        </DropdownMenuTrigger>
+                        <DropdownMenuContent align="end">
+                          <DropdownMenuItem
+                            onClick={(e) => {
+                              e.stopPropagation();
+                              onProjectSettings(project);
+                            }}
+                          >
+                            <Settings className="h-4 w-4 mr-2" />
+                            Hooks
+                          </DropdownMenuItem>
+                        </DropdownMenuContent>
+                      </DropdownMenu>
+                    )}
+                    <ChevronRight className="h-4 w-4 text-muted-foreground" />
+                  </div>
                 </div>
               </div>
             </Card>