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)} />
+
+ ) : (
+ ''
+ )}