Skip to content

Commit dfef51b

Browse files
tikazyqtikazyq
committed
refactor: remove unused project color and status functions; simplify ProjectManagementPage layout
1 parent 64189da commit dfef51b

File tree

2 files changed

+62
-194
lines changed

2 files changed

+62
-194
lines changed

‎packages/web/app/components/layout/NavigationBreadcrumb.tsx‎

Lines changed: 0 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -33,28 +33,6 @@ export function NavigationBreadcrumb() {
3333
.substring(0, 2);
3434
};
3535

36-
const getProjectColor = (name: string) => {
37-
const colors = [
38-
'bg-blue-500',
39-
'bg-green-500',
40-
'bg-yellow-500',
41-
'bg-red-500',
42-
'bg-purple-500',
43-
'bg-cyan-500',
44-
'bg-pink-500',
45-
'bg-orange-500',
46-
'bg-lime-500',
47-
'bg-indigo-500',
48-
];
49-
50-
let hash = 0;
51-
for (let i = 0; i < name.length; i++) {
52-
hash = name.charCodeAt(i) + ((hash << 5) - hash);
53-
}
54-
55-
return colors[Math.abs(hash) % colors.length];
56-
};
57-
5836
const switchProject = async (projectId: number) => {
5937
if (currentProjectId === projectId) return;
6038

@@ -124,11 +102,6 @@ export function NavigationBreadcrumb() {
124102
onClick={() => !isCurrentProject && switchProject(project.id)}
125103
className="flex items-center gap-3 p-3 cursor-pointer"
126104
>
127-
<div
128-
className={`w-6 h-6 rounded-full flex items-center justify-center text-white text-xs font-semibold flex-shrink-0 ${getProjectColor(project.name)}`}
129-
>
130-
{getProjectInitials(project.name)}
131-
</div>
132105
<div className="flex-1 min-w-0">
133106
<div className="text-sm font-medium truncate">{project.name}</div>
134107
<div className="text-xs text-muted-foreground truncate">{project.id}</div>

‎packages/web/app/projects/ProjectManagementPage.tsx‎

Lines changed: 62 additions & 167 deletions
Original file line numberDiff line numberDiff line change
@@ -5,15 +5,7 @@ import { useProjectStore } from '@/stores';
55
import { useRouter } from 'next/navigation';
66
import { PageLayout } from '@/components/layout/PageLayout';
77
import { Button } from '@/components/ui/button';
8-
import {
9-
Card,
10-
CardContent,
11-
CardDescription,
12-
CardFooter,
13-
CardHeader,
14-
CardTitle,
15-
} from '@/components/ui/card';
16-
import { Badge } from '@/components/ui/badge';
8+
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
179
import { Alert, AlertDescription } from '@/components/ui/alert';
1810
import {
1911
Dialog,
@@ -27,12 +19,11 @@ import { Label } from '@/components/ui/label';
2719
import { Textarea } from '@/components/ui/textarea';
2820
import {
2921
AlertTriangleIcon,
30-
DatabaseIcon,
31-
EyeIcon,
22+
ChevronRight,
3223
FolderIcon,
3324
LoaderIcon,
3425
PlusIcon,
35-
SettingsIcon,
26+
Search,
3627
} from 'lucide-react';
3728
import { toast } from 'sonner';
3829

@@ -42,15 +33,15 @@ interface ProjectFormData {
4233
}
4334

4435
export function ProjectManagementPage() {
45-
const { currentProjectId, projectsContext, fetchProjects } = useProjectStore();
36+
const { projectsContext, fetchProjects } = useProjectStore();
4637
const [isModalVisible, setIsModalVisible] = useState(false);
4738
const [creating, setCreating] = useState(false);
4839
const [formData, setFormData] = useState<ProjectFormData>({ name: '', description: '' });
4940
const router = useRouter();
5041

5142
useEffect(() => {
5243
fetchProjects();
53-
}, [fetchProjects]);
44+
}, []);
5445

5546
const { data: projects } = projectsContext;
5647

@@ -95,29 +86,6 @@ export function ProjectManagementPage() {
9586
router.push(`/projects/${projectId}`);
9687
};
9788

98-
const getProjectStatusColor = (projectId: number) => {
99-
if (projectId === 1) return 'blue'; // Default project
100-
if (currentProjectId === projectId) return 'green';
101-
return 'default';
102-
};
103-
104-
const getProjectStatusText = (projectId: number) => {
105-
if (projectId === 1) return 'Default'; // Default project
106-
if (currentProjectId === projectId) return 'Active';
107-
return 'Available';
108-
};
109-
110-
if (projectsContext.loading) {
111-
return (
112-
<PageLayout>
113-
<div className="flex flex-col items-center justify-center py-12">
114-
<LoaderIcon className="h-8 w-8 animate-spin mb-4" />
115-
<div>Loading projects...</div>
116-
</div>
117-
</PageLayout>
118-
);
119-
}
120-
12189
if (projectsContext.error) {
12290
return (
12391
<PageLayout>
@@ -133,141 +101,68 @@ export function ProjectManagementPage() {
133101
}
134102

135103
return (
136-
<PageLayout
137-
actions={
138-
<Button
139-
size="lg"
140-
onClick={() => setIsModalVisible(true)}
141-
className="flex items-center gap-2"
142-
>
143-
<PlusIcon size={16} />
144-
New Project
145-
</Button>
146-
}
147-
>
104+
<PageLayout>
148105
<div className="w-full max-w-full">
149-
<div className="px-6 py-6 border-b bg-background">
150-
<div className="max-w-7xl mx-auto">
151-
<h2 className="text-2xl font-bold flex items-center gap-2 mb-2">
152-
<FolderIcon size={24} />
153-
Projects
154-
</h2>
155-
<p className="text-muted-foreground text-base">
156-
Manage your development projects and view their dashboards
157-
</p>
106+
<div className="max-w-7xl mx-auto">
107+
<div className="flex items-center gap-4 mb-6">
108+
<Button className="bg-primary">New Project</Button>
109+
<div className="relative">
110+
<Input
111+
className="pl-10 max-w-[400px] focus:shadow"
112+
placeholder="Search for a project"
113+
/>
114+
<Search
115+
size="14"
116+
className="absolute left-2 top-1/2 -translate-y-1/2 pointer-events-none"
117+
/>
118+
</div>
158119
</div>
159-
</div>
160-
161-
<div className="px-6 py-8">
162-
<div className="max-w-7xl mx-auto">
163-
<div className="grid gap-6 grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 mb-8">
164-
{projects?.map((project) => (
165-
<Card
166-
key={project.id}
167-
className={`cursor-pointer transition-all hover:shadow-lg ${
168-
currentProjectId === project.id ? 'border-primary shadow-primary/20' : ''
169-
}`}
170-
onClick={() => handleViewProject(project.id)}
171-
>
172-
<CardHeader className="pb-3">
173-
<div className="flex items-center justify-between">
174-
<div className="flex items-center gap-2">
175-
<FolderIcon size={20} />
176-
<CardTitle className="text-lg">{project.name}</CardTitle>
177-
</div>
178-
<div className="flex items-center gap-2">
179-
<Badge
180-
variant={
181-
getProjectStatusColor(project.id) === 'green' ? 'default' : 'secondary'
182-
}
183-
>
184-
{getProjectStatusText(project.id)}
185-
</Badge>
186-
<Button
187-
variant="ghost"
188-
size="sm"
189-
onClick={(e) => {
190-
e.stopPropagation();
191-
toast.info('Project settings coming soon');
192-
}}
193-
>
194-
<SettingsIcon size={16} />
195-
</Button>
196-
</div>
197-
</div>
198-
</CardHeader>
199-
200-
<CardContent className="pb-3">
201-
<CardDescription className="line-clamp-2 mb-4">
202-
{project.description || 'No description provided'}
203-
</CardDescription>
204-
205-
<div className="text-xs text-muted-foreground space-y-1 mb-4">
206-
<div>
207-
<strong>ID:</strong> {project.id}
208-
</div>
209-
<div>
210-
<strong>Created:</strong> {new Date(project.createdAt).toLocaleDateString()}
211-
</div>
212-
<div>
213-
<strong>Last Accessed:</strong>{' '}
214-
{new Date(project.lastAccessedAt).toLocaleDateString()}
215-
</div>
120+
<div className="flex items-center gap-6 flex-wrap">
121+
{projects?.map((project) => (
122+
<Card
123+
key={project.id}
124+
className="w-[360px] h-[180px] cursor-pointer transition-all hover:bg-muted/50"
125+
onClick={() => handleViewProject(project.id)}
126+
>
127+
<CardHeader className="pb-3">
128+
<div className="flex items-start justify-between">
129+
<CardTitle className="text-lg">{project.name}</CardTitle>
130+
<div className="flex items-center gap-2 h-7">
131+
<ChevronRight size={16} />
216132
</div>
217-
</CardContent>
133+
</div>
134+
</CardHeader>
135+
136+
<CardContent className="pb-3">
137+
<CardDescription className="line-clamp-2 mb-4">
138+
{project.description || 'No description provided'}
139+
</CardDescription>
140+
</CardContent>
141+
</Card>
142+
))}
143+
</div>
218144

219-
<CardFooter className="pt-0 flex gap-2">
220-
<Button
221-
variant="outline"
222-
size="sm"
223-
className="flex-1 flex items-center gap-1"
224-
onClick={(e) => {
225-
e.stopPropagation();
226-
handleViewProject(project.id);
227-
}}
228-
>
229-
<EyeIcon size={14} />
230-
Dashboard
231-
</Button>
232-
<Button
233-
variant="outline"
234-
size="sm"
235-
className="flex-1 flex items-center gap-1"
236-
onClick={(e) => {
237-
e.stopPropagation();
238-
handleViewProject(project.id);
239-
}}
240-
>
241-
<DatabaseIcon size={14} />
242-
Stats
243-
</Button>
244-
</CardFooter>
245-
</Card>
246-
))}
145+
{projects?.length === 0 && (
146+
<div className="min-h-[60vh] flex items-center justify-center">
147+
<Card className="text-center p-16 border-dashed border-2 bg-muted/50 max-w-2xl w-full">
148+
<FolderIcon size={80} className="mx-auto mb-8 text-muted-foreground" />
149+
<h3 className="text-2xl font-semibold mb-4 text-muted-foreground">
150+
No Projects Found
151+
</h3>
152+
<p className="text-muted-foreground mb-8 text-lg max-w-md mx-auto">
153+
Create your first project to get started with organizing your development work.
154+
</p>
155+
<Button
156+
size="lg"
157+
onClick={() => setIsModalVisible(true)}
158+
className="flex items-center gap-2 px-8 py-3"
159+
>
160+
<PlusIcon size={18} />
161+
Create First Project
162+
</Button>
163+
</Card>
247164
</div>
248-
249-
{projects?.length === 0 && (
250-
<div className="min-h-[60vh] flex items-center justify-center">
251-
<Card className="text-center p-16 border-dashed border-2 bg-muted/50 max-w-2xl w-full">
252-
<FolderIcon size={80} className="mx-auto mb-8 text-muted-foreground" />
253-
<h3 className="text-2xl font-semibold mb-4 text-muted-foreground">
254-
No Projects Found
255-
</h3>
256-
<p className="text-muted-foreground mb-8 text-lg max-w-md mx-auto">
257-
Create your first project to get started with organizing your development work.
258-
</p>
259-
<Button
260-
size="lg"
261-
onClick={() => setIsModalVisible(true)}
262-
className="flex items-center gap-2 px-8 py-3"
263-
>
264-
<PlusIcon size={18} />
265-
Create First Project
266-
</Button>
267-
</Card>
268-
</div>
269-
)}
270-
</div>
165+
)}
271166
</div>
272167
</div>
273168

0 commit comments

Comments
 (0)