refactor(playground): simplify API Playground description for clarity

- Removed redundant text from the API Playground description to enhance readability.
- Improved layout in FolderNode by adding dropdown state management for better user interaction.
- Updated Sidebar component styles for improved visual consistency and user experience.
This commit is contained in:
Anish Sarkar 2026-07-07 23:12:08 +05:30
parent 2927a9484e
commit 803577436f
3 changed files with 18 additions and 18 deletions

View file

@ -23,8 +23,7 @@ export function PlaygroundIndex({ workspaceId }: { workspaceId: number }) {
<div>
<h1 className="text-xl font-semibold text-foreground md:text-2xl">API Playground</h1>
<p className="mt-1 text-sm text-muted-foreground">
Manually run SurfSense's platform-native APIs and inspect their output. Every run is
captured under Runs.
Manually run SurfSense's platform-native APIs and inspect their output.
</p>
</div>

View file

@ -129,6 +129,7 @@ export const FolderNode = React.memo(function FolderNode({
const rowRef = useRef<HTMLDivElement>(null);
const [dropZone, setDropZone] = useState<DropZone | null>(null);
const [isRescanning, setIsRescanning] = useState(false);
const [dropdownOpen, setDropdownOpen] = useState(false);
const handleRescan = useCallback(async () => {
if (isRescanning) return;
@ -349,12 +350,17 @@ export const FolderNode = React.memo(function FolderNode({
)}
{!isRenaming && (
<DropdownMenu>
<DropdownMenu open={dropdownOpen} onOpenChange={setDropdownOpen}>
<DropdownMenuTrigger asChild>
<Button
variant="ghost"
size="icon"
className="hidden sm:inline-flex h-6 w-6 shrink-0 opacity-0 group-hover:opacity-100 transition-opacity"
className={cn(
"hidden sm:inline-flex h-6 w-6 shrink-0 hover:bg-transparent transition-opacity",
dropdownOpen
? "opacity-100 bg-accent hover:bg-accent"
: "opacity-0 group-hover:opacity-100"
)}
onClick={(e) => e.stopPropagation()}
>
<MoreHorizontal className="h-3.5 w-3.5 text-muted-foreground" />

View file

@ -6,7 +6,6 @@ import { useParams } from "next/navigation";
import { useTranslations } from "next-intl";
import { type ReactNode, useMemo, useState } from "react";
import { ConnectAgentDialog } from "@/components/mcp/connect-agent-dialog";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Progress } from "@/components/ui/progress";
import { Skeleton } from "@/components/ui/skeleton";
@ -410,29 +409,25 @@ function SidebarUsageFooter({
return (
<div className={containerClass}>
<CreditBalanceDisplay />
<div className="space-y-0.5">
<div className="relative grid grid-cols-2 before:absolute before:inset-y-1 before:left-1/2 before:w-px before:-translate-x-1/2 before:bg-border">
<Link
href={`/dashboard/${workspaceId}/earn-credits`}
onClick={onNavigate}
className="group flex w-full items-center justify-between rounded-md px-1.5 py-1 transition-colors hover:bg-accent"
className="group relative z-10 mx-0.5 flex min-w-0 items-center justify-center gap-1 rounded-md px-1.5 py-1 text-xs text-muted-foreground transition-colors hover:bg-accent hover:text-accent-foreground"
>
<span className="flex items-center gap-1.5 text-xs text-muted-foreground group-hover:text-accent-foreground">
<Zap className="h-3 w-3 shrink-0" />
Earn credits
</span>
<Badge className="h-4 rounded px-1 text-[10px] font-semibold leading-none bg-emerald-600 text-white border-transparent hover:bg-emerald-600">
<Zap className="h-3 w-3 shrink-0" />
<span className="truncate">Earn</span>
<SidebarButtonBadge className="h-4 px-1 text-[10px] bg-emerald-600 text-white hover:bg-emerald-600">
FREE
</Badge>
</SidebarButtonBadge>
</Link>
<Link
href={`/dashboard/${workspaceId}/buy-more`}
onClick={onNavigate}
className="group flex w-full items-center justify-between rounded-md px-1.5 py-1 transition-colors hover:bg-accent"
className="group relative z-10 mx-0.5 flex min-w-0 items-center justify-center gap-1 rounded-md px-1.5 py-1 text-xs text-muted-foreground transition-colors hover:bg-accent hover:text-accent-foreground"
>
<span className="flex items-center gap-1.5 text-xs text-muted-foreground group-hover:text-accent-foreground">
<CreditCard className="h-3 w-3 shrink-0" />
Buy credits
</span>
<CreditCard className="h-3 w-3 shrink-0" />
<span className="truncate">Buy</span>
</Link>
</div>
</div>