feat(playground): enhance Playground layout with new sidebar and navigation functions

- Introduced PlaygroundSidebar component for improved navigation within the API Playground.
- Added utility functions for generating navigation items and groups, enhancing modularity and reusability.
- Updated PlaygroundLayoutShell to utilize new navigation functions, streamlining the layout structure.
- Enhanced RoutedSectionShell to support optional desktop navigation, improving responsiveness and user experience.

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

@@ -1,15 +1,14 @@
 "use client";
 
-import { History, LayoutGrid } from "lucide-react";
 import { useSelectedLayoutSegments } from "next/navigation";
 import type React from "react";
 import { useMemo } from "react";
 import {
-	type RoutedSectionGroup,
-	type RoutedSectionItem,
+	getPlaygroundNavGroups,
+	getPlaygroundNavItems,
+	getPlaygroundSelectedLabel,
 	RoutedSectionShell,
 } from "@/components/layout";
-import { PLAYGROUND_PLATFORMS } from "@/lib/playground/catalog";
 
 interface PlaygroundLayoutShellProps {
 	workspaceId: string;
@@ -20,41 +19,8 @@ export function PlaygroundLayoutShell({ workspaceId, children }: PlaygroundLayou
 	const segments = useSelectedLayoutSegments();
 	const base = `/dashboard/${workspaceId}/playground`;
 
-	const topLevelItems = useMemo<RoutedSectionItem[]>(
-		() => [
-			{
-				value: "overview",
-				label: "Overview",
-				href: base,
-				icon: <LayoutGrid className="h-4 w-4" />,
-			},
-			{
-				value: "runs",
-				label: "API Runs",
-				href: `${base}/runs`,
-				icon: <History className="h-4 w-4" />,
-			},
-		],
-		[base]
-	);
-
-	const providerGroups = useMemo<RoutedSectionGroup[]>(
-		() =>
-			PLAYGROUND_PLATFORMS.map((platform) => {
-				const Icon = platform.icon;
-				return {
-					value: platform.id,
-					label: platform.label,
-					icon: <Icon className="h-4 w-4 shrink-0" />,
-					items: platform.verbs.map((verb) => ({
-						value: `${platform.id}/${verb.verb}`,
-						label: verb.label,
-						href: `${base}/${platform.id}/${verb.verb}`,
-					})),
-				};
-			}),
-		[base]
-	);
+	const topLevelItems = useMemo(() => getPlaygroundNavItems(base), [base]);
+	const providerGroups = useMemo(() => getPlaygroundNavGroups(base), [base]);
 
 	const activeValue =
 		segments.length >= 2
@@ -63,7 +29,7 @@ export function PlaygroundLayoutShell({ workspaceId, children }: PlaygroundLayou
 				? segments[0]
 				: "overview";
 
-	const selectedLabel = getSelectedLabel(activeValue, topLevelItems, providerGroups);
+	const selectedLabel = getPlaygroundSelectedLabel(activeValue, topLevelItems, providerGroups);
 
 	return (
 		<RoutedSectionShell
@@ -73,23 +39,9 @@ export function PlaygroundLayoutShell({ workspaceId, children }: PlaygroundLayou
 			activeValue={activeValue}
 			selectedLabel={selectedLabel}
 			mobileNav="drawer"
+			desktopNav={false}
 		>
 			{children}
 		</RoutedSectionShell>
 	);
 }
-
-function getSelectedLabel(
-	activeValue: string,
-	items: RoutedSectionItem[],
-	groups: RoutedSectionGroup[]
-): string {
-	const topLevelItem = items.find((item) => item.value === activeValue);
-	if (topLevelItem) return topLevelItem.label;
-
-	const group = groups.find((item) => item.items.some((child) => child.value === activeValue));
-	const child = group?.items.find((item) => item.value === activeValue);
-
-	if (group && child) return `${group.label}: ${child.label}`;
-	return "API Playground";
-}