fix(web): disable metadata edit if user is not owner (#5415)

* fix(web): disable metadata edit if user is not owner

* pr feedback

* pr feedback

* get data from page data

* fix: better representation

* feat: warn user if there's issues with the selected assets

---------

Co-authored-by: Alex Tran <alex.tran1502@gmail.com>

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

@@ -59,6 +59,7 @@
   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';
+  import { user } from '$lib/stores/user.store';
 
   export let data: PageData;
 
@@ -66,6 +67,9 @@
   let { slideshowState, slideshowShuffle } = slideshowStore;
 
   let album = data.album;
+
+  $user = data.user;
+
   $: album = data.album;
 
   $: {
@@ -96,7 +100,6 @@
   let isShowActivity = false;
   let isLiked: ActivityResponseDto | null = null;
   let reactions: ActivityResponseDto[] = [];
-  let user = data.user;
   let globalWidth: number;
   let assetGridWidth: number;
 
@@ -179,10 +182,10 @@
   };
 
   const getFavorite = async () => {
-    if (user) {
+    if ($user) {
       try {
         const { data } = await api.activityApi.getActivities({
-          userId: user.id,
+          userId: $user.id,
           albumId: album.id,
           type: ReactionType.Like,
           level: ReactionLevel.Album,
@@ -549,16 +552,10 @@
       style={`width:${assetGridWidth}px`}
     >
       {#if viewMode === ViewMode.SELECT_ASSETS}
-        <AssetGrid
-          user={data.user}
-          assetStore={timelineStore}
-          assetInteractionStore={timelineInteractionStore}
-          isSelectionMode={true}
-        />
+        <AssetGrid assetStore={timelineStore} assetInteractionStore={timelineInteractionStore} isSelectionMode={true} />
       {:else}
         <AssetGrid
           {album}
-          user={data.user}
           {assetStore}
           {assetInteractionStore}
           isShared={album.sharedUsers.length > 0}
@@ -679,7 +676,7 @@
       {/if}
     </main>
   </div>
-  {#if album.sharedUsers.length > 0 && album && isShowActivity && user && !$showAssetViewer}
+  {#if album.sharedUsers.length > 0 && album && isShowActivity && $user && !$showAssetViewer}
     <div class="flex">
       <div
         transition:fly={{ duration: 150 }}
@@ -688,7 +685,7 @@
         translate="yes"
       >
         <ActivityViewer
-          {user}
+          user={$user}
           disabled={!album.isActivityEnabled}
           albumOwnerId={album.ownerId}
           albumId={album.id}
@@ -738,10 +735,10 @@
   </ConfirmDialogue>
 {/if}
 
-{#if viewMode === ViewMode.OPTIONS}
+{#if viewMode === ViewMode.OPTIONS && $user}
   <AlbumOptions
     {album}
-    {user}
+    user={$user}
     on:close={() => (viewMode = ViewMode.VIEW)}
     on:toggleEnableActivity={handleToggleEnableActivity}
     on:showSelectSharedUser={() => (viewMode = ViewMode.SELECT_USERS)}

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

@@ -24,6 +24,7 @@
   import { assetViewingStore } from '$lib/stores/asset-viewing.store';
   import { mdiDotsVertical, mdiPlus } from '@mdi/js';
   import UpdatePanel from '$lib/components/shared-components/update-panel.svelte';
+  import { user } from '$lib/stores/user.store';
 
   export let data: PageData;
 
@@ -33,6 +34,8 @@
   const assetInteractionStore = createAssetInteractionStore();
   const { isMultiSelectState, selectedAssets } = assetInteractionStore;
 
+  $user = data.user;
+
   $: isAllFavorite = Array.from($selectedAssets).every((asset) => asset.isFavorite);
 
   const handleEscape = () => {