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/hooks/stores.ts

@@ -20,8 +20,7 @@ const appendStatToMap = <T extends { timestamp: number }>(
 };
 
 // Constants and types
-export type AvailableSidebarViews = "system" | "connection-stats";
-export type AvailableModalViews = "connection-stats" | "settings";
+export type AvailableSidebarViews = "connection-stats";
 export type AvailableTerminalTypes = "kvm" | "serial" | "none";
 
 export interface User {
@@ -47,9 +46,6 @@ interface UIState {
 
   toggleSidebarView: (view: AvailableSidebarViews) => void;
 
-  modalView: AvailableModalViews | null;
-  setModalView: (view: AvailableModalViews | null) => void;
-
   isAttachedVirtualKeyboardVisible: boolean;
   setAttachedVirtualKeyboardVisibility: (enabled: boolean) => void;
 
@@ -79,9 +75,6 @@ export const useUiStore = create<UIState>(set => ({
       }
     }),
 
-  modalView: null,
-  setModalView: view => set({ modalView: view }),
-
   isAttachedVirtualKeyboardVisible: true,
   setAttachedVirtualKeyboardVisibility: enabled =>
     set({ isAttachedVirtualKeyboardVisible: enabled }),
@@ -303,7 +296,8 @@ export const useSettingsStore = create(
         dim_after: 10000,
         off_after: 50000,
       },
-      setBacklightSettings: (settings: BacklightSettings) => set({ backlightSettings: settings }),
+      setBacklightSettings: (settings: BacklightSettings) =>
+        set({ backlightSettings: settings }),
     }),
     {
       name: "settings",
@@ -484,8 +478,6 @@ export interface UpdateState {
     | "updateCompleted"
     | "error";
   setModalView: (view: UpdateState["modalView"]) => void;
-  isUpdateDialogOpen: boolean;
-  setIsUpdateDialogOpen: (isOpen: boolean) => void;
   setUpdateErrorMessage: (errorMessage: string) => void;
   updateErrorMessage: string | null;
 }
@@ -520,16 +512,12 @@ export const useUpdateStore = create<UpdateState>(set => ({
     set({ updateDialogHasBeenMinimized: hasBeenMinimized }),
   modalView: "loading",
   setModalView: view => set({ modalView: view }),
-  isUpdateDialogOpen: false,
-  setIsUpdateDialogOpen: isOpen => set({ isUpdateDialogOpen: isOpen }),
   updateErrorMessage: null,
   setUpdateErrorMessage: errorMessage => set({ updateErrorMessage: errorMessage }),
 }));
 
 interface UsbConfigModalState {
-  modalView:
-      | "updateUsbConfig"
-      | "updateUsbConfigSuccess";
+  modalView: "updateUsbConfig" | "updateUsbConfigSuccess";
   errorMessage: string | null;
   setModalView: (view: UsbConfigModalState["modalView"]) => void;
   setErrorMessage: (message: string | null) => void;
@@ -558,14 +546,10 @@ interface LocalAuthModalState {
     | "creationSuccess"
     | "deleteSuccess"
     | "updateSuccess";
-  errorMessage: string | null;
   setModalView: (view: LocalAuthModalState["modalView"]) => void;
-  setErrorMessage: (message: string | null) => void;
 }
 
 export const useLocalAuthModalStore = create<LocalAuthModalState>(set => ({
   modalView: "createPassword",
-  errorMessage: null,
   setModalView: view => set({ modalView: view }),
-  setErrorMessage: message => set({ errorMessage: message }),
 }));

ui/src/hooks/useAppNavigation.ts

@@ -0,0 +1,58 @@
+import { useNavigate, useParams, NavigateOptions } from "react-router-dom";
+import { isOnDevice } from "../main";
+import { useCallback, useMemo } from "react";
+
+/**
+ * Hook that provides context-aware navigation and path generation
+ * that works in both cloud and device modes.
+ *
+ * In cloud mode, paths are prefixed with /devices/:id
+ * In device mode, paths start from the root
+ * Relative paths (starting with . or ..) are preserved in both modes
+ * Supports all React Router navigation options
+ */
+export function useDeviceUiNavigation() {
+  const navigate = useNavigate();
+  const params = useParams();
+
+  // Get the device ID from params
+  const deviceId = useMemo(() => params.id, [params.id]);
+
+  // Function to generate the correct path
+  const getPath = useCallback(
+    (path: string): string => {
+      // Check if it's a relative path (starts with . or ..)
+      const isRelativePath = path.startsWith(".") || path === "";
+
+      // If it's a relative path, don't modify it
+      if (isRelativePath) return path;
+
+      // Ensure absolute path starts with a slash
+      const normalizedPath = path.startsWith("/") ? path : `/${path}`;
+
+      if (isOnDevice) {
+        return normalizedPath;
+      } else {
+        if (!deviceId) {
+          console.error("No device ID found in params when generating path");
+          throw new Error("No device ID found in params when generating path");
+        }
+        return `/devices/${deviceId}${normalizedPath}`;
+      }
+    },
+    [deviceId],
+  );
+
+  // Function to navigate to the correct path with all options
+  const navigateTo = useCallback(
+    (path: string, options?: NavigateOptions) => {
+      navigate(getPath(path), options);
+    },
+    [getPath, navigate],
+  );
+
+  return {
+    navigateTo,
+    getPath,
+  };
+}

ui/src/hooks/useJsonRpc.ts

@@ -8,17 +8,25 @@ export interface JsonRpcRequest {
   id: number | string;
 }
 
-type JsonRpcResponse =
-  | {
-      jsonrpc: string;
-      result: boolean | number | object | string | [];
-      id: string | number;
-    }
-  | {
-      jsonrpc: string;
-      error: { code: number; data?: string; message: string };
-      id: string | number;
-    };
+export interface JsonRpcError {
+  code: number;
+  data?: string;
+  message: string;
+}
+
+export interface JsonRpcSuccessResponse {
+  jsonrpc: string;
+  result: boolean | number | object | string | [];
+  id: string | number;
+}
+
+export interface JsonRpcErrorResponse {
+  jsonrpc: string;
+  error: JsonRpcError;
+  id: string | number;
+}
+
+export type JsonRpcResponse = JsonRpcSuccessResponse | JsonRpcErrorResponse;
 
 const callbackStore = new Map<number | string, (resp: JsonRpcResponse) => void>();
 let requestCounter = 0;