feat: add star and go-to keyboard shortcuts

KNOWLEDGE_BASE.md

@@ -442,11 +442,12 @@ Press **?** to open the shortcut reference. Navigation shortcuts work outside te
 | `Enter` | Open the focused commit. |
 | `y` | Copy the focused commit's link. |
 | `r` / `q` / `o` | Reply, quote, or show/hide replies. |
+| `s` | Star or unstar the focused commit. |
 | `c` | Write a commit. |
 | `⌘/Ctrl+K` or `/` | Search developers and commits. |
 | `⌘/Ctrl+Enter` | Submit from the composer. |
 | `⌘/Ctrl+Shift+P` | Toggle composer preview. |
-| `g` then `l` / `e` / `p` / `s` | Go to your log / Trending / profile / settings. |
+| `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. |
 
 Source: [shortcut reference](resources/js/components/keyboard-shortcuts-dialog.tsx).
 

resources/js/components/commit-card.tsx

@@ -523,6 +523,7 @@ export function CommitCard({
                                     <div className="flex flex-wrap items-center gap-0.5">
                                         <CommitStarButton
                                             commit={commit}
+                                            keyShortcut="s"
                                             className="px-2 py-0.5"
                                         />
                                         <CommitPastelButton
@@ -546,6 +547,7 @@ export function CommitCard({
                                         <>
                                             <CommitStarButton
                                                 commit={commit}
+                                                keyShortcut="s"
                                                 className="px-2 py-0.5"
                                             />
                                             <CommitPastelButton

resources/js/components/commit-star-button.tsx

@@ -31,9 +31,11 @@ function starLabel(starred: boolean, count: number): string {
 
 export function CommitStarButton({
     commit,
+    keyShortcut,
     className,
 }: {
     commit: Commit;
+    keyShortcut?: string;
     className?: string;
 }) {
     const { auth } = usePage().props;
@@ -156,13 +158,17 @@ export function CommitStarButton({
     };
 
     return (
-        <ActionTooltip label={starred ? 'Unstar' : 'Star'}>
+        <ActionTooltip
+            label={starred ? 'Unstar' : 'Star'}
+            shortcut={keyShortcut}
+        >
             <button
                 ref={setElement}
                 aria-disabled={request.processing}
                 type="button"
                 onClick={toggle}
                 aria-pressed={starred}
+                aria-keyshortcuts={keyShortcut}
                 aria-label={starLabel(starred, count)}
                 className={cn(
                     'group/star inline-flex items-center gap-1 rounded-md px-1.5 py-1 font-mono text-[13px] text-muted-foreground transition-colors hover:bg-accent hover:text-foreground',

resources/js/components/commit-thread.tsx

@@ -85,7 +85,7 @@
 } from '@/lib/commit';
 import { commitStateKey } from '@/lib/commit-state';
 import { hasModKey } from '@/lib/keyboard';
 import { exactCountTitle, formatCount, formatExactCount } from '@/lib/numbers';
 import {
     characterCount,
     cn,
@@ -309,7 +309,7 @@
     if (initial !== previousInitial) {
         setPreviousInitial(initial);
         if (initial !== undefined && (replies?.length ?? 0) <= repliesPerPage) {
             ++replyRequest.current;
             setIsLoading(false);
             setThread((current) => ({
                 ...current,
@@ -395,7 +395,7 @@
 
         let isCurrent = true;
         const request = ++replyRequest.current;
         setIsLoading(true);
 
         fetchRepliesUntil(
             { id: commitId },
@@ -1311,6 +1311,7 @@
                                 <>
                                     <CommitStarButton
                                         commit={reply}
+                                        keyShortcut="s"
                                         className="px-2 py-0.5"
                                     />
                                     <CommitPastelButton

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

@@ -9,13 +9,14 @@ import { useKeyLabels } from '@/lib/keyboard';
 
 type Shortcut = { keys: string[]; label: string };
 
-const shortcuts = (keys: KeyLabels): Shortcut[] => [
+const shortcuts = (keys: KeyLabels, hasRemotes: boolean): Shortcut[] => [
     { keys: ['j'], label: 'Next commit' },
     { keys: ['k'], label: 'Previous commit' },
     { keys: ['y'], label: 'Copy link to the focused commit' },
     { keys: ['↵'], label: 'Open the focused commit' },
     { keys: ['r'], label: 'Reply to commit' },
     { keys: ['q'], label: 'Quote commit' },
+    { keys: ['s'], label: 'Star or unstar commit' },
     { keys: ['o'], label: 'Show or hide replies' },
     { keys: ['c'], label: 'Write a commit' },
     { keys: [keys.mod, 'K'], label: 'Search developers and commits' },
@@ -26,6 +27,9 @@ const shortcuts = (keys: KeyLabels): Shortcut[] => [
     { keys: ['g', 'e'], label: 'Go to trending' },
     { keys: ['g', 'p'], label: 'Go to your profile' },
     { keys: ['g', 's'], label: 'Go to settings' },
+    { keys: ['g', 'n'], label: 'Go to notifications' },
+    ...(hasRemotes ? [{ keys: ['g', 'm'], label: 'Go to remotes' }] : []),
+    { keys: ['g', '*'], label: 'Go to starred' },
     { keys: ['?'], label: 'Show this list' },
 ];
 
@@ -63,10 +67,12 @@ export function KeyboardShortcutsDialog({
     open,
     onOpenChange,
     canModerate,
+    hasRemotes,
 }: {
     open: boolean;
     onOpenChange: (open: boolean) => void;
     canModerate: boolean;
+    hasRemotes: boolean;
 }) {
     const keys = useKeyLabels();
 
@@ -78,7 +84,7 @@ export function KeyboardShortcutsDialog({
                     They work anywhere except while you're typing.
                 </DialogDescription>
 
-                <ShortcutList shortcuts={shortcuts(keys)} />
+                <ShortcutList shortcuts={shortcuts(keys, hasRemotes)} />
 
                 {canModerate && (
                     <section aria-labelledby="moderation-shortcuts">

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

@@ -1,6 +1,9 @@
 import { router } from '@inertiajs/react';
 import { useEffect } from 'react';
+import ConversationController from '@/actions/App/Http/Controllers/ConversationController';
 import LogController from '@/actions/App/Http/Controllers/LogController';
+import NotificationController from '@/actions/App/Http/Controllers/NotificationController';
+import StarredCommitController from '@/actions/App/Http/Controllers/StarredCommitController';
 import { signIn } from '@/lib/auth';
 import { hasModKey } from '@/lib/keyboard';
 import { show } from '@/routes/user';
@@ -43,11 +46,13 @@ export function focusCommit(commit: HTMLElement): void {
 }
 
 /**
+ * Focus inside a reply acts on that reply, not on the commit card around it.
+ *
  * A deleted commit's actions are inert, which stops pointers and focus but not a scripted click.
  */
 function focusedCommitAction(key: string): HTMLButtonElement | null {
     const action = document.activeElement
-        ?.closest('[data-commit]')
+        ?.closest('[data-reply], [data-commit]')
         ?.querySelector<HTMLButtonElement>(
             `button[aria-keyshortcuts="${CSS.escape(key)}"]`,
         );
@@ -77,6 +82,7 @@ function openFocusedCommit(): boolean {
 export function useKeyboardShortcuts(
     user: User | null,
     log: Log | null,
+    hasRemotes: boolean,
     onShowHelp: () => void,
     onSearch: () => void,
     onCompose: () => void,
@@ -87,12 +93,24 @@ export function useKeyboardShortcuts(
 
         const goTo: Record<string, () => void> =
             user === null || log === null
-                ? { l: signIn, e: signIn, p: signIn, s: signIn }
+                ? {
+                      l: signIn,
+                      e: signIn,
+                      p: signIn,
+                      s: signIn,
+                      n: signIn,
+                      '*': signIn,
+                  }
                 : {
                       l: () => router.visit(LogController.show(log)),
                       e: () => router.visit(LogController.show('trending')),
                       p: () => router.visit(show(user)),
                       s: () => router.visit(edit()),
+                      n: () => router.visit(NotificationController.index()),
+                      '*': () => router.visit(StarredCommitController.index()),
+                      ...(hasRemotes && {
+                          m: () => router.visit(ConversationController.index()),
+                      }),
                   };
 
         const onKeyDown = (event: KeyboardEvent) => {
@@ -171,5 +189,5 @@ export function useKeyboardShortcuts(
             window.removeEventListener('keydown', onKeyDown);
             clearTimeout(goToTimeout);
         };
-    }, [user, log, onShowHelp, onSearch, onCompose]);
+    }, [user, log, hasRemotes, onShowHelp, onSearch, onCompose]);
 }

resources/js/layouts/app-layout.tsx

@@ -89,6 +89,7 @@ export default function AppLayout({ children }: AppLayoutProps) {
     useKeyboardShortcuts(
         auth.user,
         auth.log,
+        auth.remotes !== null,
         showShortcuts,
         openSearch,
         compose,
@@ -185,6 +186,7 @@ export default function AppLayout({ children }: AppLayoutProps) {
                     open={isShowingShortcuts}
                     onOpenChange={setIsShowingShortcuts}
                     canModerate={auth.isAdmin}
+                    hasRemotes={auth.remotes !== null}
                 />
 
                 {isGuest && <LocalSignInDialog />}

resources/js/pages/onboarding/show.tsx

@@ -934,6 +934,7 @@ export default function Show({
                 open={isShowingShortcuts}
                 onOpenChange={setIsShowingShortcuts}
                 canModerate={auth.isAdmin}
+                hasRemotes={auth.remotes !== null}
             />
         </>
     );