Resolve ui quirks, add link

src/app/[orgId]/settings/sites/CreateSiteForm.tsx

@@ -200,8 +200,14 @@ export default function CreateSiteForm({
                 name: data.name,
                 id: data.siteId,
                 nice: data.niceId.toString(),
-                mbIn: data.type == "wireguard" || data.type == "newt" ? "0 MB" : "--",
-                mbOut: data.type == "wireguard" || data.type == "newt" ? "0 MB" : "--",
+                mbIn:
+                    data.type == "wireguard" || data.type == "newt"
+                        ? "0 MB"
+                        : "--",
+                mbOut:
+                    data.type == "wireguard" || data.type == "newt"
+                        ? "0 MB"
+                        : "--",
                 orgId: orgId as string,
                 type: data.type as any,
                 online: false
@@ -331,31 +337,33 @@ PersistentKeepalive = 5`
                     </div>
 
                     {form.watch("method") === "newt" && (
-                        <>
-                            <br />
-                            <Link
-                                className="text-sm text-primary flex items-center gap-1"
-                                href="https://docs.fossorial.io/Newt/install"
-                                target="_blank"
-                                rel="noopener noreferrer"
-                            >
-                                <span>
-                                    {" "}
-                                    Learn how to install Newt on your system
-                                </span>
-                                <SquareArrowOutUpRight size={14} />
-                            </Link>
-                        </>
+                        <Link
+                            className="text-sm text-primary flex items-center gap-1"
+                            href="https://docs.fossorial.io/Newt/install"
+                            target="_blank"
+                            rel="noopener noreferrer"
+                        >
+                            <span>
+                                {" "}
+                                Learn how to install Newt on your system
+                            </span>
+                            <SquareArrowOutUpRight size={14} />
+                        </Link>
                     )}
 
                     {form.watch("method") === "local" && (
-                        <>
-                            <br />
-                            <p>
-                                Data will leave Traefik and go wherever you
-                                want; no tunneling involved.
-                            </p>
-                        </>
+                        <Link
+                            className="text-sm text-primary flex items-center gap-1"
+                            href="https://docs.fossorial.io/Pangolin/without-tunneling"
+                            target="_blank"
+                            rel="noopener noreferrer"
+                        >
+                            <span>
+                                {" "}
+                                Local sites do not tunnel, learn more
+                            </span>
+                            <SquareArrowOutUpRight size={14} />
+                        </Link>
                     )}
 
                     {(form.watch("method") === "newt" ||

src/app/[orgId]/settings/sites/SitesTable.tsx

@@ -23,7 +23,7 @@ import { useState } from "react";
 import CreateSiteForm from "./CreateSiteForm";
 import ConfirmDeleteDialog from "@app/components/ConfirmDeleteDialog";
 import { useToast } from "@app/hooks/useToast";
-import { formatAxiosError } from "@app/lib/api";;
+import { formatAxiosError } from "@app/lib/api";
 import { createApiClient } from "@app/lib/api";
 import { useEnvContext } from "@app/hooks/useEnvContext";
 import CreateSiteFormModal from "./CreateSiteModal";
@@ -146,21 +146,27 @@ export default function SitesTable({ sites, orgId }: SitesTableProps) {
             },
             cell: ({ row }) => {
                 const originalRow = row.original;
-
-                if (originalRow.online) {
-                    return (
-                        <span className="text-green-500 flex items-center space-x-2">
-                            <div className="w-2 h-2 bg-green-500 rounded-full"></div>
-                            <span>Online</span>
-                        </span>
-                    );
+                if (
+                    originalRow.type == "newt" ||
+                    originalRow.type == "wireguard"
+                ) {
+                    if (originalRow.online) {
+                        return (
+                            <span className="text-green-500 flex items-center space-x-2">
+                                <div className="w-2 h-2 bg-green-500 rounded-full"></div>
+                                <span>Online</span>
+                            </span>
+                        );
+                    } else {
+                        return (
+                            <span className="text-neutral-500 flex items-center space-x-2">
+                                <div className="w-2 h-2 bg-gray-500 rounded-full"></div>
+                                <span>Offline</span>
+                            </span>
+                        );
+                    }
                 } else {
-                    return (
-                        <span className="text-neutral-500 flex items-center space-x-2">
-                            <div className="w-2 h-2 bg-gray-500 rounded-full"></div>
-                            <span>Offline</span>
-                        </span>
-                    );
+                    return <span>--</span>;
                 }
             }
         },

src/app/[orgId]/settings/sites/[niceId]/SiteInfoCard.tsx

@@ -16,37 +16,50 @@ type SiteInfoCardProps = {};
 export default function SiteInfoCard({}: SiteInfoCardProps) {
     const { site, updateSite } = useSiteContext();
 
+    const getConnectionTypeString = (type: string) => {
+        if (type === "newt") {
+            return "Newt";
+        } else if (type === "wireguard") {
+            return "WireGuard";
+        } else if (type === "local") {
+            return "Local";
+        } else {
+            return "Unknown";
+        }
+    };
+
     return (
         <Alert>
             <InfoIcon className="h-4 w-4" />
             <AlertTitle className="font-semibold">Site Information</AlertTitle>
             <AlertDescription className="mt-4">
                 <InfoSections>
-                    <InfoSection>
-                        <InfoSectionTitle>Status</InfoSectionTitle>
-                        <InfoSectionContent>
-                            {site.online ? (
-                                <div className="text-green-500 flex items-center space-x-2">
-                                    <div className="w-2 h-2 bg-green-500 rounded-full"></div>
-                                    <span>Online</span>
-                                </div>
-                            ) : (
-                                <div className="text-neutral-500 flex items-center space-x-2">
-                                    <div className="w-2 h-2 bg-gray-500 rounded-full"></div>
-                                    <span>Offline</span>
-                                </div>
-                            )}
-                        </InfoSectionContent>
-                    </InfoSection>
-                    <Separator orientation="vertical" />
+                    {(site.type == "newt" || site.type == "wireguard") && (
+                        <>
+                            <InfoSection>
+                                <InfoSectionTitle>Status</InfoSectionTitle>
+                                <InfoSectionContent>
+                                    {site.online ? (
+                                        <div className="text-green-500 flex items-center space-x-2">
+                                            <div className="w-2 h-2 bg-green-500 rounded-full"></div>
+                                            <span>Online</span>
+                                        </div>
+                                    ) : (
+                                        <div className="text-neutral-500 flex items-center space-x-2">
+                                            <div className="w-2 h-2 bg-gray-500 rounded-full"></div>
+                                            <span>Offline</span>
+                                        </div>
+                                    )}
+                                </InfoSectionContent>
+                            </InfoSection>
+
+                            <Separator orientation="vertical" />
+                        </>
+                    )}
                     <InfoSection>
                         <InfoSectionTitle>Connection Type</InfoSectionTitle>
                         <InfoSectionContent>
-                            {site.type === "newt"
-                                ? "Newt"
-                                : site.type === "wireguard"
-                                  ? "WireGuard"
-                                  : "Unknown"}
+                            {getConnectionTypeString(site.type)}
                         </InfoSectionContent>
                     </InfoSection>
                 </InfoSections>