feat: complete catalog fleet management workflow

frontend/src/shell/WorkspaceManager.tsx

@@ -9,7 +9,6 @@ import {
   GitPullRequest,
   KeyRound,
   Trash2,
-  X,
 } from "lucide-react";
 
 import {
@@ -33,13 +32,9 @@ import {
   type AuthOperationGuard,
 } from "../auth/authOperation";
 import { Button } from "../components/ui/button";
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogHeader,
-  DialogTitle,
-} from "../components/ui/dialog";
+import { WorkAreaPanel } from "./WorkAreaPanel";
+
+import "./WorkspaceManager.css";
 
 function QueryError({ name, message, retryLabel, onRetry }: {
   name: string;
@@ -393,23 +388,18 @@ export function WorkspaceManager({
   const hasEnteredSecrets = Object.values(secretValues).some((value) => value.length > 0);
 
   return (
-    <Dialog open={open} onOpenChange={(nextOpen) => { if (!nextOpen) close(); }}>
-      <DialogContent
-        showCloseButton={false}
-        className="h-[86vh] w-[94vw] max-h-[92vh] max-w-[94vw] grid-rows-[auto_minmax(0,1fr)] gap-0 overflow-hidden p-0 sm:w-[70vw] sm:max-w-[94vw]"
-      >
-        <DialogHeader className="border-b border-border/70 px-6 pb-4 pt-5 pr-12">
-          <DialogTitle>Workspace management</DialogTitle>
-          <DialogDescription>
-            Read, validate, and complete the runtime configuration of workspaces supplied by the installation repository.
-          </DialogDescription>
-        </DialogHeader>
-        <button type="button" aria-label="Close workspace management" onClick={close} className="absolute right-3 top-3 grid size-7 place-items-center rounded-md text-muted-foreground hover:bg-muted hover:text-foreground">
-          <X className="size-4" />
-        </button>
-
-        <div className="grid min-h-0 grid-cols-[15rem_minmax(0,1fr)] overflow-hidden">
-          <nav aria-label="Workspaces" className="flex min-h-0 flex-col border-r border-border/70 bg-muted/30 p-3">
+    <WorkAreaPanel
+      open={open}
+      ariaLabel="Workspace management"
+      eyebrow="Workspace configuration"
+      title="Workspace management"
+      description="Read, validate, and complete the runtime configuration of workspaces supplied by the installation repository."
+      onClose={close}
+      closeLabel="Close workspace management"
+      bodyClassName="thot-work-area-panel__body--flush"
+    >
+        <div className="thot-workspace-manager__layout">
+          <nav aria-label="Workspaces" className="thot-workspace-manager__navigation flex min-h-0 flex-col bg-muted/30 p-3">
             <Button
               type="button"
               size="sm"
@@ -442,7 +432,10 @@ export function WorkspaceManager({
             </div>
           </nav>
 
-          <main className="min-h-0 min-w-0 overflow-y-auto overscroll-contain px-6 py-5">
+          <section
+            aria-label="Workspace configuration"
+            className="thot-workspace-manager__content min-h-0 min-w-0 overflow-y-auto overscroll-contain px-6 py-5"
+          >
             {notice && (
               <p role="status" className="mb-4 flex items-center gap-2 rounded-md border border-border bg-muted/50 px-3 py-2 text-sm">
                 <CheckCircle2 className="size-4 text-primary" />{notice}
@@ -689,9 +682,8 @@ export function WorkspaceManager({
                 )}
               </section>
             )}
-          </main>
+          </section>
         </div>
-      </DialogContent>
-    </Dialog>
+    </WorkAreaPanel>
   );
 }