From bd8fa3776dcdfa55a6b8a213f7611dfb4e8e0dce Mon Sep 17 00:00:00 2001
From: "SPRINX0\\prochazka" <jan.prochazka@sprinx.com>
Date: Tue, 18 Nov 2025 15:22:39 +0100
Subject: [PATCH] es translation + fixed language change

---
 .../web/src/settings/SettingsModal.svelte     | 308 ++++++++++++++----
 1 file changed, 245 insertions(+), 63 deletions(-)

diff --git a/packages/web/src/settings/SettingsModal.svelte b/packages/web/src/settings/SettingsModal.svelte
index 1b8ba7ab1..73cd894c6 100644
--- a/packages/web/src/settings/SettingsModal.svelte
+++ b/packages/web/src/settings/SettingsModal.svelte
@@ -110,14 +110,43 @@ ORDER BY
         maxHeight100
         flex1
         tabs={[
-          hasPermission('settings/change') && { identifier: 'general', label: _t('settings.general', { defaultMessage: 'General' }), slot: 1 },
-          isProApp() && electron && { identifier: 'license', label: _t('settings.license', { defaultMessage: 'License' }), slot: 7 },
-          hasPermission('settings/change') && { identifier: 'connection', label: _t('settings.connection', { defaultMessage: 'Connection' }), slot: 2 },
+          hasPermission('settings/change') && {
+            identifier: 'general',
+            label: _t('settings.general', { defaultMessage: 'General' }),
+            slot: 1,
+          },
+          isProApp() &&
+            electron && {
+              identifier: 'license',
+              label: _t('settings.license', { defaultMessage: 'License' }),
+              slot: 7,
+            },
+          hasPermission('settings/change') && {
+            identifier: 'connection',
+            label: _t('settings.connection', { defaultMessage: 'Connection' }),
+            slot: 2,
+          },
           { identifier: 'theme', label: _t('settings.theme', { defaultMessage: 'Themes' }), slot: 3 },
-          hasPermission('settings/change') && { identifier: 'default-actions', label: _t('settings.defaultActions', { defaultMessage: 'Default Actions' }), slot: 4 },
-          hasPermission('settings/change') && { identifier: 'behaviour', label: _t('settings.behaviour', { defaultMessage: 'Behaviour' }), slot: 5 },
-          hasPermission('settings/change') && { identifier: 'external-tools', label: _t('settings.externalTools', { defaultMessage: 'External tools' }), slot: 8 },
-          hasPermission('settings/change') && { identifier: 'other', label: _t('settings.other', { defaultMessage: 'Other' }), slot: 6 },
+          hasPermission('settings/change') && {
+            identifier: 'default-actions',
+            label: _t('settings.defaultActions', { defaultMessage: 'Default Actions' }),
+            slot: 4,
+          },
+          hasPermission('settings/change') && {
+            identifier: 'behaviour',
+            label: _t('settings.behaviour', { defaultMessage: 'Behaviour' }),
+            slot: 5,
+          },
+          hasPermission('settings/change') && {
+            identifier: 'external-tools',
+            label: _t('settings.externalTools', { defaultMessage: 'External tools' }),
+            slot: 8,
+          },
+          hasPermission('settings/change') && {
+            identifier: 'other',
+            label: _t('settings.other', { defaultMessage: 'Other' }),
+            slot: 6,
+          },
           isProApp() && hasPermission('settings/change') && { identifier: 'ai', label: 'AI', slot: 9 },
         ]}
       >
@@ -126,21 +155,28 @@ ORDER BY
             <div class="heading">{_t('settings.appearance', { defaultMessage: 'Appearance' })}</div>
             <FormCheckboxField
               name="app.useNativeMenu"
-              label={isMac() ? _t('settings.useNativeWindowTitle', { defaultMessage: 'Use native window title' }) : _t('settings.useSystemNativeMenu', { defaultMessage: 'Use system native menu' })}
+              label={isMac()
+                ? _t('settings.useNativeWindowTitle', { defaultMessage: 'Use native window title' })
+                : _t('settings.useSystemNativeMenu', { defaultMessage: 'Use system native menu' })}
               on:change={() => {
                 restartWarning = true;
               }}
             />
             {#if restartWarning}
               <div class="ml-5 mb-3">
-                <FontIcon icon="img warn" /> {_t('settings.nativeMenuRestartWarning', { defaultMessage: 'Native menu settings will be applied after app restart' })}
+                <FontIcon icon="img warn" />
+                {_t('settings.nativeMenuRestartWarning', {
+                  defaultMessage: 'Native menu settings will be applied after app restart',
+                })}
               </div>
             {/if}
           {/if}
 
           <FormCheckboxField
             name="tabGroup.showServerName"
-            label={_t('settings.tabGroup.showServerName', { defaultMessage: 'Show server name alongside database name in title of the tab group' })}
+            label={_t('settings.tabGroup.showServerName', {
+              defaultMessage: 'Show server name alongside database name in title of the tab group',
+            })}
             defaultValue={false}
           />
           <div class="heading">{_t('settings.localization', { defaultMessage: 'Localization' })}</div>
@@ -155,14 +191,15 @@ ORDER BY
               { value: 'sk', label: 'Slovenčina' },
               { value: 'de', label: 'Deutsch' },
               { value: 'fr', label: 'Français' },
-              { value: 'es', label: 'Español' },
             ]}
             on:change={() => {
               showModal(ConfirmModal, {
-                message: _t('settings.localization.reloadWarning', { defaultMessage: 'Application will be reloaded to apply new language settings' }),
+                message: _t('settings.localization.reloadWarning', {
+                  defaultMessage: 'Application will be reloaded to apply new language settings',
+                }),
                 onConfirm: () => {
                   setTimeout(() => {
-                    internalRedirectTo('/');
+                    internalRedirectTo(electron ? '/index.html' : '/');
                   }, 100);
                 },
               });
@@ -172,25 +209,44 @@ ORDER BY
           <div class="heading">{_t('settings.dataGrid.title', { defaultMessage: 'Data grid' })}</div>
           <FormTextField
             name="dataGrid.pageSize"
-            label={_t('settings.dataGrid.pageSize', { defaultMessage: 'Page size (number of rows for incremental loading, must be between 5 and 50000)' })}
+            label={_t('settings.dataGrid.pageSize', {
+              defaultMessage: 'Page size (number of rows for incremental loading, must be between 5 and 50000)',
+            })}
             defaultValue="100"
           />
-          <FormCheckboxField name="dataGrid.showHintColumns" label={_t('settings.dataGrid.showHintColumns', { defaultMessage: 'Show foreign key hints' })} defaultValue={true} />
+          <FormCheckboxField
+            name="dataGrid.showHintColumns"
+            label={_t('settings.dataGrid.showHintColumns', { defaultMessage: 'Show foreign key hints' })}
+            defaultValue={true}
+          />
           <!-- <FormCheckboxField name="dataGrid.showHintColumns" label="Show foreign key hints" defaultValue={true} /> -->
 
-          <FormCheckboxField name="dataGrid.thousandsSeparator" label={_t('settings.dataGrid.thousandsSeparator', { defaultMessage: 'Use thousands separator for numbers' })} />
+          <FormCheckboxField
+            name="dataGrid.thousandsSeparator"
+            label={_t('settings.dataGrid.thousandsSeparator', {
+              defaultMessage: 'Use thousands separator for numbers',
+            })}
+          />
 
           <FormTextField
             name="dataGrid.defaultAutoRefreshInterval"
-            label={_t('settings.dataGrid.defaultAutoRefreshInterval', { defaultMessage: 'Default grid auto refresh interval in seconds' })}
+            label={_t('settings.dataGrid.defaultAutoRefreshInterval', {
+              defaultMessage: 'Default grid auto refresh interval in seconds',
+            })}
             defaultValue="10"
           />
 
-          <FormCheckboxField name="dataGrid.alignNumbersRight" label={_t('settings.dataGrid.alignNumbersRight', { defaultMessage: 'Align numbers to right' })} defaultValue={false} />
+          <FormCheckboxField
+            name="dataGrid.alignNumbersRight"
+            label={_t('settings.dataGrid.alignNumbersRight', { defaultMessage: 'Align numbers to right' })}
+            defaultValue={false}
+          />
 
           <FormTextField
             name="dataGrid.collectionPageSize"
-            label={_t('settings.dataGrid.collectionPageSize', { defaultMessage: 'Collection page size (for MongoDB JSON view, must be between 5 and 1000)' })}
+            label={_t('settings.dataGrid.collectionPageSize', {
+              defaultMessage: 'Collection page size (for MongoDB JSON view, must be between 5 and 1000)',
+            })}
             defaultValue="50"
           />
 
@@ -200,16 +256,31 @@ ORDER BY
             isNative
             defaultValue="36"
             options={[
-              { value: '36', label: _t('settings.dataGrid.coloringMode.36', { defaultMessage: 'Every 3rd and 6th row' }) },
-              { value: '2-primary', label: _t('settings.dataGrid.coloringMode.2-primary', { defaultMessage: 'Every 2-nd row, primary color' }) },
-              { value: '2-secondary', label: _t('settings.dataGrid.coloringMode.2-secondary', { defaultMessage: 'Every 2-nd row, secondary color' }) },
+              {
+                value: '36',
+                label: _t('settings.dataGrid.coloringMode.36', { defaultMessage: 'Every 3rd and 6th row' }),
+              },
+              {
+                value: '2-primary',
+                label: _t('settings.dataGrid.coloringMode.2-primary', {
+                  defaultMessage: 'Every 2-nd row, primary color',
+                }),
+              },
+              {
+                value: '2-secondary',
+                label: _t('settings.dataGrid.coloringMode.2-secondary', {
+                  defaultMessage: 'Every 2-nd row, secondary color',
+                }),
+              },
               { value: 'none', label: _t('settings.dataGrid.coloringMode.none', { defaultMessage: 'None' }) },
             ]}
           />
 
           <FormCheckboxField
             name="dataGrid.showAllColumnsWhenSearch"
-            label={_t('settings.dataGrid.showAllColumnsWhenSearch', { defaultMessage: 'Show all columns when searching' })}
+            label={_t('settings.dataGrid.showAllColumnsWhenSearch', {
+              defaultMessage: 'Show all columns when searching',
+            })}
             defaultValue={false}
           />
 
@@ -229,7 +300,10 @@ ORDER BY
               />
             </div>
             <div class="col-3">
-              <FormFieldTemplateLarge label={_t('settings.editor.keybinds', { defaultMessage: 'Editor keybinds' })} type="combo">
+              <FormFieldTemplateLarge
+                label={_t('settings.editor.keybinds', { defaultMessage: 'Editor keybinds' })}
+                type="combo"
+              >
                 <SelectField
                   isNative
                   defaultValue="default"
@@ -240,7 +314,10 @@ ORDER BY
               </FormFieldTemplateLarge>
             </div>
             <div class="col-3">
-              <FormFieldTemplateLarge label={_t('settings.editor.wordWrap', { defaultMessage: 'Enable word wrap' })} type="combo">
+              <FormFieldTemplateLarge
+                label={_t('settings.editor.wordWrap', { defaultMessage: 'Enable word wrap' })}
+                type="combo"
+              >
                 <CheckboxField
                   checked={$currentEditorWrapEnabled}
                   on:change={e => ($currentEditorWrapEnabled = e.target.checked)}
@@ -257,7 +334,9 @@ ORDER BY
 
           <FormCheckboxField
             name="sqlEditor.showTableAliasesInCodeCompletion"
-            label={_t('settings.sqlEditor.showTableAliasesInCodeCompletion', { defaultMessage: 'Show table aliases in code completion' })}
+            label={_t('settings.sqlEditor.showTableAliasesInCodeCompletion', {
+              defaultMessage: 'Show table aliases in code completion',
+            })}
             defaultValue={false}
           />
 
@@ -269,7 +348,9 @@ ORDER BY
 
           <FormCheckboxField
             name="sqlEditor.disableExecuteCurrentLine"
-            label={_t('settings.sqlEditor.disableExecuteCurrentLine', { defaultMessage: 'Disable current line execution (Execute current)' })}
+            label={_t('settings.sqlEditor.disableExecuteCurrentLine', {
+              defaultMessage: 'Disable current line execution (Execute current)',
+            })}
             defaultValue={false}
           />
         </svelte:fragment>
@@ -277,7 +358,9 @@ ORDER BY
           <div class="heading">{_t('settings.connection', { defaultMessage: 'Connection' })}</div>
 
           <FormFieldTemplateLarge
-            label={_t('settings.connection.showOnlyTabsFromSelectedDatabase', { defaultMessage: 'Show only tabs from selected database' })}
+            label={_t('settings.connection.showOnlyTabsFromSelectedDatabase', {
+              defaultMessage: 'Show only tabs from selected database',
+            })}
             type="checkbox"
             labelProps={{
               onClick: () => {
@@ -290,12 +373,16 @@ ORDER BY
 
           <FormCheckboxField
             name="connection.autoRefresh"
-            label={_t('settings.connection.autoRefresh', { defaultMessage: 'Automatic refresh of database model on background' })}
+            label={_t('settings.connection.autoRefresh', {
+              defaultMessage: 'Automatic refresh of database model on background',
+            })}
             defaultValue={false}
           />
           <FormTextField
             name="connection.autoRefreshInterval"
-            label={_t('settings.connection.autoRefreshInterval', { defaultMessage: 'Interval between automatic DB structure reloads in seconds' })}
+            label={_t('settings.connection.autoRefreshInterval', {
+              defaultMessage: 'Interval between automatic DB structure reloads in seconds',
+            })}
             defaultValue="30"
             disabled={values['connection.autoRefresh'] === false}
           />
@@ -314,12 +401,16 @@ ORDER BY
           <div class="heading">{_t('settings.session', { defaultMessage: 'Query sessions' })}</div>
           <FormCheckboxField
             name="session.autoClose"
-            label={_t('settings.session.autoClose', { defaultMessage: 'Automatic close query sessions after period without any activity' })}
+            label={_t('settings.session.autoClose', {
+              defaultMessage: 'Automatic close query sessions after period without any activity',
+            })}
             defaultValue={true}
           />
           <FormTextField
             name="session.autoCloseTimeout"
-            label={_t('settings.session.autoCloseTimeout', { defaultMessage: 'Interval, after which query session without activity is closed (in minutes)' })}
+            label={_t('settings.session.autoCloseTimeout', {
+              defaultMessage: 'Interval, after which query session without activity is closed (in minutes)',
+            })}
             defaultValue="15"
             disabled={values['session.autoClose'] === false}
           />
@@ -360,16 +451,23 @@ ORDER BY
           </div>
 
           <div class="m-5">
-            {_t('settings.appearance.moreThemes', { defaultMessage: 'More themes are available as' })} <Link onClick={openThemePlugins}>plugins</Link>
+            {_t('settings.appearance.moreThemes', { defaultMessage: 'More themes are available as' })}
+            <Link onClick={openThemePlugins}>plugins</Link>
             <br />
-            {_t('settings.appearance.afterInstalling', { defaultMessage: 'After installing theme plugin (try search "theme" in available extensions) new themes will be available here.' })}
+            {_t('settings.appearance.afterInstalling', {
+              defaultMessage:
+                'After installing theme plugin (try search "theme" in available extensions) new themes will be available here.',
+            })}
           </div>
 
           <div class="heading">{_t('settings.appearance.editorTheme', { defaultMessage: 'Editor theme' })}</div>
 
           <div class="flex">
             <div class="col-3">
-              <FormFieldTemplateLarge label={_t('settings.appearance.editorTheme', { defaultMessage: 'Theme' })} type="combo">
+              <FormFieldTemplateLarge
+                label={_t('settings.appearance.editorTheme', { defaultMessage: 'Theme' })}
+                type="combo"
+              >
                 <SelectField
                   isNative
                   notSelected={_t('settings.appearance.editorTheme.default', { defaultMessage: '(use theme default)' })}
@@ -381,7 +479,10 @@ ORDER BY
             </div>
 
             <div class="col-3">
-              <FormFieldTemplateLarge label={_t('settings.appearance.fontSize', { defaultMessage: 'Font size' })} type="combo">
+              <FormFieldTemplateLarge
+                label={_t('settings.appearance.fontSize', { defaultMessage: 'Font size' })}
+                type="combo"
+              >
                 <SelectField
                   isNative
                   notSelected="(default)"
@@ -393,7 +494,10 @@ ORDER BY
             </div>
 
             <div class="col-3">
-              <FormFieldTemplateLarge label={_t('settings.appearance.customSize', { defaultMessage: 'Custom size' })} type="text">
+              <FormFieldTemplateLarge
+                label={_t('settings.appearance.customSize', { defaultMessage: 'Custom size' })}
+                type="text"
+              >
                 <TextField
                   value={$currentEditorFontSize == 'custom' ? '' : $currentEditorFontSize}
                   on:change={e => ($currentEditorFontSize = e.target['value'])}
@@ -404,7 +508,10 @@ ORDER BY
             </div>
 
             <div class="col-3">
-              <FormTextField name="editor.fontFamily" label={_t('settings.appearance.fontFamily', { defaultMessage: 'Editor font family' })} />
+              <FormTextField
+                name="editor.fontFamily"
+                label={_t('settings.appearance.fontFamily', { defaultMessage: 'Editor font family' })}
+              />
             </div>
           </div>
 
@@ -421,9 +528,20 @@ ORDER BY
             isNative
             defaultValue="connect"
             options={[
-              { value: 'openDetails', label: _t('settings.defaultActions.connectionClick.openDetails', { defaultMessage: 'Edit / open details' }) },
-              { value: 'connect', label: _t('settings.defaultActions.connectionClick.connect', { defaultMessage: 'Connect' }) },
-              { value: 'none', label: _t('settings.defaultActions.connectionClick.none', { defaultMessage: 'Do nothing' }) },
+              {
+                value: 'openDetails',
+                label: _t('settings.defaultActions.connectionClick.openDetails', {
+                  defaultMessage: 'Edit / open details',
+                }),
+              },
+              {
+                value: 'connect',
+                label: _t('settings.defaultActions.connectionClick.connect', { defaultMessage: 'Connect' }),
+              },
+              {
+                value: 'none',
+                label: _t('settings.defaultActions.connectionClick.none', { defaultMessage: 'Do nothing' }),
+              },
             ]}
           />
 
@@ -433,12 +551,22 @@ ORDER BY
             isNative
             defaultValue="switch"
             options={[
-              { value: 'switch', label: _t('settings.defaultActions.databaseClick.switch', { defaultMessage: 'Switch database' }) },
-              { value: 'none', label: _t('settings.defaultActions.databaseClick.none', { defaultMessage: 'Do nothing' }) },
+              {
+                value: 'switch',
+                label: _t('settings.defaultActions.databaseClick.switch', { defaultMessage: 'Switch database' }),
+              },
+              {
+                value: 'none',
+                label: _t('settings.defaultActions.databaseClick.none', { defaultMessage: 'Do nothing' }),
+              },
             ]}
           />
 
-          <FormCheckboxField name="defaultAction.useLastUsedAction" label={_t('settings.defaultActions.useLastUsedAction', { defaultMessage: 'Use last used action' })} defaultValue={true} />
+          <FormCheckboxField
+            name="defaultAction.useLastUsedAction"
+            label={_t('settings.defaultActions.useLastUsedAction', { defaultMessage: 'Use last used action' })}
+            defaultValue={true}
+          />
 
           <FormDefaultActionField
             label={_t('settings.defaultActions.tableClick', { defaultMessage: 'Table click' })}
@@ -474,7 +602,11 @@ ORDER BY
         <svelte:fragment slot="5">
           <div class="heading">{_t('settings.behaviour', { defaultMessage: 'Behaviour' })}</div>
 
-          <FormCheckboxField name="behaviour.useTabPreviewMode" label={_t('settings.behaviour.useTabPreviewMode', { defaultMessage: 'Use tab preview mode' })} defaultValue={true} />
+          <FormCheckboxField
+            name="behaviour.useTabPreviewMode"
+            label={_t('settings.behaviour.useTabPreviewMode', { defaultMessage: 'Use tab preview mode' })}
+            defaultValue={true}
+          />
 
           <FormCheckboxField
             name="behaviour.jsonPreviewWrap"
@@ -483,28 +615,45 @@ ORDER BY
           />
 
           <div class="tip">
-            <FontIcon icon="img tip" /> {_t('settings.behaviour.singleClickPreview', { defaultMessage: 'When you single-click or select a file in the "Tables, Views, Functions" view, it is shown in a preview mode and reuses an existing tab (preview tab). This is useful if you are quickly browsing tables and don\'t want every visited table to have its own tab. When you start editing the table or use double-click to open the table from the "Tables" view, a new tab is dedicated to that table.' })}
+            <FontIcon icon="img tip" />
+            {_t('settings.behaviour.singleClickPreview', {
+              defaultMessage:
+                'When you single-click or select a file in the "Tables, Views, Functions" view, it is shown in a preview mode and reuses an existing tab (preview tab). This is useful if you are quickly browsing tables and don\'t want every visited table to have its own tab. When you start editing the table or use double-click to open the table from the "Tables" view, a new tab is dedicated to that table.',
+            })}
           </div>
 
           <FormCheckboxField
             name="behaviour.openDetailOnArrows"
-            label={_t('settings.behaviour.openDetailOnArrows', { defaultMessage: 'Open detail on keyboard navigation' })}
+            label={_t('settings.behaviour.openDetailOnArrows', {
+              defaultMessage: 'Open detail on keyboard navigation',
+            })}
             defaultValue={true}
             disabled={values['behaviour.useTabPreviewMode'] === false}
           />
 
           <div class="heading">{_t('settings.confirmations', { defaultMessage: 'Confirmations' })}</div>
 
-          <FormCheckboxField name="skipConfirm.tableDataSave" label={_t('settings.confirmations.skipConfirm.tableDataSave', { defaultMessage: 'Skip confirmation when saving table data (SQL)' })} />
+          <FormCheckboxField
+            name="skipConfirm.tableDataSave"
+            label={_t('settings.confirmations.skipConfirm.tableDataSave', {
+              defaultMessage: 'Skip confirmation when saving table data (SQL)',
+            })}
+          />
           <FormCheckboxField
             name="skipConfirm.collectionDataSave"
-            label={_t('settings.confirmations.skipConfirm.collectionDataSave', { defaultMessage: 'Skip confirmation when saving collection data (NoSQL)' })}
+            label={_t('settings.confirmations.skipConfirm.collectionDataSave', {
+              defaultMessage: 'Skip confirmation when saving collection data (NoSQL)',
+            })}
           />
         </svelte:fragment>
         <svelte:fragment slot="6">
           <div class="heading">{_t('settings.other', { defaultMessage: 'Other' })}</div>
 
-          <FormTextField name="other.gistCreateToken" label={_t('settings.other.gistCreateToken', { defaultMessage: 'API token for creating error gists' })} defaultValue="" />
+          <FormTextField
+            name="other.gistCreateToken"
+            label={_t('settings.other.gistCreateToken', { defaultMessage: 'API token for creating error gists' })}
+            defaultValue=""
+          />
 
           <FormSelectField
             label={_t('settings.other.autoUpdateApplication', { defaultMessage: 'Auto update application' })}
@@ -512,16 +661,31 @@ ORDER BY
             isNative
             defaultValue=""
             options={[
-              { value: 'skip', label: _t('settings.other.autoUpdateApplication.skip', { defaultMessage: 'Do not check for new versions' }) },
-              { value: '', label: _t('settings.other.autoUpdateApplication.check', { defaultMessage: 'Check for new versions' }) },
-              { value: 'download', label: _t('settings.other.autoUpdateApplication.download', { defaultMessage: 'Check and download new versions' }) },
+              {
+                value: 'skip',
+                label: _t('settings.other.autoUpdateApplication.skip', {
+                  defaultMessage: 'Do not check for new versions',
+                }),
+              },
+              {
+                value: '',
+                label: _t('settings.other.autoUpdateApplication.check', { defaultMessage: 'Check for new versions' }),
+              },
+              {
+                value: 'download',
+                label: _t('settings.other.autoUpdateApplication.download', {
+                  defaultMessage: 'Check and download new versions',
+                }),
+              },
             ]}
           />
 
           {#if isProApp()}
             <FormCheckboxField
               name="ai.allowSendModels"
-              label={_t('settings.other.ai.allowSendModels', { defaultMessage: 'Allow to send DB models and query snippets to AI service' })}
+              label={_t('settings.other.ai.allowSendModels', {
+                defaultMessage: 'Allow to send DB models and query snippets to AI service',
+              })}
               defaultValue={false}
             />
           {/if}
@@ -541,28 +705,39 @@ ORDER BY
             <div class="m-3 ml-5">
               {#if licenseKeyCheckResult.status == 'ok'}
                 <div>
-                  <FontIcon icon="img ok" /> { _t('settings.other.licenseKey.valid', { defaultMessage: 'License key is valid' }) }
+                  <FontIcon icon="img ok" />
+                  {_t('settings.other.licenseKey.valid', { defaultMessage: 'License key is valid' })}
                 </div>
                 {#if licenseKeyCheckResult.validTo}
                   <div>
-                    { _t('settings.other.licenseKey.validTo', { defaultMessage: 'License valid to:' }) } {licenseKeyCheckResult.validTo}
+                    {_t('settings.other.licenseKey.validTo', { defaultMessage: 'License valid to:' })}
+                    {licenseKeyCheckResult.validTo}
                   </div>
                 {/if}
                 {#if licenseKeyCheckResult.expiration}
-                  <div>{ _t('settings.other.licenseKey.expiration', { defaultMessage: 'License key expiration:' }) } <b>{safeFormatDate(licenseKeyCheckResult.expiration)}</b></div>
+                  <div>
+                    {_t('settings.other.licenseKey.expiration', { defaultMessage: 'License key expiration:' })}
+                    <b>{safeFormatDate(licenseKeyCheckResult.expiration)}</b>
+                  </div>
                 {/if}
               {:else if licenseKeyCheckResult.status == 'error'}
                 <div>
                   <FontIcon icon="img error" />
-                  {licenseKeyCheckResult.errorMessage ?? _t('settings.other.licenseKey.invalid', { defaultMessage: 'License key is invalid' })}
+                  {licenseKeyCheckResult.errorMessage ??
+                    _t('settings.other.licenseKey.invalid', { defaultMessage: 'License key is invalid' })}
                   {#if licenseKeyCheckResult.expiration}
-                    <div>{ _t('settings.other.licenseKey.expiration', { defaultMessage: 'License key expiration:' }) } <b>{safeFormatDate(licenseKeyCheckResult.expiration)}</b></div>
+                    <div>
+                      {_t('settings.other.licenseKey.expiration', { defaultMessage: 'License key expiration:' })}
+                      <b>{safeFormatDate(licenseKeyCheckResult.expiration)}</b>
+                    </div>
                   {/if}
                 </div>
                 {#if licenseKeyCheckResult.isExpired}
                   <div class="mt-2">
                     <FormStyledButton
-                      value={_t('settings.other.licenseKey.checkForNew', { defaultMessage: 'Check for new license key' })}
+                      value={_t('settings.other.licenseKey.checkForNew', {
+                        defaultMessage: 'Check for new license key',
+                      })}
                       skipWidth
                       on:click={async () => {
                         licenseKeyCheckResult = await apiCall('config/get-new-license', { oldLicenseKey: licenseKey });
@@ -582,7 +757,9 @@ ORDER BY
           <div class="heading">{_t('settings.externalTools', { defaultMessage: 'External tools' })}</div>
           <FormTextField
             name="externalTools.mysqldump"
-            label={_t('settings.other.externalTools.mysqldump', { defaultMessage: 'mysqldump (backup MySQL database)' })}
+            label={_t('settings.other.externalTools.mysqldump', {
+              defaultMessage: 'mysqldump (backup MySQL database)',
+            })}
             defaultValue="mysqldump"
           />
           <FormTextField
@@ -592,12 +769,17 @@ ORDER BY
           />
           <FormTextField
             name="externalTools.mysqlPlugins"
-            label={_t('settings.other.externalTools.mysqlPlugins', { defaultMessage: 'Folder with mysql plugins (for example for authentication). Set only in case of problems' })}
+            label={_t('settings.other.externalTools.mysqlPlugins', {
+              defaultMessage:
+                'Folder with mysql plugins (for example for authentication). Set only in case of problems',
+            })}
             defaultValue=""
           />
           <FormTextField
             name="externalTools.pg_dump"
-            label={_t('settings.other.externalTools.pg_dump', { defaultMessage: 'pg_dump (backup PostgreSQL database)' })}
+            label={_t('settings.other.externalTools.pg_dump', {
+              defaultMessage: 'pg_dump (backup PostgreSQL database)',
+            })}
             defaultValue="pg_dump"
           />
           <FormTextField