update navbar and home subtitle

* adds search button to navbar
* removes need for home.subtitle_2

beszel/site/src/components/command-palette.tsx

@@ -20,30 +20,34 @@ import {
 	CommandSeparator,
 	CommandShortcut,
 } from '@/components/ui/command'
-import { useEffect, useState } from 'react'
+import { useEffect } from 'react'
 import { useStore } from '@nanostores/react'
 import { $systems } from '@/lib/stores'
 import { isAdmin } from '@/lib/utils'
 import { navigate } from './router'
 import { useTranslation } from 'react-i18next'
 
-export default function CommandPalette() {
+export default function CommandPalette({
+	open,
+	setOpen,
+}: {
+	open: boolean
+	setOpen: (open: boolean) => void
+}) {
 	const { t } = useTranslation()
-
-	const [open, setOpen] = useState(false)
 	const systems = useStore($systems)
 
 	useEffect(() => {
 		const down = (e: KeyboardEvent) => {
 			if (e.key === 'k' && (e.metaKey || e.ctrlKey)) {
 				e.preventDefault()
-				setOpen((open) => !open)
+				setOpen(!open)
 			}
 		}
 
 		document.addEventListener('keydown', down)
 		return () => document.removeEventListener('keydown', down)
-	}, [])
+	}, [open, setOpen])
 
 	return (
 		<CommandDialog open={open} onOpenChange={setOpen}>
@@ -75,7 +79,7 @@ export default function CommandPalette() {
 						keywords={['home']}
 						onSelect={() => {
 							navigate('/')
-							setOpen((open) => !open)
+							setOpen(false)
 						}}
 					>
 						<LayoutDashboard className="mr-2 h-4 w-4" />
@@ -85,7 +89,7 @@ export default function CommandPalette() {
 					<CommandItem
 						onSelect={() => {
 							navigate('/settings/general')
-							setOpen((open) => !open)
+							setOpen(false)
 						}}
 					>
 						<SettingsIcon className="mr-2 h-4 w-4" />
@@ -96,7 +100,7 @@ export default function CommandPalette() {
 						keywords={['alerts']}
 						onSelect={() => {
 							navigate('/settings/notifications')
-							setOpen((open) => !open)
+							setOpen(false)
 						}}
 					>
 						<MailIcon className="mr-2 h-4 w-4" />
@@ -117,7 +121,7 @@ export default function CommandPalette() {
 				{isAdmin() && (
 					<>
 						<CommandSeparator className="mb-1.5" />
-						<CommandGroup heading={t("command.admin")}>
+						<CommandGroup heading={t('command.admin')}>
 							<CommandItem
 								keywords={['pocketbase']}
 								onSelect={() => {
@@ -127,7 +131,7 @@ export default function CommandPalette() {
 							>
 								<UsersIcon className="mr-2 h-4 w-4" />
 								<span>{t('user_dm.users')}</span>
-								<CommandShortcut>{t("command.admin")}</CommandShortcut>
+								<CommandShortcut>{t('command.admin')}</CommandShortcut>
 							</CommandItem>
 							<CommandItem
 								onSelect={() => {
@@ -137,7 +141,7 @@ export default function CommandPalette() {
 							>
 								<LogsIcon className="mr-2 h-4 w-4" />
 								<span>{t('user_dm.logs')}</span>
-								<CommandShortcut>{t("command.admin")}</CommandShortcut>
+								<CommandShortcut>{t('command.admin')}</CommandShortcut>
 							</CommandItem>
 							<CommandItem
 								onSelect={() => {
@@ -147,7 +151,7 @@ export default function CommandPalette() {
 							>
 								<DatabaseBackupIcon className="mr-2 h-4 w-4" />
 								<span>{t('user_dm.backups')}</span>
-								<CommandShortcut>{t("command.admin")}</CommandShortcut>
+								<CommandShortcut>{t('command.admin')}</CommandShortcut>
 							</CommandItem>
 							<CommandItem
 								keywords={['oauth', 'oicd']}
@@ -158,7 +162,7 @@ export default function CommandPalette() {
 							>
 								<LockKeyholeIcon className="mr-2 h-4 w-4" />
 								<span>{t('user_dm.auth_providers')}</span>
-								<CommandShortcut>{t("command.admin")}</CommandShortcut>
+								<CommandShortcut>{t('command.admin')}</CommandShortcut>
 							</CommandItem>
 							<CommandItem
 								keywords={['email']}
@@ -169,7 +173,7 @@ export default function CommandPalette() {
 							>
 								<MailIcon className="mr-2 h-4 w-4" />
 								<span>{t('command.SMTP_settings')}</span>
-								<CommandShortcut>{t("command.admin")}</CommandShortcut>
+								<CommandShortcut>{t('command.admin')}</CommandShortcut>
 							</CommandItem>
 						</CommandGroup>
 					</>

beszel/site/src/components/lang-toggle.tsx

@@ -23,7 +23,7 @@ export function LangToggle() {
 		<DropdownMenu>
 			<DropdownMenuTrigger asChild>
 				<Button variant={'ghost'} size="icon" className="hidden 450:flex">
-					<LanguagesIcon className="absolute h-[1.2rem] w-[1.2rem]" />
+					<LanguagesIcon className="absolute h-[1.2rem] w-[1.2rem] light:opacity-85" />
 					<span className="sr-only">Language</span>
 				</Button>
 			</DropdownMenuTrigger>

beszel/site/src/components/navbar.tsx

@@ -0,0 +1,147 @@
+import { useState, lazy, Suspense } from 'react'
+import { Button, buttonVariants } from '@/components/ui/button'
+import {
+	DatabaseBackupIcon,
+	LockKeyholeIcon,
+	LogOutIcon,
+	LogsIcon,
+	SearchIcon,
+	ServerIcon,
+	SettingsIcon,
+	UserIcon,
+	UsersIcon,
+} from 'lucide-react'
+import { TFunction } from 'i18next'
+import { Link } from './router'
+import { LangToggle } from './lang-toggle'
+import { ModeToggle } from './mode-toggle'
+import { Logo } from './logo'
+import { pb } from '@/lib/stores'
+import { cn, isReadOnlyUser, isAdmin } from '@/lib/utils'
+import {
+	DropdownMenu,
+	DropdownMenuTrigger,
+	DropdownMenuContent,
+	DropdownMenuLabel,
+	DropdownMenuSeparator,
+	DropdownMenuGroup,
+	DropdownMenuItem,
+} from '@/components/ui/dropdown-menu'
+import { AddSystemButton } from './add-system'
+
+const CommandPalette = lazy(() => import('./command-palette.tsx'))
+
+const isMac = navigator.platform.toUpperCase().indexOf('MAC') >= 0
+
+export default function Navbar(t: TFunction<'translation', undefined>) {
+	return (
+		<div className="flex items-center h-14 md:h-16 bg-card px-4 pr-3 sm:px-6 border bt-0 rounded-md my-4">
+			<Link href="/" aria-label="Home" className={'p-2 pl-0'}>
+				<Logo className="h-[1.3em] fill-foreground" />
+			</Link>
+
+			<SearchButton />
+
+			<div className={'flex ml-auto items-center'}>
+				<LangToggle />
+				<ModeToggle />
+				<Link
+					href="/settings/general"
+					aria-label="Settings"
+					className={cn('', buttonVariants({ variant: 'ghost', size: 'icon' }))}
+				>
+					<SettingsIcon className="h-[1.2rem] w-[1.2rem]" />
+				</Link>
+				<DropdownMenu>
+					<DropdownMenuTrigger asChild>
+						<button
+							aria-label="User Actions"
+							className={cn('', buttonVariants({ variant: 'ghost', size: 'icon' }))}
+						>
+							<UserIcon className="h-[1.2rem] w-[1.2rem]" />
+						</button>
+					</DropdownMenuTrigger>
+					<DropdownMenuContent align={isReadOnlyUser() ? 'end' : 'center'} className="min-w-44">
+						<DropdownMenuLabel>{pb.authStore.model?.email}</DropdownMenuLabel>
+						<DropdownMenuSeparator />
+						<DropdownMenuGroup>
+							{isAdmin() && (
+								<>
+									<DropdownMenuItem asChild>
+										<a href="/_/" target="_blank">
+											<UsersIcon className="mr-2.5 h-4 w-4" />
+											<span>{t('user_dm.users')}</span>
+										</a>
+									</DropdownMenuItem>
+									<DropdownMenuItem asChild>
+										<a href="/_/#/collections?collectionId=2hz5ncl8tizk5nx" target="_blank">
+											<ServerIcon className="mr-2.5 h-4 w-4" />
+											<span>{t('systems')}</span>
+										</a>
+									</DropdownMenuItem>
+									<DropdownMenuItem asChild>
+										<a href="/_/#/logs" target="_blank">
+											<LogsIcon className="mr-2.5 h-4 w-4" />
+											<span>{t('user_dm.logs')}</span>
+										</a>
+									</DropdownMenuItem>
+									<DropdownMenuItem asChild>
+										<a href="/_/#/settings/backups" target="_blank">
+											<DatabaseBackupIcon className="mr-2.5 h-4 w-4" />
+											<span>{t('user_dm.backups')}</span>
+										</a>
+									</DropdownMenuItem>
+									<DropdownMenuItem asChild>
+										<a href="/_/#/settings/auth-providers" target="_blank">
+											<LockKeyholeIcon className="mr-2.5 h-4 w-4" />
+											<span>{t('user_dm.auth_providers')}</span>
+										</a>
+									</DropdownMenuItem>
+									<DropdownMenuSeparator />
+								</>
+							)}
+						</DropdownMenuGroup>
+						<DropdownMenuItem onSelect={() => pb.authStore.clear()}>
+							<LogOutIcon className="mr-2.5 h-4 w-4" />
+							<span>{t('user_dm.log_out')}</span>
+						</DropdownMenuItem>
+					</DropdownMenuContent>
+				</DropdownMenu>
+				<AddSystemButton className="ml-2" />
+			</div>
+		</div>
+	)
+}
+
+function SearchButton() {
+	const [open, setOpen] = useState(false)
+
+	const Kbd = ({ children }: { children: React.ReactNode }) => (
+		<kbd className="pointer-events-none inline-flex h-5 select-none items-center gap-1 rounded border bg-muted px-1.5 font-mono text-[10px] font-medium text-muted-foreground opacity-100">
+			{children}
+		</kbd>
+	)
+
+	return (
+		<>
+			<Button
+				variant="outline"
+				className="hidden md:block text-sm text-muted-foreground px-4 mx-3"
+				onClick={() => setOpen(true)}
+			>
+				<span className="flex items-center">
+					<SearchIcon className="mr-1.5 h-4 w-4" />
+					Search
+					<span className="sr-only">Search</span>
+					<span className="flex items-center ml-3.5">
+						<Kbd>{isMac ? '⌘' : 'Ctrl'}</Kbd>
+						<Kbd>K</Kbd>
+					</span>
+				</span>
+			</Button>
+			<Suspense>
+				<CommandPalette open={open} setOpen={setOpen} />
+			</Suspense>
+		</>
+	)
+}

beszel/site/src/components/routes/home.tsx

@@ -13,8 +13,6 @@ import { useTranslation } from 'react-i18next'
 
 const SystemsTable = lazy(() => import('../systems-table/systems-table'))
 
-const isMac = navigator.platform.toUpperCase().indexOf('MAC') >= 0
-
 export default function () {
 	const { t } = useTranslation()
 
@@ -105,18 +103,12 @@ export default function () {
 					<div className="grid md:flex gap-3 w-full items-end">
 						<div className="px-2 sm:px-1">
 							<CardTitle className="mb-2.5">{t('all_systems')}</CardTitle>
-							<CardDescription>
-								{t('home.subtitle_1')}{' '}
-								<kbd className="pointer-events-none inline-flex h-5 select-none items-center gap-0.5 rounded border bg-muted px-1.5 font-mono text-[10px] font-medium text-muted-foreground opacity-100">
-									<span className="text-xs">{isMac ? '⌘' : 'Ctrl'}</span>K
-								</kbd>{' '}
-								{t('home.subtitle_2')}
-							</CardDescription>
+							<CardDescription>{t('home.subtitle_1')}</CardDescription>
 						</div>
 						<Input
 							placeholder={t('filter')}
 							onChange={(e) => setFilter(e.target.value)}
-							className="w-full md:w-56 lg:w-80 ml-auto px-4"
+							className="w-full md:w-56 lg:w-72 ml-auto px-4"
 						/>
 					</div>
 				</CardHeader>

beszel/site/src/locales/en/translation.json

@@ -10,7 +10,7 @@
 	"home": {
 		"active_alerts": "Active Alerts",
 		"active_des": "Exceeds {{value}}{{unit}} average in last {{minutes}} min",
-        "subtitle_1": "Updated in real time. Press",
+		"subtitle_1": "Updated in real time. Click on a system to view information.",
 		"subtitle_2": "to open the command palette."
 	},
 	"systems_table": {

beszel/site/src/main.tsx

@@ -11,50 +11,17 @@ import {
 	$hubVersion,
 	$copyContent,
 } from './lib/stores.ts'
-import { LangToggle } from './components/lang-toggle.tsx'
-import { ModeToggle } from './components/mode-toggle.tsx'
-import {
-	cn,
-	updateUserSettings,
-	isAdmin,
-	isReadOnlyUser,
-	updateAlerts,
-	updateFavicon,
-	updateSystemList,
-} from './lib/utils.ts'
-import { buttonVariants } from './components/ui/button.tsx'
-import {
-	DatabaseBackupIcon,
-	LockKeyholeIcon,
-	LogOutIcon,
-	LogsIcon,
-	ServerIcon,
-	SettingsIcon,
-	UserIcon,
-	UsersIcon,
-} from 'lucide-react'
+import { updateUserSettings, updateAlerts, updateFavicon, updateSystemList } from './lib/utils.ts'
 import { useStore } from '@nanostores/react'
 import { Toaster } from './components/ui/toaster.tsx'
-import { Logo } from './components/logo.tsx'
-import {
-	DropdownMenu,
-	DropdownMenuContent,
-	DropdownMenuGroup,
-	DropdownMenuItem,
-	DropdownMenuSeparator,
-	DropdownMenuTrigger,
-	DropdownMenuLabel,
-} from './components/ui/dropdown-menu.tsx'
-import { $router, Link } from './components/router.tsx'
+import { $router } from './components/router.tsx'
 import SystemDetail from './components/routes/system.tsx'
-import { AddSystemButton } from './components/add-system.tsx'
 
 import './lib/i18n.ts'
 import { useTranslation } from 'react-i18next'
-import { TFunction } from 'i18next'
+import Navbar from './components/navbar.tsx'
 
 // const ServerDetail = lazy(() => import('./components/routes/system.tsx'))
-const CommandPalette = lazy(() => import('./components/command-palette.tsx'))
 const LoginPage = lazy(() => import('./components/login/login.tsx'))
 const CopyToClipboardDialog = lazy(() => import('./components/copy-to-clipboard.tsx'))
 const Settings = lazy(() => import('./components/routes/settings/layout.tsx'))
@@ -115,84 +82,6 @@ const App = () => {
 	}
 }
 
-const Navbar = (t: TFunction<'translation', undefined>) => {
-	return (
-		<div className="flex items-center h-14 md:h-16 bg-card px-4 pr-3 sm:px-6 border bt-0 rounded-md my-4">
-			<Link href="/" aria-label="Home" className={'p-2 pl-0'}>
-				<Logo className="h-[1.15em] fill-foreground" />
-			</Link>
-
-			<div className={'flex ml-auto items-center'}>
-				<LangToggle />
-				<ModeToggle />
-				<Link
-					href="/settings/general"
-					aria-label="Settings"
-					className={cn('', buttonVariants({ variant: 'ghost', size: 'icon' }))}
-				>
-					<SettingsIcon className="h-[1.2rem] w-[1.2rem]" />
-				</Link>
-				<DropdownMenu>
-					<DropdownMenuTrigger asChild>
-						<button
-							aria-label="User Actions"
-							className={cn('', buttonVariants({ variant: 'ghost', size: 'icon' }))}
-						>
-							<UserIcon className="h-[1.2rem] w-[1.2rem]" />
-						</button>
-					</DropdownMenuTrigger>
-					<DropdownMenuContent align={isReadOnlyUser() ? 'end' : 'center'} className="min-w-44">
-						<DropdownMenuLabel>{pb.authStore.model?.email}</DropdownMenuLabel>
-						<DropdownMenuSeparator />
-						<DropdownMenuGroup>
-							{isAdmin() && (
-								<>
-									<DropdownMenuItem asChild>
-										<a href="/_/" target="_blank">
-											<UsersIcon className="mr-2.5 h-4 w-4" />
-											<span>{t('user_dm.users')}</span>
-										</a>
-									</DropdownMenuItem>
-									<DropdownMenuItem asChild>
-										<a href="/_/#/collections?collectionId=2hz5ncl8tizk5nx" target="_blank">
-											<ServerIcon className="mr-2.5 h-4 w-4" />
-											<span>{t('systems')}</span>
-										</a>
-									</DropdownMenuItem>
-									<DropdownMenuItem asChild>
-										<a href="/_/#/logs" target="_blank">
-											<LogsIcon className="mr-2.5 h-4 w-4" />
-											<span>{t('user_dm.logs')}</span>
-										</a>
-									</DropdownMenuItem>
-									<DropdownMenuItem asChild>
-										<a href="/_/#/settings/backups" target="_blank">
-											<DatabaseBackupIcon className="mr-2.5 h-4 w-4" />
-											<span>{t('user_dm.backups')}</span>
-										</a>
-									</DropdownMenuItem>
-									<DropdownMenuItem asChild>
-										<a href="/_/#/settings/auth-providers" target="_blank">
-											<LockKeyholeIcon className="mr-2.5 h-4 w-4" />
-											<span>{t('user_dm.auth_providers')}</span>
-										</a>
-									</DropdownMenuItem>
-									<DropdownMenuSeparator />
-								</>
-							)}
-						</DropdownMenuGroup>
-						<DropdownMenuItem onSelect={() => pb.authStore.clear()}>
-							<LogOutIcon className="mr-2.5 h-4 w-4" />
-							<span>{t('user_dm.log_out')}</span>
-						</DropdownMenuItem>
-					</DropdownMenuContent>
-				</DropdownMenu>
-				<AddSystemButton className="ml-2" />
-			</div>
-		</div>
-	)
-}
-
 const Layout = () => {
 	const { t } = useTranslation()
 
@@ -212,9 +101,6 @@ const Layout = () => {
 			<div className="container">{Navbar(t)}</div>
 			<div className="container mb-14 relative">
 				<App />
-				<Suspense>
-					<CommandPalette />
-				</Suspense>
 				{copyContent && (
 					<Suspense>
 						<CopyToClipboardDialog content={copyContent} />