Add initial select logic to asset viewer

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

@@ -19,9 +19,12 @@
   import ShareAction from '$lib/components/asset-viewer/actions/share-action.svelte';
   import ShowDetailAction from '$lib/components/asset-viewer/actions/show-detail-action.svelte';
   import UnstackAction from '$lib/components/asset-viewer/actions/unstack-action.svelte';
+  import Icon from '$lib/components/elements/icon.svelte';
   import ButtonContextMenu from '$lib/components/shared-components/context-menu/button-context-menu.svelte';
   import MenuOption from '$lib/components/shared-components/context-menu/menu-option.svelte';
   import { AppRoute } from '$lib/constants';
+  import type { TimelineAsset } from '$lib/managers/timeline-manager/types';
+  import type { AssetInteraction } from '$lib/stores/asset-interaction.svelte';
   import { featureFlags } from '$lib/stores/server-config.store';
   import { user } from '$lib/stores/user.store';
   import { photoZoomState } from '$lib/stores/zoom-image.store';
@@ -41,6 +44,7 @@
   import { IconButton } from '@immich/ui';
   import {
     mdiAlertOutline,
+    mdiCheckCircle,
     mdiCogRefreshOutline,
     mdiCompare,
     mdiContentCopy,
@@ -59,12 +63,14 @@
 
   interface Props {
     asset: AssetResponseDto;
+    assetInteraction: AssetInteraction;
     album?: AlbumResponseDto | null;
     person?: PersonResponseDto | null;
     stack?: StackResponseDto | null;
     showCloseButton?: boolean;
     showDetailButton: boolean;
     showSlideshow?: boolean;
+    onSelectAsset: (asset: TimelineAsset) => void;
     onZoomImage: () => void;
     onCopyImage?: () => Promise<void>;
     preAction: PreAction;
@@ -79,12 +85,14 @@
 
   let {
     asset,
+    assetInteraction,
     album = null,
     person = null,
     stack = null,
     showCloseButton = true,
     showDetailButton,
     showSlideshow = false,
+    onSelectAsset,
     onZoomImage,
     onCopyImage,
     preAction,
@@ -102,6 +110,7 @@
   let isLocked = $derived(asset.visibility === AssetVisibility.Locked);
   let smartSearchEnabled = $derived($featureFlags.loaded && $featureFlags.smartSearch);
 
+  let selected = $derived(assetInteraction.hasSelectedAsset(asset.id));
   // $: showEditorButton =
   //   isOwner &&
   //   asset.type === AssetTypeEnum.Image &&
@@ -122,6 +131,31 @@
     {/if}
   </div>
   <div class="flex gap-2 overflow-x-auto dark" data-testid="asset-viewer-navbar-actions">
+    {#if assetInteraction.selectionActive}
+      <p class="text-lg text-immich-fg dark:text-immich-dark-fg">
+        {#if selected}
+        {$t('selected')}
+        {:else}
+        {$t('select')}
+        {/if}
+      </p>
+      <button
+        type="button"
+        onclick={()=>onSelectAsset(toTimelineAsset(asset))}
+        class={['focus:outline-none']}
+        role="checkbox"
+        tabindex={-1}
+        aria-checked={selected}
+      >
+        {#if selected}
+          <div class="rounded-full bg-[#D9DCEF] dark:bg-[#232932]">
+            <Icon path={mdiCheckCircle} size="24" class="text-primary" />
+          </div>
+        {:else}
+          <Icon path={mdiCheckCircle} size="24" class="text-white/80 hover:text-white" />
+        {/if}
+      </button>
+    {:else}
       <CastButton />
 
       {#if !asset.isTrashed && $user && !isLocked}
@@ -176,7 +210,13 @@
       {#if isOwner}
         <DeleteAction {asset} {onAction} {preAction} />
 
-      <ButtonContextMenu direction="left" align="top-right" color="secondary" title={$t('more')} icon={mdiDotsVertical}>
+        <ButtonContextMenu
+          direction="left"
+          align="top-right"
+          color="secondary"
+          title={$t('more')}
+          icon={mdiDotsVertical}
+        >
           {#if showSlideshow && !isLocked}
             <MenuOption icon={mdiPresentationPlay} text={$t('slideshow')} onClick={onPlaySlideshow} />
           {/if}
@@ -231,7 +271,8 @@
               {#if !asset.isArchived && !asset.isTrashed && smartSearchEnabled}
                 <MenuOption
                   icon={mdiCompare}
-                onClick={() => goto(`${AppRoute.SEARCH}?query={"queryAssetId":"${stack?.primaryAssetId ?? asset.id}"}`)}
+                  onClick={() =>
+                    goto(`${AppRoute.SEARCH}?query={"queryAssetId":"${stack?.primaryAssetId ?? asset.id}"}`)}
                   text={$t('view_similar_photos')}
                 />
               {/if}
@@ -266,5 +307,6 @@
           {/if}
         </ButtonContextMenu>
       {/if}
+    {/if}
   </div>
 </div>

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

@@ -10,6 +10,7 @@
   import { authManager } from '$lib/managers/auth-manager.svelte';
   import type { TimelineAsset } from '$lib/managers/timeline-manager/types';
   import { closeEditorCofirm } from '$lib/stores/asset-editor.store';
+  import { AssetInteraction } from '$lib/stores/asset-interaction.svelte';
   import { assetViewingStore } from '$lib/stores/asset-viewing.store';
   import { isShowDetail } from '$lib/stores/preferences.store';
   import { SlideshowNavigation, SlideshowState, slideshowStore } from '$lib/stores/slideshow.store';
@@ -49,6 +50,7 @@
 
   interface Props {
     asset: AssetResponseDto;
+    assetInteraction: AssetInteraction;
     preloadAssets?: TimelineAsset[];
     showNavigation?: boolean;
     withStacked?: boolean;
@@ -58,6 +60,7 @@
     preAction?: PreAction | undefined;
     onAction?: OnAction | undefined;
     showCloseButton?: boolean;
+    onSelectAsset: (asset: TimelineAsset) => void;
     onClose: (asset: AssetResponseDto) => void;
     onNext: () => Promise<HasAsset>;
     onPrevious: () => Promise<HasAsset>;
@@ -67,6 +70,7 @@
 
   let {
     asset = $bindable(),
+    assetInteraction,
     preloadAssets = $bindable([]),
     showNavigation = true,
     withStacked = false,
@@ -76,6 +80,7 @@
     preAction = undefined,
     onAction = undefined,
     showCloseButton,
+    onSelectAsset,
     onClose,
     onNext,
     onPrevious,
@@ -391,12 +396,14 @@
     <div class="col-span-4 col-start-1 row-span-1 row-start-1 transition-transform">
       <AssetViewerNavBar
         {asset}
+        {assetInteraction}
         {album}
         {person}
         {stack}
         {showCloseButton}
         showDetailButton={enableDetailPanel}
         showSlideshow={true}
+        {onSelectAsset}
         onZoomImage={zoomToggle}
         onCopyImage={copyImage}
         preAction={handlePreAction}
@@ -529,7 +536,7 @@
     </div>
   {/if}
 
-  {#if enableDetailPanel && $slideshowState === SlideshowState.None && $isShowDetail && !isShowEditor}
+  {#if enableDetailPanel && $slideshowState === SlideshowState.None && $isShowDetail && !isShowEditor && !assetInteraction.selectionActive}
     <div
       transition:fly={{ duration: 150 }}
       id="detail-panel"

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

@@ -988,6 +988,8 @@
         onNext={handleNext}
         onRandom={handleRandom}
         onClose={handleClose}
+        onSelectAsset={handleSelectAssets}
+        {assetInteraction}
       />
     {/await}
   {/if}