feat: sidebar collapse shortcut

KNOWLEDGE_BASE.md

@@ -503,6 +503,7 @@ Press **?** to open the shortcut reference. Navigation shortcuts work outside te
 | `s` | Star or unstar the focused commit. |
 | `c` | Write a commit. |
 | `⌘/Ctrl+K` or `/` | Search developers and commits. |
+| `⌘/Ctrl+B` | Collapse or expand the sidebar on wide screens. |
 | `⌘/Ctrl+Enter` | Submit from the composer. |
 | `⌘/Ctrl+Shift+P` | Toggle composer preview. |
 | `g` then `l` / `e` / `p` / `s` / `n` / `m` / `*` | Go to your log / Trending / profile / settings / Notifications / Remotes / Starred. `g m` works only while Remotes is on. |

resources/js/components/app-nav.tsx

@@ -275,6 +275,7 @@ export function AppNav({
     const { isNavOpen: sidebarOpen, isLayoutOpen, setNavOpen } = useNavOpen();
     const items = useNavItems();
     const keys = useKeyLabels();
+    const collapseShortcut = keys.combo(keys.mod, 'B');
 
     const iconsOnly = !(useMediaQuery('(min-width: 64rem)') && isLayoutOpen);
 
@@ -377,7 +378,11 @@ export function AppNav({
                 </NavTooltip>
                 <NavTooltip
                     label={
-                        iconsOnly ? (sidebarOpen ? 'Collapse' : 'Expand') : null
+                        iconsOnly
+                            ? sidebarOpen
+                                ? `Collapse (${collapseShortcut})`
+                                : `Expand (${collapseShortcut})`
+                            : null
                     }
                 >
                     <button
@@ -389,12 +394,13 @@ export function AppNav({
                                 : 'Expand navigation'
                         }
                         aria-expanded={sidebarOpen}
+                        aria-keyshortcuts="Control+B Meta+B"
                         title={
                             iconsOnly
                                 ? undefined
                                 : sidebarOpen
-                                  ? 'Collapse navigation'
-                                  : 'Expand navigation'
+                                  ? `Collapse navigation (${collapseShortcut})`
+                                  : `Expand navigation (${collapseShortcut})`
                         }
                         className="hidden h-11 items-center gap-3 rounded-lg py-3 pr-3 pl-4 text-[15px] leading-5 font-medium text-muted-foreground transition-colors hover:bg-accent hover:text-foreground lg:flex"
                         data-test="nav-collapse-button"

resources/js/components/keyboard-shortcuts-dialog.tsx

@@ -61,6 +61,10 @@ const groups = (
             title: 'Anywhere',
             shortcuts: [
                 { keys: [[keys.mod, 'K'], ['/']], label: 'Search' },
+                {
+                    keys: [[keys.mod, 'B']],
+                    label: 'Collapse or expand sidebar',
+                },
                 { keys: [['?']], label: 'Show this list' },
             ],
         },

resources/js/hooks/use-keyboard-shortcuts.ts

@@ -60,6 +60,23 @@ function focusedCommitAction(key: string): HTMLButtonElement | null {
     return action && !action.closest('[inert]') ? action : null;
 }
 
+/**
+ * The collapse button only shows where the nav can widen, so the shortcut does nothing where it is hidden.
+ */
+function toggleNav(): boolean {
+    const toggle = document.querySelector<HTMLButtonElement>(
+        'button[aria-keyshortcuts~="Meta+B"]',
+    );
+
+    if (!toggle?.checkVisibility()) {
+        return false;
+    }
+
+    toggle.click();
+
+    return true;
+}
+
 function openFocusedCommit(): boolean {
     const commit = document.activeElement;
 
@@ -123,9 +140,6 @@ export function useKeyboardShortcuts(
 
             if (
                 event.defaultPrevented ||
-                event.metaKey ||
-                event.ctrlKey ||
-                event.altKey ||
                 isTyping(event.target) ||
                 document.querySelector(
                     '[role="dialog"][data-state="open"], [role="dialog"][aria-modal="true"]',
@@ -134,6 +148,25 @@ export function useKeyboardShortcuts(
                 return;
             }
 
+            if (
+                hasModKey(event) &&
+                (event.key.toLowerCase() === 'b' ||
+                    (event.code === 'KeyB' && !/^[a-z]$/i.test(event.key))) &&
+                !event.shiftKey &&
+                !event.altKey &&
+                !event.repeat
+            ) {
+                if (toggleNav()) {
+                    event.preventDefault();
+                }
+
+                return;
+            }
+
+            if (event.metaKey || event.ctrlKey || event.altKey) {
+                return;
+            }
+
             if (awaitingGoTo) {
                 awaitingGoTo = false;
                 clearTimeout(goToTimeout);