feat(api-keys): implement API keys management interface and access control

- Added a new WorkspaceApiAccessControl component for managing API key access within workspaces.
- Enhanced the PlaygroundApiKeysPage to display API key creation options and access information.
- Updated PlaygroundIndex and PlaygroundSidebar to include links to the new API keys management section.
- Improved user feedback with alerts and descriptions regarding API key usage and requirements.

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

@@ -1,4 +1,8 @@
-import { redirect } from "next/navigation";
+import { Info } from "lucide-react";
+import { WorkspaceApiAccessControl } from "@/components/settings/workspace-api-access-control";
+import { Alert, AlertDescription } from "@/components/ui/alert";
+import { Separator } from "@/components/ui/separator";
+import { ApiKeyContent } from "../../user-settings/components/ApiKeyContent";
 
 export default async function PlaygroundApiKeysPage({
 	params,
@@ -6,6 +10,33 @@ export default async function PlaygroundApiKeysPage({
 	params: Promise<{ workspace_id: string }>;
 }) {
 	const { workspace_id } = await params;
+	const workspaceId = Number(workspace_id);
 
-	redirect(`/dashboard/${workspace_id}/user-settings/api-key`);
+	return (
+		<div className="mx-auto w-full max-w-5xl space-y-6">
+			<div className="space-y-1">
+				<h2 className="text-xl font-semibold tracking-tight">API keys</h2>
+				<p className="text-sm text-muted-foreground">
+					Create user API keys and choose whether they can access this workspace.
+				</p>
+			</div>
+
+			<Alert>
+				<Info />
+				<AlertDescription>
+					External API calls need both a user API key and workspace API key access enabled.
+				</AlertDescription>
+			</Alert>
+
+			<section>
+				<WorkspaceApiAccessControl workspaceId={workspaceId} />
+			</section>
+
+			<Separator className="bg-border" />
+
+			<section>
+				<ApiKeyContent />
+			</section>
+		</div>
+	);
 }

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

@@ -1,6 +1,6 @@
 "use client";
 
-import { ArrowRight, History, Info } from "lucide-react";
+import { ArrowRight, History, Info, KeyRound } from "lucide-react";
 import Link from "next/link";
 import { useMemo } from "react";
 import { Alert, AlertDescription } from "@/components/ui/alert";
@@ -27,7 +27,7 @@ export function PlaygroundIndex({ workspaceId }: { workspaceId: number }) {
 					<p>
 						Manually run SurfSense's platform-native APIs and inspect their output. To use these APIs outside SurfSense,{" "}
 						<Link
-							href={`/dashboard/${workspaceId}/user-settings/api-key`}
+							href={`${base}/api-keys`}
 							className="font-medium text-foreground underline-offset-4 hover:underline"
 						>
 							create an API key
@@ -51,6 +51,19 @@ 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">Manage keys and workspace API access</p>
+						</div>
+					</div>
+					<ArrowRight className="h-4 w-4 text-muted-foreground" />
+				</Link>
 			</div>
 
 			<div className="space-y-6">