before conversion to react

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 { Plus } from 'lucide-react'
+import { $publicKey, pb } from '@/lib/stores'
+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 }