TLS recommendation

src/App.tsx

@@ -11,6 +11,7 @@ import Sidebar from "./components/view/Sidebar";
 import { ThemeProvider } from "next-themes";
 import Page from "./components/page/PageView";
 import { SettingsDialog } from "./components/settings/SettingsDialog";
+import { TooltipProvider } from "./components/ui/tooltip";
 
 export default function App() {
   const appRef = useRef<Enclave | null>(null);
@@ -31,35 +32,40 @@ export default function App() {
 
   return (
     <ThemeProvider attribute="class" defaultTheme="system">
-      <main className="size-screen flex select-none cursor-default">
-        {appRef.current?.accounts &&
-        appRef.current.accounts.accounts.length === 0 ? (
-          <NewProfilePage appRef={appRef} />
-        ) : (
-          <>
-            <ResizablePanelGroup orientation="horizontal" className="h-screen">
-              <ResizablePanel
-                defaultSize="600px"
-                maxSize="400px"
-                minSize="4rem"
-                groupResizeBehavior="preserve-pixel-size"
+      <TooltipProvider>
+        <main className="size-screen flex select-none cursor-default">
+          {appRef.current?.accounts &&
+          appRef.current.accounts.accounts.length === 0 ? (
+            <NewProfilePage appRef={appRef} />
+          ) : (
+            <>
+              <ResizablePanelGroup
+                orientation="horizontal"
+                className="h-screen"
               >
-                <div className="flex">
-                  <ServerList appRef={appRef} />
-                  <Sidebar appRef={appRef} />
-                </div>
-              </ResizablePanel>
-              <ResizableHandle withHandle />
+                <ResizablePanel
+                  defaultSize="600px"
+                  maxSize="400px"
+                  minSize="4rem"
+                  groupResizeBehavior="preserve-pixel-size"
+                >
+                  <div className="flex">
+                    <ServerList appRef={appRef} />
+                    <Sidebar appRef={appRef} />
+                  </div>
+                </ResizablePanel>
+                <ResizableHandle withHandle />
 
-              <ResizablePanel defaultSize="100%">
-                <Page appRef={appRef} />
-              </ResizablePanel>
-            </ResizablePanelGroup>
+                <ResizablePanel defaultSize="100%">
+                  <Page appRef={appRef} />
+                </ResizablePanel>
+              </ResizablePanelGroup>
 
-            <SettingsDialog appRef={appRef} />
-          </>
-        )}
-      </main>
+              <SettingsDialog appRef={appRef} />
+            </>
+          )}
+        </main>
+      </TooltipProvider>
     </ThemeProvider>
   );
 }

src/components/dialog/AddServerDialog.tsx

@@ -12,7 +12,8 @@ import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { Switch } from "@/components/ui/switch";
 import { Button } from "@/components/ui/button";
-import { PlusIcon } from "lucide-react";
+import { Info, PlusIcon } from "lucide-react";
+import { Tooltip, TooltipContent, TooltipTrigger } from "../ui/tooltip";
 
 // hostname[:port][/path] — explicitly no protocol/scheme allowed
 const HOSTNAME_PATTERN =
@@ -38,7 +39,7 @@ type AddServerDialogProps = {
 export function AddServerDialog({ onAdd }: AddServerDialogProps) {
   const [open, setOpen] = useState(false);
   const [hostname, setHostname] = useState("");
-  const [isSecure, setIsSecure] = useState(true);
+  const [isSecure, setIsSecure] = useState(false);
   const [error, setError] = useState<string | null>(null);
   const [submitting, setSubmitting] = useState(false);
 
@@ -106,9 +107,24 @@ export function AddServerDialog({ onAdd }: AddServerDialogProps) {
           </div>
 
           <div className="flex items-center justify-between">
-            <Label htmlFor="secure-toggle" className="flex flex-col gap-1">
-              Secure connection
-            </Label>
+            <Tooltip>
+              <TooltipTrigger>
+                <Label
+                  htmlFor="secure-toggle"
+                  className="flex items-center gap-1 cursor-help"
+                >
+                  TLS
+                  <Info className="h-3.5 w-3.5 text-muted-foreground" />
+                </Label>
+              </TooltipTrigger>
+
+              <TooltipContent>
+                <p className="max-w-xs">
+                  TLS is not recommended because there is a encryption layer
+                  already built in to Enclave
+                </p>
+              </TooltipContent>
+            </Tooltip>
             <Switch
               id="secure-toggle"
               checked={isSecure}

src/components/ui/tooltip.tsx

@@ -0,0 +1,64 @@
+import { Tooltip as TooltipPrimitive } from "@base-ui/react/tooltip"
+
+import { cn } from "@/lib/utils"
+
+function TooltipProvider({
+  delay = 0,
+  ...props
+}: TooltipPrimitive.Provider.Props) {
+  return (
+    <TooltipPrimitive.Provider
+      data-slot="tooltip-provider"
+      delay={delay}
+      {...props}
+    />
+  )
+}
+
+function Tooltip({ ...props }: TooltipPrimitive.Root.Props) {
+  return <TooltipPrimitive.Root data-slot="tooltip" {...props} />
+}
+
+function TooltipTrigger({ ...props }: TooltipPrimitive.Trigger.Props) {
+  return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />
+}
+
+function TooltipContent({
+  className,
+  side = "top",
+  sideOffset = 4,
+  align = "center",
+  alignOffset = 0,
+  children,
+  ...props
+}: TooltipPrimitive.Popup.Props &
+  Pick<
+    TooltipPrimitive.Positioner.Props,
+    "align" | "alignOffset" | "side" | "sideOffset"
+  >) {
+  return (
+    <TooltipPrimitive.Portal>
+      <TooltipPrimitive.Positioner
+        align={align}
+        alignOffset={alignOffset}
+        side={side}
+        sideOffset={sideOffset}
+        className="isolate z-50"
+      >
+        <TooltipPrimitive.Popup
+          data-slot="tooltip-content"
+          className={cn(
+            "z-50 inline-flex w-fit max-w-xs origin-(--transform-origin) items-center gap-1.5 rounded-md bg-foreground px-3 py-1.5 text-xs text-background has-data-[slot=kbd]:pr-1.5 data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-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 **:data-[slot=kbd]:relative **:data-[slot=kbd]:isolate **:data-[slot=kbd]:z-50 **:data-[slot=kbd]:rounded-sm data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
+            className
+          )}
+          {...props}
+        >
+          {children}
+          <TooltipPrimitive.Arrow className="z-50 size-2.5 translate-y-[calc(-50%-2px)] rotate-45 rounded-[2px] bg-foreground fill-foreground data-[side=bottom]:top-1 data-[side=inline-end]:top-1/2! data-[side=inline-end]:-left-1 data-[side=inline-end]:-translate-y-1/2 data-[side=inline-start]:top-1/2! data-[side=inline-start]:-right-1 data-[side=inline-start]:-translate-y-1/2 data-[side=left]:top-1/2! data-[side=left]:-right-1 data-[side=left]:-translate-y-1/2 data-[side=right]:top-1/2! data-[side=right]:-left-1 data-[side=right]:-translate-y-1/2 data-[side=top]:-bottom-2.5" />
+        </TooltipPrimitive.Popup>
+      </TooltipPrimitive.Positioner>
+    </TooltipPrimitive.Portal>
+  )
+}
+
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }