immich-app/immich
1
0
Fork 0
mirror of https://github.com/immich-app/immich.git synced 2025-12-20 17:25:35 +03:00
Code Issues Packages Projects Releases 18 Wiki Activity

feat: better library rename UX (#16837)

Browse Source
This commit is contained in:
Jason Rasmussen
2025-03-12 17:00:16 -04:00
committed by GitHub
parent 72a7be26c0
commit 2d7a94ce23
6 changed files with 63 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
web/src/lib/components/forms/library-rename-form.svelte
View File

@@ -1,6 +1,8 @@
<script lang="ts">
import FullScreenModal from '$lib/components/shared-components/full-screen-modal.svelte';
import type { LibraryResponseDto } from '@immich/sdk';
import Button from '../elements/buttons/button.svelte';
import { Button, Field, Input } from '@immich/ui';
import { mdiRenameOutline } from '@mdi/js';
import { t } from 'svelte-i18n';
interface Props {
@@ -9,21 +11,25 @@
onSubmit: (library: Partial<LibraryResponseDto>) => void;
}
let { library = $bindable(), onCancel, onSubmit }: Props = $props();
let { library, onCancel, onSubmit }: Props = $props();
let newName = $state(library.name);
const onsubmit = (event: Event) => {
event.preventDefault();
onSubmit({ ...library });
onSubmit({ ...library, name: newName });
};
</script>
<form {onsubmit} autocomplete="off" class="m-4 flex flex-col gap-2">
<div class="flex flex-col gap-2">
<label class="immich-form-label" for="path">{$t('name')}</label>
<input class="immich-form-input" id="name" name="name" type="text" bind:value={library.name} />
</div>
<div class="flex w-full justify-end gap-2 pt-2">
<Button size="sm" color="gray" onclick={onCancel}>{$t('cancel')}</Button>
<Button size="sm" type="submit">{$t('save')}</Button>
</div>
<form {onsubmit} autocomplete="off">
<FullScreenModal icon={mdiRenameOutline} title={$t('rename')} onClose={onCancel}>
<Field label={$t('name')}>
<Input bind:value={newName} />
</Field>
{#snippet stickyBottom()}
<Button shape="round" fullWidth color="secondary" onclick={onCancel}>{$t('cancel')}</Button>
<Button shape="round" fullWidth type="submit">{$t('save')}</Button>
{/snippet}
</FullScreenModal>
</form>