feat(playground): implement Playground layout and navigation structure

- Introduced PlaygroundLayoutShell component for managing the layout and navigation of the API Playground.
- Added PlaygroundLayout component to handle workspace-specific rendering.
- Removed PlaygroundSidebar and related state management to simplify the UI and enhance mobile responsiveness.
- Updated LayoutDataProvider and LayoutShell components to reflect the new Playground structure.

surfsense_web/components/layout/providers/LayoutDataProvider.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { useQuery } from "@tanstack/react-query";
-import { useAtom, useAtomValue, useSetAtom } from "jotai";
+import { useAtomValue, useSetAtom } from "jotai";
 import { AlarmClock, AlertTriangle, Boxes, SquareTerminal } from "lucide-react";
 import { useParams, usePathname, useRouter } from "next/navigation";
 import { useTranslations } from "next-intl";
@@ -11,7 +11,6 @@ import { toast } from "sonner";
 import { currentThreadAtom, resetCurrentThreadAtom } from "@/atoms/chat/current-thread.atom";
 import { statusInboxItemsAtom } from "@/atoms/inbox/status-inbox.atom";
 import { announcementsDialogAtom } from "@/atoms/layout/dialogs.atom";
-import { playgroundSidebarOpenAtom } from "@/atoms/layout/playground.atom";
 import { removeChatTabAtom, syncChatTabAtom, type Tab } from "@/atoms/tabs/tabs.atom";
 import { currentUserAtom } from "@/atoms/user/user-query.atoms";
 import { deleteWorkspaceMutationAtom } from "@/atoms/workspaces/workspace-mutation.atoms";
@@ -43,7 +42,6 @@ import { Spinner } from "@/components/ui/spinner";
 import { useActivateChatThread } from "@/hooks/use-activate-chat-thread";
 import { useAnnouncements } from "@/hooks/use-announcements";
 import { useInbox } from "@/hooks/use-inbox";
-import { useIsMobile } from "@/hooks/use-mobile";
 import { useArchiveThread, useDeleteThread, useRenameThread } from "@/hooks/use-thread-mutations";
 import { notificationsApiService } from "@/lib/apis/notifications-api.service";
 import { workspacesApiService } from "@/lib/apis/workspaces-api.service";
@@ -68,8 +66,6 @@ export function LayoutDataProvider({ workspaceId, children }: LayoutDataProvider
 	const params = useParams();
 	const pathname = usePathname();
 	const { theme, setTheme } = useTheme();
-	const isMobile = useIsMobile();
-	const [playgroundSidebarOpen, setPlaygroundSidebarOpen] = useAtom(playgroundSidebarOpenAtom);
 
 	// Announcements
 	const { unreadCount: announcementUnreadCount } = useAnnouncements();
@@ -316,20 +312,11 @@ export function LayoutDataProvider({ workspaceId, children }: LayoutDataProvider
 						title: "Playground",
 						url: `/dashboard/${workspaceId}/playground`,
 						icon: SquareTerminal,
-						// Mobile has no second-level sidebar: Playground is a plain link
-						// there, so highlight by route. Desktop highlights the toggle state.
-						isActive: isMobile ? isPlaygroundRoute : playgroundSidebarOpen,
+						isActive: isPlaygroundRoute,
 					},
 				] as (NavItem | null)[]
 			).filter((item): item is NavItem => item !== null),
-		[
-			workspaceId,
-			isAutomationsActive,
-			isArtifactsActive,
-			isPlaygroundRoute,
-			playgroundSidebarOpen,
-			isMobile,
-		]
+		[workspaceId, isAutomationsActive, isArtifactsActive, isPlaygroundRoute]
 	);
 
 	// Handlers
@@ -466,18 +453,9 @@ export function LayoutDataProvider({ workspaceId, children }: LayoutDataProvider
 
 	const handleNavItemClick = useCallback(
 		(item: NavItem) => {
-			// Desktop: Playground is a persistent toggle, not a plain link — it just
-			// opens the second-level sidebar (which holds the whole API playground)
-			// and only closes on a second click, never navigating away from the
-			// current page (e.g. a new chat). Mobile has no second-level sidebar,
-			// so there it navigates to the playground index page instead.
-			if (item.url.endsWith("/playground") && !isMobile) {
-				setPlaygroundSidebarOpen((prev) => !prev);
-				return;
-			}
 			router.push(item.url);
 		},
-		[router, setPlaygroundSidebarOpen, isMobile]
+		[router]
 	);
 
 	const handleNewChat = useCallback(() => {
@@ -699,7 +677,6 @@ export function LayoutDataProvider({ workspaceId, children }: LayoutDataProvider
 				setTheme={setTheme}
 				isChatPage={isChatPage}
 				isAllChatsPage={isAllChatsPage}
-				showPlaygroundSidebar={playgroundSidebarOpen}
 				useWorkspacePanel={useWorkspacePanel}
 				workspacePanelViewportClassName={
 					isUserSettingsPage ||
@@ -713,13 +690,7 @@ export function LayoutDataProvider({ workspaceId, children }: LayoutDataProvider
 						: undefined
 				}
 				workspacePanelContentClassName={
-					isAutomationsPage || isPlaygroundPage
-						? "max-w-none select-none"
-						: isAllChatsPage
-							? "max-w-5xl"
-							: isUserSettingsPage || isWorkspaceSettingsPage || isTeamPage || isArtifactsPage
-								? "max-w-5xl"
-								: undefined
+					useWorkspacePanel ? "max-w-5xl select-none" : undefined
 				}
 				isLoadingChats={isLoadingThreads}
 				notifications={{

surfsense_web/components/layout/ui/shell/LayoutShell.tsx

@@ -27,7 +27,6 @@ import {
 import {
 	MobileSidebar,
 	MobileSidebarTrigger,
-	PlaygroundSidebar,
 	Sidebar,
 	SidebarCollapseButton,
 } from "../sidebar";
@@ -109,7 +108,6 @@ interface LayoutShellProps {
 	defaultCollapsed?: boolean;
 	isChatPage?: boolean;
 	isAllChatsPage?: boolean;
-	showPlaygroundSidebar?: boolean;
 	useWorkspacePanel?: boolean;
 	workspacePanelViewportClassName?: string;
 	workspacePanelContentClassName?: string;
@@ -210,7 +208,6 @@ export function LayoutShell({
 	defaultCollapsed = false,
 	isChatPage = false,
 	isAllChatsPage = false,
-	showPlaygroundSidebar = false,
 	useWorkspacePanel = false,
 	workspacePanelViewportClassName,
 	workspacePanelContentClassName,
@@ -338,27 +335,11 @@ export function LayoutShell({
 							/>
 						</div>
 
-						{/* Playground second-level sidebar — contextual, desktop only. Sits
-						    between the icon rail and the main sidebar. On Mac it becomes the
-						    leftmost panel, so it takes the rounded-corner/left-border treatment. */}
-						{showPlaygroundSidebar && activeWorkspaceId != null && (
-							<div
-								className={cn(
-									"relative hidden md:flex shrink-0 z-20 -mr-2 bg-panel",
-									isMacDesktop ? "rounded-tl-xl border-t border-r border-l" : "border-r"
-								)}
-							>
-								<PlaygroundSidebar workspaceId={activeWorkspaceId} />
-							</div>
-						)}
-
 						{/* Sidebar + slide-out panels share one container; overflow visible so panels can overlay main content. Negative right margin closes the flex gap so the sidebar sits flush against the main panel, separated only by a border. */}
 						<div
 							className={cn(
 								"relative hidden md:flex shrink-0 z-20 -mr-2 bg-panel",
-								isMacDesktop
-									? cn("border-t border-r", !showPlaygroundSidebar && "rounded-tl-xl border-l")
-									: "border-r"
+								isMacDesktop ? "rounded-tl-xl border-l border-t border-r" : "border-r"
 							)}
 						>
 							<Sidebar
@@ -396,7 +377,7 @@ export function LayoutShell({
 								}
 								className={cn(
 									"flex shrink-0",
-									isMacDesktop && !showPlaygroundSidebar && "rounded-tl-xl"
+									isMacDesktop && "rounded-tl-xl"
 								)}
 								isLoadingChats={isLoadingChats}
 								sidebarWidth={sidebarWidth}

surfsense_web/components/layout/ui/sidebar/PlaygroundSidebar.tsx

@@ -1,94 +0,0 @@
-"use client";
-
-import { History, KeyRound } from "lucide-react";
-import Link from "next/link";
-import { usePathname } from "next/navigation";
-import { PLAYGROUND_PLATFORMS, type PlatformIcon } from "@/lib/playground/catalog";
-import { cn } from "@/lib/utils";
-
-interface PlaygroundSidebarProps {
-	workspaceId: number | string;
-}
-
-function PlaygroundNavLink({
-	href,
-	label,
-	icon: Icon,
-	isActive,
-	indented = false,
-}: {
-	href: string;
-	label: string;
-	icon?: PlatformIcon;
-	isActive: boolean;
-	indented?: boolean;
-}) {
-	return (
-		<Link
-			href={href}
-			aria-current={isActive ? "page" : undefined}
-			className={cn(
-				"group/link relative flex h-9 items-center gap-2 rounded-md mx-2 px-2 text-sm text-left",
-				"transition-colors hover:bg-accent hover:text-accent-foreground",
-				"focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
-				indented && "pl-8",
-				isActive && "bg-accent text-accent-foreground"
-			)}
-		>
-			{Icon ? <Icon className="h-3.5 w-3.5 shrink-0" /> : null}
-			<span className="min-w-0 flex-1 truncate">{label}</span>
-		</Link>
-	);
-}
-
-export function PlaygroundSidebar({ workspaceId }: PlaygroundSidebarProps) {
-	const pathname = usePathname();
-	const base = `/dashboard/${workspaceId}/playground`;
-
-	return (
-		<div className="relative flex h-full w-[240px] flex-col bg-panel text-sidebar-foreground overflow-hidden select-none">
-			<div className="flex h-12 shrink-0 items-center px-4">
-				<span className="text-sm font-semibold">API Playground</span>
-			</div>
-
-			<div className="flex flex-col gap-0.5 pt-1.5 pb-1.5 after:mx-3 after:mt-1.5 after:block after:h-px after:bg-border">
-				<PlaygroundNavLink
-					href={`${base}/runs`}
-					label="Runs"
-					icon={History}
-					isActive={pathname === `${base}/runs`}
-				/>
-				<PlaygroundNavLink
-					href={`${base}/api-keys`}
-					label="API Keys"
-					icon={KeyRound}
-					isActive={pathname === `${base}/api-keys`}
-				/>
-			</div>
-
-			<div className="flex-1 w-full min-h-0 overflow-y-auto overflow-x-hidden scrollbar-thin scrollbar-thumb-muted-foreground/20 scrollbar-track-transparent pb-2">
-				{PLAYGROUND_PLATFORMS.map((platform) => (
-					<div key={platform.id} className="flex flex-col gap-0.5 pt-2">
-						<div className="flex items-center gap-2 pl-4 pr-2.5 py-1 text-xs font-medium text-muted-foreground">
-							<platform.icon className="h-3.5 w-3.5 shrink-0" />
-							<span className="truncate">{platform.label}</span>
-						</div>
-						{platform.verbs.map((verb) => {
-							const href = `${base}/${platform.id}/${verb.verb}`;
-							return (
-								<PlaygroundNavLink
-									key={verb.name}
-									href={href}
-									label={verb.label}
-									isActive={pathname === href}
-									indented
-								/>
-							);
-						})}
-					</div>
-				))}
-			</div>
-
-		</div>
-	);
-}

surfsense_web/components/layout/ui/sidebar/index.ts

@@ -5,7 +5,6 @@ export { DocumentsSidebar } from "./DocumentsSidebar";
 export { MobileSidebar, MobileSidebarTrigger } from "./MobileSidebar";
 export { NavSection } from "./NavSection";
 export { NotificationsDropdown } from "./NotificationsDropdown";
-export { PlaygroundSidebar } from "./PlaygroundSidebar";
 export { Sidebar } from "./Sidebar";
 export { SidebarCollapseButton } from "./SidebarCollapseButton";
 export { SidebarHeader } from "./SidebarHeader";