feat: locked/private view (#18268)

* feat: locked/private view

* feat: locked/private view

* pr feedback

* fix: redirect loop

* pr feedback

web/src/routes/(user)/locked/[[photos=photos]]/[[assetId=id]]/+page.svelte

@@ -0,0 +1,76 @@
+<script lang="ts">
+  import UserPageLayout from '$lib/components/layouts/user-page-layout.svelte';
+  import ChangeDate from '$lib/components/photos-page/actions/change-date-action.svelte';
+  import ChangeLocation from '$lib/components/photos-page/actions/change-location-action.svelte';
+  import DeleteAssets from '$lib/components/photos-page/actions/delete-assets.svelte';
+  import DownloadAction from '$lib/components/photos-page/actions/download-action.svelte';
+  import SelectAllAssets from '$lib/components/photos-page/actions/select-all-assets.svelte';
+  import SetVisibilityAction from '$lib/components/photos-page/actions/set-visibility-action.svelte';
+  import AssetGrid from '$lib/components/photos-page/asset-grid.svelte';
+  import AssetSelectControlBar from '$lib/components/photos-page/asset-select-control-bar.svelte';
+  import ButtonContextMenu from '$lib/components/shared-components/context-menu/button-context-menu.svelte';
+  import EmptyPlaceholder from '$lib/components/shared-components/empty-placeholder.svelte';
+  import { AssetAction } from '$lib/constants';
+  import { AssetInteraction } from '$lib/stores/asset-interaction.svelte';
+  import { AssetStore } from '$lib/stores/assets-store.svelte';
+  import { AssetVisibility } from '@immich/sdk';
+  import { mdiDotsVertical } from '@mdi/js';
+  import { onDestroy } from 'svelte';
+  import { t } from 'svelte-i18n';
+  import type { PageData } from './$types';
+
+  interface Props {
+    data: PageData;
+  }
+
+  let { data }: Props = $props();
+
+  const assetStore = new AssetStore();
+  void assetStore.updateOptions({ visibility: AssetVisibility.Locked });
+  onDestroy(() => assetStore.destroy());
+
+  const assetInteraction = new AssetInteraction();
+
+  const handleEscape = () => {
+    if (assetInteraction.selectionActive) {
+      assetInteraction.clearMultiselect();
+      return;
+    }
+  };
+
+  const handleMoveOffLockedFolder = (assetIds: string[]) => {
+    assetInteraction.clearMultiselect();
+    assetStore.removeAssets(assetIds);
+  };
+</script>
+
+<!-- Multi-selection mode app bar -->
+{#if assetInteraction.selectionActive}
+  <AssetSelectControlBar
+    assets={assetInteraction.selectedAssets}
+    clearSelect={() => assetInteraction.clearMultiselect()}
+  >
+    <SelectAllAssets withText {assetStore} {assetInteraction} />
+    <SetVisibilityAction unlock onVisibilitySet={handleMoveOffLockedFolder} />
+    <ButtonContextMenu icon={mdiDotsVertical} title={$t('menu')}>
+      <DownloadAction menuItem />
+      <ChangeDate menuItem />
+      <ChangeLocation menuItem />
+      <DeleteAssets menuItem force onAssetDelete={(assetIds) => assetStore.removeAssets(assetIds)} />
+    </ButtonContextMenu>
+  </AssetSelectControlBar>
+{/if}
+
+<UserPageLayout hideNavbar={assetInteraction.selectionActive} title={data.meta.title} scrollbar={false}>
+  <AssetGrid
+    enableRouting={true}
+    {assetStore}
+    {assetInteraction}
+    onEscape={handleEscape}
+    removeAction={AssetAction.SET_VISIBILITY_TIMELINE}
+  >
+    {#snippet empty()}
+      <EmptyPlaceholder text={$t('no_locked_photos_message')} title={$t('nothing_here_yet')} />
+    {/snippet}
+  </AssetGrid>
+</UserPageLayout>

web/src/routes/(user)/locked/[[photos=photos]]/[[assetId=id]]/+page.ts

@@ -0,0 +1,28 @@
+import { AppRoute } from '$lib/constants';
+import { authenticate } from '$lib/utils/auth';
+import { getFormatter } from '$lib/utils/i18n';
+import { getAssetInfoFromParam } from '$lib/utils/navigation';
+import { getAuthStatus } from '@immich/sdk';
+import { redirect } from '@sveltejs/kit';
+import type { PageLoad } from './$types';
+
+export const load = (async ({ params, url }) => {
+  await authenticate();
+  const { isElevated, pinCode } = await getAuthStatus();
+
+  if (!isElevated || !pinCode) {
+    const continuePath = encodeURIComponent(url.pathname);
+    const redirectPath = `${AppRoute.AUTH_PIN_PROMPT}?continue=${continuePath}`;
+
+    redirect(302, redirectPath);
+  }
+  const asset = await getAssetInfoFromParam(params);
+  const $t = await getFormatter();
+
+  return {
+    asset,
+    meta: {
+      title: $t('locked_folder'),
+    },
+  };
+}) satisfies PageLoad;

web/src/routes/(user)/photos/[[assetId=id]]/+page.svelte

@@ -12,6 +12,7 @@
   import FavoriteAction from '$lib/components/photos-page/actions/favorite-action.svelte';
   import LinkLivePhotoAction from '$lib/components/photos-page/actions/link-live-photo-action.svelte';
   import SelectAllAssets from '$lib/components/photos-page/actions/select-all-assets.svelte';
+  import SetVisibilityAction from '$lib/components/photos-page/actions/set-visibility-action.svelte';
   import StackAction from '$lib/components/photos-page/actions/stack-action.svelte';
   import TagAction from '$lib/components/photos-page/actions/tag-action.svelte';
   import AssetGrid from '$lib/components/photos-page/asset-grid.svelte';
@@ -75,6 +76,11 @@
     assetStore.updateAssets([still]);
   };
 
+  const handleSetVisibility = (assetIds: string[]) => {
+    assetStore.removeAssets(assetIds);
+    assetInteraction.clearMultiselect();
+  };
+
   beforeNavigate(() => {
     isFaceEditMode.value = false;
   });
@@ -142,6 +148,7 @@
         <TagAction menuItem />
       {/if}
       <DeleteAssets menuItem onAssetDelete={(assetIds) => assetStore.removeAssets(assetIds)} />
+      <SetVisibilityAction menuItem onVisibilitySet={handleSetVisibility} />
       <hr />
       <AssetJobActions />
     </ButtonContextMenu>