fix: remove traffic light padding on non mac (#28)

MiaoMint · web-flow · commit ee1124630f2a · 2026-01-12T18:37:04.000+08:00
diff --git a/frontend/src/components/app-sidebar.tsx b/frontend/src/components/app-sidebar.tsx
@@ -16,6 +16,8 @@ import { toast } from "sonner";
 import { Trans } from "@lingui/react/macro";
 import { msg } from "@lingui/core/macro";
 import { useLingui } from "@lingui/react";
+import { useSystemInfo } from "@/hooks/use-system-info";
+import { cn } from "@/lib/utils";
 
 export type AppView = "projects" | "assets";
 
@@ -29,15 +31,16 @@ export function AppSidebar({
   onSettingsClick: () => void;
 }) {
   const { _ } = useLingui();
-  
+  const { systemInfo } = useSystemInfo();
+
   function wip() {
     toast(_(msg`👷 Work in progress`));
   }
 
   return (
     <Sidebar className="border-none">
       <SidebarHeader>
-        <div className="px-2 mt-10">
+        <div className={cn("px-2", systemInfo?.isMac && "mt-10")}>
           <h2 className="text-xl font-bold">VisionFlow</h2>
         </div>
       </SidebarHeader>
diff --git a/frontend/src/components/canvas-view.tsx b/frontend/src/components/canvas-view.tsx
@@ -50,6 +50,8 @@ import {
   type NodeType,
 } from "./nodes";
 import { database } from "../../wailsjs/go/models";
+import { useSystemInfo } from "@/hooks/use-system-info";
+import { cn } from "@/lib/utils";
 
 interface CanvasViewProps {
   project: database.Project;
@@ -61,6 +63,7 @@ const initialNodes: Node[] = [];
 const initialEdges: Edge[] = [];
 function CanvasEditor({ project, onBack }: CanvasViewProps) {
   const { _ } = useLingui();
+  const { systemInfo } = useSystemInfo();
   const [name, setName] = useState(project.name);
   const [isChatOpen, setIsChatOpen] = useState(false);
   const [chatMessage, setChatMessage] = useState("");
@@ -246,7 +249,7 @@ function CanvasEditor({ project, onBack }: CanvasViewProps) {
         image: _(msg`Image`),
         video: _(msg`Video`),
         audio: _(msg`Audio`),
-        group: _(msg`Group`)
+        group: _(msg`Group`),
       };
       const newNode: Node = {
         id: `node-${nodeIdCounter}`,
@@ -453,7 +456,10 @@ function CanvasEditor({ project, onBack }: CanvasViewProps) {
       <div className="flex flex-1 relative overflow-hidden w-full h-full">
         {/* 顶部工具栏 - 悬浮毛玻璃效果 */}
         <div
-          className="absolute top-0 left-0 right-0 z-20 flex items-center gap-4 p-2 pl-24 backdrop-blur-md bg-background/80 border-b border-border/50"
+          className={cn(
+            "absolute top-0 left-0 right-0 z-20 flex items-center gap-4 p-2 backdrop-blur-md bg-background/80 border-b border-border/50",
+            systemInfo?.isMac && "pl-24"
+          )}
           style={{ "--wails-draggable": "drag" } as React.CSSProperties}
         >
           <Button variant="ghost" size="icon" onClick={handleBack}>
@@ -588,7 +594,9 @@ function CanvasEditor({ project, onBack }: CanvasViewProps) {
         {isChatOpen && (
           <div className="w-96 bg-background border-l flex flex-col pt-14 shadow-xl">
             <div className="flex items-center justify-between border-b p-4">
-              <h3 className="font-semibold"><Trans>AI Assistant</Trans></h3>
+              <h3 className="font-semibold">
+                <Trans>AI Assistant</Trans>
+              </h3>
               <Button
                 variant="ghost"
                 size="icon"
diff --git a/frontend/src/hooks/use-system-info.ts b/frontend/src/hooks/use-system-info.ts
@@ -0,0 +1,60 @@
+import { useState, useEffect } from "react";
+import { Environment } from "../../wailsjs/runtime/runtime";
+
+export interface SystemInfo {
+  buildType: string;
+  platform: string;
+  arch: string;
+  isMac: boolean;
+}
+
+// Module-level cache for system info
+let cachedSystemInfo: SystemInfo | null = null;
+let cachePromise: Promise<SystemInfo> | null = null;
+
+/**
+ * Hook to fetch and store system information
+ * Returns system info including build type, platform, and architecture
+ * System info is cached at module level to avoid redundant API calls
+ */
+export function useSystemInfo() {
+  const [systemInfo, setSystemInfo] = useState<SystemInfo | null>(cachedSystemInfo);
+  const [loading, setLoading] = useState(!cachedSystemInfo);
+  const [error, setError] = useState<Error | null>(null);
+
+  useEffect(() => {
+    // If already cached, return immediately
+    if (cachedSystemInfo) {
+      return;
+    }
+
+    const fetchSystemInfo = async () => {
+      try {
+        // If a fetch is already in progress, reuse it
+        if (!cachePromise) {
+          cachePromise = Environment().then((info) => ({
+            ...info,
+            isMac: info.platform === "darwin",
+          }));
+        }
+
+        const info = await cachePromise;
+        cachedSystemInfo = info;
+        setSystemInfo(info);
+        setError(null);
+      } catch (err) {
+        cachePromise = null; // Clear promise on error to allow retry
+        setError(
+          err instanceof Error ? err : new Error("Failed to fetch system info")
+        );
+        setSystemInfo(null);
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    fetchSystemInfo();
+  }, []);
+
+  return { systemInfo, loading, error };
+}
diff --git a/frontend/src/index.css b/frontend/src/index.css
@@ -138,4 +138,11 @@
 * {
     scrollbar-width: none;
 }
- */
+ */
+
+ * {
+  user-select: none;
+  -webkit-user-select: none;
+ }
+
+ 
