Move settings to modals & better modal handling (#194)

* feat(ui): Add other session handling route and modal

* feat(ui): Add dedicated update route and refactor update dialog state management

* feat(ui): Add local authentication route

* refactor(ui): Remove LocalAuthPasswordDialog component and clean up related code

* refactor(ui): Remove OtherSessionConnectedModal component

* feat(ui): Add dedicated mount route and refactor mount media dialog

* refactor(ui): Simplify Escape key navigation in device route

* refactor(ui): Add TODO comments for future URL-based state migration

* refactor(ui): Migrate settings and update routes to dedicated routes

This commit introduces a comprehensive refactoring of the UI routing and state management:
- Removed sidebar-based settings view
- Replaced global modal state with URL-based routing
- Added dedicated routes for settings, including general, security, and update sections
- Simplified modal and sidebar interactions
- Improved animation and transition handling using motion library
- Removed deprecated components and simplified route structure

* fix(ui): Add TODO comment for modal session interaction

* refactor(ui): Move USB configuration to new settings setup

This commit introduces several improvements to the USB configuration workflow:
- Refactored USB configuration dialog component
- Simplified USB config state management
- Moved USB configuration to hardware settings route
- Updated JSON-RPC type definitions
- Cleaned up unused imports and components
- Improved error handling and notifications

* refactor(ui): Replace react-router-dom navigation with custom navigation hook

This commit introduces a new custom navigation hook `useDeviceUiNavigation` to replace direct usage of `useNavigate` across multiple components:
- Removed direct `useNavigate` imports in various components
- Added `navigateTo` method from new navigation hook
- Updated navigation calls in ActionBar, MountPopover, UpdateInProgressStatusCard, and other routes
- Simplified navigation logic and prepared for potential future navigation enhancements
- Removed console logs and unnecessary comments

* refactor(ui): Remove unused react-router-dom import

Clean up unnecessary import of `useNavigate` from react-router-dom in device settings route

* feat(ui): Improve mobile navigation and scrolling in device settings

* refactor(ui): Reorganize device access and security settings

This commit introduces several changes to the device access and security settings:
- Renamed "Security" section to "Access" in settings navigation
- Moved local authentication routes from security to access
- Removed deprecated security settings route
- Added new route for device access settings with cloud and local authentication management
- Updated cloud URL and adoption logic to be part of the access settings
- Simplified routing and component structure for better user experience

* fix(ui): Update logout button hover state color

* fix(ui): Adjust device de-registration button size to small

* fix(ui): Update appearance settings section header and description

* 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

* feat(ui): Add dev channel toggle to advanced settings

Move dev channel update option from general settings to advanced settings
- Introduced new state and handler for dev channel toggle
- Removed dev channel option from general settings route
- Added dev channel toggle in advanced settings with error handling

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,
@@ -15,19 +15,15 @@ import {
 } from "react-icons/lu";
 import { useJsonRpc } from "@/hooks/useJsonRpc";
 import notifications from "../../notifications";
-import MountMediaModal from "../MountMediaDialog";
 import { useClose } from "@headlessui/react";
+import { useLocation } from "react-router-dom";
+import { useDeviceUiNavigation } from "@/hooks/useAppNavigation";
 
 const MountPopopover = forwardRef<HTMLDivElement, object>((_props, ref) => {
   const diskDataChannelStats = useRTCStore(state => state.diskDataChannelStats);
   const [send] = useJsonRpc();
-  const {
-    remoteVirtualMediaState,
-    isMountMediaDialogOpen,
-    setModalView,
-    setIsMountMediaDialogOpen,
-    setRemoteVirtualMediaState,
-  } = useMountMediaStore();
+  const { remoteVirtualMediaState, setModalView, setRemoteVirtualMediaState } =
+    useMountMediaStore();
 
   const bytesSentPerSecond = useMemo(() => {
     if (diskDataChannelStats.size < 2) return null;
@@ -78,7 +74,7 @@ const MountPopopover = forwardRef<HTMLDivElement, object>((_props, ref) => {
           <div className="inline-block">
             <Card>
               <div className="p-1">
-                <PlusCircleIcon className="w-4 h-4 text-blue-700 shrink-0 dark:text-white" />
+                <PlusCircleIcon className="h-4 w-4 shrink-0 text-blue-700 dark:text-white" />
               </div>
             </Card>
           </div>
@@ -103,20 +99,25 @@ const MountPopopover = forwardRef<HTMLDivElement, object>((_props, ref) => {
             <div className="space-y-1">
               <div className="flex items-center gap-x-2">
                 <LuCheckCheck className="h-5 text-green-500" />
-                <h3 className="text-base font-semibold text-black dark:text-white">Streaming from Browser</h3>
+                <h3 className="text-base font-semibold text-black dark:text-white">
+                  Streaming from Browser
+                </h3>
               </div>
               <Card className="w-auto px-2 py-1">
-                <div className="w-full text-sm text-black truncate dark:text-white">
+                <div className="w-full truncate text-sm text-black dark:text-white">
                   {formatters.truncateMiddle(filename, 50)}
                 </div>
               </Card>
             </div>
-            <div className="flex flex-col items-center my-2 gap-y-2">
+            <div className="my-2 flex flex-col items-center gap-y-2">
               <div className="w-full text-sm text-slate-900 dark:text-slate-100">
                 <div className="flex items-center justify-between">
                   <span>{formatters.bytes(size ?? 0)}</span>
                   <div className="flex items-center gap-x-1">
-                    <LuArrowUpFromLine className="h-4 text-blue-700 dark:text-blue-500" strokeWidth={2} />
+                    <LuArrowUpFromLine
+                      className="h-4 text-blue-700 dark:text-blue-500"
+                      strokeWidth={2}
+                    />
                     <span>
                       {bytesSentPerSecond !== null
                         ? `${formatters.bytes(bytesSentPerSecond)}/s`
@@ -131,33 +132,49 @@ const MountPopopover = forwardRef<HTMLDivElement, object>((_props, ref) => {
       case "HTTP":
         return (
           <div className="">
-            <div className="inline-block mb-0">
+            <div className="mb-0 inline-block">
               <Card>
                 <div className="p-1">
-                  <LuLink className="w-4 h-4 text-blue-700 dark:text-blue-500 shrink-0" />
+                  <LuLink className="h-4 w-4 shrink-0 text-blue-700 dark:text-blue-500" />
                 </div>
               </Card>
             </div>
-            <h3 className="text-base font-semibold text-black dark:text-white">Streaming from URL</h3>
-            <p className="text-sm truncate text-slate-900 dark:text-slate-100">{formatters.truncateMiddle(url, 55)}</p>
-            <p className="text-sm text-slate-900 dark:text-slate-100">{formatters.truncateMiddle(filename, 30)}</p>
-            <p className="text-sm text-slate-900 dark:text-slate-100">{formatters.bytes(size ?? 0)}</p>
+            <h3 className="text-base font-semibold text-black dark:text-white">
+              Streaming from URL
+            </h3>
+            <p className="truncate text-sm text-slate-900 dark:text-slate-100">
+              {formatters.truncateMiddle(url, 55)}
+            </p>
+            <p className="text-sm text-slate-900 dark:text-slate-100">
+              {formatters.truncateMiddle(filename, 30)}
+            </p>
+            <p className="text-sm text-slate-900 dark:text-slate-100">
+              {formatters.bytes(size ?? 0)}
+            </p>
           </div>
         );
       case "Storage":
         return (
           <div className="">
-            <div className="inline-block mb-0">
+            <div className="mb-0 inline-block">
               <Card>
                 <div className="p-1">
-                  <LuRadioReceiver className="w-4 h-4 text-blue-700 dark:text-blue-500 shrink-0" />
+                  <LuRadioReceiver className="h-4 w-4 shrink-0 text-blue-700 dark:text-blue-500" />
                 </div>
               </Card>
             </div>
-            <h3 className="text-base font-semibold text-black dark:text-white">Mounted from JetKVM Storage</h3>
-            <p className="text-sm text-slate-900 dark:text-slate-100">{formatters.truncateMiddle(path, 50)}</p>
-            <p className="text-sm text-slate-900 dark:text-slate-100">{formatters.truncateMiddle(filename, 30)}</p>
-            <p className="text-sm text-slate-900 dark:text-slate-100">{formatters.bytes(size ?? 0)}</p>
+            <h3 className="text-base font-semibold text-black dark:text-white">
+              Mounted from JetKVM Storage
+            </h3>
+            <p className="text-sm text-slate-900 dark:text-slate-100">
+              {formatters.truncateMiddle(path, 50)}
+            </p>
+            <p className="text-sm text-slate-900 dark:text-slate-100">
+              {formatters.truncateMiddle(filename, 30)}
+            </p>
+            <p className="text-sm text-slate-900 dark:text-slate-100">
+              {formatters.bytes(size ?? 0)}
+            </p>
           </div>
         );
       default:
@@ -165,18 +182,21 @@ const MountPopopover = forwardRef<HTMLDivElement, object>((_props, ref) => {
     }
   };
   const close = useClose();
+  const location = useLocation();
 
   useEffect(() => {
     syncRemoteVirtualMediaState();
-  }, [syncRemoteVirtualMediaState, isMountMediaDialogOpen]);
+  }, [syncRemoteVirtualMediaState, location.pathname]);
+
+  const { navigateTo } = useDeviceUiNavigation();
 
   return (
     <GridCard>
-      <div className="p-4 py-3 space-y-4">
+      <div className="space-y-4 p-4 py-3">
         <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."
               />
@@ -185,7 +205,7 @@ const MountPopopover = forwardRef<HTMLDivElement, object>((_props, ref) => {
                 <Card>
                   <div className="flex items-center gap-x-1.5 px-2.5 py-2 text-sm">
                     <ExclamationTriangleIcon className="h-4 text-yellow-500" />
-                    <div className="flex items-center w-full text-black">
+                    <div className="flex w-full items-center text-black">
                       <div>Closing this tab will unmount the image</div>
                     </div>
                   </div>
@@ -193,7 +213,7 @@ const MountPopopover = forwardRef<HTMLDivElement, object>((_props, ref) => {
               ) : null}
 
               <div
-                className="space-y-2 opacity-0 animate-fadeIn"
+                className="animate-fadeIn space-y-2 opacity-0"
                 style={{
                   animationDuration: "0.7s",
                   animationDelay: "0.1s",
@@ -203,7 +223,7 @@ const MountPopopover = forwardRef<HTMLDivElement, object>((_props, ref) => {
                   <div className="group">
                     <Card>
                       <div className="w-full px-4 py-8">
-                        <div className="flex flex-col items-center justify-center h-full text-center">
+                        <div className="flex h-full flex-col items-center justify-center text-center">
                           {renderGridCardContent()}
                         </div>
                       </div>
@@ -211,8 +231,8 @@ const MountPopopover = forwardRef<HTMLDivElement, object>((_props, ref) => {
                   </div>
                 </div>
                 {remoteVirtualMediaState ? (
-                  <div className="flex items-center justify-between text-xs select-none">
-                    <div className="text-white select-none dark:text-slate-300">
+                  <div className="flex select-none items-center justify-between text-xs">
+                    <div className="select-none text-white dark:text-slate-300">
                       <span>Mounted as</span>{" "}
                       <span className="font-semibold">
                         {remoteVirtualMediaState.mode === "Disk" ? "Disk" : "CD-ROM"}
@@ -244,7 +264,10 @@ const MountPopopover = forwardRef<HTMLDivElement, object>((_props, ref) => {
                                 d="M4.99933 0.775635L0 5.77546H10L4.99933 0.775635Z"
                                 fill="currentColor"
                               />
-                              <path d="M10 7.49976H0V9.22453H10V7.49976Z" fill="currentColor" />
+                              <path
+                                d="M10 7.49976H0V9.22453H10V7.49976Z"
+                                fill="currentColor"
+                              />
                             </g>
                             <defs>
                               <clipPath id="clip0_3137_1186">
@@ -261,16 +284,11 @@ const MountPopopover = forwardRef<HTMLDivElement, object>((_props, ref) => {
               </div>
             </div>
           </div>
-
-          <MountMediaModal
-            open={isMountMediaDialogOpen}
-            setOpen={setIsMountMediaDialogOpen}
-          />
         </div>
 
         {!remoteVirtualMediaState && (
           <div
-            className="flex items-center justify-end space-x-2 opacity-0 animate-fadeIn"
+            className="flex animate-fadeIn items-center justify-end space-x-2 opacity-0"
             style={{
               animationDuration: "0.7s",
               animationDelay: "0.2s",
@@ -290,7 +308,7 @@ const MountPopopover = forwardRef<HTMLDivElement, object>((_props, ref) => {
               text="Add New Media"
               onClick={() => {
                 setModalView("mode");
-                setIsMountMediaDialogOpen(true);
+                navigateTo("/mount");
               }}
               LeadingIcon={LuPlus}
             />

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