From 1e602eaaae18b9a9c71de6d5e07ad848c100bd5b Mon Sep 17 00:00:00 2001
From: oleojake <oleojake@gmail.com>
Date: Sat, 23 Nov 2024 13:25:38 +0100
Subject: [PATCH 1/3] #569 show filename in footer

---
 src/core/providers/canvas/canvas.model.ts     |  1 +
 src/core/providers/canvas/canvas.provider.tsx |  5 +++
 src/pods/footer/footer.pod.module.css         | 21 +++++++++--
 src/pods/footer/footer.pod.tsx                | 37 ++++++++++++-------
 4 files changed, 47 insertions(+), 17 deletions(-)

diff --git a/src/core/providers/canvas/canvas.model.ts b/src/core/providers/canvas/canvas.model.ts
index e0e2e503..45d6274e 100644
--- a/src/core/providers/canvas/canvas.model.ts
+++ b/src/core/providers/canvas/canvas.model.ts
@@ -98,6 +98,7 @@ export interface CanvasContextModel {
   addNewPage: () => void;
   duplicatePage: (pageIndex: number) => void;
   getActivePage: () => Page;
+  getActivePageName: () => string;
   setActivePage: (pageId: string) => void;
   deletePage: (pageIndex: number) => void;
   editPageTitle: (pageIndex: number, newName: string) => void;
diff --git a/src/core/providers/canvas/canvas.provider.tsx b/src/core/providers/canvas/canvas.provider.tsx
index dea96574..552ef528 100644
--- a/src/core/providers/canvas/canvas.provider.tsx
+++ b/src/core/providers/canvas/canvas.provider.tsx
@@ -101,6 +101,10 @@ export const CanvasProvider: React.FC<Props> = props => {
     return document.pages[document.activePageIndex];
   };
 
+  const getActivePageName = () => {
+    return document.pages[document.activePageIndex].name;
+  };
+
   const setActivePage = (pageId: string) => {
     selectionInfo.clearSelection();
     selectionInfo.shapeRefs.current = {};
@@ -318,6 +322,7 @@ export const CanvasProvider: React.FC<Props> = props => {
         addNewPage,
         duplicatePage,
         getActivePage,
+        getActivePageName,
         setActivePage,
         deletePage,
         editPageTitle,
diff --git a/src/pods/footer/footer.pod.module.css b/src/pods/footer/footer.pod.module.css
index 2754dafe..7edbac1a 100644
--- a/src/pods/footer/footer.pod.module.css
+++ b/src/pods/footer/footer.pod.module.css
@@ -1,14 +1,29 @@
 .container {
   display: flex;
-  justify-content: center;
+  justify-content: space-between;
   align-items: center;
   background-color: var(--primary-50);
   border-top: 1px solid var(--primary-100);
   padding: var(--space-xs) var(--space-md);
 }
 
-.title {
-  flex-grow: 1;
+.left,
+.center,
+.right {
+  flex: 1;
+}
+
+.left {
+  text-align: left;
+}
+
+.center {
+  text-align: center;
+}
+
+.right {
+  display: flex;
+  justify-content: flex-end;
 }
 
 .zoomContainer {
diff --git a/src/pods/footer/footer.pod.tsx b/src/pods/footer/footer.pod.tsx
index 124f2921..2d80250c 100644
--- a/src/pods/footer/footer.pod.tsx
+++ b/src/pods/footer/footer.pod.tsx
@@ -3,23 +3,32 @@ import classes from './footer.pod.module.css';
 import { ZoomInButton, ZoomOutButton } from './components';
 
 export const FooterPod = () => {
-  const { scale, setScale } = useCanvasContext();
+  const { scale, setScale, getActivePageName } = useCanvasContext();
 
   return (
     <footer className={classes.container}>
-      <p className={classes.title}>Quickmock - © Lemoncode</p>
-      <div className={classes.zoomContainer}>
-        <ZoomOutButton
-          scale={scale}
-          setScale={setScale}
-          className={classes.button}
-        />
-        <p className={classes.zoomValue}>{(scale * 100).toFixed(0)} %</p>
-        <ZoomInButton
-          scale={scale}
-          setScale={setScale}
-          className={classes.button}
-        />
+      <div className={classes.left}>
+        <p>
+          <strong>📄 {getActivePageName()}</strong>
+        </p>
+      </div>
+      <div className={classes.center}>
+        <p>Quickmock - © Lemoncode</p>
+      </div>
+      <div className={classes.right}>
+        <div className={classes.zoomContainer}>
+          <ZoomOutButton
+            scale={scale}
+            setScale={setScale}
+            className={classes.button}
+          />
+          <p className={classes.zoomValue}>{(scale * 100).toFixed(0)} %</p>
+          <ZoomInButton
+            scale={scale}
+            setScale={setScale}
+            className={classes.button}
+          />
+        </div>
       </div>
     </footer>
   );

From a7a0e4c12c2a83eca435e8243236777d4c729ff7 Mon Sep 17 00:00:00 2001
From: oleojake <oleojake@gmail.com>
Date: Sun, 24 Nov 2024 12:04:20 +0100
Subject: [PATCH 2/3] #569 fix filename in footer

---
 src/core/local-disk/use-local-disk.hook.ts | 1 +
 src/pods/footer/footer.pod.tsx             | 5 +++--
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/core/local-disk/use-local-disk.hook.ts b/src/core/local-disk/use-local-disk.hook.ts
index fbcb3f18..b5acf272 100644
--- a/src/core/local-disk/use-local-disk.hook.ts
+++ b/src/core/local-disk/use-local-disk.hook.ts
@@ -58,6 +58,7 @@ export const useLocalDisk = () => {
     reader.onload = () => {
       const content = reader.result as string;
       const parseData: QuickMockFileContract = JSON.parse(content);
+      setFileName(file.name);
       if (parseData.version === '0.1') {
         // Handle version 0.1 parsing
         const appDocument =
diff --git a/src/pods/footer/footer.pod.tsx b/src/pods/footer/footer.pod.tsx
index 2d80250c..b4aa0b96 100644
--- a/src/pods/footer/footer.pod.tsx
+++ b/src/pods/footer/footer.pod.tsx
@@ -3,13 +3,14 @@ import classes from './footer.pod.module.css';
 import { ZoomInButton, ZoomOutButton } from './components';
 
 export const FooterPod = () => {
-  const { scale, setScale, getActivePageName } = useCanvasContext();
+  const { scale, setScale, getActivePageName, fileName } = useCanvasContext();
 
   return (
     <footer className={classes.container}>
       <div className={classes.left}>
         <p>
-          <strong>📄 {getActivePageName()}</strong>
+          <strong>📄 {fileName == '' ? 'New' : fileName}</strong> -{' '}
+          {getActivePageName()}
         </p>
       </div>
       <div className={classes.center}>

From d497c8104c519f733ece5a9192742028925a0227 Mon Sep 17 00:00:00 2001
From: oleojake <oleojake@gmail.com>
Date: Sun, 24 Nov 2024 13:20:20 +0100
Subject: [PATCH 3/3] #569 setFilename to empty when createNewFullDocument

---
 src/core/providers/canvas/canvas.provider.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/core/providers/canvas/canvas.provider.tsx b/src/core/providers/canvas/canvas.provider.tsx
index 552ef528..e6a0ba56 100644
--- a/src/core/providers/canvas/canvas.provider.tsx
+++ b/src/core/providers/canvas/canvas.provider.tsx
@@ -183,6 +183,7 @@ export const CanvasProvider: React.FC<Props> = props => {
 
   const createNewFullDocument = () => {
     setDocument(createDefaultDocumentModel());
+    setFileName('');
   };
 
   const deleteSelectedShapes = () => {