From 17b80a62bb864aba2dc9a1969b3f85dc6ef8215d Mon Sep 17 00:00:00 2001
From: Avram Walden <aviemet@gmail.com>
Date: Mon, 16 Sep 2024 10:49:36 -0700
Subject: [PATCH] feat: adds a search button to the topbar

Adds a search button with tooltip showing the keyboard shortcut to open up Mantine spotlight search
---
 app/frontend/Components/index.ts              |  1 +
 .../AppLayout/Topbar/GlobalSearchButton.tsx   | 29 +++++++++++++++++++
 .../Layouts/AppLayout/Topbar/index.tsx        |  2 ++
 3 files changed, 32 insertions(+)
 create mode 100644 app/frontend/Layouts/AppLayout/Topbar/GlobalSearchButton.tsx

diff --git a/app/frontend/Components/index.ts b/app/frontend/Components/index.ts
index 53b2ecdf..220ba476 100644
--- a/app/frontend/Components/index.ts
+++ b/app/frontend/Components/index.ts
@@ -31,6 +31,7 @@ export {
 	Flex,
 	Grid,
 	Group,
+	Kbd,
 	List,
 	Modal,
 	Paper,
diff --git a/app/frontend/Layouts/AppLayout/Topbar/GlobalSearchButton.tsx b/app/frontend/Layouts/AppLayout/Topbar/GlobalSearchButton.tsx
new file mode 100644
index 00000000..13ac8098
--- /dev/null
+++ b/app/frontend/Layouts/AppLayout/Topbar/GlobalSearchButton.tsx
@@ -0,0 +1,29 @@
+import React from 'react'
+import { spotlight } from '@mantine/spotlight'
+import { ActionIcon, Tooltip, Kbd } from '@/Components'
+import { SearchIcon } from '@/Components/Icons'
+import { useOs } from '@/lib/hooks'
+import { useMantineColorScheme } from '@mantine/core'
+
+const GlobalSearchButton = () => {
+	const os = useOs()
+	const { colorScheme } = useMantineColorScheme()
+
+	const modifier = os === 'macos' ? '⌘' : 'ctrl'
+
+	return (
+		<Tooltip
+			label={ <>
+				<Kbd>{ modifier }</Kbd><Kbd>K</Kbd>
+			</> }
+			openDelay={ 1000 }
+			color={ colorScheme === 'dark' ? 'gray' : undefined }
+		>
+			<ActionIcon onClick={ spotlight.open }>
+				<SearchIcon />
+			</ActionIcon>
+		</Tooltip>
+	)
+}
+
+export default GlobalSearchButton
diff --git a/app/frontend/Layouts/AppLayout/Topbar/index.tsx b/app/frontend/Layouts/AppLayout/Topbar/index.tsx
index 0ae908e3..49526789 100644
--- a/app/frontend/Layouts/AppLayout/Topbar/index.tsx
+++ b/app/frontend/Layouts/AppLayout/Topbar/index.tsx
@@ -8,6 +8,7 @@ import AvatarMenu from './AvatarMenu'
 import { usePageProps } from '@/lib/hooks'
 import * as classes from './TopBar.css'
 import ToggleSidebarButton from '../ToggleSidebarButton'
+import GlobalSearchButton from './GlobalSearchButton'
 
 const Topbar = () => {
 	const { auth: { user } } = usePageProps()
@@ -28,6 +29,7 @@ const Topbar = () => {
 				</Box>
 
 				<Group>
+					<GlobalSearchButton />
 					<QuickNewMenu />
 					<AvatarMenu />
 				</Group>