fix: Add deployments table

apps/webservice/src/app/[workspaceSlug]/(app)/(job)/jobs/JobTable.tsx

@@ -27,7 +27,7 @@ import { VariableCell } from "~/app/[workspaceSlug]/(app)/_components/job-table/
 import { JobTableStatusIcon } from "~/app/[workspaceSlug]/(app)/_components/JobTableStatusIcon";
 import { useFilter } from "~/app/[workspaceSlug]/(app)/_components/useFilter";
 import { api } from "~/trpc/react";
-import { nFormatter } from "../../systems/[systemSlug]/_components/nFormatter";
+import { nFormatter } from "../../systems-old/[systemSlug]/_components/nFormatter";
 
 type JobTableProps = {
   workspaceId: string;

apps/webservice/src/app/[workspaceSlug]/(app)/(resources)/resources/ResourcePageContent.tsx

@@ -131,7 +131,7 @@ export const ResourcePageContent: React.FC<{
     return <ResourceGettingStarted workspace={workspace} />;
 
   return (
-    <div className="h-full text-sm">
+    <div className="text-sm">
       <div className="flex h-[41px] items-center justify-between border-b border-neutral-800 p-1 px-2">
         <div className="flex items-center gap-1 pl-1">
           <SearchInput value={search} onChange={setSearch} />
@@ -224,7 +224,7 @@ export const ResourcePageContent: React.FC<{
         />
       )}
       {resources.data != null && resources.data.total > 0 && (
-        <div className="scrollbar-thin scrollbar-thumb-neutral-700 scrollbar-track-neutral-800 h-[calc(100vh-90px)] overflow-auto">
+        <div className="scrollbar-thin scrollbar-thumb-neutral-700 scrollbar-track-neutral-800 overflow-auto">
           <ResourcesTable
             resources={resources.data.items}
             activeResourceIds={resourceId ? [resourceId] : []}

apps/webservice/src/app/[workspaceSlug]/(app)/_components/MetadataInfo.tsx

@@ -3,7 +3,7 @@ import { IconSparkles } from "@tabler/icons-react";
 import { Input } from "@ctrlplane/ui/input";
 import { ReservedMetadataKey } from "@ctrlplane/validators/conditions";
 
-import { useMatchSorterWithSearch } from "../systems/[systemSlug]/environments/useMatchSorter";
+import { useMatchSorterWithSearch } from "../systems-old/[systemSlug]/environments/useMatchSorter";
 
 export const MetadataInfo: React.FC<{ metadata: Record<string, string> }> = (
   props,

apps/webservice/src/app/[workspaceSlug]/(app)/_components/deployment-resource-drawer/TableRow.tsx

@@ -23,8 +23,8 @@ import {
 import { JobFilterType, JobStatusReadable } from "@ctrlplane/validators/jobs";
 
 import { api } from "~/trpc/react";
-import { JobDropdownMenu } from "../../systems/[systemSlug]/deployments/[deploymentSlug]/releases/[versionId]/JobDropdownMenu";
-import { DeployButton } from "../../systems/[systemSlug]/deployments/DeployButton";
+import { JobDropdownMenu } from "../../systems-old/[systemSlug]/deployments/[deploymentSlug]/releases/[versionId]/JobDropdownMenu";
+import { DeployButton } from "../../systems-old/[systemSlug]/deployments/DeployButton";
 import { JobLinksCell } from "../job-table/JobLinksCell";
 import { JobTableStatusIcon } from "../JobTableStatusIcon";
 

apps/webservice/src/app/[workspaceSlug]/(app)/_components/job-drawer/JobDrawer.tsx

@@ -13,8 +13,8 @@ import { Button, buttonVariants } from "@ctrlplane/ui/button";
 import { Drawer, DrawerContent, DrawerTitle } from "@ctrlplane/ui/drawer";
 import { ReservedMetadataKey } from "@ctrlplane/validators/conditions";
 
-import { JobDropdownMenu } from "~/app/[workspaceSlug]/(app)/systems/[systemSlug]/deployments/[deploymentSlug]/releases/[versionId]/JobDropdownMenu";
-import { useReleaseChannel } from "~/app/[workspaceSlug]/(app)/systems/[systemSlug]/deployments/[deploymentSlug]/releases/[versionId]/useReleaseChannel";
+import { JobDropdownMenu } from "~/app/[workspaceSlug]/(app)/systems-old/[systemSlug]/deployments/[deploymentSlug]/releases/[versionId]/JobDropdownMenu";
+import { useReleaseChannel } from "~/app/[workspaceSlug]/(app)/systems-old/[systemSlug]/deployments/[deploymentSlug]/releases/[versionId]/useReleaseChannel";
 import { api } from "~/trpc/react";
 import { MetadataInfo } from "../MetadataInfo";
 import { JobAgent } from "./JobAgent";

apps/webservice/src/app/[workspaceSlug]/(app)/_components/resource-condition/useResourceFilter.ts

@@ -1,10 +1,14 @@
 import type { ResourceCondition } from "@ctrlplane/validators/resources";
-import { useCallback, useMemo } from "react";
+import React, { useCallback, useMemo } from "react";
 import LZString from "lz-string";
+import { useDebounce } from "react-use";
+
+import { ColumnOperator } from "@ctrlplane/validators/conditions";
 
 import { useQueryParams } from "../useQueryParams";
 
 export const useResourceFilter = () => {
+  const [search, setSearch] = React.useState("");
   const { getParam, setParams } = useQueryParams();
 
   const filterHash = getParam("filter");
@@ -34,5 +38,30 @@ export const useResourceFilter = () => {
     [setParams],
   );
 
-  return { filter, setFilter, viewId };
+  useDebounce(
+    () => {
+      if (search === "") return;
+      setFilter({
+        type: "comparison",
+        operator: "and",
+        conditions: [
+          // Keep any non-name conditions from existing filter
+          ...(filter && "conditions" in filter
+            ? filter.conditions.filter(
+                (c: ResourceCondition) => c.type !== "name",
+              )
+            : []),
+          {
+            type: "name",
+            operator: ColumnOperator.Contains,
+            value: search,
+          },
+        ],
+      });
+    },
+    500,
+    [search],
+  );
+
+  return { filter, setFilter, viewId, search, setSearch };
 };

apps/webservice/src/app/[workspaceSlug]/(app)/dashboard/page.tsx

@@ -4,7 +4,7 @@ import { notFound } from "next/navigation";
 import { Card } from "@ctrlplane/ui/card";
 
 import { api } from "../../../../trpc/server";
-import { JobHistoryChart } from "../systems/JobHistoryChart";
+import { JobHistoryChart } from "../systems-old/JobHistoryChart";
 import { ResourceAnnotationPieChart } from "./ResourceAnnotationPieChart";
 
 type PageProps = {
@@ -18,11 +18,9 @@ export async function generateMetadata(props: PageProps): Promise<Metadata> {
   };
 }
 
-export default async function Dashboard(
-  props: {
-    params: Promise<{ workspaceSlug: string }>;
-  }
-) {
+export default async function Dashboard(props: {
+  params: Promise<{ workspaceSlug: string }>;
+}) {
   const params = await props.params;
   const { workspaceSlug } = params;
   const workspace = await api.workspace.bySlug(workspaceSlug).catch(() => null);

apps/webservice/src/app/[workspaceSlug]/(app)/page.tsx

@@ -1,10 +1,8 @@
 import { redirect } from "next/navigation";
 
-export default async function WorkspacePage(
-  props: {
-    params: Promise<{ workspaceSlug: string }>;
-  }
-) {
+export default async function WorkspacePage(props: {
+  params: Promise<{ workspaceSlug: string }>;
+}) {
   const params = await props.params;
   redirect(`/${params.workspaceSlug}/systems`);
 }

apps/webservice/src/app/[workspaceSlug]/(app)/systems/SystemsBreadcrumb.tsx → apps/webservice/src/app/[workspaceSlug]/(app)/systems-old/SystemsBreadcrumb.tsx

@@ -18,7 +18,7 @@ import {
 } from "@ctrlplane/ui/breadcrumb";
 import { Button } from "@ctrlplane/ui/button";
 
-import { SystemActionsDropdown } from "~/app/[workspaceSlug]/(app)/systems/SystemActionsDropdown";
+import { SystemActionsDropdown } from "~/app/[workspaceSlug]/(app)/systems-old/SystemActionsDropdown";
 import { api } from "~/trpc/server";
 
 export const SystemBreadcrumbNavbar = async ({

apps/webservice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/deployments/[deploymentSlug]/DeploymentNavBar.tsx → apps/webservice/src/app/[workspaceSlug]/(app)/systems-old/[systemSlug]/deployments/[deploymentSlug]/DeploymentNavBar.tsx

@@ -11,7 +11,7 @@ import {
   NavigationMenuList,
 } from "@ctrlplane/ui/navigation-menu";
 
-import { nFormatter } from "~/app/[workspaceSlug]/(app)/systems/[systemSlug]/_components/nFormatter";
+import { nFormatter } from "~/app/[workspaceSlug]/(app)/systems-old/[systemSlug]/_components/nFormatter";
 import { NavigationMenuAction } from "./NavigationMenuAction";
 
 type DeploymentNavBarProps = {

apps/webservice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/deployments/[deploymentSlug]/releases/CreateVariableDialog.tsx → apps/webservice/src/app/[workspaceSlug]/(app)/systems-old/[systemSlug]/deployments/[deploymentSlug]/releases/CreateVariableDialog.tsx

@@ -34,7 +34,7 @@ import {
   ConfigTypeSelector,
   NumberConfigFields,
   StringConfigFields,
-} from "~/app/[workspaceSlug]/(app)/systems/[systemSlug]/_components/variables/ConfigFields";
+} from "~/app/[workspaceSlug]/(app)/systems-old/[systemSlug]/_components/variables/ConfigFields";
 import { api } from "~/trpc/react";
 
 const schema = z.object({

apps/webservice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/deployments/[deploymentSlug]/variables/AddVariableValueDialog.tsx → apps/webservice/src/app/[workspaceSlug]/(app)/systems-old/[systemSlug]/deployments/[deploymentSlug]/variables/AddVariableValueDialog.tsx

@@ -36,7 +36,7 @@ import {
   VariableBooleanInput,
   VariableChoiceSelect,
   VariableStringInput,
-} from "~/app/[workspaceSlug]/(app)/systems/[systemSlug]/_components/variables/VariableInputs";
+} from "~/app/[workspaceSlug]/(app)/systems-old/[systemSlug]/_components/variables/VariableInputs";
 import { api } from "~/trpc/react";
 
 const schema = z.object({

apps/webservice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/deployments/[deploymentSlug]/variables/VariableValueDropdown.tsx → apps/webservice/src/app/[workspaceSlug]/(app)/systems-old/[systemSlug]/deployments/[deploymentSlug]/variables/VariableValueDropdown.tsx

@@ -53,7 +53,7 @@ import {
   VariableBooleanInput,
   VariableChoiceSelect,
   VariableStringInput,
-} from "~/app/[workspaceSlug]/(app)/systems/[systemSlug]/_components/variables/VariableInputs";
+} from "~/app/[workspaceSlug]/(app)/systems-old/[systemSlug]/_components/variables/VariableInputs";
 import { api } from "~/trpc/react";
 
 const editVariableValueFormSchema = z.object({

apps/webservice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/runbooks/create/RunbookVariableEditor.tsx → apps/webservice/src/app/[workspaceSlug]/(app)/systems-old/[systemSlug]/runbooks/create/RunbookVariableEditor.tsx

@@ -32,7 +32,7 @@ import {
   ResourceConfigFields,
   RunbookConfigTypeSelector,
   StringConfigFields,
-} from "~/app/[workspaceSlug]/(app)/systems/[systemSlug]/_components/variables/ConfigFields";
+} from "~/app/[workspaceSlug]/(app)/systems-old/[systemSlug]/_components/variables/ConfigFields";
 
 type RunbookVariableEditorProps = {
   value: InsertRunbookVariable;

apps/webservice/src/app/[workspaceSlug]/(appv2)/TopNav.tsx

@@ -0,0 +1,54 @@
+import Image from "next/image";
+import { notFound } from "next/navigation";
+import { IconUser } from "@tabler/icons-react";
+
+import { Avatar, AvatarFallback, AvatarImage } from "@ctrlplane/ui/avatar";
+import { Input } from "@ctrlplane/ui/input";
+
+import { api } from "~/trpc/server";
+import { WorkspaceDropdown } from "./WorkspaceDropdown";
+
+export const TopNav: React.FC<{ workspaceSlug: string }> = async ({
+  workspaceSlug,
+}) => {
+  const workspace = await api.workspace.bySlug(workspaceSlug).catch(() => null);
+  if (workspace == null) notFound();
+  const viewer = await api.user.viewer();
+  const workspaces = await api.workspace.list();
+  return (
+    <nav className="flex h-14 w-full shrink-0 items-center gap-4 px-4">
+      <div className="ml-3 flex shrink-0 items-center gap-7">
+        <Image
+          src="/android-chrome-192x192.png"
+          alt="Ctrlplane"
+          width={24}
+          height={24}
+        />
+
+        <WorkspaceDropdown
+          viewer={viewer}
+          workspace={workspace}
+          workspaces={workspaces}
+        />
+      </div>
+
+      <div className="mx-auto flex flex-1 justify-center">
+        <div className="w-[450px]">
+          <Input
+            placeholder="Search for resources, systems, deployments, etc."
+            className="bg-transparent"
+          />
+        </div>
+      </div>
+
+      <div>
+        <Avatar className="size-7">
+          <AvatarImage src={viewer.image ?? undefined} />
+          <AvatarFallback>
+            <IconUser />
+          </AvatarFallback>
+        </Avatar>
+      </div>
+    </nav>
+  );
+};

apps/webservice/src/app/[workspaceSlug]/(appv2)/TopSidebarIcon.tsx

@@ -0,0 +1,40 @@
+"use client";
+
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+
+import { cn } from "@ctrlplane/ui";
+
+export const TopSidebarIcon: React.FC<{
+  icon: React.ReactNode;
+  label: string;
+  href: string;
+}> = ({ icon, label, href }) => {
+  const pathname = usePathname();
+  const active = pathname.startsWith(href);
+
+  return (
+    <div className="size-20 text-muted-foreground">
+      <Link
+        href={href}
+        className={cn(
+          "border-r-1 group flex h-full flex-col items-center justify-center gap-1 p-2",
+        )}
+      >
+        <span
+          className={cn(
+            "rounded-lg p-2",
+            active
+              ? "bg-purple-500/20 text-purple-400"
+              : "transition-colors duration-200 group-hover:bg-neutral-400/10",
+          )}
+        >
+          {icon}
+        </span>
+        <span className={cn("text-xs", active && "text-purple-400")}>
+          {label}
+        </span>
+      </Link>
+    </div>
+  );
+};