This commit is contained in:
Bob Mannino
2025-08-11 19:15:54 +01:00
parent a4bbcea282
commit ad359defae
+74 -74
View File
@@ -10,46 +10,46 @@ type Shortcuts = Record<string, string>;
type ShortcutsDictionary = Record<Page, Shortcuts>; type ShortcutsDictionary = Record<Page, Shortcuts>;
const COMPOSE_SHORTCUTS: Shortcuts = { const COMPOSE_SHORTCUTS: Shortcuts = {
g: "general", g: "general",
e: "environment", e: "environment",
u: "domains", u: "domains",
d: "deployments", d: "deployments",
b: "backups", b: "backups",
s: "schedules", s: "schedules",
v: "volumeBackups", v: "volumeBackups",
l: "logs", l: "logs",
m: "monitoring", m: "monitoring",
a: "advanced", a: "advanced",
}; };
const APPLICATION_SHORTCUTS: Shortcuts = { const APPLICATION_SHORTCUTS: Shortcuts = {
g: "general", g: "general",
e: "environment", e: "environment",
u: "domains", u: "domains",
p: "preview-deployments", p: "preview-deployments",
s: "schedules", s: "schedules",
v: "volume-backups", v: "volume-backups",
d: "deployments", d: "deployments",
l: "logs", l: "logs",
m: "monitoring", m: "monitoring",
a: "advanced", a: "advanced",
}; };
const POSTGRES_SHORTCUTS: Shortcuts = { const POSTGRES_SHORTCUTS: Shortcuts = {
g: "general", g: "general",
e: "environment", e: "environment",
l: "logs", l: "logs",
m: "monitoring", m: "monitoring",
b: "backups", b: "backups",
a: "advanced", a: "advanced",
}; };
const REDIS_SHORTCUTS: Shortcuts = { const REDIS_SHORTCUTS: Shortcuts = {
g: "general", g: "general",
e: "environment", e: "environment",
l: "logs", l: "logs",
m: "monitoring", m: "monitoring",
a: "advanced", a: "advanced",
}; };
const SHORTCUTS: ShortcutsDictionary = { const SHORTCUTS: ShortcutsDictionary = {
@@ -60,57 +60,57 @@ const SHORTCUTS: ShortcutsDictionary = {
}; };
/** /**
* Use this to register keyboard shortcuts for different pages. Each shortcut * Use this to register keyboard shortcuts for different pages. Each shortcut
* must be prefixed with `g` (like GitHub). * must be prefixed with `g` (like GitHub).
* *
* @example * @example
* - `g g` "General", * - `g g` "General",
* - `g e` "Environment", * - `g e` "Environment",
* - `g u` "Domains", * - `g u` "Domains",
*/ */
export function UseKeyboardNav({ forPage }: { forPage: Page }) { export function UseKeyboardNav({ forPage }: { forPage: Page }) {
const [isModPressed, setModPressed] = useState(false); const [isModPressed, setModPressed] = useState(false);
const [timer, setTimer] = useState<NodeJS.Timeout | null>(null); const [timer, setTimer] = useState<NodeJS.Timeout | null>(null);
const sp = useSearchParams(); const sp = useSearchParams();
const router = useRouter(); const router = useRouter();
const pathname = usePathname(); const pathname = usePathname();
const shortcuts = SHORTCUTS[forPage]; const shortcuts = SHORTCUTS[forPage];
const updateSearchParam = useCallback( const updateSearchParam = useCallback(
(name: string, value: string) => { (name: string, value: string) => {
const params = new URLSearchParams(sp.toString()); const params = new URLSearchParams(sp.toString());
params.set(name, value); params.set(name, value);
return params.toString(); return params.toString();
}, },
[sp], [sp],
); );
useEffect(() => { useEffect(() => {
const handleKeyDown = ({ key }: KeyboardEvent) => { const handleKeyDown = ({ key }: KeyboardEvent) => {
if (isModPressed) { if (isModPressed) {
if (timer) clearTimeout(timer); if (timer) clearTimeout(timer);
setModPressed(false); setModPressed(false);
if (key in shortcuts) { if (key in shortcuts) {
const tab = shortcuts[key]!; const tab = shortcuts[key]!;
router.push( router.push(
`${pathname}?${updateSearchParam("tab", tab)}`, `${pathname}?${updateSearchParam("tab", tab)}`,
); );
} }
} else { } else {
if (key === "g") { if (key === "g") {
setModPressed(true); setModPressed(true);
setTimer(setTimeout(() => setModPressed(false), 5000)); setTimer(setTimeout(() => setModPressed(false), 5000));
} }
} }
}; };
window.addEventListener("keydown", handleKeyDown); window.addEventListener("keydown", handleKeyDown);
return () => window.removeEventListener("keydown", handleKeyDown); return () => window.removeEventListener("keydown", handleKeyDown);
}, [isModPressed, timer, updateSearchParam, router, pathname]); }, [isModPressed, timer, updateSearchParam, router, pathname]);
return null; return null;
} }