refactor: deploy UI issues and way we access data

web/apps/dashboard/app/(app)/[workspaceSlug]/projects/[projectId]/(overview)/components/empty-section.tsx

@@ -0,0 +1,33 @@
+"use client";
+
+import { cn } from "@/lib/utils";
+import { Link4 } from "@unkey/icons";
+import { Empty } from "@unkey/ui";
+import type { PropsWithChildren, ReactNode } from "react";
+
+type EmptySectionProps = PropsWithChildren<{
+  title: string;
+  description: string;
+  icon?: ReactNode;
+  className?: string;
+}>;
+
+export const EmptySection = ({
+  title,
+  description,
+  children,
+  icon = <Link4 className="size-6" />,
+  className,
+}: EmptySectionProps) => (
+  <Empty
+    className={cn(
+      "min-h-[150px] rounded-[14px] border border-dashed border-gray-4 bg-gray-1/50",
+      className,
+    )}
+  >
+    <Empty.Icon>{icon}</Empty.Icon>
+    <Empty.Title>{title}</Empty.Title>
+    <Empty.Description className="max-w-sm">{description}</Empty.Description>
+    {children && <Empty.Actions>{children}</Empty.Actions>}
+  </Empty>
+);

web/apps/dashboard/app/(app)/[workspaceSlug]/projects/[projectId]/(overview)/data-provider.tsx

@@ -0,0 +1,127 @@
+"use client";
+
+import { collection } from "@/lib/collections";
+import type { Deployment } from "@/lib/collections/deploy/deployments";
+import type { Domain } from "@/lib/collections/deploy/domains";
+import type { Environment } from "@/lib/collections/deploy/environments";
+import type { Project } from "@/lib/collections/deploy/projects";
+import { eq, useLiveQuery } from "@tanstack/react-db";
+import { useParams } from "next/navigation";
+import { type PropsWithChildren, createContext, useContext, useMemo } from "react";
+
+type ProjectDataContextType = {
+  projectId: string;
+
+  project: Project | undefined;
+  isProjectLoading: boolean;
+
+  domains: Domain[];
+  deployments: Deployment[];
+  environments: Environment[];
+
+  isDomainsLoading: boolean;
+  isDeploymentsLoading: boolean;
+  isEnvironmentsLoading: boolean;
+
+  getDomainsForDeployment: (deploymentId: string) => Domain[];
+  getLiveDomains: () => Domain[];
+  getEnvironmentOrLiveDomains: () => Domain[];
+  getDeploymentById: (id: string) => Deployment | undefined;
+
+  refetchDomains: () => void;
+  refetchDeployments: () => void;
+  refetchAll: () => void;
+};
+
+const ProjectDataContext = createContext<ProjectDataContextType | null>(null);
+
+export const ProjectDataProvider = ({ children }: PropsWithChildren) => {
+  const params = useParams();
+  const projectId = params?.projectId;
+
+  if (!projectId || typeof projectId !== "string") {
+    throw new Error("ProjectDataProvider must be used within a project route");
+  }
+
+  const domainsQuery = useLiveQuery(
+    (q) =>
+      q
+        .from({ domain: collection.domains })
+        .where(({ domain }) => eq(domain.projectId, projectId))
+        .orderBy(({ domain }) => domain.createdAt, "desc"),
+    [projectId],
+  );
+
+  const deploymentsQuery = useLiveQuery(
+    (q) =>
+      q
+        .from({ deployment: collection.deployments })
+        .where(({ deployment }) => eq(deployment.projectId, projectId))
+        .orderBy(({ deployment }) => deployment.createdAt, "desc"),
+    [projectId],
+  );
+
+  const projectQuery = useLiveQuery(
+    (q) =>
+      q.from({ project: collection.projects }).where(({ project }) => eq(project.id, projectId)),
+    [projectId],
+  );
+
+  const environmentsQuery = useLiveQuery(
+    (q) =>
+      q.from({ env: collection.environments }).where(({ env }) => eq(env.projectId, projectId)),
+    [projectId],
+  );
+
+  const value = useMemo(() => {
+    const domains = domainsQuery.data ?? [];
+    const deployments = deploymentsQuery.data ?? [];
+    const environments = environmentsQuery.data ?? [];
+    const project = projectQuery.data?.at(0);
+
+    return {
+      projectId,
+
+      project,
+      isProjectLoading: projectQuery.isLoading,
+
+      domains,
+      isDomainsLoading: domainsQuery.isLoading,
+
+      deployments,
+      isDeploymentsLoading: deploymentsQuery.isLoading,
+
+      environments,
+      isEnvironmentsLoading: environmentsQuery.isLoading,
+
+      getDomainsForDeployment: (deploymentId: string) =>
+        domains.filter((d) => d.deploymentId === deploymentId),
+
+      getLiveDomains: () => domains.filter((d) => d.sticky === "live"),
+
+      getEnvironmentOrLiveDomains: () =>
+        domains.filter((d) => d.sticky === "environment" || d.sticky === "live"),
+
+      getDeploymentById: (id: string) => deployments.find((d) => d.id === id),
+
+      refetchDomains: () => collection.domains.utils.refetch(),
+      refetchDeployments: () => collection.deployments.utils.refetch(),
+      refetchAll: () => {
+        collection.projects.utils.refetch();
+        collection.deployments.utils.refetch();
+        collection.domains.utils.refetch();
+        collection.environments.utils.refetch();
+      },
+    };
+  }, [projectId, domainsQuery, deploymentsQuery, projectQuery, environmentsQuery]);
+
+  return <ProjectDataContext.Provider value={value}>{children}</ProjectDataContext.Provider>;
+};
+
+export const useProjectData = () => {
+  const context = useContext(ProjectDataContext);
+  if (!context) {
+    throw new Error("useProjectData must be used within ProjectDataProvider");
+  }
+  return context;
+};

web/apps/dashboard/app/(app)/[workspaceSlug]/projects/[projectId]/(overview)/deployments/[deploymentId]/(overview)/components/scroll-to-bottom-button.tsx

@@ -0,0 +1,47 @@
+"use client";
+import { ChevronDown } from "@unkey/icons";
+import { cn } from "@unkey/ui/src/lib/utils";
+import { useProjectData } from "../../../../data-provider";
+import { useDeployment } from "../../layout-provider";
+
+export function ScrollToBottomButton() {
+  const { deploymentId } = useDeployment();
+  const { getDeploymentById } = useProjectData();
+
+  const deployment = getDeploymentById(deploymentId);
+  const isVisible = deployment?.status !== "ready";
+
+  const handleScrollToBottom = () => {
+    const container = document.getElementById("deployment-scroll-container");
+    if (container) {
+      container.scrollTo({
+        top: container.scrollHeight,
+        behavior: "smooth",
+      });
+    }
+  };
+
+  return (
+    <button
+      type="button"
+      onClick={handleScrollToBottom}
+      className={cn(
+        "fixed bottom-6 right-6 z-20",
+        "flex items-center gap-2 px-4 py-2.5 rounded-full",
+        "shadow-lg hover:shadow-xl hover:scale-105",
+        "border border-grayA-4",
+        "transition-all duration-300 ease-out",
+        "overflow-hidden",
+        "before:absolute before:inset-0 before:bg-gradient-to-r before:from-infoA-5 before:to-transparent before:-z-10",
+        "after:absolute after:inset-0 after:bg-gray-1 after:dark:bg-black after:-z-20",
+        isVisible ? "opacity-100 translate-y-0" : "opacity-0 translate-y-4 pointer-events-none",
+      )}
+      aria-label="Scroll to bottom of build logs"
+    >
+      {/* Shimmer animation overlay */}
+      <div className="absolute inset-0 bg-gradient-to-r from-transparent via-white/40 to-transparent w-[150%] animate-shimmer" />
+      <span className="text-xs text-infoA-11 font-medium relative z-10">Building...</span>
+      <ChevronDown iconSize="sm-regular" className="text-info-11 relative z-10" />
+    </button>
+  );
+}

web/apps/dashboard/app/(app)/[workspaceSlug]/projects/[projectId]/(overview)/deployments/[deploymentId]/(overview)/components/sections/deployment-domains-section.tsx

@@ -1,44 +1,37 @@
 "use client";
 
-import { eq, useLiveQuery } from "@tanstack/react-db";
 import { Earth } from "@unkey/icons";
-import { useParams } from "next/navigation";
 import { Section, SectionHeader } from "../../../../../../components/section";
-import { DomainRow, DomainRowEmpty, DomainRowSkeleton } from "../../../../../details/domain-row";
-import { useProject } from "../../../../../layout-provider";
+import { EmptySection } from "../../../../../components/empty-section";
+import { useProjectData } from "../../../../../data-provider";
+import { DomainRow, DomainRowSkeleton } from "../../../../../details/domain-row";
+import { useDeployment } from "../../../layout-provider";
 
 export function DeploymentDomainsSection() {
-  const params = useParams();
-  const deploymentId = params?.deploymentId as string;
-
-  const { collections } = useProject();
-
-  const { data: domains, isLoading } = useLiveQuery(
-    (q) =>
-      q
-        .from({ domain: collections.domains })
-        .where(({ domain }) => eq(domain.deploymentId, deploymentId)),
-    [deploymentId],
-  );
-
+  const { deploymentId } = useDeployment();
+  const { getDomainsForDeployment, isDomainsLoading } = useProjectData();
+  const domains = getDomainsForDeployment(deploymentId);
   return (
     <Section>
       <SectionHeader
         icon={<Earth iconSize="md-regular" className="text-gray-9" />}
         title="Domains"
       />
       <div>
-        {isLoading ? (
+        {isDomainsLoading ? (
           <>
             <DomainRowSkeleton />
             <DomainRowSkeleton />
           </>
-        ) : (domains?.length ?? 0) > 0 ? (
-          domains?.map((domain) => (
+        ) : domains.length > 0 ? (
+          domains.map((domain) => (
             <DomainRow key={domain.id} domain={domain.fullyQualifiedDomainName} />
           ))
         ) : (
-          <DomainRowEmpty />
+          <EmptySection
+            title="No domains found"
+            description="Your configured domains will appear here once they're set up and verified."
+          />
         )}
       </div>
     </Section>

web/apps/dashboard/app/(app)/[workspaceSlug]/projects/[projectId]/(overview)/deployments/[deploymentId]/(overview)/components/sections/deployment-info-section.tsx

@@ -1,31 +1,23 @@
 "use client";
 
-import { eq, useLiveQuery } from "@tanstack/react-db";
 import { Bolt, Cloud, Grid, Harddrive, LayoutRight } from "@unkey/icons";
 import { Button, InfoTooltip } from "@unkey/ui";
-import { useParams } from "next/navigation";
 import { ActiveDeploymentCard } from "../../../../../../components/active-deployment-card";
 import { DeploymentStatusBadge } from "../../../../../../components/deployment-status-badge";
 import { DisabledWrapper } from "../../../../../../components/disabled-wrapper";
 import { InfoChip } from "../../../../../../components/info-chip";
 import { RegionFlags } from "../../../../../../components/region-flags";
 import { Section, SectionHeader } from "../../../../../../components/section";
-import { useProject } from "../../../../../layout-provider";
+import { useProjectData } from "../../../../../data-provider";
+import { useProjectLayout } from "../../../../../layout-provider";
+import { useDeployment } from "../../../layout-provider";
 
 export function DeploymentInfoSection() {
-  const params = useParams();
-  const deploymentId = params?.deploymentId as string;
+  const { deploymentId } = useDeployment();
+  const { getDeploymentById } = useProjectData();
+  const { setIsDetailsOpen, isDetailsOpen } = useProjectLayout();
 
-  const { collections, setIsDetailsOpen, isDetailsOpen } = useProject();
-  const { data } = useLiveQuery(
-    (q) =>
-      q
-        .from({ deployment: collections.deployments })
-        .where(({ deployment }) => eq(deployment.id, deploymentId)),
-    [deploymentId],
-  );
-
-  const deployment = data.at(0);
+  const deployment = getDeploymentById(deploymentId);
   const deploymentStatus = deployment?.status;
 
   return (

web/apps/dashboard/app/(app)/[workspaceSlug]/projects/[projectId]/(overview)/deployments/[deploymentId]/(overview)/components/sections/deployment-logs-section.tsx

@@ -1,60 +1,46 @@
 "use client";
 
-import { eq, useLiveQuery } from "@tanstack/react-db";
 import { Layers3 } from "@unkey/icons";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@unkey/ui";
-import { useParams } from "next/navigation";
 import { useEffect, useState } from "react";
 import { Section } from "../../../../../../components/section";
 import { Card } from "../../../../../components/card";
-import { useProject } from "../../../../../layout-provider";
+import { useProjectData } from "../../../../../data-provider";
+import { useDeployment } from "../../../layout-provider";
 import { DeploymentBuildStepsTable } from "../table/deployment-build-steps-table";
 import { DeploymentSentinelLogsTable } from "../table/deployment-sentinel-logs-table";
 
 export function DeploymentLogsSection() {
-  const params = useParams();
-  const deploymentId = params?.deploymentId as string;
+  const { deploymentId } = useDeployment();
+  const { getDeploymentById } = useProjectData();
 
-  const { collections } = useProject();
-  const { data } = useLiveQuery(
-    (q) =>
-      q
-        .from({ deployment: collections.deployments })
-        .where(({ deployment }) => eq(deployment.id, deploymentId)),
-    [deploymentId],
-  );
-
-  const deployment = data.at(0);
+  const deployment = getDeploymentById(deploymentId);
   const deploymentStatus = deployment?.status;
 
   // During build phase, default to "Build logs" and disable "Logs" tab
-  const isBuildPhase = deploymentStatus === "building";
+  const isReady = deploymentStatus !== "ready";
 
-  const [tab, setTab] = useState(isBuildPhase ? "build-logs" : "sentinel");
+  const [tab, setTab] = useState(isReady ? "build-logs" : "requests");
 
   useEffect(() => {
-    setTab(isBuildPhase ? "build-logs" : "sentinel");
-  }, [isBuildPhase]);
+    setTab(isReady ? "build-logs" : "requests");
+  }, [isReady]);
 
   return (
     <Section>
       <Tabs value={tab} onValueChange={setTab}>
         <div className="flex items-center gap-2.5 py-1.5 px-2">
           <Layers3 iconSize="md-regular" className="text-gray-9" />
           <TabsList className="bg-gray-3">
-            <TabsTrigger
-              value="sentinel"
-              className="text-accent-12 text-[13px]"
-              disabled={isBuildPhase}
-            >
+            <TabsTrigger value="requests" className="text-accent-12 text-[13px]" disabled={isReady}>
               Requests
             </TabsTrigger>
             <TabsTrigger value="build-logs" className="text-accent-12 text-[13px]">
               Build logs
             </TabsTrigger>
           </TabsList>
         </div>
-        <TabsContent value="sentinel">
+        <TabsContent value="requests">
           <Card className="rounded-[14px] overflow-hidden border-gray-4 flex flex-col h-full">
             <DeploymentSentinelLogsTable />
           </Card>