feat: better library rename UX (#16837)

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>

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>

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>

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>

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>

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}