fix(web): user settings styling

2026-02-01 09:44:47 -08:00 · 2026-02-01 17:45:36 +01:00
20 changed files with 143 additions and 127 deletions
--- a/mobile/ios/Podfile
+++ b/mobile/ios/Podfile
@@ -121,6 +121,4 @@ post_install do |installer|
    end
    # End of the permission_handler configuration
  end
-  system("defaults write com.apple.dt.Xcode IDESkipPackagePluginFingerprintValidatation -bool YES")
-  system("defaults write com.apple.dt.Xcode IDESkipMacroFingerprintValidation -bool YES")
 end
--- a/mobile/ios/Podfile.lock
+++ b/mobile/ios/Podfile.lock
@@ -300,6 +300,6 @@ SPEC CHECKSUMS:
  url_launcher_ios: 694010445543906933d732453a59da0a173ae33d
  wakelock_plus: e29112ab3ef0b318e58cfa5c32326458be66b556

-PODFILE CHECKSUM: 938abbae4114b9c2140c550a2a0d8f7c674f5dfe
+PODFILE CHECKSUM: 7ce312f2beab01395db96f6969d90a447279cf45

 COCOAPODS: 1.16.2
--- a/mobile/ios/Runner.xcworkspace/xcshareddata/swiftpm/Package.resolved
+++ b/mobile/ios/Runner.xcworkspace/xcshareddata/swiftpm/Package.resolved
@@ -15,8 +15,8 @@
      "kind" : "remoteSourceControl",
      "location" : "https://github.com/groue/GRDB.swift",
      "state" : {
-        "revision" : "aa0079aeb82a4bf00324561a40bffe68c6fe1c26",
-        "version" : "7.9.0"
+        "revision" : "18497b68fdbb3a09528d260a0a0e1e7e61c8c53d",
+        "version" : "7.8.0"
      }
    },
    {
@@ -24,8 +24,17 @@
      "kind" : "remoteSourceControl",
      "location" : "https://github.com/pointfreeco/sqlite-data",
      "state" : {
-        "revision" : "05704b563ecb7f0bd7e49b6f360a6383a3e53e7d",
-        "version" : "1.5.1"
+        "revision" : "b66b894b9a5710f1072c8eb6448a7edfc2d743d9",
+        "version" : "1.3.0"
+      }
+    },
+    {
+      "identity" : "swift-case-paths",
+      "kind" : "remoteSourceControl",
+      "location" : "https://github.com/pointfreeco/swift-case-paths",
+      "state" : {
+        "revision" : "6989976265be3f8d2b5802c722f9ba168e227c71",
+        "version" : "1.7.2"
      }
    },
    {
@@ -123,8 +132,8 @@
      "kind" : "remoteSourceControl",
      "location" : "https://github.com/pointfreeco/swift-structured-queries",
      "state" : {
-        "revision" : "d8163b3a98f3c8434c4361e85126db449d84bc66",
-        "version" : "0.30.0"
+        "revision" : "1447ea20550f6f02c4b48cc80931c3ed40a9c756",
+        "version" : "0.25.0"
      }
    },
    {
@@ -136,6 +145,15 @@
        "version" : "602.0.0"
      }
    },
+    {
+      "identity" : "swift-tagged",
+      "kind" : "remoteSourceControl",
+      "location" : "https://github.com/pointfreeco/swift-tagged",
+      "state" : {
+        "revision" : "3907a9438f5b57d317001dc99f3f11b46882272b",
+        "version" : "0.10.0"
+      }
+    },
    {
      "identity" : "xctest-dynamic-overlay",
      "kind" : "remoteSourceControl",
--- a/mobile/lib/models/server_info/server_info.model.dart
+++ b/mobile/lib/models/server_info/server_info.model.dart
@@ -20,7 +20,7 @@ enum VersionStatus {

 class ServerInfo {
  final ServerVersion serverVersion;
-  final ServerVersion? latestVersion;
+  final ServerVersion latestVersion;
  final ServerFeatures serverFeatures;
  final ServerConfig serverConfig;
  final ServerDiskInfo serverDiskInfo;
--- a/mobile/lib/providers/server_info.provider.dart
+++ b/mobile/lib/providers/server_info.provider.dart
@@ -15,7 +15,7 @@ class ServerInfoNotifier extends StateNotifier<ServerInfo> {
    : super(
        const ServerInfo(
          serverVersion: ServerVersion(major: 0, minor: 0, patch: 0),
-          latestVersion: null,
+          latestVersion: ServerVersion(major: 0, minor: 0, patch: 0),
          serverFeatures: ServerFeatures(map: true, trash: true, oauthEnabled: false, passwordLogin: true),
          serverConfig: ServerConfig(
            trashDays: 30,
@@ -43,7 +43,7 @@ class ServerInfoNotifier extends StateNotifier<ServerInfo> {
    try {
      final serverVersion = await _serverInfoService.getServerVersion();

-      // using isClientOutOfDate since that will show to users regardless of if they are an admin
+      // using isClientOutOfDate since that will show to users reguardless of if they are an admin
      if (serverVersion == null) {
        state = state.copyWith(versionStatus: VersionStatus.error);
        return;
@@ -76,7 +76,7 @@ class ServerInfoNotifier extends StateNotifier<ServerInfo> {
    state = state.copyWith(versionStatus: VersionStatus.upToDate);
  }

-  handleReleaseInfo(ServerVersion serverVersion, ServerVersion? latestVersion) {
+  handleReleaseInfo(ServerVersion serverVersion, ServerVersion latestVersion) {
    // Update local server version
    _checkServerVersionMismatch(serverVersion, latestVersion: latestVersion);
  }
--- a/mobile/lib/widgets/common/app_bar_dialog/app_bar_server_info.dart
+++ b/mobile/lib/widgets/common/app_bar_dialog/app_bar_server_info.dart
@@ -170,52 +170,50 @@ class AppBarServerInfo extends HookConsumerWidget {
                  ),
                ],
              ),
-              if (serverInfoState.latestVersion != null) ...[
-                const Padding(padding: EdgeInsets.symmetric(horizontal: 10), child: Divider(thickness: 1)),
-                Row(
-                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
-                  children: [
-                    Expanded(
-                      child: Padding(
-                        padding: const EdgeInsets.only(left: 10.0),
-                        child: Row(
-                          children: [
-                            if (serverInfoState.versionStatus == VersionStatus.serverOutOfDate)
-                              const Padding(
-                                padding: EdgeInsets.only(right: 5.0),
-                                child: Icon(Icons.info, color: Color.fromARGB(255, 243, 188, 106), size: 12),
-                              ),
-                            Text(
-                              "latest_version".tr(),
-                              style: TextStyle(
-                                fontSize: titleFontSize,
-                                color: context.textTheme.labelSmall?.color,
-                                fontWeight: FontWeight.w500,
-                              ),
+              const Padding(padding: EdgeInsets.symmetric(horizontal: 10), child: Divider(thickness: 1)),
+              Row(
+                mainAxisAlignment: MainAxisAlignment.spaceBetween,
+                children: [
+                  Expanded(
+                    child: Padding(
+                      padding: const EdgeInsets.only(left: 10.0),
+                      child: Row(
+                        children: [
+                          if (serverInfoState.versionStatus == VersionStatus.serverOutOfDate)
+                            const Padding(
+                              padding: EdgeInsets.only(right: 5.0),
+                              child: Icon(Icons.info, color: Color.fromARGB(255, 243, 188, 106), size: 12),
+                            ),
+                          Text(
+                            "latest_version".tr(),
+                            style: TextStyle(
+                              fontSize: titleFontSize,
+                              color: context.textTheme.labelSmall?.color,
+                              fontWeight: FontWeight.w500,
                            ),
-                          ],
-                        ),
-                      ),
-                    ),
-                    Expanded(
-                      flex: 0,
-                      child: Padding(
-                        padding: const EdgeInsets.only(right: 10.0),
-                        child: Text(
-                          serverInfoState.latestVersion!.major > 0
-                              ? "${serverInfoState.latestVersion!.major}.${serverInfoState.latestVersion!.minor}.${serverInfoState.latestVersion!.patch}"
-                              : "--",
-                          style: TextStyle(
-                            fontSize: contentFontSize,
-                            color: context.colorScheme.onSurfaceSecondary,
-                            fontWeight: FontWeight.bold,
                          ),
+                        ],
+                      ),
+                    ),
+                  ),
+                  Expanded(
+                    flex: 0,
+                    child: Padding(
+                      padding: const EdgeInsets.only(right: 10.0),
+                      child: Text(
+                        serverInfoState.latestVersion.major > 0
+                            ? "${serverInfoState.latestVersion.major}.${serverInfoState.latestVersion.minor}.${serverInfoState.latestVersion.patch}"
+                            : "--",
+                        style: TextStyle(
+                          fontSize: contentFontSize,
+                          color: context.colorScheme.onSurfaceSecondary,
+                          fontWeight: FontWeight.bold,
                        ),
                      ),
                    ),
-                  ],
-                ),
-              ],
+                  ),
+                ],
+              ),
            ],
          ),
        ),
--- a/mobile/pubspec.lock
+++ b/mobile/pubspec.lock
@@ -1249,10 +1249,10 @@ packages:
    dependency: transitive
    description:
      name: meta
-      sha256: "23f08335362185a5ea2ad3a4e597f1375e78bce8a040df5c600c8d3552ef2394"
+      sha256: e3641ec5d63ebf0d9b41bd43201a66e3fc79a65db5f61fc181f04cd27aab950c
      url: "https://pub.dev"
    source: hosted
-    version: "1.17.0"
+    version: "1.16.0"
  mime:
    dependency: transitive
    description:
@@ -1942,10 +1942,10 @@ packages:
    dependency: transitive
    description:
      name: test_api
-      sha256: ab2726c1a94d3176a45960b6234466ec367179b87dd74f1611adb1f3b5fb9d55
+      sha256: "522f00f556e73044315fa4585ec3270f1808a4b186c936e612cab0b565ff1e00"
      url: "https://pub.dev"
    source: hosted
-    version: "0.7.7"
+    version: "0.7.6"
  thumbhash:
    dependency: "direct main"
    description:
--- a/web/src/lib/components/user-settings-page/PinCodeChangeForm.svelte
+++ b/web/src/lib/components/user-settings-page/PinCodeChangeForm.svelte
@@ -5,7 +5,6 @@
  import { changePinCode } from '@immich/sdk';
  import { Button, Heading, modalManager, Text, toastManager } from '@immich/ui';
  import { t } from 'svelte-i18n';
-  import { fade } from 'svelte/transition';

  let currentPinCode = $state('');
  let newPinCode = $state('');
@@ -38,27 +37,23 @@
  };
 </script>

-<section class="my-4">
-  <div in:fade={{ duration: 200 }}>
-    <form autocomplete="off" onsubmit={handleSubmit} class="mt-6">
-      <div class="flex flex-col gap-6 place-items-center place-content-center">
-        <Heading>{$t('change_pin_code')}</Heading>
-        <PinCodeInput label={$t('current_pin_code')} bind:value={currentPinCode} tabindexStart={1} pinLength={6} />
-        <PinCodeInput label={$t('new_pin_code')} bind:value={newPinCode} tabindexStart={7} pinLength={6} />
-        <PinCodeInput label={$t('confirm_new_pin_code')} bind:value={confirmPinCode} tabindexStart={13} pinLength={6} />
-        <button type="button" onclick={() => modalManager.show(PinCodeResetModal, {})}>
-          <Text color="muted" class="underline" size="small">{$t('forgot_pin_code_question')}</Text>
-        </button>
-      </div>
-
-      <div class="flex justify-end gap-2 mt-4">
-        <Button shape="round" color="secondary" type="button" size="small" onclick={resetForm}>
-          {$t('clear')}
-        </Button>
-        <Button shape="round" type="submit" size="small" loading={isLoading} disabled={!canSubmit}>
-          {$t('save')}
-        </Button>
-      </div>
-    </form>
+<form autocomplete="off" onsubmit={handleSubmit}>
+  <div class="flex flex-col gap-6 place-items-center place-content-center">
+    <Heading>{$t('change_pin_code')}</Heading>
+    <PinCodeInput label={$t('current_pin_code')} bind:value={currentPinCode} tabindexStart={1} pinLength={6} />
+    <PinCodeInput label={$t('new_pin_code')} bind:value={newPinCode} tabindexStart={7} pinLength={6} />
+    <PinCodeInput label={$t('confirm_new_pin_code')} bind:value={confirmPinCode} tabindexStart={13} pinLength={6} />
+    <button type="button" onclick={() => modalManager.show(PinCodeResetModal, {})}>
+      <Text color="muted" class="underline" size="small">{$t('forgot_pin_code_question')}</Text>
+    </button>
  </div>
-</section>
+
+  <div class="flex justify-end gap-2 mt-4">
+    <Button shape="round" color="secondary" type="button" size="small" onclick={resetForm}>
+      {$t('clear')}
+    </Button>
+    <Button shape="round" type="submit" size="small" loading={isLoading} disabled={!canSubmit}>
+      {$t('save')}
+    </Button>
+  </div>
+</form>
--- a/web/src/lib/components/user-settings-page/PinCodeSettings.svelte
+++ b/web/src/lib/components/user-settings-page/PinCodeSettings.svelte
@@ -20,7 +20,7 @@

 <OnEvents {onUserPinCodeReset} />

-<section>
+<section class="my-4 sm:ms-8">
  {#if hasPinCode}
    <div in:fade={{ duration: 200 }}>
      <PinCodeChangeForm />
--- a/web/src/lib/components/user-settings-page/app-settings.svelte
+++ b/web/src/lib/components/user-settings-page/app-settings.svelte
@@ -59,7 +59,7 @@

 <section class="my-4">
  <div in:fade={{ duration: 500 }}>
-    <div class="ms-8 mt-4 flex flex-col gap-6">
+    <div class="sm:ms-8 flex flex-col gap-6">
      <Field label={$t('theme_selection')} description={$t('theme_selection_description')}>
        <Switch checked={themeManager.theme.system} onCheckedChange={(checked) => themeManager.setSystem(checked)} />
      </Field>
--- a/web/src/lib/components/user-settings-page/change-password-settings.svelte
+++ b/web/src/lib/components/user-settings-page/change-password-settings.svelte
@@ -23,7 +23,7 @@
 <section class="my-4">
  <div in:fade={{ duration: 500 }}>
    <form autocomplete="off" {onsubmit}>
-      <div class="ms-4 mt-4 flex flex-col gap-4">
+      <div class="sm:ms-8 flex flex-col gap-4">
        <Field label={$t('password')} required>
          <PasswordInput bind:value={password} autocomplete="current-password" />
        </Field>
--- a/web/src/lib/components/user-settings-page/device-list.svelte
+++ b/web/src/lib/components/user-settings-page/device-list.svelte
@@ -3,6 +3,7 @@
  import { deleteAllSessions, deleteSession, getSessions, type SessionResponseDto } from '@immich/sdk';
  import { Button, modalManager, Text, toastManager } from '@immich/ui';
  import { t } from 'svelte-i18n';
+  import { fade } from 'svelte/transition';
  import DeviceCard from './device-card.svelte';

  interface Props {
@@ -50,33 +51,39 @@
 </script>

 <section class="my-4">
-  {#if currentSession}
-    <div class="mb-6">
-      <Text class="mb-2" fontWeight="medium" size="tiny" color="primary">
-        {$t('current_device')}
-      </Text>
-      <DeviceCard session={currentSession} />
-    </div>
-  {/if}
-  {#if otherSessions.length > 0}
-    <div class="mb-6">
-      <Text class="mb-2" fontWeight="medium" size="tiny" color="primary">
-        {$t('other_devices')}
-      </Text>
-      {#each otherSessions as session, index (session.id)}
-        <DeviceCard {session} onDelete={() => handleDelete(session)} />
-        {#if index !== otherSessions.length - 1}
-          <hr class="my-3" />
-        {/if}
-      {/each}
-    </div>
+  <div in:fade={{ duration: 500 }}>
+    <div class="sm:ms-8 flex flex-col gap-4">
+      {#if currentSession}
+        <div class="mb-6">
+          <Text class="mb-2" fontWeight="medium" size="tiny" color="primary">
+            {$t('current_device')}
+          </Text>
+          <DeviceCard session={currentSession} />
+        </div>
+      {/if}
+      {#if otherSessions.length > 0}
+        <div class="mb-6">
+          <Text class="mb-2" fontWeight="medium" size="tiny" color="primary">
+            {$t('other_devices')}
+          </Text>
+          {#each otherSessions as session, index (session.id)}
+            <DeviceCard {session} onDelete={() => handleDelete(session)} />
+            {#if index !== otherSessions.length - 1}
+              <hr class="my-3" />
+            {/if}
+          {/each}
+        </div>

-    <div class="my-3">
-      <hr />
-    </div>
+        <div class="my-3">
+          <hr />
+        </div>

-    <div class="flex justify-end">
-      <Button shape="round" color="danger" size="small" onclick={handleDeleteAll}>{$t('log_out_all_devices')}</Button>
+        <div class="flex justify-end">
+          <Button shape="round" color="danger" size="small" onclick={handleDeleteAll}
+            >{$t('log_out_all_devices')}</Button
+          >
+        </div>
+      {/if}
    </div>
-  {/if}
+  </div>
 </section>
--- a/web/src/lib/components/user-settings-page/download-settings.svelte
+++ b/web/src/lib/components/user-settings-page/download-settings.svelte
@@ -39,7 +39,7 @@
 <section class="my-4">
  <div in:fade={{ duration: 500 }}>
    <form autocomplete="off" {onsubmit}>
-      <div class="ms-4 mt-4 flex flex-col gap-4">
+      <div class="sm:ms-8 flex flex-col gap-4">
        <SettingInputField
          inputType={SettingInputFieldType.NUMBER}
          label={$t('archive_size')}
--- a/web/src/lib/components/user-settings-page/feature-settings.svelte
+++ b/web/src/lib/components/user-settings-page/feature-settings.svelte
@@ -67,9 +67,9 @@
 <section class="my-4">
  <div in:fade={{ duration: 500 }}>
    <form autocomplete="off" {onsubmit}>
-      <div class="ms-4 mt-4 flex flex-col">
+      <div class="sm:ms-4 md:ms-8 flex flex-col">
        <SettingAccordion key="albums" title={$t('albums')} subtitle={$t('albums_feature_description')}>
-          <div class="ms-4 mt-6 flex flex-col gap-4">
+          <div class="sm:ms-4 mt-4 flex flex-col gap-4">
            <Field label={$t('albums_default_sort_order')} description={$t('albums_default_sort_order_description')}>
              <Select
                options={[
@@ -83,7 +83,7 @@
        </SettingAccordion>

        <SettingAccordion key="folders" title={$t('folders')} subtitle={$t('folders_feature_description')}>
-          <div class="ms-4 mt-6 flex flex-col gap-4">
+          <div class="sm:ms-4 mt-4 flex flex-col gap-4">
            <Field label={$t('enable')}>
              <Switch bind:checked={foldersEnabled} />
            </Field>
@@ -97,7 +97,7 @@
        </SettingAccordion>

        <SettingAccordion key="memories" title={$t('time_based_memories')} subtitle={$t('photos_from_previous_years')}>
-          <div class="ms-4 mt-6 flex flex-col gap-4">
+          <div class="sm:ms-4 mt-4 flex flex-col gap-4">
            <Field label={$t('enable')}>
              <Switch bind:checked={memoriesEnabled} />
            </Field>
@@ -109,7 +109,7 @@
        </SettingAccordion>

        <SettingAccordion key="people" title={$t('people')} subtitle={$t('people_feature_description')}>
-          <div class="ms-4 mt-6 flex flex-col gap-4">
+          <div class="sm:ms-4 mt-4 flex flex-col gap-4">
            <Field label={$t('enable')}>
              <Switch bind:checked={peopleEnabled} />
            </Field>
@@ -123,7 +123,7 @@
        </SettingAccordion>

        <SettingAccordion key="rating" title={$t('rating')} subtitle={$t('rating_description')}>
-          <div class="ms-4 mt-6 flex flex-col gap-4">
+          <div class="sm:ms-4 mt-4 flex flex-col gap-4">
            <Field label={$t('enable')}>
              <Switch bind:checked={ratingsEnabled} />
            </Field>
@@ -131,7 +131,7 @@
        </SettingAccordion>

        <SettingAccordion key="shared-links" title={$t('shared_links')} subtitle={$t('shared_links_description')}>
-          <div class="ms-4 mt-6 flex flex-col gap-4">
+          <div class="sm:ms-4 mt-4 flex flex-col gap-4">
            <Field label={$t('enable')}>
              <Switch bind:checked={sharedLinksEnabled} />
            </Field>
@@ -145,7 +145,7 @@
        </SettingAccordion>

        <SettingAccordion key="tags" title={$t('tags')} subtitle={$t('tag_feature_description')}>
-          <div class="ms-4 mt-6 flex flex-col gap-4">
+          <div class="sm:ms-4 mt-4 flex flex-col gap-4">
            <Field label={$t('enable')}>
              <Switch bind:checked={tagsEnabled} />
            </Field>
@@ -159,7 +159,7 @@
        </SettingAccordion>

        <SettingAccordion key="cast" title={$t('cast')} subtitle={$t('cast_description')}>
-          <div class="ms-4 mt-6 flex flex-col gap-4">
+          <div class="sm:ms-4 mt-4 flex flex-col gap-4">
            <Field label={$t('gcast_enabled')} description={$t('gcast_enabled_description')}>
              <Switch bind:checked={gCastEnabled} />
            </Field>
--- a/web/src/lib/components/user-settings-page/notifications-settings.svelte
+++ b/web/src/lib/components/user-settings-page/notifications-settings.svelte
@@ -42,7 +42,7 @@
 <section class="my-4">
  <div in:fade={{ duration: 500 }}>
    <form autocomplete="off" {onsubmit}>
-      <div class="ms-4 mt-4 flex flex-col gap-6">
+      <div class="sm:ms-8 flex flex-col gap-6">
        <Field label={$t('enable')} description={$t('notification_toggle_setting_description')}>
          <Switch bind:checked={emailNotificationsEnabled} />
        </Field>
--- a/web/src/lib/components/user-settings-page/oauth-settings.svelte
+++ b/web/src/lib/components/user-settings-page/oauth-settings.svelte
@@ -45,7 +45,7 @@

 <section class="my-4">
  <div in:fade={{ duration: 500 }}>
-    <div class="flex justify-end">
+    <div class="sm:ms-8 flex justify-end">
      {#if loading}
        <div class="flex place-content-center place-items-center">
          <LoadingSpinner />
--- a/web/src/lib/components/user-settings-page/user-api-key-list.svelte
+++ b/web/src/lib/components/user-settings-page/user-api-key-list.svelte
@@ -33,7 +33,7 @@
 <OnEvents {onApiKeyCreate} {onApiKeyUpdate} {onApiKeyDelete} />

 <section class="my-4">
-  <div class="flex flex-col gap-2" in:fade={{ duration: 500 }}>
+  <div class="sm:ms-8 flex flex-col gap-2" in:fade={{ duration: 500 }}>
    <div class="mb-2 flex justify-end">
      <Button leadingIcon={Create.icon} shape="round" size="small" onclick={() => Create.onAction(Create)}>
        {Create.title}
--- a/web/src/lib/components/user-settings-page/user-profile-settings.svelte
+++ b/web/src/lib/components/user-settings-page/user-profile-settings.svelte
@@ -33,7 +33,7 @@
 <section class="my-4">
  <div in:fade={{ duration: 500 }}>
    <form autocomplete="off" onsubmit={preventDefault(bubble('submit'))}>
-      <div class="ms-4 mt-4 flex flex-col gap-4">
+      <div class="sm:ms-8 flex flex-col gap-4">
        <Field label={$t('user_id')} disabled>
          <Input bind:value={editedUser.id} />
        </Field>
--- a/web/src/lib/components/user-settings-page/user-purchase-settings.svelte
+++ b/web/src/lib/components/user-settings-page/user-purchase-settings.svelte
@@ -105,7 +105,7 @@
 </script>

 <section class="my-4">
-  <div in:fade={{ duration: 500 }}>
+  <div class="sm:ms-8" in:fade={{ duration: 500 }}>
    {#if $isPurchased}
      <!-- BADGE TOGGLE -->
      <div class="mb-4">
--- a/web/src/lib/components/user-settings-page/user-usage-statistic.svelte
+++ b/web/src/lib/components/user-settings-page/user-usage-statistic.svelte
@@ -65,7 +65,7 @@
  </TableRow>
 {/snippet}

-<section class="my-6 w-full">
+<section class="my-4 w-full">
  <Heading size="tiny">{$t('photos_and_videos')}</Heading>
  <Table striped spacing="small" class="mt-4" size="small">
    <TableHeader>