refactor: re-add the automatic history update after download

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/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 = '';