i18n(components): translate dropdown placeholders and modal labels

- Update Dropdown.svelte with search placeholder translation
- Update DeviceDropdown.svelte with searchDevices placeholder
- Update GenreFilterPopup.svelte with searchGenres placeholder
- Update PlaylistModal.svelte with name and description labels
- Add playlist.name and playlist.descriptionOptional keys

cc

src/lib/components/DeviceDropdown.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
   import { ChevronDown, Search } from 'lucide-svelte';
+  import { t } from '$lib/i18n';
   import {
     openMenu as openGlobalMenu,
     closeMenu as closeGlobalMenu,
@@ -317,7 +318,7 @@
           bind:this={searchInputRef}
           type="text"
           class="search-input"
-          placeholder="Search devices..."
+          placeholder={$t('placeholders.searchDevices')}
           bind:value={searchQuery}
           onkeydown={handleKeyDown}
         />

src/lib/components/Dropdown.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
   import { ChevronDown, Search } from 'lucide-svelte';
+  import { t } from '$lib/i18n';
   import {
     openMenu as openGlobalMenu,
     closeMenu as closeGlobalMenu,
@@ -239,7 +240,7 @@
           bind:this={searchInputRef}
           type="text"
           class="search-input"
-          placeholder="Search..."
+          placeholder={$t('placeholders.search')}
           bind:value={searchQuery}
           onkeydown={handleKeyDown}
         />

src/lib/components/GenreFilterPopup.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import { tick } from 'svelte';
   import { SlidersHorizontal, X, Minus, Check, ChevronRight, ChevronDown, Search, Loader2 } from 'lucide-svelte';
+  import { t } from '$lib/i18n';
   import {
     getChildGenres,
     getAllDescendantIds,
@@ -270,7 +271,7 @@
         <Search size={14} />
         <input
           type="text"
-          placeholder="Search genres..."
+          placeholder={$t('placeholders.searchGenres')}
           bind:value={searchQuery}
           class="search-input"
         />

src/lib/components/PlaylistModal.svelte

@@ -602,34 +602,34 @@
 
           {#if selectedPlaylistId === CREATE_NEW_PLAYLIST}
             <div class="form-group">
-              <label for="name">Playlist name</label>
+              <label for="name">{$t('playlist.playlistName')}</label>
               <input
                 type="text"
                 id="name"
                 bind:value={name}
-                placeholder="My Playlist"
+                placeholder={$t('placeholders.myPlaylist')}
                 disabled={loading}
               />
             </div>
           {/if}
         {:else}
           <div class="form-group">
-            <label for="name">Name</label>
+            <label for="name">{$t('playlist.name')}</label>
             <input
               type="text"
               id="name"
               bind:value={name}
-              placeholder="My Playlist"
+              placeholder={$t('placeholders.myPlaylist')}
               disabled={loading}
             />
           </div>
 
           <div class="form-group">
-            <label for="description">Description (optional)</label>
+            <label for="description">{$t('playlist.descriptionOptional')}</label>
             <textarea
               id="description"
               bind:value={description}
-              placeholder="Add a description..."
+              placeholder={$t('placeholders.addDescription')}
               rows="3"
               disabled={loading}
             ></textarea>

src/lib/i18n/locales/en.json

@@ -227,7 +227,9 @@
     "addTracks": "Add Tracks",
     "removeTracks": "Remove",
     "playlistName": "Playlist Name",
+    "name": "Name",
     "description": "Description",
+    "descriptionOptional": "Description (optional)",
     "public": "Public",
     "private": "Private",
     "import": "Import",

src/lib/i18n/locales/es.json

@@ -227,7 +227,9 @@
     "addTracks": "Agregar Pistas",
     "removeTracks": "Eliminar",
     "playlistName": "Nombre de la Lista",
+    "name": "Nombre",
     "description": "Descripción",
+    "descriptionOptional": "Descripción (opcional)",
     "public": "Pública",
     "private": "Privada",
     "import": "Importar",