From 09791092dac03bf166e6b8d2e07131bec5f2bbf3 Mon Sep 17 00:00:00 2001
From: Alex Tran <alex.tran1502@gmail.com>
Date: Sat, 2 May 2026 15:43:12 -0500
Subject: [PATCH] feat: toggle show in timeline in partner's page

---
 .../[[assetId=id]]/+page.svelte               | 23 +++++++++++++++++--
 .../[[photos=photos]]/[[assetId=id]]/+page.ts |  9 ++++++--
 2 files changed, 28 insertions(+), 4 deletions(-)

diff --git a/web/src/routes/(user)/partners/[userId]/[[photos=photos]]/[[assetId=id]]/+page.svelte b/web/src/routes/(user)/partners/[userId]/[[photos=photos]]/[[assetId=id]]/+page.svelte
index 6cb60bafbe..219f93f997 100644
--- a/web/src/routes/(user)/partners/[userId]/[[photos=photos]]/[[assetId=id]]/+page.svelte
+++ b/web/src/routes/(user)/partners/[userId]/[[photos=photos]]/[[assetId=id]]/+page.svelte
@@ -8,8 +8,9 @@
   import { assetMultiSelectManager } from '$lib/managers/asset-multi-select-manager.svelte';
   import { Route } from '$lib/route';
   import { getAssetBulkActions } from '$lib/services/asset.service';
-  import { AssetVisibility } from '@immich/sdk';
-  import { ActionButton, CommandPaletteDefaultProvider } from '@immich/ui';
+  import { handleError } from '$lib/utils/handle-error';
+  import { AssetVisibility, updatePartner } from '@immich/sdk';
+  import { ActionButton, CommandPaletteDefaultProvider, Switch } from '@immich/ui';
   import { mdiArrowLeft } from '@mdi/js';
   import { t } from 'svelte-i18n';
   import type { PageData } from './$types';
@@ -20,6 +21,8 @@
 
   let { data }: Props = $props();
 
+  let inTimeline = $derived(data.inTimeline);
+
   const options = $derived({
     userId: data.partner.id,
     visibility: AssetVisibility.Timeline,
@@ -32,6 +35,16 @@
       return;
     }
   };
+
+  const handleToggleInTimeline = async (status: boolean) => {
+    try {
+      await updatePartner({ id: data.partner.id, partnerUpdateDto: { inTimeline: status } });
+      inTimeline = status;
+    } catch (error) {
+      handleError(error, $t('errors.unable_to_update_timeline_display_status'));
+      inTimeline = !status;
+    }
+  };
 </script>
 
 <main class="relative h-dvh overflow-hidden px-2 pt-(--navbar-height) max-md:pt-(--navbar-height-md) md:px-6">
@@ -53,5 +66,11 @@
         {$t('partner_list_user_photos', { values: { user: data.partner.name } })}
       </p>
     {/snippet}
+    {#snippet trailing()}
+      <label class="flex items-center gap-2 text-sm whitespace-nowrap text-immich-fg dark:text-immich-dark-fg">
+        {$t('show_in_timeline')}
+        <Switch bind:checked={inTimeline} onCheckedChange={handleToggleInTimeline} />
+      </label>
+    {/snippet}
   </ControlAppBar>
 {/if}
diff --git a/web/src/routes/(user)/partners/[userId]/[[photos=photos]]/[[assetId=id]]/+page.ts b/web/src/routes/(user)/partners/[userId]/[[photos=photos]]/[[assetId=id]]/+page.ts
index 3ba90a3d04..f5b78b64e8 100644
--- a/web/src/routes/(user)/partners/[userId]/[[photos=photos]]/[[assetId=id]]/+page.ts
+++ b/web/src/routes/(user)/partners/[userId]/[[photos=photos]]/[[assetId=id]]/+page.ts
@@ -1,4 +1,4 @@
-import { getUser } from '@immich/sdk';
+import { getPartners, getUser, PartnerDirection } from '@immich/sdk';
 import { authenticate } from '$lib/utils/auth';
 import { getFormatter } from '$lib/utils/i18n';
 import type { PageLoad } from './$types';
@@ -6,11 +6,16 @@ import type { PageLoad } from './$types';
 export const load = (async ({ params, url }) => {
   await authenticate(url);
 
-  const partner = await getUser({ id: params.userId });
+  const [partner, sharedWith] = await Promise.all([
+    getUser({ id: params.userId }),
+    getPartners({ direction: PartnerDirection.SharedWith }),
+  ]);
+  const inTimeline = sharedWith.find((p) => p.id === params.userId)?.inTimeline ?? false;
   const $t = await getFormatter();
 
   return {
     partner,
+    inTimeline,
     meta: {
       title: $t('partner'),
     },