add banners

src/components/ClientDownloadBanner.tsx

@@ -0,0 +1,69 @@
+"use client";
+
+import React from "react";
+import { Button } from "@app/components/ui/button";
+import { Download } from "lucide-react";
+import { FaApple, FaWindows, FaLinux } from "react-icons/fa";
+import { useTranslations } from "next-intl";
+import Link from "next/link";
+import DismissableBanner from "./DismissableBanner";
+
+export const ClientDownloadBanner = () => {
+    const t = useTranslations();
+
+    return (
+        <DismissableBanner
+            storageKey="client-download-banner-dismissed"
+            version={1}
+            title={t("downloadClientBannerTitle")}
+            titleIcon={<Download className="w-5 h-5 text-primary" />}
+            description={t("downloadClientBannerDescription")}
+        >
+            <Link
+                href="https://pangolin.net/downloads/mac"
+                target="_blank"
+                rel="noopener noreferrer"
+            >
+                <Button
+                    variant="outline"
+                    size="sm"
+                    className="gap-2 hover:bg-primary/10 hover:border-primary/50 transition-colors"
+                >
+                    <FaApple className="w-4 h-4" />
+                    Mac
+                </Button>
+            </Link>
+            <Link
+                href="https://pangolin.net/downloads/windows"
+                target="_blank"
+                rel="noopener noreferrer"
+            >
+                <Button
+                    variant="outline"
+                    size="sm"
+                    className="gap-2 hover:bg-primary/10 hover:border-primary/50 transition-colors"
+                >
+                    <FaWindows className="w-4 h-4" />
+                    Windows
+                </Button>
+            </Link>
+            <Link
+                href="https://pangolin.net/downloads/linux"
+                target="_blank"
+                rel="noopener noreferrer"
+            >
+                <Button
+                    variant="outline"
+                    size="sm"
+                    className="gap-2 hover:bg-primary/10 hover:border-primary/50 transition-colors"
+                >
+                    <FaLinux className="w-4 h-4" />
+                    Linux
+                </Button>
+            </Link>
+        </DismissableBanner>
+    );
+};
+
+export default ClientDownloadBanner;
+

src/components/DismissableBanner.tsx

@@ -0,0 +1,98 @@
+"use client";
+
+import React, { useState, useEffect, type ReactNode } from "react";
+import { Card, CardContent } from "@app/components/ui/card";
+import { X } from "lucide-react";
+import { useTranslations } from "next-intl";
+
+type DismissableBannerProps = {
+    storageKey: string;
+    version: number;
+    title: string;
+    titleIcon: ReactNode;
+    description: string;
+    children?: ReactNode;
+};
+
+export const DismissableBanner = ({
+    storageKey,
+    version,
+    title,
+    titleIcon,
+    description,
+    children
+}: DismissableBannerProps) => {
+    const [isDismissed, setIsDismissed] = useState(true);
+    const t = useTranslations();
+
+    useEffect(() => {
+        const dismissedData = localStorage.getItem(storageKey);
+        if (dismissedData) {
+            try {
+                const parsed = JSON.parse(dismissedData);
+                // If version matches, use the dismissed state
+                if (parsed.version === version) {
+                    setIsDismissed(parsed.dismissed);
+                } else {
+                    // Version changed, show the banner again
+                    setIsDismissed(false);
+                }
+            } catch {
+                // If parsing fails, check for old format (just "true" string)
+                if (dismissedData === "true") {
+                    // Old format, show banner again for new version
+                    setIsDismissed(false);
+                } else {
+                    setIsDismissed(true);
+                }
+            }
+        } else {
+            setIsDismissed(false);
+        }
+    }, [storageKey, version]);
+
+    const handleDismiss = () => {
+        setIsDismissed(true);
+        localStorage.setItem(
+            storageKey,
+            JSON.stringify({ dismissed: true, version })
+        );
+    };
+
+    if (isDismissed) {
+        return null;
+    }
+
+    return (
+        <Card className="mb-6 relative border-primary/30 bg-gradient-to-br from-primary/10 via-background to-background overflow-hidden">
+            <button
+                onClick={handleDismiss}
+                className="absolute top-3 right-3 z-10 p-1.5 rounded-md hover:bg-background/80 transition-colors"
+                aria-label={t("dismiss")}
+            >
+                <X className="w-4 h-4 text-muted-foreground" />
+            </button>
+            <CardContent className="p-6">
+                <div className="flex flex-col lg:flex-row lg:items-center gap-6">
+                    <div className="flex-1 space-y-2 min-w-0">
+                        <h3 className="text-lg font-semibold flex items-center gap-2">
+                            {titleIcon}
+                            {title}
+                        </h3>
+                        <p className="text-sm text-muted-foreground max-w-4xl">
+                            {description}
+                        </p>
+                    </div>
+                    {children && (
+                        <div className="flex flex-wrap gap-3 lg:flex-shrink-0 lg:justify-end">
+                            {children}
+                        </div>
+                    )}
+                </div>
+            </CardContent>
+        </Card>
+    );
+};
+
+export default DismissableBanner;
+

src/components/MachineClientsBanner.tsx

@@ -0,0 +1,60 @@
+"use client";
+
+import React from "react";
+import { Button } from "@app/components/ui/button";
+import { Server, Terminal, Container } from "lucide-react";
+import { useTranslations } from "next-intl";
+import Link from "next/link";
+import DismissableBanner from "./DismissableBanner";
+
+type MachineClientsBannerProps = {
+    orgId: string;
+};
+
+export const MachineClientsBanner = ({
+    orgId
+}: MachineClientsBannerProps) => {
+    const t = useTranslations();
+
+    return (
+        <DismissableBanner
+            storageKey="machine-clients-banner-dismissed"
+            version={1}
+            title={t("machineClientsBannerTitle")}
+            titleIcon={<Server className="w-5 h-5 text-primary" />}
+            description={t("machineClientsBannerDescription")}
+        >
+            <Link
+                href="https://docs.pangolin.net/manage/clients/install-client#pangolin-cli-linux"
+                target="_blank"
+                rel="noopener noreferrer"
+            >
+                <Button
+                    variant="outline"
+                    size="sm"
+                    className="gap-2 hover:bg-primary/10 hover:border-primary/50 transition-colors"
+                >
+                    <Terminal className="w-4 h-4" />
+                    {t("machineClientsBannerPangolinCLI")}
+                </Button>
+            </Link>
+            <Link
+                href="https://docs.pangolin.net/manage/clients/install-client#docker"
+                target="_blank"
+                rel="noopener noreferrer"
+            >
+                <Button
+                    variant="outline"
+                    size="sm"
+                    className="gap-2 hover:bg-primary/10 hover:border-primary/50 transition-colors"
+                >
+                    <Container className="w-4 h-4" />
+                    {t("machineClientsBannerOlmContainer")}
+                </Button>
+            </Link>
+        </DismissableBanner>
+    );
+};
+
+export default MachineClientsBanner;
+

src/components/PrivateResourcesBanner.tsx

@@ -0,0 +1,54 @@
+"use client";
+
+import React from "react";
+import { Button } from "@app/components/ui/button";
+import { Shield, ArrowRight, Laptop, Server } from "lucide-react";
+import { useTranslations } from "next-intl";
+import Link from "next/link";
+import DismissableBanner from "./DismissableBanner";
+
+type PrivateResourcesBannerProps = {
+    orgId: string;
+};
+
+export const PrivateResourcesBanner = ({
+    orgId
+}: PrivateResourcesBannerProps) => {
+    const t = useTranslations();
+
+    return (
+        <DismissableBanner
+            storageKey="private-resources-banner-dismissed"
+            version={1}
+            title={t("privateResourcesBannerTitle")}
+            titleIcon={<Shield className="w-5 h-5 text-primary" />}
+            description={t("privateResourcesBannerDescription")}
+        >
+            <Link href={`/${orgId}/settings/clients/user`}>
+                <Button
+                    variant="outline"
+                    size="sm"
+                    className="gap-2 hover:bg-primary/10 hover:border-primary/50 transition-colors"
+                >
+                    <Laptop className="w-4 h-4" />
+                    {t("sidebarUserDevices")}
+                    <ArrowRight className="w-4 h-4" />
+                </Button>
+            </Link>
+            <Link href={`/${orgId}/settings/clients/machine`}>
+                <Button
+                    variant="outline"
+                    size="sm"
+                    className="gap-2 hover:bg-primary/10 hover:border-primary/50 transition-colors"
+                >
+                    <Server className="w-4 h-4" />
+                    {t("sidebarMachineClients")}
+                    <ArrowRight className="w-4 h-4" />
+                </Button>
+            </Link>
+        </DismissableBanner>
+    );
+};
+
+export default PrivateResourcesBanner;
+

src/components/ProxyResourcesBanner.tsx

@@ -0,0 +1,23 @@
+"use client";
+
+import React from "react";
+import { Globe } from "lucide-react";
+import { useTranslations } from "next-intl";
+import DismissableBanner from "./DismissableBanner";
+
+export const ProxyResourcesBanner = () => {
+    const t = useTranslations();
+
+    return (
+        <DismissableBanner
+            storageKey="proxy-resources-banner-dismissed"
+            version={1}
+            title={t("proxyResourcesBannerTitle")}
+            titleIcon={<Globe className="w-5 h-5 text-primary" />}
+            description={t("proxyResourcesBannerDescription")}
+        />
+    );
+};
+
+export default ProxyResourcesBanner;
+

src/components/SitesBanner.tsx

@@ -0,0 +1,40 @@
+"use client";
+
+import React from "react";
+import { Button } from "@app/components/ui/button";
+import { Plug, ArrowRight } from "lucide-react";
+import { useTranslations } from "next-intl";
+import Link from "next/link";
+import DismissableBanner from "./DismissableBanner";
+
+export const SitesBanner = () => {
+    const t = useTranslations();
+
+    return (
+        <DismissableBanner
+            storageKey="sites-banner-dismissed"
+            version={1}
+            title={t("sitesBannerTitle")}
+            titleIcon={<Plug className="w-5 h-5 text-primary" />}
+            description={t("sitesBannerDescription")}
+        >
+            <Link
+                href="https://docs.pangolin.net/manage/sites/install-site"
+                target="_blank"
+                rel="noopener noreferrer"
+            >
+                <Button
+                    variant="outline"
+                    size="sm"
+                    className="gap-2 hover:bg-primary/10 hover:border-primary/50 transition-colors"
+                >
+                    {t("sitesBannerButtonText")}
+                    <ArrowRight className="w-4 h-4" />
+                </Button>
+            </Link>
+        </DismissableBanner>
+    );
+};
+
+export default SitesBanner;
+

src/components/UserDevicesTable.tsx

@@ -25,6 +25,7 @@ import { useRouter } from "next/navigation";
 import { useMemo, useState, useTransition } from "react";
 import { Badge } from "./ui/badge";
 import { InfoPopup } from "./ui/info-popup";
+import ClientDownloadBanner from "./ClientDownloadBanner";
 
 export type ClientRow = {
     id: number;
@@ -413,6 +414,8 @@ export default function UserDevicesTable({ userClients }: ClientTableProps) {
                 />
             )}
 
+            <ClientDownloadBanner />
+
             <DataTable
                 columns={columns}
                 data={userClients || []}