idolpx/meatloaf-config
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(StatusPage): enhance file info display with toggleable font style for last file access

Browse Source
This commit is contained in:
Jaime Idolpx 2026-06-12 23:26:41 -04:00
parent c287de5bad
commit c7048678b2
1 changed files with 15 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
src/app/components/StatusPage.tsx
View File

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