fix: Consolidate cell styles

apps/webservice/src/app/[workspaceSlug]/(appv2)/(deploy)/(raw)/systems/[systemSlug]/(raw)/deployments/[deploymentSlug]/(sidebar)/_components/release-cell/DeploymentPageContent.tsx → apps/webservice/src/app/[workspaceSlug]/(appv2)/(deploy)/(raw)/systems/[systemSlug]/(raw)/deployments/[deploymentSlug]/(sidebar)/DeploymentPageContent.tsx

@@ -46,9 +46,9 @@ import { useReleaseFilter } from "~/app/[workspaceSlug]/(appv2)/_components/rele
 import { DeploymentDirectoryCell } from "~/app/[workspaceSlug]/(appv2)/(deploy)/_components/deployments/DeploymentDirectoryCell";
 import { urls } from "~/app/urls";
 import { api } from "~/trpc/react";
-import { JobHistoryPopover } from "./JobHistoryPopover";
-import { ReleaseDistributionGraphPopover } from "./ReleaseDistributionPopover";
-import { LazyReleaseEnvironmentCell } from "./ReleaseEnvironmentCell";
+import { JobHistoryPopover } from "./_components/release-cell/JobHistoryPopover";
+import { ReleaseDistributionGraphPopover } from "./_components/release-cell/ReleaseDistributionPopover";
+import { LazyReleaseEnvironmentCell } from "./_components/release-cell/ReleaseEnvironmentCell";
 
 type Deployment = NonNullable<RouterOutputs["deployment"]["bySlug"]>;
 
@@ -312,7 +312,7 @@ export const DeploymentPageContent: React.FC<DeploymentPageContentProps> = ({
                       router.push(releaseUrl(release.id).baseUrl())
                     }
                   >
-                    <TableCell className="sticky left-0 z-10 flex h-[60px] min-w-[400px] max-w-[750px] items-center gap-2 bg-background/95 text-base">
+                    <TableCell className="sticky left-0 z-10 flex h-[70px] min-w-[400px] max-w-[750px] items-center gap-2 bg-background/95 text-base">
                       <TooltipProvider>
                         <Tooltip>
                           <TooltipTrigger>
@@ -341,7 +341,7 @@ export const DeploymentPageContent: React.FC<DeploymentPageContentProps> = ({
                     </TableCell>
                     {environments.map((env) => (
                       <TableCell
-                        className="h-[60px] w-[220px] border-l px-3 py-2"
+                        className="h-[70px] w-[220px] border-l px-3 py-2"
                         onClick={(e) => e.stopPropagation()}
                         key={env.id}
                       >
@@ -355,15 +355,17 @@ export const DeploymentPageContent: React.FC<DeploymentPageContentProps> = ({
                     {directories.map((dir) => (
                       <TableCell
                         key={dir.path}
-                        className="h-[60px] w-[220px] border-l px-1 py-0"
+                        className="h-[70px] w-[220px] border-l"
                       >
-                        <DeploymentDirectoryCell
-                          key={dir.path}
-                          directory={dir}
-                          deployment={deployment}
-                          release={release}
-                          systemSlug={systemSlug}
-                        />
+                        <div className="w-[220px] shrink-0">
+                          <DeploymentDirectoryCell
+                            key={dir.path}
+                            directory={dir}
+                            deployment={deployment}
+                            release={release}
+                            systemSlug={systemSlug}
+                          />
+                        </div>
                       </TableCell>
                     ))}
                   </TableRow>

apps/webservice/src/app/[workspaceSlug]/(appv2)/(deploy)/(raw)/systems/[systemSlug]/(raw)/deployments/[deploymentSlug]/(sidebar)/_components/release-cell/ReleaseEnvironmentCell.tsx

@@ -4,10 +4,12 @@ import type * as SCHEMA from "@ctrlplane/db/schema";
 import type { ReleaseStatusType } from "@ctrlplane/validators/releases";
 import type { ResourceCondition } from "@ctrlplane/validators/resources";
 import { useParams } from "next/navigation";
+import { IconAlertCircle } from "@tabler/icons-react";
 import { useInView } from "react-intersection-observer";
 import { isPresent } from "ts-is-present";
 
 import { Button } from "@ctrlplane/ui/button";
+import { Skeleton } from "@ctrlplane/ui/skeleton";
 import {
   ComparisonOperator,
   FilterType,
@@ -17,13 +19,15 @@ import { ReleaseStatus } from "@ctrlplane/validators/releases";
 
 import { useReleaseChannelDrawer } from "~/app/[workspaceSlug]/(app)/_components/release-channel-drawer/useReleaseChannelDrawer";
 import { ApprovalDialog } from "~/app/[workspaceSlug]/(appv2)/(deploy)/_components/release/ApprovalDialog";
+import { ReleaseDropdownMenu } from "~/app/[workspaceSlug]/(appv2)/(deploy)/_components/release/ReleaseDropdownMenu";
 import { api } from "~/trpc/react";
 import { DeployButton } from "./DeployButton";
 import { Release } from "./TableCells";
 
 type Release = {
   id: string;
   version: string;
+  name: string;
   createdAt: Date;
   status: ReleaseStatusType;
   deploymentId: string;
@@ -35,15 +39,11 @@ type ReleaseEnvironmentCellProps = {
   release: Release;
 };
 
-const ReleaseEnvironmentCell: React.FC<ReleaseEnvironmentCellProps> = ({
-  environment,
-  deployment,
-  release,
-}) => {
-  const { workspaceSlug, systemSlug } = useParams<{
-    workspaceSlug: string;
-    systemSlug: string;
-  }>();
+const useGetResourceCount = (
+  environment: SCHEMA.Environment,
+  deployment: SCHEMA.Deployment,
+) => {
+  const { workspaceSlug } = useParams<{ workspaceSlug: string }>();
 
   const { data: workspace, isLoading: isWorkspaceLoading } =
     api.workspace.bySlug.useQuery(workspaceSlug);
@@ -66,6 +66,27 @@ const ReleaseEnvironmentCell: React.FC<ReleaseEnvironmentCellProps> = ({
       { enabled: workspace != null && filter != null },
     );
 
+  return {
+    resourceCount: resources?.total ?? 0,
+    isResourceCountLoading: isResourcesLoading || isWorkspaceLoading,
+  };
+};
+
+const ReleaseEnvironmentCell: React.FC<ReleaseEnvironmentCellProps> = ({
+  environment,
+  deployment,
+  release,
+}) => {
+  const { workspaceSlug, systemSlug } = useParams<{
+    workspaceSlug: string;
+    systemSlug: string;
+  }>();
+
+  const { resourceCount, isResourceCountLoading } = useGetResourceCount(
+    environment,
+    deployment,
+  );
+
   const { data: blockedEnvsResult, isLoading: isBlockedEnvsLoading } =
     api.release.blocked.useQuery([release.id]);
 
@@ -91,13 +112,20 @@ const ReleaseEnvironmentCell: React.FC<ReleaseEnvironmentCellProps> = ({
     isStatusesLoading ||
     isBlockedEnvsLoading ||
     isApprovalLoading ||
-    isWorkspaceLoading ||
-    isResourcesLoading;
+    isResourceCountLoading;
 
   if (isLoading)
-    return <p className="text-xs text-muted-foreground">Loading...</p>;
+    return (
+      <div className="flex h-full w-full items-center gap-2">
+        <Skeleton className="h-6 w-6 rounded-full" />
+        <div className="flex flex-col gap-2">
+          <Skeleton className="h-[16px] w-20 rounded-full" />
+          <Skeleton className="h-3 w-20 rounded-full" />
+        </div>
+      </div>
+    );
 
-  if ((resources?.total ?? 0) === 0)
+  if (resourceCount === 0)
     return (
       <div className="text-center text-xs text-muted-foreground/70">
         No resources
@@ -120,17 +148,19 @@ const ReleaseEnvironmentCell: React.FC<ReleaseEnvironmentCellProps> = ({
 
   if (showRelease)
     return (
-      <Release
-        workspaceSlug={workspaceSlug}
-        systemSlug={systemSlug}
-        deploymentSlug={deployment.slug}
-        releaseId={release.id}
-        version={release.version}
-        environment={environment}
-        name={release.version}
-        deployedAt={release.createdAt}
-        statuses={statuses.map((s) => s.job.status)}
-      />
+      <div className="flex w-full items-center justify-center rounded-md p-2 hover:bg-secondary/50">
+        <Release
+          workspaceSlug={workspaceSlug}
+          systemSlug={systemSlug}
+          deploymentSlug={deployment.slug}
+          releaseId={release.id}
+          version={release.version}
+          environment={environment}
+          name={release.version}
+          deployedAt={release.createdAt}
+          statuses={statuses.map((s) => s.job.status)}
+        />
+      </div>
     );
 
   if (release.status === ReleaseStatus.Building)
@@ -176,13 +206,27 @@ const ReleaseEnvironmentCell: React.FC<ReleaseEnvironmentCellProps> = ({
         release={release}
         environmentId={environment.id}
       >
-        <Button
-          className="w-full border-dashed border-neutral-700/60 bg-transparent text-center text-neutral-700 hover:border-blue-400 hover:bg-transparent hover:text-blue-400"
-          variant="outline"
-          size="sm"
-        >
-          Pending approval
-        </Button>
+        <div className="flex w-full cursor-pointer items-center justify-between gap-2 rounded-md p-2 hover:bg-secondary/50">
+          <div className="flex items-center gap-2">
+            <div className="rounded-full bg-yellow-400 p-1 dark:text-black">
+              <IconAlertCircle className="h-4 w-4" strokeWidth={2} />
+            </div>
+            <div>
+              <div className="max-w-36 truncate font-semibold">
+                <span className="whitespace-nowrap">{release.version}</span>
+              </div>
+              <div className="text-xs text-muted-foreground">
+                Approval required
+              </div>
+            </div>
+          </div>
+
+          <ReleaseDropdownMenu
+            release={release}
+            environment={environment}
+            isReleaseActive={false}
+          />
+        </div>
       </ApprovalDialog>
     );
 

apps/webservice/src/app/[workspaceSlug]/(appv2)/(deploy)/(raw)/systems/[systemSlug]/(raw)/deployments/[deploymentSlug]/(sidebar)/page.tsx

@@ -4,7 +4,7 @@ import type { Metadata } from "next";
 import { notFound } from "next/navigation";
 
 import { api } from "~/trpc/server";
-import { DeploymentPageContent } from "./_components/release-cell/DeploymentPageContent";
+import { DeploymentPageContent } from "./DeploymentPageContent";
 
 type PageProps = {
   params: Promise<{

apps/webservice/tsconfig.json

@@ -7,11 +7,20 @@
     "paths": {
       "~/*": ["./src/*"]
     },
-    "plugins": [{ "name": "next" }],
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
     "tsBuildInfoFile": "node_modules/.cache/tsbuildinfo.json",
     "module": "esnext"
     // "skipLibCheck": true
   },
-  "include": ["next-env.d.ts", "src/**/*.ts", "src/**/*.tsx"],
+  "include": [
+    "next-env.d.ts",
+    "src/**/*.ts",
+    "src/**/*.tsx",
+    ".next/types/**/*.ts"
+  ],
   "exclude": ["node_modules"]
 }