From 81a299830394db016c0edf52a9d042cb4c51cf18 Mon Sep 17 00:00:00 2001
From: arabcoders <admin@arabcoders.org>
Date: Sat, 15 Nov 2025 19:38:52 +0300
Subject: [PATCH 1/3] Refactor: Use tab design for index page

---
 app/routes/socket/connection.py |   2 +-
 ui/app/components/History.vue   | 967 +++++++++++++++-----------------
 ui/app/components/Queue.vue     | 521 +++++++++--------
 ui/app/components/Simple.vue    |  89 ++-
 ui/app/layouts/default.vue      |  19 +-
 ui/app/pages/index.vue          |  82 ++-
 ui/app/pages/settings.vue       |   5 +-
 ui/app/stores/ConfigStore.ts    |   2 +-
 ui/app/stores/SocketStore.ts    |   6 +-
 ui/app/stores/StateStore.ts     |  24 +-
 10 files changed, 906 insertions(+), 811 deletions(-)

diff --git a/app/routes/socket/connection.py b/app/routes/socket/connection.py
index d7a51c61..d16a5e95 100644
--- a/app/routes/socket/connection.py
+++ b/app/routes/socket/connection.py
@@ -45,7 +45,7 @@ async def connect(config: Config, queue: DownloadQueue, notify: EventBus, sid: s
                 depth_limit=config.download_path_depth - 1,
             ),
             "history_count": queue.done.get_total_count(),
-            **queue.get()["queue"],
+            "queue": queue.get()["queue"],
         },
         title="Sending initial download data",
         message=f"Sending initial download data to client '{sid}'.",
diff --git a/ui/app/components/History.vue b/ui/app/components/History.vue
index 0831f571..0cc0c0fa 100644
--- a/ui/app/components/History.vue
+++ b/ui/app/components/History.vue
@@ -1,493 +1,466 @@
 <template>
-  <h1 class="mt-3 is-size-3 is-clickable is-unselectable" @click="showCompleted = !showCompleted">
-    <span class="icon-text title is-4">
-      <span class="icon">
-        <i :class="showCompleted ? 'fa-solid fa-arrow-up' : 'fa-solid fa-arrow-down'" />
-      </span>
-      <span>
-        History
-        <span v-if="stateStore.count('history')">({{ stateStore.count('history') }})</span>
-        <span v-if="selectedElms.length > 0">&nbsp;- Selected: {{ selectedElms.length }}</span>
-      </span>
-    </span>
-  </h1>
-
-  <div v-if="showCompleted">
-    <div class="columns is-multiline is-mobile has-text-centered" v-if="hasItems">
-      <div class="column is-half-mobile" v-if="display_style === 'grid'">
-        <button type="button" class="button is-fullwidth is-ghost is-inverted"
-          @click="masterSelectAll = !masterSelectAll">
-          <span class="icon-text is-block">
-            <span class="icon">
-              <i :class="!masterSelectAll ? 'fa-regular fa-square-check' : 'fa-regular fa-square'" />
-            </span>
-            <span v-if="!masterSelectAll">Select All</span>
-            <span v-else>Unselect All</span>
+  <div class="columns is-multiline is-mobile has-text-centered" v-if="hasItems">
+    <div class="column is-half-mobile">
+      <button type="button" class="button is-fullwidth is-ghost is-inverted"
+        @click="masterSelectAll = !masterSelectAll">
+        <span v-if="selectedElms.length > 0" class="mr-2 tag is-danger">
+          {{ selectedElms.length }}
+        </span>
+        <span class="icon-text is-block">
+          <span class="icon">
+            <i :class="!masterSelectAll ? 'fa-regular fa-square-check' : 'fa-regular fa-square'" />
           </span>
-        </button>
-      </div>
-      <div class="column is-half-mobile">
-        <button type="button" class="button is-fullwidth is-link" @click="downloadSelected"
-          :disabled="!hasDownloaded || !hasSelected"
-          v-tooltip="!hasSelected || !hasDownloaded ? '' : 'Download items as zip'">
-          <span class="icon-text is-block">
-            <span class="icon"><i class="fa-solid fa-compress-alt" /></span>
-            <span>Download</span>
-          </span>
-        </button>
-      </div>
-      <div class="column is-half-mobile">
-        <button type="button" class="button is-fullwidth is-danger" @click="deleteSelectedItems"
-          :disabled="!hasSelected">
-          <span class="icon-text is-block">
-            <span class="icon"><i class="fa-solid fa-trash-can" /></span>
-            <span>{{ config.app.remove_files ? 'Remove' : 'Clear' }}</span>
-          </span>
-        </button>
-      </div>
-      <div class="column is-half-mobile" v-if="hasCompleted">
-        <button type="button" class="button is-fullwidth is-primary is-inverted" @click="clearCompleted">
-          <span class="icon-text is-block">
-            <span class="icon"><i class="fa-solid fa-circle-check" /></span>
-            <span>Clear Completed</span>
-          </span>
-        </button>
-      </div>
-      <div class="column is-half-mobile" v-if="hasIncomplete">
-        <button type="button" class="button is-fullwidth is-info is-inverted" @click="clearIncomplete">
-          <span class="icon-text is-block">
-            <span class="icon"><i class="fa-solid fa-circle-xmark" /></span>
-            <span>Clear Incomplete</span>
-          </span>
-        </button>
-      </div>
-      <div class="column is-half-mobile" v-if="hasIncomplete">
-        <button type="button" class="button is-fullwidth is-warning is-inverted" @click="retryIncomplete">
-          <span class="icon-text is-block">
-            <span class="icon"><i class="fa-solid fa-rotate-right" /></span>
-            <span>Retry Incomplete</span>
-          </span>
-        </button>
-      </div>
-      <div class="column is-1-tablet">
-        <button type="button" class="button is-fullwidth" @click="direction = direction === 'desc' ? 'asc' : 'desc'">
-          <span class="icon-text is-block">
-            <span class="icon">
-              <i class="fa-solid" :class="direction === 'desc' ? 'fa-arrow-down-a-z' : 'fa-arrow-up-a-z'" />
-            </span>
-          </span>
-        </button>
-      </div>
-      <div class="column is-1-tablet">
-        <button type="button" class="button is-info is-fullwidth" @click="() => stateStore.reloadCurrentPage('history')"
-          :disabled="paginationInfo.isLoading" :class="{ 'is-loading': paginationInfo.isLoading }">
-          <span class="icon-text is-block">
-            <span class="icon"><i class="fas fa-refresh" /></span>
-          </span>
-        </button>
-      </div>
+          <span v-if="!masterSelectAll">Select All</span>
+          <span v-else>Unselect All</span>
+        </span>
+      </button>
     </div>
+    <div class="column is-half-mobile">
+      <button type="button" class="button is-fullwidth is-link" @click="downloadSelected"
+        :disabled="!hasDownloaded || !hasSelected"
+        v-tooltip="!hasSelected || !hasDownloaded ? '' : 'Download items as zip'">
+        <span class="icon-text is-block">
+          <span class="icon"><i class="fa-solid fa-compress-alt" /></span>
+          <span>Download</span>
+        </span>
+      </button>
+    </div>
+    <div class="column is-half-mobile">
+      <button type="button" class="button is-fullwidth is-danger" @click="deleteSelectedItems" :disabled="!hasSelected">
+        <span class="icon-text is-block">
+          <span class="icon"><i class="fa-solid fa-trash-can" /></span>
+          <span>{{ config.app.remove_files ? 'Remove' : 'Clear' }}</span>
+        </span>
+      </button>
+    </div>
+    <div class="column is-half-mobile" v-if="hasCompleted">
+      <button type="button" class="button is-fullwidth is-primary is-inverted" @click="clearCompleted">
+        <span class="icon-text is-block">
+          <span class="icon"><i class="fa-solid fa-circle-check" /></span>
+          <span>Clear Completed</span>
+        </span>
+      </button>
+    </div>
+    <div class="column is-half-mobile" v-if="hasIncomplete">
+      <button type="button" class="button is-fullwidth is-info is-inverted" @click="clearIncomplete">
+        <span class="icon-text is-block">
+          <span class="icon"><i class="fa-solid fa-circle-xmark" /></span>
+          <span>Clear Incomplete</span>
+        </span>
+      </button>
+    </div>
+    <div class="column is-half-mobile" v-if="hasIncomplete">
+      <button type="button" class="button is-fullwidth is-warning is-inverted" @click="retryIncomplete">
+        <span class="icon-text is-block">
+          <span class="icon"><i class="fa-solid fa-rotate-right" /></span>
+          <span>Retry Incomplete</span>
+        </span>
+      </button>
+    </div>
+    <div class="column is-1-tablet">
+      <button type="button" class="button is-fullwidth" @click="direction = direction === 'desc' ? 'asc' : 'desc'">
+        <span class="icon-text is-block">
+          <span class="icon">
+            <i class="fa-solid" :class="direction === 'desc' ? 'fa-arrow-down-a-z' : 'fa-arrow-up-a-z'" />
+          </span>
+        </span>
+      </button>
+    </div>
+  </div>
 
-    <div class="columns is-multiline" v-if="paginationInfo.isLoading && !hasItems">
-      <div class="column is-12">
-        <div class="message is-info">
-          <div class="message-body">
-            <span class="icon-text">
-              <span class="icon"> <i class="fa-solid fa-spinner fa-spin fa-2x" /> </span>
-              <span class="ml-3">Loading history...</span>
-            </span>
-          </div>
+  <div class="columns is-multiline" v-if="paginationInfo.isLoading && !hasItems">
+    <div class="column is-12">
+      <div class="message is-info">
+        <div class="message-body">
+          <span class="icon-text">
+            <span class="icon"> <i class="fa-solid fa-spinner fa-spin fa-2x" /> </span>
+            <span class="ml-3">Loading history...</span>
+          </span>
         </div>
       </div>
     </div>
+  </div>
 
-    <div class="columns is-multiline" v-if="paginationInfo.isLoaded && paginationInfo.total_pages > 1">
-      <div class="column is-12 has-text-centered">
-        <Pager :page="paginationInfo.page" :last_page="paginationInfo.total_pages" :isLoading="paginationInfo.isLoading"
-          @navigate="navigateToPage" />
-      </div>
-    </div>
-
-    <div class="columns is-multiline" v-if="'list' === display_style">
-      <div class="column is-12" v-if="hasItems">
-        <div class="table-container">
-          <table class="table is-striped is-hoverable is-fullwidth is-bordered"
-            style="min-width: 1300px; table-layout: fixed;">
-            <thead>
-              <tr class="has-text-centered is-unselectable">
-                <th width="5%" v-tooltip="masterSelectAll ? 'Unselect all' : 'Select all'">
-                  <a href="#" @click.prevent="masterSelectAll = !masterSelectAll">
-                    <span class="icon-text is-block">
-                      <span class="icon">
-                        <i class="fa-regular"
-                          :class="{ 'fa-square-check': !masterSelectAll, 'fa-square': masterSelectAll }" />
-                      </span>
+  <div class="columns is-multiline" v-if="'list' === display_style">
+    <div class="column is-12" v-if="hasItems">
+      <div class="table-container">
+        <table class="table is-striped is-hoverable is-fullwidth is-bordered"
+          style="min-width: 1300px; table-layout: fixed;">
+          <thead>
+            <tr class="has-text-centered is-unselectable">
+              <th width="5%" v-tooltip="masterSelectAll ? 'Unselect all' : 'Select all'">
+                <a href="#" @click.prevent="masterSelectAll = !masterSelectAll">
+                  <span class="icon-text is-block">
+                    <span class="icon">
+                      <i class="fa-regular"
+                        :class="{ 'fa-square-check': !masterSelectAll, 'fa-square': masterSelectAll }" />
                     </span>
-                  </a>
-                </th>
-                <th width="40%">Video Title</th>
-                <th width="15%">Status</th>
-                <th width="15%">Created</th>
-                <th width="10%">Size/Starts</th>
-                <th width="20%">Actions</th>
-              </tr>
-            </thead>
-            <tbody>
-              <tr v-for="item in sortCompleted" :key="item._id">
-                <td class="is-vcentered has-text-centered">
-                  <label class="checkbox is-block">
-                    <input class="completed-checkbox" type="checkbox" v-model="selectedElms"
-                      :id="'checkbox-' + item._id" :value="item._id">
-                  </label>
-                </td>
-                <td class="is-text-overflow is-vcentered">
-                  <div class="is-inline is-pulled-right" v-if="item.extras?.duration">
-                    <span class="tag is-info" v-if="item.extras?.duration">
-                      {{ formatTime(item.extras.duration) }}
-                    </span>
-                  </div>
-                  <div v-if="showThumbnails && getImage(item)">
-                    <FloatingImage :image="getImage(item)" :title="`[${item.preset}] - ${item.title}`">
-                      <div class="is-text-overflow">
-                        <NuxtLink target="_blank" :href="item.url">{{ item.title }}</NuxtLink>
-                      </div>
-                    </FloatingImage>
-                  </div>
-                  <template v-else>
-                    <div class="is-text-overflow" v-tooltip="`[${item.preset}] - ${item.title}`">
-                      <NuxtLink target="_blank" :href="item.url">{{ item.title }}</NuxtLink>
-                    </div>
-                  </template>
-                  <div v-if="item.error" class="is-text-overflow is-pointer" @click="toggle_class($event)">
-                    <span class="has-text-danger">{{ item.error }}</span>
-                  </div>
-                  <div v-if="showMessage(item)" class="is-text-overflow is-pointer" @click="toggle_class($event)">
-                    <span class="has-text-danger">{{ item.msg }}</span>
-                  </div>
-                </td>
-                <td class="is-vcentered has-text-centered is-unselectable">
-                  <span class="icon" :class="setIconColor(item)"><i :class="[setIcon(item), is_queued(item)]" /></span>
-                  <span>{{ setStatus(item) }}</span>
-                </td>
-                <td class="is-vcentered has-text-centered is-unselectable">
-                  <span class="user-hint" :date-datetime="item.datetime"
-                    v-tooltip="moment(item.datetime).format('YYYY-M-DD H:mm Z')" v-rtime="item.datetime" />
-                </td>
-                <td class="is-vcentered has-text-centered is-unselectable"
-                  v-if="item.live_in && 'not_live' === item.status">
-                  <span :date-datetime="item.live_in" class="user-hint"
-                    v-tooltip="'Will automatically be retried at: ' + moment(item.live_in).format('YYYY-M-DD H:mm Z')"
-                    v-rtime="item.live_in" />
-                </td>
-                <td class="is-vcentered has-text-centered is-unselectable" v-else>
-                  {{ item.file_size ? formatBytes(item.file_size) : '-' }}
-                </td>
-                <td class="is-vcentered is-items-center">
-                  <div class="field is-grouped is-grouped-centered">
-                    <div class="control" v-if="item.status != 'finished' || !item.filename">
-                      <button class="button is-warning is-fullwidth is-small" v-tooltip="'Retry download'"
-                        @click="() => retryItem(item, true)">
-                        <span class="icon"><i class="fa-solid fa-rotate-right" /></span>
-                      </button>
-                    </div>
-                    <div class="control" v-if="item.filename && item.status === 'finished'">
-                      <a class="button is-link is-fullwidth is-small" :href="makeDownload(config, item)"
-                        v-tooltip="'Download video'" :download="item.filename?.split('/').reverse()[0]">
-                        <span class="icon"><i class="fa-solid fa-download" /></span>
-                      </a>
-                    </div>
-                    <div class="control">
-                      <button class="button is-danger is-fullwidth is-small" @click="removeItem(item)"
-                        v-tooltip="config.app.remove_files ? 'Remove video' : 'Clear video'">
-                        <span class="icon"><i class="fa-solid fa-trash-can" /></span>
-                      </button>
-                    </div>
-                    <div class="control is-expanded" v-if="item.url">
-                      <Dropdown icons="fa-solid fa-cogs" :button_classes="'is-small'" label="Actions">
-                        <template v-if="'finished' === item.status && item.filename">
-                          <NuxtLink @click="playVideo(item)" class="dropdown-item">
-                            <span class="icon"><i class="fa-solid fa-play" /></span>
-                            <span>Play video</span>
-                          </NuxtLink>
-                          <hr class="dropdown-divider" />
-                        </template>
-                        <template v-else-if="isEmbedable(item.url)">
-                          <NuxtLink class="dropdown-item has-text-danger"
-                            @click="embed_url = getEmbedable(item.url) as string">
-                            <span class="icon"><i class="fa-solid fa-play" /></span>
-                            <span>Play video</span>
-                          </NuxtLink>
-                          <hr class="dropdown-divider" />
-                        </template>
-                        <NuxtLink class="dropdown-item" @click="emitter('getInfo', item.url, item.preset, item.cli)">
-                          <span class="icon"><i class="fa-solid fa-info" /></span>
-                          <span>yt-dlp Information</span>
-                        </NuxtLink>
-
-                        <NuxtLink class="dropdown-item" @click="emitter('getItemInfo', item._id)">
-                          <span class="icon"><i class="fa-solid fa-info-circle" /></span>
-                          <span>Local Information</span>
-                        </NuxtLink>
-
-                        <hr class="dropdown-divider" />
-                        <NuxtLink class="dropdown-item" @click="retryItem(item, true)">
-                          <span class="icon"><i class="fa-solid fa-rotate-right" /></span>
-                          <span>Add to download form</span>
-                        </NuxtLink>
-
-                        <template v-if="item.is_archivable && !item.is_archived">
-                          <hr class="dropdown-divider" />
-                          <NuxtLink class="dropdown-item has-text-danger" @click="addArchiveDialog(item)">
-                            <span class="icon"><i class="fa-solid fa-box-archive" /></span>
-                            <span>Add to archive</span>
-                          </NuxtLink>
-                        </template>
-
-                        <template v-if="item.is_archivable && item.is_archived">
-                          <hr class="dropdown-divider" />
-                          <NuxtLink class="dropdown-item has-text-danger" @click="removeFromArchiveDialog(item)">
-                            <span class="icon"><i class="fa-solid fa-box-archive" /></span>
-                            <span>Remove from archive</span>
-                          </NuxtLink>
-                        </template>
-                      </Dropdown>
-                    </div>
-                  </div>
-                </td>
-              </tr>
-            </tbody>
-          </table>
-        </div>
-      </div>
-    </div>
-
-    <div class="columns is-multiline" v-else>
-      <LateLoader :unrender="true" :min-height="showThumbnails ? 410 : 210" class="column is-6"
-        v-for="item in filteredItems(sortCompleted)" :key="item._id">
-        <div class="card is-flex is-full-height is-flex-direction-column"
-          :class="{ 'is-bordered-danger': item.status === 'error', 'is-bordered-info': item.live_in || item.is_live }">
-          <header class="card-header">
-            <div class="card-header-title is-text-overflow is-block" v-tooltip="item.title">
-              <NuxtLink target="_blank" :href="item.url">{{ item.title }}</NuxtLink>
-            </div>
-
-            <div class="card-header-icon">
-              <div class="field is-grouped">
-                <div class="control">
+                  </span>
+                </a>
+              </th>
+              <th width="40%">Title</th>
+              <th width="15%">Status</th>
+              <th width="15%">Created</th>
+              <th width="10%">Size/Starts</th>
+              <th width="20%">Actions</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr v-for="item in sortCompleted" :key="item._id">
+              <td class="is-vcentered has-text-centered">
+                <label class="checkbox is-block">
+                  <input class="completed-checkbox" type="checkbox" v-model="selectedElms" :id="'checkbox-' + item._id"
+                    :value="item._id">
+                </label>
+              </td>
+              <td class="is-text-overflow is-vcentered">
+                <div class="is-inline is-pulled-right" v-if="item.extras?.duration">
                   <span class="tag is-info" v-if="item.extras?.duration">
                     {{ formatTime(item.extras.duration) }}
                   </span>
                 </div>
-                <div class="control">
-                  <button @click="hideThumbnail = !hideThumbnail" v-if="thumbnails">
-                    <span class="icon"><i class="fa-solid"
-                        :class="{ 'fa-arrow-down': hideThumbnail, 'fa-arrow-up': !hideThumbnail, }" /></span>
-                  </button>
+                <div v-if="showThumbnails && getImage(item)">
+                  <FloatingImage :image="getImage(item)" :title="`[${item.preset}] - ${item.title}`">
+                    <div class="is-text-overflow">
+                      <NuxtLink target="_blank" :href="item.url">{{ item.title }}</NuxtLink>
+                    </div>
+                  </FloatingImage>
                 </div>
-                <div class="control">
-                  <label class="checkbox is-block">
-                    <input class="completed-checkbox" type="checkbox" v-model="selectedElms"
-                      :id="'checkbox-' + item._id" :value="item._id">
-                  </label>
-                </div>
-
-              </div>
-            </div>
-          </header>
-          <div v-if="showThumbnails" class="card-image">
-            <figure :class="['image', thumbnail_ratio]">
-              <span v-if="'finished' === item.status && item.filename" @click="playVideo(item)" class="play-overlay">
-                <div class="play-icon"></div>
-                <img @load="(e: Event) => pImg(e)" :src="getImage(item)" v-if="getImage(item)" />
-                <img v-else src="/images/placeholder.png" />
-              </span>
-              <span v-else-if="isEmbedable(item.url)" @click="embed_url = getEmbedable(item.url) as string"
-                class="play-overlay">
-                <div class="play-icon embed-icon"></div>
-                <img @load="(e: Event) => pImg(e)" :src="getImage(item)" v-if="getImage(item)" />
-                <img v-else src="/images/placeholder.png" />
-              </span>
-              <template v-else>
-                <img @load="(e: Event) => pImg(e)" v-if="getImage(item)" :src="getImage(item)" />
-                <img v-else src="/images/placeholder.png" />
-              </template>
-            </figure>
-          </div>
-          <div class="card-content">
-            <div class="columns is-mobile is-multiline">
-              <div class="column is-half-mobile has-text-centered is-text-overflow is-unselectable">
-                <span class="icon" :class="setIconColor(item)"><i :class="[setIcon(item), is_queued(item)]" /></span>
-                <span>{{ setStatus(item) }}</span>
-              </div>
-              <div class="column is-half-mobile has-text-centered is-text-overflow is-unselectable">
-                <span class="icon"><i class="fa-solid fa-sliders" /></span>
-                <span v-tooltip="`Preset: ${item.preset}`" class="user-hint">{{ item.preset }}</span>
-              </div>
-              <div class="column is-half-mobile has-text-centered is-text-overflow is-unselectable"
-                v-if="'not_live' === item.status && (item.live_in || item.extras?.release_in)">
-                <span :date-datetime="item.live_in || item.extras?.release_in" class="user-hint"
-                  v-tooltip="'Will be downloaded at: ' + moment(item.live_in || item.extras?.release_in).format('YYYY-M-DD H:mm Z')"
-                  v-rtime="item.live_in || item.extras?.release_in" />
-              </div>
-              <div class="column is-half-mobile has-text-centered is-text-overflow is-unselectable">
-                <span class="user-hint" :date-datetime="item.datetime"
-                  v-tooltip="moment(item.datetime).format('YYYY-M-DD H:mm Z')" v-rtime="item.datetime" />
-              </div>
-              <div class="column is-half-mobile has-text-centered is-text-overflow is-unselectable"
-                v-if="item.file_size">
-                <span class="has-tooltip" v-tooltip="`Path: ${makePath(item)}`">{{
-                  formatBytes(item.file_size) }}</span>
-              </div>
-            </div>
-            <div class="columns is-mobile is-multiline">
-              <div class="column is-half-mobile" v-if="item.status != 'finished' || !item.filename">
-                <a class="button is-warning is-fullwidth" @click="() => retryItem(item, false)">
-                  <span class="icon-text is-block">
-                    <span class="icon"><i class="fa-solid fa-rotate-right" /></span>
-                    <span>Retry</span>
-                  </span>
-                </a>
-              </div>
-
-              <div class="column is-half-mobile" v-if="item.filename && item.status === 'finished'">
-                <a class="button is-link is-fullwidth" :href="makeDownload(config, item)"
-                  :download="item.filename?.split('/').reverse()[0]">
-                  <span class="icon-text is-block">
-                    <span class="icon"><i class="fa-solid fa-download" /></span>
-                    <span>Download</span>
-                  </span>
-                </a>
-              </div>
-
-              <div class="column is-half-mobile">
-                <a class="button is-danger is-fullwidth" @click="removeItem(item)">
-                  <span class="icon-text is-block">
-                    <span class="icon"><i class="fa-solid fa-trash-can" /></span>
-                    <span>{{ config.app.remove_files ? 'Remove' : 'Clear' }}</span>
-                  </span>
-                </a>
-              </div>
-
-              <div class="column">
-                <Dropdown icons="fa-solid fa-cogs" label="Actions">
-                  <template v-if="'finished' === item.status && item.filename">
-                    <NuxtLink @click="playVideo(item)" class="dropdown-item">
-                      <span class="icon"><i class="fa-solid fa-play" /></span>
-                      <span>Play video</span>
-                    </NuxtLink>
-                    <hr class="dropdown-divider" />
-                  </template>
-
-                  <template v-else-if="isEmbedable(item.url)">
-                    <NuxtLink class="dropdown-item has-text-danger"
-                      @click="embed_url = getEmbedable(item.url) as string">
-                      <span class="icon"><i class="fa-solid fa-play" /></span>
-                      <span>Play video</span>
-                    </NuxtLink>
-                    <hr class="dropdown-divider" />
-                  </template>
-
-                  <NuxtLink class="dropdown-item" @click="emitter('getInfo', item.url, item.preset, item.cli)">
-                    <span class="icon"><i class="fa-solid fa-info" /></span>
-                    <span>yt-dlp Information</span>
-                  </NuxtLink>
-
-                  <NuxtLink class="dropdown-item" @click="emitter('getItemInfo', item._id)">
-                    <span class="icon"><i class="fa-solid fa-info-circle" /></span>
-                    <span>Local Information</span>
-                  </NuxtLink>
-
-                  <hr class="dropdown-divider" />
-                  <NuxtLink class="dropdown-item" @click="retryItem(item, true)">
-                    <span class="icon"><i class="fa-solid fa-rotate-right" /></span>
-                    <span>Add to download form</span>
-                  </NuxtLink>
-
-                  <template v-if="item.is_archivable && !item.is_archived">
-                    <hr class="dropdown-divider" />
-                    <NuxtLink class="dropdown-item has-text-danger" @click="addArchiveDialog(item)">
-                      <span class="icon"><i class="fa-solid fa-box-archive" /></span>
-                      <span>Archive Item</span>
-                    </NuxtLink>
-                  </template>
-
-                  <template v-if="item.is_archivable && item.is_archived">
-                    <hr class="dropdown-divider" />
-                    <NuxtLink class="dropdown-item has-text-danger" @click="removeFromArchiveDialog(item)">
-                      <span class="icon"><i class="fa-solid fa-box-archive" /></span>
-                      <span>Remove from archive</span>
-                    </NuxtLink>
-                  </template>
-                </Dropdown>
-              </div>
-
-            </div>
-            <div class="columns is-mobile is-multiline" v-if="item.error || showMessage(item)">
-              <div class="column is-12" v-if="item.error">
-                <div class="is-text-overflow is-pointer" @click="toggle_class($event)">
+                <template v-else>
+                  <div class="is-text-overflow" v-tooltip="`[${item.preset}] - ${item.title}`">
+                    <NuxtLink target="_blank" :href="item.url">{{ item.title }}</NuxtLink>
+                  </div>
+                </template>
+                <div v-if="item.error" class="is-text-overflow is-pointer" @click="toggle_class($event)">
                   <span class="has-text-danger">{{ item.error }}</span>
                 </div>
-              </div>
-              <div class="column is-12" v-if="showMessage(item)">
-                <div class="is-text-overflow is-pointer" @click="toggle_class($event)">
+                <div v-if="showMessage(item)" class="is-text-overflow is-pointer" @click="toggle_class($event)">
                   <span class="has-text-danger">{{ item.msg }}</span>
                 </div>
+              </td>
+              <td class="is-vcentered has-text-centered is-unselectable">
+                <span class="icon" :class="setIconColor(item)"><i :class="[setIcon(item), is_queued(item)]" /></span>
+                <span>{{ setStatus(item) }}</span>
+              </td>
+              <td class="is-vcentered has-text-centered is-unselectable">
+                <span class="user-hint" :date-datetime="item.datetime"
+                  v-tooltip="moment(item.datetime).format('YYYY-M-DD H:mm Z')" v-rtime="item.datetime" />
+              </td>
+              <td class="is-vcentered has-text-centered is-unselectable"
+                v-if="item.live_in && 'not_live' === item.status">
+                <span :date-datetime="item.live_in" class="user-hint"
+                  v-tooltip="'Will automatically be retried at: ' + moment(item.live_in).format('YYYY-M-DD H:mm Z')"
+                  v-rtime="item.live_in" />
+              </td>
+              <td class="is-vcentered has-text-centered is-unselectable" v-else>
+                {{ item.file_size ? formatBytes(item.file_size) : '-' }}
+              </td>
+              <td class="is-vcentered is-items-center">
+                <div class="field is-grouped is-grouped-centered">
+                  <div class="control" v-if="item.status != 'finished' || !item.filename">
+                    <button class="button is-warning is-fullwidth is-small" v-tooltip="'Retry download'"
+                      @click="() => retryItem(item, true)">
+                      <span class="icon"><i class="fa-solid fa-rotate-right" /></span>
+                    </button>
+                  </div>
+                  <div class="control" v-if="item.filename && item.status === 'finished'">
+                    <a class="button is-link is-fullwidth is-small" :href="makeDownload(config, item)"
+                      v-tooltip="'Download video'" :download="item.filename?.split('/').reverse()[0]">
+                      <span class="icon"><i class="fa-solid fa-download" /></span>
+                    </a>
+                  </div>
+                  <div class="control">
+                    <button class="button is-danger is-fullwidth is-small" @click="removeItem(item)"
+                      v-tooltip="config.app.remove_files ? 'Remove video' : 'Clear video'">
+                      <span class="icon"><i class="fa-solid fa-trash-can" /></span>
+                    </button>
+                  </div>
+                  <div class="control is-expanded" v-if="item.url">
+                    <Dropdown icons="fa-solid fa-cogs" :button_classes="'is-small'" label="Actions">
+                      <template v-if="'finished' === item.status && item.filename">
+                        <NuxtLink @click="playVideo(item)" class="dropdown-item">
+                          <span class="icon"><i class="fa-solid fa-play" /></span>
+                          <span>Play video</span>
+                        </NuxtLink>
+                        <hr class="dropdown-divider" />
+                      </template>
+                      <template v-else-if="isEmbedable(item.url)">
+                        <NuxtLink class="dropdown-item has-text-danger"
+                          @click="embed_url = getEmbedable(item.url) as string">
+                          <span class="icon"><i class="fa-solid fa-play" /></span>
+                          <span>Play video</span>
+                        </NuxtLink>
+                        <hr class="dropdown-divider" />
+                      </template>
+                      <NuxtLink class="dropdown-item" @click="emitter('getInfo', item.url, item.preset, item.cli)">
+                        <span class="icon"><i class="fa-solid fa-info" /></span>
+                        <span>yt-dlp Information</span>
+                      </NuxtLink>
+
+                      <NuxtLink class="dropdown-item" @click="emitter('getItemInfo', item._id)">
+                        <span class="icon"><i class="fa-solid fa-info-circle" /></span>
+                        <span>Local Information</span>
+                      </NuxtLink>
+
+                      <hr class="dropdown-divider" />
+                      <NuxtLink class="dropdown-item" @click="retryItem(item, true)">
+                        <span class="icon"><i class="fa-solid fa-rotate-right" /></span>
+                        <span>Add to download form</span>
+                      </NuxtLink>
+
+                      <template v-if="item.is_archivable && !item.is_archived">
+                        <hr class="dropdown-divider" />
+                        <NuxtLink class="dropdown-item has-text-danger" @click="addArchiveDialog(item)">
+                          <span class="icon"><i class="fa-solid fa-box-archive" /></span>
+                          <span>Add to archive</span>
+                        </NuxtLink>
+                      </template>
+
+                      <template v-if="item.is_archivable && item.is_archived">
+                        <hr class="dropdown-divider" />
+                        <NuxtLink class="dropdown-item has-text-danger" @click="removeFromArchiveDialog(item)">
+                          <span class="icon"><i class="fa-solid fa-box-archive" /></span>
+                          <span>Remove from archive</span>
+                        </NuxtLink>
+                      </template>
+                    </Dropdown>
+                  </div>
+                </div>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </div>
+  </div>
+
+  <div class="columns is-multiline" v-else>
+    <LateLoader :unrender="true" :min-height="showThumbnails ? 410 : 210" class="column is-6"
+      v-for="item in filteredItems(sortCompleted)" :key="item._id">
+      <div class="card is-flex is-full-height is-flex-direction-column"
+        :class="{ 'is-bordered-danger': item.status === 'error', 'is-bordered-info': item.live_in || item.is_live }">
+        <header class="card-header">
+          <div class="card-header-title is-text-overflow is-block" v-tooltip="item.title">
+            <NuxtLink target="_blank" :href="item.url">{{ item.title }}</NuxtLink>
+          </div>
+
+          <div class="card-header-icon">
+            <div class="field is-grouped">
+              <div class="control">
+                <span class="tag is-info" v-if="item.extras?.duration">
+                  {{ formatTime(item.extras.duration) }}
+                </span>
+              </div>
+              <div class="control">
+                <button @click="hideThumbnail = !hideThumbnail" v-if="thumbnails">
+                  <span class="icon"><i class="fa-solid"
+                      :class="{ 'fa-arrow-down': hideThumbnail, 'fa-arrow-up': !hideThumbnail, }" /></span>
+                </button>
+              </div>
+              <div class="control">
+                <label class="checkbox is-block">
+                  <input class="completed-checkbox" type="checkbox" v-model="selectedElms" :id="'checkbox-' + item._id"
+                    :value="item._id">
+                </label>
+              </div>
+
+            </div>
+          </div>
+        </header>
+        <div v-if="showThumbnails" class="card-image">
+          <figure :class="['image', thumbnail_ratio]">
+            <span v-if="'finished' === item.status && item.filename" @click="playVideo(item)" class="play-overlay">
+              <div class="play-icon"></div>
+              <img @load="(e: Event) => pImg(e)" :src="getImage(item)" v-if="getImage(item)" />
+              <img v-else src="/images/placeholder.png" />
+            </span>
+            <span v-else-if="isEmbedable(item.url)" @click="embed_url = getEmbedable(item.url) as string"
+              class="play-overlay">
+              <div class="play-icon embed-icon"></div>
+              <img @load="(e: Event) => pImg(e)" :src="getImage(item)" v-if="getImage(item)" />
+              <img v-else src="/images/placeholder.png" />
+            </span>
+            <template v-else>
+              <img @load="(e: Event) => pImg(e)" v-if="getImage(item)" :src="getImage(item)" />
+              <img v-else src="/images/placeholder.png" />
+            </template>
+          </figure>
+        </div>
+        <div class="card-content">
+          <div class="columns is-mobile is-multiline">
+            <div class="column is-half-mobile has-text-centered is-text-overflow is-unselectable">
+              <span class="icon" :class="setIconColor(item)"><i :class="[setIcon(item), is_queued(item)]" /></span>
+              <span>{{ setStatus(item) }}</span>
+            </div>
+            <div class="column is-half-mobile has-text-centered is-text-overflow is-unselectable">
+              <span class="icon"><i class="fa-solid fa-sliders" /></span>
+              <span v-tooltip="`Preset: ${item.preset}`" class="user-hint">{{ item.preset }}</span>
+            </div>
+            <div class="column is-half-mobile has-text-centered is-text-overflow is-unselectable"
+              v-if="'not_live' === item.status && (item.live_in || item.extras?.release_in)">
+              <span :date-datetime="item.live_in || item.extras?.release_in" class="user-hint"
+                v-tooltip="'Will be downloaded at: ' + moment(item.live_in || item.extras?.release_in).format('YYYY-M-DD H:mm Z')"
+                v-rtime="item.live_in || item.extras?.release_in" />
+            </div>
+            <div class="column is-half-mobile has-text-centered is-text-overflow is-unselectable">
+              <span class="user-hint" :date-datetime="item.datetime"
+                v-tooltip="moment(item.datetime).format('YYYY-M-DD H:mm Z')" v-rtime="item.datetime" />
+            </div>
+            <div class="column is-half-mobile has-text-centered is-text-overflow is-unselectable" v-if="item.file_size">
+              <span class="has-tooltip" v-tooltip="`Path: ${makePath(item)}`">{{
+                formatBytes(item.file_size) }}</span>
+            </div>
+          </div>
+          <div class="columns is-mobile is-multiline">
+            <div class="column is-half-mobile" v-if="item.status != 'finished' || !item.filename">
+              <a class="button is-warning is-fullwidth" @click="() => retryItem(item, false)">
+                <span class="icon-text is-block">
+                  <span class="icon"><i class="fa-solid fa-rotate-right" /></span>
+                  <span>Retry</span>
+                </span>
+              </a>
+            </div>
+
+            <div class="column is-half-mobile" v-if="item.filename && item.status === 'finished'">
+              <a class="button is-link is-fullwidth" :href="makeDownload(config, item)"
+                :download="item.filename?.split('/').reverse()[0]">
+                <span class="icon-text is-block">
+                  <span class="icon"><i class="fa-solid fa-download" /></span>
+                  <span>Download</span>
+                </span>
+              </a>
+            </div>
+
+            <div class="column is-half-mobile">
+              <a class="button is-danger is-fullwidth" @click="removeItem(item)">
+                <span class="icon-text is-block">
+                  <span class="icon"><i class="fa-solid fa-trash-can" /></span>
+                  <span>{{ config.app.remove_files ? 'Remove' : 'Clear' }}</span>
+                </span>
+              </a>
+            </div>
+
+            <div class="column">
+              <Dropdown icons="fa-solid fa-cogs" label="Actions">
+                <template v-if="'finished' === item.status && item.filename">
+                  <NuxtLink @click="playVideo(item)" class="dropdown-item">
+                    <span class="icon"><i class="fa-solid fa-play" /></span>
+                    <span>Play video</span>
+                  </NuxtLink>
+                  <hr class="dropdown-divider" />
+                </template>
+
+                <template v-else-if="isEmbedable(item.url)">
+                  <NuxtLink class="dropdown-item has-text-danger" @click="embed_url = getEmbedable(item.url) as string">
+                    <span class="icon"><i class="fa-solid fa-play" /></span>
+                    <span>Play video</span>
+                  </NuxtLink>
+                  <hr class="dropdown-divider" />
+                </template>
+
+                <NuxtLink class="dropdown-item" @click="emitter('getInfo', item.url, item.preset, item.cli)">
+                  <span class="icon"><i class="fa-solid fa-info" /></span>
+                  <span>yt-dlp Information</span>
+                </NuxtLink>
+
+                <NuxtLink class="dropdown-item" @click="emitter('getItemInfo', item._id)">
+                  <span class="icon"><i class="fa-solid fa-info-circle" /></span>
+                  <span>Local Information</span>
+                </NuxtLink>
+
+                <hr class="dropdown-divider" />
+                <NuxtLink class="dropdown-item" @click="retryItem(item, true)">
+                  <span class="icon"><i class="fa-solid fa-rotate-right" /></span>
+                  <span>Add to download form</span>
+                </NuxtLink>
+
+                <template v-if="item.is_archivable && !item.is_archived">
+                  <hr class="dropdown-divider" />
+                  <NuxtLink class="dropdown-item has-text-danger" @click="addArchiveDialog(item)">
+                    <span class="icon"><i class="fa-solid fa-box-archive" /></span>
+                    <span>Archive Item</span>
+                  </NuxtLink>
+                </template>
+
+                <template v-if="item.is_archivable && item.is_archived">
+                  <hr class="dropdown-divider" />
+                  <NuxtLink class="dropdown-item has-text-danger" @click="removeFromArchiveDialog(item)">
+                    <span class="icon"><i class="fa-solid fa-box-archive" /></span>
+                    <span>Remove from archive</span>
+                  </NuxtLink>
+                </template>
+              </Dropdown>
+            </div>
+
+          </div>
+          <div class="columns is-mobile is-multiline" v-if="item.error || showMessage(item)">
+            <div class="column is-12" v-if="item.error">
+              <div class="is-text-overflow is-pointer" @click="toggle_class($event)">
+                <span class="has-text-danger">{{ item.error }}</span>
+              </div>
+            </div>
+            <div class="column is-12" v-if="showMessage(item)">
+              <div class="is-text-overflow is-pointer" @click="toggle_class($event)">
+                <span class="has-text-danger">{{ item.msg }}</span>
               </div>
             </div>
           </div>
         </div>
-      </LateLoader>
-    </div>
-
-    <div class="columns is-multiline" v-if="!hasItems && !paginationInfo.isLoading">
-      <div class="column is-12">
-        <Message message_class="is-warning" title="Filter items" icon="fas fa-search" :useClose="true"
-          @close="() => emitter('clear_search')" v-if="query" :newStyle="true">
-          <span class="is-block">No results found for '<span class="is-underlined is-bold">{{ query }}</span>'.</span>
-        </Message>
-        <Message message_class="is-warning" title="Page is empty." icon="fas fa-exclamation-triangle"
-        v-else-if="socket.isConnected && paginationInfo.total" :new-style="true">
-          <span class="is-block">The current page has no items. Try navigating to a different page.</span>
-        </Message>
-        <Message message_class="is-success" title="No records in history."
-          icon="fas fa-circle-check" v-else-if="socket.isConnected" :new-style="true" />
-        <Message message_class="has-background-info-90 has-text-dark" title="Connecting.." icon="fas fa-spinner fa-spin"
-          v-else />
       </div>
-    </div>
-
-    <div class="columns is-multiline" v-if="paginationInfo.isLoaded && paginationInfo.total_pages > 1">
-      <div class="column is-12 has-text-centered">
-        <Pager :page="paginationInfo.page" :last_page="paginationInfo.total_pages" :isLoading="paginationInfo.isLoading"
-          @navigate="navigateToPage" />
-      </div>
-    </div>
-
-    <div class="modal is-active" v-if="video_item">
-      <div class="modal-background" @click="closeVideo"></div>
-      <div class="modal-content is-unbounded-model">
-        <VideoPlayer type="default" :isMuted="false" autoplay="true" :isControls="true" :item="video_item"
-          class="is-fullwidth" @closeModel="closeVideo" />
-      </div>
-      <button class="modal-close is-large" aria-label="close" @click="closeVideo"></button>
-    </div>
-
-    <div class="modal is-active" v-if="embed_url">
-      <div class="modal-background" @click="embed_url = ''"></div>
-      <div class="modal-content is-unbounded-model">
-        <EmbedPlayer :url="embed_url" @closeModel="embed_url = ''" />
-      </div>
-      <button class="modal-close is-large" aria-label="close" @click="embed_url = ''"></button>
-    </div>
-
-    <ConfirmDialog v-if="dialog_confirm.visible" :visible="dialog_confirm.visible" :title="dialog_confirm.title"
-      :message="dialog_confirm.message" :options="dialog_confirm.options" @confirm="dialog_confirm.confirm"
-      @cancel="() => dialog_confirm.visible = false" />
+    </LateLoader>
   </div>
+
+  <div class="columns is-multiline" v-if="!hasItems && !paginationInfo.isLoading">
+    <div class="column is-12">
+      <Message message_class="is-warning" title="Filter results" icon="fas fa-search" :useClose="true"
+        @close="() => emitter('clear_search')" v-if="query" :newStyle="true">
+        <span class="is-block">No results found for '<span class="is-underlined is-bold">{{ query }}</span>'.</span>
+      </Message>
+      <Message message_class="is-primary" title="No items" icon="fas fa-exclamation-triangle"
+        v-else-if="socket.isConnected && paginationInfo.total" :new-style="true">
+        <p>Your download history is empty. Once queued downloads are completed, they will appear here.</p>
+      </Message>
+    </div>
+  </div>
+
+  <div v-if="paginationInfo.isLoaded && paginationInfo.page < paginationInfo.total_pages" ref="loadMoreTrigger"
+    class="columns is-centered mt-4">
+    <div class="column is-narrow">
+      <div v-if="paginationInfo.isLoading" class="has-text-centered">
+        <span class="icon is-large has-text-info">
+          <i class="fas fa-spinner fa-pulse fa-2x"></i>
+        </span>
+        <p class="is-size-7 has-text-grey mt-2">Loading more items...</p>
+      </div>
+    </div>
+  </div>
+
+  <div class="modal is-active" v-if="video_item">
+    <div class="modal-background" @click="closeVideo"></div>
+    <div class="modal-content is-unbounded-model">
+      <VideoPlayer type="default" :isMuted="false" autoplay="true" :isControls="true" :item="video_item"
+        class="is-fullwidth" @closeModel="closeVideo" />
+    </div>
+    <button class="modal-close is-large" aria-label="close" @click="closeVideo"></button>
+  </div>
+
+  <div class="modal is-active" v-if="embed_url">
+    <div class="modal-background" @click="embed_url = ''"></div>
+    <div class="modal-content is-unbounded-model">
+      <EmbedPlayer :url="embed_url" @closeModel="embed_url = ''" />
+    </div>
+    <button class="modal-close is-large" aria-label="close" @click="embed_url = ''"></button>
+  </div>
+
+  <ConfirmDialog v-if="dialog_confirm.visible" :visible="dialog_confirm.visible" :title="dialog_confirm.title"
+    :message="dialog_confirm.message" :options="dialog_confirm.options" @confirm="dialog_confirm.confirm"
+    @cancel="() => dialog_confirm.visible = false" />
+
 </template>
+
 <script setup lang="ts">
 import moment from 'moment'
-import { useStorage } from '@vueuse/core'
+import { useStorage, useIntersectionObserver } from '@vueuse/core'
 import type { StoreItem } from '~/types/store'
 import { useConfirm } from '~/composables/useConfirm'
 
@@ -521,6 +494,7 @@ const selectedElms = ref<string[]>([])
 const masterSelectAll = ref(false)
 const embed_url = ref('')
 const video_item = ref<StoreItem | null>(null)
+const loadMoreTrigger = ref<HTMLElement | null>(null)
 const dialog_confirm = ref<{
   visible: boolean
   title: string
@@ -537,72 +511,44 @@ const dialog_confirm = ref<{
 
 const paginationInfo = computed(() => stateStore.getPagination())
 
-const route = useRoute()
-const router = useRouter()
-
-const currentPageFromUrl = computed(() => {
-  const pageParam = route.query.page
-  if (!pageParam) {
-    return 1
-  }
-  const pageStr = Array.isArray(pageParam) ? pageParam[0] : pageParam
-  if (!pageStr) {
-    return 1
-  }
-  const page = parseInt(pageStr, 10)
-  return isNaN(page) || page < 1 ? 1 : page
-})
-
-const navigateToPage = async (page: number) => {
-  if (page < 1 || page > paginationInfo.value.total_pages || paginationInfo.value.isLoading) {
+// Function to load more history items
+const loadMoreHistory = async (): Promise<void> => {
+  if (paginationInfo.value.isLoading || paginationInfo.value.page >= paginationInfo.value.total_pages) {
     return
   }
 
   try {
-    await router.push({ query: { ...route.query, page: page.toString() } })
-    await stateStore.loadPaginated('history', page, config.app.default_pagination, 'DESC')
+    await stateStore.loadPaginated('history', paginationInfo.value.page + 1, config.app.default_pagination, 'DESC', true)
   } catch (error) {
-    console.error('Failed to navigate to page:', error)
-    toast.error('Failed to load page')
+    console.error('Failed to load more history:', error)
+    toast.error('Failed to load more history')
   }
 }
 
+// Setup intersection observer for infinite scroll
+useIntersectionObserver(loadMoreTrigger, ([entry]) => {
+  if (!socket.isConnected) {
+    return
+  }
+  if (entry?.isIntersecting && !paginationInfo.value.isLoading && paginationInfo.value.page < paginationInfo.value.total_pages) {
+    loadMoreHistory()
+  }
+}, { threshold: 0.5, })
+
 watch(showCompleted, async isShown => {
   if (isShown && !paginationInfo.value.isLoaded && socket.isConnected) {
     try {
-      const pageToLoad = currentPageFromUrl.value
-      await stateStore.loadPaginated('history', pageToLoad, config.app.default_pagination, 'DESC')
+      await stateStore.loadPaginated('history', 1, config.app.default_pagination, 'DESC', true)
     } catch (error) {
       console.error('Failed to load history:', error)
     }
   }
 })
 
-watch(() => route.query.page, async newPage => {
-  if (!showCompleted.value || !paginationInfo.value.isLoaded) {
-    return
-  }
-
-  const pageStr = newPage ? (Array.isArray(newPage) ? newPage[0] : newPage) : undefined
-  const page = pageStr ? parseInt(pageStr, 10) : 1
-  if (isNaN(page) || page < 1) {
-    return
-  }
-
-  if (page !== paginationInfo.value.page) {
-    try {
-      await stateStore.loadPaginated('history', page, config.app.default_pagination, 'DESC')
-    } catch (error) {
-      console.error('Failed to load page from URL:', error)
-    }
-  }
-})
-
 onMounted(async () => {
   if (showCompleted.value && !paginationInfo.value.isLoaded && socket.isConnected) {
     try {
-      const pageToLoad = currentPageFromUrl.value
-      await stateStore.loadPaginated('history', pageToLoad, config.app.default_pagination, 'DESC')
+      await stateStore.loadPaginated('history', 1, config.app.default_pagination, 'DESC', true)
     } catch (error) {
       console.error('Failed to load history on mount:', error)
       toast.error('Failed to load history')
@@ -613,8 +559,7 @@ onMounted(async () => {
 watch(() => socket.isConnected, async connected => {
   if (connected && showCompleted.value && !paginationInfo.value.isLoaded) {
     try {
-      const pageToLoad = currentPageFromUrl.value
-      await stateStore.loadPaginated('history', pageToLoad, config.app.default_pagination, 'DESC')
+      await stateStore.loadPaginated('history', 1, config.app.default_pagination, 'DESC', true)
     } catch (error) {
       console.error('Failed to load history after socket connection:', error)
     }
diff --git a/ui/app/components/Queue.vue b/ui/app/components/Queue.vue
index 060e6da1..63482be0 100644
--- a/ui/app/components/Queue.vue
+++ b/ui/app/components/Queue.vue
@@ -1,268 +1,112 @@
 <template>
-  <h1 class="mt-3 is-size-3 is-clickable is-unselectable" @click="showQueue = !showQueue" v-if="hasQueuedItems">
-    <span class="icon-text title is-4">
-      <span class="icon">
-        <i class="fas" :class="showQueue ? 'fa-solid fa-arrow-up' : 'fa-solid fa-arrow-down'" />
-      </span>
-      <span>Queue <span v-if="hasQueuedItems">({{ filteredItems.length }})</span>
-        <span v-if="selectedElms.length > 0">&nbsp;- Selected: {{ selectedElms.length }}</span>
-      </span>
-    </span>
-  </h1>
-
-  <div v-if="showQueue">
-    <div class="columns is-multiline is-mobile has-text-centered" v-if="filteredItems.length > 0">
-      <div class="column is-half-mobile" v-if="'grid' === display_style">
-        <button type="button" class="button is-fullwidth is-ghost" @click="masterSelectAll = !masterSelectAll">
-          <span class="icon-text is-block">
-            <span class="icon">
-              <i class="fas" :class="!masterSelectAll ? 'fa-regular fa-square-check' : 'fa-regular fa-square'" />
-            </span>
-            <span v-if="!masterSelectAll">Select All</span>
-            <span v-else>Unselect All</span>
+  <div class="columns is-multiline is-mobile has-text-centered" v-if="filteredItems.length > 0">
+    <div class="column is-half-mobile">
+      <button type="button" class="button is-fullwidth is-ghost" @click="masterSelectAll = !masterSelectAll">
+        <span v-if="selectedElms.length > 0" class="mr-2 tag is-danger">
+          {{ selectedElms.length }}
+        </span>
+        <span class="icon-text is-block">
+          <span class="icon">
+            <i class="fas" :class="!masterSelectAll ? 'fa-regular fa-square-check' : 'fa-regular fa-square'" />
           </span>
-        </button>
-      </div>
-      <div class="column is-half-mobile" v-if="hasManualStart">
-        <button type="button" class="button is-fullwidth is-success" :disabled="!hasSelected" @click="startItems">
-          <span class="icon"><i class="fa-solid fa-circle-play" /></span>
-          <span>Start</span>
-        </button>
-      </div>
-      <div class="column is-half-mobile" v-if="hasPausable">
-        <button type="button" class="button is-fullwidth is-warning is-background-warning-85" :disabled="!hasSelected"
-          @click="pauseSelected">
-          <span class="icon"><i class="fa-solid fa-pause" /></span>
-          <span>Pause</span>
-        </button>
-      </div>
-      <div class="column is-half-mobile" v-if="('grid' === display_style || hasSelected)">
-        <button type="button" class="button is-fullwidth is-warning" :disabled="!hasSelected" @click="cancelSelected">
-          <span class="icon"><i class="fa-solid fa-eject" /></span>
-          <span>Cancel</span>
-        </button>
-      </div>
+          <span v-if="!masterSelectAll">Select All</span>
+          <span v-else> Unselect All</span>
+        </span>
+      </button>
     </div>
+    <div class="column is-half-mobile" v-if="hasManualStart">
+      <button type="button" class="button is-fullwidth is-success" :disabled="!hasSelected" @click="startItems">
+        <span class="icon"><i class="fa-solid fa-circle-play" /></span>
+        <span>Start</span>
+      </button>
+    </div>
+    <div class="column is-half-mobile" v-if="hasPausable">
+      <button type="button" class="button is-fullwidth is-warning is-background-warning-85" :disabled="!hasSelected"
+        @click="pauseSelected">
+        <span class="icon"><i class="fa-solid fa-pause" /></span>
+        <span>Pause</span>
+      </button>
+    </div>
+    <div class="column is-half-mobile">
+      <button type="button" class="button is-fullwidth is-warning" :disabled="!hasSelected" @click="cancelSelected">
+        <span class="icon"><i class="fa-solid fa-eject" /></span>
+        <span>Cancel</span>
+      </button>
+    </div>
+  </div>
 
-    <div class="columns is-multiline" v-if="'list' === display_style">
-      <div class="column is-12" v-if="filteredItems.length > 0">
-        <div class="table-container">
-          <table class="table is-striped is-hoverable is-fullwidth is-bordered"
-            style="min-width: 1300px; table-layout: fixed;">
-            <thead>
-              <tr class="has-text-centered is-unselectable">
-                <th width="5%" v-tooltip="masterSelectAll ? 'Unselect all' : 'Select all'">
-                  <a href="#" @click.prevent="masterSelectAll = !masterSelectAll">
-                    <span class="icon-text is-block">
-                      <span class="icon">
-                        <i class="fa-regular"
-                          :class="{ 'fa-square-check': !masterSelectAll, 'fa-square': masterSelectAll }" />
-                      </span>
+  <div class="columns is-multiline" v-if="'list' === display_style">
+    <div class="column is-12" v-if="filteredItems.length > 0">
+      <div class="table-container">
+        <table class="table is-striped is-hoverable is-fullwidth is-bordered"
+          style="min-width: 1300px; table-layout: fixed;">
+          <thead>
+            <tr class="has-text-centered is-unselectable">
+              <th width="5%" v-tooltip="masterSelectAll ? 'Unselect all' : 'Select all'">
+                <a href="#" @click.prevent="masterSelectAll = !masterSelectAll">
+                  <span class="icon-text is-block">
+                    <span class="icon">
+                      <i class="fa-regular"
+                        :class="{ 'fa-square-check': !masterSelectAll, 'fa-square': masterSelectAll }" />
                     </span>
-                  </a>
-                </th>
-                <th width="40%">Video Title</th>
-                <th width="15%">Status</th>
-                <th width="20%">Progress</th>
-                <th width="15%">Created</th>
-                <th width="10%">Actions</th>
-              </tr>
-            </thead>
-            <tbody>
-              <tr v-for="item in filteredItems" :key="item._id">
-                <td class="has-text-centered is-vcentered">
-                  <label class="checkbox is-block">
-                    <input class="completed-checkbox" type="checkbox" v-model="selectedElms"
-                      :id="'checkbox-' + item._id" :value="item._id">
-                  </label>
-                </td>
-                <td class="is-text-overflow is-vcentered">
-                  <div class="is-inline is-pulled-right" v-if="item.downloaded_bytes || item.extras?.duration">
-                    <span class="tag" v-if="item.downloaded_bytes">{{ formatBytes(item.downloaded_bytes) }}</span>
-                    <span class="tag is-info" v-if="item.extras?.duration">
-                      {{ formatTime(item.extras.duration) }}
-                    </span>
-                  </div>
-                  <div v-if="showThumbnails && item.extras?.thumbnail">
-                    <FloatingImage
-                      :image="uri('/api/thumbnail?id=' + item._id + '&url=' + encodePath(item.extras.thumbnail))"
-                      :title="item.title">
-                      <div class="is-text-overflow">
-                        <NuxtLink target="_blank" :href="item.url">{{ item.title }}</NuxtLink>
-                      </div>
-                    </FloatingImage>
-                  </div>
-                  <template v-else>
-                    <div class="is-text-overflow" v-tooltip="item.title">
-                      <NuxtLink target="_blank" :href="item.url">{{ item.title }}</NuxtLink>
-                    </div>
-                  </template>
-                </td>
-                <td class="has-text-centered is-text-overflow is-unselectable">
-                  <span class="icon" :class="setIconColor(item)">
-                    <i class="fas fa-solid" :class="setIcon(item)" />
                   </span>
-                  <span v-text="setStatus(item)" />
-                </td>
-                <td>
-                  <div class="progress-bar is-unselectable">
-                    <div class="progress-percentage">{{ updateProgress(item) }}</div>
-                    <div class="progress" :style="{ width: percentPipe(item.percent as number) + '%' }"></div>
-                  </div>
-                </td>
-                <td class="has-text-centered is-text-overflow is-unselectable">
-                  <span v-tooltip="moment(item.datetime).format('MMMM Do YYYY, h:mm:ss a')"
-                    :data-datetime="item.datetime" v-rtime="item.datetime" />
-                </td>
-                <td class="is-vcentered is-items-center">
-                  <Dropdown icons="fa-solid fa-cogs" :button_classes="'is-small'" label="Actions">
-                    <template v-if="isEmbedable(item.url)">
-                      <NuxtLink class="dropdown-item has-text-danger"
-                        @click="embed_url = getEmbedable(item.url) as string">
-                        <span class="icon"><i class="fa-solid fa-play" /></span>
-                        <span>Play video</span>
-                      </NuxtLink>
-                      <hr class="dropdown-divider" />
-                    </template>
-
-                    <NuxtLink class="dropdown-item has-text-warning" @click="confirmCancel(item);">
-                      <span class="icon"><i class="fa-solid fa-eject" /></span>
-                      <span>Cancel Download</span>
-                    </NuxtLink>
-
-                    <template v-if="!item.auto_start && !item.status">
-                      <hr class="dropdown-divider" />
-                      <NuxtLink class="dropdown-item has-text-success" @click="startItem(item)">
-                        <span class="icon"><i class="fa-solid fa-circle-play" /></span>
-                        <span>Start Download</span>
-                      </NuxtLink>
-                    </template>
-
-                    <template v-if="item.auto_start && !item.status">
-                      <hr class="dropdown-divider" />
-                      <NuxtLink class="dropdown-item has-text-warning" @click="pauseItem(item)">
-                        <span class="icon"><i class="fa-solid fa-pause" /></span>
-                        <span>Pause Download</span>
-                      </NuxtLink>
-                    </template>
-
-                    <hr class="dropdown-divider" />
-
-                    <NuxtLink class="dropdown-item" @click="emitter('getInfo', item.url, item.preset, item.cli)">
-                      <span class="icon"><i class="fa-solid fa-info" /></span>
-                      <span>yt-dlp Information</span>
-                    </NuxtLink>
-
-                    <NuxtLink class="dropdown-item" @click="emitter('getItemInfo', item._id)">
-                      <span class="icon"><i class="fa-solid fa-info-circle" /></span>
-                      <span>Local Information</span>
-                    </NuxtLink>
-                  </Dropdown>
-                </td>
-              </tr>
-            </tbody>
-          </table>
-        </div>
-      </div>
-    </div>
-
-    <div class="columns is-multiline" v-else>
-      <LateLoader :unrender="true" :min-height="showThumbnails ? 475 : 265" class="column is-6"
-        v-for="item in filteredItems" :key="item._id">
-        <div class="card">
-          <header class="card-header">
-            <div class="card-header-title is-text-overflow is-block" v-tooltip="item.title">
-              <NuxtLink target="_blank" :href="item.url">{{ item.title }}</NuxtLink>
-            </div>
-            <div class="card-header-icon">
-              <div class="field is-grouped">
-
-                <div class="control">
+                </a>
+              </th>
+              <th width="40%">Video Title</th>
+              <th width="15%">Status</th>
+              <th width="20%">Progress</th>
+              <th width="15%">Created</th>
+              <th width="10%">Actions</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr v-for="item in filteredItems" :key="item._id">
+              <td class="has-text-centered is-vcentered">
+                <label class="checkbox is-block">
+                  <input class="completed-checkbox" type="checkbox" v-model="selectedElms" :id="'checkbox-' + item._id"
+                    :value="item._id">
+                </label>
+              </td>
+              <td class="is-text-overflow is-vcentered">
+                <div class="is-inline is-pulled-right" v-if="item.downloaded_bytes || item.extras?.duration">
+                  <span class="tag" v-if="item.downloaded_bytes">{{ formatBytes(item.downloaded_bytes) }}</span>
                   <span class="tag is-info" v-if="item.extras?.duration">
                     {{ formatTime(item.extras.duration) }}
                   </span>
                 </div>
-                <div class="control">
-                  <button @click="hideThumbnail = !hideThumbnail" v-if="thumbnails">
-                    <span class="icon"><i class="fa-solid"
-                        :class="{ 'fa-arrow-down': hideThumbnail, 'fa-arrow-up': !hideThumbnail }" /></span>
-                  </button>
+                <div v-if="showThumbnails && item.extras?.thumbnail">
+                  <FloatingImage
+                    :image="uri('/api/thumbnail?id=' + item._id + '&url=' + encodePath(item.extras.thumbnail))"
+                    :title="item.title">
+                    <div class="is-text-overflow">
+                      <NuxtLink target="_blank" :href="item.url">{{ item.title }}</NuxtLink>
+                    </div>
+                  </FloatingImage>
                 </div>
-                <div class="control">
-                  <label class="checkbox is-block">
-                    <input class="completed-checkbox" type="checkbox" v-model="selectedElms"
-                      :id="'checkbox-' + item._id" :value="item._id">
-                  </label>
-                </div>
-              </div>
-            </div>
-          </header>
-          <div v-if="showThumbnails" class="card-image">
-            <figure :class="['image', thumbnail_ratio]">
-              <span v-if="isEmbedable(item.url)" @click="embed_url = getEmbedable(item.url) as string"
-                class="play-overlay">
-                <div class="play-icon embed-icon"></div>
-                <img @load="(e: Event) => pImg(e)"
-                  :src="uri('/api/thumbnail?id=' + item._id + '&url=' + encodePath(item.extras.thumbnail))"
-                  v-if="item.extras?.thumbnail" />
-                <img v-else src="/images/placeholder.png" />
-              </span>
-              <template v-else>
-                <img @load="(e: Event) => pImg(e)" v-if="item.extras?.thumbnail"
-                  :src="uri('/api/thumbnail?id=' + item._id + '&url=' + encodePath(item.extras.thumbnail))" />
-                <img v-else src="/images/placeholder.png" />
-              </template>
-            </figure>
-          </div>
-          <div class="card-content">
-            <div class="columns is-multiline is-mobile">
-              <div class="column is-12">
-                <div class="progress-bar is-unselectable">
-                  <div class="progress-percentage">{{ updateProgress(item) }}</div>
-                  <div class="progress" :style="{ width: percentPipe(item.percent as number) + '%' }"></div>
-                </div>
-              </div>
-              <div class="column is-half-mobile has-text-centered is-text-overflow is-unselectable">
+                <template v-else>
+                  <div class="is-text-overflow" v-tooltip="item.title">
+                    <NuxtLink target="_blank" :href="item.url">{{ item.title }}</NuxtLink>
+                  </div>
+                </template>
+              </td>
+              <td class="has-text-centered is-text-overflow is-unselectable">
                 <span class="icon" :class="setIconColor(item)">
                   <i class="fas fa-solid" :class="setIcon(item)" />
                 </span>
                 <span v-text="setStatus(item)" />
-              </div>
-              <div class="column is-half-mobile has-text-centered is-text-overflow is-unselectable">
-                <span class="icon"><i class="fa-solid fa-sliders" /></span>
-                <span v-tooltip="`Preset: ${item.preset}`" class="user-hint">{{ item.preset }}</span>
-              </div>
-              <div class="column is-half-mobile has-text-centered is-text-overflow is-unselectable">
+              </td>
+              <td>
+                <div class="progress-bar is-unselectable">
+                  <div class="progress-percentage">{{ updateProgress(item) }}</div>
+                  <div class="progress" :style="{ width: percentPipe(item.percent as number) + '%' }"></div>
+                </div>
+              </td>
+              <td class="has-text-centered is-text-overflow is-unselectable">
                 <span v-tooltip="moment(item.datetime).format('MMMM Do YYYY, h:mm:ss a')" :data-datetime="item.datetime"
                   v-rtime="item.datetime" />
-              </div>
-              <div class="column is-half-mobile has-text-centered is-text-overflow is-unselectable"
-                v-if="item.downloaded_bytes" v-tooltip="`Saving to: ${makePath(item)}`">
-                {{ formatBytes(item.downloaded_bytes) }}
-              </div>
-
-            </div>
-            <div class="columns is-multiline is-mobile">
-              <div class="column is-half-mobile">
-                <button class="button is-warning is-fullwidth" @click="confirmCancel(item);">
-                  <span class="icon"><i class="fa-solid fa-eject" /></span>
-                  <span>Cancel</span>
-                </button>
-              </div>
-              <div class="column is-half-mobile" v-if="!item.auto_start && !item.status">
-                <button class="button is-success is-fullwidth" @click="startItem(item)">
-                  <span class="icon"><i class="fa-solid fa-circle-play" /></span>
-                  <span>Start</span>
-                </button>
-              </div>
-              <div class="column is-half-mobile" v-if="item.auto_start && !item.status">
-                <button class="button is-warning is-background-warning-85 is-fullwidth" @click="pauseItem(item)">
-                  <span class="icon"><i class="fa-solid fa-pause" /></span>
-                  <span>Pause</span>
-                </button>
-              </div>
-              <div class="column is-half-mobile">
-                <Dropdown icons="fa-solid fa-cogs" label="Actions">
+              </td>
+              <td class="is-vcentered is-items-center">
+                <Dropdown icons="fa-solid fa-cogs" :button_classes="'is-small'" label="Actions">
                   <template v-if="isEmbedable(item.url)">
                     <NuxtLink class="dropdown-item has-text-danger"
                       @click="embed_url = getEmbedable(item.url) as string">
@@ -272,6 +116,29 @@
                     <hr class="dropdown-divider" />
                   </template>
 
+                  <NuxtLink class="dropdown-item has-text-warning" @click="confirmCancel(item);">
+                    <span class="icon"><i class="fa-solid fa-eject" /></span>
+                    <span>Cancel Download</span>
+                  </NuxtLink>
+
+                  <template v-if="!item.auto_start && !item.status">
+                    <hr class="dropdown-divider" />
+                    <NuxtLink class="dropdown-item has-text-success" @click="startItem(item)">
+                      <span class="icon"><i class="fa-solid fa-circle-play" /></span>
+                      <span>Start Download</span>
+                    </NuxtLink>
+                  </template>
+
+                  <template v-if="item.auto_start && !item.status">
+                    <hr class="dropdown-divider" />
+                    <NuxtLink class="dropdown-item has-text-warning" @click="pauseItem(item)">
+                      <span class="icon"><i class="fa-solid fa-pause" /></span>
+                      <span>Pause Download</span>
+                    </NuxtLink>
+                  </template>
+
+                  <hr class="dropdown-divider" />
+
                   <NuxtLink class="dropdown-item" @click="emitter('getInfo', item.url, item.preset, item.cli)">
                     <span class="icon"><i class="fa-solid fa-info" /></span>
                     <span>yt-dlp Information</span>
@@ -282,30 +149,156 @@
                     <span>Local Information</span>
                   </NuxtLink>
                 </Dropdown>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </div>
+  </div>
+
+  <div class="columns is-multiline" v-else>
+    <LateLoader :unrender="true" :min-height="showThumbnails ? 475 : 265" class="column is-6"
+      v-for="item in filteredItems" :key="item._id">
+      <div class="card">
+        <header class="card-header">
+          <div class="card-header-title is-text-overflow is-block" v-tooltip="item.title">
+            <NuxtLink target="_blank" :href="item.url">{{ item.title }}</NuxtLink>
+          </div>
+          <div class="card-header-icon">
+            <div class="field is-grouped">
+
+              <div class="control">
+                <span class="tag is-info" v-if="item.extras?.duration">
+                  {{ formatTime(item.extras.duration) }}
+                </span>
+              </div>
+              <div class="control">
+                <button @click="hideThumbnail = !hideThumbnail" v-if="thumbnails">
+                  <span class="icon"><i class="fa-solid"
+                      :class="{ 'fa-arrow-down': hideThumbnail, 'fa-arrow-up': !hideThumbnail }" /></span>
+                </button>
+              </div>
+              <div class="control">
+                <label class="checkbox is-block">
+                  <input class="completed-checkbox" type="checkbox" v-model="selectedElms" :id="'checkbox-' + item._id"
+                    :value="item._id">
+                </label>
               </div>
             </div>
           </div>
+        </header>
+        <div v-if="showThumbnails" class="card-image">
+          <figure :class="['image', thumbnail_ratio]">
+            <span v-if="isEmbedable(item.url)" @click="embed_url = getEmbedable(item.url) as string"
+              class="play-overlay">
+              <div class="play-icon embed-icon"></div>
+              <img @load="(e: Event) => pImg(e)"
+                :src="uri('/api/thumbnail?id=' + item._id + '&url=' + encodePath(item.extras.thumbnail))"
+                v-if="item.extras?.thumbnail" />
+              <img v-else src="/images/placeholder.png" />
+            </span>
+            <template v-else>
+              <img @load="(e: Event) => pImg(e)" v-if="item.extras?.thumbnail"
+                :src="uri('/api/thumbnail?id=' + item._id + '&url=' + encodePath(item.extras.thumbnail))" />
+              <img v-else src="/images/placeholder.png" />
+            </template>
+          </figure>
         </div>
-      </LateLoader>
-    </div>
+        <div class="card-content">
+          <div class="columns is-multiline is-mobile">
+            <div class="column is-12">
+              <div class="progress-bar is-unselectable">
+                <div class="progress-percentage">{{ updateProgress(item) }}</div>
+                <div class="progress" :style="{ width: percentPipe(item.percent as number) + '%' }"></div>
+              </div>
+            </div>
+            <div class="column is-half-mobile has-text-centered is-text-overflow is-unselectable">
+              <span class="icon" :class="setIconColor(item)">
+                <i class="fas fa-solid" :class="setIcon(item)" />
+              </span>
+              <span v-text="setStatus(item)" />
+            </div>
+            <div class="column is-half-mobile has-text-centered is-text-overflow is-unselectable">
+              <span class="icon"><i class="fa-solid fa-sliders" /></span>
+              <span v-tooltip="`Preset: ${item.preset}`" class="user-hint">{{ item.preset }}</span>
+            </div>
+            <div class="column is-half-mobile has-text-centered is-text-overflow is-unselectable">
+              <span v-tooltip="moment(item.datetime).format('MMMM Do YYYY, h:mm:ss a')" :data-datetime="item.datetime"
+                v-rtime="item.datetime" />
+            </div>
+            <div class="column is-half-mobile has-text-centered is-text-overflow is-unselectable"
+              v-if="item.downloaded_bytes" v-tooltip="`Saving to: ${makePath(item)}`">
+              {{ formatBytes(item.downloaded_bytes) }}
+            </div>
 
-    <div class="columns is-multiline" v-if="hasQueuedItems && filteredItems.length < 1 && query">
-      <div class="column is-12">
-        <Message message_class="has-background-warning-90 has-text-dark" title="No results for queued items"
-          icon="fas fa-search" :useClose="true" @close="() => emitter('clear_search')" v-if="query">
-          <span class="is-block">No results found for '<span class="is-underlined is-bold">{{ query }}</span>'.</span>
-        </Message>
-      </div>
-    </div>
+          </div>
+          <div class="columns is-multiline is-mobile">
+            <div class="column is-half-mobile">
+              <button class="button is-warning is-fullwidth" @click="confirmCancel(item);">
+                <span class="icon"><i class="fa-solid fa-eject" /></span>
+                <span>Cancel</span>
+              </button>
+            </div>
+            <div class="column is-half-mobile" v-if="!item.auto_start && !item.status">
+              <button class="button is-success is-fullwidth" @click="startItem(item)">
+                <span class="icon"><i class="fa-solid fa-circle-play" /></span>
+                <span>Start</span>
+              </button>
+            </div>
+            <div class="column is-half-mobile" v-if="item.auto_start && !item.status">
+              <button class="button is-warning is-background-warning-85 is-fullwidth" @click="pauseItem(item)">
+                <span class="icon"><i class="fa-solid fa-pause" /></span>
+                <span>Pause</span>
+              </button>
+            </div>
+            <div class="column is-half-mobile">
+              <Dropdown icons="fa-solid fa-cogs" label="Actions">
+                <template v-if="isEmbedable(item.url)">
+                  <NuxtLink class="dropdown-item has-text-danger" @click="embed_url = getEmbedable(item.url) as string">
+                    <span class="icon"><i class="fa-solid fa-play" /></span>
+                    <span>Play video</span>
+                  </NuxtLink>
+                  <hr class="dropdown-divider" />
+                </template>
 
-    <div class="modal is-active" v-if="embed_url">
-      <div class="modal-background" @click="embed_url = ''"></div>
-      <div class="modal-content is-unbounded-model">
-        <EmbedPlayer :url="embed_url" @closeModel="embed_url = ''" />
+                <NuxtLink class="dropdown-item" @click="emitter('getInfo', item.url, item.preset, item.cli)">
+                  <span class="icon"><i class="fa-solid fa-info" /></span>
+                  <span>yt-dlp Information</span>
+                </NuxtLink>
+
+                <NuxtLink class="dropdown-item" @click="emitter('getItemInfo', item._id)">
+                  <span class="icon"><i class="fa-solid fa-info-circle" /></span>
+                  <span>Local Information</span>
+                </NuxtLink>
+              </Dropdown>
+            </div>
+          </div>
+        </div>
       </div>
-      <button class="modal-close is-large" aria-label="close" @click="embed_url = ''"></button>
+    </LateLoader>
+  </div>
+
+  <div class="columns is-multiline" v-if="filteredItems.length < 1">
+    <div class="column is-12">
+      <Message message_class="is-warning" title="Filter results" :newStyle="true" icon="fas fa-search" :useClose="true"
+        @close="() => emitter('clear_search')" v-if="query">
+        <span class="is-block">No results found for '<span class="is-underlined is-bold">{{ query }}</span>'.</span>
+      </Message>
+      <Message message_class="is-info" title="No items" icon="fas fa-clock" :useClose="false" :newStyle="true"
+        v-else>
+        <p>The download queue is empty.</p>
+      </Message>
     </div>
   </div>
+
+  <div class="modal is-active" v-if="embed_url">
+    <div class="modal-background" @click="embed_url = ''"></div>
+    <div class="modal-content is-unbounded-model">
+      <EmbedPlayer :url="embed_url" @closeModel="embed_url = ''" />
+    </div>
+    <button class="modal-close is-large" aria-label="close" @click="embed_url = ''"></button>
+  </div>
 </template>
 
 <script setup lang="ts">
@@ -331,7 +324,6 @@ const socket = useSocketStore()
 const box = useConfirm()
 const toast = useNotification()
 
-const showQueue = useStorage('showQueue', true)
 const hideThumbnail = useStorage('hideThumbnailQueue', false)
 const display_style = useStorage('display_style', 'grid')
 const bg_enable = useStorage('random_bg', true)
@@ -363,7 +355,6 @@ const filteredItems = computed<StoreItem[]>(() => {
 })
 
 const hasSelected = computed(() => 0 < selectedElms.value.length)
-const hasQueuedItems = computed(() => 0 < stateStore.count('queue'))
 const hasManualStart = computed(() => {
   if (0 > stateStore.count('queue')) {
     return false
diff --git a/ui/app/components/Simple.vue b/ui/app/components/Simple.vue
index fa5a7d75..acfb4469 100644
--- a/ui/app/components/Simple.vue
+++ b/ui/app/components/Simple.vue
@@ -4,7 +4,7 @@
       <section class="download-form box">
         <form class="download-form__body" autocomplete="off" @submit.prevent="addDownload">
           <label class="label" for="download-url">
-            What you would like to download?
+            {{ greetingMessage }}
             <span class="is-pulled-right">
               <span class="icon is-pointer" :class="connectionStatusColor" @click="$emit('show_settings')"
                 v-tooltip="'WebUI Settings'">
@@ -175,6 +175,16 @@
             </article>
           </div>
         </TransitionGroup>
+
+        <div v-if="paginationInfo.isLoaded && paginationInfo.page < paginationInfo.total_pages" ref="loadMoreTrigger"
+          class="columns is-centered mt-4">
+          <div class="column is-narrow">
+            <div v-if="paginationInfo.isLoading" class="has-text-centered">
+              <span class="icon is-large has-text-info"><i class="fas fa-spinner fa-pulse fa-2x" /></span>
+              <p class="is-size-7 has-text-grey mt-2">Loading more items...</p>
+            </div>
+          </div>
+        </div>
       </section>
     </Transition>
 
@@ -199,9 +209,9 @@
 </template>
 
 <script setup lang="ts">
-import { computed, ref } from 'vue'
+import { computed, onMounted, ref, watch } from 'vue'
 import { storeToRefs } from 'pinia'
-import { useStorage } from '@vueuse/core'
+import { useStorage, useIntersectionObserver } from '@vueuse/core'
 import type { item_request } from '~/types/item'
 import type { ItemStatus, StoreItem } from '~/types/store'
 import { useNotification } from '~/composables/useNotification'
@@ -224,6 +234,7 @@ const { queue, history } = storeToRefs(stateStore)
 
 const embedUrl = ref<string>('')
 const videoItem = ref<StoreItem | null>(null)
+const loadMoreTrigger = ref<HTMLElement | null>(null)
 
 const formUrl = ref<string>('')
 const formPreset = ref<{ preset: string }>({ preset: app.value.default_preset || '' })
@@ -236,6 +247,7 @@ const sortByNewest = (items: StoreItem[]): StoreItem[] => items.slice().sort((a,
 
 const queueItems = computed<StoreItem[]>(() => sortByNewest(Object.values(queue.value ?? {})))
 const historyEntries = computed<StoreItem[]>(() => sortByNewest(Object.values(history.value ?? {})))
+const paginationInfo = computed(() => stateStore.getPagination())
 
 const downloadingStatuses: ReadonlySet<ItemStatus | null> = new Set(['downloading', 'postprocessing', 'preparing'])
 
@@ -255,6 +267,24 @@ const displayItems = computed<DisplayEntry[]>(() => [
 const hasActiveQueue = computed<boolean>(() => queueItems.value.length > 0)
 const hasAnyItems = computed<boolean>(() => hasActiveQueue.value || historyEntries.value.length > 0)
 const shouldCenterForm = computed<boolean>(() => 0 === queueItems.value.length && 0 === historyEntries.value.length)
+const DEFAULT_PAGE_SIZE = 12
+
+const greetingMessage = computed<string>(() => {
+  const hour = new Date().getHours()
+  let greeting = ''
+
+  if (hour >= 5 && hour < 12) {
+    greeting = 'Good morning'
+  } else if (hour >= 12 && hour < 17) {
+    greeting = 'Good afternoon'
+  } else if (hour >= 17 && hour < 21) {
+    greeting = 'Good evening'
+  } else {
+    greeting = 'Hello'
+  }
+
+  return `${greeting}, what would you like to download?`
+})
 
 const addDownload = async (): Promise<void> => {
   const url = formUrl.value.trim()
@@ -617,6 +647,59 @@ const connectionStatusColor = computed(() => {
   }
 })
 
+// Load history via API on mount
+onMounted(async () => {
+  if (socketStore.isConnected && !paginationInfo.value.isLoaded) {
+    try {
+      await stateStore.loadPaginated('history', 1, DEFAULT_PAGE_SIZE, 'DESC')
+    } catch (error) {
+      console.error('Failed to load history on mount:', error)
+    }
+  }
+
+  if (window?.location && '/' !== window.location.pathname) {
+    window.history.replaceState({}, '', '/')
+  }
+})
+
+// Reload history when socket reconnects
+watch(() => socketStore.isConnected, async (connected) => {
+  if (connected && !paginationInfo.value.isLoaded) {
+    try {
+      await stateStore.loadPaginated('history', 1, DEFAULT_PAGE_SIZE, 'DESC')
+    } catch (error) {
+      console.error('Failed to load history after socket connection:', error)
+    }
+  }
+})
+
+// Function to load more history items
+const loadMoreHistory = async (): Promise<void> => {
+  if (paginationInfo.value.isLoading || paginationInfo.value.page >= paginationInfo.value.total_pages) {
+    return
+  }
+
+  try {
+    await stateStore.loadPaginated('history', paginationInfo.value.page + 1, DEFAULT_PAGE_SIZE, 'DESC', true)
+  } catch (error) {
+    console.error('Failed to load more history:', error)
+    toast.error('Failed to load more history')
+  }
+}
+
+// Setup intersection observer for infinite scroll
+useIntersectionObserver(
+  loadMoreTrigger,
+  ([entry]) => {
+    if (entry?.isIntersecting && !paginationInfo.value.isLoading && paginationInfo.value.page < paginationInfo.value.total_pages) {
+      loadMoreHistory()
+    }
+  },
+  {
+    threshold: 0.5,
+  }
+)
+
 </script>
 
 <style scoped>
diff --git a/ui/app/layouts/default.vue b/ui/app/layouts/default.vue
index 2e8a2e49..f7d3a01f 100644
--- a/ui/app/layouts/default.vue
+++ b/ui/app/layouts/default.vue
@@ -20,7 +20,8 @@
             <div class="card-content">
               <div class="columns is-multiline">
                 <div class="column is-12">
-                  <settings v-if="show_settings" :isLoading="loadingImage" @reload_bg="() => loadImage(true)" />
+                  <settings v-if="show_settings" :isLoading="loadingImage" @reload_bg="() => loadImage(true)"
+                    @close="closeSettings()" />
                 </div>
               </div>
             </div>
@@ -162,12 +163,16 @@
               connection is functional.
             </span>
           </p>
-          <p v-if="socket.error" class="has-text-danger">
-            <span class="icon-text">
-              <span class="icon"><i class="fas fa-triangle-exclamation" /></span>
-              {{ socket.error }}. Check the developer console for more information.
-            </span>
-          </p>
+          <template v-if="socket.error">
+            <hr>
+            <p class="has-text-danger">
+              <span class="icon-text">
+                <span class="icon"><i class="fas fa-triangle-exclamation" /></span>
+                <span class="tag is-danger">{{ socket.error_count }}</span>
+                {{ socket.error }}. Check the developer console for more information.
+              </span>
+            </p>
+          </template>
         </Message>
         <Markdown @closeModel="() => doc.file = ''" :file="doc.file" v-if="doc.file" />
         <ClientOnly>
diff --git a/ui/app/pages/index.vue b/ui/app/pages/index.vue
index a14fd5c1..237a3266 100644
--- a/ui/app/pages/index.vue
+++ b/ui/app/pages/index.vue
@@ -38,7 +38,7 @@
             <p class="control">
               <button class="button is-primary has-tooltip-bottom" @click="config.showForm = !config.showForm">
                 <span class="icon"><i class="fa-solid fa-plus" /></span>
-                <span v-if="!isMobile">New Download</span>
+                <span v-if="!isMobile">Add</span>
               </button>
             </p>
 
@@ -62,17 +62,45 @@
       </div>
     </div>
 
-    <NewDownload v-if="config.showForm"
-      @getInfo="(url: string, preset: string = '', cli: string = '') => view_info(url, false, preset, cli)"
-      :item="item_form" @clear_form="item_form = {}" />
-    <Queue @getInfo="(url: string, preset: string = '', cli: string = '') => view_info(url, false, preset, cli)"
-      :thumbnails="show_thumbnail" :query="query" @getItemInfo="(id: string) => view_info(`/api/history/${id}`, true)"
-      @clear_search="query = ''" />
-    <History @getInfo="(url: string, preset: string = '', cli: string = '') => view_info(url, false, preset, cli)"
-      @add_new="(item: Partial<StoreItem>) => toNewDownload(item)" :query="query" :thumbnails="show_thumbnail"
-      @getItemInfo="(id: string) => view_info(`/api/history/${id}`, true)" @clear_search="query = ''" />
+    <NewDownload v-if="config.showForm" :item="item_form" @clear_form="item_form = {}"
+      @getInfo="(url: string, preset: string = '', cli: string = '') => view_info(url, false, preset, cli)" />
+
+    <div class="tabs is-boxed is-medium">
+      <ul>
+        <li :class="{ 'is-active': activeTab === 'queue' }">
+          <a @click="setActiveTab('queue')">
+            <span class="icon is-small"><i class="fas fa-clock" aria-hidden="true"></i></span>
+            <span>Queue</span>
+            <span class="tag is-info is-rounded is-bold ml-2">{{ queueCount }}</span>
+          </a>
+        </li>
+        <li :class="{ 'is-active': activeTab === 'history' }">
+          <a @click="setActiveTab('history')">
+            <span class="icon is-small"><i class="fas fa-history" aria-hidden="true"></i></span>
+            <span>History</span>
+            <span class="tag is-primary is-rounded is-bold ml-2">{{ historyCount }}</span>
+          </a>
+        </li>
+      </ul>
+    </div>
+
+    <div class="tab-content">
+      <div v-show="'queue' === activeTab">
+        <Queue @getInfo="(url: string, preset: string = '', cli: string = '') => view_info(url, false, preset, cli)"
+          :thumbnails="show_thumbnail" :query="query"
+          @getItemInfo="(id: string) => view_info(`/api/history/${id}`, true)" @clear_search="query = ''" />
+      </div>
+
+      <div v-show="'history' === activeTab">
+        <History @getInfo="(url: string, preset: string = '', cli: string = '') => view_info(url, false, preset, cli)"
+          @add_new="(item: Partial<StoreItem>) => toNewDownload(item)" :query="query" :thumbnails="show_thumbnail"
+          @getItemInfo="(id: string) => view_info(`/api/history/${id}`, true)" @clear_search="query = ''" />
+      </div>
+    </div>
+
     <GetInfo v-if="info_view.url" :link="info_view.url" :preset="info_view.preset" :cli="info_view.cli"
       :useUrl="info_view.useUrl" @closeModel="close_info()" />
+
     <ConfirmDialog v-if="dialog_confirm.visible" :visible="dialog_confirm.visible" :title="dialog_confirm.title"
       :html_message="dialog_confirm.html_message" :options="dialog_confirm.options" @confirm="dialog_confirm.confirm"
       @cancel="() => dialog_confirm.visible = false" />
@@ -87,6 +115,9 @@ import type { StoreItem } from '~/types/store'
 const config = useConfigStore()
 const stateStore = useStateStore()
 const socket = useSocketStore()
+const route = useRoute()
+const router = useRouter()
+
 const bg_enable = useStorage<boolean>('random_bg', true)
 const bg_opacity = useStorage<number>('random_bg_opacity', 0.95)
 const display_style = useStorage<string>('display_style', 'grid')
@@ -110,6 +141,35 @@ const dialog_confirm = ref({
   options: [],
 })
 
+// Tab management with URL state
+type TabType = 'queue' | 'history'
+
+const activeTab = ref<TabType>('queue')
+
+const getInitialTab = (): TabType => {
+  const tabParam = route.query.tab as string
+  return (tabParam === 'queue' || tabParam === 'history') ? tabParam : 'queue'
+}
+
+const setActiveTab = async (tab: TabType): Promise<void> => {
+  activeTab.value = tab
+  await router.push({ query: { ...route.query, tab }, replace: true })
+}
+
+watch(() => route.query.tab, (newTab) => {
+  if (!['queue', 'history'].includes(newTab as string)) {
+    return
+  }
+  activeTab.value = newTab as TabType
+})
+
+onMounted(() => {
+  activeTab.value = getInitialTab()
+  useHead({ title: getTitle() })
+})
+
+const queueCount = computed(() => stateStore.count('queue'))
+const historyCount = computed(() => stateStore.count('history'))
 
 watch(toggleFilter, () => {
   if (!toggleFilter.value) {
@@ -124,8 +184,6 @@ const getTitle = (): string => {
   return `YTPTube: ( ${Object.keys(stateStore.queue).length || 0}/${config.app.max_workers}:${config.app.max_workers_per_extractor} | ${Object.keys(stateStore.history).length || 0} )`
 }
 
-onMounted(() => useHead({ title: getTitle() }))
-
 watch(() => stateStore.history, () => {
   if (!config.app.ui_update_title) {
     return
diff --git a/ui/app/pages/settings.vue b/ui/app/pages/settings.vue
index 5dca788b..08b0e65d 100644
--- a/ui/app/pages/settings.vue
+++ b/ui/app/pages/settings.vue
@@ -32,7 +32,6 @@
         </div>
       </div>
 
-
       <span class="field title is-4">
         <span class="icon-text">
           <span class="icon"><i class="fas fa-palette" /></span>
@@ -300,7 +299,7 @@ import { useNotification } from '~/composables/useNotification'
 import type { notificationTarget } from '~/composables/useNotification'
 
 defineProps<{ isLoading: boolean }>()
-defineEmits<{ (e: 'reload_bg'): void }>()
+const emitter = defineEmits<{ (e: 'reload_bg' | 'close'): void }>()
 
 const config = useConfigStore()
 const notification = useNotification()
@@ -335,4 +334,6 @@ const onNotificationTargetChange = async (): Promise<void> => {
     }
   }
 }
+
+watch(simpleMode, async () => emitter('close'))
 </script>
diff --git a/ui/app/stores/ConfigStore.ts b/ui/app/stores/ConfigStore.ts
index 8e35974f..b9cbda0a 100644
--- a/ui/app/stores/ConfigStore.ts
+++ b/ui/app/stores/ConfigStore.ts
@@ -3,7 +3,7 @@ import type { ConfigState } from '~/types/config';
 
 export const useConfigStore = defineStore('config', () => {
   const state = reactive<ConfigState>({
-    showForm: useStorage('showForm', false),
+    showForm: useStorage('showForm', true),
     app: {
       download_path: '/downloads',
       remove_files: false,
diff --git a/ui/app/stores/SocketStore.ts b/ui/app/stores/SocketStore.ts
index 541d84d9..bb7dfc81 100644
--- a/ui/app/stores/SocketStore.ts
+++ b/ui/app/stores/SocketStore.ts
@@ -14,6 +14,7 @@ export const useSocketStore = defineStore('socket', () => {
   const isConnected = ref<boolean>(false)
   const connectionStatus = ref<connectionStatus>('disconnected')
   const error = ref<string | null>(null)
+  const error_count = ref<number>(0)
 
   const emit = (event: string, data?: any): any => socket.value?.emit(event, data)
   const on = (event: string | string[], callback: (...args: any[]) => void, withEvent: boolean = false) => {
@@ -52,7 +53,7 @@ export const useSocketStore = defineStore('socket', () => {
 
   const connect = () => {
     const opts = {
-      transports: ['polling', 'websocket'],
+      transports: ['websocket', 'polling'],
       withCredentials: true,
       reconnection: true,
       reconnectionAttempts: 50,
@@ -80,6 +81,7 @@ export const useSocketStore = defineStore('socket', () => {
         return;
       }
       error.value = `Connection error: ${e.type || 'Unknown'}: ${e.message || 'Unknown error'}`;
+      error_count.value += 1
     });
 
 
@@ -87,6 +89,7 @@ export const useSocketStore = defineStore('socket', () => {
       isConnected.value = true
       connectionStatus.value = 'connected';
       error.value = null;
+      error_count.value = 0
     });
 
     on('disconnect', () => {
@@ -240,5 +243,6 @@ export const useSocketStore = defineStore('socket', () => {
     getSessionId,
     connectionStatus: readonly(connectionStatus) as Readonly<Ref<connectionStatus>>,
     error: readonly(error) as Readonly<Ref<string | null>>,
+    error_count: readonly(error_count) as Readonly<Ref<number>>,
   };
 });
diff --git a/ui/app/stores/StateStore.ts b/ui/app/stores/StateStore.ts
index 258ff2c0..06e131c0 100644
--- a/ui/app/stores/StateStore.ts
+++ b/ui/app/stores/StateStore.ts
@@ -37,6 +37,9 @@ export const useStateStore = defineStore('state', () => {
   })
 
   const add = (type: StateType, key: KeyType, value: StoreItem): void => {
+    if ('history' === type && state.pagination.total > 0) {
+      state.pagination.total += 1
+    }
     state[type][key] = value
   }
 
@@ -45,6 +48,10 @@ export const useStateStore = defineStore('state', () => {
   }
 
   const remove = (type: StateType, key: KeyType): void => {
+    if ('history' === type && state.pagination.total > 0) {
+      state.pagination.total -= 1
+    }
+
     if (state[type][key]) {
       const { [key]: _, ...rest } = state[type]
       state[type] = rest
@@ -77,11 +84,11 @@ export const useStateStore = defineStore('state', () => {
   }
 
   const move = (fromType: StateType, toType: StateType, key: KeyType): void => {
-    if (state[fromType][key]) {
-      state[toType][key] = state[fromType][key]
-      const { [key]: _, ...rest } = state[fromType]
-      state[fromType] = rest
+    if (true === has(fromType, key)) {
+      remove(fromType, key)
     }
+
+    add(toType, key, get(fromType, key, {} as StoreItem) as StoreItem)
   }
 
   const count = (type: StateType): number => {
@@ -91,7 +98,7 @@ export const useStateStore = defineStore('state', () => {
     return Object.keys(state[type]).length
   }
 
-  const loadPaginated = async (type: StateType, page: number = 1, per_page: number = 50, order: 'ASC' | 'DESC' = 'DESC'): Promise<void> => {
+  const loadPaginated = async (type: StateType, page: number = 1, per_page: number = 50, order: 'ASC' | 'DESC' = 'DESC', append: boolean = false): Promise<void> => {
     if ('history' !== type) {
       throw new Error('Pagination is only supported for history type');
     }
@@ -110,7 +117,8 @@ export const useStateStore = defineStore('state', () => {
         for (const item of data.items || []) {
           items[item._id] = item
         }
-        state[type] = items
+
+        state[type] = append ? { ...state[type], ...items } : items
       }
     } catch (error) {
       console.error(`Failed to load ${type} page ${page}:`, error)
@@ -118,7 +126,7 @@ export const useStateStore = defineStore('state', () => {
     }
   }
 
-  const loadNextPage = async (type: StateType): Promise<void> => {
+  const loadNextPage = async (type: StateType, append: boolean = false): Promise<void> => {
     if ('history' !== type) {
       throw new Error('Pagination is only supported for history type');
     }
@@ -127,7 +135,7 @@ export const useStateStore = defineStore('state', () => {
       return
     }
 
-    await loadPaginated(type, state.pagination.page + 1, state.pagination.per_page)
+    await loadPaginated(type, state.pagination.page + 1, state.pagination.per_page, 'DESC', append)
   }
 
   const loadPreviousPage = async (type: StateType): Promise<void> => {

From 58ccab336578921efc912f4f426bc8b863a89175 Mon Sep 17 00:00:00 2001
From: arabcoders <admin@arabcoders.org>
Date: Sat, 15 Nov 2025 21:51:28 +0300
Subject: [PATCH 2/3] add support for embedding google drive

---
 .vscode/settings.json     | 1 +
 ui/app/utils/embedable.ts | 5 +++++
 2 files changed, 6 insertions(+)

diff --git a/.vscode/settings.json b/.vscode/settings.json
index 6dd830fe..d05959ce 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -84,6 +84,7 @@
     "gibibytes",
     "gitea",
     "gitpython",
+    "googledrive",
     "gpac",
     "hiddenimports",
     "hookspath",
diff --git a/ui/app/utils/embedable.ts b/ui/app/utils/embedable.ts
index 52e6c2fd..d406349c 100644
--- a/ui/app/utils/embedable.ts
+++ b/ui/app/utils/embedable.ts
@@ -70,6 +70,11 @@ const sources: EmbedSource[] = [
     url: "https://player.bilibili.com/player.html?aid=12569853&bvid={id}&cid=20681553&p=1&high_quality=1",
     regex: /^https?:\/\/(?:www\.)?bilibili\.com\/video\/(?<id>BV[0-9A-Za-z]+)\/?/i,
   },
+  {
+    name: "googledrive",
+    url: "https://drive.google.com/file/d/{id}/preview",
+    regex: /https?:\/\/(?:www\.)?drive\.google\.com\/file\/d\/(?<id>[^/?#&]+)/,
+  },
 ]
 
 const isEmbedable = (url: string): boolean => sources.some(source => source.regex.test(url))

From 9ea8b639f0033346741f9b5b672c8d1cbe63e5a5 Mon Sep 17 00:00:00 2001
From: arabcoders <admin@arabcoders.org>
Date: Sat, 15 Nov 2025 22:04:45 +0300
Subject: [PATCH 3/3] Refactor: Add --no-continue as toggle option

---
 ui/app/components/NewDownload.vue | 22 +++++++++++++---------
 1 file changed, 13 insertions(+), 9 deletions(-)

diff --git a/ui/app/components/NewDownload.vue b/ui/app/components/NewDownload.vue
index a66afaf7..17c7377e 100644
--- a/ui/app/components/NewDownload.vue
+++ b/ui/app/components/NewDownload.vue
@@ -88,20 +88,24 @@
           </div>
 
           <div class="columns is-multiline is-mobile" v-if="showAdvanced">
-            <div class="column is-3-tablet is-12-mobile">
-              <DLInput id="force_download" type="bool" label="Force download"
-                v-model="dlFields['--no-download-archive']" icon="fa-solid fa-download"
-                :disabled="!socket.isConnected || addInProgress" description="Ignore archive and re-download." />
+            <div class="column is-2-tablet is-12-mobile">
+              <DLInput id="force_download" type="bool" label="Force download" icon="fa-solid fa-download"
+                v-model="dlFields['--no-download-archive']" :disabled="!socket.isConnected || addInProgress"
+                description="Ignore archive." />
             </div>
 
-            <div class="column is-3-tablet is-12-mobile">
+            <div class="column is-2-tablet is-12-mobile">
               <DLInput id="auto_start" type="bool" label="Auto start" v-model="auto_start" icon="fa-solid fa-play"
-                :disabled="!socket.isConnected || addInProgress"
-                description="Whether to start the download automatically." />
+                :disabled="!socket.isConnected || addInProgress" description="Download automatically." />
+            </div>
+
+            <div class="column is-2-tablet is-12-mobile">
+              <DLInput id="no_cache" type="bool" label="Bypass cache" icon="fa-solid fa-broom"
+                v-model="dlFields['--no-continue']" :disabled="!socket.isConnected || addInProgress"
+                description="Remove temporary files." />
             </div>
 
             <div class="column is-6-tablet is-12-mobile">
-
               <DLInput id="output_template" type="string" label="Output template" v-model="form.template"
                 icon="fa-solid fa-file" :disabled="!socket.isConnected || addInProgress"
                 :placeholder="getDefault('template', config.app.output_template || '%(title)s.%(ext)s')">
@@ -284,7 +288,7 @@ const showFields = ref<boolean>(false)
 const showOptions = ref<boolean>(false)
 const showTestResults = ref<boolean>(false)
 const testResultsData = ref<any>(null)
-const dlFieldsExtra = ['--no-download-archive']
+const dlFieldsExtra = ['--no-download-archive', '--no-continue']
 const ytDlpOpt = ref<AutoCompleteOptions>([])
 const cookiesDropzoneRef = ref<InstanceType<typeof TextDropzone> | null>(null)