svelte

frontend/src/components/Sidebar.svelte

@@ -0,0 +1,68 @@
+<script>
+  import { createEventDispatcher } from 'svelte';
+  import StatsTab from './StatsTab.svelte';
+  import WatchlistTab from './WatchlistTab.svelte';
+  import LogTab from './LogTab.svelte';
+  
+  export let activeTab;
+  export let topSpotters;
+  export let spots;
+  export let watchlist;
+  export let recentQSOs;
+  export let logStats;
+  export let dxccProgress;
+  
+  const dispatch = createEventDispatcher();
+</script>
+
+<div class="bg-slate-800/50 backdrop-blur rounded-lg border border-slate-700/50 flex flex-col overflow-hidden h-full">
+  <!-- Tabs Header -->
+  <div class="flex border-b border-slate-700/50 bg-slate-900/30 flex-shrink-0">
+    <button 
+      class="px-4 py-2 text-sm font-semibold transition-colors {activeTab === 'stats' ? 'bg-blue-500/20 text-blue-400 border-b-2 border-blue-500' : 'text-slate-400 hover:text-slate-300'}"
+      on:click={() => activeTab = 'stats'}>
+      <svg class="w-4 h-4 inline-block mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
+      </svg>
+      Stats
+    </button>
+    
+    <button 
+      class="px-4 py-2 text-sm font-semibold transition-colors {activeTab === 'watchlist' ? 'bg-blue-500/20 text-blue-400 border-b-2 border-blue-500' : 'text-slate-400 hover:text-slate-300'}"
+      on:click={() => activeTab = 'watchlist'}>
+      <svg class="w-4 h-4 inline-block mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
+      </svg>
+      Watchlist
+    </button>
+    
+    <button 
+      class="px-4 py-2 text-sm font-semibold transition-colors {activeTab === 'log' ? 'bg-blue-500/20 text-blue-400 border-b-2 border-blue-500' : 'text-slate-400 hover:text-slate-300'}"
+      on:click={() => activeTab = 'log'}>
+      <svg class="w-4 h-4 inline-block mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
+      </svg>
+      Log
+    </button>
+  </div>
+  
+  <!-- Tab Content -->
+  <div class="flex-1 overflow-hidden">
+    {#if activeTab === 'stats'}
+      <StatsTab {topSpotters} {spots} />
+    {:else if activeTab === 'watchlist'}
+      <WatchlistTab 
+        {watchlist} 
+        {spots} 
+        on:toast={(e) => dispatch('toast', e.detail)}
+      />
+    {:else if activeTab === 'log'}
+      <LogTab 
+        {recentQSOs} 
+        {logStats} 
+        {dxccProgress}
+      />
+    {/if}
+  </div>
+</div>