feat: enhance CanvasEditor with zoomable MiniMap and updated Background variant; adjust project list item height

MiaoMint · MiaoMint · commit 2bb3a3201684 · 2026-01-10T16:14:42.000+08:00
diff --git a/frontend/src/components/canvas-view.tsx b/frontend/src/components/canvas-view.tsx
@@ -571,8 +571,13 @@ function CanvasEditor({ project, onBack }: CanvasViewProps) {
             maxZoom={2}
             proOptions={{ hideAttribution: true }}
           >
-            <MiniMap pannable />
-            <Background variant={BackgroundVariant.Cross} gap={12} size={1} />
+            <MiniMap pannable zoomable />
+            <Background
+              className="dark:opacity-30"
+              variant={BackgroundVariant.Dots}
+              gap={12}
+              size={1}
+            />
           </ReactFlow>
         </div>
 
diff --git a/frontend/src/components/project-list.tsx b/frontend/src/components/project-list.tsx
@@ -59,7 +59,7 @@ export function ProjectList({ onProjectClick }: ProjectListProps) {
           className="group cursor-pointer overflow-hidden rounded-xl border-2 border-dashed transition-all hover:shadow-lg hover:border-primary/50"
           onClick={handleCreateProject}
         >
-          <div className="h-full flex items-center justify-center bg-linear-to-br from-muted to-muted/50 min-h-[200px]">
+          <div className="h-full flex items-center justify-center bg-linear-to-br from-muted to-muted/50 min-h-50">
             <div className="flex flex-col items-center justify-center gap-2">
               <div className="flex h-16 w-16 items-center justify-center rounded-full bg-primary/10 transition-all group-hover:bg-primary/20 group-hover:scale-110">
                 <Plus className="h-8 w-8 text-primary" />
diff --git a/frontend/src/components/ui/dialog.tsx b/frontend/src/components/ui/dialog.tsx
@@ -98,7 +98,7 @@ function DialogFooter({
     <div
       data-slot="dialog-footer"
       className={cn(
-        "gap-2 flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
+        "gap-2 flex flex-col-reverse sm:flex-row sm:justify-end",
         className
       )}
       {...props}
diff --git a/frontend/src/main.tsx b/frontend/src/main.tsx
@@ -8,7 +8,7 @@ import { ThemeProvider } from "./components/theme-provider.tsx";
 
 createRoot(document.getElementById("root")!).render(
   <StrictMode>
-    <ThemeProvider defaultTheme="dark" storageKey="vite-ui-theme">
+    <ThemeProvider defaultTheme="system" storageKey="vite-ui-theme">
       <App />
       <Toaster position="top-center" />
     </ThemeProvider>

Original file line number	Diff line number	Diff line change
`@@ -59,7 +59,7 @@ export function ProjectList({ onProjectClick }: ProjectListProps) {`
`59`	`59`	`className="group cursor-pointer overflow-hidden rounded-xl border-2 border-dashed transition-all hover:shadow-lg hover:border-primary/50"`
`60`	`60`	`onClick={handleCreateProject}`
`61`	`61`	`>`
`62`		`- <div className="h-full flex items-center justify-center bg-linear-to-br from-muted to-muted/50 min-h-[200px]">`
	`62`	`+ <div className="h-full flex items-center justify-center bg-linear-to-br from-muted to-muted/50 min-h-50">`
`63`	`63`	`<div className="flex flex-col items-center justify-center gap-2">`
`64`	`64`	`<div className="flex h-16 w-16 items-center justify-center rounded-full bg-primary/10 transition-all group-hover:bg-primary/20 group-hover:scale-110">`
`65`	`65`	`<Plus className="h-8 w-8 text-primary" />`