From a9748eafec9b3ef973f0a179667132614890bec1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Nicol=C3=A1s=20Hatcher?= <nicolas@theuniverse.today>
Date: Sun, 19 Oct 2025 16:05:50 +0200
Subject: [PATCH] FIX: sync changes of the localstorage in the left drawer

This is a bit of a HACK. going a bit "against" React philosophy.
---
 webapp/app.ironcalc.com/frontend/src/App.tsx                 | 5 ++++-
 webapp/app.ironcalc.com/frontend/src/components/FileBar.tsx  | 3 ++-
 .../frontend/src/components/LeftDrawer/LeftDrawer.tsx        | 1 +
 3 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/webapp/app.ironcalc.com/frontend/src/App.tsx b/webapp/app.ironcalc.com/frontend/src/App.tsx
index e2fa0e1..78dfe08 100644
--- a/webapp/app.ironcalc.com/frontend/src/App.tsx
+++ b/webapp/app.ironcalc.com/frontend/src/App.tsx
@@ -30,6 +30,7 @@ function App() {
   const [showWelcomeDialog, setShowWelcomeDialog] = useState(false);
   const [isTemplatesDialogOpen, setTemplatesDialogOpen] = useState(false);
   const [isDrawerOpen, setIsDrawerOpen] = useState(false);
+  const [localStorageId, setLocalStorageId] = useState<number>(1);
 
   useEffect(() => {
     async function start() {
@@ -129,6 +130,7 @@ function App() {
         newModel={handleNewModel}
         setModel={handleSetModel}
         onDelete={handleDeleteModelByUuid}
+        localStorageId={localStorageId}
       />
       <MainContent isDrawerOpen={isDrawerOpen}>
         {isDrawerOpen && (
@@ -153,6 +155,7 @@ function App() {
           onDelete={handleDeleteModel}
           isDrawerOpen={isDrawerOpen}
           setIsDrawerOpen={setIsDrawerOpen}
+          setLocalStorageId={setLocalStorageId}
         />
         <IronCalc model={model} />
       </MainContent>
@@ -240,7 +243,7 @@ const MobileOverlay = styled("div")`
   background-color: rgba(255, 255, 255, 0.8);
   z-index: 1;
   cursor: pointer;
-  
+
   @media (min-width: 441px) {
     display: none;
   }
diff --git a/webapp/app.ironcalc.com/frontend/src/components/FileBar.tsx b/webapp/app.ironcalc.com/frontend/src/components/FileBar.tsx
index 47797e8..a9acb73 100644
--- a/webapp/app.ironcalc.com/frontend/src/components/FileBar.tsx
+++ b/webapp/app.ironcalc.com/frontend/src/components/FileBar.tsx
@@ -34,6 +34,7 @@ export function FileBar(properties: {
   onDelete: () => void;
   isDrawerOpen: boolean;
   setIsDrawerOpen: (open: boolean) => void;
+  setLocalStorageId: (updater: (id: number) => number) => void;
 }) {
   const [isDialogOpen, setIsDialogOpen] = useState(false);
   const spacerRef = useRef<HTMLDivElement>(null);
@@ -67,7 +68,6 @@ export function FileBar(properties: {
         }}
       >
         <DrawerButton
-          // $isDrawerOpen={properties.isDrawerOpen}
           onClick={() => properties.setIsDrawerOpen(!properties.isDrawerOpen)}
           disableRipple
         >
@@ -96,6 +96,7 @@ export function FileBar(properties: {
           onNameChange={(name) => {
             properties.model.setName(name);
             updateNameSelectedWorkbook(properties.model, name);
+            properties.setLocalStorageId((id) => id + 1);
           }}
           maxWidth={maxTitleWidth}
         />
diff --git a/webapp/app.ironcalc.com/frontend/src/components/LeftDrawer/LeftDrawer.tsx b/webapp/app.ironcalc.com/frontend/src/components/LeftDrawer/LeftDrawer.tsx
index 8f6219a..6b44b1a 100644
--- a/webapp/app.ironcalc.com/frontend/src/components/LeftDrawer/LeftDrawer.tsx
+++ b/webapp/app.ironcalc.com/frontend/src/components/LeftDrawer/LeftDrawer.tsx
@@ -10,6 +10,7 @@ interface LeftDrawerProps {
   newModel: () => void;
   setModel: (key: string) => void;
   onDelete: (uuid: string) => void;
+  localStorageId: number;
 }
 
 function LeftDrawer({