@@ -11,6 +11,8 @@ import {
1111} from "./primitives/SheetV3" ;
1212import { ShortcutKey } from "./primitives/ShortcutKey" ;
1313import { Button } from "./primitives/Buttons" ;
14+ import { useState } from "react" ;
15+ import { useShortcutKeys } from "~/hooks/useShortcutKeys" ;
1416
1517export function Shortcuts ( ) {
1618 return (
@@ -23,121 +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 = "Filter" >
54- < ShortcutKey shortcut = { { key : "f" } } variant = "medium/bright" />
55- </ Shortcut >
56- < Shortcut name = "Select filter" >
57- < ShortcutKey shortcut = { { key : "1" } } variant = "medium/bright" />
58- < Paragraph variant = "small" className = "ml-1.5" >
59- to
60- </ Paragraph >
61- < ShortcutKey shortcut = { { key : "9" } } variant = "medium/bright" />
62- </ Shortcut >
63- < Shortcut name = "Previous page" >
64- < ShortcutKey shortcut = { { key : "j" } } variant = "medium/bright" />
65- </ Shortcut >
66- < Shortcut name = "Next page" >
67- < ShortcutKey shortcut = { { key : "k" } } variant = "medium/bright" />
68- </ Shortcut >
69- < Shortcut name = "Help & Feedback" >
70- < ShortcutKey shortcut = { { key : "h" } } variant = "medium/bright" />
71- </ Shortcut >
72- </ div >
73- < div className = "space-y-3" >
74- < Header3 > Runs page</ Header3 >
75- < Shortcut name = "Bulk action: Cancel runs" >
76- < ShortcutKey shortcut = { { key : "c" } } variant = "medium/bright" />
77- </ Shortcut >
78- < Shortcut name = "Bulk action: Replay runs" >
79- < ShortcutKey shortcut = { { key : "r" } } variant = "medium/bright" />
80- </ Shortcut >
81- < Shortcut name = "Bulk action: Clear selection" >
82- < ShortcutKey shortcut = { { key : "esc" } } variant = "medium/bright" />
83- </ Shortcut >
84- </ div >
85- < div className = "space-y-3" >
86- < Header3 > Run page</ Header3 >
87- < Shortcut name = "Replay run" >
88- < ShortcutKey shortcut = { { key : "r" } } variant = "medium/bright" />
89- </ Shortcut >
90- < Shortcut name = "Overview" >
91- < ShortcutKey shortcut = { { key : "o" } } variant = "medium/bright" />
92- </ Shortcut >
93- < Shortcut name = "Details" >
94- < ShortcutKey shortcut = { { key : "d" } } variant = "medium/bright" />
95- </ Shortcut >
96- < Shortcut name = "Context" >
97- < ShortcutKey shortcut = { { key : "c" } } variant = "medium/bright" />
98- </ Shortcut >
99- < Shortcut name = "Metadata" >
100- < ShortcutKey shortcut = { { key : "m" } } variant = "medium/bright" />
101- </ Shortcut >
102- < Shortcut name = "Navigate" >
103- < ShortcutKey shortcut = { { key : "arrowup" } } variant = "medium/bright" />
104- < ShortcutKey shortcut = { { key : "arrowdown" } } variant = "medium/bright" />
105- < ShortcutKey shortcut = { { key : "arrowleft" } } variant = "medium/bright" />
106- < ShortcutKey shortcut = { { key : "arrowright" } } variant = "medium/bright" />
107- </ Shortcut >
108- < Shortcut name = "Expand all" >
109- < ShortcutKey shortcut = { { key : "e" } } variant = "medium/bright" />
110- </ Shortcut >
111- < Shortcut name = "Collapse all" >
112- < ShortcutKey shortcut = { { key : "w" } } variant = "medium/bright" />
113- </ Shortcut >
114- < Shortcut name = "Toggle level" >
115- < ShortcutKey shortcut = { { key : "0" } } variant = "medium/bright" />
116- < Paragraph variant = "small" className = "ml-1.5" >
117- to
118- </ Paragraph >
119- < ShortcutKey shortcut = { { key : "9" } } variant = "medium/bright" />
120- </ Shortcut >
121- </ div >
122- < div className = "space-y-3" >
123- < Header3 > Schedules page</ Header3 >
124- < Shortcut name = "New schedule" >
125- < ShortcutKey shortcut = { { key : "n" } } variant = "medium/bright" />
126- </ Shortcut >
127- </ div >
128- < div className = "space-y-3" >
129- < Header3 > Alerts page</ Header3 >
130- < Shortcut name = "New alert" >
131- < ShortcutKey shortcut = { { key : "n" } } variant = "medium/bright" />
132- </ Shortcut >
133- </ div >
134- </ div >
135- </ SheetHeader >
136- </ SheetContent >
35+ < ShortcutContent />
13736 </ Sheet >
13837 ) ;
13938}
14039
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+
141169function Shortcut ( { children, name } : { children : React . ReactNode ; name : string } ) {
142170 return (
143171 < div className = "flex items-center justify-between gap-x-2" >
0 commit comments