Infrastructure/immich
0
Fork 0
mirror of https://github.com/immich-app/immich.git synced 2025-03-25 02:41:37 -05:00
Code Issues Activity

refactor(web): svelte actions (#9701)

Browse source
This commit is contained in:
martin 2024-05-23 19:56:48 +02:00 • committed by GitHub
parent 8bfa6769a5
commit 832d728940
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
32 changed files with 43 additions and 41 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

0
web/src/lib/utils/autogrow.ts → web/src/lib/actions/autogrow.ts
View file

2
web/src/lib/utils/click-outside.ts → web/src/lib/actions/click-outside.ts
View file

@ -1,5 +1,5 @@
import { matchesShortcut } from '$lib/actions/shortcut';
import type { ActionReturn } from 'svelte/action';
import { matchesShortcut } from './shortcut';
interface Attributes {
/** @deprecated */

0
web/src/lib/utils/focus-outside.ts → web/src/lib/actions/focus-outside.ts
View file

3
web/src/lib/actions/focus.ts Normal file
View file

@ -0,0 +1,3 @@
export const initInput = (element: HTMLInputElement) => {
element.focus();
};

2
web/src/lib/utils/list-navigation.ts → web/src/lib/actions/list-navigation.ts
View file

@ -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') => {

0
web/src/lib/utils/shortcut.ts → web/src/lib/actions/shortcut.ts
View file

4
web/src/lib/components/album-page/album-description.svelte
View file

@ -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;

2
web/src/lib/components/album-page/album-title.svelte
View file

@ -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;

2
web/src/lib/components/album-page/album-viewer.svelte
View file

@ -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';

6
web/src/lib/components/asset-viewer/activity-viewer.svelte
View file

@ -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'];

2
web/src/lib/components/asset-viewer/asset-viewer-nav-bar.svelte
View file

@ -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 {

2
web/src/lib/components/asset-viewer/asset-viewer.svelte
View file

@ -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,

6
web/src/lib/components/asset-viewer/detail-panel.svelte
View file

@ -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;

2
web/src/lib/components/asset-viewer/photo-viewer.svelte
View file

@ -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';

2
web/src/lib/components/assets/thumbnail/thumbnail.svelte
View file

@ -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 };

2
web/src/lib/components/elements/dropdown.svelte
View file

@ -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';

5
web/src/lib/components/faces-page/people-search.svelte
View file

@ -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();

2
web/src/lib/components/memory-page/memory-viewer.svelte
View file

@ -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 {

2
web/src/lib/components/photos-page/asset-grid.svelte
View file

@ -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';

2
web/src/lib/components/photos-page/asset-select-context-menu.svelte
View file

@ -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>();

2
web/src/lib/components/shared-components/album-selection-modal.svelte
View file

@ -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

4
web/src/lib/components/shared-components/change-location.svelte
View file

@ -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;

6
web/src/lib/components/shared-components/combobox.svelte
View file

@ -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';
/**

2
web/src/lib/components/shared-components/context-menu/context-menu.svelte
View file

@ -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;

2
web/src/lib/components/shared-components/focus-trap.svelte
View file

@ -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;

2
web/src/lib/components/shared-components/full-screen-modal.svelte
View file

@ -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';

2
web/src/lib/components/shared-components/navigation-bar/navigation-bar.svelte
View file

@ -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';

6
web/src/lib/components/shared-components/search-bar/search-bar.svelte
View file

@ -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 = '';

2
web/src/routes/(user)/albums/[albumId=id]/[[photos=photos]]/[[assetId=id]]/+page.svelte
View file

@ -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';

2
web/src/routes/(user)/people/+page.svelte
View file

@ -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,

4
web/src/routes/(user)/people/[personId]/[[photos=photos]]/[[assetId=id]]/+page.svelte
View file

@ -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;

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

@ -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,