frontend/aria: hotkey nav

src/packages/frontend/account/account-preferences-appearance.tsx

@@ -27,6 +27,8 @@ import {
   get_dark_mode_config,
 } from "./dark-mode";
 import { EditorSettingsColorScheme } from "./editor-settings/color-schemes";
+import { HotkeyDelayTest } from "./hotkey-delay-test";
+import { HotkeySelector } from "./hotkey-selector";
 import { I18NSelector, I18N_MESSAGE, I18N_TITLE } from "./i18n-selector";
 import { OtherSettings } from "./other-settings";
 import { TerminalSettings } from "./terminal-settings";
@@ -241,6 +243,78 @@ export function AccountPreferencesAppearance() {
             </HelpIcon>
           </div>
         </LabeledRow>
+        <LabeledRow
+          label={
+            <>
+              <Icon name="flash" /> Quick Navigation Hotkey
+            </>
+          }
+        >
+          <HotkeySelector
+            value={other_settings.get("quick_nav_hotkey") ?? "shift+shift"}
+            onChange={(value) => on_change("quick_nav_hotkey", value)}
+            style={{ width: 200 }}
+          />
+        </LabeledRow>
+        {(other_settings.get("quick_nav_hotkey") ?? "shift+shift") ===
+          "shift+shift" && (
+          <LabeledRow
+            label={
+              <>
+                <Icon name="clock" /> Hotkey Delay (milliseconds)
+              </>
+            }
+          >
+            <div style={{ display: "flex", gap: 16, alignItems: "stretch" }}>
+              <div
+                style={{
+                  flex: "1 1 auto",
+                  display: "flex",
+                  alignItems: "center",
+                }}
+              >
+                <Slider
+                  min={100}
+                  max={800}
+                  step={100}
+                  value={other_settings.get("quick_nav_hotkey_delay") ?? 300}
+                  onChange={(value) =>
+                    on_change("quick_nav_hotkey_delay", value)
+                  }
+                  style={{ flex: 1 }}
+                  marks={Object.fromEntries(
+                    Array.from({ length: 8 }, (_, i) => (i + 1) * 100).map(
+                      (ms) => [ms, `${ms}ms`],
+                    ),
+                  )}
+                />
+                <span
+                  style={{
+                    minWidth: 60,
+                    textAlign: "right",
+                    fontWeight: 500,
+                    color: COLORS.GRAY_M,
+                    marginLeft: 12,
+                  }}
+                >
+                  {other_settings.get("quick_nav_hotkey_delay") ?? 300}ms
+                </span>
+              </div>
+              <div
+                style={{
+                  flex: "0 1 auto",
+                  display: "flex",
+                  flexDirection: "column",
+                  gap: 8,
+                }}
+              >
+                <HotkeyDelayTest
+                  delayMs={other_settings.get("quick_nav_hotkey_delay") ?? 300}
+                />
+              </div>
+            </div>
+          </LabeledRow>
+        )}
         <Switch
           checked={!!other_settings.get("auto_focus")}
           onChange={(e) => on_change("auto_focus", e.target.checked)}

src/packages/frontend/account/account-preferences-config.ts

@@ -0,0 +1,158 @@
+/*
+ *  This file is part of CoCalc: Copyright © 2025 Sagemath, Inc.
+ *  License: MS-RSL – see LICENSE.md for details
+ */
+
+/**
+ * Shared configuration for account menu items and preferences sub-tabs
+ * Used by both account-page.tsx and hotkey quick navigation
+ */
+
+export interface AccountMenuItem {
+  id: string; // Menu item ID (e.g., "subscriptions", "preferences-appearance")
+  key: string; // Tree node key (e.g., "account-subscriptions")
+  label: string; // Display name
+  icon?: string; // Icon name (or undefined for special components like AIAvatar)
+  useAIAvatar?: boolean; // Special case for AI preferences
+  isPreferencesSubTab?: boolean; // True if this is a sub-tab under Preferences
+}
+
+/**
+ * Preferences sub-tabs (nested under "Preferences")
+ */
+export const PREFERENCES_SUB_TABS: AccountMenuItem[] = [
+  {
+    id: "preferences-appearance",
+    key: "account-preferences-appearance",
+    label: "Appearance",
+    icon: "eye",
+    isPreferencesSubTab: true,
+  },
+  {
+    id: "preferences-editor",
+    key: "account-preferences-editor",
+    label: "Editor",
+    icon: "edit",
+    isPreferencesSubTab: true,
+  },
+  {
+    id: "preferences-keyboard",
+    key: "account-preferences-keyboard",
+    label: "Keyboard",
+    icon: "keyboard",
+    isPreferencesSubTab: true,
+  },
+  {
+    id: "preferences-ai",
+    key: "account-preferences-ai",
+    label: "AI",
+    useAIAvatar: true,
+    isPreferencesSubTab: true,
+  },
+  {
+    id: "preferences-communication",
+    key: "account-preferences-communication",
+    label: "Communication",
+    icon: "comments",
+    isPreferencesSubTab: true,
+  },
+  {
+    id: "preferences-keys",
+    key: "account-preferences-keys",
+    label: "SSH and API Keys",
+    icon: "key",
+    isPreferencesSubTab: true,
+  },
+  {
+    id: "preferences-other",
+    key: "account-preferences-other",
+    label: "Other",
+    icon: "sliders",
+    isPreferencesSubTab: true,
+  },
+];
+
+/**
+ * Main account menu items (top-level, excluding preferences which are nested)
+ */
+export const ACCOUNT_MAIN_MENU_ITEMS: AccountMenuItem[] = [
+  {
+    id: "index",
+    key: "account-index",
+    label: "Settings",
+    icon: "settings",
+  },
+  {
+    id: "profile",
+    key: "account-profile",
+    label: "Profile",
+    icon: "user",
+  },
+  // Preferences is handled separately as it has sub-items
+  {
+    id: "subscriptions",
+    key: "account-subscriptions",
+    label: "Subscriptions",
+    icon: "calendar",
+  },
+  {
+    id: "licenses",
+    key: "account-licenses",
+    label: "Licenses",
+    icon: "key",
+  },
+  {
+    id: "payg",
+    key: "account-payg",
+    label: "Pay as you Go",
+    icon: "line-chart",
+  },
+  {
+    id: "upgrades",
+    key: "account-upgrades",
+    label: "Upgrades",
+    icon: "arrow-circle-up",
+  },
+  {
+    id: "purchases",
+    key: "account-purchases",
+    label: "Purchases",
+    icon: "money-check",
+  },
+  {
+    id: "payments",
+    key: "account-payments",
+    label: "Payments",
+    icon: "credit-card",
+  },
+  {
+    id: "payment-methods",
+    key: "account-payment-methods",
+    label: "Payment Methods",
+    icon: "credit-card",
+  },
+  {
+    id: "statements",
+    key: "account-statements",
+    label: "Statements",
+    icon: "calendar-week",
+  },
+  {
+    id: "cloud-filesystems",
+    key: "account-cloud-filesystems",
+    label: "Cloud Filesystems",
+    icon: "cloud",
+  },
+  {
+    id: "public-paths",
+    key: "account-public-paths",
+    label: "Public Paths",
+    icon: "share-square",
+  },
+  {
+    id: "support",
+    key: "account-support",
+    label: "Support",
+    icon: "question-circle",
+  },
+];