From 708fe6430169c126f572c0590d2fd46c37baf337 Mon Sep 17 00:00:00 2001
From: Victor Giers <mail@victorgiers.com>
Date: Sat, 31 Jan 2026 12:45:26 +0100
Subject: [PATCH] Update App.tsx for theme and text size management, add
 history icon toggle based on theme

---
 src/App.tsx | 21 +++++++++++++++++++--
 1 file changed, 19 insertions(+), 2 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index 5ee1618..b91794f 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -6,6 +6,7 @@ import { appDataDir } from "@tauri-apps/api/path";
 import { listen } from "@tauri-apps/api/event";
 import { invoke } from "@tauri-apps/api/core";
 import historyIcon from "./assets/history.png";
+import historyIconBright from "./assets/history_b.png";
 import {
   createText,
   deleteText,
@@ -89,12 +90,25 @@ export default function App() {
     bodyRef.current = body;
   }, [body]);
 
+  useEffect(() => {
+    const storedTheme = localStorage.getItem("textdb.theme");
+    if (storedTheme === "light") {
+      setTheme("light");
+    }
+    const storedSize = Number(localStorage.getItem("textdb.textSize"));
+    if (!Number.isNaN(storedSize) && storedSize >= 12 && storedSize <= 18) {
+      setTextSize(storedSize);
+    }
+  }, []);
+
   useEffect(() => {
     document.body.dataset.theme = theme;
+    localStorage.setItem("textdb.theme", theme);
   }, [theme]);
 
   useEffect(() => {
     document.documentElement.style.setProperty("--base-font-size", `${textSize}px`);
+    localStorage.setItem("textdb.textSize", String(textSize));
   }, [textSize]);
 
   const isViewingHistory = viewingVersion !== null;
@@ -123,6 +137,9 @@ export default function App() {
     }
   }, [statusKey]);
 
+  const historyIconSrc = theme === "light" ? historyIconBright : historyIcon;
+
+
   const refreshTexts = useCallback(async () => {
     setLoadingTexts(true);
     try {
@@ -644,7 +661,7 @@ export default function App() {
                 title="Settings"
                 type="button"
               >
-                <span aria-hidden="true">⚙</span>
+                <span className="icon-button__glyph icon-button__glyph--large" aria-hidden="true">⚙</span>
               </button>
               <button
                 className="icon-button icon-button--ghost"
@@ -777,7 +794,7 @@ export default function App() {
                     title={historyOpen ? "Close history" : "Open history"}
                     type="button"
                   >
-                    <img src={historyIcon} alt="" className="icon-button__img" />
+                    <img src={historyIconSrc} alt="" className="icon-button__img" />
                   </button>
                 </div>
               </div>