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

style: enhance media button titles in DeviceDetailOverlay and StatusPage for better clarity

Browse Source
This commit is contained in:
Jaime Idolpx 2026-04-14 00:49:54 -04:00
parent c6d382a88d
commit a5627ef860
2 changed files with 42 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
src/app/components/DeviceDetailOverlay.tsx
View File

@ -326,7 +326,13 @@ export default function DeviceDetailOverlay({
<div className="mt-3"> <div className="mt-3">
<label className="text-sm text-neutral-500 block mb-2">Media Set</label> <label className="text-sm text-neutral-500 block mb-2">Media Set</label>
<div className="flex gap-2 flex-wrap"> <div className="flex gap-2 flex-wrap">
{mediaSet.files.slice(0, 5).map((file, index) => ( {mediaSet.files.slice(0, 5).map((file, index) => {
// Attempt to extract a title from the filename, fallback to filename
// Example: /path/to/Game Disk.d64 or /path/to/disk1.d64
const fileName = file.split('/').pop() || file;
// If you have a title mapping, replace this logic
const title = fileName.replace(/\.[^.]+$/, '');
return (
<button <button
key={index} key={index}
onClick={() => switchMedia(index)} onClick={() => switchMedia(index)}
@ -336,9 +342,10 @@ export default function DeviceDetailOverlay({
: 'bg-neutral-100 text-neutral-700 hover:bg-neutral-200' : 'bg-neutral-100 text-neutral-700 hover:bg-neutral-200'
}`} }`}
> >
Disk {index + 1} {`${index + 1}: ${title}`}
</button> </button>
))} );
})}
</div> </div>
</div> </div>
)} )}

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

@ -162,7 +162,10 @@ export default function StatusPage({ config, setConfig }: StatusPageProps) {
} }
return ( return (
<div className="flex flex-wrap gap-2 mt-2"> <div className="flex flex-wrap gap-2 mt-2">
{mediaSet.map((file, idx) => ( {mediaSet.map((file, idx) => {
const fileName = file.split('/').pop() || file;
const title = fileName.replace(/\.[^.]+$/, '');
return (
<button <button
key={file} key={file}
className={`px-2 py-1 rounded text-xs border ${url === file ? 'bg-blue-600 text-white border-blue-600' : 'bg-neutral-100 text-neutral-700 border-neutral-300'}`} className={`px-2 py-1 rounded text-xs border ${url === file ? 'bg-blue-600 text-white border-blue-600' : 'bg-neutral-100 text-neutral-700 border-neutral-300'}`}
@ -178,9 +181,10 @@ export default function StatusPage({ config, setConfig }: StatusPageProps) {
} }
}} }}
> >
{idx + 1} {`${idx + 1}: ${title}`}
</button> </button>
))} );
})}
</div> </div>
); );
})()} })()}