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">
<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) => (
<button
key={index}
onClick={() => switchMedia(index)}
className={`px-3 py-1.5 rounded-lg text-sm ${
deviceData.url === file
? 'bg-blue-600 text-white'
: 'bg-neutral-100 text-neutral-700 hover:bg-neutral-200'
}`}
>
Disk {index + 1}
</button>
))}
{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)}
className={`px-3 py-1.5 rounded-lg text-sm ${
deviceData.url === file
? 'bg-blue-600 text-white'
: 'bg-neutral-100 text-neutral-700 hover:bg-neutral-200'
}`}
>
{`${index + 1}: ${title}`}
</button>
);
})}
</div>
</div>
)}

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

@ -162,25 +162,29 @@ export default function StatusPage({ config, setConfig }: StatusPageProps) {
}
return (
<div className="flex flex-wrap gap-2 mt-2">
{mediaSet.map((file, idx) => (
<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'}`}
onClick={e => {
e.stopPropagation();
if (setConfig) {
const newConfig = JSON.parse(JSON.stringify(config));
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);
{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'}`}
onClick={e => {
e.stopPropagation();
if (setConfig) {
const newConfig = JSON.parse(JSON.stringify(config));
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}
</button>
))}
}}
>
{`${idx + 1}: ${title}`}
</button>
);
})}
</div>
);
})()}