frontend/aria/hotkey: improve dialog …

Author: haraldschilly

src/packages/frontend/account/account-page.tsx

@@ -12,10 +12,7 @@ and configuration.
 
 // cSpell:ignore payg
 
-import type {
-  PreferencesSubTabKey,
-  PreferencesSubTabType,
-} from "@cocalc/util/types/settings";
+import type { PreferencesSubTabKey } from "@cocalc/util/types/settings";
 
 import { Button, Flex, Menu, Space } from "antd";
 import { useEffect, useState } from "react";
@@ -50,42 +47,25 @@ import {
   KUCALC_ON_PREMISES,
 } from "@cocalc/util/db-schema/site-defaults";
 import { COLORS } from "@cocalc/util/theme";
-import { VALID_PREFERENCES_SUB_TYPES } from "@cocalc/util/types/settings";
 import { AccountPreferencesAI } from "./account-preferences-ai";
-import {
-  AccountPreferencesAppearance,
-  APPEARANCE_ICON_NAME,
-} from "./account-preferences-appearance";
-import {
-  AccountPreferencesCommunication,
-  COMMUNICATION_ICON_NAME,
-} from "./account-preferences-communication";
-import {
-  AccountPreferencesEditor,
-  EDITOR_ICON_NAME,
-} from "./account-preferences-editor";
-import {
-  AccountPreferencesKeyboard,
-  KEYBOARD_ICON_NAME,
-} from "./account-preferences-keyboard";
-import {
-  AccountPreferencesOther,
-  OTHER_ICON_NAME,
-} from "./account-preferences-other";
+import { AccountPreferencesAppearance } from "./account-preferences-appearance";
+import { AccountPreferencesCommunication } from "./account-preferences-communication";
+import { PREFERENCES_SUB_TABS } from "./account-preferences-config";
+import { AccountPreferencesEditor } from "./account-preferences-editor";
+import { AccountPreferencesKeyboard } from "./account-preferences-keyboard";
+import { AccountPreferencesOther } from "./account-preferences-other";
 import {
   ACCOUNT_PREFERENCES_ICON_NAME,
   ACCOUNT_PROFILE_ICON_NAME,
   AccountPreferencesProfile,
 } from "./account-preferences-profile";
-import {
-  AccountPreferencesSecurity,
-  KEYS_ICON_NAME,
-} from "./account-preferences-security";
+import { AccountPreferencesSecurity } from "./account-preferences-security";
 import { I18NSelector } from "./i18n-selector";
 import { LicensesPage } from "./licenses/licenses-page";
 import { PublicPaths } from "./public-paths/public-paths";
 import { SettingsOverview } from "./settings-index";
 import { UpgradesPage } from "./upgrades/upgrades-page";
+import { switchAccountPage } from "./util";
 
 export const ACCOUNT_SETTINGS_ICON_NAME: IconName = "settings";
 
@@ -99,17 +79,6 @@ type MenuKey =
   | PreferencesSubTabKey
   | string;
 
-// Utility function to safely create preferences sub-tab key
-function createPreferencesSubTabKey(
-  subTab: string,
-): PreferencesSubTabKey | null {
-  if (VALID_PREFERENCES_SUB_TYPES.includes(subTab as PreferencesSubTabType)) {
-    const validSubTab = subTab as PreferencesSubTabType;
-    return `preferences-${validSubTab}`;
-  }
-  return null;
-}
-
 // give up on trying to load account info and redirect to landing page.
 // Do NOT make too short, since loading account info might takes ~10 seconds, e,g., due
 // to slow network or some backend failure that times and retires involving
@@ -138,49 +107,35 @@ export const AccountPage: React.FC = () => {
   const get_api_key = useTypedRedux("page", "get_api_key");
 
   function handle_select(key: MenuKey): void {
-    switch (key) {
-      case "settings":
-        // Handle settings overview page
-        redux.getActions("account").setState({
-          active_page: "index",
-          active_sub_tab: undefined,
-        });
-        redux.getActions("account").push_state(`/settings/index`);
-        return;
-      case "billing":
+    switchAccountPage(key, redux.getActions("account"), {
+      onBilling: () => {
         redux.getActions("billing").update_customer();
-        break;
-      case "support":
-        break;
-      case "signout":
-        return;
-      case "profile":
-        // Handle profile as standalone page
-        redux.getActions("account").setState({
-          active_page: "profile",
-          active_sub_tab: undefined,
-        });
-        redux.getActions("account").push_state(`/profile`);
-        return;
-    }
+      },
+      onSignout: () => {
+        // Signout does not navigate
+      },
+    });
+  }
 
-    // Handle sub-tabs under preferences
-    if (typeof key === "string" && key.startsWith("preferences-")) {
-      const subTab = key.replace("preferences-", "");
-      const subTabKey = createPreferencesSubTabKey(subTab);
-      if (subTabKey) {
-        redux.getActions("account").setState({
-          active_sub_tab: subTabKey,
-          active_page: "preferences",
-        });
-        // Update URL to settings/preferences/[sub-tab]
-        redux.getActions("account").push_state(`/preferences/${subTab}`);
-      }
-      return;
+  function getPreferencesComponent(tabId: string): React.ReactNode {
+    switch (tabId) {
+      case "preferences-appearance":
+        return <AccountPreferencesAppearance />;
+      case "preferences-editor":
+        return <AccountPreferencesEditor />;
+      case "preferences-keyboard":
+        return <AccountPreferencesKeyboard />;
+      case "preferences-ai":
+        return <AccountPreferencesAI />;
+      case "preferences-communication":
+        return <AccountPreferencesCommunication />;
+      case "preferences-keys":
+        return <AccountPreferencesSecurity />;
+      case "preferences-other":
+        return <AccountPreferencesOther />;
+      default:
+        return null;
     }
-
-    redux.getActions("account").set_active_tab(key);
-    redux.getActions("account").push_state(`/${key}`);
   }
 
   function getTabs(): any[] {
@@ -215,97 +170,25 @@ export const AccountPage: React.FC = () => {
             {intl.formatMessage(labels.preferences)}
           </span>
         ),
-        children: [
-          {
-            key: "preferences-appearance",
-            label: (
+        children: PREFERENCES_SUB_TABS.map((tab) => {
+          const tabLabel = intl.formatMessage(tab.label);
+          return {
+            key: tab.id,
+            label: tab.useAIAvatar ? (
               <span>
-                <Icon name={APPEARANCE_ICON_NAME} />{" "}
-                {intl.formatMessage(labels.appearance)}
+                <AIAvatar size={16} style={{ top: "-5px" }} /> {tabLabel}
               </span>
-            ),
-            children: active_page === "preferences" &&
-              active_sub_tab === "preferences-appearance" && (
-                <AccountPreferencesAppearance />
-              ),
-          },
-          {
-            key: "preferences-editor",
-            label: (
-              <span>
-                <Icon name={EDITOR_ICON_NAME} />{" "}
-                {intl.formatMessage(labels.editor)}
-              </span>
-            ),
-            children: active_page === "preferences" &&
-              active_sub_tab === "preferences-editor" && (
-                <AccountPreferencesEditor />
-              ),
-          },
-          {
-            key: "preferences-keyboard",
-            label: (
-              <span>
-                <Icon name={KEYBOARD_ICON_NAME} />{" "}
-                {intl.formatMessage(labels.keyboard)}
-              </span>
-            ),
-            children: active_page === "preferences" &&
-              active_sub_tab === "preferences-keyboard" && (
-                <AccountPreferencesKeyboard />
-              ),
-          },
-          {
-            key: "preferences-ai",
-            label: (
-              <span>
-                <AIAvatar size={16} style={{ top: "-5px" }} />{" "}
-                {intl.formatMessage(labels.ai)}
-              </span>
-            ),
-            children: active_page === "preferences" &&
-              active_sub_tab === "preferences-ai" && <AccountPreferencesAI />,
-          },
-          {
-            key: "preferences-communication",
-            label: (
-              <span>
-                <Icon name={COMMUNICATION_ICON_NAME} />{" "}
-                {intl.formatMessage(labels.communication)}
-              </span>
-            ),
-            children: active_page === "preferences" &&
-              active_sub_tab === "preferences-communication" && (
-                <AccountPreferencesCommunication />
-              ),
-          },
-          {
-            key: "preferences-keys",
-            label: (
-              <span>
-                <Icon name={KEYS_ICON_NAME} />{" "}
-                {intl.formatMessage(labels.ssh_and_api_keys)}
-              </span>
-            ),
-            children: active_page === "preferences" &&
-              active_sub_tab === "preferences-keys" && (
-                <AccountPreferencesSecurity />
-              ),
-          },
-          {
-            key: "preferences-other",
-            label: (
+            ) : (
               <span>
-                <Icon name={OTHER_ICON_NAME} />{" "}
-                {intl.formatMessage(labels.other)}
+                <Icon name={tab.icon as IconName} /> {tabLabel}
               </span>
             ),
-            children: active_page === "preferences" &&
-              active_sub_tab === "preferences-other" && (
-                <AccountPreferencesOther />
-              ),
-          },
-        ],
+            children:
+              active_page === "preferences" && active_sub_tab === tab.id
+                ? getPreferencesComponent(tab.id)
+                : null,
+          };
+        }),
       },
     ];
     // adds a few conditional tabs
@@ -621,8 +504,12 @@ export const AccountPage: React.FC = () => {
           role="region"
           aria-label={
             active_page === "preferences" && active_sub_tab
-              ? `${titles[active_sub_tab]?.props?.children?.[1] || active_sub_tab} settings`
-              : `${titles[active_page]?.props?.children?.[1] || active_page} settings`
+              ? `${
+                  titles[active_sub_tab]?.props?.children?.[1] || active_sub_tab
+                } settings`
+              : `${
+                  titles[active_page]?.props?.children?.[1] || active_page
+                } settings`
           }
           style={{
             overflow: "auto",

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

@@ -28,7 +28,11 @@ import {
 } from "./dark-mode";
 import { EditorSettingsColorScheme } from "./editor-settings/color-schemes";
 import { HotkeyDelayTest } from "./hotkey-delay-test";
-import { HotkeySelector } from "./hotkey-selector";
+import {
+  DEFAULT_HOTKEY,
+  DEFAULT_HOTKEY_DELAY_MS,
+  HotkeySelector,
+} from "./hotkey-selector";
 import { I18NSelector, I18N_MESSAGE, I18N_TITLE } from "./i18n-selector";
 import { OtherSettings } from "./other-settings";
 import { TerminalSettings } from "./terminal-settings";
@@ -213,6 +217,9 @@ export function AccountPreferencesAppearance() {
   }
 
   function renderUserInterfacePanel(): ReactElement {
+    const quick_nav_hotkey =
+      other_settings.get("quick_nav_hotkey") ?? DEFAULT_HOTKEY;
+
     return (
       <Panel
         size="small"
@@ -251,17 +258,16 @@ export function AccountPreferencesAppearance() {
           }
         >
           <HotkeySelector
-            value={other_settings.get("quick_nav_hotkey") ?? "shift+shift"}
+            value={quick_nav_hotkey}
             onChange={(value) => on_change("quick_nav_hotkey", value)}
             style={{ width: 200 }}
           />
         </LabeledRow>
-        {(other_settings.get("quick_nav_hotkey") ?? "shift+shift") ===
-          "shift+shift" && (
+        {quick_nav_hotkey === "shift+shift" && (
           <LabeledRow
             label={
               <>
-                <Icon name="clock" /> Hotkey Delay (milliseconds)
+                <Icon name="clock" /> Hotkey Delay
               </>
             }
           >
@@ -277,7 +283,10 @@ export function AccountPreferencesAppearance() {
                   min={100}
                   max={800}
                   step={100}
-                  value={other_settings.get("quick_nav_hotkey_delay") ?? 300}
+                  value={
+                    other_settings.get("quick_nav_hotkey_delay") ??
+                    DEFAULT_HOTKEY_DELAY_MS
+                  }
                   onChange={(value) =>
                     on_change("quick_nav_hotkey_delay", value)
                   }
@@ -297,7 +306,9 @@ export function AccountPreferencesAppearance() {
                     marginLeft: 12,
                   }}
                 >
-                  {other_settings.get("quick_nav_hotkey_delay") ?? 300}ms
+                  {other_settings.get("quick_nav_hotkey_delay") ??
+                    DEFAULT_HOTKEY_DELAY_MS}
+                  ms
                 </span>
               </div>
               <div
@@ -309,7 +320,10 @@ export function AccountPreferencesAppearance() {
                 }}
               >
                 <HotkeyDelayTest
-                  delayMs={other_settings.get("quick_nav_hotkey_delay") ?? 300}
+                  delayMs={
+                    other_settings.get("quick_nav_hotkey_delay") ??
+                    DEFAULT_HOTKEY_DELAY_MS
+                  }
                 />
               </div>
             </div>