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" : "--",
+                mbIn:
-                mbOut: data.type == "wireguard" || data.type == "newt" ? "0 MB" : "--",
+                    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,8 +337,6 @@ 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"
@@ -345,17 +349,21 @@ PersistentKeepalive = 5`
                             </span>
                             <SquareArrowOutUpRight size={14} />
                         </Link>
-                        </>
                     )}
 
                     {form.watch("method") === "local" && (
-                        <>
+                        <Link
-                            <br />
+                            className="text-sm text-primary flex items-center gap-1"
-                            <p>
+                            href="https://docs.fossorial.io/Pangolin/without-tunneling"
-                                Data will leave Traefik and go wherever you
+                            target="_blank"
-                                want; no tunneling involved.
+                            rel="noopener noreferrer"
-                            </p>
+                        >
-                        </>
+                            <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,7 +146,10 @@ export default function SitesTable({ sites, orgId }: SitesTableProps) {
             },
             cell: ({ row }) => {
                 const originalRow = row.original;
-
+                if (
+                    originalRow.type == "newt" ||
+                    originalRow.type == "wireguard"
+                ) {
                     if (originalRow.online) {
                         return (
                             <span className="text-green-500 flex items-center space-x-2">
@@ -162,6 +165,9 @@ export default function SitesTable({ sites, orgId }: SitesTableProps) {
                             </span>
                         );
                     }
+                } else {
+                    return <span>--</span>;
+                }
             }
         },
         {

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

@@ -16,12 +16,26 @@ 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>
+                    {(site.type == "newt" || site.type == "wireguard") && (
+                        <>
                             <InfoSection>
                                 <InfoSectionTitle>Status</InfoSectionTitle>
                                 <InfoSectionContent>
@@ -38,15 +52,14 @@ export default function SiteInfoCard({}: SiteInfoCardProps) {
                                     )}
                                 </InfoSectionContent>
                             </InfoSection>
+
                             <Separator orientation="vertical" />
+                        </>
+                    )}
                     <InfoSection>
                         <InfoSectionTitle>Connection Type</InfoSectionTitle>
                         <InfoSectionContent>
-                            {site.type === "newt"
+                            {getConnectionTypeString(site.type)}
-                                ? "Newt"
-                                : site.type === "wireguard"
-                                  ? "WireGuard"
-                                  : "Unknown"}
                         </InfoSectionContent>
                     </InfoSection>
                 </InfoSections>