updates

dockerfile

@@ -26,4 +26,6 @@ COPY ./site/dist /site/dist
 
 EXPOSE 8080
 
-CMD ["/server", "serve", "--http=0.0.0.0:8080"]
+ENTRYPOINT [ "/server" ]
+
+CMD ["serve", "--http=0.0.0.0:8080"]

site/package.json

@@ -28,7 +28,7 @@
 		"pocketbase": "^0.21.3",
 		"react": "^18.3.1",
 		"react-dom": "^18.3.1",
-    "recharts": "^2.12.7",
+		"recharts": "^2.13.0-alpha.1",
 		"tailwind-merge": "^2.4.0",
 		"tailwindcss-animate": "^1.0.7",
 		"valibot": "^0.36.0"

site/src/components/add-server.tsx

@@ -77,7 +77,7 @@ export function AddServerButton() {
 			<DialogTrigger asChild>
 				<Button variant="outline" className="flex gap-1">
 					<Plus className="h-4 w-4 mr-auto" />
-					Add Server
+					Add <span className="hidden sm:inline">Server</span>
 				</Button>
 			</DialogTrigger>
 			<DialogContent className="sm:max-w-[425px]">

site/src/components/login.tsx

@@ -29,7 +29,7 @@ export default function () {
 			</div>
 			<div className="relative hidden h-full flex-col bg-muted p-10 text-white dark:border-r lg:flex">
 				<div
-					className="absolute inset-0 bg-slate-900 bg-cover opacity-80"
+					className="absolute inset-0 bg-background bg-cover opacity-80"
 					style={{
 						backgroundImage: `url(https://directus.cloud/assets/waves.2b156907.svg)`,
 					}}

site/src/components/server-table/data-table.tsx

@@ -27,7 +27,6 @@ import {
 	DropdownMenu,
 	DropdownMenuContent,
 	DropdownMenuItem,
-	DropdownMenuLabel,
 	DropdownMenuSeparator,
 	DropdownMenuTrigger,
 } from '@/components/ui/dropdown-menu'
@@ -53,6 +52,9 @@ import {
 	MemoryStick,
 	HardDrive,
 	CopyIcon,
+	PauseCircleIcon,
+	PlayCircleIcon,
+	Trash2Icon,
 } from 'lucide-react'
 import { useMemo, useState } from 'react'
 import { $servers, pb, navigate } from '@/lib/stores'
@@ -62,12 +64,6 @@ import { cn, copyToClipboard } from '@/lib/utils'
 
 function CellFormatter(info: CellContext<SystemRecord, unknown>) {
 	const val = info.getValue() as number
-	// let color = 'green'
-	// if (val > 80) {
-	// 	color = 'red'
-	// } else if (val > 50) {
-	// 	color = 'yellow'
-	// }
 	return (
 		<div className="flex gap-2 items-center">
 			<span className="grow min-w-10 block bg-muted h-4 relative rounded-sm overflow-hidden">
@@ -181,14 +177,28 @@ export default function () {
 												})
 											}}
 										>
-											{status === 'paused' ? 'Resume' : 'Pause'}
+											{status === 'paused' ? (
+												<>
+													<PlayCircleIcon className="mr-2.5 h-4 w-4" />
+													Resume
+												</>
+											) : (
+												<>
+													<PauseCircleIcon className="mr-2.5 h-4 w-4" />
+													Pause
+												</>
+											)}
 										</DropdownMenuItem>
 										<DropdownMenuItem onClick={() => copyToClipboard(host)}>
+											<CopyIcon className="mr-2.5 h-4 w-4" />
 											Copy host
 										</DropdownMenuItem>
 										<DropdownMenuSeparator />
 										<AlertDialogTrigger asChild>
-											<DropdownMenuItem>Delete server</DropdownMenuItem>
+											<DropdownMenuItem>
+												<Trash2Icon className="mr-2.5 h-4 w-4" />
+												Delete
+											</DropdownMenuItem>
 										</AlertDialogTrigger>
 									</DropdownMenuContent>
 								</DropdownMenu>
@@ -236,7 +246,7 @@ export default function () {
 	return (
 		<>
 			<div className="w-full">
-				<div className="flex items-center mb-4">
+				<div className="flex items-center mb-4 gap-2">
 					<Input
 						// @ts-ignore
 						placeholder="Filter..."
@@ -271,7 +281,9 @@ export default function () {
 									<TableRow
 										key={row.original.id}
 										data-state={row.getIsSelected() && 'selected'}
-										className="cursor-pointer"
+										className={cn('cursor-pointer transition-opacity', {
+											'opacity-50': row.original.status === 'paused',
+										})}
 										onClick={(e) => {
 											const target = e.target as HTMLElement
 											if (target.tagName !== 'BUTTON' && !target.hasAttribute('role')) {

site/src/components/ui/chart.tsx

@@ -124,15 +124,13 @@ const ChartTooltipContent = React.forwardRef<
 	) => {
 		const { config } = useChart()
 
-		payload = React.useMemo(() => {
+		React.useMemo(() => {
 			if (itemSorter) {
-				return payload.sort(itemSorter)
+				// @ts-ignore
+				payload?.sort(itemSorter)
 			}
-			return payload
 		}, [itemSorter, payload])
 
-		// console.log('iiiiii', itemSorter)
-
 		const tooltipLabel = React.useMemo(() => {
 			if (hideLabel || !payload?.length) {
 				return null

site/src/main.tsx

@@ -3,11 +3,11 @@ import React, { Suspense, lazy, useEffect } from 'react'
 import ReactDOM from 'react-dom/client'
 import Home from './components/routes/home.tsx'
 import { ThemeProvider } from './components/theme-provider.tsx'
-import { $authenticated, $router, $servers, navigate } from './lib/stores.ts'
+import { $authenticated, $router, $servers, navigate, pb } from './lib/stores.ts'
 import { ModeToggle } from './components/mode-toggle.tsx'
 import { cn, updateFavicon, updateServerList } from './lib/utils.ts'
 import { buttonVariants } from './components/ui/button.tsx'
-import { Github } from 'lucide-react'
+import { DatabaseBackupIcon, Github, LogOutIcon, LogsIcon, UserIcon } from 'lucide-react'
 import { useStore } from '@nanostores/react'
 import { Toaster } from './components/ui/toaster.tsx'
 import { Logo } from './components/logo.tsx'
@@ -17,6 +17,13 @@ import {
 	TooltipTrigger,
 	TooltipContent,
 } from '@/components/ui/tooltip.tsx'
+import {
+	DropdownMenu,
+	DropdownMenuContent,
+	DropdownMenuItem,
+	DropdownMenuSeparator,
+	DropdownMenuTrigger,
+} from './components/ui/dropdown-menu.tsx'
 
 const ServerDetail = lazy(() => import('./components/routes/server.tsx'))
 const CommandPalette = lazy(() => import('./components/command-palette.tsx'))
@@ -39,17 +46,20 @@ const App = () => {
 			for (const server of servers) {
 				if (server.status === 'down') {
 					updateFavicon('/favicon-red.svg')
-					return
+					break
 				} else if (server.status === 'up') {
 					up = true
 				}
 			}
 			updateFavicon(up ? '/favicon-green.svg' : '/favicon.svg')
 		}
+		return () => {
+			updateFavicon('/favicon.svg')
+		}
 	}, [authenticated, servers])
 
 	if (!page) {
-		return <h1>404</h1>
+		return <h1 className="text-3xl text-center my-14">404</h1>
 	} else if (page.path === '/') {
 		return <Home />
 	} else if (page.route === 'server') {
@@ -84,7 +94,37 @@ const Layout = () => {
 						<Logo className="h-[1.2em] fill-foreground" />
 					</a>
 
-					<div className={'flex gap-1 ml-auto'}>
+					<div className={'flex ml-auto'}>
+						<DropdownMenu>
+							<DropdownMenuTrigger asChild>
+								<a
+									aria-label="User Actions"
+									href={'https://github.com/henrygd'}
+									className={cn('', buttonVariants({ variant: 'ghost', size: 'icon' }))}
+								>
+									<UserIcon className="h-[1.2rem] w-[1.2rem]" />
+								</a>
+							</DropdownMenuTrigger>
+							<DropdownMenuContent>
+								<DropdownMenuItem onSelect={() => pb.authStore.clear()}>
+									<LogOutIcon className="mr-2.5 h-4 w-4" />
+									<span>Log out</span>
+								</DropdownMenuItem>
+								<DropdownMenuSeparator />
+								<DropdownMenuItem asChild>
+									<a href="/_/#/logs">
+										<LogsIcon className="mr-2.5 h-4 w-4" />
+										<span>Logs</span>
+									</a>
+								</DropdownMenuItem>
+								<DropdownMenuItem asChild>
+									<a href="/_/#/settings/backups">
+										<DatabaseBackupIcon className="mr-2.5 h-4 w-4" />
+										<span>Backups</span>
+									</a>
+								</DropdownMenuItem>
+							</DropdownMenuContent>
+						</DropdownMenu>
 						<TooltipProvider delayDuration={300}>
 							<Tooltip>
 								<TooltipTrigger asChild>
@@ -118,7 +158,9 @@ const Layout = () => {
 ReactDOM.createRoot(document.getElementById('app')!).render(
 	<React.StrictMode>
 		<ThemeProvider>
+			<Suspense>
 				<Layout />
+			</Suspense>
 		</ThemeProvider>
 	</React.StrictMode>
 )