From 6eaa15b37afff08f215448ec715c83280621ee6d Mon Sep 17 00:00:00 2001
From: arabcoders <admin@arabcoders.org>
Date: Tue, 21 Apr 2026 22:55:52 +0300
Subject: [PATCH] refactor: standardize pagination position

---
 ui/app/pages/browser/[...slug].vue | 73 +++++++++++++-----------------
 ui/app/pages/conditions.vue        | 36 ++++++++++-----
 ui/app/pages/dl_fields.vue         | 36 ++++++++++-----
 ui/app/pages/index.vue             |  4 +-
 ui/app/pages/notifications.vue     | 36 ++++++++++-----
 ui/app/pages/presets.vue           |  2 -
 6 files changed, 105 insertions(+), 82 deletions(-)

diff --git a/ui/app/pages/browser/[...slug].vue b/ui/app/pages/browser/[...slug].vue
index 2f32add1..959d8feb 100644
--- a/ui/app/pages/browser/[...slug].vue
+++ b/ui/app/pages/browser/[...slug].vue
@@ -148,22 +148,19 @@
         </UDropdownMenu>
       </div>
 
-      <p class="text-sm text-toned">
-        Page {{ pagination.page }} of {{ pagination.total_pages || 1 }}
-      </p>
+      <UPagination
+        v-if="pagination.total_pages > 1"
+        :page="pagination.page"
+        :total="pagination.total"
+        :items-per-page="pagination.per_page"
+        :disabled="isLoading"
+        show-edges
+        :sibling-count="0"
+        @update:page="handlePageChange"
+        size="sm"
+      />
     </div>
 
-    <UPagination
-      v-if="pagination.total_pages > 1"
-      :page="pagination.page"
-      :total="pagination.total"
-      :items-per-page="pagination.per_page"
-      :disabled="isLoading"
-      show-edges
-      :sibling-count="0"
-      @update:page="handlePageChange"
-    />
-
     <div
       v-if="contentStyle === 'list' && hasItems"
       class="w-full min-w-0 max-w-full overflow-hidden rounded-lg border border-default bg-default"
@@ -187,15 +184,7 @@
                   />
                 </button>
               </th>
-              <th :class="controlEnabled ? 'w-20' : 'w-24'">
-                #
-                <UIcon
-                  v-if="sort_by === 'type'"
-                  :name="sortDirectionIcon"
-                  class="ml-1 inline-flex size-3.5"
-                />
-              </th>
-              <th class="text-left">
+              <th class="w-full text-left">
                 Name
                 <UIcon
                   v-if="sort_by === 'name'"
@@ -240,16 +229,14 @@
                 </label>
               </td>
 
-              <td class="px-3 py-3 text-center align-middle">
-                <UTooltip :text="item.name">
-                  <span class="inline-flex items-center justify-center text-toned">
-                    <UIcon :name="itemTypeIcon(item)" class="size-6" />
-                  </span>
-                </UTooltip>
-              </td>
-
               <td class="px-3 py-3 align-middle">
-                <div class="flex min-w-0 items-center justify-between gap-3">
+                <div class="flex min-w-0 items-center gap-3">
+                  <UTooltip :text="itemTypeLabel(item)">
+                    <span class="inline-flex shrink-0 items-center justify-center text-toned">
+                      <UIcon :name="itemTypeIcon(item)" class="size-5" />
+                    </span>
+                  </UTooltip>
+
                   <div class="min-w-0 flex-1">
                     <UTooltip :text="item.name">
                       <a
@@ -484,16 +471,18 @@
       description="You can enable rename, delete, move, and create directory controls by setting YTP_BROWSER_CONTROL_ENABLED=true and restarting the application."
     />
 
-    <UPagination
-      v-if="pagination.total_pages > 1"
-      :page="pagination.page"
-      :total="pagination.total"
-      :items-per-page="pagination.per_page"
-      :disabled="isLoading"
-      show-edges
-      :sibling-count="0"
-      @update:page="handlePageChange"
-    />
+    <div v-if="pagination.total_pages > 1" class="flex justify-end">
+      <UPagination
+        :page="pagination.page"
+        :total="pagination.total"
+        :items-per-page="pagination.per_page"
+        :disabled="isLoading"
+        show-edges
+        :sibling-count="0"
+        @update:page="handlePageChange"
+        size="sm"
+      />
+    </div>
 
     <UModal
       v-if="model_item"
diff --git a/ui/app/pages/conditions.vue b/ui/app/pages/conditions.vue
index be337d82..68b3dd19 100644
--- a/ui/app/pages/conditions.vue
+++ b/ui/app/pages/conditions.vue
@@ -82,17 +82,6 @@
       </div>
     </div>
 
-    <UPagination
-      v-if="paging?.total_pages > 1"
-      :page="paging.page"
-      :total="paging.total"
-      :items-per-page="paging.per_page"
-      :disabled="isLoading"
-      show-edges
-      :sibling-count="0"
-      @update:page="navigatePage"
-    />
-
     <div
       v-if="!isLoading && filteredItems.length > 0"
       class="flex flex-wrap items-center justify-between gap-3 rounded-lg border border-default bg-default px-3 py-3"
@@ -125,7 +114,17 @@
         </UDropdownMenu>
       </div>
 
-      <div class="text-xs text-toned">{{ filteredItems.length }} displayed</div>
+      <UPagination
+        v-if="paging?.total_pages > 1"
+        :page="paging.page"
+        :total="paging.total"
+        :items-per-page="paging.per_page"
+        :disabled="isLoading"
+        show-edges
+        :sibling-count="0"
+        @update:page="navigatePage"
+        size="sm"
+      />
     </div>
 
     <div
@@ -440,6 +439,19 @@
       description="There are no custom defined conditions yet. Click the New Condition button to add your first condition."
     />
 
+    <div v-if="filteredItems.length > 0 && paging?.total_pages > 1" class="flex justify-end">
+      <UPagination
+        :page="paging.page"
+        :total="paging.total"
+        :items-per-page="paging.per_page"
+        :disabled="isLoading"
+        show-edges
+        :sibling-count="0"
+        @update:page="navigatePage"
+        size="sm"
+      />
+    </div>
+
     <div
       v-if="filteredItems.length > 0 && !query"
       class="rounded-lg border border-info/30 bg-info/10 p-4 text-sm text-default"
diff --git a/ui/app/pages/dl_fields.vue b/ui/app/pages/dl_fields.vue
index 3b58e494..10ceeea3 100644
--- a/ui/app/pages/dl_fields.vue
+++ b/ui/app/pages/dl_fields.vue
@@ -82,17 +82,6 @@
       </div>
     </div>
 
-    <UPagination
-      v-if="paging?.total_pages > 1"
-      :page="paging.page"
-      :total="paging.total"
-      :items-per-page="paging.per_page"
-      :disabled="isLoading"
-      show-edges
-      :sibling-count="0"
-      @update:page="navigatePage"
-    />
-
     <div
       v-if="!isLoading && filteredItems.length > 0"
       class="flex flex-wrap items-center justify-between gap-3 rounded-lg border border-default bg-default px-3 py-3"
@@ -125,7 +114,17 @@
         </UDropdownMenu>
       </div>
 
-      <div class="text-xs text-toned">{{ filteredItems.length }} displayed</div>
+      <UPagination
+        v-if="paging?.total_pages > 1"
+        :page="paging.page"
+        :total="paging.total"
+        :items-per-page="paging.per_page"
+        :disabled="isLoading"
+        show-edges
+        :sibling-count="0"
+        @update:page="navigatePage"
+        size="sm"
+      />
     </div>
 
     <div
@@ -392,6 +391,19 @@
       description="There are no custom defined fields yet. Click the New Field button to add your first field."
     />
 
+    <div v-if="filteredItems.length > 0 && paging?.total_pages > 1" class="flex justify-end">
+      <UPagination
+        :page="paging.page"
+        :total="paging.total"
+        :items-per-page="paging.per_page"
+        :disabled="isLoading"
+        show-edges
+        :sibling-count="0"
+        @update:page="navigatePage"
+        size="sm"
+      />
+    </div>
+
     <UModal
       v-if="editorOpen"
       :open="editorOpen"
diff --git a/ui/app/pages/index.vue b/ui/app/pages/index.vue
index 1ce8357e..bbfe6d1f 100644
--- a/ui/app/pages/index.vue
+++ b/ui/app/pages/index.vue
@@ -100,8 +100,8 @@
 
     <UEmpty
       v-if="!hasQueueContent"
-      icon="i-lucide-inbox"
-      title="No downloads yet"
+      icon="i-lucide-triangle-alert"
+      title="No active or queued downloads yet"
       class="rounded-lg border border-dashed border-default bg-muted/10 py-10"
     />
 
diff --git a/ui/app/pages/notifications.vue b/ui/app/pages/notifications.vue
index a1edfbd2..7ea3aabd 100644
--- a/ui/app/pages/notifications.vue
+++ b/ui/app/pages/notifications.vue
@@ -95,17 +95,6 @@
       </div>
     </div>
 
-    <UPagination
-      v-if="paging?.total_pages > 1"
-      :page="paging.page"
-      :total="paging.total"
-      :items-per-page="paging.per_page"
-      :disabled="isLoading"
-      show-edges
-      :sibling-count="0"
-      @update:page="navigatePage"
-    />
-
     <div
       v-if="!isLoading && filteredTargets.length > 0"
       class="flex flex-wrap items-center justify-between gap-3 rounded-lg border border-default bg-default px-3 py-3"
@@ -138,7 +127,17 @@
         </UDropdownMenu>
       </div>
 
-      <div class="text-xs text-toned">{{ filteredTargets.length }} displayed</div>
+      <UPagination
+        v-if="paging?.total_pages > 1"
+        :page="paging.page"
+        :total="paging.total"
+        :items-per-page="paging.per_page"
+        :disabled="isLoading"
+        show-edges
+        :sibling-count="0"
+        @update:page="navigatePage"
+        size="sm"
+      />
     </div>
 
     <div
@@ -490,6 +489,19 @@
       description="No notification targets found. Click on the New Notification button to add your first notification target."
     />
 
+    <div v-if="filteredTargets.length > 0 && paging?.total_pages > 1" class="flex justify-end">
+      <UPagination
+        :page="paging.page"
+        :total="paging.total"
+        :items-per-page="paging.per_page"
+        :disabled="isLoading"
+        show-edges
+        :sibling-count="0"
+        @update:page="navigatePage"
+        size="sm"
+      />
+    </div>
+
     <div
       v-if="!query && filteredTargets.length > 0"
       class="rounded-lg border border-info/30 bg-info/10 p-4 text-sm text-default"
diff --git a/ui/app/pages/presets.vue b/ui/app/pages/presets.vue
index a2a62682..91da8fd7 100644
--- a/ui/app/pages/presets.vue
+++ b/ui/app/pages/presets.vue
@@ -112,8 +112,6 @@
           </UButton>
         </UDropdownMenu>
       </div>
-
-      <div class="text-xs text-toned">{{ filteredPresets.length }} displayed</div>
     </div>
 
     <div