Skip to content

Commit 10a6a55

Browse files
matt-aitkenmatt-aitken
committed
You can bring up the shortcut keys without opening the help panel
1 parent 1bb440a commit 10a6a55

1 file changed

Lines changed: 133 additions & 108 deletions

File tree

‎apps/webapp/app/components/Shortcuts.tsx‎

Lines changed: 133 additions & 108 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,8 @@ import {
1111
} from "./primitives/SheetV3";
1212
import { ShortcutKey } from "./primitives/ShortcutKey";
1313
import { Button } from "./primitives/Buttons";
14+
import { useState } from "react";
15+
import { useShortcutKeys } from "~/hooks/useShortcutKeys";
1416

1517
export function Shortcuts() {
1618
return (
@@ -23,124 +25,147 @@ export function Shortcuts() {
2325
data-action="shortcuts"
2426
fullWidth
2527
textAlignLeft
26-
shortcut={{ modifiers: ["shift"], key: "?" }}
28+
shortcut={{ modifiers: ["shift"], key: "?", enabled: false }}
2729
className="gap-x-0 pl-0.5"
2830
iconSpacing="gap-x-0.5"
2931
>
3032
Shortcuts
3133
</Button>
3234
</SheetTrigger>
33-
<SheetContent>
34-
<SheetHeader>
35-
<SheetTitle>
36-
<div className="flex items-center gap-x-2">
37-
<Keyboard className="size-5 text-indigo-500" />
38-
<span className="font-sans text-base font-medium text-text-bright">
39-
Keyboard shortcuts
40-
</span>
41-
</div>
42-
</SheetTitle>
43-
<div className="space-y-6 px-4 pb-4 pt-2">
44-
<div className="space-y-3">
45-
<Header3>General</Header3>
46-
<Shortcut name="Close">
47-
<ShortcutKey shortcut={{ key: "esc" }} variant="medium/bright" />
48-
</Shortcut>
49-
<Shortcut name="Confirm">
50-
<ShortcutKey shortcut={{ modifiers: ["mod"] }} variant="medium/bright" />
51-
<ShortcutKey shortcut={{ key: "enter" }} variant="medium/bright" />
52-
</Shortcut>
53-
<Shortcut name="Ask AI">
54-
<ShortcutKey shortcut={{ modifiers: ["mod"], key: "/" }} variant="medium/bright" />
55-
</Shortcut>
56-
<Shortcut name="Filter">
57-
<ShortcutKey shortcut={{ key: "f" }} variant="medium/bright" />
58-
</Shortcut>
59-
<Shortcut name="Select filter">
60-
<ShortcutKey shortcut={{ key: "1" }} variant="medium/bright" />
61-
<Paragraph variant="small" className="ml-1.5">
62-
to
63-
</Paragraph>
64-
<ShortcutKey shortcut={{ key: "9" }} variant="medium/bright" />
65-
</Shortcut>
66-
<Shortcut name="Previous page">
67-
<ShortcutKey shortcut={{ key: "j" }} variant="medium/bright" />
68-
</Shortcut>
69-
<Shortcut name="Next page">
70-
<ShortcutKey shortcut={{ key: "k" }} variant="medium/bright" />
71-
</Shortcut>
72-
<Shortcut name="Help & Feedback">
73-
<ShortcutKey shortcut={{ key: "h" }} variant="medium/bright" />
74-
</Shortcut>
75-
</div>
76-
<div className="space-y-3">
77-
<Header3>Runs page</Header3>
78-
<Shortcut name="Bulk action: Cancel runs">
79-
<ShortcutKey shortcut={{ key: "c" }} variant="medium/bright" />
80-
</Shortcut>
81-
<Shortcut name="Bulk action: Replay runs">
82-
<ShortcutKey shortcut={{ key: "r" }} variant="medium/bright" />
83-
</Shortcut>
84-
<Shortcut name="Bulk action: Clear selection">
85-
<ShortcutKey shortcut={{ key: "esc" }} variant="medium/bright" />
86-
</Shortcut>
87-
</div>
88-
<div className="space-y-3">
89-
<Header3>Run page</Header3>
90-
<Shortcut name="Replay run">
91-
<ShortcutKey shortcut={{ key: "r" }} variant="medium/bright" />
92-
</Shortcut>
93-
<Shortcut name="Overview">
94-
<ShortcutKey shortcut={{ key: "o" }} variant="medium/bright" />
95-
</Shortcut>
96-
<Shortcut name="Details">
97-
<ShortcutKey shortcut={{ key: "d" }} variant="medium/bright" />
98-
</Shortcut>
99-
<Shortcut name="Context">
100-
<ShortcutKey shortcut={{ key: "c" }} variant="medium/bright" />
101-
</Shortcut>
102-
<Shortcut name="Metadata">
103-
<ShortcutKey shortcut={{ key: "m" }} variant="medium/bright" />
104-
</Shortcut>
105-
<Shortcut name="Navigate">
106-
<ShortcutKey shortcut={{ key: "arrowup" }} variant="medium/bright" />
107-
<ShortcutKey shortcut={{ key: "arrowdown" }} variant="medium/bright" />
108-
<ShortcutKey shortcut={{ key: "arrowleft" }} variant="medium/bright" />
109-
<ShortcutKey shortcut={{ key: "arrowright" }} variant="medium/bright" />
110-
</Shortcut>
111-
<Shortcut name="Expand all">
112-
<ShortcutKey shortcut={{ key: "e" }} variant="medium/bright" />
113-
</Shortcut>
114-
<Shortcut name="Collapse all">
115-
<ShortcutKey shortcut={{ key: "w" }} variant="medium/bright" />
116-
</Shortcut>
117-
<Shortcut name="Toggle level">
118-
<ShortcutKey shortcut={{ key: "0" }} variant="medium/bright" />
119-
<Paragraph variant="small" className="ml-1.5">
120-
to
121-
</Paragraph>
122-
<ShortcutKey shortcut={{ key: "9" }} variant="medium/bright" />
123-
</Shortcut>
124-
</div>
125-
<div className="space-y-3">
126-
<Header3>Schedules page</Header3>
127-
<Shortcut name="New schedule">
128-
<ShortcutKey shortcut={{ key: "n" }} variant="medium/bright" />
129-
</Shortcut>
130-
</div>
131-
<div className="space-y-3">
132-
<Header3>Alerts page</Header3>
133-
<Shortcut name="New alert">
134-
<ShortcutKey shortcut={{ key: "n" }} variant="medium/bright" />
135-
</Shortcut>
136-
</div>
137-
</div>
138-
</SheetHeader>
139-
</SheetContent>
35+
<ShortcutContent />
14036
</Sheet>
14137
);
14238
}
14339

40+
export function ShortcutsAutoOpen() {
41+
const [isOpen, setIsOpen] = useState(false);
42+
43+
useShortcutKeys({
44+
shortcut: { modifiers: ["shift"], key: "?" },
45+
action: () => {
46+
setIsOpen(true);
47+
},
48+
});
49+
50+
return (
51+
<Sheet open={isOpen} onOpenChange={setIsOpen}>
52+
<ShortcutContent />
53+
</Sheet>
54+
);
55+
}
56+
57+
function ShortcutContent() {
58+
return (
59+
<SheetContent>
60+
<SheetHeader>
61+
<SheetTitle>
62+
<div className="flex items-center gap-x-2">
63+
<Keyboard className="size-5 text-indigo-500" />
64+
<span className="font-sans text-base font-medium text-text-bright">
65+
Keyboard shortcuts
66+
</span>
67+
</div>
68+
</SheetTitle>
69+
<div className="space-y-6 px-4 pb-4 pt-2">
70+
<div className="space-y-3">
71+
<Header3>General</Header3>
72+
<Shortcut name="Close">
73+
<ShortcutKey shortcut={{ key: "esc" }} variant="medium/bright" />
74+
</Shortcut>
75+
<Shortcut name="Confirm">
76+
<ShortcutKey shortcut={{ modifiers: ["mod"] }} variant="medium/bright" />
77+
<ShortcutKey shortcut={{ key: "enter" }} variant="medium/bright" />
78+
</Shortcut>
79+
<Shortcut name="Ask AI">
80+
<ShortcutKey shortcut={{ modifiers: ["mod"], key: "/" }} variant="medium/bright" />
81+
</Shortcut>
82+
<Shortcut name="Filter">
83+
<ShortcutKey shortcut={{ key: "f" }} variant="medium/bright" />
84+
</Shortcut>
85+
<Shortcut name="Select filter">
86+
<ShortcutKey shortcut={{ key: "1" }} variant="medium/bright" />
87+
<Paragraph variant="small" className="ml-1.5">
88+
to
89+
</Paragraph>
90+
<ShortcutKey shortcut={{ key: "9" }} variant="medium/bright" />
91+
</Shortcut>
92+
<Shortcut name="Previous page">
93+
<ShortcutKey shortcut={{ key: "j" }} variant="medium/bright" />
94+
</Shortcut>
95+
<Shortcut name="Next page">
96+
<ShortcutKey shortcut={{ key: "k" }} variant="medium/bright" />
97+
</Shortcut>
98+
<Shortcut name="Help & Feedback">
99+
<ShortcutKey shortcut={{ key: "h" }} variant="medium/bright" />
100+
</Shortcut>
101+
</div>
102+
<div className="space-y-3">
103+
<Header3>Runs page</Header3>
104+
<Shortcut name="Bulk action: Cancel runs">
105+
<ShortcutKey shortcut={{ key: "c" }} variant="medium/bright" />
106+
</Shortcut>
107+
<Shortcut name="Bulk action: Replay runs">
108+
<ShortcutKey shortcut={{ key: "r" }} variant="medium/bright" />
109+
</Shortcut>
110+
<Shortcut name="Bulk action: Clear selection">
111+
<ShortcutKey shortcut={{ key: "esc" }} variant="medium/bright" />
112+
</Shortcut>
113+
</div>
114+
<div className="space-y-3">
115+
<Header3>Run page</Header3>
116+
<Shortcut name="Replay run">
117+
<ShortcutKey shortcut={{ key: "r" }} variant="medium/bright" />
118+
</Shortcut>
119+
<Shortcut name="Overview">
120+
<ShortcutKey shortcut={{ key: "o" }} variant="medium/bright" />
121+
</Shortcut>
122+
<Shortcut name="Details">
123+
<ShortcutKey shortcut={{ key: "d" }} variant="medium/bright" />
124+
</Shortcut>
125+
<Shortcut name="Context">
126+
<ShortcutKey shortcut={{ key: "c" }} variant="medium/bright" />
127+
</Shortcut>
128+
<Shortcut name="Metadata">
129+
<ShortcutKey shortcut={{ key: "m" }} variant="medium/bright" />
130+
</Shortcut>
131+
<Shortcut name="Navigate">
132+
<ShortcutKey shortcut={{ key: "arrowup" }} variant="medium/bright" />
133+
<ShortcutKey shortcut={{ key: "arrowdown" }} variant="medium/bright" />
134+
<ShortcutKey shortcut={{ key: "arrowleft" }} variant="medium/bright" />
135+
<ShortcutKey shortcut={{ key: "arrowright" }} variant="medium/bright" />
136+
</Shortcut>
137+
<Shortcut name="Expand all">
138+
<ShortcutKey shortcut={{ key: "e" }} variant="medium/bright" />
139+
</Shortcut>
140+
<Shortcut name="Collapse all">
141+
<ShortcutKey shortcut={{ key: "w" }} variant="medium/bright" />
142+
</Shortcut>
143+
<Shortcut name="Toggle level">
144+
<ShortcutKey shortcut={{ key: "0" }} variant="medium/bright" />
145+
<Paragraph variant="small" className="ml-1.5">
146+
to
147+
</Paragraph>
148+
<ShortcutKey shortcut={{ key: "9" }} variant="medium/bright" />
149+
</Shortcut>
150+
</div>
151+
<div className="space-y-3">
152+
<Header3>Schedules page</Header3>
153+
<Shortcut name="New schedule">
154+
<ShortcutKey shortcut={{ key: "n" }} variant="medium/bright" />
155+
</Shortcut>
156+
</div>
157+
<div className="space-y-3">
158+
<Header3>Alerts page</Header3>
159+
<Shortcut name="New alert">
160+
<ShortcutKey shortcut={{ key: "n" }} variant="medium/bright" />
161+
</Shortcut>
162+
</div>
163+
</div>
164+
</SheetHeader>
165+
</SheetContent>
166+
);
167+
}
168+
144169
function Shortcut({ children, name }: { children: React.ReactNode; name: string }) {
145170
return (
146171
<div className="flex items-center justify-between gap-x-2">

0 commit comments

Comments
 (0)