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

feat: enhance headings with icons for improved UI consistency across pages

Browse Source
This commit is contained in:
Jaime Idolpx 2026-06-09 18:49:42 -04:00
parent 2cae71f8a8
commit b491279ff2
5 changed files with 20 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,5 +1,5 @@
import { useEffect, useState } from 'react'; import { useEffect, useState } from 'react';
import { Printer, HardDrive, Network, Box, ChevronRight, RefreshCw, FolderOpen, Computer } from 'lucide-react'; import { Printer, HardDrive, Network, Box, ChevronRight, RefreshCw, FolderOpen, Computer, Cable, CassetteTape, Plug } from 'lucide-react';
import DeviceDetailOverlay from './DeviceDetailOverlay'; import DeviceDetailOverlay from './DeviceDetailOverlay';
import MediaBrowser from './MediaBrowser'; import MediaBrowser from './MediaBrowser';
import { toast } from 'sonner'; import { toast } from 'sonner';
@ -135,7 +135,7 @@ export default function DevicesPage({ config, setConfig, openDeviceId, onClearOp
return ( return (
<div className="p-4"> <div className="p-4">
{/* Host Settings section moved from GeneralPage */} {/* Host Settings section moved from GeneralPage */}
<h2 className="text-sm text-neutral-500 mb-2">Host Settings</h2> <h2 className="text-sm text-neutral-500 mb-2 flex items-center gap-2"><Computer className="w-4 h-4" /> Host Settings</h2>
<div className="bg-white border border-neutral-200 rounded-lg divide-y divide-neutral-200 mb-6"> <div className="bg-white border border-neutral-200 rounded-lg divide-y divide-neutral-200 mb-6">
<div className="p-4"> <div className="p-4">
<label className="text-sm text-neutral-500 block mb-2">Model</label> <label className="text-sm text-neutral-500 block mb-2">Model</label>
@ -195,7 +195,7 @@ export default function DevicesPage({ config, setConfig, openDeviceId, onClearOp
</div> </div>
</div> </div>
<div className="flex items-center justify-between mb-3"> <div className="flex items-center justify-between mb-3">
<h2 className="text-sm text-neutral-500">IEC Devices</h2> <h2 className="text-sm text-neutral-500 flex items-center gap-2"><Cable className="w-4 h-4" /> IEC Devices</h2>
<button <button
onClick={rescanBus} onClick={rescanBus}
disabled={isScanning} disabled={isScanning}
@ -267,7 +267,7 @@ export default function DevicesPage({ config, setConfig, openDeviceId, onClearOp
{/* ── Cassette ── */} {/* ── Cassette ── */}
<h2 className="text-sm text-neutral-500 pt-4">Cassette</h2> <h2 className="text-sm text-neutral-500 pt-4 flex items-center gap-2"><CassetteTape className="w-4 h-4" /> Cassette</h2>
<div className="bg-white border border-neutral-200 rounded-lg divide-y divide-neutral-200"> <div className="bg-white border border-neutral-200 rounded-lg divide-y divide-neutral-200">
<div className="p-4 flex items-center justify-between"> <div className="p-4 flex items-center justify-between">
<label className="text-sm text-neutral-500">Enabled</label> <label className="text-sm text-neutral-500">Enabled</label>
@ -314,7 +314,7 @@ export default function DevicesPage({ config, setConfig, openDeviceId, onClearOp
)} )}
{/* ── Hardware ── */} {/* ── Hardware ── */}
<h2 className="text-sm text-neutral-500 pt-4">User Port</h2> <h2 className="text-sm text-neutral-500 pt-4 flex items-center gap-2"><Plug className="w-4 h-4" /> User Port</h2>
<div className="bg-white border border-neutral-200 rounded-lg divide-y divide-neutral-200"> <div className="bg-white border border-neutral-200 rounded-lg divide-y divide-neutral-200">
<div className="p-4 flex items-center justify-between"> <div className="p-4 flex items-center justify-between">
<label className="text-sm text-neutral-500">User Port Enabled</label> <label className="text-sm text-neutral-500">User Port Enabled</label>

3
src/app/components/GeneralPage.tsx
View File

@ -1,4 +1,5 @@
import { useEffect, useState } from 'react'; import { useEffect, useState } from 'react';
import { Settings } from 'lucide-react';
import { getFileContents } from '../webdav'; import { getFileContents } from '../webdav';
interface GeneralPageProps { interface GeneralPageProps {
@ -41,7 +42,7 @@ export default function GeneralPage({ config, setConfig }: GeneralPageProps) {
return ( return (
<div className="p-4 space-y-4"> <div className="p-4 space-y-4">
<h2 className="text-sm text-neutral-500">General Settings</h2> <h2 className="text-sm text-neutral-500 flex items-center gap-2"><Settings className="w-4 h-4" /> General Settings</h2>
<div className="bg-white border border-neutral-200 rounded-lg divide-y divide-neutral-200"> <div className="bg-white border border-neutral-200 rounded-lg divide-y divide-neutral-200">
<div className="p-4"> <div className="p-4">

14
src/app/components/IECPage.tsx
View File

@ -1,5 +1,5 @@
import { useState } from 'react'; import { useState } from 'react';
import { FolderOpen } from 'lucide-react'; import { Cable, Code2, Cpu, FolderOpen, Link, List, Zap } from 'lucide-react';
import MediaBrowser from './MediaBrowser'; import MediaBrowser from './MediaBrowser';
interface IECPageProps { interface IECPageProps {
@ -26,7 +26,7 @@ export default function IECPage({ config, setConfig }: IECPageProps) {
return ( return (
<div className="p-4 space-y-4"> <div className="p-4 space-y-4">
<h2 className="text-sm text-neutral-500">IEC Settings</h2> <h2 className="text-sm text-neutral-500 flex items-center gap-2"><Cable className="w-4 h-4" /> IEC Settings</h2>
<div className="bg-white border border-neutral-200 rounded-lg divide-y divide-neutral-200"> <div className="bg-white border border-neutral-200 rounded-lg divide-y divide-neutral-200">
<div className="p-4 flex items-center justify-between"> <div className="p-4 flex items-center justify-between">
@ -108,7 +108,7 @@ export default function IECPage({ config, setConfig }: IECPageProps) {
)} )}
</div> </div>
<h2 className="text-sm text-neutral-500 pt-4">Drive ROM</h2> <h2 className="text-sm text-neutral-500 pt-4 flex items-center gap-2"><Cpu className="w-4 h-4" /> Drive ROM</h2>
<div className="bg-white border border-neutral-200 rounded-lg divide-y divide-neutral-200"> <div className="bg-white border border-neutral-200 rounded-lg divide-y divide-neutral-200">
<div className="p-4 flex items-center justify-between"> <div className="p-4 flex items-center justify-between">
@ -169,7 +169,7 @@ export default function IECPage({ config, setConfig }: IECPageProps) {
/> />
)} )}
<h2 className="text-sm text-neutral-500 pt-4">Directory Settings</h2> <h2 className="text-sm text-neutral-500 pt-4 flex items-center gap-2"><List className="w-4 h-4" /> Directory Settings</h2>
<div className="bg-white border border-neutral-200 rounded-lg divide-y divide-neutral-200"> <div className="bg-white border border-neutral-200 rounded-lg divide-y divide-neutral-200">
{Object.entries(iec.directory || {}).map(([key, value]) => ( {Object.entries(iec.directory || {}).map(([key, value]) => (
@ -202,7 +202,7 @@ export default function IECPage({ config, setConfig }: IECPageProps) {
))} ))}
</div> </div>
<h2 className="text-sm text-neutral-500 pt-4">Hardware Fastloaders</h2> <h2 className="text-sm text-neutral-500 pt-4 flex items-center gap-2"><Zap className="w-4 h-4" /> Hardware Fastloaders</h2>
<div className="bg-white border border-neutral-200 rounded-lg divide-y divide-neutral-200"> <div className="bg-white border border-neutral-200 rounded-lg divide-y divide-neutral-200">
<div className="p-3 bg-neutral-50"> <div className="p-3 bg-neutral-50">
@ -252,7 +252,7 @@ export default function IECPage({ config, setConfig }: IECPageProps) {
))} ))}
</div> </div>
<h2 className="text-sm text-neutral-500 pt-4">Software Fastloaders</h2> <h2 className="text-sm text-neutral-500 pt-4 flex items-center gap-2"><Code2 className="w-4 h-4" /> Software Fastloaders</h2>
<div className="bg-white border border-neutral-200 rounded-lg divide-y divide-neutral-200"> <div className="bg-white border border-neutral-200 rounded-lg divide-y divide-neutral-200">
{Object.entries(iec.fastloaders?.software || {}).map(([key, value]) => ( {Object.entries(iec.fastloaders?.software || {}).map(([key, value]) => (
@ -276,7 +276,7 @@ export default function IECPage({ config, setConfig }: IECPageProps) {
))} ))}
</div> </div>
<h2 className="text-sm text-neutral-500 pt-4">Chainloaders</h2> <h2 className="text-sm text-neutral-500 pt-4 flex items-center gap-2"><Link className="w-4 h-4" /> Chainloaders</h2>
<div className="bg-white border border-neutral-200 rounded-lg divide-y divide-neutral-200"> <div className="bg-white border border-neutral-200 rounded-lg divide-y divide-neutral-200">
{Object.entries(iec.chainloaders || {}).map(([key, value]) => ( {Object.entries(iec.chainloaders || {}).map(([key, value]) => (

8
src/app/components/NetworkPage.tsx
View File

@ -1,5 +1,5 @@
import { useState } from 'react'; import { useState } from 'react';
import { Wifi, Trash2, Scan } from 'lucide-react'; import { Bluetooth, Globe, Wifi, Trash2, Scan } from 'lucide-react';
import WiFiScanOverlay from './WiFiScanOverlay'; import WiFiScanOverlay from './WiFiScanOverlay';
import { toast } from 'sonner'; import { toast } from 'sonner';
import { useWs } from '../ws'; import { useWs } from '../ws';
@ -51,7 +51,7 @@ export default function NetworkPage({ config, setConfig }: NetworkPageProps) {
return ( return (
<div className="p-4 space-y-4"> <div className="p-4 space-y-4">
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<h2 className="text-sm text-neutral-500">Known WiFi Networks</h2> <h2 className="text-sm text-neutral-500 flex items-center gap-2"><Wifi className="w-4 h-4" /> Known WiFi Networks</h2>
<button <button
onClick={() => { wsSend('scan'); setShowWiFiScan(true); }} onClick={() => { wsSend('scan'); setShowWiFiScan(true); }}
className="flex items-center gap-1 px-3 py-1.5 bg-blue-600 text-white text-sm rounded-lg" className="flex items-center gap-1 px-3 py-1.5 bg-blue-600 text-white text-sm rounded-lg"
@ -110,7 +110,7 @@ export default function NetworkPage({ config, setConfig }: NetworkPageProps) {
/> />
)} )}
<h2 className="text-sm text-neutral-500 pt-4">Network</h2> <h2 className="text-sm text-neutral-500 pt-4 flex items-center gap-2"><Globe className="w-4 h-4" /> Network</h2>
<div className="bg-white border border-neutral-200 rounded-lg divide-y divide-neutral-200"> <div className="bg-white border border-neutral-200 rounded-lg divide-y divide-neutral-200">
<div className="p-4"> <div className="p-4">
@ -214,7 +214,7 @@ export default function NetworkPage({ config, setConfig }: NetworkPageProps) {
</div> </div>
</div> </div>
<h2 className="text-sm text-neutral-500 pt-4">Bluetooth</h2> <h2 className="text-sm text-neutral-500 pt-4 flex items-center gap-2"><Bluetooth className="w-4 h-4" /> Bluetooth</h2>
<div className="bg-white border border-neutral-200 rounded-lg divide-y divide-neutral-200"> <div className="bg-white border border-neutral-200 rounded-lg divide-y divide-neutral-200">
<div className="p-4"> <div className="p-4">

4
src/app/components/ToolsPage.tsx
View File

@ -269,7 +269,7 @@ export default function ToolsPage({ config }: ToolsPageProps) {
</div> </div>
<h2 className="text-sm text-neutral-500">System Tools</h2> <h2 className="text-sm text-neutral-500 flex items-center gap-2"><Wrench className="w-4 h-4" /> System Tools</h2>
<div className="bg-white border border-neutral-200 rounded-lg divide-y divide-neutral-200"> <div className="bg-white border border-neutral-200 rounded-lg divide-y divide-neutral-200">
<button <button
@ -312,7 +312,7 @@ export default function ToolsPage({ config }: ToolsPageProps) {
</button> </button>
</div> </div>
<h2 className="text-sm text-neutral-500 pt-4">Storage Tools</h2> <h2 className="text-sm text-neutral-500 pt-4 flex items-center gap-2"><HardDrive className="w-4 h-4" /> Storage Tools</h2>
<div className="bg-white border border-neutral-200 rounded-lg divide-y divide-neutral-200"> <div className="bg-white border border-neutral-200 rounded-lg divide-y divide-neutral-200">
<button <button