Polish desktop profile menu interactions

desktop/src/app/AppShell.tsx

@@ -12,6 +12,7 @@ import { AppTopChrome } from "@/app/AppTopChrome";
 import { useAppNavigation } from "@/app/navigation/useAppNavigation";
 import { useBackForwardControls } from "@/app/navigation/useBackForwardControls";
 import { useMarkAsReadShortcuts } from "@/app/useMarkAsReadShortcuts";
+import { useSettingsShortcuts } from "@/app/useSettingsShortcuts";
 import { useWebviewZoomShortcuts } from "@/app/useWebviewZoomShortcuts";
 import {
   channelsQueryKey,
@@ -170,6 +171,9 @@ export function AppShell() {
   const [settingsSection, setSettingsSection] = React.useState<SettingsSection>(
     DEFAULT_SETTINGS_SECTION,
   );
+  const [settingsMode, setSettingsMode] = React.useState<
+    "profile" | "preferences"
+  >("preferences");
 
   const [isChannelManagementOpen, setIsChannelManagementOpen] =
     React.useState(false);
@@ -404,8 +408,9 @@ export function AppShell() {
   );
 
   const handleOpenSettings = React.useCallback(
-    (section: SettingsSection = DEFAULT_SETTINGS_SECTION) => {
+    (section: SettingsSection = "appearance") => {
       setIsChannelManagementOpen(false);
+      setSettingsMode(section === "profile" ? "profile" : "preferences");
       setSettingsSection(section);
       setSettingsOpen(true);
     },
@@ -586,32 +591,12 @@ export function AppShell() {
     settingsOpen,
   ]);
 
-  React.useLayoutEffect(() => {
-    function handleKeyDown(event: KeyboardEvent) {
-      const isSettingsShortcut =
-        (event.key === "," || event.code === "Comma") &&
-        hasPrimaryShortcutModifier(event) &&
-        !event.altKey &&
-        !event.shiftKey;
-
-      if (!isSettingsShortcut) {
-        return;
-      }
-
-      event.preventDefault();
-      if (settingsOpen) {
-        handleCloseSettings();
-        return;
-      }
-
-      handleOpenSettings();
-    }
-
-    window.addEventListener("keydown", handleKeyDown);
-    return () => {
-      window.removeEventListener("keydown", handleKeyDown);
-    };
-  }, [handleCloseSettings, handleOpenSettings, settingsOpen]);
+  useSettingsShortcuts({
+    mode: settingsMode,
+    onClose: handleCloseSettings,
+    onOpenSettings: handleOpenSettings,
+    open: settingsOpen,
+  });
 
   useMarkAsReadShortcuts({
     activeChannelId: activeChannel?.id ?? null,
@@ -795,9 +780,6 @@ export function AppShell() {
                   onSetUserStatus={(text, emoji) =>
                     setUserStatusMutation.mutate({ text, emoji })
                   }
-                  onClearUserStatus={() =>
-                    setUserStatusMutation.mutate({ text: "", emoji: "" })
-                  }
                   profile={profileQuery.data}
                   selfUserStatus={
                     deferredPubkey
@@ -847,6 +829,7 @@ export function AppShell() {
                       notificationSettings={notificationSettings.settings}
                       onClose={handleCloseSettings}
                       onSectionChange={setSettingsSection}
+                      mode={settingsMode}
                       onSetDesktopNotificationsEnabled={
                         notificationSettings.setDesktopEnabled
                       }

desktop/src/app/useSettingsShortcuts.ts

@@ -0,0 +1,66 @@
+import * as React from "react";
+
+import { hasPrimaryShortcutModifier } from "@/shared/lib/platform";
+
+const EDITABLE_SHORTCUT_TARGET_SELECTOR =
+  'input, textarea, select, [contenteditable="true"]';
+
+type SettingsMode = "profile" | "preferences";
+
+type UseSettingsShortcutsOptions = {
+  mode: SettingsMode;
+  onClose: () => void;
+  onOpenSettings: (section?: "profile") => void;
+  open: boolean;
+};
+
+function isEditableShortcutTarget(event: KeyboardEvent) {
+  const target = event.target;
+  return (
+    target instanceof Element &&
+    target.closest(EDITABLE_SHORTCUT_TARGET_SELECTOR)
+  );
+}
+
+export function useSettingsShortcuts({
+  mode,
+  onClose,
+  onOpenSettings,
+  open,
+}: UseSettingsShortcutsOptions) {
+  React.useLayoutEffect(() => {
+    function handleKeyDown(event: KeyboardEvent) {
+      const hasSettingsShortcutModifiers =
+        hasPrimaryShortcutModifier(event) && !event.altKey && !event.shiftKey;
+      const isSettingsShortcut =
+        hasSettingsShortcutModifiers &&
+        (event.key === "," || event.code === "Comma");
+      const isProfileShortcut =
+        hasSettingsShortcutModifiers &&
+        event.key.toLowerCase() === "u" &&
+        !isEditableShortcutTarget(event);
+
+      if (!isSettingsShortcut && !isProfileShortcut) {
+        return;
+      }
+
+      event.preventDefault();
+      if (open && (!isProfileShortcut || mode === "profile")) {
+        onClose();
+        return;
+      }
+
+      if (isProfileShortcut) {
+        onOpenSettings("profile");
+        return;
+      }
+
+      onOpenSettings();
+    }
+
+    window.addEventListener("keydown", handleKeyDown);
+    return () => {
+      window.removeEventListener("keydown", handleKeyDown);
+    };
+  }, [mode, onClose, onOpenSettings, open]);
+}