improve site and resource info cards and other small visual tweaks

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

@@ -0,0 +1,56 @@
+"use client";
+
+import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
+import { InfoIcon } from "lucide-react";
+import { useSiteContext } from "@app/hooks/useSiteContext";
+import { Separator } from "@app/components/ui/separator";
+import {
+    InfoSection,
+    InfoSectionContent,
+    InfoSections,
+    InfoSectionTitle
+} from "@app/components/InfoSection";
+
+type SiteInfoCardProps = {};
+
+export default function SiteInfoCard({}: SiteInfoCardProps) {
+    const { site, updateSite } = useSiteContext();
+
+    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" />
+                    <InfoSection>
+                        <InfoSectionTitle>Connection Type</InfoSectionTitle>
+                        <InfoSectionContent>
+                            {site.type === "newt"
+                                ? "Newt"
+                                : site.type === "wireguard"
+                                  ? "WireGuard"
+                                  : "Unknown"}
+                        </InfoSectionContent>
+                    </InfoSection>
+                </InfoSections>
+            </AlertDescription>
+        </Alert>
+    );
+}

src/app/[orgId]/settings/sites/[niceId]/general/page.tsx

@@ -67,7 +67,7 @@ export default function GeneralPage() {
 
     return (
         <>
-            <div className="space-y-8">
+            <div className="space-y-8 max-w-xl">
                 <SettingsSectionTitle
                     title="General Settings"
                     description="Configure the general settings for this site"

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

@@ -13,8 +13,9 @@ import {
     BreadcrumbItem,
     BreadcrumbList,
     BreadcrumbPage,
-    BreadcrumbSeparator,
+    BreadcrumbSeparator
 } from "@app/components/ui/breadcrumb";
+import SiteInfoCard from "./components/SiteInfoCard";
 
 interface SettingsLayoutProps {
     children: React.ReactNode;
@@ -30,7 +31,7 @@ export default async function SettingsLayout(props: SettingsLayoutProps) {
     try {
         const res = await internal.get<AxiosResponse<GetSiteResponse>>(
             `/org/${params.orgId}/site/${params.niceId}`,
-            await authCookieHeader(),
+            await authCookieHeader()
         );
         site = res.data.data;
     } catch {
@@ -40,8 +41,8 @@ export default async function SettingsLayout(props: SettingsLayoutProps) {
     const sidebarNavItems = [
         {
             title: "General",
-            href: "/{orgId}/settings/sites/{niceId}/general",
-        },
+            href: "/{orgId}/settings/sites/{niceId}/general"
+        }
     ];
 
     return (
@@ -66,10 +67,10 @@ export default async function SettingsLayout(props: SettingsLayoutProps) {
             />
 
             <SiteProvider site={site}>
-                <SidebarSettings
-                    sidebarNavItems={sidebarNavItems}
-                    limitWidth={true}
-                >
+                <SidebarSettings sidebarNavItems={sidebarNavItems}>
+                    <div className="mb-8">
+                        <SiteInfoCard />
+                    </div>
                     {children}
                 </SidebarSettings>
             </SiteProvider>

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

@@ -9,6 +9,8 @@ type SitesPageProps = {
     params: Promise<{ orgId: string }>;
 };
 
+export const dynamic = "force-dynamic";
+
 export default async function SitesPage(props: SitesPageProps) {
     const params = await props.params;
     let sites: ListSitesResponse["sites"] = [];