feat: api

website/src/lib/components/self/AppSidebar.svelte

@@ -32,7 +32,8 @@
 		BookOpen,
 		Info,
 		Bell,
-		Crown
+		Crown,
+		Key
 	} from 'lucide-svelte';
 	import { mode, setMode } from 'mode-watcher';
 	import type { HTMLAttributes } from 'svelte/elements';
@@ -158,6 +159,11 @@
 		goto('/prestige');
 		setOpenMobile(false);
 	}
+
+	function handleAPIClick(){
+		goto('/api');
+		setOpenMobile(false);
+	}
 </script>
 
 <SignInConfirmDialog bind:open={shouldSignIn} />
@@ -411,7 +417,7 @@
 								</div>
 							</DropdownMenu.Label>
 							<DropdownMenu.Separator />
-							
+
 							<!-- Profile & Settings Group -->
 							<DropdownMenu.Group>
 								<DropdownMenu.Item onclick={handleAccountClick}>
@@ -427,11 +433,17 @@
 									Prestige
 								</DropdownMenu.Item>
 							</DropdownMenu.Group>
-							
+
 							<DropdownMenu.Separator />
-							
+
 							<!-- Features Group -->
 							<DropdownMenu.Group>
+								<DropdownMenu.Item
+									onclick={handleAPIClick}
+								>
+									<Key />
+									API
+								</DropdownMenu.Item>
 								<DropdownMenu.Item
 									onclick={() => {
 										showPromoCode = true;
@@ -483,9 +495,9 @@
 									</DropdownMenu.Item>
 								</DropdownMenu.Group>
 							{/if}
-							
+
 							<DropdownMenu.Separator />
-							
+
 							<!-- Legal Group -->
 							<DropdownMenu.Group>
 								<DropdownMenu.Item onclick={handleTermsClick}>
@@ -497,9 +509,9 @@
 									Privacy Policy
 								</DropdownMenu.Item>
 							</DropdownMenu.Group>
-							
+
 							<DropdownMenu.Separator />
-							
+
 							<!-- Sign Out -->
 							<DropdownMenu.Item
 								onclick={() => {

website/src/lib/components/self/Codeblock.svelte

@@ -0,0 +1,47 @@
+<script>
+	import { scale } from 'svelte/transition';
+	import { Button } from '../ui/button';
+	import Check from 'lucide-svelte/icons/check';
+	import Copy from 'lucide-svelte/icons/copy';
+
+	const { text = '', displayOnly = false } = $props();
+	let isSuccess = $state(false);
+
+	async function copyToClipboard() {
+		try {
+			await navigator.clipboard.writeText(text);
+			isSuccess = true;
+			setTimeout(() => {
+				isSuccess = false;
+			}, 2000);
+		} catch (err) {
+			console.error('Failed to copy text:', err);
+		}
+	}
+</script>
+
+<div class="flex w-full items-center gap-2 overflow-hidden rounded-md border bg-primary/10">
+	<code class="block flex-grow overflow-x-auto whitespace-pre-wrap p-3 font-mono text-sm">
+		{text}
+	</code>
+
+	{#if !displayOnly}
+		<Button
+			variant="ghost"
+			size="sm"
+			class="mr-1 h-8 w-8 flex-shrink-0 p-0 hover:bg-primary/15"
+			onclick={copyToClipboard}
+			aria-label="Copy to clipboard"
+		>
+			{#if isSuccess}
+				<div in:scale|fade={{ duration: 150 }}>
+					<Check class="h-4 w-4" />
+				</div>
+			{:else}
+				<div in:scale|fade={{ duration: 150 }}>
+					<Copy class="h-4 w-4" />
+				</div>
+			{/if}
+		</Button>
+	{/if}
+</div>

website/src/lib/components/ui/collapsible/collapsible-content.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { Collapsible as CollapsiblePrimitive } from "bits-ui";
+
+	let { ref = $bindable(null), ...restProps }: CollapsiblePrimitive.ContentProps = $props();
+</script>
+
+<CollapsiblePrimitive.Content bind:ref data-slot="collapsible-content" {...restProps} />

website/src/lib/components/ui/collapsible/collapsible-trigger.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { Collapsible as CollapsiblePrimitive } from "bits-ui";
+
+	let { ref = $bindable(null), ...restProps }: CollapsiblePrimitive.TriggerProps = $props();
+</script>
+
+<CollapsiblePrimitive.Trigger bind:ref data-slot="collapsible-trigger" {...restProps} />

website/src/lib/components/ui/collapsible/collapsible.svelte

@@ -0,0 +1,11 @@
+<script lang="ts">
+	import { Collapsible as CollapsiblePrimitive } from "bits-ui";
+
+	let {
+		ref = $bindable(null),
+		open = $bindable(false),
+		...restProps
+	}: CollapsiblePrimitive.RootProps = $props();
+</script>
+
+<CollapsiblePrimitive.Root bind:ref bind:open data-slot="collapsible" {...restProps} />

website/src/lib/components/ui/collapsible/index.ts

@@ -0,0 +1,13 @@
+import Root from "./collapsible.svelte";
+import Trigger from "./collapsible-trigger.svelte";
+import Content from "./collapsible-content.svelte";
+
+export {
+	Root,
+	Content,
+	Trigger,
+	//
+	Root as Collapsible,
+	Content as CollapsibleContent,
+	Trigger as CollapsibleTrigger,
+};