From 2d7a94ce2384626c3a9aa42d7ca953ae2b8c66d1 Mon Sep 17 00:00:00 2001
From: Jason Rasmussen <jason@rasm.me>
Date: Wed, 12 Mar 2025 17:00:16 -0400
Subject: [PATCH] feat: better library rename UX (#16837)

---
 .../library-exclusion-pattern-form.svelte     | 12 +++---
 .../forms/library-import-path-form.svelte     | 10 +++--
 .../forms/library-import-paths-form.svelte    | 40 ++++++++-----------
 .../forms/library-rename-form.svelte          | 30 ++++++++------
 .../forms/library-user-picker-form.svelte     | 14 +++----
 .../admin/library-management/+page.svelte     | 14 ++++---
 6 files changed, 63 insertions(+), 57 deletions(-)

diff --git a/web/src/lib/components/forms/library-exclusion-pattern-form.svelte b/web/src/lib/components/forms/library-exclusion-pattern-form.svelte
index e79b60d265..d6ce4bcda0 100644
--- a/web/src/lib/components/forms/library-exclusion-pattern-form.svelte
+++ b/web/src/lib/components/forms/library-exclusion-pattern-form.svelte
@@ -1,9 +1,9 @@
 <script lang="ts">
-  import Button from '../elements/buttons/button.svelte';
-  import FullScreenModal from '../shared-components/full-screen-modal.svelte';
+  import { Button } from '@immich/ui';
   import { mdiFolderRemove } from '@mdi/js';
   import { onMount } from 'svelte';
   import { t } from 'svelte-i18n';
+  import FullScreenModal from '../shared-components/full-screen-modal.svelte';
 
   interface Props {
     exclusionPattern: string;
@@ -67,10 +67,12 @@
   </form>
 
   {#snippet stickyBottom()}
-    <Button color="gray" fullwidth onclick={onCancel}>{$t('cancel')}</Button>
+    <Button shape="round" color="secondary" fullWidth onclick={onCancel}>{$t('cancel')}</Button>
     {#if isEditing}
-      <Button color="red" fullwidth onclick={onDelete}>{$t('delete')}</Button>
+      <Button shape="round" color="danger" fullWidth onclick={onDelete}>{$t('delete')}</Button>
     {/if}
-    <Button type="submit" disabled={!canSubmit} fullwidth form="add-exclusion-pattern-form">{submitText}</Button>
+    <Button shape="round" type="submit" disabled={!canSubmit} fullWidth form="add-exclusion-pattern-form"
+      >{submitText}</Button
+    >
   {/snippet}
 </FullScreenModal>
diff --git a/web/src/lib/components/forms/library-import-path-form.svelte b/web/src/lib/components/forms/library-import-path-form.svelte
index 33e763f0f0..512b8919e3 100644
--- a/web/src/lib/components/forms/library-import-path-form.svelte
+++ b/web/src/lib/components/forms/library-import-path-form.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import Button from '../elements/buttons/button.svelte';
+  import { Button } from '@immich/ui';
   import FullScreenModal from '../shared-components/full-screen-modal.svelte';
   import { mdiFolderSync } from '@mdi/js';
   import { onMount } from 'svelte';
@@ -63,10 +63,12 @@
   </form>
 
   {#snippet stickyBottom()}
-    <Button color="gray" fullwidth onclick={onCancel}>{cancelText}</Button>
+    <Button shape="round" color="secondary" fullWidth onclick={onCancel}>{cancelText}</Button>
     {#if isEditing}
-      <Button color="red" fullwidth onclick={onDelete}>{$t('delete')}</Button>
+      <Button shape="round" color="danger" fullWidth onclick={onDelete}>{$t('delete')}</Button>
     {/if}
-    <Button type="submit" disabled={!canSubmit} fullwidth form="library-import-path-form">{submitText}</Button>
+    <Button shape="round" type="submit" disabled={!canSubmit} fullWidth form="library-import-path-form"
+      >{submitText}</Button
+    >
   {/snippet}
 </FullScreenModal>
diff --git a/web/src/lib/components/forms/library-import-paths-form.svelte b/web/src/lib/components/forms/library-import-paths-form.svelte
index 6ad5b2598d..639b81071f 100644
--- a/web/src/lib/components/forms/library-import-paths-form.svelte
+++ b/web/src/lib/components/forms/library-import-paths-form.svelte
@@ -1,15 +1,15 @@
 <script lang="ts">
-  import { onMount } from 'svelte';
-  import { handleError } from '../../utils/handle-error';
-  import Button from '../elements/buttons/button.svelte';
-  import LibraryImportPathForm from './library-import-path-form.svelte';
-  import Icon from '$lib/components/elements/icon.svelte';
-  import { mdiAlertOutline, mdiCheckCircleOutline, mdiPencilOutline, mdiRefresh } from '@mdi/js';
-  import { validate, type LibraryResponseDto } from '@immich/sdk';
-  import type { ValidateLibraryImportPathResponseDto } from '@immich/sdk';
-  import { NotificationType, notificationController } from '../shared-components/notification/notification';
   import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
+  import Icon from '$lib/components/elements/icon.svelte';
+  import type { ValidateLibraryImportPathResponseDto } from '@immich/sdk';
+  import { validate, type LibraryResponseDto } from '@immich/sdk';
+  import { Button } from '@immich/ui';
+  import { mdiAlertOutline, mdiCheckCircleOutline, mdiPencilOutline, mdiRefresh } from '@mdi/js';
+  import { onMount } from 'svelte';
   import { t } from 'svelte-i18n';
+  import { handleError } from '../../utils/handle-error';
+  import { NotificationType, notificationController } from '../shared-components/notification/notification';
+  import LibraryImportPathForm from './library-import-path-form.svelte';
 
   interface Props {
     library: LibraryResponseDto;
@@ -228,27 +228,21 @@
             {$t('admin.no_paths_added')}
           {/if}</td
         >
-        <td class="w-1/5 text-ellipsis px-4 text-sm"
-          ><Button
-            type="button"
-            size="sm"
-            onclick={() => {
-              addImportPath = true;
-            }}>{$t('add_path')}</Button
-          ></td
-        >
+        <td class="w-1/5 text-ellipsis px-4 text-sm">
+          <Button shape="round" size="small" onclick={() => (addImportPath = true)}>{$t('add_path')}</Button>
+        </td>
       </tr>
     </tbody>
   </table>
   <div class="flex justify-between w-full">
     <div class="justify-end gap-2">
-      <Button size="sm" color="gray" onclick={() => revalidate()}
-        ><Icon path={mdiRefresh} size={20} />{$t('validate')}</Button
+      <Button shape="round" leadingIcon={mdiRefresh} size="small" color="secondary" onclick={() => revalidate()}
+        >{$t('validate')}</Button
       >
     </div>
-    <div class="justify-end gap-2">
-      <Button size="sm" color="gray" onclick={onCancel}>{$t('cancel')}</Button>
-      <Button size="sm" type="submit">{$t('save')}</Button>
+    <div class="flex justify-end gap-2">
+      <Button shape="round" size="small" color="secondary" onclick={onCancel}>{$t('cancel')}</Button>
+      <Button shape="round" size="small" type="submit">{$t('save')}</Button>
     </div>
   </div>
 </form>
diff --git a/web/src/lib/components/forms/library-rename-form.svelte b/web/src/lib/components/forms/library-rename-form.svelte
index 3f20709474..af60bdc2be 100644
--- a/web/src/lib/components/forms/library-rename-form.svelte
+++ b/web/src/lib/components/forms/library-rename-form.svelte
@@ -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>
diff --git a/web/src/lib/components/forms/library-user-picker-form.svelte b/web/src/lib/components/forms/library-user-picker-form.svelte
index 137a49921a..673fe7d5e9 100644
--- a/web/src/lib/components/forms/library-user-picker-form.svelte
+++ b/web/src/lib/components/forms/library-user-picker-form.svelte
@@ -1,12 +1,12 @@
 <script lang="ts">
-  import Button from '../elements/buttons/button.svelte';
-  import FullScreenModal from '../shared-components/full-screen-modal.svelte';
+  import SettingSelect from '$lib/components/shared-components/settings/setting-select.svelte';
+  import { user } from '$lib/stores/user.store';
+  import { searchUsersAdmin } from '@immich/sdk';
+  import { Button } from '@immich/ui';
   import { mdiFolderSync } from '@mdi/js';
   import { onMount } from 'svelte';
-  import { searchUsersAdmin } from '@immich/sdk';
-  import { user } from '$lib/stores/user.store';
-  import SettingSelect from '$lib/components/shared-components/settings/setting-select.svelte';
   import { t } from 'svelte-i18n';
+  import FullScreenModal from '../shared-components/full-screen-modal.svelte';
 
   interface Props {
     onCancel: () => void;
@@ -38,7 +38,7 @@
   </form>
 
   {#snippet stickyBottom()}
-    <Button color="gray" fullwidth onclick={onCancel}>{$t('cancel')}</Button>
-    <Button type="submit" fullwidth form="select-library-owner-form">{$t('create')}</Button>
+    <Button shape="round" color="secondary" fullWidth onclick={onCancel}>{$t('cancel')}</Button>
+    <Button shape="round" type="submit" fullWidth form="select-library-owner-form">{$t('create')}</Button>
   {/snippet}
 </FullScreenModal>
diff --git a/web/src/routes/admin/library-management/+page.svelte b/web/src/routes/admin/library-management/+page.svelte
index 3e3a5491fa..9a598101e1 100644
--- a/web/src/routes/admin/library-management/+page.svelte
+++ b/web/src/routes/admin/library-management/+page.svelte
@@ -357,12 +357,6 @@
                   </ButtonContextMenu>
                 </td>
               </tr>
-              {#if renameLibrary === index}
-                <!-- svelte-ignore node_invalid_placement_ssr -->
-                <div transition:slide={{ duration: 250 }}>
-                  <LibraryRenameForm {library} onSubmit={handleUpdate} onCancel={() => (renameLibrary = undefined)} />
-                </div>
-              {/if}
               {#if editImportPaths === index}
                 <!-- svelte-ignore node_invalid_placement_ssr -->
                 <div transition:slide={{ duration: 250 }}>
@@ -394,3 +388,11 @@
     </div>
   </section>
 </UserPageLayout>
+
+{#if renameLibrary !== undefined}
+  <LibraryRenameForm
+    library={libraries[renameLibrary]}
+    onSubmit={handleUpdate}
+    onCancel={() => (renameLibrary = undefined)}
+  />
+{/if}