diff --git a/app/routes/app.search.tsx b/app/routes/app.search.tsx index 187e69b..72cc5b9 100644 --- a/app/routes/app.search.tsx +++ b/app/routes/app.search.tsx @@ -53,7 +53,7 @@ export const action = async ({request}: ActionFunctionArgs) => { ...documentResults ].sort((a, b) => (a.label ?? '').localeCompare(b.label ?? '')) - return json({results}) + return json({results, query}) } export const meta: MetaFunction = () => { @@ -69,7 +69,7 @@ const Search = () => {
diff --git a/app/routes/app.tsx b/app/routes/app.tsx index 7cb7963..059f5cb 100644 --- a/app/routes/app.tsx +++ b/app/routes/app.tsx @@ -6,9 +6,12 @@ import { useLoaderData, Link } from '@remix-run/react' +import {useHotkeys} from 'react-hotkeys-hook' +import {useState, useCallback} from 'react' -import {AButton} from '~/lib/components/button' +import {AButton, Button} from '~/lib/components/button' import {Notificatons} from '~/lib/components/notifications' +import {Label, inputClasses} from '~/lib/components/input' import {getPrisma} from '~/lib/prisma.server' import {ensureUser} from '~/lib/utils/ensure-user' @@ -45,12 +48,56 @@ export const loader = async ({request}: LoaderFunctionArgs) => { export type AppLoader = {user: {name: string; id: string}} +const SearchModal = ({close}: {close: () => void}) => { + const focusRef = useCallback((node: HTMLInputElement) => { + if (node !== null) { + node.focus() + } + }, []) + + return ( +
+

Search

+
+ + + +
+
+ ) +} + const Dashboard = () => { const {assets, user, cans} = useLoaderData() + const [searchModalOpen, setSearchModelOpen] = useState(false) + useHotkeys('ctrl+k', e => { + e.preventDefault() + setSearchModelOpen(!searchModalOpen) + }) return (
+ {searchModalOpen ? ( +
+ setSearchModelOpen(false)} /> +
+ ) : ( + '' + )}