refactor: Remove redundant interface definitions and update imports for Devlog types

Author: Marvin Zhang

packages/web/src/client/src/components/Dashboard.tsx

@@ -10,27 +10,10 @@ import {
   WarningOutlined,
   MinusCircleOutlined 
 } from '@ant-design/icons';
+import { DevlogEntry, DevlogStats } from '@devlog/types';
 
 const { Title, Paragraph, Text } = Typography;
 
-interface DevlogEntry {
-  id: string;
-  title: string;
-  type: string;
-  status: string;
-  priority: string;
-  description: string;
-  createdAt: string;
-  updatedAt: string;
-}
-
-interface DevlogStats {
-  total: number;
-  byStatus: Record<string, number>;
-  byType: Record<string, number>;
-  byPriority: Record<string, number>;
-}
-
 interface DashboardProps {
   stats: DevlogStats | null;
   recentDevlogs: DevlogEntry[];
@@ -94,7 +77,7 @@ export function Dashboard({ stats, recentDevlogs, onViewDevlog }: DashboardProps
             <Card>
               <Statistic
                 title="Total Devlogs"
-                value={stats.total}
+                value={stats.totalEntries}
                 prefix={<FileTextOutlined style={{ color: '#1890ff' }} />}
                 valueStyle={{ color: '#1890ff' }}
               />
@@ -123,10 +106,10 @@ export function Dashboard({ stats, recentDevlogs, onViewDevlog }: DashboardProps
           <Col xs={24} sm={12} lg={6}>
             <Card>
               <Statistic
-                title="Blocked"
-                value={stats.byStatus['blocked'] || 0}
-                prefix={<StopOutlined style={{ color: '#ff4d4f' }} />}
-                valueStyle={{ color: '#ff4d4f' }}
+                title="Todo"
+                value={stats.byStatus['todo'] || 0}
+                prefix={<ClockCircleOutlined style={{ color: '#8c8c8c' }} />}
+                valueStyle={{ color: '#8c8c8c' }}
               />
             </Card>
           </Col>

packages/web/src/client/src/components/DevlogDetails.tsx

@@ -33,30 +33,12 @@ import {
   ToolOutlined,
   BookOutlined
 } from '@ant-design/icons';
+import { DevlogEntry } from '@devlog/types';
 
 const { Title, Text, Paragraph } = Typography;
 const { TextArea } = Input;
 const { Option } = Select;
 
-interface DevlogEntry {
-  id: string;
-  title: string;
-  type: string;
-  status: string;
-  priority: string;
-  description: string;
-  businessContext?: string;
-  technicalContext?: string;
-  createdAt: string;
-  updatedAt: string;
-  notes?: Array<{
-    id: string;
-    note: string;
-    category: string;
-    timestamp: string;
-  }>;
-}
-
 interface DevlogDetailsProps {
   devlog: DevlogEntry;
   onUpdate: (data: any) => void;
@@ -174,8 +156,8 @@ export function DevlogDetails({ devlog, onUpdate, onDelete, onBack }: DevlogDeta
               status: devlog.status,
               priority: devlog.priority,
               description: devlog.description,
-              businessContext: devlog.businessContext || '',
-              technicalContext: devlog.technicalContext || ''
+              businessContext: devlog.context?.businessContext || '',
+              technicalContext: devlog.context?.technicalContext || ''
             }}
           >
             <Row gutter={[16, 0]}>
@@ -324,11 +306,11 @@ export function DevlogDetails({ devlog, onUpdate, onDelete, onBack }: DevlogDeta
               </Paragraph>
             </div>
 
-            {devlog.businessContext && (
+            {devlog.context?.businessContext && (
               <div style={{ marginBottom: '24px' }}>
                 <Title level={4}>Business Context</Title>
                 <Alert
-                  message={devlog.businessContext}
+                  message={devlog.context.businessContext}
                   type="info"
                   showIcon
                   icon={<InfoCircleOutlined />}
@@ -337,11 +319,11 @@ export function DevlogDetails({ devlog, onUpdate, onDelete, onBack }: DevlogDeta
               </div>
             )}
 
-            {devlog.technicalContext && (
+            {devlog.context?.technicalContext && (
               <div style={{ marginBottom: '24px' }}>
                 <Title level={4}>Technical Context</Title>
                 <Alert
-                  message={devlog.technicalContext}
+                  message={devlog.context.technicalContext}
                   type="warning"
                   showIcon
                   icon={<ToolOutlined />}
@@ -357,7 +339,7 @@ export function DevlogDetails({ devlog, onUpdate, onDelete, onBack }: DevlogDeta
                   {devlog.notes.map((note) => (
                     <Timeline.Item key={note.id}>
                       <div style={{ marginBottom: '8px' }}>
-                        <Text>{note.note}</Text>
+                        <Text>{note.content}</Text>
                       </div>
                       <Text type="secondary" style={{ fontSize: '12px' }}>
                         {note.category} • {new Date(note.timestamp).toLocaleString()}

packages/web/src/client/src/components/DevlogList.tsx

@@ -12,20 +12,10 @@ import {
   WarningOutlined 
 } from '@ant-design/icons';
 import type { ColumnsType } from 'antd/es/table';
+import { DevlogEntry } from '@devlog/types';
 
 const { Title, Text } = Typography;
 
-interface DevlogEntry {
-  id: string;
-  title: string;
-  type: string;
-  status: string;
-  priority: string;
-  description: string;
-  createdAt: string;
-  updatedAt: string;
-}
-
 interface DevlogListProps {
   devlogs: DevlogEntry[];
   loading: boolean;

packages/web/src/client/src/hooks/useDevlogs.ts

@@ -1,15 +1,5 @@
 import { useState, useEffect } from 'react';
-
-interface DevlogEntry {
-  id: string;
-  title: string;
-  type: string;
-  status: string;
-  priority: string;
-  description: string;
-  createdAt: string;
-  updatedAt: string;
-}
+import { DevlogEntry } from '@devlog/types';
 
 export function useDevlogs() {
   const [devlogs, setDevlogs] = useState<DevlogEntry[]>([]);

packages/web/src/client/src/main.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import ReactDOM from 'react-dom/client'
-import App from './App.tsx'
+import App from './App'
 import './index.css'
 import 'antd/dist/reset.css'