From 4e08ff6c3382b3231db9cf855444d007134c9cd7 Mon Sep 17 00:00:00 2001
From: Pavel Sapachev <pavel@sapachev.com>
Date: Thu, 12 Sep 2024 04:35:16 +0300
Subject: [PATCH] fix(web): remove unnecessary divider in External Library
 settings (#12583)

* fix(web): remove unnecessary divider in External Library Settings

* fix: narrowing
---
 .../library-settings/library-settings.svelte  | 163 ++++++++----------
 1 file changed, 76 insertions(+), 87 deletions(-)

diff --git a/web/src/lib/components/admin-page/settings/library-settings/library-settings.svelte b/web/src/lib/components/admin-page/settings/library-settings/library-settings.svelte
index f6ed132c8c..68867a2a49 100644
--- a/web/src/lib/components/admin-page/settings/library-settings/library-settings.svelte
+++ b/web/src/lib/components/admin-page/settings/library-settings/library-settings.svelte
@@ -29,95 +29,84 @@
 
 <div>
   <div in:fade={{ duration: 500 }}>
-    <SettingAccordion
-      key="library-watching"
-      title={$t('admin.library_watching_settings')}
-      subtitle={$t('admin.library_watching_settings_description')}
-      isOpen
-    >
-      <form autocomplete="off" on:submit|preventDefault>
-        <div class="ml-4 mt-4 flex flex-col gap-4">
-          <SettingSwitch
-            title={$t('admin.library_watching_enable_description')}
-            {disabled}
-            bind:checked={config.library.watch.enabled}
-          />
-        </div>
-
-        <div class="ml-4">
-          <SettingButtonsRow
-            onReset={(options) => onReset({ ...options, configKeys: ['library'] })}
-            onSave={() => onSave({ library: config.library })}
-            showResetToDefault={!isEqual(savedConfig.library, defaultConfig.library)}
-            {disabled}
-          />
-        </div>
-      </form>
-    </SettingAccordion>
-
-    <SettingAccordion
-      key="library-scanning"
-      title={$t('admin.library_scanning')}
-      subtitle={$t('admin.library_scanning_description')}
-      isOpen
-    >
-      <form autocomplete="off" on:submit|preventDefault>
-        <div class="ml-4 mt-4 flex flex-col gap-4">
-          <SettingSwitch
-            title={$t('admin.library_scanning_enable_description')}
-            {disabled}
-            bind:checked={config.library.scan.enabled}
-          />
-
-          <div class="flex flex-col my-2 dark:text-immich-dark-fg">
-            <label
-              class="font-medium text-immich-primary dark:text-immich-dark-primary text-sm"
-              for="expression-select"
-            >
-              {$t('admin.library_cron_expression_presets')}
-            </label>
-            <select
-              class="p-2 mt-2 text-sm rounded-lg bg-slate-200 hover:cursor-pointer dark:bg-gray-600"
-              disabled={disabled || !config.library.scan.enabled}
-              name="expression"
-              id="expression-select"
-              bind:value={config.library.scan.cronExpression}
-            >
-              {#each cronExpressionOptions as { title, expression }}
-                <option value={expression}>{title}</option>
-              {/each}
-            </select>
+    <form autocomplete="off" on:submit|preventDefault>
+      <div class="ml-4 mt-4 flex flex-col gap-4">
+        <SettingAccordion
+          key="library-watching"
+          title={$t('admin.library_watching_settings')}
+          subtitle={$t('admin.library_watching_settings_description')}
+          isOpen
+        >
+          <div class="ml-4 mt-4 flex flex-col gap-4">
+            <SettingSwitch
+              title={$t('admin.library_watching_enable_description')}
+              {disabled}
+              bind:checked={config.library.watch.enabled}
+            />
           </div>
+        </SettingAccordion>
 
-          <SettingInputField
-            inputType={SettingInputFieldType.TEXT}
-            required={true}
-            disabled={disabled || !config.library.scan.enabled}
-            label={$t('admin.library_cron_expression')}
-            bind:value={config.library.scan.cronExpression}
-            isEdited={config.library.scan.cronExpression !== savedConfig.library.scan.cronExpression}
-          >
-            <svelte:fragment slot="desc">
-              <p class="text-sm dark:text-immich-dark-fg">
-                <FormatMessage key="admin.library_cron_expression_description" let:message>
-                  <a href="https://crontab.guru" class="underline" target="_blank" rel="noreferrer">
-                    {message}
-                  </a>
-                </FormatMessage>
-              </p>
-            </svelte:fragment>
-          </SettingInputField>
-        </div>
+        <SettingAccordion
+          key="library-scanning"
+          title={$t('admin.library_scanning')}
+          subtitle={$t('admin.library_scanning_description')}
+          isOpen
+        >
+          <div class="ml-4 mt-4 flex flex-col gap-4">
+            <SettingSwitch
+              title={$t('admin.library_scanning_enable_description')}
+              {disabled}
+              bind:checked={config.library.scan.enabled}
+            />
 
-        <div class="ml-4">
-          <SettingButtonsRow
-            onReset={(options) => onReset({ ...options, configKeys: ['library'] })}
-            onSave={() => onSave({ library: config.library })}
-            showResetToDefault={!isEqual(savedConfig.library, defaultConfig.library)}
-            {disabled}
-          />
-        </div>
-      </form>
-    </SettingAccordion>
+            <div class="flex flex-col my-2 dark:text-immich-dark-fg">
+              <label
+                class="font-medium text-immich-primary dark:text-immich-dark-primary text-sm"
+                for="expression-select"
+              >
+                {$t('admin.library_cron_expression_presets')}
+              </label>
+              <select
+                class="p-2 mt-2 text-sm rounded-lg bg-slate-200 hover:cursor-pointer dark:bg-gray-600"
+                disabled={disabled || !config.library.scan.enabled}
+                name="expression"
+                id="expression-select"
+                bind:value={config.library.scan.cronExpression}
+              >
+                {#each cronExpressionOptions as { title, expression }}
+                  <option value={expression}>{title}</option>
+                {/each}
+              </select>
+            </div>
+
+            <SettingInputField
+              inputType={SettingInputFieldType.TEXT}
+              required={true}
+              disabled={disabled || !config.library.scan.enabled}
+              label={$t('admin.library_cron_expression')}
+              bind:value={config.library.scan.cronExpression}
+              isEdited={config.library.scan.cronExpression !== savedConfig.library.scan.cronExpression}
+            >
+              <svelte:fragment slot="desc">
+                <p class="text-sm dark:text-immich-dark-fg">
+                  <FormatMessage key="admin.library_cron_expression_description" let:message>
+                    <a href="https://crontab.guru" class="underline" target="_blank" rel="noreferrer">
+                      {message}
+                    </a>
+                  </FormatMessage>
+                </p>
+              </svelte:fragment>
+            </SettingInputField>
+          </div>
+        </SettingAccordion>
+
+        <SettingButtonsRow
+          onReset={(options) => onReset({ ...options, configKeys: ['library'] })}
+          onSave={() => onSave({ library: config.library })}
+          showResetToDefault={!isEqual(savedConfig.library, defaultConfig.library)}
+          {disabled}
+        />
+      </div>
+    </form>
   </div>
 </div>