fix: immich ui toggles and switches (#16834)

* fix: immich ui toggles and switches * Update web/src/lib/components/shared-components/navigation-bar/navigation-bar.svelte Co-authored-by: Alex <alex.tran1502@gmail.com> --------- Co-authored-by: Alex <alex.tran1502@gmail.com>
2025-05-24 01:12:58 -04:00 · 2025-03-12 17:25:27 -04:00 · 2025-03-12 17:25:27 -04:00 · 996ffed5eb
commit 996ffed5eb
parent 2d7a94ce23
9 changed files with 51 additions and 46 deletions
--- a/web/package-lock.json
+++ b/web/package-lock.json
@ -11,7 +11,7 @@
      "dependencies": {
        "@formatjs/icu-messageformat-parser": "^2.9.8",
        "@immich/sdk": "file:../open-api/typescript-sdk",
-        "@immich/ui": "^0.17.0",
+        "@immich/ui": "^0.17.3",
        "@mapbox/mapbox-gl-rtl-text": "0.2.3",
        "@mdi/js": "^7.4.47",
        "@photo-sphere-viewer/core": "^5.11.5",
@ -87,7 +87,7 @@
        "@oazapfts/runtime": "^1.0.2"
      },
      "devDependencies": {
-        "@types/node": "^22.13.5",
+        "@types/node": "^22.13.9",
        "typescript": "^5.3.3"
      }
    },
@ -1322,9 +1322,9 @@
      "link": true
    },
    "node_modules/@immich/ui": {
-      "version": "0.17.1",
-      "resolved": "https://registry.npmjs.org/@immich/ui/-/ui-0.17.1.tgz",
-      "integrity": "sha512-VB8a4t09paza6QoUnGtOsFG/XcjBfRqSiPsG2eUKRIavlpBYuNB5INZXV/207EfWX9TVnQND7ZitdTi39bZDvg==",
+      "version": "0.17.3",
+      "resolved": "https://registry.npmjs.org/@immich/ui/-/ui-0.17.3.tgz",
+      "integrity": "sha512-oZ8lJCa/bC+HQYxi4Qi7syW4jWpyyGM4Mue55cvXCECj+292Mu4aOC6oDt7617vMPF7kPblE2A7CpGqJxy5T8g==",
      "license": "GNU Affero General Public License version 3",
      "dependencies": {
        "@mdi/js": "^7.4.47",
--- a/web/package.json
+++ b/web/package.json
@ -68,7 +68,7 @@
  "dependencies": {
    "@formatjs/icu-messageformat-parser": "^2.9.8",
    "@immich/sdk": "file:../open-api/typescript-sdk",
-    "@immich/ui": "^0.17.0",
+    "@immich/ui": "^0.17.3",
    "@mapbox/mapbox-gl-rtl-text": "0.2.3",
    "@mdi/js": "^7.4.47",
    "@photo-sphere-viewer/core": "^5.11.5",
--- a/web/src/lib/components/forms/create-user-form.svelte
+++ b/web/src/lib/components/forms/create-user-form.svelte
@ -91,7 +91,7 @@

      {#if $featureFlags.email}
        <Field label={$t('admin.send_welcome_email')}>
-          <Switch id="send-welcome-email" bind:checked={notify} class="flex justify-between text-sm" />
+          <Switch id="send-welcome-email" bind:checked={notify} class="text-sm" />
        </Field>
      {/if}

@ -105,7 +105,7 @@
      </Field>

      <Field label={$t('admin.require_password_change_on_login')}>
-        <Switch id="require-password-change" bind:checked={shouldChangePassword} class="flex justify-between text-sm" />
+        <Switch id="require-password-change" bind:checked={shouldChangePassword} class="text-sm" />
      </Field>

      <Field label={$t('name')} required>
--- a/web/src/lib/components/map-page/map-settings-modal.svelte
+++ b/web/src/lib/components/map-page/map-settings-modal.svelte
@ -29,19 +29,19 @@
  <FullScreenModal title={$t('map_settings')} {onClose}>
    <Stack gap={4}>
      <Field label={$t('allow_dark_mode')}>
-        <Switch bind:checked={settings.allowDarkMode} class="flex justify-between items-center text-sm" />
+        <Switch bind:checked={settings.allowDarkMode} />
      </Field>
      <Field label={$t('only_favorites')}>
-        <Switch bind:checked={settings.onlyFavorites} class="flex justify-between items-center text-sm" />
+        <Switch bind:checked={settings.onlyFavorites} />
      </Field>
      <Field label={$t('include_archived')}>
-        <Switch bind:checked={settings.includeArchived} class="flex justify-between items-center text-sm" />
+        <Switch bind:checked={settings.includeArchived} />
      </Field>
      <Field label={$t('include_shared_partner_assets')}>
-        <Switch bind:checked={settings.withPartners} class="flex justify-between items-center text-sm" />
+        <Switch bind:checked={settings.withPartners} />
      </Field>
      <Field label={$t('include_shared_albums')}>
-        <Switch bind:checked={settings.withSharedAlbums} class="flex justify-between items-center text-sm" />
+        <Switch bind:checked={settings.withSharedAlbums} />
      </Field>

      {#if customDateRange}
--- a/web/src/lib/components/memory-page/memory-viewer.svelte
+++ b/web/src/lib/components/memory-page/memory-viewer.svelte
@ -503,12 +503,11 @@
              class:opacity-0={galleryInView}
              class:opacity-100={!galleryInView}
            >
-              <div class="flex">
+              <div class="flex items-center">
                <IconButton
                  icon={isSaved ? mdiHeart : mdiHeartOutline}
                  shape="round"
                  variant="ghost"
-                  size="giant"
                  color="secondary"
                  aria-label={isSaved ? $t('unfavorite') : $t('favorite')}
                  onclick={() => handleSaveMemory(current)}
@ -524,9 +523,11 @@
                /> -->
                <ButtonContextMenu
                  icon={mdiDotsVertical}
+                  padding="3"
                  title={$t('menu')}
                  onclick={() => handleAction('pause')}
                  direction="left"
+                  size="20"
                  align="bottom-right"
                  class="text-white dark:text-white"
                >
@ -548,7 +549,6 @@
                  color="secondary"
                  variant="ghost"
                  shape="round"
-                  size="giant"
                  class="text-white dark:text-white"
                />
              </div>
--- a/web/src/lib/components/shared-components/create-share-link-modal/create-shared-link-modal.svelte
+++ b/web/src/lib/components/shared-components/create-share-link-modal/create-shared-link-modal.svelte
@ -256,14 +256,13 @@
          <QRCode value={sharedLink} width={modalWidth} />
        </div>
      </div>
-      <HStack class="w-full p-3">
+      <HStack class="w-full pt-3" gap={1}>
        <Input bind:value={sharedLink} disabled class="flex flex-row" />
        <div>
          <IconButton
            variant="ghost"
            shape="round"
            color="secondary"
-            size="large"
            icon={mdiContentCopy}
            onclick={() => (sharedLink ? copyToClipboard(sharedLink) : '')}
            aria-label={$t('copy_link_to_clipboard')}
--- a/web/src/lib/components/shared-components/navigation-bar/navigation-bar.svelte
+++ b/web/src/lib/components/shared-components/navigation-bar/navigation-bar.svelte
@ -1,7 +1,6 @@
 <script lang="ts">
  import { page } from '$app/state';
  import { clickOutside } from '$lib/actions/click-outside';
-  import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
  import SkipLink from '$lib/components/elements/buttons/skip-link.svelte';
  import HelpAndFeedbackModal from '$lib/components/shared-components/help-and-feedback-modal.svelte';
  import ImmichLogo from '$lib/components/shared-components/immich-logo.svelte';
@ -68,14 +67,40 @@

      <section class="flex place-items-center justify-end gap-1 md:gap-2 w-full sm:w-auto">
        {#if $featureFlags.search}
-          <CircleIconButton
+          <IconButton
+            color="secondary"
+            shape="round"
+            variant="ghost"
+            size="large"
+            icon={mdiMagnify}
            href={AppRoute.SEARCH}
            id="search-button"
            class="sm:hidden"
            title={$t('go_to_search')}
-            icon={mdiMagnify}
-            padding="2"
-            onclick={() => {}}
+            aria-label={$t('go_to_search')}
+          />
+        {/if}
+
+        {#if !page.url.pathname.includes('/admin') && showUploadButton}
+          <Button
+            leadingIcon={mdiTrayArrowUp}
+            onclick={onUploadClick}
+            class="hidden lg:flex"
+            variant="ghost"
+            size="medium"
+            color="secondary"
+            >{$t('upload')}
+          </Button>
+          <IconButton
+            color="secondary"
+            shape="round"
+            variant="ghost"
+            size="large"
+            onclick={onUploadClick}
+            title={$t('upload')}
+            aria-label={$t('upload')}
+            icon={mdiTrayArrowUp}
+            class="lg:hidden"
          />
        {/if}

@ -90,7 +115,7 @@
            shape="round"
            color="secondary"
            variant="ghost"
-            size="giant"
+            size="large"
            title={$t('support_and_feedback')}
            icon={mdiHelpCircleOutline}
            onclick={() => (shouldShowHelpPanel = !shouldShowHelpPanel)}
@ -98,24 +123,6 @@
          />
        </div>

-        {#if !page.url.pathname.includes('/admin') && showUploadButton}
-          <Button
-            leadingIcon={mdiTrayArrowUp}
-            onclick={onUploadClick}
-            class="hidden lg:flex"
-            variant="ghost"
-            color="secondary"
-            >{$t('upload')}
-          </Button>
-          <CircleIconButton
-            onclick={onUploadClick}
-            title={$t('upload')}
-            icon={mdiTrayArrowUp}
-            class="lg:hidden"
-            padding="2"
-          />
-        {/if}
-
        <div
          use:clickOutside={{
            onOutclick: () => (shouldShowAccountInfoPanel = false),
--- a/web/src/routes/(user)/utilities/duplicates/[[photos=photos]]/[[assetId=id]]/+page.svelte
+++ b/web/src/routes/(user)/utilities/duplicates/[[photos=photos]]/[[assetId=id]]/+page.svelte
@ -186,7 +186,6 @@
        shape="round"
        variant="ghost"
        color="secondary"
-        size="large"
        icon={mdiKeyboard}
        title={$t('show_keyboard_shortcuts')}
        onclick={() => (isShowKeyboardShortcut = !isShowKeyboardShortcut)}
--- a/web/src/routes/admin/user-management/+page.svelte
+++ b/web/src/routes/admin/user-management/+page.svelte
@ -222,7 +222,7 @@
                  {#if !immichUser.deletedAt}
                    <IconButton
                      shape="round"
-                      size="large"
+                      size="small"
                      icon={mdiPencilOutline}
                      title={$t('edit_user')}
                      onclick={() => editUserHandler(immichUser)}
@ -231,7 +231,7 @@
                    {#if immichUser.id !== $user.id}
                      <IconButton
                        shape="round"
-                        size="large"
+                        size="small"
                        icon={mdiTrashCanOutline}
                        title={$t('delete_user')}
                        onclick={() => deleteUserHandler(immichUser)}
@ -242,7 +242,7 @@
                  {#if immichUser.deletedAt && immichUser.status === UserStatus.Deleted}
                    <IconButton
                      shape="round"
-                      size="large"
+                      size="small"
                      icon={mdiDeleteRestore}
                      title={$t('admin.user_restore_scheduled_removal', {
                        values: { date: getDeleteDate(immichUser.deletedAt) },