refactor: migrated from antd to shadcn/ui

Author: tikazyq

packages/web/app/AppLayout.tsx

@@ -1,12 +1,12 @@
 'use client';
 
 import React, { useEffect, useState } from 'react';
-import { Alert, Layout } from 'antd';
 import { NavigationSidebar, ErrorBoundary, AppLayoutSkeleton, TopNavbar } from '@/components';
 import { useDevlogContext } from './contexts/DevlogContext';
 import { useStats } from '@/hooks/useStats';
-
-const { Content } = Layout;
+import { Alert, AlertDescription } from '@/components/ui/alert';
+import { AlertTriangle } from 'lucide-react';
+import { cn } from '@/lib/utils';
 
 interface AppLayoutProps {
   children: React.ReactNode;
@@ -31,35 +31,31 @@ export function AppLayout({ children }: AppLayoutProps) {
 
   return (
     <ErrorBoundary>
-      <Layout className="app-layout">
+      <div className="min-h-screen bg-background">
         <TopNavbar />
-        <Layout style={{ flex: 1 }}>
+        <div className="flex flex-1">
           <NavigationSidebar
             stats={stats}
             statsLoading={isLoadingStats}
             collapsed={sidebarCollapsed}
             connected={connected}
             onToggle={() => setSidebarCollapsed(!sidebarCollapsed)}
           />
-          <Layout>
-            <Content className="app-content">
-              <div className="app-content-wrapper">
+          <div className="flex-1 flex flex-col">
+            <main className="flex-1 p-6">
+              <div className="max-w-full">
                 {error && (
-                  <Alert
-                    message="Error"
-                    description={error}
-                    type="error"
-                    showIcon
-                    closable
-                    className="app-error-alert"
-                  />
+                  <Alert className="mb-4">
+                    <AlertTriangle className="h-4 w-4" />
+                    <AlertDescription>{error}</AlertDescription>
+                  </Alert>
                 )}
                 {children}
               </div>
-            </Content>
-          </Layout>
-        </Layout>
-      </Layout>
+            </main>
+          </div>
+        </div>
+      </div>
     </ErrorBoundary>
   );
 }

packages/web/app/components/common/Pagination.tsx

@@ -1,13 +1,11 @@
 'use client';
 
 import React from 'react';
-import { Button, Select, Space, Typography } from 'antd';
-import { LeftOutlined, RightOutlined } from '@ant-design/icons';
+import { Button } from '@/components/ui/button';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
+import { ChevronLeft, ChevronRight } from 'lucide-react';
 import { PaginationMeta } from '@codervisor/devlog-core';
 
-const { Text } = Typography;
-const { Option } = Select;
-
 interface PaginationProps {
   pagination: PaginationMeta;
   onPageChange: (page: number) => void;
@@ -65,73 +63,75 @@ export function Pagination({
   return (
     <div className={`flex items-center justify-between gap-4 ${className || ''}`}>
       {/* Results info */}
-      <Text type="secondary" className="text-sm">
+      <p className="text-sm text-muted-foreground">
         Showing {startItem}-{endItem} of {total} results
-      </Text>
+      </p>
 
-      <Space size="middle" className="flex items-center">
+      <div className="flex items-center gap-4">
         {/* Page size selector */}
         {showSizeChanger && (
-          <Space size="small">
-            <Text type="secondary" className="text-sm">
-              Show
-            </Text>
-            <Select value={limit} onChange={onPageSizeChange} size="small" style={{ width: 70 }}>
-              {pageSizeOptions.map((size) => (
-                <Option key={size} value={size}>
-                  {size}
-                </Option>
-              ))}
+          <div className="flex items-center gap-2">
+            <span className="text-sm text-muted-foreground">Show</span>
+            <Select value={limit.toString()} onValueChange={(value) => onPageSizeChange(parseInt(value))}>
+              <SelectTrigger className="w-16">
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent>
+                {pageSizeOptions.map((size) => (
+                  <SelectItem key={size} value={size.toString()}>
+                    {size}
+                  </SelectItem>
+                ))}
+              </SelectContent>
             </Select>
-            <Text type="secondary" className="text-sm">
-              per page
-            </Text>
-          </Space>
+            <span className="text-sm text-muted-foreground">per page</span>
+          </div>
         )}
 
         {/* Page navigation */}
-        <Space size="small">
+        <div className="flex items-center gap-1">
           <Button
-            icon={<LeftOutlined />}
+            variant="outline"
+            size="sm"
             disabled={!hasPreviousPage}
             onClick={() => onPageChange(page - 1)}
-            size="small"
           >
+            <ChevronLeft className="h-4 w-4 mr-1" />
             Previous
           </Button>
 
           {/* Page numbers */}
-          <Space size={4}>
+          <div className="flex items-center gap-1">
             {getVisiblePages().map((pageNum, index) =>
               pageNum === '...' ? (
-                <span key={`dots-${index}`} className="px-2 text-gray-400">
+                <span key={`dots-${index}`} className="px-2 text-muted-foreground">
                   ...
                 </span>
               ) : (
                 <Button
                   key={pageNum}
-                  type={pageNum === page ? 'primary' : 'default'}
+                  variant={pageNum === page ? 'default' : 'outline'}
+                  size="sm"
                   onClick={() => onPageChange(pageNum as number)}
-                  size="small"
                   className="min-w-8"
                 >
                   {pageNum}
                 </Button>
               ),
             )}
-          </Space>
+          </div>
 
           <Button
-            iconPosition="end"
-            icon={<RightOutlined />}
+            variant="outline"
+            size="sm"
             disabled={!hasNextPage}
             onClick={() => onPageChange(page + 1)}
-            size="small"
           >
             Next
+            <ChevronRight className="h-4 w-4 ml-1" />
           </Button>
-        </Space>
-      </Space>
+        </div>
+      </div>
     </div>
   );
 }