Multiselect for 3 files and more

frontend/src/views/PublicBrowser.vue

@@ -3,6 +3,7 @@
     <div class="flex items-center justify-between mb-4 gap-4 flex-wrap">
       <h1 class="text-2xl font-bold text-gray-900 dark:text-gray-100">Public files</h1>
       <button
+        v-if="showMultiselect"
         :disabled="selected.size === 0"
         @click="showConfirm = true; generateCaptcha()"
         class="flex items-center gap-2 px-4 py-2 rounded-lg text-sm font-medium transition-colors"
@@ -56,7 +57,7 @@
       <table class="w-full text-sm border-collapse min-w-[600px]">
         <thead>
           <tr class="border-b border-gray-200 dark:border-gray-700 text-left text-gray-500 dark:text-gray-400">
-            <th class="pb-2 pr-3 w-8">
+            <th v-if="showMultiselect" class="pb-2 pr-3 w-8">
               <input
                 type="checkbox"
                 :checked="allFilesSelected"
@@ -77,7 +78,7 @@
             class="border-b border-gray-100 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-800"
             :class="{ 'bg-blue-50 dark:bg-blue-900/20': selected.has(entry.name) }"
           >
-            <td class="py-2 pr-3">
+            <td v-if="showMultiselect" class="py-2 pr-3">
               <input
                 v-if="!entry.is_dir"
                 type="checkbox"
@@ -240,6 +241,7 @@ function closeConfirm() {
 }
 
 const fileEntries = computed(() => entries.value.filter(e => !e.is_dir))
+const showMultiselect = computed(() => fileEntries.value.length >= 3)
 const allFilesSelected = computed(() => fileEntries.value.length > 0 && fileEntries.value.every(e => selected.value.has(e.name)))
 const someFilesSelected = computed(() => !allFilesSelected.value && fileEntries.value.some(e => selected.value.has(e.name)))