update navbar and home subtitle

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

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} />