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

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>
   );

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>
+  );
+}

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"
       />

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"
       />

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"
       />

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"
                 />

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."
               />

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"
               />

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."
             />

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 && (

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"
       />

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"
       />

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"
       />

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"
       />

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"
       />

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"
         />