feat: SW-2118 Evolve Data App Shell into composable AppShell container (#183)

Co-authored-by: Claude Fable 5 <noreply@anthropic.com>
Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>

Author: 3 people

src/components/composed/DataAppShell/CollapseButton.tsx

@@ -0,0 +1,65 @@
+"use client";
+
+import { ChevronDown, ChevronLeft, ChevronRight, ChevronUp } from "lucide-react";
+import * as React from "react";
+
+import { Button } from "@/components/ui/button";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
+import { cn } from "@/lib/utils";
+
+const CHEVRONS = {
+  left: ChevronLeft,
+  right: ChevronRight,
+  up: ChevronUp,
+  down: ChevronDown,
+} as const;
+
+export interface ShellCollapseButtonProps extends Omit<React.ComponentProps<typeof Button>, "children"> {
+  /** Chevron direction the button points at. */
+  direction: keyof typeof CHEVRONS;
+  /** Accessible name + tooltip text (e.g. "Collapse navigation"). */
+  label: string;
+  /** Tooltip side. Defaults to `right` (rail/sidebar placements). */
+  tooltipSide?: "top" | "right" | "bottom" | "left";
+}
+
+/**
+ * The shell's shared collapse/expand affordance — a small outlined square with
+ * a chevron, placed in a zone's header row when expanded and at the top of the
+ * collapsed rail. One component so every zone's trigger looks identical.
+ */
+function ShellCollapseButton({
+  direction,
+  label,
+  tooltipSide = "right",
+  className,
+  ...props
+}: ShellCollapseButtonProps) {
+  const Chevron = CHEVRONS[direction];
+  // cn() so consumer classes properly override the base (tailwind-merge)
+  const mergedClassName = cn(
+    "w-5 h-5 shrink-0 text-muted-foreground hover:text-primary hover:border-primary",
+    className,
+  );
+  return (
+    <TooltipProvider>
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <Button
+            data-slot="data-app-shell-collapse-button"
+            variant="outline"
+            size="icon"
+            {...props}
+            className={mergedClassName}
+            aria-label={label}
+          >
+            <Chevron className="w-3.5 h-3.5" />
+          </Button>
+        </TooltipTrigger>
+        <TooltipContent side={tooltipSide}>{label}</TooltipContent>
+      </Tooltip>
+    </TooltipProvider>
+  );
+}
+
+export { ShellCollapseButton };