From 72f2373c42f6100a04e3c598903e7a1201433d12 Mon Sep 17 00:00:00 2001
From: arabcoders <admin@arabcoders.org>
Date: Wed, 17 Jun 2026 22:44:37 +0300
Subject: [PATCH] refactor: update the history item in UI automaticly whenever
 a item_update received via sockets

---
 ui/app/composables/useAppSocket.ts    | 12 +++++++++---
 ui/app/composables/useHistoryState.ts |  7 +++++++
 2 files changed, 16 insertions(+), 3 deletions(-)

diff --git a/ui/app/composables/useAppSocket.ts b/ui/app/composables/useAppSocket.ts
index 87c81a27..2d2e2dfd 100644
--- a/ui/app/composables/useAppSocket.ts
+++ b/ui/app/composables/useAppSocket.ts
@@ -1,5 +1,6 @@
 import { proxyRefs, readonly, ref } from 'vue';
 import { useYtpConfig } from '~/composables/useYtpConfig';
+import { useHistoryState } from '~/composables/useHistoryState';
 import { useQueueState } from '~/composables/useQueueState';
 import type { StoreItem } from '~/types/store';
 import type {
@@ -17,6 +18,7 @@ type KnownEvent = keyof WSEP;
 
 const getRuntimeConfig = () => useRuntimeConfig();
 const getConfig = () => useYtpConfig();
+const getHistoryState = () => useHistoryState();
 const getQueueState = () => useQueueState();
 const getToast = () => useNotification();
 let queueReloadTimer: ReturnType<typeof setTimeout> | null = null;
@@ -359,11 +361,15 @@ on('item_deleted', (data: WSEP['item_deleted']) => {
 on('item_updated', (data: WSEP['item_updated']) => {
   const queueState = getQueueState();
 
-  if (!queueState.isLoaded()) {
-    return;
+  if (queueState.isLoaded()) {
+    queueState.update(data.data._id, data.data);
   }
 
-  queueState.update(data.data._id, data.data);
+  const historyState = getHistoryState();
+
+  if (historyState.isLoaded.value) {
+    historyState.update(data.data._id, data.data);
+  }
 });
 
 on('item_progress', (data: WSEP['item_progress']) => {
diff --git a/ui/app/composables/useHistoryState.ts b/ui/app/composables/useHistoryState.ts
index c10781a6..807edbad 100644
--- a/ui/app/composables/useHistoryState.ts
+++ b/ui/app/composables/useHistoryState.ts
@@ -201,6 +201,12 @@ const reset = (): void => {
   lastError.value = null;
 };
 
+const update = (id: string, data: StoreItem): void => {
+  const index = items.value.findIndex((item) => item._id === id);
+  if (index === -1) return;
+  items.value = [...items.value.slice(0, index), data, ...items.value.slice(index + 1)];
+};
+
 const upsert = (item: StoreItem): void => {
   const existingIndex = items.value.findIndex((existing) => existing._id === item._id);
 
@@ -252,6 +258,7 @@ export const useHistoryState = () => {
     remove,
     rename,
     reset,
+    update,
     upsert,
     moveHandler,
   };