feat: add album keyboard shortcuts (#16442)

* 15712: Added keyboard shortcuts for opening add to album modal and highlighting/selecting an album to add to. * 15712: Re-factored logic from template code into script. Extracted new album button into separate cmponent. * 15712: Document new keyboard shortucts now that they work everywhere. * 15712: Extract some constants/helper functions. * 15712: Missing comma. * 15712: Pulled logic out into separate unit testable class. * 15712: Added a unit test. * 15712: Move the modal back up to keep the github PR happy. * 15712: PR feedback - renamed typescript files and switch to class bind directive. * 15712:Move selection modal into correct package. * 15712: Better naming of module and files.
2025-05-24 01:12:58 -04:00 · 2025-03-03 00:15:00 +11:00 · 2025-03-03 00:15:00 +11:00 · 6bf2e8dbcb
commit 6bf2e8dbcb
parent 366f23774a
9 changed files with 455 additions and 116 deletions
--- a/web/src/lib/components/asset-viewer/actions/add-to-album-action.svelte
+++ b/web/src/lib/components/asset-viewer/actions/add-to-album-action.svelte
@ -1,6 +1,7 @@
 <script lang="ts">
+  import { shortcut } from '$lib/actions/shortcut';
  import type { OnAction } from '$lib/components/asset-viewer/actions/action';
-  import AlbumSelectionModal from '$lib/components/shared-components/album-selection-modal.svelte';
+  import AlbumSelectionModal from '$lib/components/shared-components/album-selection/album-selection-modal.svelte';
  import MenuOption from '$lib/components/shared-components/context-menu/menu-option.svelte';
  import Portal from '$lib/components/shared-components/portal/portal.svelte';
  import { AssetAction } from '$lib/constants';
@ -34,6 +35,10 @@
  };
 </script>

+<svelte:window
+  use:shortcut={{ shortcut: { key: 'l', shift: shared }, onShortcut: () => (showSelectionModal = true) }}
+/>
+
 <MenuOption
  icon={shared ? mdiShareVariantOutline : mdiImageAlbum}
  text={shared ? $t('add_to_shared_album') : $t('add_to_album')}
--- a/web/src/lib/components/asset-viewer/album-list-item.svelte
+++ b/web/src/lib/components/asset-viewer/album-list-item.svelte
@ -3,14 +3,25 @@
  import { type AlbumResponseDto } from '@immich/sdk';
  import { normalizeSearchString } from '$lib/utils/string-utils.js';
  import AlbumListItemDetails from './album-list-item-details.svelte';
+  import type { Action } from 'svelte/action';
+  import { SCROLL_PROPERTIES } from '$lib/components/shared-components/album-selection/album-selection-utils';

  interface Props {
    album: AlbumResponseDto;
    searchQuery?: string;
+    selected: boolean;
    onAlbumClick: () => void;
  }

-  let { album, searchQuery = '', onAlbumClick }: Props = $props();
+  let { album, searchQuery = '', selected = false, onAlbumClick }: Props = $props();
+
+  const scrollIntoViewIfSelected: Action = (node) => {
+    $effect(() => {
+      if (selected) {
+        node.scrollIntoView(SCROLL_PROPERTIES);
+      }
+    });
+  };

  let albumNameArray: string[] = $state(['', '', '']);

@ -31,7 +42,10 @@
 <button
  type="button"
  onclick={onAlbumClick}
+  use:scrollIntoViewIfSelected
  class="flex w-full gap-4 px-6 py-2 text-left transition-colors hover:bg-gray-200 dark:hover:bg-gray-700 rounded-xl"
+  class:bg-gray-200={selected}
+  class:dark:bg-gray-700={selected}
 >
  <span class="h-12 w-12 shrink-0 rounded-xl bg-slate-300">
    {#if album.albumThumbnailAssetId}
--- a/web/src/lib/components/photos-page/actions/add-to-album.svelte
+++ b/web/src/lib/components/photos-page/actions/add-to-album.svelte
@ -1,5 +1,5 @@
 <script lang="ts">
-  import AlbumSelectionModal from '$lib/components/shared-components/album-selection-modal.svelte';
+  import AlbumSelectionModal from '$lib/components/shared-components/album-selection/album-selection-modal.svelte';
  import MenuOption from '$lib/components/shared-components/context-menu/menu-option.svelte';
  import { addAssetsToAlbum, addAssetsToNewAlbum } from '$lib/utils/asset-utils';
  import type { AlbumResponseDto } from '@immich/sdk';
--- a/web/src/lib/components/shared-components/album-selection-modal.svelte
+++ b/web/src/lib/components/shared-components/album-selection-modal.svelte
@ -1,113 +0,0 @@
-<script lang="ts">
-  import Icon from '$lib/components/elements/icon.svelte';
-  import { getAllAlbums, type AlbumResponseDto } from '@immich/sdk';
-  import { mdiPlus } from '@mdi/js';
-  import { onMount } from 'svelte';
-  import AlbumListItem from '../asset-viewer/album-list-item.svelte';
-  import { normalizeSearchString } from '$lib/utils/string-utils';
-  import FullScreenModal from '$lib/components/shared-components/full-screen-modal.svelte';
-  import { initInput } from '$lib/actions/focus';
-  import { t } from 'svelte-i18n';
-  import { sortAlbums } from '$lib/utils/album-utils';
-  import { albumViewSettings } from '$lib/stores/preferences.store';
-
-  let albums: AlbumResponseDto[] = $state([]);
-  let recentAlbums: AlbumResponseDto[] = $state([]);
-  let loading = $state(true);
-  let search = $state('');
-
-  interface Props {
-    onNewAlbum: (search: string) => void;
-    onAlbumClick: (album: AlbumResponseDto) => void;
-    shared: boolean;
-    onClose: () => void;
-  }
-
-  let { onNewAlbum, onAlbumClick, shared, onClose }: Props = $props();
-
-  onMount(async () => {
-    albums = await getAllAlbums({ shared: shared || undefined });
-    recentAlbums = albums.sort((a, b) => (new Date(a.createdAt) > new Date(b.createdAt) ? -1 : 1)).slice(0, 3);
-    loading = false;
-  });
-
-  let filteredAlbums = $derived(
-    sortAlbums(
-      search.length > 0 && albums.length > 0
-        ? albums.filter((album) => {
-            return normalizeSearchString(album.albumName).includes(normalizeSearchString(search));
-          })
-        : albums,
-      { sortBy: $albumViewSettings.sortBy, orderBy: $albumViewSettings.sortOrder },
-    ),
-  );
-
-  const getTitle = () => {
-    if (shared) {
-      return $t('add_to_shared_album');
-    }
-    return $t('add_to_album');
-  };
-</script>
-
-<FullScreenModal title={getTitle()} {onClose}>
-  <div class="mb-2 flex max-h-[400px] flex-col">
-    {#if loading}
-      {#each { length: 3 } as _}
-        <div class="flex animate-pulse gap-4 px-6 py-2">
-          <div class="h-12 w-12 rounded-xl bg-slate-200"></div>
-          <div class="flex flex-col items-start justify-center gap-2">
-            <span class="h-4 w-36 animate-pulse bg-slate-200"></span>
-            <div class="flex animate-pulse gap-1">
-              <span class="h-3 w-8 bg-slate-200"></span>
-              <span class="h-3 w-20 bg-slate-200"></span>
-            </div>
-          </div>
-        </div>
-      {/each}
-    {:else}
-      <input
-        class="border-b-4 border-immich-bg bg-immich-bg px-6 py-2 text-2xl focus:border-immich-primary dark:border-immich-dark-gray dark:bg-immich-dark-gray dark:focus:border-immich-dark-primary"
-        placeholder={$t('search')}
-        bind:value={search}
-        use:initInput
-      />
-      <div class="immich-scrollbar overflow-y-auto">
-        <button
-          type="button"
-          onclick={() => onNewAlbum(search)}
-          class="flex w-full items-center gap-4 px-6 py-2 transition-colors hover:bg-gray-200 dark:hover:bg-gray-700 rounded-xl"
-        >
-          <div class="flex h-12 w-12 items-center justify-center">
-            <Icon path={mdiPlus} size="30" />
-          </div>
-          <p class="">
-            {$t('new_album')}
-            {#if search.length > 0}<b>{search}</b>{/if}
-          </p>
-        </button>
-        {#if filteredAlbums.length > 0}
-          {#if !shared && search.length === 0}
-            <p class="px-5 py-3 text-xs">{$t('recent').toUpperCase()}</p>
-            {#each recentAlbums as album (album.id)}
-              <AlbumListItem {album} onAlbumClick={() => onAlbumClick(album)} />
-            {/each}
-          {/if}
-
-          {#if !shared}
-            <p class="px-5 py-3 text-xs">
-              {(search.length === 0 ? $t('all_albums') : $t('albums')).toUpperCase()}
-            </p>
-          {/if}
-          {#each filteredAlbums as album (album.id)}
-            <AlbumListItem {album} searchQuery={search} onAlbumClick={() => onAlbumClick(album)} />
-          {/each}
-        {:else if albums.length > 0}
-          <p class="px-5 py-1 text-sm">{$t('no_albums_with_name_yet')}</p>
-        {:else}
-          <p class="px-5 py-1 text-sm">{$t('no_albums_yet')}</p>
-        {/if}
-      </div>
-    {/if}
-  </div>
-</FullScreenModal>
--- a/web/src/lib/components/shared-components/album-selection/album-selection-modal.svelte
+++ b/web/src/lib/components/shared-components/album-selection/album-selection-modal.svelte
@ -0,0 +1,126 @@
+<script lang="ts">
+  import { type AlbumResponseDto, getAllAlbums } from '@immich/sdk';
+  import { onMount } from 'svelte';
+  import AlbumListItem from '../../asset-viewer/album-list-item.svelte';
+  import NewAlbumListItem from './new-album-list-item.svelte';
+  import FullScreenModal from '$lib/components/shared-components/full-screen-modal.svelte';
+  import { initInput } from '$lib/actions/focus';
+  import { t } from 'svelte-i18n';
+  import { albumViewSettings } from '$lib/stores/preferences.store';
+  import {
+    AlbumModalRowConverter,
+    AlbumModalRowType,
+    isSelectableRowType,
+  } from '$lib/components/shared-components/album-selection/album-selection-utils';
+
+  let albums: AlbumResponseDto[] = $state([]);
+  let recentAlbums: AlbumResponseDto[] = $state([]);
+  let loading = $state(true);
+  let search = $state('');
+  let selectedRowIndex: number = $state(-1);
+
+  interface Props {
+    onNewAlbum: (search: string) => void;
+    onAlbumClick: (album: AlbumResponseDto) => void;
+    shared: boolean;
+    onClose: () => void;
+  }
+
+  let { onNewAlbum, onAlbumClick, shared, onClose }: Props = $props();
+
+  onMount(async () => {
+    albums = await getAllAlbums({ shared: shared || undefined });
+    recentAlbums = albums.sort((a, b) => (new Date(a.createdAt) > new Date(b.createdAt) ? -1 : 1)).slice(0, 3);
+    loading = false;
+  });
+
+  const rowConverter = new AlbumModalRowConverter(shared, $albumViewSettings.sortBy, $albumViewSettings.sortOrder);
+  const albumModalRows = $derived(rowConverter.toModalRows(search, recentAlbums, albums, selectedRowIndex));
+  const selectableRowCount = $derived(albumModalRows.filter((row) => isSelectableRowType(row.type)).length);
+
+  const onkeydown = (e: KeyboardEvent) => {
+    switch (e.key) {
+      case 'ArrowUp': {
+        e.preventDefault();
+        if (selectedRowIndex > 0) {
+          selectedRowIndex--;
+        } else {
+          selectedRowIndex = selectableRowCount - 1;
+        }
+        break;
+      }
+      case 'ArrowDown': {
+        e.preventDefault();
+        if (selectedRowIndex < selectableRowCount - 1) {
+          selectedRowIndex++;
+        } else {
+          selectedRowIndex = 0;
+        }
+        break;
+      }
+      case 'Enter': {
+        e.preventDefault();
+        const selectedRow = albumModalRows.find((row) => row.selected);
+        if (selectedRow) {
+          if (selectedRow.type === AlbumModalRowType.NEW_ALBUM) {
+            onNewAlbum(search);
+          } else if (selectedRow.type === AlbumModalRowType.ALBUM_ITEM && selectedRow.album) {
+            onAlbumClick(selectedRow.album);
+          }
+          selectedRowIndex = -1;
+        }
+        break;
+      }
+      default: {
+        selectedRowIndex = -1;
+      }
+    }
+  };
+
+  const handleAlbumClick = (album: AlbumResponseDto) => () => onAlbumClick(album);
+</script>
+
+<FullScreenModal title={shared ? $t('add_to_shared_album') : $t('add_to_album')} {onClose}>
+  <div class="mb-2 flex max-h-[400px] flex-col">
+    {#if loading}
+      {#each { length: 3 } as _}
+        <div class="flex animate-pulse gap-4 px-6 py-2">
+          <div class="h-12 w-12 rounded-xl bg-slate-200"></div>
+          <div class="flex flex-col items-start justify-center gap-2">
+            <span class="h-4 w-36 animate-pulse bg-slate-200"></span>
+            <div class="flex animate-pulse gap-1">
+              <span class="h-3 w-8 bg-slate-200"></span>
+              <span class="h-3 w-20 bg-slate-200"></span>
+            </div>
+          </div>
+        </div>
+      {/each}
+    {:else}
+      <input
+        class="border-b-4 border-immich-bg bg-immich-bg px-6 py-2 text-2xl focus:border-immich-primary dark:border-immich-dark-gray dark:bg-immich-dark-gray dark:focus:border-immich-dark-primary"
+        placeholder={$t('search')}
+        {onkeydown}
+        bind:value={search}
+        use:initInput
+      />
+      <div class="immich-scrollbar overflow-y-auto">
+        {#each albumModalRows as row}
+          {#if row.type === AlbumModalRowType.NEW_ALBUM}
+            <NewAlbumListItem selected={row.selected || false} {onNewAlbum} searchQuery={search} />
+          {:else if row.type === AlbumModalRowType.SECTION}
+            <p class="px-5 py-3 text-xs">{row.text}</p>
+          {:else if row.type === AlbumModalRowType.MESSAGE}
+            <p class="px-5 py-1 text-sm">{row.text}</p>
+          {:else if row.type === AlbumModalRowType.ALBUM_ITEM && row.album}
+            <AlbumListItem
+              album={row.album}
+              selected={row.selected || false}
+              searchQuery={search}
+              onAlbumClick={handleAlbumClick(row.album)}
+            />
+          {/if}
+        {/each}
+      </div>
+    {/if}
+  </div>
+</FullScreenModal>
--- a/web/src/lib/components/shared-components/album-selection/album-selection-utils.spec.ts
+++ b/web/src/lib/components/shared-components/album-selection/album-selection-utils.spec.ts
@ -0,0 +1,171 @@
+import {
+  type AlbumModalRow,
+  AlbumModalRowConverter,
+  AlbumModalRowType,
+} from '$lib/components/shared-components/album-selection/album-selection-utils';
+import { AlbumSortBy, SortOrder } from '$lib/stores/preferences.store';
+import type { AlbumResponseDto } from '@immich/sdk';
+import { albumFactory } from '@test-data/factories/album-factory';
+
+// Some helper functions to make tests below more readable
+const createNewAlbumRow = (selected: boolean) => ({
+  type: AlbumModalRowType.NEW_ALBUM,
+  selected,
+});
+const createMessageRow = (message: string): AlbumModalRow => ({
+  type: AlbumModalRowType.MESSAGE,
+  text: message,
+});
+const createSectionRow = (message: string): AlbumModalRow => ({
+  type: AlbumModalRowType.SECTION,
+  text: message,
+});
+const createAlbumRow = (album: AlbumResponseDto, selected: boolean) => ({
+  type: AlbumModalRowType.ALBUM_ITEM,
+  album,
+  selected,
+});
+
+describe('Album Modal', () => {
+  it('non-shared with no albums configured yet shows message and new', () => {
+    const converter = new AlbumModalRowConverter(false, AlbumSortBy.MostRecentPhoto, SortOrder.Desc);
+    const modalRows = converter.toModalRows('', [], [], -1);
+
+    expect(modalRows).toStrictEqual([createNewAlbumRow(false), createMessageRow('no_albums_yet')]);
+  });
+
+  it('non-shared with no matching albums shows message and new', () => {
+    const converter = new AlbumModalRowConverter(false, AlbumSortBy.MostRecentPhoto, SortOrder.Desc);
+    const modalRows = converter.toModalRows('matches_nothing', [], [albumFactory.build({ albumName: 'Holidays' })], -1);
+
+    expect(modalRows).toStrictEqual([createNewAlbumRow(false), createMessageRow('no_albums_with_name_yet')]);
+  });
+
+  it('non-shared displays single albums', () => {
+    const converter = new AlbumModalRowConverter(false, AlbumSortBy.MostRecentPhoto, SortOrder.Desc);
+    const holidayAlbum = albumFactory.build({ albumName: 'Holidays' });
+    const modalRows = converter.toModalRows('', [], [holidayAlbum], -1);
+
+    expect(modalRows).toStrictEqual([
+      createNewAlbumRow(false),
+      createSectionRow('ALL_ALBUMS'),
+      createAlbumRow(holidayAlbum, false),
+    ]);
+  });
+
+  it('non-shared displays multiple albums and recents', () => {
+    const converter = new AlbumModalRowConverter(false, AlbumSortBy.MostRecentPhoto, SortOrder.Desc);
+    const holidayAlbum = albumFactory.build({ albumName: 'Holidays' });
+    const constructionAlbum = albumFactory.build({ albumName: 'Construction' });
+    const birthdayAlbum = albumFactory.build({ albumName: 'Birthday' });
+    const christmasAlbum = albumFactory.build({ albumName: 'Christmas' });
+    const modalRows = converter.toModalRows(
+      '',
+      [holidayAlbum, constructionAlbum],
+      [holidayAlbum, constructionAlbum, birthdayAlbum, christmasAlbum],
+      -1,
+    );
+
+    expect(modalRows).toStrictEqual([
+      createNewAlbumRow(false),
+      createSectionRow('RECENT'),
+      createAlbumRow(holidayAlbum, false),
+      createAlbumRow(constructionAlbum, false),
+      createSectionRow('ALL_ALBUMS'),
+      createAlbumRow(holidayAlbum, false),
+      createAlbumRow(constructionAlbum, false),
+      createAlbumRow(birthdayAlbum, false),
+      createAlbumRow(christmasAlbum, false),
+    ]);
+  });
+
+  it('shared only displays albums and no recents', () => {
+    const converter = new AlbumModalRowConverter(true, AlbumSortBy.MostRecentPhoto, SortOrder.Desc);
+    const holidayAlbum = albumFactory.build({ albumName: 'Holidays' });
+    const constructionAlbum = albumFactory.build({ albumName: 'Construction' });
+    const birthdayAlbum = albumFactory.build({ albumName: 'Birthday' });
+    const christmasAlbum = albumFactory.build({ albumName: 'Christmas' });
+    const modalRows = converter.toModalRows(
+      '',
+      [holidayAlbum, constructionAlbum],
+      [holidayAlbum, constructionAlbum, birthdayAlbum, christmasAlbum],
+      -1,
+    );
+
+    expect(modalRows).toStrictEqual([
+      createNewAlbumRow(false),
+      createAlbumRow(holidayAlbum, false),
+      createAlbumRow(constructionAlbum, false),
+      createAlbumRow(birthdayAlbum, false),
+      createAlbumRow(christmasAlbum, false),
+    ]);
+  });
+
+  it('search changes messaging and removes recent and non-matching albums', () => {
+    const converter = new AlbumModalRowConverter(false, AlbumSortBy.MostRecentPhoto, SortOrder.Desc);
+    const holidayAlbum = albumFactory.build({ albumName: 'Holidays' });
+    const constructionAlbum = albumFactory.build({ albumName: 'Construction' });
+    const birthdayAlbum = albumFactory.build({ albumName: 'Birthday' });
+    const christmasAlbum = albumFactory.build({ albumName: 'Christmas' });
+    const modalRows = converter.toModalRows(
+      'Cons',
+      [holidayAlbum, constructionAlbum],
+      [holidayAlbum, constructionAlbum, birthdayAlbum, christmasAlbum],
+      -1,
+    );
+
+    expect(modalRows).toStrictEqual([
+      createNewAlbumRow(false),
+      createSectionRow('ALBUMS'),
+      createAlbumRow(constructionAlbum, false),
+    ]);
+  });
+
+  it('selection can select new album row', () => {
+    const converter = new AlbumModalRowConverter(false, AlbumSortBy.MostRecentPhoto, SortOrder.Desc);
+    const holidayAlbum = albumFactory.build({ albumName: 'Holidays' });
+    const constructionAlbum = albumFactory.build({ albumName: 'Construction' });
+    const modalRows = converter.toModalRows('', [holidayAlbum], [holidayAlbum, constructionAlbum], 0);
+
+    expect(modalRows).toStrictEqual([
+      createNewAlbumRow(true),
+      createSectionRow('RECENT'),
+      createAlbumRow(holidayAlbum, false),
+      createSectionRow('ALL_ALBUMS'),
+      createAlbumRow(holidayAlbum, false),
+      createAlbumRow(constructionAlbum, false),
+    ]);
+  });
+
+  it('selection can select recent row', () => {
+    const converter = new AlbumModalRowConverter(false, AlbumSortBy.MostRecentPhoto, SortOrder.Desc);
+    const holidayAlbum = albumFactory.build({ albumName: 'Holidays' });
+    const constructionAlbum = albumFactory.build({ albumName: 'Construction' });
+    const modalRows = converter.toModalRows('', [holidayAlbum], [holidayAlbum, constructionAlbum], 1);
+
+    expect(modalRows).toStrictEqual([
+      createNewAlbumRow(false),
+      createSectionRow('RECENT'),
+      createAlbumRow(holidayAlbum, true),
+      createSectionRow('ALL_ALBUMS'),
+      createAlbumRow(holidayAlbum, false),
+      createAlbumRow(constructionAlbum, false),
+    ]);
+  });
+
+  it('selection can select last row', () => {
+    const converter = new AlbumModalRowConverter(false, AlbumSortBy.MostRecentPhoto, SortOrder.Desc);
+    const holidayAlbum = albumFactory.build({ albumName: 'Holidays' });
+    const constructionAlbum = albumFactory.build({ albumName: 'Construction' });
+    const modalRows = converter.toModalRows('', [holidayAlbum], [holidayAlbum, constructionAlbum], 3);
+
+    expect(modalRows).toStrictEqual([
+      createNewAlbumRow(false),
+      createSectionRow('RECENT'),
+      createAlbumRow(holidayAlbum, false),
+      createSectionRow('ALL_ALBUMS'),
+      createAlbumRow(holidayAlbum, false),
+      createAlbumRow(constructionAlbum, true),
+    ]);
+  });
+});
--- a/web/src/lib/components/shared-components/album-selection/album-selection-utils.ts
+++ b/web/src/lib/components/shared-components/album-selection/album-selection-utils.ts
@ -0,0 +1,94 @@
+import { sortAlbums } from '$lib/utils/album-utils';
+import { normalizeSearchString } from '$lib/utils/string-utils';
+import type { AlbumResponseDto } from '@immich/sdk';
+import { t } from 'svelte-i18n';
+import { get } from 'svelte/store';
+
+export const SCROLL_PROPERTIES: ScrollIntoViewOptions = { block: 'center', behavior: 'smooth' };
+
+export enum AlbumModalRowType {
+  SECTION = 'section',
+  MESSAGE = 'message',
+  NEW_ALBUM = 'newAlbum',
+  ALBUM_ITEM = 'albumItem',
+}
+
+export type AlbumModalRow = {
+  type: AlbumModalRowType;
+  selected?: boolean;
+  text?: string;
+  album?: AlbumResponseDto;
+};
+
+export const isSelectableRowType = (type: AlbumModalRowType) =>
+  type === AlbumModalRowType.NEW_ALBUM || type === AlbumModalRowType.ALBUM_ITEM;
+
+const $t = get(t);
+
+export class AlbumModalRowConverter {
+  private readonly shared: boolean;
+  private readonly sortBy: string;
+  private readonly orderBy: string;
+
+  constructor(shared: boolean, sortBy: string, orderBy: string) {
+    this.shared = shared;
+    this.sortBy = sortBy;
+    this.orderBy = orderBy;
+  }
+
+  toModalRows(
+    search: string,
+    recentAlbums: AlbumResponseDto[],
+    albums: AlbumResponseDto[],
+    selectedRowIndex: number,
+  ): AlbumModalRow[] {
+    // only show recent albums if no search was entered, or we're in the normal albums (non-shared) modal.
+    const recentAlbumsToShow = !this.shared && search.length === 0 ? recentAlbums : [];
+    const rows: AlbumModalRow[] = [];
+    rows.push({ type: AlbumModalRowType.NEW_ALBUM, selected: selectedRowIndex === 0 });
+
+    const filteredAlbums = sortAlbums(
+      search.length > 0 && albums.length > 0
+        ? albums.filter((album) => {
+            return normalizeSearchString(album.albumName).includes(normalizeSearchString(search));
+          })
+        : albums,
+      { sortBy: this.sortBy, orderBy: this.orderBy },
+    );
+
+    if (filteredAlbums.length > 0) {
+      if (recentAlbumsToShow.length > 0) {
+        rows.push({ type: AlbumModalRowType.SECTION, text: $t('recent').toUpperCase() });
+        const selectedOffsetDueToNewAlbumRow = 1;
+        for (const [i, album] of recentAlbums.entries()) {
+          rows.push({
+            type: AlbumModalRowType.ALBUM_ITEM,
+            selected: selectedRowIndex === i + selectedOffsetDueToNewAlbumRow,
+            album,
+          });
+        }
+      }
+
+      if (!this.shared) {
+        rows.push({
+          type: AlbumModalRowType.SECTION,
+          text: (search.length === 0 ? $t('all_albums') : $t('albums')).toUpperCase(),
+        });
+      }
+
+      const selectedOffsetDueToNewAndRecents = 1 + recentAlbumsToShow.length;
+      for (const [i, album] of filteredAlbums.entries()) {
+        rows.push({
+          type: AlbumModalRowType.ALBUM_ITEM,
+          selected: selectedRowIndex === i + selectedOffsetDueToNewAndRecents,
+          album,
+        });
+      }
+    } else if (albums.length > 0) {
+      rows.push({ type: AlbumModalRowType.MESSAGE, text: $t('no_albums_with_name_yet') });
+    } else {
+      rows.push({ type: AlbumModalRowType.MESSAGE, text: $t('no_albums_yet') });
+    }
+    return rows;
+  }
+}
--- a/web/src/lib/components/shared-components/album-selection/new-album-list-item.svelte
+++ b/web/src/lib/components/shared-components/album-selection/new-album-list-item.svelte
@ -0,0 +1,40 @@
+<script lang="ts">
+  import type { Action } from 'svelte/action';
+  import { mdiPlus } from '@mdi/js';
+  import { t } from 'svelte-i18n';
+  import Icon from '$lib/components/elements/icon.svelte';
+  import { SCROLL_PROPERTIES } from '$lib/components/shared-components/album-selection/album-selection-utils';
+
+  interface Props {
+    searchQuery?: string;
+    selected: boolean;
+    onNewAlbum: (search: string) => void;
+  }
+
+  let { searchQuery = '', selected = false, onNewAlbum }: Props = $props();
+
+  const scrollIntoViewIfSelected: Action = (node) => {
+    $effect(() => {
+      if (selected) {
+        node.scrollIntoView(SCROLL_PROPERTIES);
+      }
+    });
+  };
+</script>
+
+<button
+  type="button"
+  onclick={() => onNewAlbum(searchQuery)}
+  use:scrollIntoViewIfSelected
+  class="flex w-full items-center gap-4 px-6 py-2 transition-colors hover:bg-gray-200 dark:hover:bg-gray-700 rounded-xl"
+  class:bg-gray-200={selected}
+  class:dark:bg-gray-700={selected}
+>
+  <div class="flex h-12 w-12 items-center justify-center">
+    <Icon path={mdiPlus} size="30" />
+  </div>
+  <p class="">
+    {$t('new_album')}
+    {#if searchQuery.length > 0}<b>{searchQuery}</b>{/if}
+  </p>
+</button>
--- a/web/src/lib/components/shared-components/show-shortcuts.svelte
+++ b/web/src/lib/components/shared-components/show-shortcuts.svelte
@ -33,6 +33,8 @@
        { key: ['f'], action: $t('favorite_or_unfavorite_photo') },
        { key: ['i'], action: $t('show_or_hide_info') },
        { key: ['s'], action: $t('stack_selected_photos') },
+        { key: ['l'], action: $t('add_to_album') },
+        { key: ['⇧', 'l'], action: $t('add_to_shared_album') },
        { key: ['⇧', 'a'], action: $t('archive_or_unarchive_photo') },
        { key: ['⇧', 'd'], action: $t('download') },
        { key: ['Space'], action: $t('play_or_pause_video') },