Keyboard shortcuts for undo/redo

packages/frontend/src/page/document_page.css

@@ -46,6 +46,25 @@
     flex-direction: row;
     height: 100%;
     min-height: 0;
+    outline: none;
+    position: relative;
+}
+
+.document-pane-layout::after {
+    content: "";
+    position: absolute;
+    bottom: 8px;
+    left: 2px;
+    width: 10px;
+    height: 10px;
+    border-radius: 50%;
+    background: var(--color-alert-question);
+    opacity: 0;
+    pointer-events: none;
+}
+
+.document-pane-layout:focus-within::after {
+    opacity: 1;
 }
 
 .document-pane-content {

packages/frontend/src/page/document_page.tsx

@@ -221,7 +221,11 @@ function SplitPaneToolbar(props: {
             <DocumentBreadcrumbs liveDoc={props.doc.liveDoc} docRefId={props.docRef.refId} />
             <span class="filler" />
             <Show when={!secondaryPanelSize()}>
-                <IconButton onClick={props.togglePrimaryHistorySidebar} tooltip="Toggle history">
+                <IconButton
+                    onClick={props.togglePrimaryHistorySidebar}
+                    onMouseDown={(e: MouseEvent) => e.preventDefault()}
+                    tooltip="Toggle history"
+                >
                     <History size={20} />
                 </IconButton>
                 <PermissionsButton liveDoc={props.doc.liveDoc} docRef={props.docRef} />
@@ -233,6 +237,7 @@ function SplitPaneToolbar(props: {
                 >
                     <IconButton
                         onClick={props.togglePrimaryHistorySidebar}
+                        onMouseDown={(e: MouseEvent) => e.preventDefault()}
                         tooltip="Toggle history"
                     >
                         <History size={20} />
@@ -288,7 +293,11 @@ function SecondaryToolbar(props: {
             >
                 {(secondary) => (
                     <div class="secondary-permissions-toolbar toolbar">
-                        <IconButton onClick={props.toggleHistorySidebar} tooltip="Toggle history">
+                        <IconButton
+                            onClick={props.toggleHistorySidebar}
+                            onMouseDown={(e: MouseEvent) => e.preventDefault()}
+                            tooltip="Toggle history"
+                        >
                             <History size={20} />
                         </IconButton>
                         <PermissionsButton
@@ -401,10 +410,39 @@ export function DocumentPane(props: {
 
     const history = useSnapshotHistory(() => props.docRef.refId);
 
+    let paneRef: HTMLDivElement | undefined;
+
+    createEffect(() => {
+        if (props.historySidebarOpen) {
+            paneRef?.focus();
+        }
+    });
+
+    const onKeyDown = (evt: KeyboardEvent) => {
+        const mod = evt.metaKey || evt.ctrlKey;
+        if (!mod || evt.altKey) {
+            return;
+        }
+
+        if (evt.key === "z" || evt.key === "Z") {
+            if (evt.shiftKey) {
+                if (history.canRedo()) {
+                    evt.preventDefault();
+                    history.onRedo();
+                }
+            } else {
+                if (history.canUndo()) {
+                    evt.preventDefault();
+                    history.onUndo();
+                }
+            }
+        }
+    };
+
     // oxlint-disable solid/reactivity -- Context.Provider value getter is reactive
     return (
         <DocRefIdContext.Provider value={() => props.docRef.refId}>
-            <div class="document-pane-layout">
+            <div class="document-pane-layout" ref={paneRef} tabIndex={-1} onKeyDown={onKeyDown}>
                 <div class="document-pane-content">
                     <Show when={isDeleted()}>
                         <WarningBanner
@@ -464,7 +502,13 @@ export function DocumentPane(props: {
                     </div>
                 </div>
                 <Show when={props.historySidebarOpen && props.docRef.refId}>
-                    <div class="history-sidebar">
+                    <div
+                        class="history-sidebar"
+                        onMouseDown={(e: MouseEvent) => {
+                            e.preventDefault();
+                            paneRef?.focus();
+                        }}
+                    >
                         <HistorySidebar history={history} />
                     </div>
                 </Show>

packages/frontend/src/page/history_sidebar.tsx

@@ -1,6 +1,9 @@
 import { HistoryNavigator } from "catcolab-ui-components";
 import type { SnapshotHistory } from "./use_snapshot_history";
 
+const isMac = typeof navigator !== "undefined" && /Mac|iPhone|iPad/.test(navigator.userAgent);
+const mod = isMac ? "\u2318" : "Ctrl";
+
 export function HistorySidebar(props: { history: SnapshotHistory }) {
     return (
         <HistoryNavigator
@@ -10,8 +13,8 @@ export function HistorySidebar(props: { history: SnapshotHistory }) {
             onUndo={props.history.onUndo}
             onRedo={props.history.onRedo}
             onSelect={props.history.navigate}
-            undoTooltip="Undo"
-            redoTooltip="Redo"
+            undoTooltip={`Undo (${mod}+Z)`}
+            redoTooltip={`Redo (${mod}+Shift+Z)`}
         />
     );
 }