refactor(playground): remove API Keys section and update navigation

- Deleted the ApiKeysSection component to streamline the Playground layout.
- Updated PlaygroundLayoutShell and PlaygroundIndex to remove references to API Keys.
- Redirected API Keys page to User Settings for improved navigation flow.

surfsense_web/app/dashboard/[workspace_id]/playground/api-keys/page.tsx

@@ -1,4 +1,4 @@
-import { ApiKeysSection } from "../components/api-keys-section";
+import { redirect } from "next/navigation";
 
 export default async function PlaygroundApiKeysPage({
 	params,
@@ -7,9 +7,5 @@ export default async function PlaygroundApiKeysPage({
 }) {
 	const { workspace_id } = await params;
 
-	return (
-		<div className="mx-auto w-full max-w-3xl">
-			<ApiKeysSection workspaceId={Number(workspace_id)} />
-		</div>
-	);
+	redirect(`/dashboard/${workspace_id}/user-settings/api-key`);
 }

surfsense_web/app/dashboard/[workspace_id]/playground/components/api-keys-section.tsx

@@ -1,82 +0,0 @@
-"use client";
-
-import { useQuery } from "@tanstack/react-query";
-import { useAtomValue } from "jotai";
-import { useState } from "react";
-import { toast } from "sonner";
-import { updateWorkspaceApiAccessMutationAtom } from "@/atoms/workspaces/workspace-mutation.atoms";
-import { Label } from "@/components/ui/label";
-import { Skeleton } from "@/components/ui/skeleton";
-import { Switch } from "@/components/ui/switch";
-import { workspacesApiService } from "@/lib/apis/workspaces-api.service";
-import { cacheKeys } from "@/lib/query-client/cache-keys";
-import { ApiKeyContent } from "../../user-settings/components/ApiKeyContent";
-
-/**
- * One-stop API key management for the playground: the workspace API-access
- * toggle (otherwise buried in workspace settings) plus the personal API key
- * manager (otherwise buried in user settings).
- */
-export function ApiKeysSection({ workspaceId }: { workspaceId: number }) {
-	const {
-		data: workspace,
-		isLoading,
-		refetch,
-	} = useQuery({
-		queryKey: cacheKeys.workspaces.detail(workspaceId.toString()),
-		queryFn: () => workspacesApiService.getWorkspace({ id: workspaceId }),
-		enabled: !!workspaceId,
-	});
-	const { mutateAsync: updateWorkspaceApiAccess } = useAtomValue(
-		updateWorkspaceApiAccessMutationAtom
-	);
-	const [saving, setSaving] = useState(false);
-
-	const handleToggle = async (enabled: boolean) => {
-		try {
-			setSaving(true);
-			await updateWorkspaceApiAccess({ id: workspaceId, api_access_enabled: enabled });
-			await refetch();
-		} catch (error) {
-			console.error("Error updating API access:", error);
-			toast.error(error instanceof Error ? error.message : "Failed to update API access");
-		} finally {
-			setSaving(false);
-		}
-	};
-
-	const apiAccessEnabled = !!workspace?.api_access_enabled;
-
-	return (
-		<div className="space-y-6">
-			<div>
-				<h1 className="text-xl font-semibold text-foreground md:text-2xl">API Keys</h1>
-				<p className="mt-1 text-sm text-muted-foreground">
-					Enable API access for this workspace and manage the keys that use it.
-				</p>
-			</div>
-
-			<div className="flex items-center justify-between gap-4 rounded-lg border border-border/60 px-4 py-3">
-				<div className="space-y-1">
-					<Label htmlFor="playground-api-access">API key access</Label>
-					<p className="text-xs text-muted-foreground">
-						Allow API keys to access this workspace.
-						{!isLoading && !apiAccessEnabled && " Currently disabled — keys won't work here."}
-					</p>
-				</div>
-				{isLoading ? (
-					<Skeleton className="h-5 w-9 rounded-full" />
-				) : (
-					<Switch
-						id="playground-api-access"
-						checked={apiAccessEnabled}
-						disabled={saving}
-						onCheckedChange={handleToggle}
-					/>
-				)}
-			</div>
-
-			<ApiKeyContent />
-		</div>
-	);
-}

surfsense_web/app/dashboard/[workspace_id]/playground/components/api-reference.tsx

@@ -90,9 +90,9 @@ export function ApiReference({
 			<div>
 				<h2 className="text-base font-semibold">API reference</h2>
 				<p className="mt-1 text-sm text-muted-foreground">
-					Call this API from your own project. Create a key under{" "}
-					<span className="font-medium text-foreground">API Keys</span> (and enable API access for
-					this workspace), then send it as a{" "}
+					Call this API from your own project. Create a key in{" "}
+					<span className="font-medium text-foreground">User settings</span> and enable API access
+					for this workspace, then send it as a{" "}
 					<code className="rounded bg-muted/40 px-1 py-0.5 text-xs">Authorization: Bearer</code>{" "}
 					header.
 				</p>

surfsense_web/app/dashboard/[workspace_id]/playground/components/playground-index.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { ArrowRight, History, KeyRound } from "lucide-react";
+import { ArrowRight, History } from "lucide-react";
 import Link from "next/link";
 import { useMemo } from "react";
 import { useScraperCapabilities } from "@/hooks/use-scraper-capabilities";
@@ -41,21 +41,6 @@ export function PlaygroundIndex({ workspaceId }: { workspaceId: number }) {
 					</div>
 					<ArrowRight className="h-4 w-4 text-muted-foreground" />
 				</Link>
-				<Link
-					href={`${base}/api-keys`}
-					className="flex items-center justify-between rounded-lg border border-border/60 bg-accent/40 px-4 py-3 transition-colors hover:bg-accent"
-				>
-					<div className="flex items-center gap-3">
-						<KeyRound className="h-5 w-5 text-muted-foreground" />
-						<div>
-							<p className="text-sm font-medium">API Keys</p>
-							<p className="text-xs text-muted-foreground">
-								Enable workspace access and manage keys
-							</p>
-						</div>
-					</div>
-					<ArrowRight className="h-4 w-4 text-muted-foreground" />
-				</Link>
 			</div>
 
 			<div className="space-y-6">

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

@@ -1,6 +1,6 @@
 "use client";
 
-import { History, KeyRound, LayoutGrid } from "lucide-react";
+import { History, LayoutGrid } from "lucide-react";
 import Link from "next/link";
 import { useSelectedLayoutSegments } from "next/navigation";
 import type React from "react";
@@ -87,13 +87,6 @@ export function PlaygroundLayoutShell({ workspaceId, children }: PlaygroundLayou
 				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",