refactor: update the history item in UI automaticly whenever a item_update received via sockets

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()) {
+  if (queueState.isLoaded()) {
-    return;
+    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']) => {

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,
   };