feat(layer): add header search with command dialog

apps/docs/app/app.config.ts

@@ -0,0 +1,28 @@
+export default defineAppConfig({
+  docs: {
+    title: 'docs-please',
+    github: {
+      url: 'https://github.com/pleaseai/docs',
+      owner: 'pleaseai',
+      name: 'docs',
+      branch: 'main',
+    },
+  },
+  github: {
+    rootDir: 'apps/docs',
+  },
+  ui: {
+    pageHero: {
+      slots: {
+        title: 'font-semibold sm:text-6xl',
+        container: '!pb-0',
+      },
+    },
+    pageCard: {
+      slots: {
+        container: 'lg:flex min-w-0',
+        wrapper: 'flex-none',
+      },
+    },
+  },
+})

apps/docs/app/components/content/ColorModeSwitch.vue

@@ -3,28 +3,30 @@ import { SwitchRoot, SwitchThumb } from 'reka-ui'
 
 const colorMode = useColorMode()
 
-const isLight = computed(() => colorMode.value === 'light')
-
-function toggleColorMode(checked: boolean) {
-  colorMode.preference = checked ? 'light' : 'dark'
-}
+// Single computed with getter/setter for clean two-way binding
+const isLight = computed({
+  get: () => colorMode.value === 'light',
+  set: (value: boolean) => {
+    colorMode.preference = value ? 'light' : 'dark'
+  },
+})
 </script>
 
 <template>
   <ClientOnly>
     <div class="flex-1 flex items-center justify-center">
       <SwitchRoot
-        :checked="isLight"
+        v-model="isLight"
         aria-label="Toggle color mode"
         class="relative w-[140px] h-[280px] rounded-lg bg-muted cursor-pointer transition-colors"
-        @update:checked="toggleColorMode"
       >
         <SwitchThumb
           class="absolute top-[2px] left-[2px] flex items-center justify-center rounded-lg bg-background shadow-lg transition-all duration-300 ease-in-out size-[136px] data-[state=checked]:translate-y-[140px]"
         >
           <Icon
             :name="isLight ? 'lucide:sun' : 'lucide:moon'"
-            class="size-16 text-foreground"
+            size="48"
+            class="text-foreground"
           />
         </SwitchThumb>
       </SwitchRoot>

bun.lock

@@ -17,7 +17,6 @@
     },
     "apps/docs": {
       "name": "@pleaseai/docs-site",
-      "version": "0.1.0",
       "dependencies": {
         "docs-please": "workspace:*",
         "vite-plugin-wasm": "^3.5.0",
@@ -31,7 +30,7 @@
     },
     "packages/layer": {
       "name": "docs-please",
-      "version": "0.1.0",
+      "version": "0.2.0-beta.0",
       "dependencies": {
         "@iconify-json/lucide": "^1.2.75",
         "@nuxt/content": "^3.8.2",
@@ -43,12 +42,14 @@
         "@nuxtjs/mdc": "^0.18.4",
         "@tabler/icons-vue": "^3.35.0",
         "@vueuse/core": "^14.1.0",
+        "@vueuse/integrations": "^14.1.0",
         "class-variance-authority": "^0.7.1",
         "clsx": "^2.1.1",
         "debug": "^4.4.1",
         "defu": "^6.1.4",
         "eslint": "^9.39.1",
         "exsolve": "^1.0.8",
+        "fuse.js": "^7.1.0",
         "lucide-vue-next": "^0.555.0",
         "nuxt-og-image": "^5.1.12",
         "oxc-parser": "^0.99.0",
@@ -868,6 +869,8 @@
 
     "@vueuse/core": ["@vueuse/core@14.1.0", "", { "dependencies": { "@types/web-bluetooth": "^0.0.21", "@vueuse/metadata": "14.1.0", "@vueuse/shared": "14.1.0" }, "peerDependencies": { "vue": "^3.5.0" } }, "sha512-rgBinKs07hAYyPF834mDTigH7BtPqvZ3Pryuzt1SD/lg5wEcWqvwzXXYGEDb2/cP0Sj5zSvHl3WkmMELr5kfWw=="],
 
+    "@vueuse/integrations": ["@vueuse/integrations@14.1.0", "", { "dependencies": { "@vueuse/core": "14.1.0", "@vueuse/shared": "14.1.0" }, "peerDependencies": { "async-validator": "^4", "axios": "^1", "change-case": "^5", "drauu": "^0.4", "focus-trap": "^7", "fuse.js": "^7", "idb-keyval": "^6", "jwt-decode": "^4", "nprogress": "^0.2", "qrcode": "^1.5", "sortablejs": "^1", "universal-cookie": "^7 || ^8", "vue": "^3.5.0" }, "optionalPeers": ["async-validator", "axios", "change-case", "drauu", "focus-trap", "fuse.js", "idb-keyval", "jwt-decode", "nprogress", "qrcode", "sortablejs", "universal-cookie"] }, "sha512-eNQPdisnO9SvdydTIXnTE7c29yOsJBD/xkwEyQLdhDC/LKbqrFpXHb3uS//7NcIrQO3fWVuvMGp8dbK6mNEMCA=="],
+
     "@vueuse/metadata": ["@vueuse/metadata@14.1.0", "", {}, "sha512-7hK4g015rWn2PhKcZ99NyT+ZD9sbwm7SGvp7k+k+rKGWnLjS/oQozoIZzWfCewSUeBmnJkIb+CNr7Zc/EyRnnA=="],
 
     "@vueuse/shared": ["@vueuse/shared@14.1.0", "", { "peerDependencies": { "vue": "^3.5.0" } }, "sha512-EcKxtYvn6gx1F8z9J5/rsg3+lTQnvOruQd8fUecW99DCK04BkWD7z5KQ/wTAx+DazyoEE9dJt/zV8OIEQbM6kw=="],

packages/layer/app/app.config.ts

@@ -1,8 +1,16 @@
 export default defineAppConfig({
   docs: {
     title: 'Documentation',
-    description: 'Documentation site powered by @pleaseai/docs',
+    description: 'Documentation site powered by docs-please',
     url: '',
+    header: {
+      title: '',
+      logo: {
+        light: '',
+        dark: '',
+        alt: '',
+      },
+    },
     github: {
       owner: '',
       name: '',

packages/layer/app/components/app/AppHeader.vue

@@ -1,57 +1,112 @@
 <script setup lang="ts">
-import { Moon, Sun } from 'lucide-vue-next'
+import { Github, Moon, Sun } from 'lucide-vue-next'
 import { Button } from '~/components/ui/button'
+import { Separator } from '~/components/ui/separator'
 
+const appConfig = useAppConfig()
 const colorMode = useColorMode()
 
+const isDark = computed(() => colorMode.value === 'dark')
+
 function toggleColorMode() {
-  colorMode.preference = colorMode.value === 'dark' ? 'light' : 'dark'
+  colorMode.preference = isDark.value ? 'light' : 'dark'
 }
 
-const appConfig = useAppConfig()
-const title = computed(() => appConfig.docs?.title || 'Docs')
+const links = computed(() => {
+  const result = []
+  if (appConfig.docs?.github?.url) {
+    result.push({
+      icon: Github,
+      to: appConfig.docs.github.url,
+      target: '_blank',
+      ariaLabel: 'GitHub',
+    })
+  }
+  return result
+})
 </script>
 
 <template>
   <header class="sticky top-0 z-50 w-full border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
+    <!-- Skip to main content link for accessibility -->
+    <a
+      href="#main-content"
+      class="sr-only focus:not-sr-only focus:absolute focus:left-2 focus:top-2 focus:z-[100] focus:rounded-md focus:border focus:bg-background focus:px-4 focus:py-2"
+    >
+      Skip to main content
+    </a>
+
     <div class="container flex h-14 items-center">
       <!-- Logo -->
-      <div class="mr-4 flex">
-        <NuxtLink
-          to="/"
-          class="flex items-center space-x-2"
-        >
-          <span class="font-bold">{{ title }}</span>
-        </NuxtLink>
+      <NuxtLink
+        to="/"
+        class="mr-4 flex items-center gap-2"
+        :aria-label="`${appConfig.docs?.title || 'Home'} - Go to homepage`"
+      >
+        <AppHeaderLogo class="h-6 w-auto shrink-0" />
+      </NuxtLink>
+
+      <!-- Center (Search) -->
+      <div class="hidden flex-1 justify-center lg:flex">
+        <AppHeaderCenter />
       </div>
 
-      <!-- Navigation -->
-      <nav class="flex flex-1 items-center space-x-6 text-sm font-medium">
-        <NuxtLink
-          to="/docs"
-          class="text-muted-foreground transition-colors hover:text-foreground"
-        >
-          Documentation
-        </NuxtLink>
-      </nav>
-
-      <!-- Actions -->
-      <div class="flex items-center space-x-2">
-        <Button
-          variant="ghost"
-          size="icon"
-          @click="toggleColorMode"
-        >
-          <Sun
-            v-if="colorMode.value === 'dark'"
-            class="size-5"
-          />
-          <Moon
-            v-else
-            class="size-5"
+      <!-- Spacer for mobile -->
+      <div class="flex-1 lg:hidden" />
+
+      <!-- Right Actions -->
+      <div class="flex items-center gap-1">
+        <!-- Search button (mobile) -->
+        <AppHeaderSearch class="lg:hidden" />
+
+        <!-- Color mode toggle -->
+        <ClientOnly>
+          <Button
+            variant="ghost"
+            size="icon"
+            @click="toggleColorMode"
+          >
+            <Moon
+              v-if="isDark"
+              class="size-5"
+            />
+            <Sun
+              v-else
+              class="size-5"
+            />
+            <span class="sr-only">Toggle theme</span>
+          </Button>
+
+          <template #fallback>
+            <div class="size-8 animate-pulse rounded-md bg-muted" />
+          </template>
+        </ClientOnly>
+
+        <!-- External links (GitHub, etc.) -->
+        <template v-if="links.length">
+          <Separator
+            orientation="vertical"
+            class="mx-1 h-6"
           />
-          <span class="sr-only">Toggle theme</span>
-        </Button>
+          <Button
+            v-for="link in links"
+            :key="link.to"
+            variant="ghost"
+            size="icon"
+            as-child
+          >
+            <a
+              :href="link.to"
+              :target="link.target"
+              :aria-label="link.ariaLabel"
+            >
+              <component
+                :is="link.icon"
+                class="size-5"
+              />
+            </a>
+          </Button>
+        </template>
       </div>
     </div>
   </header>

packages/layer/app/components/app/AppHeaderCenter.vue

@@ -0,0 +1,3 @@
+<template>
+  <AppSearchButton />
+</template>

packages/layer/app/components/app/AppHeaderLogo.vue

@@ -0,0 +1,43 @@
+<script setup lang="ts">
+const appConfig = useAppConfig()
+const colorMode = useColorMode()
+
+const logoSrc = computed(() => {
+  const header = appConfig.docs?.header
+  if (!header?.logo) return null
+
+  if (colorMode.value === 'dark' && header.logo.dark) {
+    return header.logo.dark
+  }
+  return header.logo.light || header.logo.dark
+})
+
+const logoAlt = computed(() => {
+  return appConfig.docs?.header?.logo?.alt || appConfig.docs?.title || 'Logo'
+})
+
+const title = computed(() => {
+  return appConfig.docs?.header?.title || appConfig.docs?.title || 'Documentation'
+})
+</script>
+
+<template>
+  <ClientOnly>
+    <img
+      v-if="logoSrc"
+      :src="logoSrc"
+      :alt="logoAlt"
+      class="h-6 w-auto shrink-0"
+    >
+    <span
+      v-else
+      class="font-bold"
+    >
+      {{ title }}
+    </span>
+
+    <template #fallback>
+      <span class="font-bold">{{ title }}</span>
+    </template>
+  </ClientOnly>
+</template>

packages/layer/app/components/app/AppHeaderSearch.vue

@@ -0,0 +1,3 @@
+<template>
+  <AppSearchButton collapsed />
+</template>