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/routes/devices.$id.settings.general._index.tsx

@@ -0,0 +1,108 @@
+import { SettingsPageHeader } from "../components/SettingsPageheader";
+
+import { SettingsItem } from "./devices.$id.settings";
+import { useCallback, useState } from "react";
+import { useEffect } from "react";
+import { SystemVersionInfo } from "./devices.$id.settings.general.update";
+import { useJsonRpc } from "@/hooks/useJsonRpc";
+import { Button } from "../components/Button";
+import notifications from "../notifications";
+import Checkbox from "../components/Checkbox";
+import { useDeviceUiNavigation } from "../hooks/useAppNavigation";
+
+export default function SettingsGeneralRoute() {
+  const [send] = useJsonRpc();
+  const { navigateTo } = useDeviceUiNavigation();
+
+  const [autoUpdate, setAutoUpdate] = useState(true);
+  const [currentVersions, setCurrentVersions] = useState<{
+    appVersion: string;
+    systemVersion: string;
+  } | null>(null);
+
+  const getCurrentVersions = useCallback(() => {
+    send("getUpdateStatus", {}, resp => {
+      if ("error" in resp) return;
+      const result = resp.result as SystemVersionInfo;
+      setCurrentVersions({
+        appVersion: result.local.appVersion,
+        systemVersion: result.local.systemVersion,
+      });
+    });
+  }, [send]);
+
+  useEffect(() => {
+    getCurrentVersions();
+    send("getAutoUpdateState", {}, resp => {
+      if ("error" in resp) return;
+      setAutoUpdate(resp.result as boolean);
+    });
+  }, [getCurrentVersions, send]);
+
+  const handleAutoUpdateChange = (enabled: boolean) => {
+    send("setAutoUpdateState", { enabled }, resp => {
+      if ("error" in resp) {
+        notifications.error(
+          `Failed to set auto-update: ${resp.error.data || "Unknown error"}`,
+        );
+        return;
+      }
+      setAutoUpdate(enabled);
+    });
+  };
+
+  return (
+    <div className="space-y-4">
+      <SettingsPageHeader
+        title="General"
+        description="Configure device settings and update preferences"
+      />
+
+      <div className="space-y-4">
+        <div className="space-y-4 pb-2">
+          <div className="mt-2 flex items-center justify-between gap-x-2">
+            <SettingsItem
+              title="Check for Updates"
+              description={
+                currentVersions ? (
+                  <>
+                    App: {currentVersions.appVersion}
+                    <br />
+                    System: {currentVersions.systemVersion}
+                  </>
+                ) : (
+                  <>
+                    App: Loading...
+                    <br />
+                    System: Loading...
+                  </>
+                )
+              }
+            />
+            <div>
+              <Button
+                size="SM"
+                theme="light"
+                text="Check for Updates"
+                onClick={() => navigateTo("./update")}
+              />
+            </div>
+          </div>
+          <div className="space-y-4">
+            <SettingsItem
+              title="Auto Update"
+              description="Automatically update the device to the latest version"
+            >
+              <Checkbox
+                checked={autoUpdate}
+                onChange={e => {
+                  handleAutoUpdateChange(e.target.checked);
+                }}
+              />
+            </SettingsItem>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}