From 50253c650ace81e27d0dc9ebda70d6c0c8716c6d Mon Sep 17 00:00:00 2001 From: arabcoders Date: Sat, 25 Apr 2026 20:24:45 +0300 Subject: [PATCH 1/2] refactor: re-add the automatic history update after download --- ui/app/components/Simple.vue | 17 +++-------- ui/app/composables/useHistoryState.ts | 41 +++++++++++++++++++++++++++ ui/app/pages/history.vue | 10 +++++++ 3 files changed, 55 insertions(+), 13 deletions(-) diff --git a/ui/app/components/Simple.vue b/ui/app/components/Simple.vue index 40b7b521..3629ea2c 100644 --- a/ui/app/components/Simple.vue +++ b/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 => { toast.info('Removed from history queue.'); }; -const handleHistoryItemMoved = (payload: { data: { to: 'queue' | 'history' } }): void => { - if (!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 handleHistoryItemMoved = historyMoveHandler( + () => simpleMode.value && historyInitialized.value, +); const showMessage = (item: StoreItem): boolean => { if (!item?.msg || item.msg === item?.error) { diff --git a/ui/app/composables/useHistoryState.ts b/ui/app/composables/useHistoryState.ts index 55413ea6..82dae5cb 100644 --- a/ui/app/composables/useHistoryState.ts +++ b/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, }; }; diff --git a/ui/app/pages/history.vue b/ui/app/pages/history.vue index 4e88d55a..70e50219 100644 --- a/ui/app/pages/history.vue +++ b/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('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 = ''; From f33dc84c57acbe75a9868a15dc9ea97b149ba115 Mon Sep 17 00:00:00 2001 From: arabcoders Date: Sun, 26 Apr 2026 20:18:38 +0300 Subject: [PATCH 2/2] refactor: minor ui update --- ui/app/assets/css/tailwind.css | 16 ++++++++ ui/app/pages/conditions.vue | 67 +++++++++++++----------------- ui/app/pages/dl_fields.vue | 7 +--- ui/app/pages/notifications.vue | 74 +++++++++++++++++----------------- ui/app/pages/presets.vue | 40 ++++++++---------- ui/app/pages/tasks.vue | 24 +++++------ 6 files changed, 110 insertions(+), 118 deletions(-) diff --git a/ui/app/assets/css/tailwind.css b/ui/app/assets/css/tailwind.css index 856a63ed..b8f550b5 100644 --- a/ui/app/assets/css/tailwind.css +++ b/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%), diff --git a/ui/app/pages/conditions.vue b/ui/app/pages/conditions.vue index 7c5b1b07..3a78c340 100644 --- a/ui/app/pages/conditions.vue +++ b/ui/app/pages/conditions.vue @@ -309,57 +309,48 @@ - +
+ -
- -
+ +
-
+
- +
+ + + -
- -