feat: Show custom domain in the dashboard if it exists (#5466)

## Description

1. What is this PR about (link the issue and add a short description)

## Steps for reproduction

1. click button
2. expect xyz

## Code Review

- [ ] hi @kof, I need you to do
  - conceptual review (architecture, feature-correctness)
  - detailed review (read every line)
  - test it on preview

## Before requesting a review

- [ ] made a self-review
- [ ] added inline comments where things may be not obvious (the "why",
not "what")

## Before merging

- [ ] tested locally and on preview environment (preview dev login:
0000)
- [ ] updated [test
cases](https://github.com/webstudio-is/webstudio/blob/main/apps/builder/docs/test-cases.md)
document
- [ ] added tests
- [ ] if any new env variables are added, added them to `.env` file

Author: kof

apps/builder/app/dashboard/dashboard.stories.tsx

@@ -50,6 +50,7 @@ const projects = [
     latestBuildVirtual: null,
     marketplaceApprovalStatus: "UNLISTED" as const,
     tags: [],
+    domainsVirtual: [],
   } as DashboardProject,
 ];
 

apps/builder/app/dashboard/projects/project-card.tsx

@@ -37,14 +37,12 @@ const infoIconStyle = css({ flexShrink: 0 });
 
 const PublishedLink = ({
   domain,
-  publisherHost,
   tabIndex,
 }: {
   domain: string;
-  publisherHost: string;
   tabIndex: number;
 }) => {
-  const publishedOrigin = `https://${domain}.${publisherHost}`;
+  const publishedOrigin = `https://${domain}`;
   return (
     <Link
       href={publishedOrigin}
@@ -123,12 +121,19 @@ export const ProjectCard = ({
     latestBuildVirtual,
     previewImageAsset,
     tags,
+    domainsVirtual,
   },
   hasProPlan,
   publisherHost,
   projectsTags,
   ...props
 }: ProjectCardProps) => {
+  // Determine which domain to display: custom domain if available, otherwise wstd subdomain
+  const customDomain = domainsVirtual?.find(
+    (d: { domain: string; status: string; verified: boolean }) =>
+      d.status === "ACTIVE" && d.verified
+  )?.domain;
+  const displayDomain = customDomain ?? `${domain}.${publisherHost}`;
   const [isRenameDialogOpen, setIsRenameDialogOpen] = useState(false);
   const [isDeleteDialogOpen, setIsDeleteDialogOpen] = useState(false);
   const [isShareDialogOpen, setIsShareDialogOpen] = useState(false);
@@ -258,11 +263,7 @@ export const ProjectCard = ({
             </Tooltip>
           </Flex>
           {isPublished ? (
-            <PublishedLink
-              publisherHost={publisherHost}
-              domain={domain}
-              tabIndex={-1}
-            />
+            <PublishedLink domain={displayDomain} tabIndex={-1} />
           ) : (
             <Text color="subtle">Not Published</Text>
           )}

packages/dashboard/src/db/projects.ts

@@ -4,6 +4,88 @@ import {
   type AppContext,
 } from "@webstudio-is/trpc-interface/index.server";
 
+type DomainVirtual = {
+  domain: string;
+  status: string;
+  verified: boolean;
+};
+
+const fetchAndMapDomains = async <
+  T extends {
+    id: string | null;
+    title: string | null;
+    domain: string | null;
+    isDeleted: boolean | null;
+    createdAt: string | null;
+    marketplaceApprovalStatus: string | null;
+  },
+>(
+  projects: T[],
+  context: AppContext
+) => {
+  const projectIds = projects
+    .map((project) => project.id)
+    .filter((id): id is string => id !== null);
+
+  type ProjectWithDomains = SetNonNullable<
+    T,
+    | "id"
+    | "title"
+    | "domain"
+    | "isDeleted"
+    | "createdAt"
+    | "marketplaceApprovalStatus"
+  > & {
+    domainsVirtual: DomainVirtual[];
+  };
+
+  if (projectIds.length === 0) {
+    return projects.map((project) => ({
+      ...project,
+      domainsVirtual: [],
+    })) as ProjectWithDomains[];
+  }
+
+  // Query ProjectDomain and Domain tables
+  const domainsData = await context.postgrest.client
+    .from("ProjectDomain")
+    .select("projectId, Domain!inner(domain, status, txtRecord), txtRecord")
+    .in("projectId", projectIds);
+
+  if (domainsData.error) {
+    console.error("Error fetching domains:", domainsData.error);
+    // Continue without domains rather than failing
+  }
+
+  // Map domains to projects
+  const domainsByProject = new Map<string, DomainVirtual[]>();
+  if (domainsData.data) {
+    for (const projectDomain of domainsData.data) {
+      if (!domainsByProject.has(projectDomain.projectId)) {
+        domainsByProject.set(projectDomain.projectId, []);
+      }
+      // Type assertion needed for joined data
+      const domainData = projectDomain.Domain as unknown as {
+        domain: string;
+        status: string;
+        txtRecord: string;
+      };
+      const verified = domainData.txtRecord === projectDomain.txtRecord;
+      domainsByProject.get(projectDomain.projectId)?.push({
+        domain: domainData.domain,
+        status: domainData.status,
+        verified,
+      });
+    }
+  }
+
+  // Add domains to projects
+  return projects.map((project) => ({
+    ...project,
+    domainsVirtual: project.id ? domainsByProject.get(project.id) || [] : [],
+  })) as ProjectWithDomains[];
+};
+
 export type DashboardProject = Awaited<ReturnType<typeof findMany>>[number];
 
 export const findMany = async (userId: string, context: AppContext) => {
@@ -30,15 +112,7 @@ export const findMany = async (userId: string, context: AppContext) => {
     throw data.error;
   }
 
-  return data.data as SetNonNullable<
-    (typeof data.data)[number],
-    | "id"
-    | "title"
-    | "domain"
-    | "isDeleted"
-    | "createdAt"
-    | "marketplaceApprovalStatus"
-  >[];
+  return await fetchAndMapDomains(data.data, context);
 };
 
 export const findManyByIds = async (
@@ -58,13 +132,6 @@ export const findManyByIds = async (
   if (data.error) {
     throw data.error;
   }
-  return data.data as SetNonNullable<
-    (typeof data.data)[number],
-    | "id"
-    | "title"
-    | "domain"
-    | "isDeleted"
-    | "createdAt"
-    | "marketplaceApprovalStatus"
-  >[];
+
+  return await fetchAndMapDomains(data.data, context);
 };