From 6fe011e2d791c9e4c37c6ff4b86f71068bdac577 Mon Sep 17 00:00:00 2001
From: Alex <alex.tran1502@gmail.com>
Date: Thu, 29 Aug 2024 16:14:52 -0500
Subject: [PATCH] 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>
---
 .../asset-viewer/asset-viewer-nav-bar.svelte       | 10 ++++++++++
 .../components/memory-page/memory-viewer.svelte    | 14 ++++++++++++++
 web/src/lib/i18n/en.json                           |  1 +
 3 files changed, 25 insertions(+)

diff --git a/web/src/lib/components/asset-viewer/asset-viewer-nav-bar.svelte b/web/src/lib/components/asset-viewer/asset-viewer-nav-bar.svelte
index a57a7faef8..0f75f9bb83 100644
--- a/web/src/lib/components/asset-viewer/asset-viewer-nav-bar.svelte
+++ b/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}
diff --git a/web/src/lib/components/memory-page/memory-viewer.svelte b/web/src/lib/components/memory-page/memory-viewer.svelte
index 77dbf5614c..48a6cd1cec 100644
--- a/web/src/lib/components/memory-page/memory-viewer.svelte
+++ b/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">
diff --git a/web/src/lib/i18n/en.json b/web/src/lib/i18n/en.json
index dcefccf2ef..83efc66e32 100644
--- a/web/src/lib/i18n/en.json
+++ b/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",