feat: template details page (#351)

Add template detail page with Overview, Builds, and Tags tabs.

**Changes:**
- Overview tab: latest build, specs, envd version, visibility,
started-sandboxes count.
- Tags tab: assign, reassign, and rollback against any build, with a
searchable build picker and tag history view.
- Builds tab: server-side search and status filtering per template.

Author: drankou

spec/openapi.dashboard-api.yaml

@@ -1,11 +1,16 @@
-import BuildsHeader from '@/features/dashboard/templates/builds/header'
+'use client'
+
+import { AllBuildsHeader } from '@/features/dashboard/templates/builds/all-builds-header'
 import BuildsTable from '@/features/dashboard/templates/builds/table'
+import useFilters from '@/features/dashboard/templates/builds/use-filters'
 
 export default function TemplateBuildsPage() {
+  const { statuses, buildIdOrTemplate } = useFilters()
+
   return (
-    <div className="h-full min-h-0 flex-1 p-3 md:p-6 flex flex-col gap-3">
-      <BuildsHeader />
-      <BuildsTable />
+    <div className="h-full min-h-0 flex-1 p-3 md:p-6 flex flex-col gap-4">
+      <AllBuildsHeader />
+      <BuildsTable filters={{ statuses, buildIdOrTemplate }} />
     </div>
   )
 }

src/app/dashboard/[teamSlug]/templates/(tabs)/builds/page.tsx

@@ -0,0 +1,40 @@
+'use client'
+
+import { use, useCallback } from 'react'
+import type { ListedBuildModel } from '@/core/modules/builds/models'
+import BuildsTable from '@/features/dashboard/templates/builds/table'
+import { TemplateBuildsHeader } from '@/features/dashboard/templates/builds/template-builds-header'
+import useTemplateBuildsFilters from '@/features/dashboard/templates/builds/use-template-builds-filters'
+import { isValidUuid } from '@/features/dashboard/templates/tags/helpers'
+
+export default function TemplateDetailBuildsPage({
+  params,
+}: PageProps<'/dashboard/[teamSlug]/templates/[templateId]'>) {
+  const { templateId } = use(params)
+  const { statuses, q } = useTemplateBuildsFilters()
+
+  const trimmed = q?.trim() ?? ''
+  const isSearching = trimmed.length > 0
+  const isValidSearch = !isSearching || isValidUuid(trimmed)
+
+  const postFilter = useCallback(
+    (build: ListedBuildModel) => build.templateId === templateId,
+    [templateId]
+  )
+
+  return (
+    <div className="h-full min-h-0 flex-1 p-3 md:p-6 flex flex-col gap-4">
+      <TemplateBuildsHeader />
+      <BuildsTable
+        filters={{
+          statuses,
+          buildIdOrTemplate:
+            isSearching && isValidSearch ? trimmed : templateId,
+        }}
+        postFilter={isSearching && isValidSearch ? postFilter : undefined}
+        disabled={isSearching && !isValidSearch}
+        showTemplateColumn={false}
+      />
+    </div>
+  )
+}

src/app/dashboard/[teamSlug]/templates/[templateId]/(detail-tabs)/builds/page.tsx

@@ -0,0 +1,25 @@
+import { Suspense } from 'react'
+import TemplateDetailTabs from '@/features/dashboard/templates/detail/tabs'
+import TemplateTitleBinder from '@/features/dashboard/templates/detail/title-binder'
+import { HydrateClient, prefetch, trpc } from '@/trpc/server'
+
+export default async function TemplateDetailLayout({
+  children,
+  params,
+}: LayoutProps<'/dashboard/[teamSlug]/templates/[templateId]'>) {
+  const { teamSlug, templateId } = await params
+
+  prefetch(trpc.templates.getTemplate.queryOptions({ teamSlug, templateId }))
+
+  return (
+    <HydrateClient>
+      <div className="pt-2 flex-1 md:pt-3 min-h-0 h-full flex flex-col">
+        <Suspense fallback={null}>
+          <TemplateTitleBinder teamSlug={teamSlug} templateId={templateId} />
+        </Suspense>
+        <TemplateDetailTabs teamSlug={teamSlug} templateId={templateId} />
+        {children}
+      </div>
+    </HydrateClient>
+  )
+}

src/app/dashboard/[teamSlug]/templates/[templateId]/(detail-tabs)/layout.tsx

@@ -0,0 +1,5 @@
+import LoadingLayout from '@/features/dashboard/loading-layout'
+
+export default function TemplateDetailLoading() {
+  return <LoadingLayout />
+}

src/app/dashboard/[teamSlug]/templates/[templateId]/(detail-tabs)/loading.tsx

@@ -0,0 +1,22 @@
+import { Suspense } from 'react'
+import TemplateOverview from '@/features/dashboard/templates/detail/overview'
+import { TemplateOverviewSkeleton } from '@/features/dashboard/templates/detail/overview/skeleton'
+import { HydrateClient, prefetch, trpc } from '@/trpc/server'
+
+export default async function TemplateOverviewPage({
+  params,
+}: PageProps<'/dashboard/[teamSlug]/templates/[templateId]'>) {
+  const { teamSlug, templateId } = await params
+
+  prefetch(trpc.templates.getTemplate.queryOptions({ teamSlug, templateId }))
+
+  return (
+    <HydrateClient>
+      <div className="p-6 md:p-10 flex flex-col gap-6 w-full max-w-[600px] mx-auto">
+        <Suspense fallback={<TemplateOverviewSkeleton />}>
+          <TemplateOverview teamSlug={teamSlug} templateId={templateId} />
+        </Suspense>
+      </div>
+    </HydrateClient>
+  )
+}

src/app/dashboard/[teamSlug]/templates/[templateId]/(detail-tabs)/overview/page.tsx

@@ -0,0 +1,35 @@
+import { Suspense } from 'react'
+import LoadingLayout from '@/features/dashboard/loading-layout'
+import { TAG_HISTORY_PAGE_LIMIT } from '@/features/dashboard/templates/tags/constants'
+import TagHistoryView from '@/features/dashboard/templates/tags/history/tag-history-view'
+import { HydrateClient, prefetch, trpc } from '@/trpc/server'
+
+export default async function TemplateTagHistoryPage({
+  params,
+}: PageProps<'/dashboard/[teamSlug]/templates/[templateId]/tags/[tag]'>) {
+  const { teamSlug, templateId, tag } = await params
+  const decodedTag = decodeURIComponent(tag)
+
+  prefetch(
+    trpc.templates.getTagAssignments.infiniteQueryOptions({
+      teamSlug,
+      templateId,
+      tag: decodedTag,
+      limit: TAG_HISTORY_PAGE_LIMIT,
+    })
+  )
+
+  return (
+    <HydrateClient>
+      <div className="h-full min-h-0 flex-1 py-6 px-8 md:px-11 flex flex-col gap-3 max-w-[924px] mx-auto w-full">
+        <Suspense fallback={<LoadingLayout />}>
+          <TagHistoryView
+            teamSlug={teamSlug}
+            templateId={templateId}
+            tag={decodedTag}
+          />
+        </Suspense>
+      </div>
+    </HydrateClient>
+  )
+}

src/app/dashboard/[teamSlug]/templates/[templateId]/(detail-tabs)/tags/[tag]/page.tsx

@@ -0,0 +1,32 @@
+import { Suspense } from 'react'
+import LoadingLayout from '@/features/dashboard/loading-layout'
+import { TAGS_PAGE_LIMIT } from '@/features/dashboard/templates/tags/constants'
+import TagsTable from '@/features/dashboard/templates/tags/table'
+import { HydrateClient, prefetch, trpc } from '@/trpc/server'
+
+export default async function TemplateTagsPage({
+  params,
+}: PageProps<'/dashboard/[teamSlug]/templates/[templateId]'>) {
+  const { teamSlug, templateId } = await params
+
+  prefetch(
+    trpc.templates.getTagGroups.infiniteQueryOptions({
+      teamSlug,
+      templateId,
+      limit: TAGS_PAGE_LIMIT,
+      search: undefined,
+      sort: undefined,
+    })
+  )
+  prefetch(trpc.templates.getTagCount.queryOptions({ teamSlug, templateId }))
+
+  return (
+    <HydrateClient>
+      <div className="h-full min-h-0 flex-1 pt-6 pb-2 md:pt-10 md:pb-4 px-8 md:px-11 flex flex-col gap-3 max-w-[924px] mx-auto w-full">
+        <Suspense fallback={<LoadingLayout />}>
+          <TagsTable teamSlug={teamSlug} templateId={templateId} />
+        </Suspense>
+      </div>
+    </HydrateClient>
+  )
+}

src/app/dashboard/[teamSlug]/templates/[templateId]/(detail-tabs)/tags/page.tsx

@@ -1,5 +1,7 @@
 'use client'
 
+import { TRPCClientError } from '@trpc/client'
+import { notFound } from 'next/navigation'
 import { DashboardRouteError } from '@/features/dashboard/shared/route-error'
 
 export default function TemplateDetailsError({
@@ -9,5 +11,9 @@ export default function TemplateDetailsError({
   error: Error & { digest?: string }
   reset: () => void
 }) {
+  if (error instanceof TRPCClientError && error.data?.code === 'NOT_FOUND') {
+    notFound()
+  }
+
   return <DashboardRouteError error={error} reset={reset} />
 }

src/app/dashboard/[teamSlug]/templates/[templateId]/error.tsx

@@ -0,0 +1,37 @@
+'use client'
+
+import { Button } from '@/ui/primitives/button'
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+} from '@/ui/primitives/card'
+import { ArrowLeftIcon } from '@/ui/primitives/icons'
+
+export default function TemplateNotFound() {
+  return (
+    <div className="flex min-h-[60vh] items-center justify-center">
+      <Card className="w-full max-w-md border border-stroke bg-bg-1/40 backdrop-blur-lg">
+        <CardHeader className="text-center">
+          <span className="prose-value-big">404</span>
+          <CardDescription>Template not found</CardDescription>
+        </CardHeader>
+        <CardContent className="text-center text-fg-secondary">
+          <p>We couldn’t find this template in your team.</p>
+        </CardContent>
+        <CardFooter>
+          <Button
+            variant="secondary"
+            onClick={() => window.history.back()}
+            className="w-full"
+          >
+            <ArrowLeftIcon />
+            Go Back
+          </Button>
+        </CardFooter>
+      </Card>
+    </div>
+  )
+}