feat: refactor project initialization and create ProjectListPage component

Author: Marvin Zhang

.github/instructions/all.instructions.md

@@ -355,9 +355,6 @@ export class ProjectService {
     if (!this.database.isInitialized) {
       await this.database.initialize();
     }
-
-    // Create default project if it doesn't exist
-    await this.createDefaultProject();
   }
 
   async list(): Promise<ProjectMetadata[]> {

GEMINI.md

@@ -385,9 +385,6 @@ export class ProjectService {
     if (!this.database.isInitialized) {
       await this.database.initialize();
     }
-
-    // Create default project if it doesn't exist
-    await this.createDefaultProject();
   }
 
   async list(): Promise<ProjectMetadata[]> {

packages/core/src/services/project-service.ts

@@ -43,36 +43,13 @@ export class ProjectService {
           this.database.entityMetadatas.length,
         );
         console.log('[ProjectService] Repository initialized:', !!this.repository);
-
-        // Create default project if it doesn't exist
-        await this.createDefaultProject();
       }
     } catch (error) {
       console.error('[ProjectService] Failed to initialize:', error);
       throw error;
     }
   }
 
-  /**
-   * Create default project
-   */
-  private async createDefaultProject(): Promise<void> {
-    const defaultProject: Omit<Project, 'id' | 'createdAt' | 'lastAccessedAt'> = {
-      name: 'Default Project',
-      description: 'Default devlog project',
-    };
-
-    // Create project directly without initialization check since this is called during initialization
-    const existing = await this.repository.findOne({ where: { name: defaultProject.name } });
-    if (existing) {
-      return; // Default project already exists
-    }
-
-    // Create and save new project entity
-    const entity = ProjectEntity.fromProjectData(defaultProject);
-    await this.repository.save(entity);
-  }
-
   async list(): Promise<Project[]> {
     await this.ensureInitialized(); // Ensure initialization
 

packages/web/app/AppLayout.tsx

@@ -3,6 +3,7 @@
 import React, { useEffect, useState } from 'react';
 import { AppLayoutSkeleton, ErrorBoundary, NavigationSidebar, TopNavbar } from '@/components';
 import { SidebarProvider, SidebarInset } from '@/components/ui/sidebar';
+import { Toaster } from 'sonner';
 
 interface AppLayoutProps {
   children: React.ReactNode;
@@ -23,6 +24,7 @@ export function AppLayout({ children }: AppLayoutProps) {
 
   return (
     <ErrorBoundary>
+      <Toaster />
       <div className="min-h-screen bg-background w-full">
         <TopNavbar />
         <SidebarProvider>

packages/web/app/api/projects/[id]/route.ts

@@ -56,11 +56,8 @@ export const PUT = withErrorHandling(
       return projectResult.response;
     }
 
-    // Parse request body
-    const data = await request.json();
-
     // Update project
-    const updatedProject = await projectResult.data.projectService.update(projectId, data);
+    const updatedProject = await projectResult.data.projectService.update(projectId, bodyValidation.data);
 
     return createSuccessResponse(updatedProject, { sseEventType: RealtimeEventType.PROJECT_UPDATED });
   },

packages/web/app/components/common/project-card-skeleton/ProjectCardSkeleton.tsx

@@ -6,7 +6,7 @@ import { Skeleton } from '@/components/ui/skeleton';
 
 export function ProjectCardSkeleton() {
   return (
-    <Card className="w-96 h-48">
+    <Card className="h-48">
       <CardHeader className="pb-3">
         <div className="flex items-start justify-between">
           <Skeleton className="h-6 w-32" />
@@ -28,7 +28,7 @@ export function ProjectCardSkeleton() {
 
 export function ProjectGridSkeleton({ count = 6 }: { count?: number }) {
   return (
-    <div className="flex items-center gap-6 flex-wrap">
+    <div className="grid gap-6 lg:grid-cols-3 md:grid-cols-2">
       {Array.from({ length: count }).map((_, index) => (
         <ProjectCardSkeleton key={index} />
       ))}

…b/app/projects/ProjectManagementPage.tsx …ges/web/app/projects/ProjectListPage.tsxpackages/web/app/projects/ProjectManagementPage.tsx renamed to packages/web/app/projects/ProjectListPage.tsx packages/web/app/projects/ProjectManagementPage.tsx renamed to packages/web/app/projects/ProjectListPage.tsx

@@ -34,7 +34,7 @@ interface ProjectFormData {
   description?: string;
 }
 
-export function ProjectManagementPage() {
+export function ProjectListPage() {
   const { projectsContext, fetchProjects } = useProjectStore();
   const [isModalVisible, setIsModalVisible] = useState(false);
   const [creating, setCreating] = useState(false);
@@ -43,11 +43,14 @@ export function ProjectManagementPage() {
   const { subscribe, unsubscribe } = useRealtimeStore();
 
   useEffect(() => {
-    subscribe(RealtimeEventType.PROJECT_CREATED, fetchProjects);
+    subscribe(RealtimeEventType.PROJECT_CREATED, async () => {
+      await fetchProjects();
+      toast.success('Project created successfully');
+    });
     return () => {
       unsubscribe(RealtimeEventType.PROJECT_CREATED);
     };
-  }, []);
+  }, [fetchProjects]);
 
   useEffect(() => {
     fetchProjects();
@@ -118,10 +121,7 @@ export function ProjectManagementPage() {
       <div className="w-full max-w-full p-6">
         <div className="max-w-7xl mx-auto">
           <div className="flex items-center gap-4 mb-6">
-            <Button 
-              className="bg-primary"
-              onClick={() => setIsModalVisible(true)}
-            >
+            <Button className="bg-primary" onClick={() => setIsModalVisible(true)}>
               New Project
             </Button>
             <div className="relative">
@@ -138,11 +138,11 @@ export function ProjectManagementPage() {
 
           {/* Show skeleton loading state */}
           {isLoadingProjects ? (
-            <ProjectGridSkeleton count={3} />
+            <ProjectGridSkeleton count={2} />
           ) : (
             <>
               {/* Projects grid */}
-              <div className="grid gap-6 lg:grid-cols-3 md:grid-cols-2 sm:grid-cols-2">
+              <div className="grid gap-6 lg:grid-cols-3 md:grid-cols-2">
                 {projects?.map((project) => (
                   <Card
                     key={project.id}

packages/web/app/projects/[id]/settings/ProjectSettingsPage.tsx

@@ -307,7 +307,7 @@ export function ProjectSettingsPage({ projectId }: ProjectSettingsPageProps) {
             <CardDescription>View project metadata and statistics</CardDescription>
           </CardHeader>
           <CardContent className="space-y-4">
-            <div className="grid grid-cols-2 gap-4">
+            <div className="grid gap-4 lg:grid-cols-4 md:grid-cols-2">
               <div>
                 <Label className="text-sm text-muted-foreground">Project ID</Label>
                 <p className="text-sm font-mono">{project.id}</p>

packages/web/app/projects/page.tsx

@@ -1,5 +1,5 @@
-import { ProjectManagementPage } from './ProjectManagementPage';
+import { ProjectListPage } from './ProjectListPage';
 
 export default function ProjectsPage() {
-  return <ProjectManagementPage />;
+  return <ProjectListPage />;
 }