refactor: streamline Devlog components by removing unnecessary wrappers and improving loading states

Author: Marvin Zhang

packages/web/NAMING_CONVENTIONS.md

@@ -9,15 +9,13 @@ This document outlines the standardized file naming conventions for the web pack
 - **Pattern**: `PascalCase.tsx` or `page.tsx` (Next.js convention)
 - **Examples**:
   - `ProjectDetailsPage.tsx`
-  - `DashboardPage.tsx`
   - `page.tsx` (Next.js route files)
 
 ### Layout Components
 
 - **Pattern**: `PascalCase.tsx`
 - **Examples**:
   - `AppLayout.tsx`
-  - `PageLayout.tsx`
   - `NavigationSidebar.tsx`
 
 ### Feature Components

packages/web/ROUTING.md

@@ -54,7 +54,6 @@ The web package uses Next.js 14 App Router with hierarchical routing structure t
 app/
 ├── layout.tsx             - Root layout with AppLayout wrapper
 ├── page.tsx               - Homepage (redirects to /projects)
-├── DashboardPage.tsx      - Dashboard component (no longer used at root)
 ├── AppLayout.tsx          - Shared layout with sidebar, header, and navigation
 ├── projects/
 │   ├── page.tsx           - Project list page (/projects) - NEW MAIN ENTRY
@@ -102,7 +101,6 @@ app/
 app/
 ├── layout.tsx             - Root layout with AppLayout wrapper
 ├── page.tsx               - Dashboard page (/)
-├── DashboardPage.tsx      - Dashboard component
 ├── AppLayout.tsx          - Shared layout with sidebar, header, and navigation
 ├── projects/
 │   ├── page.tsx           - Project management page (/projects)

packages/web/app/DashboardPage.tsx

@@ -13,7 +13,7 @@ import {
   SidebarTrigger,
   useSidebar,
 } from '@/components/ui/sidebar';
-import { Home, SquareKanban } from 'lucide-react';
+import { Boxes, Home, SquareKanban } from 'lucide-react';
 
 interface SidebarItem {
   key: string;
@@ -43,9 +43,9 @@ export function NavigationSidebar() {
 
   const projectsMenuItems = [
     {
-      key: 'overview',
-      label: 'Overview',
-      icon: <Home />,
+      key: 'projects',
+      label: 'Projects',
+      icon: <Boxes />,
       onClick: () => router.push('/projects'),
     },
   ];

packages/web/app/components/layout/NavigationSidebar.tsx

@@ -1,4 +1,3 @@
-export { PageLayout } from './PageLayout';
 export { NavigationSidebar } from './NavigationSidebar';
 export { NavigationBreadcrumb } from './NavigationBreadcrumb';
 export { AppLayoutSkeleton } from './AppLayoutSkeleton';

packages/web/app/components/layout/PageLayout.tsx

@@ -3,7 +3,6 @@
 import React, { useEffect, useState } from 'react';
 import { useProjectStore } from '@/stores';
 import { useRouter } from 'next/navigation';
-import { PageLayout } from '@/components/layout/PageLayout';
 import { ProjectGridSkeleton } from '@/components/common';
 import { Button } from '@/components/ui/button';
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
@@ -89,21 +88,19 @@ export function ProjectManagementPage() {
 
   if (projectsContext.error) {
     return (
-      <PageLayout>
-        <Alert variant="destructive" className="m-5 flex items-center gap-2">
-          <AlertTriangleIcon size={16} />
-          <div>
-            <div className="font-semibold">Error Loading Projects</div>
-            <AlertDescription>{projectsContext.error}</AlertDescription>
-          </div>
-        </Alert>
-      </PageLayout>
+      <Alert variant="destructive" className="m-5 flex items-center gap-2">
+        <AlertTriangleIcon size={16} />
+        <div>
+          <div className="font-semibold">Error Loading Projects</div>
+          <AlertDescription>{projectsContext.error}</AlertDescription>
+        </div>
+      </Alert>
     );
   }
 
   return (
-    <PageLayout>
-      <div className="w-full max-w-full">
+    <>
+      <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">New Project</Button>
@@ -229,6 +226,6 @@ export function ProjectManagementPage() {
           </form>
         </DialogContent>
       </Dialog>
-    </PageLayout>
+    </>
   );
 }

packages/web/app/components/layout/index.ts

@@ -1,7 +1,7 @@
 'use client';
 
 import React, { useEffect } from 'react';
-import { Dashboard, PageLayout } from '@/components';
+import { Dashboard } from '@/components';
 import { useDevlogStore, useProjectStore } from '@/stores';
 import { DevlogEntry } from '@codervisor/devlog-core';
 import { useRouter } from 'next/navigation';