From 7d0919ff323851ec674e01c90d179ceb61b9029f Mon Sep 17 00:00:00 2001
From: Adam Shiervani <adam.shiervani@gmail.com>
Date: Thu, 27 Feb 2025 15:47:33 +0100
Subject: [PATCH] refactor(ui): Replace SectionHeader with new
 SettingsPageHeader and SettingsSectionHeader components

This commit introduces two new header components for settings pages:
- Created SettingsPageHeader for main page headers
- Created SettingsSectionHeader for subsection headers
- Replaced all existing SectionHeader imports with new components
- Updated styling and type definitions to support more flexible header rendering
---
 ...{SectionHeader.tsx => SettingsPageheader.tsx} |  4 ++--
 ui/src/components/SettingsSectionHeader.tsx      | 16 ++++++++++++++++
 ui/src/components/extensions/ATXPowerControl.tsx |  4 ++--
 ui/src/components/extensions/DCPowerControl.tsx  |  4 ++--
 ui/src/components/extensions/SerialConsole.tsx   |  4 ++--
 ui/src/components/popovers/ExtensionPopover.tsx  |  4 ++--
 ui/src/components/popovers/MountPopover.tsx      |  4 ++--
 ui/src/components/popovers/PasteModal.tsx        |  4 ++--
 ui/src/components/popovers/WakeOnLan/Index.tsx   |  4 ++--
 .../devices.$id.settings.access._index.tsx       | 11 ++++++-----
 ui/src/routes/devices.$id.settings.advanced.tsx  |  4 ++--
 .../routes/devices.$id.settings.appearance.tsx   |  4 ++--
 .../devices.$id.settings.general._index.tsx      |  4 ++--
 ui/src/routes/devices.$id.settings.hardware.tsx  |  4 ++--
 ui/src/routes/devices.$id.settings.mouse.tsx     |  4 ++--
 ui/src/routes/devices.$id.settings.video.tsx     |  4 ++--
 16 files changed, 50 insertions(+), 33 deletions(-)
 rename ui/src/components/{SectionHeader.tsx => SettingsPageheader.tsx} (69%)
 create mode 100644 ui/src/components/SettingsSectionHeader.tsx

diff --git a/ui/src/components/SectionHeader.tsx b/ui/src/components/SettingsPageheader.tsx
similarity index 69%
rename from ui/src/components/SectionHeader.tsx
rename to ui/src/components/SettingsPageheader.tsx
index 4c5d896..a7e2621 100644
--- a/ui/src/components/SectionHeader.tsx
+++ b/ui/src/components/SettingsPageheader.tsx
@@ -1,6 +1,6 @@
 import { ReactNode } from "react";
 
-export function SectionHeader({
+export function SettingsPageHeader({
   title,
   description,
 }: {
@@ -9,7 +9,7 @@ export function SectionHeader({
 }) {
   return (
     <div className="select-none">
-      <h2 className=" text-xl font-bold text-black dark:text-white">{title}</h2>
+      <h2 className=" text-xl font-extrabold text-black dark:text-white">{title}</h2>
       <div className="text-sm text-black dark:text-slate-300">{description}</div>
     </div>
   );
diff --git a/ui/src/components/SettingsSectionHeader.tsx b/ui/src/components/SettingsSectionHeader.tsx
new file mode 100644
index 0000000..d5543fc
--- /dev/null
+++ b/ui/src/components/SettingsSectionHeader.tsx
@@ -0,0 +1,16 @@
+import { ReactNode } from "react";
+
+export function SettingsSectionHeader({
+  title,
+  description,
+}: {
+  title: string | ReactNode;
+  description: string | ReactNode;
+}) {
+  return (
+    <div className="select-none">
+      <h2 className="text-lg font-bold text-black dark:text-white">{title}</h2>
+      <div className="text-sm text-slate-700 dark:text-slate-300">{description}</div>
+    </div>
+  );
+}
diff --git a/ui/src/components/extensions/ATXPowerControl.tsx b/ui/src/components/extensions/ATXPowerControl.tsx
index 2d1323f..62b3bfb 100644
--- a/ui/src/components/extensions/ATXPowerControl.tsx
+++ b/ui/src/components/extensions/ATXPowerControl.tsx
@@ -1,7 +1,7 @@
 import { Button } from "@components/Button";
 import { LuHardDrive, LuPower, LuRotateCcw } from "react-icons/lu";
 import Card from "@components/Card";
-import { SectionHeader } from "@components/SectionHeader";
+import { SettingsPageHeader } from "@components/SettingsPageheader";
 import { useEffect, useState } from "react";
 import notifications from "@/notifications";
 import { useJsonRpc } from "../../hooks/useJsonRpc";
@@ -95,7 +95,7 @@ export function ATXPowerControl() {
 
   return (
     <div className="space-y-4">
-      <SectionHeader
+      <SettingsPageHeader
         title="ATX Power Control"
         description="Control your ATX power settings"
       />
diff --git a/ui/src/components/extensions/DCPowerControl.tsx b/ui/src/components/extensions/DCPowerControl.tsx
index e4ba29d..e903939 100644
--- a/ui/src/components/extensions/DCPowerControl.tsx
+++ b/ui/src/components/extensions/DCPowerControl.tsx
@@ -1,7 +1,7 @@
 import { Button } from "@components/Button";
 import { LuPower } from "react-icons/lu";
 import Card from "@components/Card";
-import { SectionHeader } from "@components/SectionHeader";
+import { SettingsPageHeader } from "@components/SettingsPageheader";
 import FieldLabel from "../FieldLabel";
 import { useJsonRpc } from "@/hooks/useJsonRpc";
 import { useCallback, useEffect, useState } from "react";
@@ -52,7 +52,7 @@ export function DCPowerControl() {
 
   return (
     <div className="space-y-4">
-      <SectionHeader
+      <SettingsPageHeader
         title="DC Power Control"
         description="Control your DC power settings"
       />
diff --git a/ui/src/components/extensions/SerialConsole.tsx b/ui/src/components/extensions/SerialConsole.tsx
index c57d364..238a3aa 100644
--- a/ui/src/components/extensions/SerialConsole.tsx
+++ b/ui/src/components/extensions/SerialConsole.tsx
@@ -1,7 +1,7 @@
 import { Button } from "@components/Button";
 import { LuTerminal } from "react-icons/lu";
 import Card from "@components/Card";
-import { SectionHeader } from "@components/SectionHeader";
+import { SettingsPageHeader } from "@components/SettingsPageheader";
 import { SelectMenuBasic } from "../SelectMenuBasic";
 import { useJsonRpc } from "@/hooks/useJsonRpc";
 import { useEffect, useState } from "react";
@@ -52,7 +52,7 @@ export function SerialConsole() {
 
   return (
     <div className="space-y-4">
-      <SectionHeader
+      <SettingsPageHeader
         title="Serial Console"
         description="Configure your serial console settings"
       />
diff --git a/ui/src/components/popovers/ExtensionPopover.tsx b/ui/src/components/popovers/ExtensionPopover.tsx
index 9438bdb..e8141aa 100644
--- a/ui/src/components/popovers/ExtensionPopover.tsx
+++ b/ui/src/components/popovers/ExtensionPopover.tsx
@@ -1,7 +1,7 @@
 import { useEffect, useState } from "react";
 import { useJsonRpc } from "@/hooks/useJsonRpc";
 import Card, { GridCard } from "@components/Card";
-import { SectionHeader } from "@components/SectionHeader";
+import { SettingsPageHeader } from "@components/SettingsPageheader";
 import { Button } from "../Button";
 import { LuPower, LuTerminal, LuPlugZap } from "react-icons/lu";
 import { ATXPowerControl } from "@components/extensions/ATXPowerControl";
@@ -106,7 +106,7 @@ export default function ExtensionPopover() {
             ) : (
               // Extensions List View
               <div className="space-y-4">
-                <SectionHeader
+                <SettingsPageHeader
                   title="Extensions"
                   description="Load and manage your extensions"
                 />
diff --git a/ui/src/components/popovers/MountPopover.tsx b/ui/src/components/popovers/MountPopover.tsx
index e39a750..41dbbd6 100644
--- a/ui/src/components/popovers/MountPopover.tsx
+++ b/ui/src/components/popovers/MountPopover.tsx
@@ -5,7 +5,7 @@ import { PlusCircleIcon } from "@heroicons/react/20/solid";
 import { useMemo, forwardRef, useEffect, useCallback } from "react";
 import { formatters } from "@/utils";
 import { RemoteVirtualMediaState, useMountMediaStore, useRTCStore } from "@/hooks/stores";
-import { SectionHeader } from "@components/SectionHeader";
+import { SettingsPageHeader } from "@components/SettingsPageheader";
 import {
   LuArrowUpFromLine,
   LuCheckCheck,
@@ -196,7 +196,7 @@ const MountPopopover = forwardRef<HTMLDivElement, object>((_props, ref) => {
         <div ref={ref} className="grid h-full grid-rows-headerBody">
           <div className="h-full space-y-4 ">
             <div className="space-y-4">
-              <SectionHeader
+              <SettingsPageHeader
                 title="Virtual Media"
                 description="Mount an image to boot from or install an operating system."
               />
diff --git a/ui/src/components/popovers/PasteModal.tsx b/ui/src/components/popovers/PasteModal.tsx
index 661c48d..ce93934 100644
--- a/ui/src/components/popovers/PasteModal.tsx
+++ b/ui/src/components/popovers/PasteModal.tsx
@@ -1,7 +1,7 @@
 import { Button } from "@components/Button";
 import { GridCard } from "@components/Card";
 import { TextAreaWithLabel } from "@components/TextArea";
-import { SectionHeader } from "@components/SectionHeader";
+import { SettingsPageHeader } from "@components/SettingsPageheader";
 import { useJsonRpc } from "@/hooks/useJsonRpc";
 import { useHidStore, useRTCStore, useUiStore } from "@/hooks/stores";
 import notifications from "../../notifications";
@@ -75,7 +75,7 @@ export default function PasteModal() {
         <div className="grid h-full grid-rows-headerBody">
           <div className="h-full space-y-4">
             <div className="space-y-4">
-              <SectionHeader
+              <SettingsPageHeader
                 title="Paste text"
                 description="Paste text from your client to the remote host"
               />
diff --git a/ui/src/components/popovers/WakeOnLan/Index.tsx b/ui/src/components/popovers/WakeOnLan/Index.tsx
index bd0f33b..8b13a0f 100644
--- a/ui/src/components/popovers/WakeOnLan/Index.tsx
+++ b/ui/src/components/popovers/WakeOnLan/Index.tsx
@@ -1,5 +1,5 @@
 import { GridCard } from "@components/Card";
-import { SectionHeader } from "@components/SectionHeader";
+import { SettingsPageHeader } from "@components/SettingsPageheader";
 import { useJsonRpc } from "@/hooks/useJsonRpc";
 import { useRTCStore, useUiStore } from "@/hooks/stores";
 import notifications from "@/notifications";
@@ -102,7 +102,7 @@ export default function WakeOnLanModal() {
       <div className="p-4 py-3 space-y-4">
         <div className="grid h-full grid-rows-headerBody">
           <div className="space-y-4">
-            <SectionHeader
+            <SettingsPageHeader
               title="Wake On LAN"
               description="Send a Magic Packet to wake up a remote device."
             />
diff --git a/ui/src/routes/devices.$id.settings.access._index.tsx b/ui/src/routes/devices.$id.settings.access._index.tsx
index f9881ed..a72a35b 100644
--- a/ui/src/routes/devices.$id.settings.access._index.tsx
+++ b/ui/src/routes/devices.$id.settings.access._index.tsx
@@ -1,4 +1,4 @@
-import { SectionHeader } from "@/components/SectionHeader";
+import { SettingsPageHeader } from "@components/SettingsPageheader";
 import { SettingsItem } from "./devices.$id.settings";
 import { useLoaderData } from "react-router-dom";
 import { Button, LinkButton } from "../components/Button";
@@ -14,6 +14,7 @@ import { useCallback, useEffect, useState } from "react";
 import { useJsonRpc } from "../hooks/useJsonRpc";
 import { InputFieldWithLabel } from "../components/InputField";
 import { SelectMenuBasic } from "../components/SelectMenuBasic";
+import { SettingsSectionHeader } from "../components/SettingsSectionHeader";
 
 export const loader = async () => {
   const status = await api
@@ -140,13 +141,13 @@ export default function SettingsAccessIndexRoute() {
 
   return (
     <div className="space-y-4">
-      <SectionHeader
+      <SettingsPageHeader
         title="Access"
         description="Manage the Access Control of the device"
       />
 
       <div className="space-y-4">
-        <SectionHeader
+        <SettingsSectionHeader
           title="Local"
           description="Manage the mode of local access to the device"
         />
@@ -193,9 +194,9 @@ export default function SettingsAccessIndexRoute() {
       </div>
       <div className="h-px w-full bg-slate-800/10 dark:bg-slate-300/20" />
       <div className="space-y-4">
-        <SectionHeader
+        <SettingsSectionHeader
           title="Remote"
-          description="Manage the mode of remote access to the device"
+          description="Manage the mode of Remote access to the device"
         />
 
         {isOnDevice && (
diff --git a/ui/src/routes/devices.$id.settings.advanced.tsx b/ui/src/routes/devices.$id.settings.advanced.tsx
index a46c8c4..c311040 100644
--- a/ui/src/routes/devices.$id.settings.advanced.tsx
+++ b/ui/src/routes/devices.$id.settings.advanced.tsx
@@ -1,6 +1,6 @@
 import { SettingsItem } from "./devices.$id.settings";
 
-import { SectionHeader } from "../components/SectionHeader";
+import { SettingsPageHeader } from "../components/SettingsPageheader";
 import Checkbox from "../components/Checkbox";
 
 import { useJsonRpc } from "../hooks/useJsonRpc";
@@ -105,7 +105,7 @@ export default function SettingsAdvancedRoute() {
 
   return (
     <div className="space-y-4">
-      <SectionHeader
+      <SettingsPageHeader
         title="Advanced"
         description="Access additional settings for troubleshooting and customization"
       />
diff --git a/ui/src/routes/devices.$id.settings.appearance.tsx b/ui/src/routes/devices.$id.settings.appearance.tsx
index 4fa99c4..11a9536 100644
--- a/ui/src/routes/devices.$id.settings.appearance.tsx
+++ b/ui/src/routes/devices.$id.settings.appearance.tsx
@@ -1,5 +1,5 @@
 import { useCallback, useState } from "react";
-import { SectionHeader } from "../components/SectionHeader";
+import { SettingsPageHeader } from "../components/SettingsPageheader";
 import { SelectMenuBasic } from "../components/SelectMenuBasic";
 import { SettingsItem } from "./devices.$id.settings";
 
@@ -28,7 +28,7 @@ export default function SettingsAppearanceRoute() {
 
   return (
     <div className="space-y-4">
-      <SectionHeader
+      <SettingsPageHeader
         title="Appearance"
         description="Customize the look and feel of your JetKVM interface"
       />
diff --git a/ui/src/routes/devices.$id.settings.general._index.tsx b/ui/src/routes/devices.$id.settings.general._index.tsx
index 585028e..75fa7b6 100644
--- a/ui/src/routes/devices.$id.settings.general._index.tsx
+++ b/ui/src/routes/devices.$id.settings.general._index.tsx
@@ -1,4 +1,4 @@
-import { SectionHeader } from "../components/SectionHeader";
+import { SettingsPageHeader } from "../components/SettingsPageheader";
 
 import { SettingsItem } from "./devices.$id.settings";
 import { useCallback, useState } from "react";
@@ -71,7 +71,7 @@ export default function SettingsGeneralRoute() {
 
   return (
     <div className="space-y-4">
-      <SectionHeader
+      <SettingsPageHeader
         title="General"
         description="Configure device settings and update preferences"
       />
diff --git a/ui/src/routes/devices.$id.settings.hardware.tsx b/ui/src/routes/devices.$id.settings.hardware.tsx
index 44c7848..5e306a0 100644
--- a/ui/src/routes/devices.$id.settings.hardware.tsx
+++ b/ui/src/routes/devices.$id.settings.hardware.tsx
@@ -1,4 +1,4 @@
-import { SectionHeader } from "@components/SectionHeader";
+import { SettingsPageHeader } from "@components/SettingsPageheader";
 import { SettingsItem } from "@routes/devices.$id.settings";
 import { BacklightSettings, UsbConfigState, useSettingsStore } from "@/hooks/stores";
 import { useCallback, useEffect, useMemo, useState } from "react";
@@ -176,7 +176,7 @@ export default function SettingsHardwareRoute() {
 
   return (
     <div className="space-y-4">
-      <SectionHeader
+      <SettingsPageHeader
         title="Hardware"
         description="Configure display settings and hardware options for your JetKVM device"
       />
diff --git a/ui/src/routes/devices.$id.settings.mouse.tsx b/ui/src/routes/devices.$id.settings.mouse.tsx
index 76c810c..e7dc4b8 100644
--- a/ui/src/routes/devices.$id.settings.mouse.tsx
+++ b/ui/src/routes/devices.$id.settings.mouse.tsx
@@ -1,4 +1,4 @@
-import { SectionHeader } from "@/components/SectionHeader";
+import { SettingsPageHeader } from "@components/SettingsPageheader";
 import { SettingsItem } from "./devices.$id.settings";
 import { Checkbox } from "@/components/Checkbox";
 import { GridCard } from "@/components/Card";
@@ -39,7 +39,7 @@ export default function SettingsKeyboardMouseRoute() {
 
   return (
     <div className="space-y-4">
-      <SectionHeader
+      <SettingsPageHeader
         title="Mouse"
         description="Configure cursor behavior and interaction settings for your device"
       />
diff --git a/ui/src/routes/devices.$id.settings.video.tsx b/ui/src/routes/devices.$id.settings.video.tsx
index a77ba61..3dd65fe 100644
--- a/ui/src/routes/devices.$id.settings.video.tsx
+++ b/ui/src/routes/devices.$id.settings.video.tsx
@@ -1,4 +1,4 @@
-import { SectionHeader } from "@/components/SectionHeader";
+import { SettingsPageHeader } from "@components/SettingsPageheader";
 import { SettingsItem } from "./devices.$id.settings";
 import { Button } from "@/components/Button";
 import { TextAreaWithLabel } from "@/components/TextArea";
@@ -105,7 +105,7 @@ export default function SettingsVideoRoute() {
   return (
     <div className="space-y-3">
       <div className="space-y-4">
-        <SectionHeader
+        <SettingsPageHeader
           title="Video"
           description="Configure display settings and EDID for optimal compatibility"
         />