updates

site/src/main.tsx

@@ -4,42 +4,71 @@ import { Link, Route, Switch } from 'wouter-preact'
 import { Home } from './components/routes/home.tsx'
 import { ThemeProvider } from './components/theme-provider.tsx'
 import LoginPage from './components/login.tsx'
-import { pb } from './lib/stores.ts'
+import { $authenticated, $servers, pb } from './lib/stores.ts'
 import { ServerDetail } from './components/routes/server.tsx'
 import { ModeToggle } from './components/mode-toggle.tsx'
 import { CommandPalette } from './components/command-dialog.tsx'
+import { cn } from './lib/utils.ts'
+import { buttonVariants } from './components/ui/button.tsx'
+import { Github } from 'lucide-react'
+import { useStore } from '@nanostores/preact'
+import { useEffect } from 'preact/hooks'
+import { SystemRecord } from './types'
 
-// import { ModeToggle } from './components/mode-toggle.tsx'
+const App = () => {
+	const authenticated = useStore($authenticated)
 
-// const ls = localStorage.getItem('auth')
-// console.log('ls', ls)
-// @ts-ignore
-pb.authStore.storageKey = 'pb_admin_auth'
+	return <ThemeProvider>{authenticated ? <Main /> : <LoginPage />}</ThemeProvider>
+}
 
-console.log('pb.authStore', pb.authStore)
+const Main = () => {
+	// const servers = useStore($servers)
 
-const App = () => <ThemeProvider>{pb.authStore.isValid ? <Main /> : <LoginPage />}</ThemeProvider>
+	useEffect(() => {
+		console.log('fetching servers')
+		pb.collection<SystemRecord>('systems')
+			.getFullList({ sort: '+name' })
+			.then((records) => {
+				$servers.set(records)
+			})
+	}, [])
 
-const Main = () => (
-	<div className="container mt-7 mb-14">
-		<div class="flex mb-4 justify-end">
-			<ModeToggle />
-		</div>
+	return (
+		<div className="container mt-7 mb-14">
+			<div class="flex mb-4">
+				{/* <Link
+				className={cn('', buttonVariants({ variant: 'ghost', size: 'icon' }))}
+				href="/"
+				title={'All servers'}
+			>
+				<HomeIcon className="h-[1.2rem] w-[1.2rem]" />
+			</Link> */}
+				<div className={'flex gap-1 ml-auto'}>
+					<a
+						title={'Github'}
+						href={'https://github.com/henrygd'}
+						className={cn('', buttonVariants({ variant: 'ghost', size: 'icon' }))}
+					>
+						<Github className="h-[1.2rem] w-[1.2rem]" />
+					</a>
+					<ModeToggle />
+				</div>
+			</div>
 
-		{/* 
+			{/* 
       Routes below are matched exclusively -
       the first matched route gets rendered
     */}
-		<Switch>
-			<Route path="/" component={Home} />
+			<Switch>
+				<Route path="/" component={Home} />
 
-			<Route path="/server/:name" component={ServerDetail}></Route>
-
-			{/* Default route in a switch */}
-			<Route>404: No such page!</Route>
-		</Switch>
-		<CommandPalette />
-	</div>
-)
+				<Route path="/server/:name" component={ServerDetail}></Route>
 
+				{/* Default route in a switch */}
+				<Route>404: No such page!</Route>
+			</Switch>
+			<CommandPalette />
+		</div>
+	)
+}
 render(<App />, document.getElementById('app')!)