Update timeline

web/src/lib/components/album-page/album-viewer.svelte

@@ -20,6 +20,7 @@
   import ThemeButton from '../shared-components/theme-button.svelte';
   import { shouldIgnoreShortcut } from '$lib/utils/shortcut';
   import { mdiFileImagePlusOutline, mdiFolderDownloadOutline } from '@mdi/js';
+  import UpdatePanel from '../shared-components/update-panel.svelte';  
 
   export let sharedLink: SharedLinkResponseDto;
   export let user: UserResponseDto | undefined = undefined;
@@ -167,4 +168,6 @@
       </p>
     </section>
   </AssetGrid>
+  <UpdatePanel {assetStore} />
+  
 </main>

web/src/lib/components/photos-page/asset-grid.svelte

@@ -413,6 +413,7 @@
   {/if}
 </Portal>
 
+
 <style>
   #asset-grid {
     contain: layout;

web/src/lib/components/shared-components/update-panel.svelte

@@ -1,21 +1,25 @@
 <script lang="ts">
   import { websocketStore } from '$lib/stores/websocket';
-  import { AssetStore } from '$lib/stores/assets.store';
+  import type { AssetStore } from '$lib/stores/assets.store';
   import { notificationController, NotificationType } from './notification/notification';
 
-  let assetStore = new AssetStore(/* vos options ici */);
-  let assetUpdateCount = 0;
-  let lastAssetName;
-  let timeoutId;
 
-  const subscribe = websocketStore.onAssetUpdate.subscribe(value => {
-    if (value && value.originalFileName) {
-      lastAssetName = value.originalFileName;
+  export let assetStore: AssetStore | null;
+  let assetUpdateCount = 0;
+  let lastAssetName: string;
+  let timeoutId: string | number | NodeJS.Timeout | undefined;
+
+  websocketStore.onAssetUpdate.subscribe(asset => {
+    if (asset && asset.originalFileName && assetStore) {
+      lastAssetName = asset.originalFileName;
       assetUpdateCount++;
 
-      assetStore.updateAsset(value);
+      assetStore.updateAsset(asset,true);
 
-      clearTimeout(timeoutId);
+      assetStore.removeAsset(asset.id); // Update timeline
+      assetStore.addAsset(asset);
+
+        clearTimeout(timeoutId);
       timeoutId = setTimeout(() => {
         if (assetUpdateCount === 1) {
           

web/src/routes/(user)/albums/[albumId]/+page.svelte

@@ -58,6 +58,7 @@
   import ActivityStatus from '$lib/components/asset-viewer/activity-status.svelte';
   import { numberOfComments, setNumberOfComments, updateNumberOfComments } from '$lib/stores/activity.store';
   import AlbumOptions from '$lib/components/album-page/album-options.svelte';
+  import UpdatePanel from '$lib/components/shared-components/update-panel.svelte';
 
   export let data: PageData;
 
@@ -754,3 +755,5 @@
     on:save={({ detail: description }) => handleUpdateDescription(description)}
   />
 {/if}
+
+<UpdatePanel {assetStore} />

web/src/routes/(user)/archive/+page.svelte

@@ -16,6 +16,7 @@
   import { AssetStore } from '$lib/stores/assets.store';
   import type { PageData } from './$types';
   import { mdiPlus, mdiDotsVertical } from '@mdi/js';
+  import UpdatePanel from '$lib/components/shared-components/update-panel.svelte';
 
   export let data: PageData;
 
@@ -52,3 +53,4 @@
     />
   </AssetGrid>
 </UserPageLayout>
+<UpdatePanel {assetStore} />

web/src/routes/(user)/favorites/+page.svelte

@@ -18,6 +18,7 @@
   import { AssetStore } from '$lib/stores/assets.store';
   import type { PageData } from './$types';
   import { mdiDotsVertical, mdiPlus } from '@mdi/js';
+  import UpdatePanel from '$lib/components/shared-components/update-panel.svelte';
 
   export let data: PageData;
 
@@ -57,3 +58,4 @@
     />
   </AssetGrid>
 </UserPageLayout>
+<UpdatePanel {assetStore} />

web/src/routes/(user)/partners/[userId]/+page.svelte

@@ -13,6 +13,7 @@
   import { onDestroy } from 'svelte';
   import type { PageData } from './$types';
   import { mdiPlus, mdiArrowLeft } from '@mdi/js';
+  import UpdatePanel from '$lib/components/shared-components/update-panel.svelte';
 
   export let data: PageData;
 
@@ -45,4 +46,5 @@
     </ControlAppBar>
   {/if}
   <AssetGrid {assetStore} {assetInteractionStore} />
+  <UpdatePanel {assetStore} />
 </main>

web/src/routes/(user)/photos/+page.svelte

@@ -23,6 +23,7 @@
   import type { PageData } from './$types';
   import { assetViewingStore } from '$lib/stores/asset-viewing.store';
   import { mdiDotsVertical, mdiPlus } from '@mdi/js';
+  import UpdatePanel from '$lib/components/shared-components/update-panel.svelte';
 
   export let data: PageData;
 
@@ -97,3 +98,4 @@
     />
   </AssetGrid>
 </UserPageLayout>
+<UpdatePanel {assetStore} />

web/src/routes/(user)/trash/+page.svelte

@@ -23,6 +23,7 @@
   import empty3Url from '$lib/assets/empty-3.svg';
   import ConfirmDialogue from '$lib/components/shared-components/confirm-dialogue.svelte';
   import { mdiDeleteOutline, mdiHistory } from '@mdi/js';
+  import UpdatePanel from '$lib/components/shared-components/update-panel.svelte';
 
   export let data: PageData;
 
@@ -113,3 +114,4 @@
     </svelte:fragment>
   </ConfirmDialogue>
 {/if}
+<UpdatePanel {assetStore} />

web/src/routes/+layout.svelte

@@ -121,7 +121,6 @@
 
 <DownloadPanel />
 <UploadPanel />
-<UpdatePanel />
 <NotificationList />
 
 {#if data.user?.isAdmin}