feat(history): update the open view live

src/renderer/App.tsx

@@ -73,6 +73,7 @@ import {
 } from "./views/collector/CollectorView";
 import {
   buildHistoryViewModel,
+  mergeLiveHistoryEntry,
   pruneHistoryIds,
   selectVisibleHistoryIds,
   type HistoryFilter
@@ -1658,6 +1659,8 @@ export function App(): ReactElement {
   const [historyCtxMenu, setHistoryCtxMenu] = useState<{ x: number; y: number; entryId: string } | null>(null);
   const historyCtxMenuRef = useRef<HTMLDivElement>(null);
   const historyLoadGenerationRef = useRef(0);
+  const historyLoadActiveRef = useRef(false);
+  const pendingLiveHistoryEntriesRef = useRef<HistoryEntry[]>([]);
   const historyVisibleIdsRef = useRef<string[]>([]);
   const [allDebridHostInfo, setAllDebridHostInfo] = useState<AllDebridHostInfo | null>(null);
   const [allDebridHostLoading, setAllDebridHostLoading] = useState(false);
@@ -1807,6 +1810,8 @@ export function App(): ReactElement {
 
   const loadHistoryEntries = useCallback(async (): Promise<void> => {
     const generation = ++historyLoadGenerationRef.current;
+    historyLoadActiveRef.current = true;
+    pendingLiveHistoryEntriesRef.current = [];
     setHistoryLoading(true);
     setHistoryError("");
     try {
@@ -1814,13 +1819,24 @@ export function App(): ReactElement {
       if (!mountedRef.current || generation !== historyLoadGenerationRef.current) {
         return;
       }
-      applyHistoryEntries(entries);
+      const settings = snapshotRef.current.settings;
+      const merged = [...pendingLiveHistoryEntriesRef.current].reverse().reduce(
+        (current, entry) => mergeLiveHistoryEntry(current, entry, {
+          maxEntries: settings.historyMaxEntries,
+          maxAgeDays: settings.historyMaxAgeDays
+        }),
+        entries
+      );
+      pendingLiveHistoryEntriesRef.current = [];
+      applyHistoryEntries(merged);
     } catch {
       if (mountedRef.current && generation === historyLoadGenerationRef.current) {
         setHistoryError("Verlauf konnte nicht geladen werden");
       }
     } finally {
       if (mountedRef.current && generation === historyLoadGenerationRef.current) {
+        historyLoadActiveRef.current = false;
+        pendingLiveHistoryEntriesRef.current = [];
         setHistoryLoading(false);
       }
     }
@@ -1833,9 +1849,32 @@ export function App(): ReactElement {
     void loadHistoryEntries();
     return () => {
       historyLoadGenerationRef.current += 1;
+      historyLoadActiveRef.current = false;
+      pendingLiveHistoryEntriesRef.current = [];
     };
   }, [loadHistoryEntries, tab]);
 
+  useEffect(() => {
+    const unsubscribeHistoryEntryAdded = window.rd.onHistoryEntryAdded((entry) => {
+      if (activeTabRef.current !== "history") {
+        return;
+      }
+      if (historyLoadActiveRef.current) {
+        pendingLiveHistoryEntriesRef.current = [
+          entry,
+          ...pendingLiveHistoryEntriesRef.current.filter((pending) => pending.id !== entry.id)
+        ];
+      }
+      const settings = snapshotRef.current.settings;
+      applyHistoryEntries(mergeLiveHistoryEntry(historyEntriesRef.current, entry, {
+        maxEntries: settings.historyMaxEntries,
+        maxAgeDays: settings.historyMaxAgeDays
+      }));
+      setHistoryError("");
+    });
+    return unsubscribeHistoryEntryAdded;
+  }, [applyHistoryEntries]);
+
   const loadAllDebridHostInfo = useCallback(async (silent = false): Promise<void> => {
     const requestId = allDebridHostRequestRef.current + 1;
     allDebridHostRequestRef.current = requestId;

src/renderer/views/history/history-model.ts

@@ -50,6 +50,19 @@ export interface HistoryPage {
 
 export const HISTORY_PAGE_SIZE = 100;
 
+export function mergeLiveHistoryEntry(
+  entries: readonly HistoryEntry[],
+  incoming: HistoryEntry,
+  limits: { maxEntries: number; maxAgeDays: number },
+  nowMs: number = Date.now()
+): HistoryEntry[] {
+  const maxEntries = limits.maxEntries > 0 ? Math.min(limits.maxEntries, 100_000) : 500;
+  const cutoff = limits.maxAgeDays > 0 ? nowMs - limits.maxAgeDays * 86_400_000 : 0;
+  const merged = [incoming, ...entries.filter((entry) => entry.id !== incoming.id)];
+  const retained = cutoff > 0 ? merged.filter((entry) => entry.completedAt >= cutoff) : merged;
+  return retained.length > maxEntries ? retained.slice(0, maxEntries) : retained;
+}
+
 export const HISTORY_TABLE_COLUMN_IDS = ["name", "status", "size", "hoster", "started", "completed"] as const;
 export type HistoryTableColumnId = typeof HISTORY_TABLE_COLUMN_IDS[number];
 export type HistoryTableColumnWidths = Record<HistoryTableColumnId, number>;