Shortcut improvements

apps/webapp/app/assets/icons/KeyboardDownIcon.tsx

@@ -0,0 +1,17 @@
+export function KeyboardDownIcon({ className }: { className?: string }) {
+  return (
+    <svg
+      className={className}
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M12.8779 16.3905C12.4989 17.0854 11.5011 17.0854 11.1221 16.3905L6.80665 8.47885C6.44317 7.81248 6.92548 7 7.68454 7L16.3155 7C17.0745 7 17.5568 7.81248 17.1934 8.47885L12.8779 16.3905Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+}

apps/webapp/app/assets/icons/KeyboardLeftIcon.tsx

@@ -0,0 +1,17 @@
+export function KeyboardLeftIcon({ className }: { className?: string }) {
+  return (
+    <svg
+      className={className}
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M7.60947 12.8779C6.91461 12.4989 6.91461 11.5011 7.60947 11.1221L15.5211 6.80665C16.1875 6.44317 17 6.92548 17 7.68454L17 16.3155C17 17.0745 16.1875 17.5568 15.5211 17.1934L7.60947 12.8779Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+}

apps/webapp/app/assets/icons/KeyboardRightIcon.tsx

@@ -0,0 +1,17 @@
+export function KeyboardRightIcon({ className }: { className?: string }) {
+  return (
+    <svg
+      className={className}
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M16.3905 11.1221C17.0854 11.5011 17.0854 12.4989 16.3905 12.8779L8.47885 17.1934C7.81248 17.5568 7 17.0745 7 16.3155L7 7.68454C7 6.92548 7.81248 6.44317 8.47885 6.80665L16.3905 11.1221Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+}

apps/webapp/app/assets/icons/KeyboardUpIcon.tsx

@@ -0,0 +1,17 @@
+export function KeyboardUpIcon({ className }: { className?: string }) {
+  return (
+    <svg
+      className={className}
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M11.1221 6.60947C11.5011 5.91461 12.4989 5.91461 12.8779 6.60947L17.1934 14.5211C17.5568 15.1875 17.0745 16 16.3155 16L7.68454 16C6.92548 16 6.44317 15.1875 6.80665 14.5211L11.1221 6.60947Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+}

apps/webapp/app/assets/icons/KeyboardWindowsIcon.tsx

@@ -0,0 +1,17 @@
+export function KeyboardWindowsIcon({ className }: { className?: string }) {
+  return (
+    <svg
+      className={className}
+      width="12"
+      height="16"
+      viewBox="0 0 12 16"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <rect x="1.66666" y="3.66663" width="4" height="4" fill="currentColor" />
+      <rect x="6.33334" y="3.66663" width="4" height="4" fill="currentColor" />
+      <rect x="1.66666" y="8.33337" width="4" height="4" fill="currentColor" />
+      <rect x="6.33334" y="8.33337" width="4" height="4" fill="currentColor" />
+    </svg>
+  );
+}

apps/webapp/app/components/ErrorDisplay.tsx

@@ -49,7 +49,7 @@ export function ErrorDisplay({ title, message, button }: DisplayOptionsProps) {
         {message && <Paragraph>{message}</Paragraph>}
         <LinkButton
           to={button ? button.to : "/"}
-          shortcut={{ modifiers: ["meta"], key: "g" }}
+          shortcut={{ modifiers: ["mod"], key: "g" }}
           variant="primary/medium"
           LeadingIcon={HomeIcon}
         >

apps/webapp/app/components/ListPagination.tsx

@@ -30,10 +30,12 @@ function NextButton({ cursor }: { cursor?: string }) {
       trailingIconClassName="text-text-dimmed"
       className={cn(
         "flex items-center",
-        !path &&
-          "cursor-not-allowed opacity-50 group-hover:bg-transparent group-hover:text-text-dimmed"
+        !path && "cursor-not-allowed opacity-50 group-hover/button:bg-transparent"
       )}
       onClick={(e) => !path && e.preventDefault()}
+      shortcut={{ key: "k" }}
+      showTooltip
+      tooltipDescription="Next"
     >
       Next
     </LinkButton>
@@ -51,10 +53,12 @@ function PreviousButton({ cursor }: { cursor?: string }) {
       leadingIconClassName="text-text-dimmed"
       className={cn(
         "flex items-center",
-        !path &&
-          "cursor-not-allowed opacity-50 group-hover:bg-transparent group-hover:text-text-dimmed"
+        !path && "cursor-not-allowed opacity-50 group-hover/button:bg-transparent"
       )}
       onClick={(e) => !path && e.preventDefault()}
+      shortcut={{ key: "j" }}
+      showTooltip
+      tooltipDescription="Previous"
     >
       Prev
     </LinkButton>

apps/webapp/app/components/Shortcuts.tsx

@@ -0,0 +1,148 @@
+import { Keyboard } from "lucide-react";
+import { Header3 } from "./primitives/Headers";
+import { Paragraph } from "./primitives/Paragraph";
+import {
+  Sheet,
+  SheetContent,
+  SheetDescription,
+  SheetHeader,
+  SheetTitle,
+  SheetTrigger,
+} from "./primitives/SheetV3";
+import { ShortcutKey } from "./primitives/ShortcutKey";
+import { Button } from "./primitives/Buttons";
+
+export function Shortcuts() {
+  return (
+    <Sheet>
+      <SheetTrigger asChild>
+        <Button
+          variant="small-menu-item"
+          LeadingIcon={Keyboard}
+          leadingIconClassName="text-blue-500"
+          data-action="shortcuts"
+          fullWidth
+          textAlignLeft
+          shortcut={{ modifiers: ["shift"], key: "?" }}
+          className="gap-x-0 pl-0.5"
+          iconSpacing="gap-x-0.5"
+        >
+          Shortcuts
+        </Button>
+      </SheetTrigger>
+      <SheetContent>
+        <SheetHeader>
+          <SheetTitle>
+            <div className="flex items-center gap-x-2">
+              <Keyboard className="size-5 text-indigo-500" />
+              <span className="font-sans text-base font-medium text-text-bright">
+                Keyboard shortcuts
+              </span>
+            </div>
+          </SheetTitle>
+          <div className="space-y-6 px-4 pb-4 pt-2">
+            <div className="space-y-3">
+              <Header3>General</Header3>
+              <Shortcut name="Close">
+                <ShortcutKey shortcut={{ key: "esc" }} variant="medium/bright" />
+              </Shortcut>
+              <Shortcut name="Confirm">
+                <ShortcutKey shortcut={{ modifiers: ["mod"] }} variant="medium/bright" />
+                <ShortcutKey shortcut={{ key: "enter" }} variant="medium/bright" />
+              </Shortcut>
+              <Shortcut name="Filter">
+                <ShortcutKey shortcut={{ key: "f" }} variant="medium/bright" />
+              </Shortcut>
+              <Shortcut name="Select filter">
+                <ShortcutKey shortcut={{ key: "1" }} variant="medium/bright" />
+                <Paragraph variant="small" className="ml-1.5">
+                  to
+                </Paragraph>
+                <ShortcutKey shortcut={{ key: "9" }} variant="medium/bright" />
+              </Shortcut>
+              <Shortcut name="Previous page">
+                <ShortcutKey shortcut={{ key: "j" }} variant="medium/bright" />
+              </Shortcut>
+              <Shortcut name="Next page">
+                <ShortcutKey shortcut={{ key: "k" }} variant="medium/bright" />
+              </Shortcut>
+              <Shortcut name="Help & Feedback">
+                <ShortcutKey shortcut={{ key: "h" }} variant="medium/bright" />
+              </Shortcut>
+            </div>
+            <div className="space-y-3">
+              <Header3>Runs page</Header3>
+              <Shortcut name="Bulk action: Cancel runs">
+                <ShortcutKey shortcut={{ key: "c" }} variant="medium/bright" />
+              </Shortcut>
+              <Shortcut name="Bulk action: Replay runs">
+                <ShortcutKey shortcut={{ key: "r" }} variant="medium/bright" />
+              </Shortcut>
+              <Shortcut name="Bulk action: Clear selection">
+                <ShortcutKey shortcut={{ key: "esc" }} variant="medium/bright" />
+              </Shortcut>
+            </div>
+            <div className="space-y-3">
+              <Header3>Run page</Header3>
+              <Shortcut name="Replay run">
+                <ShortcutKey shortcut={{ key: "r" }} variant="medium/bright" />
+              </Shortcut>
+              <Shortcut name="Overview">
+                <ShortcutKey shortcut={{ key: "o" }} variant="medium/bright" />
+              </Shortcut>
+              <Shortcut name="Details">
+                <ShortcutKey shortcut={{ key: "d" }} variant="medium/bright" />
+              </Shortcut>
+              <Shortcut name="Context">
+                <ShortcutKey shortcut={{ key: "c" }} variant="medium/bright" />
+              </Shortcut>
+              <Shortcut name="Metadata">
+                <ShortcutKey shortcut={{ key: "m" }} variant="medium/bright" />
+              </Shortcut>
+              <Shortcut name="Navigate">
+                <ShortcutKey shortcut={{ key: "arrowup" }} variant="medium/bright" />
+                <ShortcutKey shortcut={{ key: "arrowdown" }} variant="medium/bright" />
+                <ShortcutKey shortcut={{ key: "arrowleft" }} variant="medium/bright" />
+                <ShortcutKey shortcut={{ key: "arrowright" }} variant="medium/bright" />
+              </Shortcut>
+              <Shortcut name="Expand all">
+                <ShortcutKey shortcut={{ key: "e" }} variant="medium/bright" />
+              </Shortcut>
+              <Shortcut name="Collapse all">
+                <ShortcutKey shortcut={{ key: "w" }} variant="medium/bright" />
+              </Shortcut>
+              <Shortcut name="Toggle level">
+                <ShortcutKey shortcut={{ key: "0" }} variant="medium/bright" />
+                <Paragraph variant="small" className="ml-1.5">
+                  to
+                </Paragraph>
+                <ShortcutKey shortcut={{ key: "9" }} variant="medium/bright" />
+              </Shortcut>
+            </div>
+            <div className="space-y-3">
+              <Header3>Schedules page</Header3>
+              <Shortcut name="New schedule">
+                <ShortcutKey shortcut={{ key: "n" }} variant="medium/bright" />
+              </Shortcut>
+            </div>
+            <div className="space-y-3">
+              <Header3>Alerts page</Header3>
+              <Shortcut name="New alert">
+                <ShortcutKey shortcut={{ key: "n" }} variant="medium/bright" />
+              </Shortcut>
+            </div>
+          </div>
+        </SheetHeader>
+      </SheetContent>
+    </Sheet>
+  );
+}
+
+function Shortcut({ children, name }: { children: React.ReactNode; name: string }) {
+  return (
+    <div className="flex items-center justify-between gap-x-2">
+      <span className="text-sm text-text-dimmed">{name}</span>
+      <span className="flex items-center gap-x-0.5">{children}</span>
+    </div>
+  );
+}

apps/webapp/app/components/navigation/HelpAndFeedbackPopover.tsx

@@ -19,7 +19,7 @@ import { Paragraph } from "../primitives/Paragraph";
 import { Popover, PopoverContent, PopoverSideMenuTrigger } from "../primitives/Popover";
 import { StepNumber } from "../primitives/StepNumber";
 import { MenuCount, SideMenuItem } from "./SideMenuItem";
-
+import { Shortcuts } from "../Shortcuts";
 export function HelpAndFeedback() {
   const [isHelpMenuOpen, setHelpMenuOpen] = useState(false);
   const currentPlan = useCurrentPlan();
@@ -84,6 +84,7 @@ export function HelpAndFeedback() {
               data-action="changelog"
               target="_blank"
             />
+            <Shortcuts />
           </div>
           <div className="flex flex-col gap-1 p-1">
             <Paragraph className="pb-1 pl-1.5 pt-1.5 text-xs">Need help?</Paragraph>