feat(wip): search

src/routes/+page.svelte

@@ -5,7 +5,7 @@
 <div style="padding: 8px;">
     <img src="/Square150x150Logo.png" alt="cat" style="width: 128px; height: 128px;" />
     <h2>Welcome to Shark!</h2>
-    <p>Your music library manager and player.</p>
+    <p>Your music library manager.</p>
 
     {#if !$settings.musicFolder}
       <div class="window welcome-prompt">

src/routes/search/+page.svelte

@@ -0,0 +1,156 @@
+<script lang="ts">
+  import { onMount } from 'svelte';
+  import { goto } from '$app/navigation';
+  import { page } from '$app/stores';
+  import { settings, loadSettings } from '$lib/stores/settings';
+  import { searchLocalTracks } from '$lib/library/search';
+  import { searchDeezerTracks } from '$lib/services/deezer/search';
+
+  let query = $state('');
+  let error = $state<string | null>(null);
+  let isSearching = $state(false);
+
+  onMount(async () => {
+    await loadSettings();
+
+    // Pre-fill query from URL parameter
+    const urlQuery = $page.url.searchParams.get('q');
+    if (urlQuery) {
+      query = urlQuery;
+    }
+  });
+
+  async function handleSearch(type: 'local' | 'online') {
+    if (!query.trim()) {
+      return;
+    }
+
+    if (type === 'local' && !$settings.musicFolder) {
+      error = 'No music folder configured. Please set one in Settings.';
+      return;
+    }
+
+    error = null;
+    isSearching = true;
+
+    try {
+      // Perform search first
+      const results = type === 'local'
+        ? await searchLocalTracks(query)
+        : await searchDeezerTracks(query);
+
+      if (results.length === 0) {
+        error = `No results found for "${query}"`;
+        isSearching = false;
+        return;
+      }
+
+      // Only navigate if we have results, pass results via state
+      goto(`/search/results?q=${encodeURIComponent(query)}&type=${type}`, {
+        state: { results }
+      });
+    } catch (e) {
+      error = 'Error performing search: ' + (e as Error).message;
+      isSearching = false;
+    }
+  }
+
+  function handleKeyPress(event: KeyboardEvent) {
+    if (event.key === 'Enter') {
+      // Default to local search on Enter
+      handleSearch('local');
+    }
+  }
+</script>
+
+<div class="wrapper">
+  <div class="search-container">
+    <div class="search-logo">
+      <h1>Shark! Search</h1>
+    </div>
+
+    <div class="search-box">
+      <!-- svelte-ignore a11y_autofocus -->
+      <!-- Autofocus is appropriate for the search tool, and is not an accessibility malfunction in this case -->
+      <input
+        type="text"
+        bind:value={query}
+        placeholder="Search for music..."
+        onkeypress={handleKeyPress}
+        autofocus
+      />
+    </div>
+
+    <div class="search-buttons">
+      <button onclick={() => handleSearch('local')} disabled={isSearching}>
+        Search Local
+      </button>
+      <button onclick={() => handleSearch('online')} disabled={isSearching}>
+        Search Online
+      </button>
+    </div>
+
+    {#if isSearching}
+      <p class="searching-message">Searching...</p>
+    {/if}
+
+    {#if error}
+      <p class="error-message">{error}</p>
+    {/if}
+  </div>
+</div>
+
+<style>
+  .wrapper {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+  }
+
+  .search-container {
+    flex-shrink: 0;
+    padding: 40px 20px 20px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 16px;
+  }
+
+  .search-logo h1 {
+    margin: 0;
+    font-size: 2em;
+    font-weight: normal;
+    text-align: center;
+  }
+
+  .search-box {
+    width: 100%;
+    max-width: 600px;
+  }
+
+  .search-box input {
+    width: 100%;
+    padding: 8px 12px;
+    box-sizing: border-box;
+  }
+
+  .search-buttons {
+    display: flex;
+    gap: 12px;
+  }
+
+  .search-buttons button {
+    min-width: 140px;
+  }
+
+  .searching-message {
+    margin: 0;
+    opacity: 0.7;
+  }
+
+  .error-message {
+    margin: 0;
+    opacity: 0.7;
+  }
+
+</style>

src/routes/search/results/+page.svelte

@@ -0,0 +1,162 @@
+<script lang="ts">
+  import { onMount } from 'svelte';
+  import { page } from '$app/stores';
+  import SearchResultsTable from '$lib/components/SearchResultsTable.svelte';
+  import { searchLocalTracks } from '$lib/library/search';
+  import { searchDeezerTracks } from '$lib/services/deezer/search';
+  import { downloadTrack } from '$lib/services/deezer/downloader';
+  import { settings, loadSettings } from '$lib/stores/settings';
+  import { deezerAuth } from '$lib/stores/deezer';
+  import type { SearchResult, SearchType } from '$lib/types/search';
+
+  let results = $state<SearchResult[]>([]);
+  let query = $state('');
+  let searchType = $state<SearchType>('local');
+  let loading = $state(true);
+  let error = $state<string | null>(null);
+
+  onMount(async () => {
+    await loadSettings();
+
+    const urlQuery = $page.url.searchParams.get('q');
+    const urlType = $page.url.searchParams.get('type') as SearchType;
+
+    if (!urlQuery) {
+      error = 'No search query provided';
+      loading = false;
+      return;
+    }
+
+    query = urlQuery;
+    searchType = urlType || 'local';
+
+    // Check if results were passed via navigation state
+    const stateResults = history.state?.results;
+    if (stateResults && Array.isArray(stateResults)) {
+      results = stateResults;
+      loading = false;
+    } else {
+      // Fallback: perform search if no state (e.g., direct URL access or page refresh)
+      await performSearch();
+    }
+  });
+
+  async function performSearch() {
+    loading = true;
+    error = null;
+
+    try {
+      if (searchType === 'local') {
+        results = await searchLocalTracks(query);
+      } else {
+        results = await searchDeezerTracks(query);
+      }
+
+      if (results.length === 0) {
+        error = `No results found for "${query}"`;
+      }
+    } catch (e) {
+      error = 'Error performing search: ' + (e as Error).message;
+      results = [];
+    } finally {
+      loading = false;
+    }
+  }
+
+  async function handleDownload(result: SearchResult) {
+    if (!result.trackId) {
+      error = 'Cannot download: missing track ID';
+      return;
+    }
+
+    if (!$deezerAuth.user) {
+      error = 'Please log in to Deezer first (Services → Deezer)';
+      return;
+    }
+
+    if (!$settings.musicFolder) {
+      error = 'Please configure music folder in Settings';
+      return;
+    }
+
+    try {
+      console.log('Downloading track:', result.trackId);
+      await downloadTrack(result.trackId);
+      // TODO: Show success notification
+    } catch (e) {
+      error = 'Error downloading track: ' + (e as Error).message;
+    }
+  }
+</script>
+
+<div class="wrapper">
+  {#if loading}
+    <p style="padding: 8px;">Searching...</p>
+  {:else if error}
+    <div class="header">
+      <p class="error-message" style="padding: 8px;">{error}</p>
+      <span class="separator">•</span>
+      <a href="/search?q={encodeURIComponent(query)}">Edit</a>
+    </div>
+  {:else}
+    <div class="header">
+      <h3>
+        {results.length} Search Result{results.length !== 1 ? 's' : ''} for "{query}"
+      </h3>
+      <span class="separator">•</span>
+      <a href="/search?q={encodeURIComponent(query)}">Edit</a>
+    </div>
+
+    <section class="results-section">
+      <SearchResultsTable
+        {results}
+        {searchType}
+        onDownload={handleDownload}
+      />
+    </section>
+  {/if}
+</div>
+
+<style>
+  .wrapper {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+  }
+
+  .header {
+    flex-shrink: 0;
+    padding: 8px;
+    display: flex;
+    align-items: center;
+    gap: 4px;
+  }
+
+  .header h3 {
+    margin: 0;
+    font-size: 1em;
+    font-weight: normal;
+  }
+
+  .separator {
+    opacity: 0.7;
+    margin: 0 4px;
+  }
+
+  .header a {
+    color: inherit;
+    text-decoration: underline;
+  }
+
+  .error-message {
+    margin: 0;
+    opacity: 0.7;
+  }
+
+  .results-section {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    min-height: 0;
+  }
+</style>