yovinchen/claudia
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: convert project list to responsive grid layout

Browse Source 
- 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
This commit is contained in:
Vivek R
2025-07-06 14:12:05 +05:30
parent 6b9393f4d3
commit f94490aa6a
2 changed files with 48 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
src/App.tsx
View File

@@ -282,8 +282,8 @@ function App() {
case "projects": case "projects":
return ( return (
<div className="flex h-full items-center justify-center p-4 overflow-y-auto"> <div className="flex-1 overflow-y-auto">
<div className="w-full max-w-2xl"> <div className="container mx-auto p-6">
{/* Header with back button */} {/* Header with back button */}
<motion.div <motion.div
initial={{ opacity: 0, y: -20 }} initial={{ opacity: 0, y: -20 }}
@@ -299,7 +299,7 @@ function App() {
> >
← Back to Home ← Back to Home
</Button> </Button>
<div className="text-center"> <div className="mb-4">
<h1 className="text-3xl font-bold tracking-tight">CC Projects</h1> <h1 className="text-3xl font-bold tracking-tight">CC Projects</h1>
<p className="mt-1 text-sm text-muted-foreground"> <p className="mt-1 text-sm text-muted-foreground">
Browse your Claude Code sessions Browse your Claude Code sessions
@@ -312,7 +312,7 @@ function App() {
<motion.div <motion.div
initial={{ opacity: 0 }} initial={{ opacity: 0 }}
animate={{ opacity: 1 }} 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} {error}
</motion.div> </motion.div>
@@ -350,18 +350,18 @@ function App() {
animate={{ opacity: 1, x: 0 }} animate={{ opacity: 1, x: 0 }}
exit={{ opacity: 0, x: 20 }} exit={{ opacity: 0, x: 20 }}
transition={{ duration: 0.3 }} transition={{ duration: 0.3 }}
className="space-y-4"
> >
{/* New session button at the top */} {/* New session button at the top */}
<motion.div <motion.div
initial={{ opacity: 0, y: 20 }} initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }} animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.5 }} transition={{ duration: 0.5 }}
className="mb-4"
> >
<Button <Button
onClick={handleNewSession} onClick={handleNewSession}
size="default" size="default"
className="w-full" className="w-full max-w-md"
> >
<Plus className="mr-2 h-4 w-4" /> <Plus className="mr-2 h-4 w-4" />
New Claude Code session New Claude Code session

80
src/components/ProjectList.tsx
View File

@@ -85,7 +85,7 @@ export const ProjectList: React.FC<ProjectListProps> = ({
return ( return (
<div className={cn("space-y-4", className)}> <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) => ( {currentProjects.map((project, index) => (
<motion.div <motion.div
key={project.id} key={project.id}
@@ -98,19 +98,21 @@ export const ProjectList: React.FC<ProjectListProps> = ({
}} }}
> >
<Card <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)} onClick={() => onProjectClick(project)}
> >
<div className="flex items-start justify-between"> <div className="flex flex-col h-full">
<div className="flex-1 min-w-0"> <div className="flex-1">
<div className="flex items-center gap-3 mb-2"> <div className="flex items-start justify-between mb-2">
<FolderOpen className="h-5 w-5 text-primary shrink-0" /> <div className="flex items-center gap-2 flex-1 min-w-0">
<h3 className="font-semibold text-base truncate"> <FolderOpen className="h-5 w-5 text-primary shrink-0" />
{getProjectName(project.path)} <h3 className="font-semibold text-base truncate">
</h3> {getProjectName(project.path)}
</h3>
</div>
{project.sessions.length > 0 && ( {project.sessions.length > 0 && (
<Badge variant="secondary" className="shrink-0"> <Badge variant="secondary" className="shrink-0 ml-2">
{project.sessions.length} session{project.sessions.length !== 1 ? 's' : ''} {project.sessions.length}
</Badge> </Badge>
)} )}
</div> </div>
@@ -118,41 +120,43 @@ export const ProjectList: React.FC<ProjectListProps> = ({
<p className="text-sm text-muted-foreground mb-3 font-mono truncate"> <p className="text-sm text-muted-foreground mb-3 font-mono truncate">
{project.path} {project.path}
</p> </p>
</div>
<div className="flex items-center gap-4 text-xs text-muted-foreground">
<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"> <div className="flex items-center gap-1">
<Calendar className="h-3 w-3" /> <Calendar className="h-3 w-3" />
<span>{formatTimeAgo(project.created_at * 1000)}</span> <span>{formatTimeAgo(project.created_at * 1000)}</span>
</div> </div>
<div className="flex items-center gap-1"> <div className="flex items-center gap-1">
<FileText className="h-3 w-3" /> <FileText className="h-3 w-3" />
<span>{project.sessions.length} conversations</span> <span>{project.sessions.length}</span>
</div> </div>
</div> </div>
</div>
<div className="flex items-center gap-1 opacity-0 group-hover:opacity-100 transition-opacity">
<div className="flex items-center gap-2 opacity-0 group-hover:opacity-100 transition-opacity"> {onProjectSettings && (
{onProjectSettings && ( <DropdownMenu>
<DropdownMenu> <DropdownMenuTrigger asChild onClick={(e) => e.stopPropagation()}>
<DropdownMenuTrigger asChild onClick={(e) => e.stopPropagation()}> <Button variant="ghost" size="sm" className="h-8 w-8 p-0">
<Button variant="ghost" size="sm" className="h-8 w-8 p-0"> <MoreVertical className="h-4 w-4" />
<MoreVertical className="h-4 w-4" /> </Button>
</Button> </DropdownMenuTrigger>
</DropdownMenuTrigger> <DropdownMenuContent align="end">
<DropdownMenuContent align="end"> <DropdownMenuItem
<DropdownMenuItem onClick={(e) => {
onClick={(e) => { e.stopPropagation();
e.stopPropagation(); onProjectSettings(project);
onProjectSettings(project); }}
}} >
> <Settings className="h-4 w-4 mr-2" />
<Settings className="h-4 w-4 mr-2" /> Hooks
Hooks </DropdownMenuItem>
</DropdownMenuItem> </DropdownMenuContent>
</DropdownMenuContent> </DropdownMenu>
</DropdownMenu> )}
)} <ChevronRight className="h-4 w-4 text-muted-foreground" />
<ChevronRight className="h-5 w-5 text-muted-foreground" /> </div>
</div> </div>
</div> </div>
</Card> </Card>