claudia-docs-web/src/components/layout/Header.vue

<script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue'
import { useRouter } from 'vue-router'
import { useAuthStore } from '@/stores/auth'
import { useTheme } from '@/composables/useTheme'
import QuickSwitcher from '@/components/common/QuickSwitcher.vue'

const router = useRouter()
const authStore = useAuthStore()
const { resolvedTheme, toggleTheme } = useTheme()

const searchQuery = ref('')
const showUserMenu = ref(false)
const showQuickSwitcher = ref(false)

function handleGlobalKeydown(e: KeyboardEvent) {
  // Cmd+K or Ctrl+K
  if ((e.metaKey || e.ctrlKey) && e.key === 'k') {
    e.preventDefault()
    showQuickSwitcher.value = true
  }
}

onMounted(() => {
  document.addEventListener('keydown', handleGlobalKeydown)
})

onUnmounted(() => {
  document.removeEventListener('keydown', handleGlobalKeydown)
})

function handleSearch() {
  if (searchQuery.value.trim()) {
    router.push({ name: 'dashboard', query: { q: searchQuery.value } })
  }
}

function logout() {
  authStore.logout()
  router.push('/login')
}

function goToSettingsTokens() {
  showUserMenu.value = false
  router.push('/settings/tokens')
}
</script>

<template>
  <header class="header">
    <div class="header__left">
      <router-link to="/dashboard" class="header__logo">
        <svg width="28" height="28" viewBox="0 0 28 28" fill="none">
          <rect width="28" height="28" rx="6" fill="var(--accent)"/>
          <path d="M8 10h12M8 14h8M8 18h10" stroke="white" stroke-width="2" stroke-linecap="round"/>
        </svg>
        <span class="header__title">Claudia Docs</span>
      </router-link>
    </div>

    <div class="header__center">
      <form class="header__search" @submit.prevent="handleSearch">
        <svg class="header__search-icon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
          <circle cx="11" cy="11" r="8"/>
          <path d="m21 21-4.35-4.35"/>
        </svg>
        <input
          v-model="searchQuery"
          type="text"
          placeholder="Search documents..."
          class="header__search-input"
        />
        <kbd class="header__kbd">⌘K</kbd>
      </form>
    </div>

    <div class="header__right">
      <button class="header__theme-toggle" @click="toggleTheme" :title="resolvedTheme === 'dark' ? 'Switch to light mode' : 'Switch to dark mode'">
        <!-- Sun icon for dark mode (click to go light) -->
        <svg v-if="resolvedTheme === 'dark'" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
          <circle cx="12" cy="12" r="5"/>
          <line x1="12" y1="1" x2="12" y2="3"/>
          <line x1="12" y1="21" x2="12" y2="23"/>
          <line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/>
          <line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/>
          <line x1="1" y1="12" x2="3" y2="12"/>
          <line x1="21" y1="12" x2="23" y2="12"/>
          <line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/>
          <line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/>
        </svg>
        <!-- Moon icon for light mode (click to go dark) -->
        <svg v-else width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
          <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/>
        </svg>
      </button>
      <div class="header__user" @click="showUserMenu = !showUserMenu">
        <div class="header__avatar">
          {{ authStore.user?.username?.charAt(0).toUpperCase() || 'U' }}
        </div>
        <span class="header__username">{{ authStore.user?.username || 'User' }}</span>
        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
          <path d="m6 9 6 6 6-6"/>
        </svg>

        <Transition name="fade">
          <div v-if="showUserMenu" class="header__dropdown">
            <div class="header__dropdown-item header__dropdown-item--info">
              <span>{{ authStore.user?.username }}</span>
              <small>{{ authStore.user?.role }}</small>
            </div>
            <hr class="header__dropdown-divider" />
            <button class="header__dropdown-item" @click="goToSettingsTokens">
              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                <circle cx="12" cy="12" r="3"/>
                <path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"/>
              </svg>
              API Tokens
            </button>
            <hr class="header__dropdown-divider" />
            <button class="header__dropdown-item" @click="logout">
              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                <path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/>
                <polyline points="16 17 21 12 16 7"/>
                <line x1="21" y1="12" x2="9" y2="12"/>
              </svg>
              Logout
            </button>
          </div>
        </Transition>
      </div>
    </div>
  </header>
  <QuickSwitcher :show="showQuickSwitcher" @close="showQuickSwitcher = false" />
</template>

<style scoped>
.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 56px;
  padding: 0 1.5rem;
  background: var(--bg-primary);
  border-bottom: 1px solid var(--border);
}

.header__left {
  flex: 1;
}

.header__logo {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  text-decoration: none;
}

.header__title {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--text-primary);
}

.header__center {
  flex: 2;
  max-width: 480px;
}

.header__search {
  position: relative;
  display: flex;
  align-items: center;
}

.header__search-icon {
  position: absolute;
  left: 0.75rem;
  color: var(--text-secondary);
}

.header__search-input {
  width: 100%;
  padding: 0.5rem 4rem 0.5rem 2.25rem;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 0.875rem;
  color: var(--text-primary);
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.header__search-input::placeholder {
  color: var(--text-secondary);
}

.header__search-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

.header__kbd {
  position: absolute;
  right: 0.75rem;
  padding: 0.125rem 0.375rem;
  background: var(--bg-tertiary);
  border: 1px solid var(--border);
  border-radius: 4px;
  font-size: 0.75rem;
  color: var(--text-secondary);
}

.header__right {
  flex: 1;
  display: flex;
  justify-content: flex-end;
}

.header__theme-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: none;
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.15s;
  margin-right: 0.5rem;
}

.header__theme-toggle:hover {
  background: var(--bg-secondary);
  color: var(--text-primary);
}

.header__user {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.375rem 0.75rem 0.375rem 0.375rem;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.15s;
}

.header__user:hover {
  background: var(--bg-secondary);
}

.header__avatar {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--accent);
  border-radius: 6px;
  color: white;
  font-weight: 600;
  font-size: 0.875rem;
}

.header__username {
  font-size: 0.875rem;
  color: var(--text-primary);
}

.header__dropdown {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 0.5rem;
  min-width: 180px;
  background: var(--bg-primary);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
  overflow: hidden;
  z-index: 100;
}

.header__dropdown-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.75rem 1rem;
  background: none;
  border: none;
  font-size: 0.875rem;
  color: var(--text-primary);
  cursor: pointer;
  text-align: left;
  text-decoration: none;
}

.header__dropdown-item:hover {
  background: var(--bg-secondary);
}

.header__dropdown-item--info {
  flex-direction: column;
  align-items: flex-start;
  gap: 0.125rem;
}

.header__dropdown-item--info small {
  color: var(--text-secondary);
  font-size: 0.75rem;
}

.header__dropdown-divider {
  margin: 0.25rem 0;
  border: none;
  border-top: 1px solid var(--border);
}

.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.15s, transform 0.15s;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
  transform: translateY(-4px);
}
</style>