make assetViewer.assetInteraction optional, it is not needed on utility pages, map, or individual-shared-viewer

web/src/lib/components/asset-viewer/asset-viewer-nav-bar.svelte

@@ -63,14 +63,14 @@
 
   interface Props {
     asset: AssetResponseDto;
-    assetInteraction: AssetInteraction;
+    assetInteraction?: AssetInteraction | null;
     album?: AlbumResponseDto | null;
     person?: PersonResponseDto | null;
     stack?: StackResponseDto | null;
     showCloseButton?: boolean;
     showDetailButton: boolean;
     showSlideshow?: boolean;
-    onSelectAsset: (asset: TimelineAsset) => void;
+    onSelectAsset?: (asset: TimelineAsset) => void;
     onZoomImage: () => void;
     onCopyImage?: () => Promise<void>;
     preAction: PreAction;
@@ -110,7 +110,7 @@
   let isLocked = $derived(asset.visibility === AssetVisibility.Locked);
   let smartSearchEnabled = $derived($featureFlags.loaded && $featureFlags.smartSearch);
 
-  let selected = $derived(assetInteraction.hasSelectedAsset(asset.id));
+  let selected = $derived(assetInteraction?.hasSelectedAsset(asset.id));
   // $: showEditorButton =
   //   isOwner &&
   //   asset.type === AssetTypeEnum.Image &&
@@ -131,7 +131,7 @@
     {/if}
   </div>
   <div class="flex gap-2 overflow-x-auto dark" data-testid="asset-viewer-navbar-actions">
-    {#if assetInteraction.selectionActive}
+    {#if !!onSelectAsset && assetInteraction?.selectionActive}
       <p class="text-lg text-immich-fg dark:text-immich-dark-fg">
         {#if selected}
         {$t('selected')}

web/src/lib/components/asset-viewer/asset-viewer.svelte

@@ -50,7 +50,7 @@
 
   interface Props {
     asset: AssetResponseDto;
-    assetInteraction: AssetInteraction;
+    assetInteraction?: AssetInteraction;
     preloadAssets?: TimelineAsset[];
     showNavigation?: boolean;
     withStacked?: boolean;
@@ -60,7 +60,7 @@
     preAction?: PreAction | undefined;
     onAction?: OnAction | undefined;
     showCloseButton?: boolean;
-    onSelectAsset: (asset: TimelineAsset) => void;
+    onSelectAsset?: (asset: TimelineAsset) => void;
     onClose: (asset: AssetResponseDto) => void;
     onNext: () => Promise<HasAsset>;
     onPrevious: () => Promise<HasAsset>;
@@ -536,7 +536,7 @@
     </div>
   {/if}
 
-  {#if enableDetailPanel && $slideshowState === SlideshowState.None && $isShowDetail && !isShowEditor && !assetInteraction.selectionActive}
+  {#if enableDetailPanel && $slideshowState === SlideshowState.None && $isShowDetail && !isShowEditor && !assetInteraction?.selectionActive}
     <div
       transition:fly={{ duration: 150 }}
       id="detail-panel"

web/src/lib/components/shared-components/gallery-viewer/gallery-viewer.svelte

@@ -528,10 +528,12 @@
   <Portal target="body">
     <AssetViewer
       asset={$viewingAsset}
+      {assetInteraction}
       onAction={handleAction}
       onPrevious={handlePrevious}
       onNext={handleNext}
       onRandom={handleRandom}
+      onSelectAsset={handleSelectAssets}
       onClose={() => {
         assetViewingStore.showAssetViewer(false);
         handlePromiseError(navigate({ targetRoute: 'current', assetId: null }));