From c7048678b2682c2a797cea4f835354de2fbd610a Mon Sep 17 00:00:00 2001
From: Jaime Idolpx <jaime@idolpx.com>
Date: Fri, 12 Jun 2026 23:26:41 -0400
Subject: [PATCH] fix(StatusPage): enhance file info display with toggleable
 font style for last file access

---
 src/app/components/StatusPage.tsx | 30 +++++++++++++++---------------
 1 file changed, 15 insertions(+), 15 deletions(-)

diff --git a/src/app/components/StatusPage.tsx b/src/app/components/StatusPage.tsx
index ce58773..6750b83 100644
--- a/src/app/components/StatusPage.tsx
+++ b/src/app/components/StatusPage.tsx
@@ -107,6 +107,8 @@ export default function StatusPage({ config, setConfig, onOpenFileManager }: Sta
   // Mock image association (replace with real logic if available)
   const imageUrl = lastFile.endsWith('.d64') ? '/assets/floppy.png' : undefined;
 
+  const [useShiftFont, setUseShiftFont] = useState(false);
+
   // Dialog/modal state for reset actions
   const [showResetModal, setShowResetModal] = useState<null | 'meatloaf' | 'host'>(null);
   const [resetStatus, setResetStatus] = useState('idle'); // 'idle' | 'in-progress' | 'done'
@@ -210,21 +212,19 @@ export default function StatusPage({ config, setConfig, onOpenFileManager }: Sta
               </div>
             )}
 
-            {/* New device info cards */}
-            <div className="mb-4">
-              <div className="bg-neutral-50 rounded-lg p-3 flex flex-col items-start justify-center w-full mb-2">
-                <div className="text-xs text-neutral-500 mb-1">Last File Access</div>
-                <div className="text-sm font-medium break-all w-full text-left">{lastFile}</div>
-              </div>
-              <div className="flex flex-row justify-between gap-4 w-full">
-                <div className="bg-neutral-50 rounded-lg p-3 flex-1 flex flex-col items-start justify-center">
-                  <div className="text-xs text-neutral-500 mb-1">Size</div>
-                  <div className="text-sm font-medium">{fileSize}</div>
-                </div>
-                <div className="bg-neutral-50 rounded-lg p-3 flex-1 flex flex-col items-end justify-center">
-                  <div className="text-xs text-neutral-500 mb-1">Transfer Speed</div>
-                  <div className="text-sm font-medium">{transferSpeed}</div>
-                </div>
+            {/* Last File Access + Size + Transfer Speed */}
+            <div className="mb-4 bg-neutral-50 rounded-lg p-3">
+              <div className="text-xs text-neutral-500 mb-1">Last File Access</div>
+              <button
+                onClick={() => setUseShiftFont(v => !v)}
+                className="w-full text-left break-all text-xs font-medium mb-2 leading-snug"
+                style={{ fontFamily: useShiftFont ? "'CbmShift'" : "'C64_Pro_Mono'" }}
+              >
+                {lastFile}
+              </button>
+              <div className="flex items-center justify-between">
+                <span className="text-xs text-neutral-500">{fileSize}</span>
+                <span className="text-xs text-neutral-500">{transferSpeed}</span>
               </div>
             </div>