apunkt/SurfSense
1
0
Fork 0
mirror of https://github.com/MODSetter/SurfSense.git synced 2026-07-10 22:32:16 +02:00
Code Issues Projects Releases Packages Wiki Activity

feat(playground): implement Playground layout and navigation structure

Browse source 
- 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.
This commit is contained in:
Anish Sarkar 2026-07-07 22:17:51 +05:30
parent ac41671467
commit f2b326b63b
7 changed files with 214 additions and 160 deletions
Download patch file Download diff file Expand all files Collapse all files

192
surfsense_web/app/dashboard/[workspace_id]/playground/layout-shell.tsx Normal file
View file

@ -0,0 +1,192 @@
"use client";
import { History, KeyRound, 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 { Separator } from "@/components/ui/separator";
import { PLAYGROUND_PLATFORMS, type PlatformIcon } from "@/lib/playground/catalog";
import { cn } from "@/lib/utils";
interface PlaygroundLayoutShellProps {
workspaceId: string;
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;
};
function PlaygroundNavLink({
item,
activeValue,
}: {
item: Extract<PlaygroundNavItem, { type: "item" }>;
activeValue: string;
}) {
const isActive = activeValue === item.value;
return (
<Link
href={item.href}
replace
scroll={false}
prefetch
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"
)}
>
{item.icon}
<span className="min-w-0 truncate">{item.label}</span>
</Link>
);
}
export function PlaygroundLayoutShell({ workspaceId, children }: PlaygroundLayoutShellProps) {
const segments = useSelectedLayoutSegments();
const [tabScrollPos, setTabScrollPos] = useState<"start" | "middle" | "end">("start");
const base = `/dashboard/${workspaceId}/playground`;
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");
}, []);
const navItems = useMemo<PlaygroundNavItem[]>(
() => [
{
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" />,
},
{
type: "item",
value: "api-keys",
label: "API Keys",
href: `${base}/api-keys`,
icon: <KeyRound 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]
);
const activeValue =
segments.length >= 2
? `${segments[0]}/${segments[1]}`
: segments[0] && navItems.some((item) => item.type === "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"
);
return (
<section className="flex h-full min-h-[min(680px,calc(100vh-5rem))] w-full select-none flex-col gap-6 md:flex-row">
<div className="md:w-[220px] md:shrink-0">
<h1 className="mb-4 px-1 text-2xl font-semibold tracking-tight">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} />;
})}
</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>
</div>
<div className="min-w-0 flex-1">
<div className="hidden md:block">
<h2 className="text-lg font-semibold">{selectedLabel}</h2>
<Separator className="mt-4 bg-border" />
</div>
<div className="min-w-0 pt-4">{children}</div>
</div>
</section>
);
}

15
surfsense_web/app/dashboard/[workspace_id]/playground/layout.tsx Normal file
View file

@ -0,0 +1,15 @@
import type React from "react";
import { use } from "react";
import { PlaygroundLayoutShell } from "./layout-shell";
export default function PlaygroundLayout({
params,
children,
}: {
params: Promise<{ workspace_id: string }>;
children: React.ReactNode;
}) {
const { workspace_id } = use(params);
return <PlaygroundLayoutShell workspaceId={workspace_id}>{children}</PlaygroundLayoutShell>;
}

10
surfsense_web/atoms/layout/playground.atom.ts
View file

@ -1,10 +0,0 @@
import { atom } from "jotai";
/**
* Whether the second-level API Playground sidebar is open. Toggled by the
* Playground nav button and kept in memory for the session, so it survives
* in-app navigation (opening a new chat won't close it) and only closes when
* the user clicks the toggle. It defaults to open, so a fresh app load — a new
* signup or a relogin — always starts with the playground visible.
*/
export const playgroundSidebarOpenAtom = atom<boolean>(true);

39
surfsense_web/components/layout/providers/LayoutDataProvider.tsx
View file

@ -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={{

23
surfsense_web/components/layout/ui/shell/LayoutShell.tsx
View file

@ -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}

94
surfsense_web/components/layout/ui/sidebar/PlaygroundSidebar.tsx
View file

@ -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>
);
}

1
surfsense_web/components/layout/ui/sidebar/index.ts
View file

@ -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";