before conversion to react

site/package.json

@@ -15,6 +15,7 @@
     "@radix-ui/react-dropdown-menu": "^2.1.1",
     "@radix-ui/react-label": "^2.1.0",
     "@radix-ui/react-slot": "^1.1.0",
+    "@radix-ui/react-tooltip": "^1.1.2",
     "@tanstack/react-table": "^8.19.2",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
@@ -22,19 +23,19 @@
     "lucide-react": "^0.401.0",
     "nanostores": "^0.10.3",
     "pocketbase": "^0.21.3",
-    "preact": "^10.22.0",
+    "preact": "^10.22.1",
     "tailwind-merge": "^2.4.0",
     "tailwindcss-animate": "^1.0.7",
     "valibot": "^0.36.0",
     "wouter-preact": "^3.3.1"
   },
   "devDependencies": {
-    "@preact/preset-vite": "^2.8.2",
+    "@preact/preset-vite": "^2.8.3",
     "@types/bun": "^1.1.6",
     "autoprefixer": "^10.4.19",
     "postcss": "^8.4.39",
     "tailwindcss": "^3.4.4",
-    "typescript": "^5.2.2",
+    "typescript": "^5.5.3",
-    "vite": "^5.3.1"
+    "vite": "^5.3.3"
   }
 }

site/src/components/add-server.tsx

@@ -8,10 +8,12 @@ import {
 	DialogTitle,
 	DialogTrigger,
 } from '@/components/ui/dialog'
+import { TooltipProvider, Tooltip, TooltipTrigger, TooltipContent } from '@/components/ui/tooltip'
+
 import { Input } from '@/components/ui/input'
 import { Label } from '@/components/ui/label'
-import { pb } from '@/lib/stores'
+import { $publicKey, pb } from '@/lib/stores'
-import { Plus } from 'lucide-react'
+import { ClipboardIcon, Plus } from 'lucide-react'
 import { MutableRef, useRef, useState } from 'preact/hooks'
 
 function copyDockerCompose(port: string) {
@@ -101,6 +103,36 @@ export function AddServerButton() {
 								required
 							/>
 						</div>
+						<div className="grid grid-cols-4 items-center gap-4 relative">
+							<Label for="s-port" className="text-right">
+								Public Key
+							</Label>
+							<Input
+								readonly
+								name="s-port"
+								id="s-port"
+								value={$publicKey.get()}
+								className="col-span-3"
+								required
+							></Input>
+							<div
+								className={
+									'h-6 w-28 bg-gradient-to-r from-transparent to-background to-70% absolute right-1 pointer-events-none'
+								}
+							></div>
+							<TooltipProvider className="z-10">
+								<Tooltip>
+									<TooltipTrigger asChild>
+										<Button type="button" variant={'link'} className="absolute right-0 z-50">
+											<ClipboardIcon className="h-4 w-4 " />
+										</Button>
+									</TooltipTrigger>
+									<TooltipContent>
+										<p>Click to copy</p>
+									</TooltipContent>
+								</Tooltip>
+							</TooltipProvider>
+						</div>
 					</div>
 					<DialogFooter>
 						<Button

site/src/components/test.tsx

@@ -0,0 +1,23 @@
+import { Button } from '@/components/ui/button'
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip'
+
+export function TooltipDemo() {
+	return (
+		<TooltipProvider delayDuration={0}>
+			<Tooltip>
+				<TooltipTrigger>
+					<Button
+						onMouseEnter={() => console.log('hovered')}
+						onMouseLeave={() => console.log('unhovered')}
+						variant="outline"
+					>
+						Hover
+					</Button>
+				</TooltipTrigger>
+				<TooltipContent hideWhenDetached={true} className="pointer-events-none">
+					<p>Add to library</p>
+				</TooltipContent>
+			</Tooltip>
+		</TooltipProvider>
+	)
+}

site/src/components/ui/tooltip.tsx

@@ -0,0 +1,28 @@
+import * as React from 'react'
+import * as TooltipPrimitive from '@radix-ui/react-tooltip'
+
+import { cn } from '@/lib/utils'
+
+const TooltipProvider = TooltipPrimitive.Provider
+
+const Tooltip = TooltipPrimitive.Root
+
+const TooltipTrigger = TooltipPrimitive.Trigger
+
+const TooltipContent = React.forwardRef<
+	React.ElementRef<typeof TooltipPrimitive.Content>,
+	React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
+>(({ className, sideOffset = 4, ...props }, ref) => (
+	<TooltipPrimitive.Content
+		ref={ref}
+		sideOffset={sideOffset}
+		className={cn(
+			'z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+			className
+		)}
+		{...props}
+	/>
+))
+TooltipContent.displayName = TooltipPrimitive.Content.displayName
+
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }

site/src/lib/stores.ts

@@ -12,3 +12,5 @@ export const $authenticated = atom(pb.authStore.isValid)
 pb.authStore.onChange(() => {
 	$authenticated.set(pb.authStore.isValid)
 })
+
+export const $publicKey = atom('')

site/src/main.tsx

@@ -25,12 +25,17 @@ const Main = () => {
 	// const servers = useStore($servers)
 
 	useEffect(() => {
-		console.log('fetching servers')
+		// get servers
 		pb.collection<SystemRecord>('systems')
 			.getFullList({ sort: '+name' })
 			.then((records) => {
 				$servers.set(records)
 			})
+
+		// get public key
+		pb.send('/getkey', {}).then(({ key }) => {
+			console.log('key', key)
+		})
 	}, [])
 
 	return (