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

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

@ -326,19 +326,26 @@ 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) => {
<button // Attempt to extract a title from the filename, fallback to filename
key={index} // Example: /path/to/Game Disk.d64 or /path/to/disk1.d64
onClick={() => switchMedia(index)} const fileName = file.split('/').pop() || file;
className={`px-3 py-1.5 rounded-lg text-sm ${ // If you have a title mapping, replace this logic
deviceData.url === file const title = fileName.replace(/\.[^.]+$/, '');
? 'bg-blue-600 text-white' return (
: 'bg-neutral-100 text-neutral-700 hover:bg-neutral-200' <button
}`} key={index}
> onClick={() => switchMedia(index)}
Disk {index + 1} className={`px-3 py-1.5 rounded-lg text-sm ${
</button> deviceData.url === file
))} ? 'bg-blue-600 text-white'
: 'bg-neutral-100 text-neutral-700 hover:bg-neutral-200'
}`}
>
{`${index + 1}: ${title}`}
</button>
);
})}
</div> </div>
</div> </div>
)} )}

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

@ -162,25 +162,29 @@ 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) => {
<button const fileName = file.split('/').pop() || file;
key={file} const title = fileName.replace(/\.[^.]+$/, '');
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'}`} return (
onClick={e => { <button
e.stopPropagation(); key={file}
if (setConfig) { 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'}`}
const newConfig = JSON.parse(JSON.stringify(config)); onClick={e => {
let current = newConfig; e.stopPropagation();
if (current.iec && current.iec.devices && current.iec.devices.drive && current.iec.devices.drive[num]) { if (setConfig) {
current.iec.devices.drive[num].url = file; const newConfig = JSON.parse(JSON.stringify(config));
setConfig(newConfig); let current = newConfig;
if (current.iec && current.iec.devices && current.iec.devices.drive && current.iec.devices.drive[num]) {
current.iec.devices.drive[num].url = file;
setConfig(newConfig);
}
} }
} }}
}} >
> {`${idx + 1}: ${title}`}
{idx + 1} </button>
</button> );
))} })}
</div> </div>
); );
})()} })()}