From 7a3495819a47f7de088e4c1f2b48abff3c89275c Mon Sep 17 00:00:00 2001
From: Thomas Ricouard <ricouard77@gmail.com>
Date: Sun, 18 Jan 2026 12:05:10 +0100
Subject: [PATCH] refactor app composition helpers

---
 src/App.tsx                                   | 25 +++----------------
 .../layout/hooks/useTransparencyPreference.ts | 17 +++++++++++++
 src/features/layout/hooks/useWindowLabel.ts   | 17 +++++++++++++
 3 files changed, 37 insertions(+), 22 deletions(-)
 create mode 100644 src/features/layout/hooks/useTransparencyPreference.ts
 create mode 100644 src/features/layout/hooks/useWindowLabel.ts

diff --git a/src/App.tsx b/src/App.tsx
index 41868eef4..b4390a41e 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,5 +1,4 @@
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { getCurrentWindow } from "@tauri-apps/api/window";
 import "./styles/base.css";
 import "./styles/buttons.css";
 import "./styles/sidebar.css";
@@ -54,6 +53,8 @@ import { useWorkspaceRestore } from "./features/workspaces/hooks/useWorkspaceRes
 import { useResizablePanels } from "./features/layout/hooks/useResizablePanels";
 import { useLayoutMode } from "./features/layout/hooks/useLayoutMode";
 import { useSidebarToggles } from "./features/layout/hooks/useSidebarToggles";
+import { useTransparencyPreference } from "./features/layout/hooks/useTransparencyPreference";
+import { useWindowLabel } from "./features/layout/hooks/useWindowLabel";
 import {
   RightPanelCollapseButton,
   SidebarCollapseButton,
@@ -84,19 +85,6 @@ import type {
   WorkspaceInfo,
 } from "./types";
 
-function useWindowLabel() {
-  const [label, setLabel] = useState("main");
-  useEffect(() => {
-    try {
-      const window = getCurrentWindow();
-      setLabel(window.label ?? "main");
-    } catch {
-      setLabel("main");
-    }
-  }, []);
-  return label;
-}
-
 function MainApp() {
   const {
     settings: appSettings,
@@ -187,10 +175,7 @@ function MainApp() {
   const [settingsSection, setSettingsSection] = useState<SettingsSection | null>(
     null,
   );
-  const [reduceTransparency, setReduceTransparency] = useState(() => {
-    const stored = localStorage.getItem("reduceTransparency");
-    return stored === "true";
-  });
+  const { reduceTransparency, setReduceTransparency } = useTransparencyPreference();
   const dictationReady = dictationModel.status?.state === "ready";
   const holdDictationKey = (appSettings.dictationHoldKey ?? "").toLowerCase();
   const handleToggleDictation = useCallback(async () => {
@@ -309,10 +294,6 @@ function MainApp() {
     );
   }, [appSettings.defaultAccessMode]);
 
-  useEffect(() => {
-    localStorage.setItem("reduceTransparency", String(reduceTransparency));
-  }, [reduceTransparency]);
-
   const { status: gitStatus, refresh: refreshGitStatus } =
     useGitStatus(activeWorkspace);
   const compactTab = isTablet ? tabletTab : activeTab;
diff --git a/src/features/layout/hooks/useTransparencyPreference.ts b/src/features/layout/hooks/useTransparencyPreference.ts
new file mode 100644
index 000000000..024d543fc
--- /dev/null
+++ b/src/features/layout/hooks/useTransparencyPreference.ts
@@ -0,0 +1,17 @@
+import { useEffect, useState } from "react";
+
+export function useTransparencyPreference(storageKey = "reduceTransparency") {
+  const [reduceTransparency, setReduceTransparency] = useState(() => {
+    const stored = localStorage.getItem(storageKey);
+    return stored === "true";
+  });
+
+  useEffect(() => {
+    localStorage.setItem(storageKey, String(reduceTransparency));
+  }, [reduceTransparency, storageKey]);
+
+  return {
+    reduceTransparency,
+    setReduceTransparency,
+  };
+}
diff --git a/src/features/layout/hooks/useWindowLabel.ts b/src/features/layout/hooks/useWindowLabel.ts
new file mode 100644
index 000000000..9db735bd2
--- /dev/null
+++ b/src/features/layout/hooks/useWindowLabel.ts
@@ -0,0 +1,17 @@
+import { useEffect, useState } from "react";
+import { getCurrentWindow } from "@tauri-apps/api/window";
+
+export function useWindowLabel(defaultLabel = "main") {
+  const [label, setLabel] = useState(defaultLabel);
+
+  useEffect(() => {
+    try {
+      const window = getCurrentWindow();
+      setLabel(window.label ?? defaultLabel);
+    } catch {
+      setLabel(defaultLabel);
+    }
+  }, [defaultLabel]);
+
+  return label;
+}