fix: resolve Svelte component directive error and clarify README

README.md

@@ -91,7 +91,9 @@ npm run tauri dev
 npm run tauri build
 ```
 
-### Environment Variables
+### Environment Variables (Building from Source Only)
+
+> **Note:** If you're using pre-built binaries from the [Releases](https://github.com/vicrodh/qbz/releases) page, Last.fm integration is already configured and ready to use. The following instructions are only for developers building from source.
 
 Copy the example environment file and configure it with your credentials:
 
@@ -99,9 +101,9 @@ Copy the example environment file and configure it with your credentials:
 cp .env.example .env
 ```
 
-#### Last.fm Integration (Optional)
+#### Last.fm Integration
 
-To enable Last.fm scrobbling, you need to create a Last.fm API application:
+To enable Last.fm scrobbling when building from source, you need to create a Last.fm API application:
 
 1. Go to [Last.fm API Account](https://www.last.fm/api/account/create)
 2. Create a new application (any name works)

src/lib/components/views/PlaylistDetailView.svelte

@@ -399,7 +399,7 @@
       <div class="sort-container">
         <button class="sort-btn" onclick={() => showSortMenu = !showSortMenu}>
           <span>Sort: {sortOptions.find(o => o.field === sortBy)?.label}</span>
-          <ChevronDown size={14} class:rotated={showSortMenu} />
+          <span class="chevron" class:rotated={showSortMenu}><ChevronDown size={14} /></span>
         </button>
         {#if showSortMenu}
           <div class="sort-menu">
@@ -819,7 +819,12 @@
     color: var(--text-primary);
   }
 
-  .sort-btn :global(.rotated) {
+  .sort-btn .chevron {
+    display: flex;
+    transition: transform 150ms ease;
+  }
+
+  .sort-btn .chevron.rotated {
     transform: rotate(180deg);
   }