refactor(playground): enhance PlaygroundLayoutShell with improved navigation and component structure

- Added new TopLevelNavLink and ProviderNavGroup components for better organization of navigation items.
- Updated state management for expanded providers and active navigation items.
- Refactored navigation item structure to simplify rendering and improve clarity.
- Integrated ChevronRight icon for visual indication of expandable sections.

surfsense_web/app/dashboard/[workspace_id]/playground/layout-shell.tsx

@@ -1,12 +1,20 @@
 "use client";
 
-import { History, LayoutGrid } from "lucide-react";
+import { ChevronRight, History, LayoutGrid } from "lucide-react";
 import Link from "next/link";
 import { useSelectedLayoutSegments } from "next/navigation";
 import type React from "react";
-import { useCallback, useMemo, useState } from "react";
+import { useEffect, useMemo, useState } from "react";
+import { Button } from "@/components/ui/button";
+import {
+	Drawer,
+	DrawerContent,
+	DrawerHandle,
+	DrawerTitle,
+	DrawerTrigger,
+} from "@/components/ui/drawer";
 import { Separator } from "@/components/ui/separator";
-import { PLAYGROUND_PLATFORMS, type PlatformIcon } from "@/lib/playground/catalog";
+import { PLAYGROUND_PLATFORMS, type PlaygroundPlatform, type PlaygroundVerb } from "@/lib/playground/catalog";
 import { cn } from "@/lib/utils";
 
 interface PlaygroundLayoutShellProps {
@@ -14,28 +22,21 @@ interface PlaygroundLayoutShellProps {
 	children: React.ReactNode;
 }
 
-type PlaygroundNavItem =
-	| {
-			type: "item";
-			value: string;
-			label: string;
-			href: string;
-			icon: React.ReactNode;
-			indented?: boolean;
-	  }
-	| {
-			type: "section";
-			value: string;
-			label: string;
-			icon: PlatformIcon;
-	  };
+interface TopLevelNavItem {
+	value: "overview" | "runs";
+	label: string;
+	href: string;
+	icon: React.ReactNode;
+}
 
-function PlaygroundNavLink({
+function TopLevelNavLink({
 	item,
 	activeValue,
+	onNavigate,
 }: {
-	item: Extract<PlaygroundNavItem, { type: "item" }>;
+	item: TopLevelNavItem;
 	activeValue: string;
+	onNavigate?: () => void;
 }) {
 	const isActive = activeValue === item.value;
 
@@ -45,9 +46,9 @@ function PlaygroundNavLink({
 			replace
 			scroll={false}
 			prefetch
+			onClick={onNavigate}
 			className={cn(
 				"inline-flex h-auto items-center justify-start gap-3 rounded-md px-3 py-2.5 text-left text-sm font-medium transition-colors duration-150 focus:outline-none focus-visible:outline-none",
-				item.indented && "pl-9",
 				isActive
 					? "bg-accent text-accent-foreground"
 					: "bg-transparent text-muted-foreground hover:bg-accent hover:text-accent-foreground"
@@ -59,50 +60,109 @@ function PlaygroundNavLink({
 	);
 }
 
+function ProviderNavGroup({
+	platform,
+	base,
+	activeValue,
+	isExpanded,
+	onToggle,
+	onNavigate,
+}: {
+	platform: PlaygroundPlatform;
+	base: string;
+	activeValue: string;
+	isExpanded: boolean;
+	onToggle: () => void;
+	onNavigate?: () => void;
+}) {
+	const Icon = platform.icon;
+
+	return (
+		<div className="flex flex-col gap-0.5">
+			<button
+				type="button"
+				aria-expanded={isExpanded}
+				onClick={onToggle}
+				className={cn(
+					"inline-flex h-auto items-center justify-start gap-3 rounded-md px-3 py-2.5 text-left text-sm font-medium transition-colors duration-150 focus:outline-none focus-visible:outline-none",
+					isExpanded
+						? "text-accent-foreground"
+						: "text-muted-foreground hover:bg-accent hover:text-accent-foreground"
+				)}
+			>
+				<Icon className="h-4 w-4 shrink-0" />
+				<span className="min-w-0 truncate">{platform.label}</span>
+				<ChevronRight
+					className={cn("ml-auto h-4 w-4 shrink-0 transition-transform", isExpanded && "rotate-90")}
+				/>
+			</button>
+			<div
+				className={cn(
+					"grid overflow-hidden transition-[grid-template-rows,opacity] duration-200 ease-out",
+					isExpanded ? "grid-rows-[1fr] opacity-100" : "grid-rows-[0fr] opacity-0"
+				)}
+				aria-hidden={!isExpanded}
+			>
+				<div className="min-h-0 overflow-hidden">
+					<div className="flex flex-col gap-0.5 pl-10">
+						{platform.verbs.map((verb) => {
+							const value = `${platform.id}/${verb.verb}`;
+							const isActive = activeValue === value;
+							return (
+								<Link
+									key={value}
+									href={`${base}/${platform.id}/${verb.verb}`}
+									replace
+									scroll={false}
+									prefetch
+									onClick={onNavigate}
+									className={cn(
+										"inline-flex h-auto items-center justify-start rounded-md px-3 py-2 text-left text-sm font-medium transition-colors duration-150 focus:outline-none focus-visible:outline-none",
+										isActive
+											? "bg-accent text-accent-foreground"
+											: "text-muted-foreground hover:bg-accent hover:text-accent-foreground"
+									)}
+								>
+									<span className="min-w-0 truncate">{verb.label}</span>
+								</Link>
+							);
+						})}
+					</div>
+				</div>
+			</div>
+		</div>
+	);
+}
+
 export function PlaygroundLayoutShell({ workspaceId, children }: PlaygroundLayoutShellProps) {
 	const segments = useSelectedLayoutSegments();
-	const [tabScrollPos, setTabScrollPos] = useState<"start" | "middle" | "end">("start");
 	const base = `/dashboard/${workspaceId}/playground`;
+	const activePlatform = PLAYGROUND_PLATFORMS.some((platform) => platform.id === segments[0])
+		? segments[0]
+		: null;
+	const [expandedProvider, setExpandedProvider] = useState<string | null>(activePlatform);
+	const [mobileNavOpen, setMobileNavOpen] = useState(false);
 
-	const handleTabScroll = useCallback((e: React.UIEvent<HTMLDivElement>) => {
-		const el = e.currentTarget;
-		const atStart = el.scrollLeft <= 2;
-		const atEnd = el.scrollWidth - el.scrollLeft - el.clientWidth <= 2;
-		setTabScrollPos(atStart ? "start" : atEnd ? "end" : "middle");
-	}, []);
+	useEffect(() => {
+		if (activePlatform) {
+			setExpandedProvider(activePlatform);
+		}
+	}, [activePlatform]);
 
-	const navItems = useMemo<PlaygroundNavItem[]>(
+	const topLevelItems = useMemo<TopLevelNavItem[]>(
 		() => [
 			{
-				type: "item",
 				value: "overview",
 				label: "Overview",
 				href: base,
 				icon: <LayoutGrid className="h-4 w-4" />,
 			},
 			{
-				type: "item",
 				value: "runs",
 				label: "Runs",
 				href: `${base}/runs`,
 				icon: <History className="h-4 w-4" />,
 			},
-			...PLAYGROUND_PLATFORMS.flatMap<PlaygroundNavItem>((platform) => [
-				{
-					type: "section",
-					value: platform.id,
-					label: platform.label,
-					icon: platform.icon,
-				},
-				...platform.verbs.map((verb) => ({
-					type: "item" as const,
-					value: `${platform.id}/${verb.verb}`,
-					label: verb.label,
-					href: `${base}/${platform.id}/${verb.verb}`,
-					icon: <span className="h-4 w-4" />,
-					indented: true,
-				})),
-			]),
 		],
 		[base]
 	);
@@ -110,14 +170,39 @@ export function PlaygroundLayoutShell({ workspaceId, children }: PlaygroundLayou
 	const activeValue =
 		segments.length >= 2
 			? `${segments[0]}/${segments[1]}`
-			: segments[0] && navItems.some((item) => item.type === "item" && item.value === segments[0])
+			: segments[0] && topLevelItems.some((item) => item.value === segments[0])
 				? segments[0]
 				: "overview";
-	const selectedLabel =
-		navItems.find((item) => item.type === "item" && item.value === activeValue)?.label ??
-		"API Playground";
-	const mobileItems = navItems.filter(
-		(item): item is Extract<PlaygroundNavItem, { type: "item" }> => item.type === "item"
+
+	const selectedLabel = getSelectedLabel(activeValue, topLevelItems);
+
+	const renderNav = (onNavigate?: () => void) => (
+		<>
+			{topLevelItems.map((item) => (
+				<TopLevelNavLink
+					key={item.value}
+					item={item}
+					activeValue={activeValue}
+					onNavigate={onNavigate}
+				/>
+			))}
+			<Separator className="my-3 bg-border" />
+			<div className="flex flex-col gap-0.5">
+				{PLAYGROUND_PLATFORMS.map((platform) => (
+					<ProviderNavGroup
+						key={platform.id}
+						platform={platform}
+						base={base}
+						activeValue={activeValue}
+						isExpanded={expandedProvider === platform.id}
+						onToggle={() =>
+							setExpandedProvider((current) => (current === platform.id ? null : platform.id))
+						}
+						onNavigate={onNavigate}
+					/>
+				))}
+			</div>
+		</>
 	);
 
 	return (
@@ -127,52 +212,27 @@ export function PlaygroundLayoutShell({ workspaceId, children }: PlaygroundLayou
 					API Playground
 				</h1>
 				<nav className="hidden flex-col gap-0.5 md:flex">
-					{navItems.map((item) => {
-						if (item.type === "section") {
-							const Icon = item.icon;
-							return (
-								<div
-									key={item.value}
-									className="mt-3 flex items-center gap-2 px-3 py-1 text-xs font-medium text-muted-foreground first:mt-1"
-								>
-									<Icon className="h-3.5 w-3.5 shrink-0" />
-									<span className="truncate">{item.label}</span>
-								</div>
-							);
-						}
-
-						return <PlaygroundNavLink key={item.value} item={item} activeValue={activeValue} />;
-					})}
+					{renderNav()}
 				</nav>
-				<div
-					className="overflow-x-auto border-b border-border pb-3 md:hidden"
-					onScroll={handleTabScroll}
-					style={{
-						maskImage: `linear-gradient(to right, ${tabScrollPos === "start" ? "black" : "transparent"}, black 24px, black calc(100% - 24px), ${tabScrollPos === "end" ? "black" : "transparent"})`,
-						WebkitMaskImage: `linear-gradient(to right, ${tabScrollPos === "start" ? "black" : "transparent"}, black 24px, black calc(100% - 24px), ${tabScrollPos === "end" ? "black" : "transparent"})`,
-					}}
-				>
-					<div className="flex gap-1">
-						{mobileItems.map((item) => (
-							<Link
-								key={item.value}
-								href={item.href}
-								replace
-								scroll={false}
-								prefetch
-								className={cn(
-									"inline-flex h-auto shrink-0 items-center gap-2 rounded-md px-3 py-1.5 text-xs font-medium transition-colors duration-150 focus:outline-none focus-visible:outline-none",
-									activeValue === item.value
-										? "bg-accent text-accent-foreground"
-										: "bg-transparent text-muted-foreground hover:bg-accent hover:text-accent-foreground"
-								)}
-							>
-								{item.icon}
-								{item.label}
-							</Link>
-						))}
-					</div>
-				</div>
+				<Drawer open={mobileNavOpen} onOpenChange={setMobileNavOpen} shouldScaleBackground={false}>
+					<DrawerTrigger asChild>
+						<Button
+							type="button"
+							variant="outline"
+							className="flex h-10 w-full justify-between bg-transparent px-3 hover:bg-accent md:hidden"
+						>
+							<span className="truncate">{selectedLabel}</span>
+							<ChevronRight className="h-4 w-4 rotate-90 text-muted-foreground" />
+						</Button>
+					</DrawerTrigger>
+					<DrawerContent className="h-[88vh] overflow-hidden rounded-t-2xl border bg-popover text-popover-foreground">
+						<DrawerHandle className="mt-3 h-1.5 w-10" />
+						<DrawerTitle className="sr-only">API Playground navigation</DrawerTitle>
+						<nav className="flex min-h-0 flex-1 flex-col gap-0.5 overflow-y-auto p-4">
+							{renderNav(() => setMobileNavOpen(false))}
+						</nav>
+					</DrawerContent>
+				</Drawer>
 			</div>
 
 			<div className="min-w-0 flex-1">
@@ -185,3 +245,15 @@ export function PlaygroundLayoutShell({ workspaceId, children }: PlaygroundLayou
 		</section>
 	);
 }
+
+function getSelectedLabel(activeValue: string, topLevelItems: TopLevelNavItem[]): string {
+	const topLevelItem = topLevelItems.find((item) => item.value === activeValue);
+	if (topLevelItem) return topLevelItem.label;
+
+	const [platformId, verbId] = activeValue.split("/");
+	const platform = PLAYGROUND_PLATFORMS.find((item) => item.id === platformId);
+	const verb: PlaygroundVerb | undefined = platform?.verbs.find((item) => item.verb === verbId);
+
+	if (platform && verb) return `${platform.label} / ${verb.label}`;
+	return "API Playground";
+}