From 832d728940be054a79047407da4a1abbdb9a0733 Mon Sep 17 00:00:00 2001
From: martin <74269598+martabal@users.noreply.github.com>
Date: Thu, 23 May 2024 19:56:48 +0200
Subject: [PATCH] refactor(web): svelte actions (#9701)

---
 web/src/lib/{utils => actions}/autogrow.ts                  | 0
 web/src/lib/{utils => actions}/click-outside.ts             | 2 +-
 web/src/lib/{utils => actions}/focus-outside.ts             | 0
 web/src/lib/actions/focus.ts                                | 3 +++
 web/src/lib/{utils => actions}/list-navigation.ts           | 2 +-
 web/src/lib/{utils => actions}/shortcut.ts                  | 0
 web/src/lib/components/album-page/album-description.svelte  | 4 ++--
 web/src/lib/components/album-page/album-title.svelte        | 2 +-
 web/src/lib/components/album-page/album-viewer.svelte       | 2 +-
 web/src/lib/components/asset-viewer/activity-viewer.svelte  | 6 +++---
 .../lib/components/asset-viewer/asset-viewer-nav-bar.svelte | 2 +-
 web/src/lib/components/asset-viewer/asset-viewer.svelte     | 2 +-
 web/src/lib/components/asset-viewer/detail-panel.svelte     | 6 +++---
 web/src/lib/components/asset-viewer/photo-viewer.svelte     | 2 +-
 web/src/lib/components/assets/thumbnail/thumbnail.svelte    | 2 +-
 web/src/lib/components/elements/dropdown.svelte             | 2 +-
 web/src/lib/components/faces-page/people-search.svelte      | 5 +----
 web/src/lib/components/memory-page/memory-viewer.svelte     | 2 +-
 web/src/lib/components/photos-page/asset-grid.svelte        | 2 +-
 .../components/photos-page/asset-select-context-menu.svelte | 2 +-
 .../shared-components/album-selection-modal.svelte          | 2 ++
 .../lib/components/shared-components/change-location.svelte | 4 ++--
 web/src/lib/components/shared-components/combobox.svelte    | 6 +++---
 .../shared-components/context-menu/context-menu.svelte      | 2 +-
 web/src/lib/components/shared-components/focus-trap.svelte  | 2 +-
 .../components/shared-components/full-screen-modal.svelte   | 2 +-
 .../shared-components/navigation-bar/navigation-bar.svelte  | 2 +-
 .../shared-components/search-bar/search-bar.svelte          | 6 +++---
 .../[[photos=photos]]/[[assetId=id]]/+page.svelte           | 2 +-
 web/src/routes/(user)/people/+page.svelte                   | 2 +-
 .../[[photos=photos]]/[[assetId=id]]/+page.svelte           | 4 ++--
 .../search/[[photos=photos]]/[[assetId=id]]/+page.svelte    | 2 +-
 32 files changed, 43 insertions(+), 41 deletions(-)
 rename web/src/lib/{utils => actions}/autogrow.ts (100%)
 rename web/src/lib/{utils => actions}/click-outside.ts (95%)
 rename web/src/lib/{utils => actions}/focus-outside.ts (100%)
 create mode 100644 web/src/lib/actions/focus.ts
 rename web/src/lib/{utils => actions}/list-navigation.ts (95%)
 rename web/src/lib/{utils => actions}/shortcut.ts (100%)

diff --git a/web/src/lib/utils/autogrow.ts b/web/src/lib/actions/autogrow.ts
similarity index 100%
rename from web/src/lib/utils/autogrow.ts
rename to web/src/lib/actions/autogrow.ts
diff --git a/web/src/lib/utils/click-outside.ts b/web/src/lib/actions/click-outside.ts
similarity index 95%
rename from web/src/lib/utils/click-outside.ts
rename to web/src/lib/actions/click-outside.ts
index e04bc11fdf..ddb648a4f2 100644
--- a/web/src/lib/utils/click-outside.ts
+++ b/web/src/lib/actions/click-outside.ts
@@ -1,5 +1,5 @@
+import { matchesShortcut } from '$lib/actions/shortcut';
 import type { ActionReturn } from 'svelte/action';
-import { matchesShortcut } from './shortcut';
 
 interface Attributes {
   /** @deprecated */
diff --git a/web/src/lib/utils/focus-outside.ts b/web/src/lib/actions/focus-outside.ts
similarity index 100%
rename from web/src/lib/utils/focus-outside.ts
rename to web/src/lib/actions/focus-outside.ts
diff --git a/web/src/lib/actions/focus.ts b/web/src/lib/actions/focus.ts
new file mode 100644
index 0000000000..81185625f7
--- /dev/null
+++ b/web/src/lib/actions/focus.ts
@@ -0,0 +1,3 @@
+export const initInput = (element: HTMLInputElement) => {
+  element.focus();
+};
diff --git a/web/src/lib/utils/list-navigation.ts b/web/src/lib/actions/list-navigation.ts
similarity index 95%
rename from web/src/lib/utils/list-navigation.ts
rename to web/src/lib/actions/list-navigation.ts
index dff958d757..b981f67521 100644
--- a/web/src/lib/utils/list-navigation.ts
+++ b/web/src/lib/actions/list-navigation.ts
@@ -1,5 +1,5 @@
+import { shortcuts } from '$lib/actions/shortcut';
 import type { Action } from 'svelte/action';
-import { shortcuts } from './shortcut';
 
 export const listNavigation: Action<HTMLElement, HTMLElement> = (node, container: HTMLElement) => {
   const moveFocus = (direction: 'up' | 'down') => {
diff --git a/web/src/lib/utils/shortcut.ts b/web/src/lib/actions/shortcut.ts
similarity index 100%
rename from web/src/lib/utils/shortcut.ts
rename to web/src/lib/actions/shortcut.ts
diff --git a/web/src/lib/components/album-page/album-description.svelte b/web/src/lib/components/album-page/album-description.svelte
index 28e726593d..1d7add6883 100644
--- a/web/src/lib/components/album-page/album-description.svelte
+++ b/web/src/lib/components/album-page/album-description.svelte
@@ -1,8 +1,8 @@
 <script lang="ts">
-  import { autoGrowHeight } from '$lib/utils/autogrow';
+  import { autoGrowHeight } from '$lib/actions/autogrow';
   import { updateAlbumInfo } from '@immich/sdk';
   import { handleError } from '$lib/utils/handle-error';
-  import { shortcut } from '$lib/utils/shortcut';
+  import { shortcut } from '$lib/actions/shortcut';
 
   export let id: string;
   export let description: string;
diff --git a/web/src/lib/components/album-page/album-title.svelte b/web/src/lib/components/album-page/album-title.svelte
index 2725bb8921..1d32f3932f 100644
--- a/web/src/lib/components/album-page/album-title.svelte
+++ b/web/src/lib/components/album-page/album-title.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
   import { updateAlbumInfo } from '@immich/sdk';
   import { handleError } from '$lib/utils/handle-error';
-  import { shortcut } from '$lib/utils/shortcut';
+  import { shortcut } from '$lib/actions/shortcut';
 
   export let id: string;
   export let albumName: string;
diff --git a/web/src/lib/components/album-page/album-viewer.svelte b/web/src/lib/components/album-page/album-viewer.svelte
index 8f107d47a1..07fcc58834 100644
--- a/web/src/lib/components/album-page/album-viewer.svelte
+++ b/web/src/lib/components/album-page/album-viewer.svelte
@@ -14,7 +14,7 @@
   import ControlAppBar from '../shared-components/control-app-bar.svelte';
   import ImmichLogo from '../shared-components/immich-logo.svelte';
   import ThemeButton from '../shared-components/theme-button.svelte';
-  import { shortcut } from '$lib/utils/shortcut';
+  import { shortcut } from '$lib/actions/shortcut';
   import { mdiFileImagePlusOutline, mdiFolderDownloadOutline } from '@mdi/js';
   import { handlePromiseError } from '$lib/utils';
   import AlbumSummary from './album-summary.svelte';
diff --git a/web/src/lib/components/asset-viewer/activity-viewer.svelte b/web/src/lib/components/asset-viewer/activity-viewer.svelte
index 6f3c9629f1..670311dd16 100644
--- a/web/src/lib/components/asset-viewer/activity-viewer.svelte
+++ b/web/src/lib/components/asset-viewer/activity-viewer.svelte
@@ -3,8 +3,8 @@
   import { AppRoute, timeBeforeShowLoadingSpinner } from '$lib/constants';
   import { getAssetThumbnailUrl, handlePromiseError } from '$lib/utils';
   import { getAssetType } from '$lib/utils/asset-utils';
-  import { autoGrowHeight } from '$lib/utils/autogrow';
-  import { clickOutside } from '$lib/utils/click-outside';
+  import { autoGrowHeight } from '$lib/actions/autogrow';
+  import { clickOutside } from '$lib/actions/click-outside';
   import { handleError } from '$lib/utils/handle-error';
   import { isTenMinutesApart } from '$lib/utils/timesince';
   import {
@@ -25,7 +25,7 @@
   import { NotificationType, notificationController } from '../shared-components/notification/notification';
   import UserAvatar from '../shared-components/user-avatar.svelte';
   import { locale } from '$lib/stores/preferences.store';
-  import { shortcut } from '$lib/utils/shortcut';
+  import { shortcut } from '$lib/actions/shortcut';
 
   const units: Intl.RelativeTimeFormatUnit[] = ['year', 'month', 'week', 'day', 'hour', 'minute', 'second'];
 
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 3ad17b1eed..731148dd40 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
@@ -3,7 +3,7 @@
   import { user } from '$lib/stores/user.store';
   import { photoZoomState } from '$lib/stores/zoom-image.store';
   import { getAssetJobName } from '$lib/utils';
-  import { clickOutside } from '$lib/utils/click-outside';
+  import { clickOutside } from '$lib/actions/click-outside';
   import { getContextMenuPosition } from '$lib/utils/context-menu';
   import { AssetJobName, AssetTypeEnum, type AssetResponseDto, type AlbumResponseDto } from '@immich/sdk';
   import {
diff --git a/web/src/lib/components/asset-viewer/asset-viewer.svelte b/web/src/lib/components/asset-viewer/asset-viewer.svelte
index 21e38bf0ec..fba1b0505f 100644
--- a/web/src/lib/components/asset-viewer/asset-viewer.svelte
+++ b/web/src/lib/components/asset-viewer/asset-viewer.svelte
@@ -14,7 +14,7 @@
   import { getAssetJobMessage, getSharedLink, handlePromiseError, isSharedLink } from '$lib/utils';
   import { addAssetsToAlbum, addAssetsToNewAlbum, downloadFile, unstackAssets } from '$lib/utils/asset-utils';
   import { handleError } from '$lib/utils/handle-error';
-  import { shortcuts } from '$lib/utils/shortcut';
+  import { shortcuts } from '$lib/actions/shortcut';
   import { SlideshowHistory } from '$lib/utils/slideshow-history';
   import {
     AssetJobName,
diff --git a/web/src/lib/components/asset-viewer/detail-panel.svelte b/web/src/lib/components/asset-viewer/detail-panel.svelte
index d2590b3db1..c921faafff 100644
--- a/web/src/lib/components/asset-viewer/detail-panel.svelte
+++ b/web/src/lib/components/asset-viewer/detail-panel.svelte
@@ -9,8 +9,8 @@
   import { websocketEvents } from '$lib/stores/websocket';
   import { getAssetThumbnailUrl, getPeopleThumbnailUrl, isSharedLink, handlePromiseError } from '$lib/utils';
   import { delay, isFlipped } from '$lib/utils/asset-utils';
-  import { autoGrowHeight } from '$lib/utils/autogrow';
-  import { clickOutside } from '$lib/utils/click-outside';
+  import { autoGrowHeight } from '$lib/actions/autogrow';
+  import { clickOutside } from '$lib/actions/click-outside';
   import {
     ThumbnailFormat,
     getAssetInfo,
@@ -42,7 +42,7 @@
   import UserAvatar from '../shared-components/user-avatar.svelte';
   import LoadingSpinner from '../shared-components/loading-spinner.svelte';
   import { NotificationType, notificationController } from '../shared-components/notification/notification';
-  import { shortcut } from '$lib/utils/shortcut';
+  import { shortcut } from '$lib/actions/shortcut';
   import AlbumListItemDetails from './album-list-item-details.svelte';
 
   export let asset: AssetResponseDto;
diff --git a/web/src/lib/components/asset-viewer/photo-viewer.svelte b/web/src/lib/components/asset-viewer/photo-viewer.svelte
index 2bf4ba4801..d8f4852b74 100644
--- a/web/src/lib/components/asset-viewer/photo-viewer.svelte
+++ b/web/src/lib/components/asset-viewer/photo-viewer.svelte
@@ -6,7 +6,7 @@
   import { downloadRequest, getAssetFileUrl, handlePromiseError } from '$lib/utils';
   import { isWebCompatibleImage } from '$lib/utils/asset-utils';
   import { getBoundingBox } from '$lib/utils/people-utils';
-  import { shortcuts } from '$lib/utils/shortcut';
+  import { shortcuts } from '$lib/actions/shortcut';
   import { type AssetResponseDto, AssetTypeEnum } from '@immich/sdk';
   import { useZoomImageWheel } from '@zoom-image/svelte';
   import { onDestroy, onMount } from 'svelte';
diff --git a/web/src/lib/components/assets/thumbnail/thumbnail.svelte b/web/src/lib/components/assets/thumbnail/thumbnail.svelte
index efbe384244..2cfb28674f 100644
--- a/web/src/lib/components/assets/thumbnail/thumbnail.svelte
+++ b/web/src/lib/components/assets/thumbnail/thumbnail.svelte
@@ -21,7 +21,7 @@
   import { fade } from 'svelte/transition';
   import ImageThumbnail from './image-thumbnail.svelte';
   import VideoThumbnail from './video-thumbnail.svelte';
-  import { shortcut } from '$lib/utils/shortcut';
+  import { shortcut } from '$lib/actions/shortcut';
 
   const dispatch = createEventDispatcher<{
     select: { asset: AssetResponseDto };
diff --git a/web/src/lib/components/elements/dropdown.svelte b/web/src/lib/components/elements/dropdown.svelte
index 1a56b92771..423049930f 100644
--- a/web/src/lib/components/elements/dropdown.svelte
+++ b/web/src/lib/components/elements/dropdown.svelte
@@ -17,7 +17,7 @@
 
   import { isEqual } from 'lodash-es';
   import LinkButton from './buttons/link-button.svelte';
-  import { clickOutside } from '$lib/utils/click-outside';
+  import { clickOutside } from '$lib/actions/click-outside';
   import { fly } from 'svelte/transition';
   import { createEventDispatcher } from 'svelte';
 
diff --git a/web/src/lib/components/faces-page/people-search.svelte b/web/src/lib/components/faces-page/people-search.svelte
index 3a9f28d5fb..7025868526 100644
--- a/web/src/lib/components/faces-page/people-search.svelte
+++ b/web/src/lib/components/faces-page/people-search.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+  import { initInput } from '$lib/actions/focus';
   import SearchBar from '$lib/components/elements/search-bar.svelte';
   import { maximumLengthSearchPeople, timeBeforeShowLoadingSpinner } from '$lib/constants';
   import { handleError } from '$lib/utils/handle-error';
@@ -70,10 +71,6 @@
     }
   };
 
-  const initInput = (element: HTMLInputElement) => {
-    element.focus();
-  };
-
   const handleReset = () => {
     reset();
     onReset();
diff --git a/web/src/lib/components/memory-page/memory-viewer.svelte b/web/src/lib/components/memory-page/memory-viewer.svelte
index c6b922dccf..0b35ccc93c 100644
--- a/web/src/lib/components/memory-page/memory-viewer.svelte
+++ b/web/src/lib/components/memory-page/memory-viewer.svelte
@@ -19,7 +19,7 @@
   import { type Viewport } from '$lib/stores/assets.store';
   import { memoryStore } from '$lib/stores/memory.store';
   import { getAssetThumbnailUrl, handlePromiseError, memoryLaneTitle } from '$lib/utils';
-  import { shortcuts } from '$lib/utils/shortcut';
+  import { shortcuts } from '$lib/actions/shortcut';
   import { fromLocalDateTime } from '$lib/utils/timeline-util';
   import { ThumbnailFormat, getMemoryLane, type AssetResponseDto } from '@immich/sdk';
   import {
diff --git a/web/src/lib/components/photos-page/asset-grid.svelte b/web/src/lib/components/photos-page/asset-grid.svelte
index a6df29fcc2..c707a3bb6c 100644
--- a/web/src/lib/components/photos-page/asset-grid.svelte
+++ b/web/src/lib/components/photos-page/asset-grid.svelte
@@ -8,7 +8,7 @@
   import { isSearchEnabled } from '$lib/stores/search.store';
   import { featureFlags } from '$lib/stores/server-config.store';
   import { deleteAssets } from '$lib/utils/actions';
-  import { type ShortcutOptions, shortcuts } from '$lib/utils/shortcut';
+  import { type ShortcutOptions, shortcuts } from '$lib/actions/shortcut';
   import { formatGroupTitle, splitBucketIntoDateGroups } from '$lib/utils/timeline-util';
   import type { AlbumResponseDto, AssetResponseDto } from '@immich/sdk';
   import { DateTime } from 'luxon';
diff --git a/web/src/lib/components/photos-page/asset-select-context-menu.svelte b/web/src/lib/components/photos-page/asset-select-context-menu.svelte
index d2d9ea399b..808a2d9b1a 100644
--- a/web/src/lib/components/photos-page/asset-select-context-menu.svelte
+++ b/web/src/lib/components/photos-page/asset-select-context-menu.svelte
@@ -1,5 +1,5 @@
 <script lang="ts" context="module">
-  import { clickOutside } from '$lib/utils/click-outside';
+  import { clickOutside } from '$lib/actions/click-outside';
   import { createContext } from '$lib/utils/context';
 
   const { get: getMenuContext, set: setContext } = createContext<() => void>();
diff --git a/web/src/lib/components/shared-components/album-selection-modal.svelte b/web/src/lib/components/shared-components/album-selection-modal.svelte
index 385e70d83b..d1d9713949 100644
--- a/web/src/lib/components/shared-components/album-selection-modal.svelte
+++ b/web/src/lib/components/shared-components/album-selection-modal.svelte
@@ -6,6 +6,7 @@
   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';
 
   let albums: AlbumResponseDto[] = [];
   let recentAlbums: AlbumResponseDto[] = [];
@@ -72,6 +73,7 @@
         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="Search"
         bind:value={search}
+        use:initInput
       />
       <div class="immich-scrollbar overflow-y-auto">
         <button
diff --git a/web/src/lib/components/shared-components/change-location.svelte b/web/src/lib/components/shared-components/change-location.svelte
index e9a2b01307..20b2f02841 100644
--- a/web/src/lib/components/shared-components/change-location.svelte
+++ b/web/src/lib/components/shared-components/change-location.svelte
@@ -4,13 +4,13 @@
   import { timeDebounceOnSearch } from '$lib/constants';
   import { handleError } from '$lib/utils/handle-error';
 
-  import { clickOutside } from '$lib/utils/click-outside';
+  import { clickOutside } from '$lib/actions/click-outside';
   import LoadingSpinner from './loading-spinner.svelte';
   import { delay } from '$lib/utils/asset-utils';
   import { timeToLoadTheMap } from '$lib/constants';
   import { searchPlaces, type AssetResponseDto, type PlacesResponseDto } from '@immich/sdk';
   import SearchBar from '../elements/search-bar.svelte';
-  import { listNavigation } from '$lib/utils/list-navigation';
+  import { listNavigation } from '$lib/actions/list-navigation';
 
   export let asset: AssetResponseDto | undefined = undefined;
 
diff --git a/web/src/lib/components/shared-components/combobox.svelte b/web/src/lib/components/shared-components/combobox.svelte
index cb43021caf..f4c8bd5ec8 100644
--- a/web/src/lib/components/shared-components/combobox.svelte
+++ b/web/src/lib/components/shared-components/combobox.svelte
@@ -15,9 +15,9 @@
   import { mdiMagnify, mdiUnfoldMoreHorizontal, mdiClose } from '@mdi/js';
   import { createEventDispatcher, tick } from 'svelte';
   import type { FormEventHandler } from 'svelte/elements';
-  import { shortcuts } from '$lib/utils/shortcut';
-  import { clickOutside } from '$lib/utils/click-outside';
-  import { focusOutside } from '$lib/utils/focus-outside';
+  import { shortcuts } from '$lib/actions/shortcut';
+  import { clickOutside } from '$lib/actions/click-outside';
+  import { focusOutside } from '$lib/actions/focus-outside';
   import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
 
   /**
diff --git a/web/src/lib/components/shared-components/context-menu/context-menu.svelte b/web/src/lib/components/shared-components/context-menu/context-menu.svelte
index 6d7abf89df..fc5b960fa5 100644
--- a/web/src/lib/components/shared-components/context-menu/context-menu.svelte
+++ b/web/src/lib/components/shared-components/context-menu/context-menu.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
   import { quintOut } from 'svelte/easing';
   import { slide } from 'svelte/transition';
-  import { clickOutside } from '$lib/utils/click-outside';
+  import { clickOutside } from '$lib/actions/click-outside';
 
   export let direction: 'left' | 'right' = 'right';
   export let x = 0;
diff --git a/web/src/lib/components/shared-components/focus-trap.svelte b/web/src/lib/components/shared-components/focus-trap.svelte
index d1c01825de..442a1fc200 100644
--- a/web/src/lib/components/shared-components/focus-trap.svelte
+++ b/web/src/lib/components/shared-components/focus-trap.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { shortcuts } from '$lib/utils/shortcut';
+  import { shortcuts } from '$lib/actions/shortcut';
   import { onMount, onDestroy } from 'svelte';
 
   let container: HTMLElement;
diff --git a/web/src/lib/components/shared-components/full-screen-modal.svelte b/web/src/lib/components/shared-components/full-screen-modal.svelte
index 176255ad09..dfd42be568 100644
--- a/web/src/lib/components/shared-components/full-screen-modal.svelte
+++ b/web/src/lib/components/shared-components/full-screen-modal.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { clickOutside } from '../../utils/click-outside';
+  import { clickOutside } from '$lib/actions/click-outside';
   import { fade } from 'svelte/transition';
   import FocusTrap from '$lib/components/shared-components/focus-trap.svelte';
   import ModalHeader from '$lib/components/shared-components/modal-header.svelte';
diff --git a/web/src/lib/components/shared-components/navigation-bar/navigation-bar.svelte b/web/src/lib/components/shared-components/navigation-bar/navigation-bar.svelte
index 9a9b82341f..0c8cafc01e 100644
--- a/web/src/lib/components/shared-components/navigation-bar/navigation-bar.svelte
+++ b/web/src/lib/components/shared-components/navigation-bar/navigation-bar.svelte
@@ -6,7 +6,7 @@
   import Icon from '$lib/components/elements/icon.svelte';
   import { featureFlags } from '$lib/stores/server-config.store';
   import { resetSavedUser, user } from '$lib/stores/user.store';
-  import { clickOutside } from '$lib/utils/click-outside';
+  import { clickOutside } from '$lib/actions/click-outside';
   import { logout } from '@immich/sdk';
   import { mdiCog, mdiMagnify, mdiTrayArrowUp } from '@mdi/js';
   import { createEventDispatcher } from 'svelte';
diff --git a/web/src/lib/components/shared-components/search-bar/search-bar.svelte b/web/src/lib/components/shared-components/search-bar/search-bar.svelte
index aa84062bb7..455de6f14e 100644
--- a/web/src/lib/components/shared-components/search-bar/search-bar.svelte
+++ b/web/src/lib/components/shared-components/search-bar/search-bar.svelte
@@ -2,15 +2,15 @@
   import { AppRoute } from '$lib/constants';
   import { goto } from '$app/navigation';
   import { isSearchEnabled, preventRaceConditionSearchBar, savedSearchTerms } from '$lib/stores/search.store';
-  import { clickOutside } from '$lib/utils/click-outside';
+  import { clickOutside } from '$lib/actions/click-outside';
   import { mdiClose, mdiMagnify, mdiTune } from '@mdi/js';
   import SearchHistoryBox from './search-history-box.svelte';
   import SearchFilterBox from './search-filter-box.svelte';
   import type { MetadataSearchDto, SmartSearchDto } from '@immich/sdk';
   import { getMetadataSearchQuery } from '$lib/utils/metadata-search';
   import { handlePromiseError } from '$lib/utils';
-  import { shortcuts } from '$lib/utils/shortcut';
-  import { focusOutside } from '$lib/utils/focus-outside';
+  import { shortcuts } from '$lib/actions/shortcut';
+  import { focusOutside } from '$lib/actions/focus-outside';
   import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
 
   export let value = '';
diff --git a/web/src/routes/(user)/albums/[albumId=id]/[[photos=photos]]/[[assetId=id]]/+page.svelte b/web/src/routes/(user)/albums/[albumId=id]/[[photos=photos]]/[[assetId=id]]/+page.svelte
index c4e859fc3d..f157f75c91 100644
--- a/web/src/routes/(user)/albums/[albumId=id]/[[photos=photos]]/[[assetId=id]]/+page.svelte
+++ b/web/src/routes/(user)/albums/[albumId=id]/[[photos=photos]]/[[assetId=id]]/+page.svelte
@@ -44,7 +44,7 @@
   import { user } from '$lib/stores/user.store';
   import { handlePromiseError, s } from '$lib/utils';
   import { downloadAlbum } from '$lib/utils/asset-utils';
-  import { clickOutside } from '$lib/utils/click-outside';
+  import { clickOutside } from '$lib/actions/click-outside';
   import { getContextMenuPosition } from '$lib/utils/context-menu';
   import { openFileUploadDialog } from '$lib/utils/file-uploader';
   import { handleError } from '$lib/utils/handle-error';
diff --git a/web/src/routes/(user)/people/+page.svelte b/web/src/routes/(user)/people/+page.svelte
index f4d318ac53..e1fdb9cacc 100644
--- a/web/src/routes/(user)/people/+page.svelte
+++ b/web/src/routes/(user)/people/+page.svelte
@@ -17,7 +17,7 @@
   import { ActionQueryParameterValue, AppRoute, QueryParameter } from '$lib/constants';
   import { getPeopleThumbnailUrl } from '$lib/utils';
   import { handleError } from '$lib/utils/handle-error';
-  import { shortcut } from '$lib/utils/shortcut';
+  import { shortcut } from '$lib/actions/shortcut';
   import {
     getPerson,
     mergePerson,
diff --git a/web/src/routes/(user)/people/[personId]/[[photos=photos]]/[[assetId=id]]/+page.svelte b/web/src/routes/(user)/people/[personId]/[[photos=photos]]/[[assetId=id]]/+page.svelte
index b87af4d37f..cfcc3eeeb7 100644
--- a/web/src/routes/(user)/people/[personId]/[[photos=photos]]/[[assetId=id]]/+page.svelte
+++ b/web/src/routes/(user)/people/[personId]/[[photos=photos]]/[[assetId=id]]/+page.svelte
@@ -32,7 +32,7 @@
   import { AssetStore } from '$lib/stores/assets.store';
   import { websocketEvents } from '$lib/stores/websocket';
   import { getPeopleThumbnailUrl, handlePromiseError, s } from '$lib/utils';
-  import { clickOutside } from '$lib/utils/click-outside';
+  import { clickOutside } from '$lib/actions/click-outside';
   import { handleError } from '$lib/utils/handle-error';
   import { isExternalUrl } from '$lib/utils/navigation';
   import {
@@ -55,7 +55,7 @@
   } from '@mdi/js';
   import { onMount } from 'svelte';
   import type { PageData } from './$types';
-  import { listNavigation } from '$lib/utils/list-navigation';
+  import { listNavigation } from '$lib/actions/list-navigation';
 
   export let data: PageData;
 
diff --git a/web/src/routes/(user)/search/[[photos=photos]]/[[assetId=id]]/+page.svelte b/web/src/routes/(user)/search/[[photos=photos]]/[[assetId=id]]/+page.svelte
index ed7b281a0c..031a8c5253 100644
--- a/web/src/routes/(user)/search/[[photos=photos]]/[[assetId=id]]/+page.svelte
+++ b/web/src/routes/(user)/search/[[photos=photos]]/[[assetId=id]]/+page.svelte
@@ -19,7 +19,7 @@
   import { AppRoute, QueryParameter } from '$lib/constants';
   import { assetViewingStore } from '$lib/stores/asset-viewing.store';
   import { preventRaceConditionSearchBar } from '$lib/stores/search.store';
-  import { shortcut } from '$lib/utils/shortcut';
+  import { shortcut } from '$lib/actions/shortcut';
   import {
     type AssetResponseDto,
     searchSmart,