#569 show filename in footer

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 =

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;

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 = {};
@@ -179,6 +183,7 @@ export const CanvasProvider: React.FC<Props> = props => {
 
   const createNewFullDocument = () => {
     setDocument(createDefaultDocumentModel());
+    setFileName('');
   };
 
   const deleteSelectedShapes = () => {
@@ -318,6 +323,7 @@ export const CanvasProvider: React.FC<Props> = props => {
         addNewPage,
         duplicatePage,
         getActivePage,
+        getActivePageName,
         setActivePage,
         deletePage,
         editPageTitle,

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 {

src/pods/footer/footer.pod.tsx

@@ -3,23 +3,33 @@ import classes from './footer.pod.module.css';
 import { ZoomInButton, ZoomOutButton } from './components';
 
 export const FooterPod = () => {
-  const { scale, setScale } = useCanvasContext();
+  const { scale, setScale, getActivePageName, fileName } = 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>📄 {fileName == '' ? 'New' : fileName}</strong> -{' '}
+          {getActivePageName()}
+        </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>
   );