feat: locked/private view (#18268)

* feat: locked/private view

* feat: locked/private view

* pr feedback

* fix: redirect loop

* pr feedback

web/src/lib/components/photos-page/actions/delete-assets.svelte

@@ -1,12 +1,12 @@
 <script lang="ts">
   import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
+  import { featureFlags } from '$lib/stores/server-config.store';
+  import { type OnDelete, deleteAssets } from '$lib/utils/actions';
+  import { mdiDeleteForeverOutline, mdiDeleteOutline, mdiTimerSand } from '@mdi/js';
+  import { t } from 'svelte-i18n';
   import MenuOption from '../../shared-components/context-menu/menu-option.svelte';
   import { getAssetControlContext } from '../asset-select-control-bar.svelte';
-  import { featureFlags } from '$lib/stores/server-config.store';
-  import { mdiTimerSand, mdiDeleteOutline, mdiDeleteForeverOutline } from '@mdi/js';
-  import { type OnDelete, deleteAssets } from '$lib/utils/actions';
   import DeleteAssetDialog from '../delete-asset-dialog.svelte';
-  import { t } from 'svelte-i18n';
 
   interface Props {
     onAssetDelete: OnDelete;

web/src/lib/components/photos-page/actions/select-all-assets.svelte

@@ -1,17 +1,19 @@
 <script lang="ts">
   import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
-  import { type AssetStore, isSelectingAllAssets } from '$lib/stores/assets-store.svelte';
-  import { mdiSelectAll, mdiSelectRemove } from '@mdi/js';
-  import { selectAllAssets, cancelMultiselect } from '$lib/utils/asset-utils';
-  import { t } from 'svelte-i18n';
   import type { AssetInteraction } from '$lib/stores/asset-interaction.svelte';
+  import { type AssetStore, isSelectingAllAssets } from '$lib/stores/assets-store.svelte';
+  import { cancelMultiselect, selectAllAssets } from '$lib/utils/asset-utils';
+  import { Button } from '@immich/ui';
+  import { mdiSelectAll, mdiSelectRemove } from '@mdi/js';
+  import { t } from 'svelte-i18n';
 
   interface Props {
     assetStore: AssetStore;
     assetInteraction: AssetInteraction;
+    withText?: boolean;
   }
 
-  let { assetStore, assetInteraction }: Props = $props();
+  let { assetStore, assetInteraction, withText = false }: Props = $props();
 
   const handleSelectAll = async () => {
     await selectAllAssets(assetStore, assetInteraction);
@@ -22,8 +24,20 @@
   };
 </script>
 
-{#if $isSelectingAllAssets}
-  <CircleIconButton title={$t('unselect_all')} icon={mdiSelectRemove} onclick={handleCancel} />
+{#if withText}
+  <Button
+    leadingIcon={$isSelectingAllAssets ? mdiSelectRemove : mdiSelectAll}
+    size="medium"
+    color="secondary"
+    variant="ghost"
+    onclick={$isSelectingAllAssets ? handleCancel : handleSelectAll}
+  >
+    {$isSelectingAllAssets ? $t('unselect_all') : $t('select_all')}
+  </Button>
 {:else}
-  <CircleIconButton title={$t('select_all')} icon={mdiSelectAll} onclick={handleSelectAll} />
+  <CircleIconButton
+    title={$isSelectingAllAssets ? $t('unselect_all') : $t('select_all')}
+    icon={$isSelectingAllAssets ? mdiSelectRemove : mdiSelectAll}
+    onclick={$isSelectingAllAssets ? handleCancel : handleSelectAll}
+  />
 {/if}

web/src/lib/components/photos-page/actions/set-visibility-action.svelte

@@ -0,0 +1,72 @@
+<script lang="ts">
+  import { getAssetControlContext } from '$lib/components/photos-page/asset-select-control-bar.svelte';
+  import MenuOption from '$lib/components/shared-components/context-menu/menu-option.svelte';
+  import { modalManager } from '$lib/managers/modal-manager.svelte';
+
+  import type { OnSetVisibility } from '$lib/utils/actions';
+  import { handleError } from '$lib/utils/handle-error';
+  import { AssetVisibility, updateAssets } from '@immich/sdk';
+  import { Button } from '@immich/ui';
+  import { mdiEyeOffOutline, mdiFolderMoveOutline } from '@mdi/js';
+  import { t } from 'svelte-i18n';
+
+  interface Props {
+    onVisibilitySet: OnSetVisibility;
+    menuItem?: boolean;
+    unlock?: boolean;
+  }
+
+  let { onVisibilitySet, menuItem = false, unlock = false }: Props = $props();
+  let loading = $state(false);
+  const { getAssets } = getAssetControlContext();
+
+  const setLockedVisibility = async () => {
+    const isConfirmed = await modalManager.showDialog({
+      title: unlock ? $t('remove_from_locked_folder') : $t('move_to_locked_folder'),
+      prompt: unlock ? $t('remove_from_locked_folder_confirmation') : $t('move_to_locked_folder_confirmation'),
+      confirmText: $t('move'),
+      confirmColor: unlock ? 'danger' : 'primary',
+    });
+
+    if (!isConfirmed) {
+      return;
+    }
+
+    try {
+      loading = true;
+      const assetIds = getAssets().map(({ id }) => id);
+
+      await updateAssets({
+        assetBulkUpdateDto: {
+          ids: assetIds,
+          visibility: unlock ? AssetVisibility.Timeline : AssetVisibility.Locked,
+        },
+      });
+
+      onVisibilitySet(assetIds);
+    } catch (error) {
+      handleError(error, $t('errors.unable_to_save_settings'));
+    } finally {
+      loading = false;
+    }
+  };
+</script>
+
+{#if menuItem}
+  <MenuOption
+    onClick={setLockedVisibility}
+    text={unlock ? $t('move_off_locked_folder') : $t('add_to_locked_folder')}
+    icon={unlock ? mdiFolderMoveOutline : mdiEyeOffOutline}
+  />
+{:else}
+  <Button
+    leadingIcon={unlock ? mdiFolderMoveOutline : mdiEyeOffOutline}
+    disabled={loading}
+    size="medium"
+    color="secondary"
+    variant="ghost"
+    onclick={setLockedVisibility}
+  >
+    {unlock ? $t('move_off_locked_folder') : $t('add_to_locked_folder')}
+  </Button>
+{/if}