feat(wip): search

README.md

@@ -1,7 +1,12 @@
-# shark
+# Shark!
 
 Desktop music management application written in Typescript.
 
+## Inspiration
+
+Inspired by [this post on X](https://x.com/tehmondspartan/status/1972011472265118148), and the functionality of Deemix, written from the ground up for Tauri's webwiew without the Node.js dependency. Instead it has much more specific dependencies :)
+
+
 ## Tech Stack
 
 - [Tauri 2](https://v2.tauri.app/start/) (desktop runtime)
@@ -45,8 +50,6 @@ bun run tauri build
 bun run check
 ```
 
-## How It Works
-
 ### Architecture
 
 ```

src/lib/ToolBar.svelte

@@ -69,10 +69,10 @@
     <span>Now Playing</span>
   </button>
 
-  <button class="toolbar-button" disabled title="Search">
+  <a href="/search" class="toolbar-button" title="Search">
     <img src={icons.search} alt="Search" />
     <span>Search</span>
-  </button>
+  </a>
   
   <a href="/settings" class="toolbar-button" title="Settings">
     <img src={icons.computer} alt="Settings" />

src/lib/components/SearchResultsTable.svelte

@@ -0,0 +1,94 @@
+<script lang="ts">
+  import { goto } from '$app/navigation';
+  import type { SearchResult, SearchType } from '$lib/types/search';
+
+  interface Props {
+    results: SearchResult[];
+    searchType: SearchType;
+    onDownload?: (result: SearchResult) => void;
+  }
+
+  let { results, searchType, onDownload }: Props = $props();
+
+  let selectedIndex = $state<number | null>(null);
+
+  function handleRowClick(index: number) {
+    selectedIndex = index;
+  }
+
+  function handleRowDoubleClick(result: SearchResult, index: number) {
+    if (searchType === 'local') {
+      // Navigate to album view
+      if (result.artistName && result.albumTitle) {
+        const artistEncoded = encodeURIComponent(result.artistName);
+        const albumEncoded = encodeURIComponent(result.albumTitle);
+        goto(`/albums/${artistEncoded}/${albumEncoded}`);
+      }
+    } else if (searchType === 'online') {
+      // Trigger download
+      if (onDownload) {
+        onDownload(result);
+      }
+    }
+  }
+
+  function formatDuration(seconds?: number): string {
+    if (!seconds) return '—';
+    const mins = Math.floor(seconds / 60);
+    const secs = Math.floor(seconds % 60);
+    return `${mins}:${secs.toString().padStart(2, '0')}`;
+  }
+</script>
+
+<div class="table-container">
+  <table class="interactive">
+    <thead>
+      <tr>
+        <th>Track</th>
+        <th>Artist</th>
+        <th>Duration</th>
+        <th>Album</th>
+      </tr>
+    </thead>
+    <tbody>
+      {#each results as result, i}
+        <tr
+          class:highlighted={selectedIndex === i}
+          onclick={() => handleRowClick(i)}
+          ondblclick={() => handleRowDoubleClick(result, i)}
+        >
+          <td>{result.title}</td>
+          <td>{result.artist}</td>
+          <td class="duration">{formatDuration(result.duration)}</td>
+          <td>{result.album}</td>
+        </tr>
+      {/each}
+    </tbody>
+  </table>
+</div>
+
+<style>
+  .table-container {
+    flex: 1;
+    overflow-y: auto;
+    min-height: 0;
+  }
+
+  table {
+    width: 100%;
+  }
+
+  th {
+    text-align: left;
+  }
+
+  .duration {
+    font-family: monospace;
+    text-align: center;
+    width: 80px;
+  }
+
+  td:last-child {
+    opacity: 0.7;
+  }
+</style>

src/lib/library/search.ts

@@ -0,0 +1,67 @@
+import { initDatabase, type DbAlbum } from './database';
+import { loadAlbumTracks } from './album';
+import type { SearchResult } from '$lib/types/search';
+
+/**
+ * Search local library for tracks matching the query
+ * Searches album titles, artist names, and then loads tracks from matching albums
+ */
+export async function searchLocalTracks(query: string): Promise<SearchResult[]> {
+  if (!query.trim()) {
+    return [];
+  }
+
+  const database = await initDatabase();
+  const searchTerm = `%${query.trim()}%`;
+
+  // Search albums by title or artist name
+  const albums = await database.select<DbAlbum[]>(
+    `SELECT * FROM albums
+     WHERE title LIKE $1 COLLATE NOCASE
+     OR artist_name LIKE $1 COLLATE NOCASE
+     ORDER BY artist_name COLLATE NOCASE, title COLLATE NOCASE
+     LIMIT 50`,
+    [searchTerm]
+  );
+
+  if (albums.length === 0) {
+    return [];
+  }
+
+  // Load tracks from all matching albums
+  const results: SearchResult[] = [];
+
+  for (const album of albums) {
+    try {
+      const tracks = await loadAlbumTracks(album.path);
+
+      for (const track of tracks) {
+        // Filter tracks by query in track title or artist
+        const trackTitle = track.metadata.title || track.filename;
+        const trackArtist = track.metadata.artist || album.artist_name;
+
+        if (
+          trackTitle.toLowerCase().includes(query.toLowerCase()) ||
+          trackArtist.toLowerCase().includes(query.toLowerCase()) ||
+          album.title.toLowerCase().includes(query.toLowerCase())
+        ) {
+          results.push({
+            title: trackTitle,
+            artist: trackArtist,
+            album: album.title,
+            duration: track.metadata.duration,
+            source: 'local',
+            albumPath: album.path,
+            artistName: album.artist_name,
+            albumTitle: album.title
+          });
+        }
+      }
+    } catch (error) {
+      console.error(`Error loading tracks from album ${album.path}:`, error);
+      // Continue with next album
+    }
+  }
+
+  return results;
+}

src/lib/services/deezer/search.ts

@@ -0,0 +1,71 @@
+import type { SearchResult } from '$lib/types/search';
+
+/**
+ * Search Deezer for tracks matching the query
+ * TODO: Implement actual Deezer search API
+ * For now, returns mock data
+ */
+export async function searchDeezerTracks(query: string): Promise<SearchResult[]> {
+  if (!query.trim()) {
+    return [];
+  }
+
+  // Simulate API delay
+  await new Promise(resolve => setTimeout(resolve, 300));
+
+  // Mock data - replace with actual Deezer API implementation
+  const mockResults: SearchResult[] = [
+    {
+      title: 'One More Time',
+      artist: 'Daft Punk',
+      album: 'Discovery',
+      duration: 320,
+      source: 'online',
+      trackId: '3135556',
+      coverArtUrl: 'https://e-cdns-images.dzcdn.net/images/cover/2e018122cb56986277102d2041a592c8/250x250-000000-80-0-0.jpg'
+    },
+    {
+      title: 'Get Lucky',
+      artist: 'Daft Punk',
+      album: 'Random Access Memories',
+      duration: 369,
+      source: 'online',
+      trackId: '67238732',
+      coverArtUrl: 'https://e-cdns-images.dzcdn.net/images/cover/b0b1e82769d1a1e452fd3f2f95d3bb0f/250x250-000000-80-0-0.jpg'
+    },
+    {
+      title: 'Around the World',
+      artist: 'Daft Punk',
+      album: 'Homework',
+      duration: 429,
+      source: 'online',
+      trackId: '3135553',
+      coverArtUrl: 'https://e-cdns-images.dzcdn.net/images/cover/d41d8cd98f00b204e9800998ecf8427e/250x250-000000-80-0-0.jpg'
+    },
+    {
+      title: 'Harder, Better, Faster, Stronger',
+      artist: 'Daft Punk',
+      album: 'Discovery',
+      duration: 224,
+      source: 'online',
+      trackId: '3135554',
+      coverArtUrl: 'https://e-cdns-images.dzcdn.net/images/cover/2e018122cb56986277102d2041a592c8/250x250-000000-80-0-0.jpg'
+    },
+    {
+      title: 'Digital Love',
+      artist: 'Daft Punk',
+      album: 'Discovery',
+      duration: 301,
+      source: 'online',
+      trackId: '3135555',
+      coverArtUrl: 'https://e-cdns-images.dzcdn.net/images/cover/2e018122cb56986277102d2041a592c8/250x250-000000-80-0-0.jpg'
+    }
+  ];
+
+  // Filter mock results by query
+  return mockResults.filter(result =>
+    result.title.toLowerCase().includes(query.toLowerCase()) ||
+    result.artist.toLowerCase().includes(query.toLowerCase()) ||
+    result.album.toLowerCase().includes(query.toLowerCase())
+  );
+}

src/lib/types/search.ts

@@ -0,0 +1,24 @@
+/**
+ * Search result representing a track from either local DB or online service
+ */
+export interface SearchResult {
+  // Common fields
+  title: string;
+  artist: string;
+  album: string;
+  duration?: number; // in seconds
+
+  // Source-specific fields
+  source: 'local' | 'online';
+
+  // Local-specific: path info for navigation
+  albumPath?: string;
+  artistName?: string;
+  albumTitle?: string;
+
+  // Online-specific: track ID for downloading
+  trackId?: string;
+  coverArtUrl?: string;
+}
+
+export type SearchType = 'local' | 'online';

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>