Add search hotkey

packages/ui/src/components/organisms/LibraryAppBar.tsx

@@ -1,8 +1,9 @@
 import React from "react";
-import { Signal, useComputed } from "@preact/signals-react";
+import { Signal, useComputed, useSignal } from "@preact/signals-react";
 import { Display } from "../pages/LibraryManager";
 import { AppBar, Box, Button, ButtonGroup, TextField, Toolbar } from "@mui/material";
 import { useTranslation } from '../../hooks/useTranslation';
+import { useHotkey } from '../../hooks';
 
 // Icons
 import ViewModuleIcon from '@mui/icons-material/ViewModule';
@@ -12,6 +13,13 @@ import ViewListIcon from '@mui/icons-material/ViewList';
 export function LibraryAppBar(props: { query: Signal<string>, display: Signal<Display>; }) {
 	const { query, display } = props;
 	const _t = useTranslation();
+	const searchFieldRef = useSignal<HTMLInputElement | null>(null);
+	useHotkey({
+		key: 'f',
+		ctrl: true,
+	}, () => {
+		searchFieldRef.value?.focus();
+	});
 
 
 	const displayButtons = useComputed(() => (
@@ -46,6 +54,7 @@ export function LibraryAppBar(props: { query: Signal<string>, display: Signal<Di
 						variant="standard"
 						size="small"
 						value={query.value}
+						inputRef={(ref) => searchFieldRef.value = ref}
 						onChange={(e) => query.value = e.target.value}
 					/>
 				))}