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

feat: enhance StatusPage with file info display and loading progress

Browse Source
This commit is contained in:
Jaime Idolpx 2026-04-14 01:06:22 -04:00
parent a5627ef860
commit 00572089e3
1 changed files with 43 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,6 +1,7 @@
import { useState } from 'react'; import { useState } from 'react';
import { HardDrive, Activity, Wifi, Signal, Clock } from 'lucide-react'; import { HardDrive, Activity, Wifi, Signal, Clock } from 'lucide-react';
import DeviceDetailOverlay from './DeviceDetailOverlay'; import DeviceDetailOverlay from './DeviceDetailOverlay';
import { ImageWithFallback } from './figma/ImageWithFallback';
interface StatusPageProps { interface StatusPageProps {
config: any; config: any;
@ -40,12 +41,17 @@ export default function StatusPage({ config, setConfig }: StatusPageProps) {
{ time: '14:31:58', event: 'Device reset', type: 'warning' } { time: '14:31:58', event: 'Device reset', type: 'warning' }
]; ];
const stats = {
bytesRead: '2.4 MB', // Mock loading/progress state
bytesWritten: '156 KB', const [loading, setLoading] = useState(false);
operations: 1247, const [progress, setProgress] = useState(0.0); // 0.0 to 1.0
errors: 0
}; // Mock file info (replace with real data if available)
const lastFile = 'MEATLOAF MANIACS.PRG';
const fileSize = '1.44 MB'; // Replace with real size if available
const transferSpeed = '250 KB/s'; // Replace with real speed if available
// Mock image association (replace with real logic if available)
const imageUrl = lastFile.endsWith('.d64') ? '/assets/floppy.png' : undefined;
return ( return (
<div className="p-4 space-y-4"> <div className="p-4 space-y-4">
@ -128,25 +134,41 @@ export default function StatusPage({ config, setConfig }: StatusPageProps) {
<div className="w-2 h-2 rounded-full bg-green-500" /> <div className="w-2 h-2 rounded-full bg-green-500" />
</div> </div>
<div className="grid grid-cols-2 gap-4 mb-4"> {/* New device info cards */}
<div className="bg-neutral-50 rounded-lg p-3"> <div className="mb-4">
<div className="text-xs text-neutral-500">Bytes Read</div> <div className="bg-neutral-50 rounded-lg p-3 flex flex-col items-start justify-center w-full mb-2">
<div className="text-lg font-medium">{stats.bytesRead}</div> <div className="text-xs text-neutral-500 mb-1">Last File</div>
<div className="text-sm font-medium break-all w-full text-left">{lastFile}</div>
</div> </div>
<div className="bg-neutral-50 rounded-lg p-3"> <div className="flex flex-row justify-between gap-4 w-full">
<div className="text-xs text-neutral-500">Bytes Written</div> <div className="bg-neutral-50 rounded-lg p-3 flex-1 flex flex-col items-start justify-center">
<div className="text-lg font-medium">{stats.bytesWritten}</div> <div className="text-xs text-neutral-500 mb-1">Size</div>
</div> <div className="text-sm font-medium">{fileSize}</div>
<div className="bg-neutral-50 rounded-lg p-3"> </div>
<div className="text-xs text-neutral-500">Operations</div> <div className="bg-neutral-50 rounded-lg p-3 flex-1 flex flex-col items-end justify-center">
<div className="text-lg font-medium">{stats.operations}</div> <div className="text-xs text-neutral-500 mb-1">Transfer Speed</div>
</div> <div className="text-sm font-medium">{transferSpeed}</div>
<div className="bg-neutral-50 rounded-lg p-3"> </div>
<div className="text-xs text-neutral-500">Errors</div>
<div className="text-lg font-medium text-green-600">{stats.errors}</div>
</div> </div>
</div> </div>
{/* Progress bar (shows when loading) */}
{loading && (
<div className="w-full h-3 bg-neutral-200 rounded overflow-hidden mb-4">
<div
className="h-3 bg-blue-500 transition-all"
style={{ width: `${progress * 100}%` }}
/>
</div>
)}
{/* Image placeholder if associated */}
{imageUrl && (
<div className="w-full mb-4">
<ImageWithFallback src={imageUrl} alt="Media image" className="w-full h-32 object-contain rounded shadow bg-neutral-100" />
</div>
)}
{/* Media switch buttons if media set is detected */} {/* Media switch buttons if media set is detected */}
{(() => { {(() => {
// Media set detection logic (copied from DeviceDetailOverlay) // Media set detection logic (copied from DeviceDetailOverlay)