Go to domains if no domains

messages/en-US.json

@@ -1995,6 +1995,9 @@
     "domainPickerSubdomain": "Subdomain: {subdomain}",
     "domainPickerNamespace": "Namespace: {namespace}",
     "domainPickerShowMore": "Show More",
+    "domainPickerNoDomainsAvailableTitle": "No domains available",
+    "domainPickerNoDomainsAvailableDescription": "You don't have any domains set up yet. Create a domain to continue.",
+    "domainPickerNoDomainsAvailableAction": "Go to Domains",
     "regionSelectorTitle": "Select Region",
     "domainPickerRemoteExitNodeWarning": "Provided domains are not supported when sites connect to remote exit nodes. For resources to be available on remote nodes, use a custom domain instead.",
     "regionSelectorInfo": "Selecting a region helps us provide better performance for your location. You do not have to be in the same region as your server.",

src/components/DomainPicker.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { Alert, AlertDescription } from "@/components/ui/alert";
+import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
 import { Button } from "@/components/ui/button";
 import { Card, CardContent } from "@/components/ui/card";
 import {
@@ -43,10 +43,12 @@ import {
     CheckCircle2,
     ChevronsUpDown,
     ExternalLink,
+    Globe,
     KeyRound,
     Zap
 } from "lucide-react";
 import { useTranslations } from "next-intl";
+import Link from "next/link";
 import { PaidFeaturesAlert } from "@app/components/PaidFeaturesAlert";
 import { usePaidStatus } from "@/hooks/usePaidStatus";
 import { TierFeature, tierMatrix } from "@server/lib/billing/tierMatrix";
@@ -494,6 +496,28 @@ export default function DomainPicker({
     const hasMoreProvided =
         sortedAvailableOptions.length > providedDomainsShown;
 
+    const noDomainsAvailable =
+        !loadingDomains &&
+        organizationDomains.length === 0 &&
+        (build === "oss" || hideFreeDomain || requiresPaywall);
+
+    if (noDomainsAvailable) {
+        return (
+            <Alert>
+                <Globe className="h-4 w-4" />
+                <AlertTitle>{t("domainPickerNoDomainsAvailableTitle")}</AlertTitle>
+                <AlertDescription className="space-y-3">
+                    <p>{t("domainPickerNoDomainsAvailableDescription")}</p>
+                    <Button asChild size="sm" variant="outline">
+                        <Link href={`/${orgId}/settings/domains`}>
+                            {t("domainPickerNoDomainsAvailableAction")}
+                        </Link>
+                    </Button>
+                </AlertDescription>
+            </Alert>
+        );
+    }
+
     return (
         <div className="space-y-4">
             <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">