refactor: replace scroll layout with sidebar navigation

apps/playground/app/app.config.ts

@@ -1,7 +1,7 @@
 export default defineAppConfig({
   ui: {
     colors: {
-      primary: 'sky',
+      primary: 'blue',
       neutral: 'zinc',
     },
   },

apps/playground/app/assets/css/main.css

@@ -1,2 +1,11 @@
 @import "tailwindcss";
-@import "@nuxt/ui";
+@import "@nuxt/ui";
+
+:root {
+  --ui-radius: 0;
+  --ui-primary: #2853FF;
+}
+
+.dark {
+  --ui-bg: #09090b;
+}

apps/playground/app/components/playground/TestCard.vue

@@ -26,6 +26,17 @@ const { execute, isLoading, result, error, status } = useTestRunner(props.id, {
   },
 })
 
+const accentColor = computed(() => {
+  const map: Record<string, string> = {
+    error: 'var(--color-red-500)',
+    warning: 'var(--color-amber-500)',
+    success: 'var(--color-emerald-500)',
+    primary: 'var(--ui-primary)',
+    neutral: 'var(--color-zinc-600)',
+  }
+  return map[props.color || ''] || 'var(--ui-primary)'
+})
+
 async function handleClick() {
   try {
     if (props.onClick) {
@@ -40,43 +51,40 @@ async function handleClick() {
 </script>
 
 <template>
-  <div class="h-full p-5 rounded-lg bg-elevated border border-primary/5 hover:border-primary/10 transition-colors flex flex-col">
-    <div class="flex items-start justify-between gap-3 mb-3">
-      <h3 class="text-sm font-semibold text-highlighted leading-tight">
-        {{ label }}
-      </h3>
+  <div
+    class="h-full bg-elevated border border-[var(--ui-border)] border-l-2 flex flex-col"
+    :style="{ borderLeftColor: accentColor }"
+  >
+    <div
+      class="p-4 flex-1 flex flex-col cursor-pointer transition-colors hover:bg-white/[0.02] active:bg-white/[0.04] relative"
+      @click="handleClick"
+    >
+      <UIcon
+        v-if="isLoading"
+        name="i-lucide-loader-circle"
+        class="size-3.5 animate-spin text-primary absolute top-4 right-4"
+      />
+
       <UBadge
         v-if="badge"
-        :color="badge.color as any"
+        color="neutral"
         variant="subtle"
-        class="shrink-0"
+        class="mb-2.5 w-fit"
       >
         {{ badge.label }}
       </UBadge>
-    </div>
-
-    <p v-if="description" class="text-sm text-muted leading-relaxed mb-4 grow">
-      {{ description }}
-    </p>
 
-    <div class="mt-auto">
-      <UButton
-        block
-        :color="color as any"
-        :loading="isLoading"
-        @click="handleClick"
-      >
+      <h3 class="text-sm font-medium text-highlighted leading-snug">
         {{ label }}
-      </UButton>
+      </h3>
+
+      <p v-if="description" class="text-xs text-muted leading-relaxed mt-1.5 line-clamp-2" :title="description">
+        {{ description }}
+      </p>
     </div>
 
-    <PlaygroundTestResult
-      v-if="showResult"
-      :status
-      :response="result"
-      :error
-      compact
-      class="mt-4"
-    />
+    <div v-if="showResult" class="px-4 pb-4" @click.stop>
+      <PlaygroundTestResult :status :response="result" :error compact />
+    </div>
   </div>
 </template>

apps/playground/app/components/playground/TestSection.vue

@@ -7,12 +7,15 @@ defineProps<{
 </script>
 
 <template>
-  <section :id class="space-y-6">
-    <div class="space-y-2">
-      <h2 class="text-2xl font-bold text-highlighted">
-        {{ title }}
-      </h2>
-      <p class="text-muted leading-relaxed">
+  <section :id class="space-y-5">
+    <div>
+      <div class="flex items-center gap-2 mb-1.5">
+        <div class="w-1 h-4 bg-primary" />
+        <h2 class="text-lg font-semibold text-highlighted">
+          {{ title }}
+        </h2>
+      </div>
+      <p class="text-sm text-muted leading-relaxed">
         {{ description }}
       </p>
     </div>