feat(web): jump to timeline (#12117)

* feat(web): jump to timeline

* Update web/src/lib/components/memory-page/memory-viewer.svelte

Co-authored-by: Michel Heusschen <59014050+michelheusschen@users.noreply.github.com>

* wording and open in new tab

* Use correct wording and icon

* fix: hide on archived and trashed assets

---------

Co-authored-by: Michel Heusschen <59014050+michelheusschen@users.noreply.github.com>
Co-authored-by: Jason Rasmussen <jason@rasm.me>

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

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import { goto } from '$app/navigation';
   import type { OnAction } from '$lib/components/asset-viewer/actions/action';
   import AddToAlbumAction from '$lib/components/asset-viewer/actions/add-to-album-action.svelte';
   import ArchiveAction from '$lib/components/asset-viewer/actions/archive-action.svelte';
@@ -15,6 +16,7 @@
   import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.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 { user } from '$lib/stores/user.store';
   import { photoZoomState } from '$lib/stores/zoom-image.store';
   import { getAssetJobName, getSharedLink } from '$lib/utils';
@@ -33,6 +35,7 @@
     mdiDatabaseRefreshOutline,
     mdiDotsVertical,
     mdiImageRefreshOutline,
+    mdiImageSearch,
     mdiMagnifyMinusOutline,
     mdiMagnifyPlusOutline,
     mdiPresentationPlay,
@@ -156,6 +159,13 @@
             onClick={() => openFileUploadDialog({ multiple: false, assetId: asset.id })}
             text={$t('replace_with_upload')}
           />
+          {#if !asset.isArchived && !asset.isTrashed}
+            <MenuOption
+              icon={mdiImageSearch}
+              onClick={() => goto(`${AppRoute.PHOTOS}?at=${asset.id}`)}
+              text={$t('view_in_timeline')}
+            />
+          {/if}
           <hr />
           <MenuOption
             icon={mdiDatabaseRefreshOutline}

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

@@ -28,6 +28,7 @@
     mdiChevronRight,
     mdiChevronUp,
     mdiDotsVertical,
+    mdiImageSearch,
     mdiPause,
     mdiPlay,
     mdiPlus,
@@ -301,6 +302,19 @@
                 draggable="false"
               />
             {/key}
+
+            <div
+              class="absolute bottom-6 right-6 transition-all"
+              class:opacity-0={galleryInView}
+              class:opacity-100={!galleryInView}
+            >
+              <CircleIconButton
+                href="${AppRoute.PHOTOS}?at=${currentAsset.id}"
+                icon={mdiImageSearch}
+                title={$t('view_in_timeline')}
+                color="light"
+              />
+            </div>
             <!-- CONTROL BUTTONS -->
             {#if canGoBack}
               <div class="absolute top-1/2 left-0 ml-4">

web/src/lib/i18n/en.json

@@ -1259,6 +1259,7 @@
   "view_album": "View Album",
   "view_all": "View All",
   "view_all_users": "View all users",
+  "view_in_timeline": "View in timeline",
   "view_links": "View links",
   "view_next_asset": "View next asset",
   "view_previous_asset": "View previous asset",