src/lib/components/layout/AppHeader.svelte

<script lang="ts">
  import { onMount } from 'svelte';
  import { uiStore } from '../../stores/ui';
  import { gameStore } from '../../stores/game';
  import { gameEngine } from '../../services/game-engine';
  import { contentManager } from '../../services/content-manager';
  import LoginButton from '../auth/LoginButton.svelte';
  import gsap from 'gsap';

  async function restartGame() {
    if ($contentManager.content) {
      await gameEngine.startFromDocument($contentManager.content);
    }
  }

  function handleViewModeChange(mode: 'code' | 'preview') {
    uiStore.setViewMode(mode);
  }

  function handleAboutClick() {
    if ($uiStore.viewMode === 'about') {
      uiStore.hideAbout();
    } else {
      uiStore.showAbout();
    }
  }

  function handleTitleClick() {
    if ($uiStore.viewMode === 'about') {
      uiStore.hideAbout();
    }
  }
  
  onMount(() => {
    gsap.fromTo(".app-header", 
      { opacity: 0, y: -20 },
      { opacity: 1, y: 0, duration: 0.6, ease: "power3.out" }
    );
    
    const handleKeyPress = (e: KeyboardEvent) => {
      if ((e.ctrlKey || e.metaKey) && e.key === 'e') {
        e.preventDefault();
        uiStore.toggleViewMode();
      }
    };
    window.addEventListener('keydown', handleKeyPress);
    
    const toggleButtons = document.querySelectorAll('.toggle-btn');
    toggleButtons.forEach(btn => {
      btn.addEventListener('mouseenter', () => {
        if (!btn.classList.contains('active')) {
          gsap.to(btn, {
            scale: 1.05,
            duration: 0.2,
            ease: "power2.out"
          });
        }
      });
      
      btn.addEventListener('mouseleave', () => {
        if (!btn.classList.contains('active')) {
          gsap.to(btn, {
            scale: 1,
            duration: 0.2,
            ease: "power2.out"
          });
        }
      });
    });
    
    return () => {
      window.removeEventListener('keydown', handleKeyPress);
    };
  });
</script>

<div class="app-header">
  <div class="header-left">
    <button
      class="app-title-button"
      class:clickable={$uiStore.viewMode === 'about'}
      on:click={handleTitleClick}
    >
      <span class="app-icon">🥕</span>
      <span class="app-name">VibeGame</span>
    </button>
    <span class="header-separator">|</span>
    <button
      class="nav-button"
      class:active={$uiStore.viewMode === 'about'}
      on:click={handleAboutClick}
      aria-label="About"
    >
      About
    </button>
    <span class="header-separator">|</span>
    <a href="https://github.com/dylanebert/VibeGame"
       target="_blank"
       rel="noopener noreferrer"
       class="github-link"
       aria-label="View on GitHub">
      <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
        <path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"/>
      </svg>
    </a>
  </div>
  
  <div class="header-center">
    {#if $uiStore.viewMode !== 'about'}
      <div class="view-toggle">
        <button
          class="toggle-btn"
          class:active={$uiStore.viewMode === 'code'}
          on:click={() => handleViewModeChange('code')}
        >
          Code
        </button>
        <button
          class="toggle-btn"
          class:active={$uiStore.viewMode === 'preview'}
          on:click={() => handleViewModeChange('preview')}
        >
          Preview
        </button>
      </div>
    {/if}
  </div>
  
  <div class="header-right">
    <LoginButton />
    <div class="status-indicator">
      {#if $uiStore.error}
        <span class="status-dot error"></span>
      {:else if $gameStore.isRunning}
        <span class="status-dot running"></span>
      {:else}
        <span class="status-dot"></span>
      {/if}
    </div>
    <button 
      on:click={restartGame} 
      class="restart-button"
      aria-label="Restart"
    >
      <svg width="14" height="14" viewBox="0 0 16 16" fill="currentColor">
        <path d="M8 3a5 5 0 1 0 4.546 2.914.5.5 0 0 1 .908-.417A6 6 0 1 1 8 2v1z"/>
        <path d="M8 1a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h1.293L5.646 1.354a.5.5 0 1 1 .708-.708L8 2.293V1.5A.5.5 0 0 1 8 1z"/>
      </svg>
      <span>Restart</span>
    </button>
  </div>
</div>

<style>
  .app-header {
    height: 40px;
    background: rgba(15, 14, 12, 0.6);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(139, 115, 85, 0.06);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px;
    flex-shrink: 0;
    position: relative;
    z-index: 10;
  }

  .header-left,
  .header-center,
  .header-right {
    display: flex;
    align-items: center;
    flex: 1;
  }

  .header-left {
    justify-content: flex-start;
    gap: 0.5rem;
    align-items: center;
  }

  .app-title-button {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    user-select: none;
    background: transparent;
    border: none;
    padding: 0;
    cursor: default;
    transition: all 0.2s;
  }

  .app-title-button.clickable {
    cursor: pointer;
  }

  .app-title-button.clickable:hover .app-name {
    color: rgba(251, 248, 244, 0.75);
  }

  .app-icon {
    font-size: 1.25rem;
    line-height: 1;
  }

  .app-name {
    font-size: 0.875rem;
    font-weight: 600;
    color: rgba(251, 248, 244, 0.9);
    letter-spacing: 0.025em;
  }

  .header-separator {
    color: rgba(251, 248, 244, 0.2);
    font-size: 0.875rem;
    user-select: none;
    padding: 0 0.25rem;
  }

  .nav-button {
    background: transparent;
    border: none;
    color: rgba(251, 248, 244, 0.5);
    font-size: 0.875rem;
    font-weight: 500;
    padding: 0.375rem 0.625rem;
    border-radius: 0.25rem;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
  }

  .nav-button::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 0.25rem;
    background: rgba(139, 115, 85, 0.08);
    opacity: 0;
    transition: opacity 0.2s ease-out;
  }

  .nav-button:hover {
    color: rgba(251, 248, 244, 0.9);
  }

  .nav-button:hover::before {
    opacity: 1;
  }

  .nav-button:active {
    transform: scale(0.98);
  }

  .nav-button.active {
    background: rgba(124, 152, 133, 0.12);
    color: rgba(251, 248, 244, 0.95);
    border-radius: 0.25rem;
  }

  .nav-button.active::before {
    opacity: 1;
    background: rgba(124, 152, 133, 0.1);
  }

  .github-link {
    display: flex;
    align-items: center;
    padding: 0.25rem;
    border-radius: 0.25rem;
    color: rgba(251, 248, 244, 0.5);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
  }

  .github-link::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 0.25rem;
    background: rgba(139, 115, 85, 0.08);
    opacity: 0;
    transition: opacity 0.2s ease-out;
  }

  .github-link:hover {
    color: rgba(251, 248, 244, 0.9);
    transform: scale(1.05);
  }

  .github-link:hover::before {
    opacity: 1;
  }

  .github-link:active {
    transform: scale(0.98);
  }

  .github-link svg {
    width: 16px;
    height: 16px;
  }

  .header-center {
    justify-content: center;
  }

  .header-right {
    justify-content: flex-end;
    gap: 12px;
  }

  .view-toggle {
    display: flex;
    background: rgba(139, 115, 85, 0.05);
    border-radius: 6px;
    padding: 2px;
    border: 1px solid rgba(139, 115, 85, 0.08);
  }

  .toggle-btn {
    padding: 6px 14px;
    background: transparent;
    border: none;
    color: rgba(251, 248, 244, 0.5);
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    cursor: pointer;
    border-radius: 4px;
    position: relative;
    transform-origin: center;
    transition: color 0.2s cubic-bezier(0.4, 0, 0.2, 1),
                background 0.2s cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .toggle-btn::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 4px;
    background: rgba(124, 152, 133, 0.08);
    opacity: 0;
    transition: opacity 0.2s ease-out;
  }

  .toggle-btn:hover:not(.active)::before {
    opacity: 1;
  }

  .toggle-btn:hover:not(.active) {
    color: rgba(251, 248, 244, 0.7);
  }

  .toggle-btn.active {
    background: rgba(124, 152, 133, 0.15);
    color: rgba(251, 248, 244, 0.9);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1),
                inset 0 1px 0 rgba(124, 152, 133, 0.2);
  }

  .toggle-btn.active::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 50%;
    transform: translateX(-50%);
    width: 20px;
    height: 2px;
    background: #7C9885;
    border-radius: 1px;
    animation: slideIn 0.2s ease-out;
  }

  @keyframes slideIn {
    from {
      width: 0;
      opacity: 0;
    }
    to {
      width: 20px;
      opacity: 1;
    }
  }

  .restart-button {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 0.25rem 0.75rem;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 0.25rem;
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.75rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    position: relative;
  }

  .restart-button:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.2);
    color: rgba(255, 255, 255, 0.9);
  }
  
  .restart-button span {
    text-transform: none;
    letter-spacing: normal;
  }

  .restart-button:active {
    transform: scale(0.98);
  }

  .restart-button svg {
    transition: transform 0.2s ease-out;
  }

  .restart-button:hover svg {
    transform: rotate(180deg);
  }

  .status-indicator {
    display: flex;
    align-items: center;
  }

  .status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(139, 115, 85, 0.3);
    transition: all 0.3s ease;
  }

  .status-dot.running {
    background: #7C9885;
    box-shadow: 0 0 12px rgba(124, 152, 133, 0.4);
    animation: breathe 2s ease-in-out infinite;
  }

  .status-dot.error {
    background: #B85450;
    box-shadow: 0 0 12px rgba(184, 84, 80, 0.4);
  }

  @keyframes breathe {
    0%, 100% {
      opacity: 0.8;
      transform: scale(1);
    }
    50% {
      opacity: 1;
      transform: scale(1.1);
    }
  }
</style>