Cutlery/immich
1
0
Fork 1
mirror of https://github.com/immich-app/immich.git synced 2025-09-29 15:31:13 -04:00
Code Issues Packages Projects Releases Wiki Activity

refactor: more elements (#22095)

Browse Source
This commit is contained in:
Jason Rasmussen 2025-09-16 15:01:23 -04:00 committed by GitHub
parent 3f4b6a8e7c
commit 75322179fd
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
25 changed files with 51 additions and 72 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
web/src/app.d.ts vendored
View File

@ -36,7 +36,7 @@ type NestedKeys<T, K = keyof T> = K extends keyof T & string
: never;
declare module 'svelte-i18n' {
import type { InterpolationValues } from '$lib/components/i18n/format-message.svelte';
import type { InterpolationValues } from '$lib/elements/format-message.svelte';
import type { Readable } from 'svelte/store';
type Translations = NestedKeys<typeof en>;

2
web/src/lib/components/admin-page/jobs/storage-migration-description.svelte
View File

@ -1,6 +1,6 @@
<script lang="ts">
import FormatMessage from '$lib/components/i18n/format-message.svelte';
import { AppRoute, OpenSettingQueryParameterValue, QueryParameter } from '$lib/constants';
import FormatMessage from '$lib/elements/FormatMessage.svelte';
import { t } from 'svelte-i18n';
</script>

2
web/src/lib/components/admin-page/settings/auth/auth-settings.svelte
View File

@ -1,5 +1,4 @@
<script lang="ts">
import FormatMessage from '$lib/components/i18n/format-message.svelte';
import {
notificationController,
NotificationType,
@ -10,6 +9,7 @@
import SettingSelect from '$lib/components/shared-components/settings/setting-select.svelte';
import SettingSwitch from '$lib/components/shared-components/settings/setting-switch.svelte';
import { SettingInputFieldType } from '$lib/constants';
import FormatMessage from '$lib/elements/FormatMessage.svelte';
import AuthDisableLoginConfirmModal from '$lib/modals/AuthDisableLoginConfirmModal.svelte';
import { handleError } from '$lib/utils/handle-error';
import { OAuthTokenEndpointAuthMethod, unlinkAllOAuthAccountsAdmin, type SystemConfigDto } from '@immich/sdk';

14
web/src/lib/components/admin-page/settings/backup-settings/backup-settings.svelte
View File

@ -1,15 +1,15 @@
<script lang="ts">
import SettingButtonsRow from '$lib/components/shared-components/settings/setting-buttons-row.svelte';
import SettingInputField from '$lib/components/shared-components/settings/setting-input-field.svelte';
import SettingSelect from '$lib/components/shared-components/settings/setting-select.svelte';
import SettingSwitch from '$lib/components/shared-components/settings/setting-switch.svelte';
import { SettingInputFieldType } from '$lib/constants';
import FormatMessage from '$lib/elements/FormatMessage.svelte';
import type { SystemConfigDto } from '@immich/sdk';
import { isEqual } from 'lodash-es';
import { t } from 'svelte-i18n';
import { fade } from 'svelte/transition';
import type { SettingsResetEvent, SettingsSaveEvent } from '../admin-settings';
import SettingInputField from '$lib/components/shared-components/settings/setting-input-field.svelte';
import SettingSwitch from '$lib/components/shared-components/settings/setting-switch.svelte';
import SettingButtonsRow from '$lib/components/shared-components/settings/setting-buttons-row.svelte';
import SettingSelect from '$lib/components/shared-components/settings/setting-select.svelte';
import { t } from 'svelte-i18n';
import FormatMessage from '$lib/components/i18n/format-message.svelte';
import { SettingInputFieldType } from '$lib/constants';
interface Props {
savedConfig: SystemConfigDto;

2
web/src/lib/components/admin-page/settings/ffmpeg/ffmpeg-settings.svelte
View File

@ -1,5 +1,4 @@
<script lang="ts">
import FormatMessage from '$lib/components/i18n/format-message.svelte';
import SettingAccordion from '$lib/components/shared-components/settings/setting-accordion.svelte';
import SettingButtonsRow from '$lib/components/shared-components/settings/setting-buttons-row.svelte';
import SettingCheckboxes from '$lib/components/shared-components/settings/setting-checkboxes.svelte';
@ -7,6 +6,7 @@
import SettingSelect from '$lib/components/shared-components/settings/setting-select.svelte';
import SettingSwitch from '$lib/components/shared-components/settings/setting-switch.svelte';
import { SettingInputFieldType } from '$lib/constants';
import FormatMessage from '$lib/elements/FormatMessage.svelte';
import Icon from '$lib/elements/Icon.svelte';
import {
AudioCodec,

16
web/src/lib/components/admin-page/settings/library-settings/library-settings.svelte
View File

@ -1,16 +1,16 @@
<script lang="ts">
import SettingAccordion from '$lib/components/shared-components/settings/setting-accordion.svelte';
import SettingButtonsRow from '$lib/components/shared-components/settings/setting-buttons-row.svelte';
import SettingInputField from '$lib/components/shared-components/settings/setting-input-field.svelte';
import SettingSelect from '$lib/components/shared-components/settings/setting-select.svelte';
import SettingSwitch from '$lib/components/shared-components/settings/setting-switch.svelte';
import { SettingInputFieldType } from '$lib/constants';
import FormatMessage from '$lib/elements/FormatMessage.svelte';
import type { SystemConfigDto } from '@immich/sdk';
import { isEqual } from 'lodash-es';
import { t } from 'svelte-i18n';
import { fade } from 'svelte/transition';
import type { SettingsResetEvent, SettingsSaveEvent } from '../admin-settings';
import SettingAccordion from '$lib/components/shared-components/settings/setting-accordion.svelte';
import SettingInputField from '$lib/components/shared-components/settings/setting-input-field.svelte';
import SettingSwitch from '$lib/components/shared-components/settings/setting-switch.svelte';
import SettingButtonsRow from '$lib/components/shared-components/settings/setting-buttons-row.svelte';
import { t } from 'svelte-i18n';
import FormatMessage from '$lib/components/i18n/format-message.svelte';
import SettingSelect from '$lib/components/shared-components/settings/setting-select.svelte';
import { SettingInputFieldType } from '$lib/constants';
interface Props {
savedConfig: SystemConfigDto;

2
web/src/lib/components/admin-page/settings/machine-learning-settings/machine-learning-settings.svelte
View File

@ -1,11 +1,11 @@
<script lang="ts">
import FormatMessage from '$lib/components/i18n/format-message.svelte';
import SettingAccordion from '$lib/components/shared-components/settings/setting-accordion.svelte';
import SettingButtonsRow from '$lib/components/shared-components/settings/setting-buttons-row.svelte';
import SettingInputField from '$lib/components/shared-components/settings/setting-input-field.svelte';
import SettingSelect from '$lib/components/shared-components/settings/setting-select.svelte';
import SettingSwitch from '$lib/components/shared-components/settings/setting-switch.svelte';
import { SettingInputFieldType } from '$lib/constants';
import FormatMessage from '$lib/elements/FormatMessage.svelte';
import { featureFlags } from '$lib/stores/server-config.store';
import type { SystemConfigDto } from '@immich/sdk';
import { Button, IconButton } from '@immich/ui';

14
web/src/lib/components/admin-page/settings/map-settings/map-settings.svelte
View File

@ -1,15 +1,15 @@
<script lang="ts">
import type { SystemConfigDto } from '@immich/sdk';
import { isEqual } from 'lodash-es';
import { fade } from 'svelte/transition';
import type { SettingsResetEvent, SettingsSaveEvent } from '../admin-settings';
import SettingAccordion from '$lib/components/shared-components/settings/setting-accordion.svelte';
import SettingButtonsRow from '$lib/components/shared-components/settings/setting-buttons-row.svelte';
import SettingSwitch from '$lib/components/shared-components/settings/setting-switch.svelte';
import SettingInputField from '$lib/components/shared-components/settings/setting-input-field.svelte';
import { t } from 'svelte-i18n';
import FormatMessage from '$lib/components/i18n/format-message.svelte';
import SettingSwitch from '$lib/components/shared-components/settings/setting-switch.svelte';
import { SettingInputFieldType } from '$lib/constants';
import FormatMessage from '$lib/elements/FormatMessage.svelte';
import type { SystemConfigDto } from '@immich/sdk';
import { isEqual } from 'lodash-es';
import { t } from 'svelte-i18n';
import { fade } from 'svelte/transition';
import type { SettingsResetEvent, SettingsSaveEvent } from '../admin-settings';
interface Props {
savedConfig: SystemConfigDto;

17
web/src/lib/components/admin-page/settings/storage-template/storage-template-settings.svelte
View File

@ -1,9 +1,10 @@
<script lang="ts">
import { createBubbler, preventDefault } from 'svelte/legacy';
const bubble = createBubbler();
import LoadingSpinner from '$lib/components/shared-components/loading-spinner.svelte';
import SettingButtonsRow from '$lib/components/shared-components/settings/setting-buttons-row.svelte';
import SettingInputField from '$lib/components/shared-components/settings/setting-input-field.svelte';
import SettingSwitch from '$lib/components/shared-components/settings/setting-switch.svelte';
import { AppRoute, SettingInputFieldType } from '$lib/constants';
import FormatMessage from '$lib/elements/FormatMessage.svelte';
import { user } from '$lib/stores/user.store';
import {
getStorageTemplateOptions,
@ -13,16 +14,13 @@
import handlebar from 'handlebars';
import { isEqual } from 'lodash-es';
import * as luxon from 'luxon';
import type { Snippet } from 'svelte';
import { t } from 'svelte-i18n';
import { createBubbler, preventDefault } from 'svelte/legacy';
import { fade } from 'svelte/transition';
import type { SettingsResetEvent, SettingsSaveEvent } from '../admin-settings';
import SupportedDatetimePanel from './supported-datetime-panel.svelte';
import SupportedVariablesPanel from './supported-variables-panel.svelte';
import SettingButtonsRow from '$lib/components/shared-components/settings/setting-buttons-row.svelte';
import SettingInputField from '$lib/components/shared-components/settings/setting-input-field.svelte';
import SettingSwitch from '$lib/components/shared-components/settings/setting-switch.svelte';
import { t } from 'svelte-i18n';
import FormatMessage from '$lib/components/i18n/format-message.svelte';
import type { Snippet } from 'svelte';
interface Props {
savedConfig: SystemConfigDto;
@ -48,6 +46,7 @@
children,
}: Props = $props();
const bubble = createBubbler();
let templateOptions: SystemConfigTemplateStorageOptionDto | undefined = $state();
let selectedPreset = $state('');

2
web/src/lib/components/admin-page/settings/template-settings/template-settings.svelte
View File

@ -1,8 +1,8 @@
<script lang="ts">
import FormatMessage from '$lib/components/i18n/format-message.svelte';
import LoadingSpinner from '$lib/components/shared-components/loading-spinner.svelte';
import SettingAccordion from '$lib/components/shared-components/settings/setting-accordion.svelte';
import SettingTextarea from '$lib/components/shared-components/settings/setting-textarea.svelte';
import FormatMessage from '$lib/elements/FormatMessage.svelte';
import Icon from '$lib/elements/Icon.svelte';
import EmailTemplatePreviewModal from '$lib/modals/EmailTemplatePreviewModal.svelte';
import { handleError } from '$lib/utils/handle-error';

2
web/src/lib/components/asset-viewer/detail-panel-star-rating.svelte
View File

@ -1,5 +1,5 @@
<script lang="ts">
import StarRating from '$lib/components/shared-components/star-rating.svelte';
import StarRating from '$lib/elements/StarRating.svelte';
import { authManager } from '$lib/managers/auth-manager.svelte';
import { preferences } from '$lib/stores/user.store';
import { handlePromiseError } from '$lib/utils';

20
web/src/lib/components/i18n/format-bold-message.svelte
View File

@ -1,20 +0,0 @@
<script lang="ts">
import type { InterpolationValues } from '$lib/components/i18n/format-message';
import FormatMessage from '$lib/components/i18n/format-message.svelte';
import type { Translations } from 'svelte-i18n';
interface Props {
key: Translations;
values?: InterpolationValues;
}
let { key, values = {} }: Props = $props();
</script>
<FormatMessage {key} {values}>
{#snippet children({ message, tag })}
{#if tag === 'b'}
<b>{message}</b>
{/if}
{/snippet}
</FormatMessage>

2
web/src/lib/components/onboarding-page/onboarding-backup.svelte
View File

@ -1,5 +1,5 @@
<script lang="ts">
import FormatMessage from '$lib/components/i18n/format-message.svelte';
import FormatMessage from '$lib/elements/FormatMessage.svelte';
import Icon from '$lib/elements/Icon.svelte';
import { Stack } from '@immich/ui';
import { mdiAlertCircleOutline } from '@mdi/js';

2
web/src/lib/components/onboarding-page/onboarding-storage-template.svelte
View File

@ -1,7 +1,7 @@
<script lang="ts">
import AdminSettings from '$lib/components/admin-page/settings/admin-settings.svelte';
import StorageTemplateSettings from '$lib/components/admin-page/settings/storage-template/storage-template-settings.svelte';
import FormatMessage from '$lib/components/i18n/format-message.svelte';
import FormatMessage from '$lib/elements/FormatMessage.svelte';
import { featureFlags } from '$lib/stores/server-config.store';
import { user } from '$lib/stores/user.store';
import { getConfig, type SystemConfigDto } from '@immich/sdk';

2
web/src/lib/components/photos-page/delete-asset-dialog.svelte
View File

@ -1,5 +1,5 @@
<script lang="ts">
import FormatMessage from '$lib/components/i18n/format-message.svelte';
import FormatMessage from '$lib/elements/FormatMessage.svelte';
import { showDeleteModal } from '$lib/stores/preferences.store';
import { Checkbox, ConfirmModal, Label } from '@immich/ui';
import { mdiDeleteForeverOutline } from '@mdi/js';

4
web/src/lib/components/i18n/format-message.svelte → web/src/lib/elements/FormatMessage.svelte
View File

@ -1,13 +1,13 @@
<script lang="ts">
import { IntlMessageFormat, type FormatXMLElementFn } from 'intl-messageformat';
import type { InterpolationValues } from '$lib/elements/format-message';
import {
TYPE,
type MessageFormatElement,
type PluralElement,
type SelectElement,
} from '@formatjs/icu-messageformat-parser';
import { IntlMessageFormat, type FormatXMLElementFn } from 'intl-messageformat';
import { locale as i18nLocale, json, type Translations } from 'svelte-i18n';
import type { InterpolationValues } from '$lib/components/i18n/format-message';
type MessagePart = {
message: string;

0
web/src/lib/components/shared-components/star-rating.svelte → web/src/lib/elements/StarRating.svelte
View File

4
web/src/lib/components/i18n/__test__/format-message.spec.ts → web/src/lib/elements/__test__/format-message.spec.ts
View File

@ -1,5 +1,5 @@
import FormatTagB from '$lib/components/i18n/__test__/format-tag-b.svelte';
import FormatMessage from '$lib/components/i18n/format-message.svelte';
import FormatTagB from '$lib/elements/__test__/format-tag-b.svelte';
import FormatMessage from '$lib/elements/FormatMessage.svelte';
import '@testing-library/jest-dom';
import { render, screen } from '@testing-library/svelte';
import { init, locale, register, waitLocale, type Translations } from 'svelte-i18n';

4
web/src/lib/components/i18n/__test__/format-tag-b.svelte → web/src/lib/elements/__test__/format-tag-b.svelte
View File

@ -1,7 +1,7 @@
<script lang="ts">
import type { Translations } from 'svelte-i18n';
import FormatMessage from '../format-message.svelte';
import FormatMessage from '$lib/elements/FormatMessage.svelte';
import type { ComponentProps } from 'svelte';
import type { Translations } from 'svelte-i18n';
interface Props {
key: Translations;

2
web/src/lib/components/shared-components/__test__/star-rating.spec.ts → web/src/lib/elements/__test__/star-rating.spec.ts
View File

@ -1,4 +1,4 @@
import StarRating from '$lib/components/shared-components/star-rating.svelte';
import StarRating from '$lib/elements/StarRating.svelte';
import { render } from '@testing-library/svelte';
describe('StarRating component', () => {

0
web/src/lib/components/i18n/format-message.ts → web/src/lib/elements/format-message.ts
View File

2
web/src/lib/modals/AuthDisableLoginConfirmModal.svelte
View File

@ -1,5 +1,5 @@
<script lang="ts">
import FormatMessage from '$lib/components/i18n/format-message.svelte';
import FormatMessage from '$lib/elements/FormatMessage.svelte';
import { Button, HStack, Modal, ModalBody, ModalFooter } from '@immich/ui';
import { mdiCancel } from '@mdi/js';
import { t } from 'svelte-i18n';

2
web/src/lib/modals/UserDeleteConfirmModal.svelte
View File

@ -1,5 +1,5 @@
<script lang="ts">
import FormatMessage from '$lib/components/i18n/format-message.svelte';
import FormatMessage from '$lib/elements/FormatMessage.svelte';
import { serverConfig } from '$lib/stores/server-config.store';
import { handleError } from '$lib/utils/handle-error';
import { deleteUserAdmin, type UserAdminResponseDto, type UserResponseDto } from '@immich/sdk';

2
web/src/lib/modals/UserRestoreConfirmModal.svelte
View File

@ -1,5 +1,5 @@
<script lang="ts">
import FormatMessage from '$lib/components/i18n/format-message.svelte';
import FormatMessage from '$lib/elements/FormatMessage.svelte';
import { handleError } from '$lib/utils/handle-error';
import { restoreUserAdmin, type UserAdminResponseDto, type UserResponseDto } from '@immich/sdk';
import { Button, HStack, Modal, ModalBody, ModalFooter } from '@immich/ui';

2
web/src/lib/modals/VersionAnnouncementModal.svelte
View File

@ -1,5 +1,5 @@
<script lang="ts">
import FormatMessage from '$lib/components/i18n/format-message.svelte';
import FormatMessage from '$lib/elements/FormatMessage.svelte';
import { Button, Modal, ModalBody, ModalFooter } from '@immich/ui';
import { t } from 'svelte-i18n';