Merge pull request #593 from arabcoders/dev

refactor: re-add the automatic history update after download

ui/app/assets/css/tailwind.css

@@ -33,6 +33,22 @@
 }
 
 @layer components {
+  .feature-meta-grid {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr);
+    gap: 0.5rem;
+  }
+
+  @media (width >= 40rem) {
+    .feature-meta-grid {
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
+
+    .feature-meta-grid > :last-child:nth-child(odd) {
+      grid-column: 1 / -1;
+    }
+  }
+
   .shell-surface {
     background:
       radial-gradient(circle at top left, rgb(99 102 241 / 0.1), transparent 28%),

ui/app/components/Simple.vue

@@ -714,6 +714,7 @@ const {
   loadHistory,
   reloadHistory,
   deleteHistoryItems,
+  historyMoveHandler,
 } = useHistoryState();
 
 const embedUrl = ref('');
@@ -1271,19 +1272,9 @@ const deleteHistoryItem = async (item: StoreItem): Promise<void> => {
   toast.info('Removed from history queue.');
 };
 
-const handleHistoryItemMoved = (payload: { data: { to: 'queue' | 'history' } }): void => {
+const handleHistoryItemMoved = historyMoveHandler(
-  if (!simpleMode.value || !historyInitialized.value) {
+  () => simpleMode.value && historyInitialized.value,
-    return;
+);
-  }
-
-  if ('history' !== payload.data.to || 1 !== pagination.value.page) {
-    return;
-  }
-
-  window.setTimeout(() => {
-    void reloadHistory({ order: 'DESC', perPage: configStore.app.default_pagination });
-  }, 1000);
-};
 
 const showMessage = (item: StoreItem): boolean => {
   if (!item?.msg || item.msg === item?.error) {

ui/app/composables/useHistoryState.ts

@@ -1,6 +1,7 @@
 import { computed, ref } from 'vue';
 
 import { useNotification } from '~/composables/useNotification';
+import type { WSEP } from '~/types/sockets';
 import { useYtpConfig } from '~/composables/useYtpConfig';
 import { parse_api_error, parse_list_response, request } from '~/utils';
 import type { Pagination } from '~/types/responses';
@@ -168,6 +169,44 @@ const resetHistory = (): void => {
   lastError.value = null;
 };
 
+const addHistoryItem = (item: StoreItem): void => {
+  const existingIndex = items.value.findIndex((existing) => existing._id === item._id);
+
+  if (existingIndex !== -1) {
+    items.value = [
+      item,
+      ...items.value.slice(0, existingIndex),
+      ...items.value.slice(existingIndex + 1),
+    ];
+    return;
+  }
+
+  items.value = [item, ...items.value];
+  pagination.value.total++;
+
+  if (items.value.length > pagination.value.per_page) {
+    items.value = items.value.slice(0, pagination.value.per_page);
+  }
+
+  pagination.value.total_pages = Math.max(
+    1,
+    Math.ceil(pagination.value.total / pagination.value.per_page),
+  );
+  pagination.value.has_next = pagination.value.page < pagination.value.total_pages;
+};
+
+const historyMoveHandler = (
+  shouldHandle: () => boolean = () => isLoaded.value,
+): ((payload: WSEP['item_moved']) => void) => {
+  return (payload: WSEP['item_moved']): void => {
+    if ('history' !== payload.data.to || !shouldHandle()) {
+      return;
+    }
+
+    addHistoryItem(payload.data.item);
+  };
+};
+
 export const useHistoryState = () => {
   return {
     items,
@@ -180,5 +219,7 @@ export const useHistoryState = () => {
     reloadHistory,
     deleteHistoryItems,
     resetHistory,
+    upsertHistoryItem: addHistoryItem,
+    historyMoveHandler,
   };
 };

ui/app/pages/conditions.vue

@@ -309,57 +309,48 @@
               </span>
             </div>
 
-            <button
+            <div class="feature-meta-grid">
-              type="button"
+              <button
-              class="flex min-w-0 w-full items-start gap-2 rounded-md border border-default bg-muted/20 px-3 py-2 text-left"
+                type="button"
-              @click="toggleExpand(cond.id, 'filter')"
+                class="flex min-w-0 w-full items-start gap-2 rounded-md border border-default bg-muted/20 px-3 py-2 text-left"
-            >
+                @click="toggleExpand(cond.id, 'filter')"
-              <UIcon name="i-lucide-filter" class="mt-0.5 size-4 shrink-0 text-toned" />
+              >
-              <div class="min-w-0 flex-1">
+                <UIcon name="i-lucide-filter" class="mt-0.5 size-4 shrink-0 text-toned" />
-                <div class="text-xs font-medium text-toned">Filter</div>
+                <div class="min-w-0 flex-1">
-                <span :class="['block', expandClass(cond.id, 'filter')]">{{ cond.filter }}</span>
+                  <div class="text-xs font-medium text-toned">Filter</div>
-              </div>
+                  <span :class="['block', expandClass(cond.id, 'filter')]">{{ cond.filter }}</span>
-            </button>
+                </div>
+              </button>
 
-            <div v-if="cond.cli || cond.description" class="grid grid-cols-1 gap-2 sm:grid-cols-2">
               <button
                 v-if="cond.cli"
                 type="button"
-                :class="[
+                class="flex min-w-0 w-full items-start gap-2 rounded-md border border-default bg-muted/20 px-3 py-2 text-left"
-                  'flex min-w-0 w-full items-start gap-2 rounded-md border border-default bg-muted/20 px-3 py-2 text-left',
-                  !cond.description && 'sm:col-span-2',
-                ]"
                 @click="toggleExpand(cond.id, 'cli')"
               >
                 <UIcon name="i-lucide-terminal" class="mt-0.5 size-4 shrink-0 text-toned" />
                 <div class="min-w-0 flex-1">
-                  <div class="text-xs font-medium text-toned">CLI</div>
+                  <div class="text-xs font-medium text-toned">CLI options</div>
                   <span :class="['block', expandClass(cond.id, 'cli')]">{{ cond.cli }}</span>
                 </div>
               </button>
-
-              <button
-                v-if="cond.description"
-                type="button"
-                :class="[
-                  'flex min-w-0 w-full items-start gap-2 rounded-md border border-default bg-muted/20 px-3 py-2 text-left',
-                  !cond.cli && 'sm:col-span-2',
-                ]"
-                @click="toggleExpand(cond.id, 'description')"
-              >
-                <UIcon
-                  name="i-lucide-message-square-text"
-                  class="mt-0.5 size-4 shrink-0 text-toned"
-                />
-                <div class="min-w-0 flex-1">
-                  <div class="text-xs font-medium text-toned">Description</div>
-                  <span :class="['block', expandClass(cond.id, 'description')]">{{
-                    cond.description
-                  }}</span>
-                </div>
-              </button>
             </div>
 
+            <button
+              v-if="cond.description"
+              type="button"
+              class="flex min-w-0 w-full items-start gap-2 rounded-md border border-default bg-muted/20 px-3 py-2 text-left"
+              @click="toggleExpand(cond.id, 'description')"
+            >
+              <UIcon name="i-lucide-align-left" class="mt-0.5 size-4 shrink-0 text-toned" />
+              <div class="min-w-0 flex-1">
+                <div class="text-xs font-medium text-toned">Description</div>
+                <span :class="['block', expandClass(cond.id, 'description')]">{{
+                  cond.description
+                }}</span>
+              </div>
+            </button>
+
             <div
               v-if="extrasEntries(cond.extras).length > 0"
               class="rounded-md border border-default bg-muted/20 px-3 py-2"

ui/app/pages/dl_fields.vue

@@ -300,13 +300,10 @@
               </span>
             </div>
 
-            <div class="grid grid-cols-1 gap-2 sm:grid-cols-2">
+            <div class="feature-meta-grid">
               <button
                 type="button"
-                :class="[
+                class="flex min-w-0 w-full items-start gap-2 rounded-md border border-default bg-muted/20 px-3 py-2 text-left"
-                  'flex min-w-0 w-full items-start gap-2 rounded-md border border-default bg-muted/20 px-3 py-2 text-left',
-                  !field.description && 'sm:col-span-2',
-                ]"
                 @click="toggleExpand(field.id, 'field')"
               >
                 <UIcon name="i-lucide-terminal" class="mt-0.5 size-4 shrink-0 text-toned" />

ui/app/pages/history.vue

@@ -761,6 +761,7 @@ import moment from 'moment';
 import { useStorage } from '@vueuse/core';
 import { useConfirm } from '~/composables/useConfirm';
 import { useDialog } from '~/composables/useDialog';
+import { useAppSocket } from '~/composables/useAppSocket';
 import { useExpandableMeta } from '~/composables/useExpandableMeta';
 import { useHistoryState } from '~/composables/useHistoryState';
 import { useMediaQuery } from '~/composables/useMediaQuery';
@@ -782,6 +783,7 @@ import { requirePageShell } from '~/utils/topLevelNavigation';
 
 const config = useYtpConfig();
 const stateStore = useQueueState();
+const socketStore = useAppSocket();
 const toast = useNotification();
 const box = useConfirm();
 const { confirmDialog } = useDialog();
@@ -798,6 +800,7 @@ const {
   loadHistory,
   reloadHistory,
   deleteHistoryItems,
+  historyMoveHandler,
 } = useHistoryState();
 
 const show_thumbnail = useStorage<boolean>('show_thumbnail', true);
@@ -834,10 +837,17 @@ const paginationInfo = computed(() => ({
   isLoaded: isLoaded.value,
 }));
 
+const handleHistoryItemMoved = historyMoveHandler();
+
 onMounted(async () => {
+  socketStore.on('item_moved', handleHistoryItemMoved);
   await loadHistory(1, { order: 'DESC', perPage: config.app.default_pagination });
 });
 
+onBeforeUnmount(() => {
+  socketStore.off('item_moved', handleHistoryItemMoved);
+});
+
 watch(showFilter, () => {
   if (!showFilter.value) {
     query.value = '';

ui/app/pages/notifications.vue

@@ -363,29 +363,44 @@
               </span>
             </div>
 
-            <button
+            <div class="feature-meta-grid">
-              type="button"
+              <button
-              class="flex min-w-0 w-full items-start gap-2 rounded-md border border-default bg-muted/20 px-3 py-2 text-left"
+                type="button"
-              @click="toggleExpand(item.id, 'url')"
+                class="flex min-w-0 w-full items-start gap-2 rounded-md border border-default bg-muted/20 px-3 py-2 text-left"
-            >
+                @click="toggleExpand(item.id, 'url')"
-              <UIcon name="i-lucide-link" class="mt-0.5 size-4 shrink-0 text-toned" />
+              >
-              <div class="min-w-0 flex-1">
+                <UIcon name="i-lucide-link" class="mt-0.5 size-4 shrink-0 text-toned" />
-                <div class="text-xs font-medium text-toned">Target URL</div>
+                <div class="min-w-0 flex-1">
-                <a
+                  <div class="text-xs font-medium text-toned">Target URL</div>
-                  :href="item.request.url"
+                  <a
-                  target="_blank"
+                    :href="item.request.url"
-                  rel="noreferrer"
+                    target="_blank"
-                  class="block text-highlighted hover:underline"
+                    rel="noreferrer"
-                  @click.stop
+                    class="block text-highlighted hover:underline"
-                >
+                    @click.stop
-                  <span :class="['block', expandClass(item.id, 'url')]">
+                  >
-                    {{ item.request.url }}
+                    <span :class="['block', expandClass(item.id, 'url')]">
-                  </span>
+                      {{ item.request.url }}
-                </a>
+                    </span>
-              </div>
+                  </a>
-            </button>
+                </div>
+              </button>
+
+              <button
+                v-if="headerKeys(item).length > 0"
+                type="button"
+                class="flex min-w-0 w-full items-start gap-2 rounded-md border border-default bg-muted/20 px-3 py-2 text-left"
+                @click="toggleExpand(item.id, 'headers')"
+              >
+                <UIcon name="i-lucide-key" class="mt-0.5 size-4 shrink-0 text-toned" />
+                <div class="min-w-0 flex-1">
+                  <div class="text-xs font-medium text-toned">Headers</div>
+                  <span :class="['block', expandClass(item.id, 'headers')]">
+                    {{ headerKeys(item).join(', ') }}
+                  </span>
+                </div>
+              </button>
 
-            <div class="grid grid-cols-1 gap-2 sm:grid-cols-2">
               <button
                 type="button"
                 class="flex min-w-0 w-full items-start gap-2 rounded-md border border-default bg-muted/20 px-3 py-2 text-left"
@@ -417,21 +432,6 @@
                 </div>
               </button>
             </div>
-
-            <button
-              v-if="headerKeys(item).length > 0"
-              type="button"
-              class="flex min-w-0 w-full items-start gap-2 rounded-md border border-default bg-muted/20 px-3 py-2 text-left"
-              @click="toggleExpand(item.id, 'headers')"
-            >
-              <UIcon name="i-lucide-key" class="mt-0.5 size-4 shrink-0 text-toned" />
-              <div class="min-w-0 flex-1">
-                <div class="text-xs font-medium text-toned">Headers</div>
-                <span :class="['block', expandClass(item.id, 'headers')]">
-                  {{ headerKeys(item).join(', ') }}
-                </span>
-              </div>
-            </button>
           </div>
 
           <template #footer>

ui/app/pages/presets.vue

@@ -306,29 +306,26 @@
               </span>
             </div>
 
-            <button
+            <div v-if="item.folder || item.template || item.cli" class="feature-meta-grid">
-              v-if="item.folder"
+              <button
-              type="button"
+                v-if="item.folder"
-              class="flex min-w-0 w-full items-start gap-2 rounded-md border border-default bg-muted/20 px-3 py-2 text-left"
+                type="button"
-              @click="toggleExpand(item.id, 'folder')"
+                class="flex min-w-0 w-full items-start gap-2 rounded-md border border-default bg-muted/20 px-3 py-2 text-left"
-            >
+                @click="toggleExpand(item.id, 'folder')"
-              <UIcon name="i-lucide-folder-output" class="mt-0.5 size-4 shrink-0 text-toned" />
+              >
-              <div class="min-w-0 flex-1">
+                <UIcon name="i-lucide-folder-output" class="mt-0.5 size-4 shrink-0 text-toned" />
-                <div class="text-xs font-medium text-toned">Download path</div>
+                <div class="min-w-0 flex-1">
-                <span :class="['block', expandClass(item.id, 'folder')]">{{
+                  <div class="text-xs font-medium text-toned">Download path</div>
-                  calcPath(item.folder)
+                  <span :class="['block', expandClass(item.id, 'folder')]">{{
-                }}</span>
+                    calcPath(item.folder)
-              </div>
+                  }}</span>
-            </button>
+                </div>
+              </button>
 
-            <div v-if="item.template || item.cli" class="grid grid-cols-1 gap-2 sm:grid-cols-2">
               <button
                 v-if="item.template"
                 type="button"
-                :class="[
+                class="flex min-w-0 w-full items-start gap-2 rounded-md border border-default bg-muted/20 px-3 py-2 text-left"
-                  'flex min-w-0 w-full items-start gap-2 rounded-md border border-default bg-muted/20 px-3 py-2 text-left',
-                  !item.cli && 'sm:col-span-2',
-                ]"
                 @click="toggleExpand(item.id, 'template')"
               >
                 <UIcon name="i-lucide-file-code-2" class="mt-0.5 size-4 shrink-0 text-toned" />
@@ -343,10 +340,7 @@
               <button
                 v-if="item.cli"
                 type="button"
-                :class="[
+                class="flex min-w-0 w-full items-start gap-2 rounded-md border border-default bg-muted/20 px-3 py-2 text-left"
-                  'flex min-w-0 w-full items-start gap-2 rounded-md border border-default bg-muted/20 px-3 py-2 text-left',
-                  !item.template && 'sm:col-span-2',
-                ]"
                 @click="toggleExpand(item.id, 'cli')"
               >
                 <UIcon name="i-lucide-terminal" class="mt-0.5 size-4 shrink-0 text-toned" />

ui/app/pages/tasks.vue

@@ -470,13 +470,15 @@
               </button>
             </div>
 
-            <div class="grid grid-cols-1 gap-2 sm:grid-cols-2">
+            <div
+              v-if="
+                item.timer || item.folder || item.template || item.cli || willTaskBeProcessed(item)
+              "
+              class="feature-meta-grid"
+            >
               <button
                 type="button"
-                :class="[
+                class="flex min-w-0 w-full items-start gap-2 rounded-md border border-default bg-muted/20 px-3 py-2 text-left"
-                  'flex min-w-0 w-full items-start gap-2 rounded-md border border-default bg-muted/20 px-3 py-2 text-left',
-                  !item.folder && 'sm:col-span-2',
-                ]"
                 @click="toggleExpand(item.id, 'schedule')"
               >
                 <UIcon
@@ -532,16 +534,11 @@
                   </span>
                 </div>
               </button>
-            </div>
 
-            <div v-if="item.template || item.cli" class="grid grid-cols-1 gap-2 sm:grid-cols-2">
               <button
                 v-if="item.template"
                 type="button"
-                :class="[
+                class="flex min-w-0 w-full items-start gap-2 rounded-md border border-default bg-muted/20 px-3 py-2 text-left"
-                  'flex min-w-0 w-full items-start gap-2 rounded-md border border-default bg-muted/20 px-3 py-2 text-left',
-                  !item.cli && 'sm:col-span-2',
-                ]"
                 @click="toggleExpand(item.id, 'template')"
               >
                 <UIcon name="i-lucide-file-code-2" class="mt-0.5 size-4 shrink-0 text-toned" />
@@ -556,10 +553,7 @@
               <button
                 v-if="item.cli"
                 type="button"
-                :class="[
+                class="flex min-w-0 w-full items-start gap-2 rounded-md border border-default bg-muted/20 px-3 py-2 text-left"
-                  'flex min-w-0 w-full items-start gap-2 rounded-md border border-default bg-muted/20 px-3 py-2 text-left',
-                  !item.template && 'sm:col-span-2',
-                ]"
                 @click="toggleExpand(item.id, 'cli')"
               >
                 <UIcon name="i-lucide-terminal" class="mt-0.5 size-4 shrink-0 text-toned" />