fix playlist ui

src/stores/analysis.ts

@@ -29,7 +29,19 @@ export const useAnalysisStore = defineStore('analysis', () => {
 
   function setAllEntries(selected: boolean) {
       if (metadata.value && metadata.value.entries) {
-          metadata.value.entries.forEach((e: any) => e.selected = selected)
+          metadata.value.entries = metadata.value.entries.map((e: any) => ({
+              ...e,
+              selected
+          }))
+      }
+  }
+
+  function invertSelection() {
+      if (metadata.value && metadata.value.entries) {
+          metadata.value.entries = metadata.value.entries.map((e: any) => ({
+              ...e,
+              selected: !e.selected
+          }))
       }
   }
 
@@ -42,5 +54,5 @@ export const useAnalysisStore = defineStore('analysis', () => {
       scanMix.value = false
   }
 
-  return { url, loading, error, metadata, options, isMix, scanMix, toggleEntry, setAllEntries, reset }
+  return { url, loading, error, metadata, options, isMix, scanMix, toggleEntry, setAllEntries, invertSelection, reset }
 })

src/views/Home.vue

@@ -206,25 +206,31 @@ async function startDownload() {
       
       <!-- Playlist Header / Global Controls -->
       <div v-if="analysisStore.metadata.entries" class="p-6 border-b border-gray-200 dark:border-zinc-800">
-          <div class="flex items-start justify-between mb-6">
+          <div class="flex items-start justify-between mb-4">
               <div>
                   <h2 class="text-xl font-bold text-zinc-900 dark:text-white">{{ analysisStore.metadata.title }}</h2>
                   <p class="text-blue-500 mt-1 font-medium">{{ analysisStore.metadata.entries.length }} videos found</p>
               </div>
-              <div class="flex items-center gap-2">
-                 <button @click="analysisStore.setAllEntries(true)" class="text-xs px-3 py-1.5 rounded-lg bg-gray-100 hover:bg-gray-200 dark:bg-zinc-800 dark:hover:bg-zinc-700 text-zinc-700 dark:text-gray-300 transition-colors">Select All</button>
-                 <button @click="analysisStore.setAllEntries(false)" class="text-xs px-3 py-1.5 rounded-lg bg-gray-100 hover:bg-gray-200 dark:bg-zinc-800 dark:hover:bg-zinc-700 text-zinc-700 dark:text-gray-300 transition-colors">Select None</button>
-              </div>
           </div>
           
-          <!-- Global Options -->
+          <!-- Global Options Bar -->
-          <div class="grid grid-cols-1 md:grid-cols-2 gap-4 bg-gray-50 dark:bg-zinc-800/50 p-4 rounded-xl">
+          <div class="flex flex-col md:flex-row items-center justify-between gap-4 bg-gray-50 dark:bg-zinc-800/50 p-4 rounded-xl">
+             
+             <!-- Left: Selection Controls -->
+             <div class="flex items-center gap-2 w-full md:w-auto">
+                 <button @click="analysisStore.setAllEntries(true)" class="text-xs font-medium px-3 py-1.5 rounded-lg bg-white dark:bg-zinc-700 hover:bg-gray-100 dark:hover:bg-zinc-600 text-zinc-700 dark:text-gray-200 border border-gray-200 dark:border-zinc-600 transition-colors shadow-sm">All</button>
+                 <button @click="analysisStore.setAllEntries(false)" class="text-xs font-medium px-3 py-1.5 rounded-lg bg-white dark:bg-zinc-700 hover:bg-gray-100 dark:hover:bg-zinc-600 text-zinc-700 dark:text-gray-200 border border-gray-200 dark:border-zinc-600 transition-colors shadow-sm">None</button>
+                 <button @click="analysisStore.invertSelection()" class="text-xs font-medium px-3 py-1.5 rounded-lg bg-white dark:bg-zinc-700 hover:bg-gray-100 dark:hover:bg-zinc-600 text-zinc-700 dark:text-gray-200 border border-gray-200 dark:border-zinc-600 transition-colors shadow-sm">Invert</button>
+             </div>
+
+             <!-- Right: Settings -->
+             <div class="flex items-center gap-6 w-full md:w-auto justify-end">
                 <!-- Audio Only Toggle -->
-             <div class="flex items-center justify-between">
+                <div class="flex items-center gap-3">
-                <span class="font-medium text-sm text-zinc-700 dark:text-gray-300">Audio Only (All)</span>
+                    <span class="font-medium text-sm text-zinc-700 dark:text-gray-300">Audio Only</span>
                     <button 
                       @click="analysisStore.options.is_audio_only = !analysisStore.options.is_audio_only"
-                  class="w-10 h-5 rounded-full relative transition-colors duration-200 ease-in-out"
+                      class="w-10 h-5 rounded-full relative transition-colors duration-200 ease-in-out shrink-0"
                       :class="analysisStore.options.is_audio_only ? 'bg-blue-600' : 'bg-gray-300 dark:bg-zinc-600'"
                     >
                       <span 
@@ -235,9 +241,9 @@ async function startDownload() {
                 </div>
 
                 <!-- Quality Dropdown -->
-             <div class="flex items-center justify-between gap-4">
+                <div class="flex items-center gap-3">
-                 <span class="font-medium text-sm text-zinc-700 dark:text-gray-300">Quality (All)</span>
+                     <span class="font-medium text-sm text-zinc-700 dark:text-gray-300">Quality</span>
-                 <div class="w-40">
+                     <div class="w-44">
                         <AppSelect 
                           v-model="analysisStore.options.quality"
                           :options="qualityOptions"
@@ -247,6 +253,7 @@ async function startDownload() {
                 </div>
              </div>
           </div>
+      </div>
 
       <!-- Video List (Playlist Mode) -->
       <div v-if="analysisStore.metadata.entries" class="max-h-[500px] overflow-y-auto p-2 space-y-2 bg-gray-50/50 dark:bg-black/20">