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

@@ -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;
   }

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}
         />

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({