From b491279ff27cdc4d509b27a704af821db81c35ad Mon Sep 17 00:00:00 2001
From: Jaime Idolpx <jaime@idolpx.com>
Date: Tue, 9 Jun 2026 18:49:42 -0400
Subject: [PATCH] feat: enhance headings with icons for improved UI consistency
 across pages

---
 src/app/components/DevicesPage.tsx | 10 +++++-----
 src/app/components/GeneralPage.tsx |  3 ++-
 src/app/components/IECPage.tsx     | 14 +++++++-------
 src/app/components/NetworkPage.tsx |  8 ++++----
 src/app/components/ToolsPage.tsx   |  4 ++--
 5 files changed, 20 insertions(+), 19 deletions(-)

diff --git a/src/app/components/DevicesPage.tsx b/src/app/components/DevicesPage.tsx
index 1a8527a..fd7fdd3 100644
--- a/src/app/components/DevicesPage.tsx
+++ b/src/app/components/DevicesPage.tsx
@@ -1,5 +1,5 @@
 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 MediaBrowser from './MediaBrowser';
 import { toast } from 'sonner';
@@ -135,7 +135,7 @@ export default function DevicesPage({ config, setConfig, openDeviceId, onClearOp
   return (
     <div className="p-4">
       {/* 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="p-4">
           <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 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
           onClick={rescanBus}
           disabled={isScanning}
@@ -267,7 +267,7 @@ export default function DevicesPage({ config, setConfig, openDeviceId, onClearOp
 
 
       {/* ── 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="p-4 flex items-center justify-between">
           <label className="text-sm text-neutral-500">Enabled</label>
@@ -314,7 +314,7 @@ export default function DevicesPage({ config, setConfig, openDeviceId, onClearOp
       )}
 
       {/* ── 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="p-4 flex items-center justify-between">
           <label className="text-sm text-neutral-500">User Port Enabled</label>
diff --git a/src/app/components/GeneralPage.tsx b/src/app/components/GeneralPage.tsx
index 498eab7..2203b09 100644
--- a/src/app/components/GeneralPage.tsx
+++ b/src/app/components/GeneralPage.tsx
@@ -1,4 +1,5 @@
 import { useEffect, useState } from 'react';
+import { Settings } from 'lucide-react';
 import { getFileContents } from '../webdav';
 
 interface GeneralPageProps {
@@ -41,7 +42,7 @@ export default function GeneralPage({ config, setConfig }: GeneralPageProps) {
 
   return (
     <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="p-4">
diff --git a/src/app/components/IECPage.tsx b/src/app/components/IECPage.tsx
index ab19375..7f67b31 100644
--- a/src/app/components/IECPage.tsx
+++ b/src/app/components/IECPage.tsx
@@ -1,5 +1,5 @@
 import { useState } from 'react';
-import { FolderOpen } from 'lucide-react';
+import { Cable, Code2, Cpu, FolderOpen, Link, List, Zap } from 'lucide-react';
 import MediaBrowser from './MediaBrowser';
 
 interface IECPageProps {
@@ -26,7 +26,7 @@ export default function IECPage({ config, setConfig }: IECPageProps) {
 
   return (
     <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="p-4 flex items-center justify-between">
@@ -108,7 +108,7 @@ export default function IECPage({ config, setConfig }: IECPageProps) {
       )}
       </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="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">
         {Object.entries(iec.directory || {}).map(([key, value]) => (
@@ -202,7 +202,7 @@ export default function IECPage({ config, setConfig }: IECPageProps) {
         ))}
       </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="p-3 bg-neutral-50">
@@ -252,7 +252,7 @@ export default function IECPage({ config, setConfig }: IECPageProps) {
         ))}
       </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">
         {Object.entries(iec.fastloaders?.software || {}).map(([key, value]) => (
@@ -276,7 +276,7 @@ export default function IECPage({ config, setConfig }: IECPageProps) {
         ))}
       </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">
         {Object.entries(iec.chainloaders || {}).map(([key, value]) => (
diff --git a/src/app/components/NetworkPage.tsx b/src/app/components/NetworkPage.tsx
index 3e98b61..16aa4ef 100644
--- a/src/app/components/NetworkPage.tsx
+++ b/src/app/components/NetworkPage.tsx
@@ -1,5 +1,5 @@
 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 { toast } from 'sonner';
 import { useWs } from '../ws';
@@ -51,7 +51,7 @@ export default function NetworkPage({ config, setConfig }: NetworkPageProps) {
   return (
     <div className="p-4 space-y-4">
       <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
           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"
@@ -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="p-4">
@@ -214,7 +214,7 @@ export default function NetworkPage({ config, setConfig }: NetworkPageProps) {
         </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="p-4">
diff --git a/src/app/components/ToolsPage.tsx b/src/app/components/ToolsPage.tsx
index 65b73e5..2012e71 100644
--- a/src/app/components/ToolsPage.tsx
+++ b/src/app/components/ToolsPage.tsx
@@ -269,7 +269,7 @@ export default function ToolsPage({ config }: ToolsPageProps) {
 
       </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">
         <button
@@ -312,7 +312,7 @@ export default function ToolsPage({ config }: ToolsPageProps) {
         </button>
       </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">
         <button