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">
<label className="text-sm text-neutral-500 block mb-2">Media Set</label>
<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
key={index}
onClick={() => switchMedia(index)}
@ -336,9 +342,10 @@ export default function DeviceDetailOverlay({
: 'bg-neutral-100 text-neutral-700 hover:bg-neutral-200'
}`}
>
Disk {index + 1}
{`${index + 1}: ${title}`}
</button>
))}
);
})}
</div>
</div>
)}

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

@ -162,7 +162,10 @@ export default function StatusPage({ config, setConfig }: StatusPageProps) {
}
return (
<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
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'}`}
@ -178,9 +181,10 @@ export default function StatusPage({ config, setConfig }: StatusPageProps) {
}
}}
>
{idx + 1}
{`${idx + 1}: ${title}`}
</button>
))}
);
})}
</div>
);
})()}