Move help-related items under one single menu

packages/desktop-client/src/browser-preload.browser.js

@@ -184,10 +184,5 @@ document.addEventListener('keydown', e => {
         window.__actionsForMenu.undo();
       }
     }
-  } else if (e.key === '?') {
-    if (inputFocused(e)) {
-      return;
-    }
-    window.__actionsForMenu.pushModal('keyboard-shortcuts');
   }
 });

packages/desktop-client/src/components/HelpMenu.tsx

@@ -0,0 +1,119 @@
+import { forwardRef, useRef } from 'react';
+import { useHotkeys } from 'react-hotkeys-hook';
+import { Trans, useTranslation } from 'react-i18next';
+import { useDispatch } from 'react-redux';
+import { useLocation } from 'react-router-dom';
+
+import { useToggle } from 'usehooks-ts';
+
+import { pushModal } from 'loot-core/client/actions/modals';
+
+import { SvgHelp } from '../icons/v2/Help';
+
+import { Button } from './common/Button2';
+import { Menu } from './common/Menu';
+import { Popover } from './common/Popover';
+import { SpaceBetween } from './common/SpaceBetween';
+import { View } from './common/View';
+
+type HelpMenuItem = 'docs' | 'keyboard-shortcuts';
+
+type HelpButtonProps = {
+  onPress?: () => void;
+};
+
+const HelpButton = forwardRef<HTMLButtonElement, HelpButtonProps>(
+  ({ onPress }, ref) => {
+    const { t } = useTranslation();
+    const size = 15;
+    return (
+      <View title={t('Get help')}>
+        <Button
+          variant="bare"
+          ref={ref}
+          onPress={onPress}
+          style={{
+            display: 'flex',
+            alignItems: 'center',
+            gap: 4,
+          }}
+        >
+          <SvgHelp width={size} height={size} />
+          <Trans>Help</Trans>
+        </Button>
+      </View>
+    );
+  },
+);
+
+HelpButton.displayName = 'HelpButton';
+
+const getPageDocs = (page: string) => {
+  switch (page) {
+    case '/budget':
+      return 'https://actualbudget.org/docs/getting-started/envelope-budgeting';
+    case '/reports':
+      return 'https://actualbudget.org/docs/reports/';
+    case '/schedules':
+      return 'https://actualbudget.org/docs/schedules';
+    case '/payees':
+      return 'https://actualbudget.org/docs/transactions/payees';
+    case '/rules':
+      return 'https://actualbudget.org/docs/budgeting/rules';
+    case '/settings':
+      return 'https://actualbudget.org/docs/settings';
+    default:
+      // All pages under /accounts, plus any missing pages
+      return 'https://actualbudget.org/docs';
+  }
+};
+
+export const HelpMenu = () => {
+  const { t } = useTranslation();
+  const [isMenuOpen, toggleMenuOpen, setMenuOpen] = useToggle();
+  const menuButtonRef = useRef(null);
+
+  const dispatch = useDispatch();
+  const page = useLocation().pathname;
+
+  const handleItemSelect = (item: HelpMenuItem) => {
+    switch (item) {
+      case 'docs':
+        window.open(getPageDocs(page), '_blank');
+        break;
+      case 'keyboard-shortcuts':
+        dispatch(pushModal('keyboard-shortcuts'));
+        break;
+    }
+  };
+
+  useHotkeys('shift+?', () => setMenuOpen(true));
+
+  return (
+    <SpaceBetween>
+      <HelpButton ref={menuButtonRef} onPress={toggleMenuOpen} />
+
+      <Popover
+        placement="bottom end"
+        offset={8}
+        triggerRef={menuButtonRef}
+        isOpen={isMenuOpen}
+        onOpenChange={() => setMenuOpen(false)}
+      >
+        <Menu
+          onMenuSelect={item => {
+            setMenuOpen(false);
+            handleItemSelect(item);
+          }}
+          items={[
+            {
+              name: 'docs',
+              text: t('Documentation'),
+            },
+            { name: 'keyboard-shortcuts', text: t('Keyboard shortcuts') },
+          ]}
+        />
+      </Popover>
+    </SpaceBetween>
+  );
+};

packages/desktop-client/src/components/LoggedInUser.tsx

@@ -108,6 +108,7 @@ export function LoggedInUser({
       </Button>
 
       <Popover
+        offset={8}
         triggerRef={triggerRef}
         isOpen={menuOpen}
         onOpenChange={() => setMenuOpen(false)}

packages/desktop-client/src/components/ThemeSelector.tsx

@@ -53,6 +53,7 @@ export function ThemeSelector({ style }: ThemeSelectorProps) {
       </Button>
 
       <Popover
+        offset={8}
         triggerRef={triggerRef}
         isOpen={menuOpen}
         onOpenChange={() => setMenuOpen(false)}

packages/desktop-client/src/components/Titlebar.tsx

@@ -29,8 +29,10 @@ import { AnimatedRefresh } from './AnimatedRefresh';
 import { MonthCountSelector } from './budget/MonthCountSelector';
 import { Button } from './common/Button2';
 import { Link } from './common/Link';
+import { SpaceBetween } from './common/SpaceBetween';
 import { Text } from './common/Text';
 import { View } from './common/View';
+import { HelpMenu } from './HelpMenu';
 import { LoggedInUser } from './LoggedInUser';
 import { useServerURL } from './ServerContext';
 import { useSidebar } from './sidebar/SidebarProvider';
@@ -273,7 +275,7 @@ export function Titlebar({ style }: TitlebarProps) {
       style={{
         flexDirection: 'row',
         alignItems: 'center',
-        padding: '0 15px',
+        padding: '0 10px 0 15px',
         height: 36,
         pointerEvents: 'none',
         '& *': {
@@ -332,13 +334,16 @@ export function Titlebar({ style }: TitlebarProps) {
         <Route path="*" element={null} />
       </Routes>
       <View style={{ flex: 1 }} />
-      <UncategorizedButton />
-      {isDevelopmentEnvironment() && !Platform.isPlaywright && (
-        <ThemeSelector style={{ marginLeft: 10 }} />
-      )}
-      <PrivacyButton style={{ marginLeft: 10 }} />
-      {serverURL ? <SyncButton style={{ marginLeft: 10 }} /> : null}
-      <LoggedInUser style={{ marginLeft: 10 }} />
+      <SpaceBetween gap={10}>
+        <UncategorizedButton />
+        {isDevelopmentEnvironment() && !Platform.isPlaywright && (
+          <ThemeSelector />
+        )}
+        <PrivacyButton />
+        {serverURL ? <SyncButton /> : null}
+        <LoggedInUser />
+        <HelpMenu />
+      </SpaceBetween>
     </View>
   );
 }

packages/desktop-client/src/components/modals/KeyboardShortcutModal.tsx

@@ -168,7 +168,7 @@ export function KeyboardShortcutModal() {
             }}
           >
             <View>
-              <Shortcut shortcut="?" description="Show this help dialog" />
+              <Shortcut shortcut="?" description="Open the help menu" />
               <Shortcut
                 shortcut="O"
                 description="Close the current budget and open another"

packages/desktop-client/src/components/sidebar/Sidebar.tsx

@@ -189,7 +189,6 @@ function EditableBudgetName() {
   const items = [
     { name: 'rename', text: t('Rename budget') },
     { name: 'settings', text: t('Settings') },
-    ...(Platform.isBrowser ? [{ name: 'help', text: t('Help') }] : []),
     { name: 'close', text: t('Close file') },
   ];
 

packages/desktop-client/src/icons/v2/Help.tsx

@@ -0,0 +1,19 @@
+import * as React from 'react';
+import type { SVGProps } from 'react';
+export const SvgHelp = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    {...props}
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    viewBox="0 0 24 24"
+    style={{
+      color: 'inherit',
+      ...props.style,
+    }}
+  >
+    <path
+      fill="currentColor"
+      d="M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10zM7.92 9.234v.102a.5.5 0 0 0 .5.5h.997a.499.499 0 0 0 .499-.499c0-1.29.998-1.979 2.34-1.979 1.308 0 2.168.689 2.168 1.67 0 .928-.482 1.359-1.686 1.91l-.344.154C11.379 11.54 11 12.21 11 13.381v.119a.5.5 0 0 0 .5.5h.997a.499.499 0 0 0 .499-.499c0-.516.138-.723.55-.912l.345-.155c1.445-.654 2.529-1.514 2.529-3.39v-.103c0-1.978-1.72-3.441-4.164-3.441-2.478 0-4.336 1.428-4.336 3.734zm2.58 7.757c0 .867.659 1.509 1.491 1.509.85 0 1.509-.642 1.509-1.509 0-.867-.659-1.491-1.509-1.491-.832 0-1.491.624-1.491 1.491z"
+    />
+  </svg>
+);

packages/desktop-client/src/icons/v2/index.ts

@@ -21,6 +21,7 @@ export { SvgDownloadThickBottom } from './DownloadThickBottom';
 export { SvgEditSkull1 } from './EditSkull1';
 export { SvgFavoriteStar } from './FavoriteStar';
 export { SvgFilter2 } from './Filter2';
+export { SvgHelp } from './Help';
 export { SvgHyperlink2 } from './Hyperlink2';
 export { SvgHyperlink3 } from './Hyperlink3';
 export { SvgInformationCircle } from './InformationCircle';

packages/loot-core/src/client/state-types/modals.d.ts

@@ -285,6 +285,7 @@ type FinanceModals = {
     accountName: string;
     onUnlink: () => void;
   };
+  'keyboard-shortcuts': EmptyObject;
 };
 
 export type PushModalAction = {

upcoming-release-notes/3648.md

@@ -0,0 +1,6 @@
+---
+category: Enhancements
+authors: [jfdoming]
+---
+
+Move help-related items under a single menu