fix: move updater check to App.tsx so it runs on launch, not only in editor

Author: whaleen

src-tauri/Cargo.toml

@@ -1,6 +1,6 @@
 [package]
 name = "lines"
-version = "0.2.0"
+version = "0.2.1"
 description = "Desktop tracing tool for SVG line overlays"
 authors = ["josh"]
 license = ""

src-tauri/tauri.conf.json

@@ -1,7 +1,7 @@
 {
   "$schema": "../node_modules/@tauri-apps/cli/config.schema.json",
   "productName": "lines",
-  "version": "0.2.0",
+  "version": "0.2.1",
   "identifier": "com.whaleen.lines",
   "build": {
     "frontendDist": "../dist",

src/App.tsx

@@ -3,12 +3,14 @@ import { ColorModePicker } from "./components/ColorModePicker";
 import { EditorScreen } from "./screens/EditorScreen";
 import { LaunchScreen } from "./screens/LaunchScreen";
 import { ProjectScreen } from "./screens/ProjectScreen";
+import { useUpdater } from "./hooks/useUpdater";
 import { applyTheme } from "./lib/theme";
 import { useProjectStore } from "./store/project-store";
 
 function App() {
   const screen = useProjectStore((state) => state.screen);
   const colorMode = useProjectStore((state) => state.colorMode);
+  const { state: updateState, install, relaunchApp } = useUpdater();
 
   const activeProject =
     screen.id === "project" || screen.id === "editor" ? screen.project : null;
@@ -19,6 +21,24 @@ function App() {
 
   return (
     <>
+      {updateState.status === "available" && (
+        <div className="update-banner">
+          <span>lines {updateState.version} is available</span>
+          <button className="update-banner-btn" onClick={install} type="button">Install update</button>
+        </div>
+      )}
+      {updateState.status === "downloading" && (
+        <div className="update-banner">
+          <span>Downloading… {updateState.progress}%</span>
+          <div className="update-progress-bar"><div className="update-progress-fill" style={{ width: `${updateState.progress}%` }} /></div>
+        </div>
+      )}
+      {updateState.status === "ready" && (
+        <div className="update-banner update-banner--ready">
+          <span>Update ready</span>
+          <button className="update-banner-btn" onClick={relaunchApp} type="button">Relaunch</button>
+        </div>
+      )}
       {screen.id === "project" && (
         <ProjectScreen project={screen.project} components={screen.components} />
       )}

src/screens/EditorScreen.tsx

@@ -5,7 +5,6 @@ import { Inspector } from "../components/Inspector";
 import { LayersPanel } from "../components/LayersPanel";
 import { Toolbar } from "../components/Toolbar";
 import { TraceCanvas } from "../components/TraceCanvas";
-import { useUpdater } from "../hooks/useUpdater";
 import { generateComponentSource } from "../lib/component-generator";
 import { useEditorStore } from "../store/editor-store";
 import { useProjectStore } from "../store/project-store";
@@ -19,7 +18,6 @@ export function EditorScreen({ project, component }: EditorScreenProps) {
   const [editorTab, setEditorTab] = useState<"canvas" | "code">("canvas");
   const [rightTab, setRightTab] = useState<"properties" | "layers">("properties");
   const [showResizeDialog, setShowResizeDialog] = useState(false);
-  const { state: updateState, install, relaunchApp } = useUpdater();
   const { goToProject } = useProjectStore();
 
   const {
@@ -229,25 +227,6 @@ export function EditorScreen({ project, component }: EditorScreenProps) {
         )}
       </header>
 
-      {updateState.status === "available" && (
-        <div className="update-banner">
-          <span>lines {updateState.version} is available</span>
-          <button className="update-banner-btn" onClick={install} type="button">Install update</button>
-        </div>
-      )}
-      {updateState.status === "downloading" && (
-        <div className="update-banner">
-          <span>Downloading… {updateState.progress}%</span>
-          <div className="update-progress-bar"><div className="update-progress-fill" style={{ width: `${updateState.progress}%` }} /></div>
-        </div>
-      )}
-      {updateState.status === "ready" && (
-        <div className="update-banner update-banner--ready">
-          <span>Update ready</span>
-          <button className="update-banner-btn" onClick={relaunchApp} type="button">Relaunch</button>
-        </div>
-      )}
-
       <Toolbar activeTool={activeTool} onSelectTool={setActiveTool} />
 
       <main className="canvas-area">