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 { editorStore } from '../../stores/editor';
  import { HTMLParser } from '../../services/html-parser';
  import LoginButton from '../auth/LoginButton.svelte';
  import gsap from 'gsap';
  
  async function restartGame() {
    const worldContent = HTMLParser.extractGameContent($editorStore.content);
    await gameEngine.start(worldContent);
  }
  
  function handleViewModeChange(mode: 'code' | 'preview') {
    uiStore.setViewMode(mode);
  }
  
  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">
    <div class="app-title">
      <span class="app-icon">🥕</span>
      <span class="app-name">VibeGame</span>
    </div>
  </div>
  
  <div class="header-center">
    <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>
  </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;
  }
  
  .app-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    user-select: none;
  }
  
  .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-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>