From aa11e1a65e3ef6cbc19113e70b089a1dbe521d27 Mon Sep 17 00:00:00 2001
From: antelle <dmitryvit@gmail.com>
Date: Sat, 3 Jul 2021 21:55:11 +0200
Subject: [PATCH] settings general pages

---
 .../general/settings-general-advanced.ts      |   6 +
 .../general/settings-general-appearance.ts    |   6 +
 .../general/settings-general-audit.ts         |   6 +
 .../general/settings-general-function.ts      |   6 +
 .../settings/general/settings-general-lock.ts |   6 +
 .../general/settings-general-storage.ts       |   6 +
 .../general/settings-general-update.ts        |   6 +
 app/scripts/ui/settings/settings-general.ts   |   6 +
 .../settings-general-advanced-view.tsx        |   5 +
 .../settings-general-appearance-view.tsx      |   5 +
 .../general/settings-general-audit-view.tsx   |   5 +
 .../settings-general-function-view.tsx        |   5 +
 .../general/settings-general-lock-view.tsx    |   5 +
 .../general/settings-general-storage-view.tsx |   5 +
 .../general/settings-general-update-view.tsx  |   5 +
 .../views/settings/settings-general-view.tsx  |  27 +
 app/scripts/views/settings/settings-view.tsx  |   2 +
 app/templates/settings/settings-general.hbs   | 684 +++++++++---------
 18 files changed, 452 insertions(+), 344 deletions(-)
 create mode 100644 app/scripts/ui/settings/general/settings-general-advanced.ts
 create mode 100644 app/scripts/ui/settings/general/settings-general-appearance.ts
 create mode 100644 app/scripts/ui/settings/general/settings-general-audit.ts
 create mode 100644 app/scripts/ui/settings/general/settings-general-function.ts
 create mode 100644 app/scripts/ui/settings/general/settings-general-lock.ts
 create mode 100644 app/scripts/ui/settings/general/settings-general-storage.ts
 create mode 100644 app/scripts/ui/settings/general/settings-general-update.ts
 create mode 100644 app/scripts/ui/settings/settings-general.ts
 create mode 100644 app/scripts/views/settings/general/settings-general-advanced-view.tsx
 create mode 100644 app/scripts/views/settings/general/settings-general-appearance-view.tsx
 create mode 100644 app/scripts/views/settings/general/settings-general-audit-view.tsx
 create mode 100644 app/scripts/views/settings/general/settings-general-function-view.tsx
 create mode 100644 app/scripts/views/settings/general/settings-general-lock-view.tsx
 create mode 100644 app/scripts/views/settings/general/settings-general-storage-view.tsx
 create mode 100644 app/scripts/views/settings/general/settings-general-update-view.tsx
 create mode 100644 app/scripts/views/settings/settings-general-view.tsx

diff --git a/app/scripts/ui/settings/general/settings-general-advanced.ts b/app/scripts/ui/settings/general/settings-general-advanced.ts
new file mode 100644
index 00000000..687b7e59
--- /dev/null
+++ b/app/scripts/ui/settings/general/settings-general-advanced.ts
@@ -0,0 +1,6 @@
+import { FunctionComponent, h } from 'preact';
+import { SettingsGeneralAdvancedView } from 'views/settings/general/settings-general-advanced-view';
+
+export const SettingsGeneralAdvanced: FunctionComponent = () => {
+    return h(SettingsGeneralAdvancedView, null);
+};
diff --git a/app/scripts/ui/settings/general/settings-general-appearance.ts b/app/scripts/ui/settings/general/settings-general-appearance.ts
new file mode 100644
index 00000000..5ca92687
--- /dev/null
+++ b/app/scripts/ui/settings/general/settings-general-appearance.ts
@@ -0,0 +1,6 @@
+import { FunctionComponent, h } from 'preact';
+import { SettingsGeneralAppearanceView } from 'views/settings/general/settings-general-appearance-view';
+
+export const SettingsGeneralAppearance: FunctionComponent = () => {
+    return h(SettingsGeneralAppearanceView, null);
+};
diff --git a/app/scripts/ui/settings/general/settings-general-audit.ts b/app/scripts/ui/settings/general/settings-general-audit.ts
new file mode 100644
index 00000000..3831e658
--- /dev/null
+++ b/app/scripts/ui/settings/general/settings-general-audit.ts
@@ -0,0 +1,6 @@
+import { FunctionComponent, h } from 'preact';
+import { SettingsGeneralAuditView } from 'views/settings/general/settings-general-audit-view';
+
+export const SettingsGeneralAudit: FunctionComponent = () => {
+    return h(SettingsGeneralAuditView, null);
+};
diff --git a/app/scripts/ui/settings/general/settings-general-function.ts b/app/scripts/ui/settings/general/settings-general-function.ts
new file mode 100644
index 00000000..ad8251c8
--- /dev/null
+++ b/app/scripts/ui/settings/general/settings-general-function.ts
@@ -0,0 +1,6 @@
+import { FunctionComponent, h } from 'preact';
+import { SettingsGeneralFunctionView } from 'views/settings/general/settings-general-function-view';
+
+export const SettingsGeneralFunction: FunctionComponent = () => {
+    return h(SettingsGeneralFunctionView, null);
+};
diff --git a/app/scripts/ui/settings/general/settings-general-lock.ts b/app/scripts/ui/settings/general/settings-general-lock.ts
new file mode 100644
index 00000000..e72fd62c
--- /dev/null
+++ b/app/scripts/ui/settings/general/settings-general-lock.ts
@@ -0,0 +1,6 @@
+import { FunctionComponent, h } from 'preact';
+import { SettingsGeneralLockView } from 'views/settings/general/settings-general-lock-view';
+
+export const SettingsGeneralLock: FunctionComponent = () => {
+    return h(SettingsGeneralLockView, null);
+};
diff --git a/app/scripts/ui/settings/general/settings-general-storage.ts b/app/scripts/ui/settings/general/settings-general-storage.ts
new file mode 100644
index 00000000..2e642074
--- /dev/null
+++ b/app/scripts/ui/settings/general/settings-general-storage.ts
@@ -0,0 +1,6 @@
+import { FunctionComponent, h } from 'preact';
+import { SettingsGeneralStorageView } from 'views/settings/general/settings-general-storage-view';
+
+export const SettingsGeneralStorage: FunctionComponent = () => {
+    return h(SettingsGeneralStorageView, null);
+};
diff --git a/app/scripts/ui/settings/general/settings-general-update.ts b/app/scripts/ui/settings/general/settings-general-update.ts
new file mode 100644
index 00000000..fa63a24a
--- /dev/null
+++ b/app/scripts/ui/settings/general/settings-general-update.ts
@@ -0,0 +1,6 @@
+import { FunctionComponent, h } from 'preact';
+import { SettingsGeneralUpdateView } from 'views/settings/general/settings-general-update-view';
+
+export const SettingsGeneralUpdate: FunctionComponent = () => {
+    return h(SettingsGeneralUpdateView, null);
+};
diff --git a/app/scripts/ui/settings/settings-general.ts b/app/scripts/ui/settings/settings-general.ts
new file mode 100644
index 00000000..e4eaf8ec
--- /dev/null
+++ b/app/scripts/ui/settings/settings-general.ts
@@ -0,0 +1,6 @@
+import { FunctionComponent, h } from 'preact';
+import { SettingsGeneralView } from 'views/settings/settings-general-view';
+
+export const SettingsGeneral: FunctionComponent = () => {
+    return h(SettingsGeneralView, null);
+};
diff --git a/app/scripts/views/settings/general/settings-general-advanced-view.tsx b/app/scripts/views/settings/general/settings-general-advanced-view.tsx
new file mode 100644
index 00000000..b36895b2
--- /dev/null
+++ b/app/scripts/views/settings/general/settings-general-advanced-view.tsx
@@ -0,0 +1,5 @@
+import { FunctionComponent } from 'preact';
+
+export const SettingsGeneralAdvancedView: FunctionComponent = () => {
+    return <></>;
+};
diff --git a/app/scripts/views/settings/general/settings-general-appearance-view.tsx b/app/scripts/views/settings/general/settings-general-appearance-view.tsx
new file mode 100644
index 00000000..e15676ae
--- /dev/null
+++ b/app/scripts/views/settings/general/settings-general-appearance-view.tsx
@@ -0,0 +1,5 @@
+import { FunctionComponent } from 'preact';
+
+export const SettingsGeneralAppearanceView: FunctionComponent = () => {
+    return <></>;
+};
diff --git a/app/scripts/views/settings/general/settings-general-audit-view.tsx b/app/scripts/views/settings/general/settings-general-audit-view.tsx
new file mode 100644
index 00000000..7bedde0d
--- /dev/null
+++ b/app/scripts/views/settings/general/settings-general-audit-view.tsx
@@ -0,0 +1,5 @@
+import { FunctionComponent } from 'preact';
+
+export const SettingsGeneralAuditView: FunctionComponent = () => {
+    return <></>;
+};
diff --git a/app/scripts/views/settings/general/settings-general-function-view.tsx b/app/scripts/views/settings/general/settings-general-function-view.tsx
new file mode 100644
index 00000000..f77ef6f3
--- /dev/null
+++ b/app/scripts/views/settings/general/settings-general-function-view.tsx
@@ -0,0 +1,5 @@
+import { FunctionComponent } from 'preact';
+
+export const SettingsGeneralFunctionView: FunctionComponent = () => {
+    return <></>;
+};
diff --git a/app/scripts/views/settings/general/settings-general-lock-view.tsx b/app/scripts/views/settings/general/settings-general-lock-view.tsx
new file mode 100644
index 00000000..67e8b4ea
--- /dev/null
+++ b/app/scripts/views/settings/general/settings-general-lock-view.tsx
@@ -0,0 +1,5 @@
+import { FunctionComponent } from 'preact';
+
+export const SettingsGeneralLockView: FunctionComponent = () => {
+    return <></>;
+};
diff --git a/app/scripts/views/settings/general/settings-general-storage-view.tsx b/app/scripts/views/settings/general/settings-general-storage-view.tsx
new file mode 100644
index 00000000..1387d1fc
--- /dev/null
+++ b/app/scripts/views/settings/general/settings-general-storage-view.tsx
@@ -0,0 +1,5 @@
+import { FunctionComponent } from 'preact';
+
+export const SettingsGeneralStorageView: FunctionComponent = () => {
+    return <></>;
+};
diff --git a/app/scripts/views/settings/general/settings-general-update-view.tsx b/app/scripts/views/settings/general/settings-general-update-view.tsx
new file mode 100644
index 00000000..a3773ef4
--- /dev/null
+++ b/app/scripts/views/settings/general/settings-general-update-view.tsx
@@ -0,0 +1,5 @@
+import { FunctionComponent } from 'preact';
+
+export const SettingsGeneralUpdateView: FunctionComponent = () => {
+    return <></>;
+};
diff --git a/app/scripts/views/settings/settings-general-view.tsx b/app/scripts/views/settings/settings-general-view.tsx
new file mode 100644
index 00000000..745236ed
--- /dev/null
+++ b/app/scripts/views/settings/settings-general-view.tsx
@@ -0,0 +1,27 @@
+import { FunctionComponent } from 'preact';
+import { Locale } from 'util/locale';
+import { SettingsGeneralUpdate } from 'ui/settings/general/settings-general-update';
+import { SettingsGeneralAppearance } from 'ui/settings/general/settings-general-appearance';
+import { SettingsGeneralFunction } from 'ui/settings/general/settings-general-function';
+import { SettingsGeneralAudit } from 'ui/settings/general/settings-general-audit';
+import { SettingsGeneralLock } from 'ui/settings/general/settings-general-lock';
+import { SettingsGeneralStorage } from 'ui/settings/general/settings-general-storage';
+import { SettingsGeneralAdvanced } from 'ui/settings/general/settings-general-advanced';
+
+export const SettingsGeneralView: FunctionComponent = () => {
+    return (
+        <div class="settings__content">
+            <h1 id="top">
+                <i class="fa fa-cog settings__head-icon" /> {Locale.setGenTitle}
+            </h1>
+
+            <SettingsGeneralUpdate />
+            <SettingsGeneralAppearance />
+            <SettingsGeneralFunction />
+            <SettingsGeneralAudit />
+            <SettingsGeneralLock />
+            <SettingsGeneralStorage />
+            <SettingsGeneralAdvanced />
+        </div>
+    );
+};
diff --git a/app/scripts/views/settings/settings-view.tsx b/app/scripts/views/settings/settings-view.tsx
index cb0c9658..2939aa4b 100644
--- a/app/scripts/views/settings/settings-view.tsx
+++ b/app/scripts/views/settings/settings-view.tsx
@@ -2,6 +2,7 @@ import { FunctionComponent } from 'preact';
 import { SettingsPage } from 'models/workspace';
 import { Scrollable } from 'views/components/scrollable';
 import { Locale } from 'util/locale';
+import { SettingsGeneral } from 'ui/settings/settings-general';
 import { SettingsAbout } from 'ui/settings/settings-about';
 import { SettingsHelp } from 'ui/settings/settings-help';
 
@@ -17,6 +18,7 @@ export const SettingsView: FunctionComponent<{
                 {Locale.retToApp} <i class="fa fa-arrow-circle-left settings__back-button-post" />
             </div>
             <Scrollable>
+                {page === 'general' ? <SettingsGeneral /> : null}
                 {page === 'about' ? <SettingsAbout /> : null}
                 {page === 'help' ? <SettingsHelp /> : null}
             </Scrollable>
diff --git a/app/templates/settings/settings-general.hbs b/app/templates/settings/settings-general.hbs
index b2895a45..9a4d97f9 100644
--- a/app/templates/settings/settings-general.hbs
+++ b/app/templates/settings/settings-general.hbs
@@ -1,349 +1,345 @@
-<div class="settings__content">
-    <h1 id="top"><i class="fa fa-cog settings__head-icon"></i> {{res 'setGenTitle'}}</h1>
+{{#if updateWaitingReload}}
+<h2 class="action-color">{{res 'setGenUpdate'}}</h2>
+<div>{{res 'setGenNewVersion'}}. <a href="{{releaseNotesLink}}" target="_blank">{{res 'setGenReleaseNotes'}}</a></div>
+<div class="settings__general-update-buttons">
+    <button class="settings__general-restart-btn">{{res 'setGenReloadToUpdate'}}</button>
+</div>
+{{else if updateManual}}
+<h2 class="action-color">{{res 'setGenUpdate'}}</h2>
+<div>{{res 'setGenUpdateManual'}}</div>
+<div class="settings__general-update-buttons">
+    <button class="settings__general-download-update-btn">{{res 'setGenDownloadUpdate'}}</button>
+</div>
+{{/if}}
+{{#if showUpdateBlock}}
+<h2>{{res 'setGenUpdate'}}</h2>
+<div>
+    <select class="settings__general-auto-update settings__select input-base">
+        <option value="install" {{#ifeq autoUpdate 'install'}}selected{{/ifeq}}>{{res 'setGenUpdateAuto'}}</option>
+        <option value="check" {{#ifeq autoUpdate 'check'}}selected{{/ifeq}}>{{res 'setGenUpdateCheck'}}</option>
+        <option value="" {{#unless autoUpdate}}selected{{/unless}}>{{res 'setGenNoUpdate'}}</option>
+    </select>
+    <div>{{updateInfo}}</div>
+    <a href="{{releaseNotesLink}}" target="_blank">{{res 'setGenReleaseNotes'}}</a>
+</div>
+<div class="settings__general-update-buttons">
+    {{#if updateInProgress}}
+    <button class="settings__general-update-btn btn-silent" disabled>{{res 'setGenUpdateChecking'}}</button>
+    {{else}}
+    <button class="settings__general-update-btn btn-silent">{{res 'setGenCheckUpdate'}}</button>
+    {{/if}}
+    {{#if updateReady}}<button class="settings__general-restart-btn">{{res 'setGenRestartToUpdate'}}</button>{{/if}}
+    {{#if updateFound}}<button class="settings__general-update-found-btn">{{res 'setGenDownloadAndRestart'}}</button>{{/if}}
+</div>
+{{/if}}
 
-    {{#if updateWaitingReload}}
-    <h2 class="action-color">{{res 'setGenUpdate'}}</h2>
-    <div>{{res 'setGenNewVersion'}}. <a href="{{releaseNotesLink}}" target="_blank">{{res 'setGenReleaseNotes'}}</a></div>
-    <div class="settings__general-update-buttons">
-        <button class="settings__general-restart-btn">{{res 'setGenReloadToUpdate'}}</button>
-    </div>
-    {{else if updateManual}}
-    <h2 class="action-color">{{res 'setGenUpdate'}}</h2>
-    <div>{{res 'setGenUpdateManual'}}</div>
-    <div class="settings__general-update-buttons">
-        <button class="settings__general-download-update-btn">{{res 'setGenDownloadUpdate'}}</button>
-    </div>
-    {{/if}}
-    {{#if showUpdateBlock}}
-    <h2>{{res 'setGenUpdate'}}</h2>
-    <div>
-        <select class="settings__general-auto-update settings__select input-base">
-            <option value="install" {{#ifeq autoUpdate 'install'}}selected{{/ifeq}}>{{res 'setGenUpdateAuto'}}</option>
-            <option value="check" {{#ifeq autoUpdate 'check'}}selected{{/ifeq}}>{{res 'setGenUpdateCheck'}}</option>
-            <option value="" {{#unless autoUpdate}}selected{{/unless}}>{{res 'setGenNoUpdate'}}</option>
-        </select>
-        <div>{{updateInfo}}</div>
-        <a href="{{releaseNotesLink}}" target="_blank">{{res 'setGenReleaseNotes'}}</a>
-    </div>
-    <div class="settings__general-update-buttons">
-        {{#if updateInProgress}}
-        <button class="settings__general-update-btn btn-silent" disabled>{{res 'setGenUpdateChecking'}}</button>
-        {{else}}
-        <button class="settings__general-update-btn btn-silent">{{res 'setGenCheckUpdate'}}</button>
-        {{/if}}
-        {{#if updateReady}}<button class="settings__general-restart-btn">{{res 'setGenRestartToUpdate'}}</button>{{/if}}
-        {{#if updateFound}}<button class="settings__general-update-found-btn">{{res 'setGenDownloadAndRestart'}}</button>{{/if}}
-    </div>
-    {{/if}}
-
-    <h2 id="appearance">{{res 'setGenAppearance'}}</h2>
-    {{#if locales}}
-    <div>
-        <label for="settings__general-locale">{{res 'setGenLocale'}}:</label>
-        <select class="settings__general-locale settings__select input-base" id="settings__general-locale">
-            {{#each locales as |name key|}}
-                <option value="{{key}}" {{#ifeq key ../activeLocale}}selected{{/ifeq}}>{{name}}</option>
-            {{/each}}
-            <option value="...">({{res 'setGenLocOther'}})</option>
-        </select>
-    </div>
-    {{/if}}
-    <div>
-        <label>{{res 'setGenTheme'}}:</label>
-        <div class="settings__general-themes">
-            {{#each themes as |name key|}}
-                <div class="th-{{key}} settings__general-theme
-                    {{~#ifeq key ../activeTheme}} settings__general-theme--selected{{/ifeq~}}"
-                     data-theme="{{key}}"
-                >
-                    <div class="settings__general-theme-name">{{name}}</div>
-                    <button class="settings__general-theme-button"><i class="fa fa-ellipsis-h"></i></button>
-                </div>
-            {{/each}}
-            <div class="settings__general-theme settings__general-theme-plugins" data-theme="...">
-                <div class="settings__general-theme-plugins-name">{{res 'setGenMoreThemes'}}</div>
-                <i class="settings__general-theme-plugins-icon fa fa-puzzle-piece"></i>
+<h2 id="appearance">{{res 'setGenAppearance'}}</h2>
+{{#if locales}}
+<div>
+    <label for="settings__general-locale">{{res 'setGenLocale'}}:</label>
+    <select class="settings__general-locale settings__select input-base" id="settings__general-locale">
+        {{#each locales as |name key|}}
+            <option value="{{key}}" {{#ifeq key ../activeLocale}}selected{{/ifeq}}>{{name}}</option>
+        {{/each}}
+        <option value="...">({{res 'setGenLocOther'}})</option>
+    </select>
+</div>
+{{/if}}
+<div>
+    <label>{{res 'setGenTheme'}}:</label>
+    <div class="settings__general-themes">
+        {{#each themes as |name key|}}
+            <div class="th-{{key}} settings__general-theme
+                {{~#ifeq key ../activeTheme}} settings__general-theme--selected{{/ifeq~}}"
+                 data-theme="{{key}}"
+            >
+                <div class="settings__general-theme-name">{{name}}</div>
+                <button class="settings__general-theme-button"><i class="fa fa-ellipsis-h"></i></button>
             </div>
+        {{/each}}
+        <div class="settings__general-theme settings__general-theme-plugins" data-theme="...">
+            <div class="settings__general-theme-plugins-name">{{res 'setGenMoreThemes'}}</div>
+            <i class="settings__general-theme-plugins-icon fa fa-puzzle-piece"></i>
         </div>
     </div>
-    <div>
-        <input type="checkbox" class="settings__input input-base settings__general-auto-switch-theme" id="settings__general-auto-switch-theme" {{#if autoSwitchTheme}}checked{{/if}} />
-        <label for="settings__general-auto-switch-theme">{{res 'setGenAutoSwitchTheme'}}</label>
-    </div>
-    <div>
-        <label for="settings__general-font-size">{{res 'setGenFontSize'}}:</label>
-        <select class="settings__general-font-size settings__select input-base" id="settings__general-font-size">
-            <option value="0" {{#ifeq fontSize 0}}selected{{/ifeq}}>{{res 'setGenFontSizeNormal'}}</option>
-            <option value="1" {{#ifeq fontSize 1}}selected{{/ifeq}}>{{res 'setGenFontSizeLarge'}}</option>
-            <option value="2" {{#ifeq fontSize 2}}selected{{/ifeq}}>{{res 'setGenFontSizeLargest'}}</option>
-        </select>
-    </div>
-    {{#if supportsTitleBarStyles}}
-    <div>
-        <label for="settings__general-titlebar-style">{{res 'setGenTitlebarStyle'}}:</label>
-        <select class="settings__general-titlebar-style settings__select input-base" id="settings__general-titlebar-style">
-            <option value="default" {{#ifeq titlebarStyle 'default'}}selected{{/ifeq}}>{{res 'setGenTitlebarStyleDefault'}}</option>
-            <option value="hidden" {{#ifeq titlebarStyle 'hidden'}}selected{{/ifeq}}>{{res 'setGenTitlebarStyleHidden'}}</option>
-            {{#if supportsCustomTitleBarAndDraggableWindow}}
-                <option value="hidden-inset" {{#ifeq titlebarStyle 'hidden-inset'}}selected{{/ifeq}}>{{res 'setGenTitlebarStyleHiddenInset'}}</option>
-            {{/if}}
-        </select>
-    </div>
-    {{/if}}
-    <div>
-        <input type="checkbox" class="settings__input input-base settings__general-expand" id="settings__general-expand" {{#if expandGroups}}checked{{/if}} />
-        <label for="settings__general-expand">{{res 'setGenShowSubgroups'}}</label>
-    </div>
-    {{#if canSetTableView}}
-    <div>
-        <input type="checkbox" class="settings__input input-base settings__general-table-view" id="settings__general-table-view" {{#if tableView}}checked{{/if}} />
-        <label for="settings__general-table-view">{{res 'setGenTableView'}}</label>
-    </div>
-    {{/if}}
-    <div>
-        <input type="checkbox" class="settings__input input-base settings__general-colorful-icons" id="settings__general-colorful-icons" {{#if colorfulIcons}}checked{{/if}} />
-        <label for="settings__general-colorful-icons">{{res 'setGenColorfulIcons'}}</label>
-    </div>
-
-    <h2 id="function">{{res 'setGenFunction'}}</h2>
-    {{#if canAutoSaveOnClose}}
-    <div>
-        <input type="checkbox" class="settings__input input-base settings__general-auto-save" id="settings__general-auto-save"
-            {{#if autoSave}}checked{{/if}} />
-        <label for="settings__general-auto-save">{{res 'setGenAutoSyncOnClose'}}</label>
-    </div>
-    {{/if}}
-    <div>
-        <label for="settings__general-auto-save-interval">{{res 'setGenAutoSyncTimer'}}:</label>
-        <select class="settings__select input-base settings__general-auto-save-interval"
-                id="settings__general-auto-save-interval">
-            <option value="0" {{#ifeq autoSaveInterval 0}}selected{{/ifeq}}>{{res 'setGenAutoSyncTimerOff'}}</option>
-            <option value="-1" {{#ifeq autoSaveInterval -1}}selected{{/ifeq}}>{{res 'setGenAutoSyncTimerOnChange'}}</option>
-            <option value="1" {{#ifeq autoSaveInterval 1}}selected{{/ifeq}}>{{#res 'setGenAutoSyncTimerInterval'}}
-                1{{/res}}</option>
-            <option value="5" {{#ifeq autoSaveInterval 5}}selected{{/ifeq}}>{{#res 'setGenAutoSyncTimerInterval'}}
-                5{{/res}}</option>
-            <option value="15" {{#ifeq autoSaveInterval 15}}selected{{/ifeq}}>{{#res 'setGenAutoSyncTimerInterval'}}
-                15{{/res}}</option>
-            <option value="30" {{#ifeq autoSaveInterval 30}}selected{{/ifeq}}>{{#res 'setGenAutoSyncTimerInterval'}}
-                30{{/res}}</option>
-            <option value="60" {{#ifeq autoSaveInterval 60}}selected{{/ifeq}}>{{#res 'setGenAutoSyncTimerInterval'}}
-                60{{/res}}</option>
-        </select>
-    </div>
-    <div>
-        <label for="settings__general-remember-key-files">{{res 'setGenRememberKeyFiles'}}:</label>
-        <select class="settings__general-remember-key-files settings__select input-base" id="settings__general-remember-key-files">
-            <option value="" {{#unless rememberKeyFiles}}selected{{/unless}}>{{res 'setGenNoRememberKeyFiles'}}</option>
-            <option value="data" {{#ifeq rememberKeyFiles 'data'}}selected{{/ifeq}}>{{res 'setGenRememberKeyFilesData'}}</option>
-            {{#if supportFiles}}<option value="path" {{#ifeq rememberKeyFiles 'path'}}selected{{/ifeq}}>{{res 'setGenRememberKeyFilesPath'}}</option>{{/if}}
-        </select>
-    </div>
-    {{#if canClearClipboard}}
-    <div>
-        <label for="settings__general-clipboard">{{res 'setGenClearClip'}}:</label>
-        <select class="settings__general-clipboard settings__select input-base" id="settings__general-clipboard">
-            <option value="0" {{#unless clipboardSeconds}}selected{{/unless}}>{{res 'setGenNoClear'}}</option>
-            <option value="5" {{#ifeq clipboardSeconds 5}}selected{{/ifeq}}>{{#res 'setGenClearSeconds'}}5{{/res}}</option>
-            <option value="10" {{#ifeq clipboardSeconds 10}}selected{{/ifeq}}>{{#res 'setGenClearSeconds'}}10{{/res}}</option>
-            <option value="15" {{#ifeq clipboardSeconds 15}}selected{{/ifeq}}>{{#res 'setGenClearSeconds'}}15{{/res}}</option>
-            <option value="60" {{#ifeq clipboardSeconds 60}}selected{{/ifeq}}>{{res 'setGenClearMinute'}}</option>
-        </select>
-    </div>
-    {{/if}}
-    {{#if canMinimize}}
-    <div>
-        <input type="checkbox" class="settings__input input-base settings__general-minimize" id="settings__general-minimize"
-            {{#if minimizeOnClose}}checked{{/if}} />
-        <label for="settings__general-minimize">{{res 'setGenMinInstead'}}</label>
-    </div>
-    <div>
-        <input type="checkbox" class="settings__input input-base settings__general-minimize-on-field-copy" id="settings__general-minimize-on-field-copy"
-            {{#if minimizeOnFieldCopy}}checked{{/if}} />
-        <label for="settings__general-minimize-on-field-copy">{{res 'setGenMinOnFieldCopy'}}</label>
-    </div>
-    {{/if}}
-    {{#if canAutoType}}
-    <div>
-        <input type="checkbox" class="settings__input input-base settings__general-direct-autotype"
-            id="settings__general-direct-autotype" {{#if directAutotype}}checked{{/if}} />
-        <label for="settings__general-direct-autotype">{{res 'setGenDirectAutotype'}}</label>
-    </div>
-    <div>
-        <input type="checkbox" class="settings__input input-base settings__general-autotype-title-filter"
-               id="settings__general-autotype-title-filter" {{#if autoTypeTitleFilterEnabled}}checked{{/if}} />
-        <label for="settings__general-autotype-title-filter">{{res 'setGenAutoTypeTitleFilterEnabled'}}</label>
-    </div>
-    <div>
-        <input type="checkbox" class="settings__input input-base settings__general-field-label-dblclick-autotype"
-               id="settings__general-field-label-dblclick-autotype" {{#if fieldLabelDblClickAutoType}}checked{{/if}} />
-        <label for="settings__general-field-label-dblclick-autotype">{{res 'setGenFieldLabelDblClickAutoType'}}</label>
-    </div>
-    {{/if}}
-    <div>
-        <input type="checkbox" class="settings__input input-base settings__general-use-markdown" id="settings__general-use-markdown" {{#if useMarkdown}}checked{{/if}} />
-        <label for="settings__general-use-markdown">{{res 'setGenUseMarkdown'}}</label>
-    </div>
-    <div>
-        <input type="checkbox" class="settings__input input-base settings__general-use-group-icon-for-entries"
-               id="settings__general-use-group-icon-for-entries" {{#if useGroupIconForEntries}}checked{{/if}} />
-        <label for="settings__general-use-group-icon-for-entries">{{res 'setGenUseGroupIconForEntries'}}</label>
-    </div>
-    {{#if hasDeviceOwnerAuth}}
-        <div>
-            <label for="settings__general-device-owner-auth">{{res 'setGenTouchId'}}:</label>
-            <select class="settings__general-device-owner-auth settings__select input-base" id="settings__general-device-owner-auth">
-                <option value="" {{#unless deviceOwnerAuth}}selected{{/unless}}>{{res 'setGenTouchIdDisabled'}}</option>
-                <option value="memory" {{#ifeq deviceOwnerAuth 'memory'}}selected{{/ifeq}}>{{res 'setGenTouchIdMemory'}}</option>
-                <option value="file" {{#ifeq deviceOwnerAuth 'file'}}selected{{/ifeq}}>{{res 'setGenTouchIdFile'}}</option>
-            </select>
-        </div>
-        {{#if deviceOwnerAuth}}
-            <label for="settings__general-device-owner-auth-timeout">{{res 'setGenTouchIdPass'}}:</label>
-            <select class="settings__general-device-owner-auth-timeout settings__select input-base" id="settings__general-device-owner-auth-timeout">
-                <option value="1" {{#ifeq deviceOwnerAuthTimeout 1}}selected{{/ifeq}}>{{Res 'oneMinute'}}</option>
-                <option value="5" {{#ifeq deviceOwnerAuthTimeout 5}}selected{{/ifeq}}>{{#Res 'minutes'}}5{{/Res}}</option>
-                <option value="30" {{#ifeq deviceOwnerAuthTimeout 30}}selected{{/ifeq}}>{{#Res 'minutes'}}30{{/Res}}</option>
-                <option value="60" {{#ifeq deviceOwnerAuthTimeout 60}}selected{{/ifeq}}>{{Res 'oneHour'}}</option>
-                <option value="120" {{#ifeq deviceOwnerAuthTimeout 120}}selected{{/ifeq}}>{{#Res 'hours'}}2{{/Res}}</option>
-                <option value="480" {{#ifeq deviceOwnerAuthTimeout 480}}selected{{/ifeq}}>{{#Res 'hours'}}8{{/Res}}</option>
-                <option value="1440" {{#ifeq deviceOwnerAuthTimeout 1440}}selected{{/ifeq}}>{{Res 'oneDay'}}</option>
-                <option value="10080" {{#ifeq deviceOwnerAuthTimeout 10080}}selected{{/ifeq}}>{{Res 'oneWeek'}}</option>
-                {{#ifeq deviceOwnerAuth 'file'}}
-                    <option value="43200" {{#ifeq deviceOwnerAuthTimeout 43200}}selected{{/ifeq}}>{{Res 'oneMonth'}}</option>
-                    <option value="525600" {{#ifeq deviceOwnerAuthTimeout 525600}}selected{{/ifeq}}>{{Res 'oneYear'}}</option>
-                {{/ifeq}}
-            </select>
-        {{/if}}
-    {{/if}}
-
-    <h2 id="audit">{{res 'setGenAudit'}}</h2>
-    <div>
-        <input type="checkbox" class="settings__input input-base settings__general-audit-passwords"
-               id="settings__general-audit-passwords" {{#if auditPasswords}}checked{{/if}} />
-        <label for="settings__general-audit-passwords">{{res 'setGenAuditPasswords'}}</label>
-    </div>
-
-    <div>
-        <input type="checkbox" class="settings__input input-base settings__general-audit-password-entropy"
-               id="settings__general-audit-password-entropy" {{#if auditPasswordEntropy}}checked{{/if}} />
-        <label for="settings__general-audit-password-entropy">{{res 'setGenAuditPasswordEntropy'}}</label>
-    </div>
-
-    <div>
-        <input type="checkbox" class="settings__input input-base settings__general-exclude-pins-from-audit"
-               id="settings__general-exclude-pins-from-audit" {{#if excludePinsFromAudit}}checked{{/if}} />
-        <label for="settings__general-exclude-pins-from-audit">{{res 'setGenExcludePinsFromAudit'}}</label>
-    </div>
-
-    <div>
-        <input type="checkbox" class="settings__input input-base settings__general-check-passwords-on-hibp"
-               id="settings__general-check-passwords-on-hibp" {{#if checkPasswordsOnHIBP}}checked{{/if}} />
-        <label for="settings__general-check-passwords-on-hibp">
-            {{~#res 'setGenCheckPasswordsOnHIBP'~}}
-                <a href="{{hibpLink}}" rel="noreferrer noopener" target="_blank">Have I Been Pwned</a>
-            {{~/res~}}
-        </label>
-        <i class="fa fa-info-circle info-btn settings__general-toggle-help-hibp"></i>
-        <div class="settings__general-help-hibp hide">
-            {{~#res 'setGenHelpHIBP'~}}
-                <a href="{{hibpPrivacyLink}}" rel="noreferrer noopener" target="_blank">{{res 'setGenHelpHIBPLink'}}</a>
-            {{~/res~}}
-        </div>
-    </div>
-
-    <div>
-        <label for="settings__general-audit-password-age">{{res 'setGenAuditPasswordAge'}}:</label>
-        <select class="settings__select input-base settings__general-audit-password-age"
-                id="settings__general-audit-password-age">
-            <option value="0" {{#ifeq auditPasswordAge 0}}selected{{/ifeq}}>{{res 'setGenAuditPasswordAgeOff'}}</option>
-            <option value="1" {{#ifeq auditPasswordAge 1}}selected{{/ifeq}}>{{res 'setGenAuditPasswordAgeOneYear'}}</option>
-            <option value="2" {{#ifeq auditPasswordAge 2}}selected{{/ifeq}}>{{#res 'setGenAuditPasswordAgeYears'}}
-                2{{/res}}</option>
-            <option value="3" {{#ifeq auditPasswordAge 3}}selected{{/ifeq}}>{{#res 'setGenAuditPasswordAgeYears'}}
-                3{{/res}}</option>
-            <option value="5" {{#ifeq auditPasswordAge 5}}selected{{/ifeq}}>{{#res 'setGenAuditPasswordAgeYears'}}
-                5{{/res}}</option>
-            <option value="10" {{#ifeq auditPasswordAge 10}}selected{{/ifeq}}>{{#res 'setGenAuditPasswordAgeYears'}}
-                10{{/res}}</option>
-        </select>
-    </div>
-
-    <h2 id="lock">{{res 'setGenLock'}}</h2>
-    <div>
-        <label for="settings__general-idle-minutes">{{res 'setGenLockInactive'}}:</label>
-        <select class="settings__general-idle-minutes settings__select input-base" id="settings__general-idle-minutes">
-            <option value="0" {{#cmp idleMinutes 0 '<='}}selected{{/cmp}}>{{res 'setGenNoAutoLock'}}</option>
-            <option value="5" {{#ifeq idleMinutes 5}}selected{{/ifeq}}>{{#res 'setGenLockMinutes'}}5{{/res}}</option>
-            <option value="10" {{#ifeq idleMinutes 10}}selected{{/ifeq}}>{{#res 'setGenLockMinutes'}}10{{/res}}</option>
-            <option value="15" {{#ifeq idleMinutes 15}}selected{{/ifeq}}>{{#res 'setGenLockMinutes'}}15{{/res}}</option>
-            <option value="30" {{#ifeq idleMinutes 30}}selected{{/ifeq}}>{{#res 'setGenLockMinutes'}}30{{/res}}</option>
-            <option value="60" {{#ifeq idleMinutes 60}}selected{{/ifeq}}>{{res 'setGenLockHour'}}</option>
-            <option value="180" {{#ifeq idleMinutes 180}}selected{{/ifeq}}>{{#res 'setGenLockHours'}}3{{/res}}</option>
-            <option value="360" {{#ifeq idleMinutes 360}}selected{{/ifeq}}>{{#res 'setGenLockHours'}}6{{/res}}</option>
-            <option value="720" {{#ifeq idleMinutes 720}}selected{{/ifeq}}>{{#res 'setGenLockHours'}}12{{/res}}</option>
-            <option value="1440" {{#ifeq idleMinutes 1440}}selected{{/ifeq}}>{{res 'setGenLockDay'}}</option>
-        </select>
-    </div>
-    {{#if canDetectMinimize}}
-    <div>
-        <input type="checkbox" class="settings__input input-base settings__general-lock-on-minimize" id="settings__general-lock-on-minimize"
-               {{#if lockOnMinimize}}checked{{/if}} />
-        <label for="settings__general-lock-on-minimize">{{res 'setGenLockMinimize'}}</label>
-    </div>
-    {{/if}}
-    <div>
-        <input type="checkbox" class="settings__input input-base settings__general-lock-on-copy" id="settings__general-lock-on-copy"
-               {{#if lockOnCopy}}checked{{/if}} />
-        <label for="settings__general-lock-on-copy">{{res 'setGenLockCopy'}}</label>
-    </div>
-    {{#if canAutoType}}
-    <div>
-        <input type="checkbox" class="settings__input input-base settings__general-lock-on-auto-type" id="settings__general-lock-on-auto-type"
-               {{#if lockOnAutoType}}checked{{/if}} />
-        <label for="settings__general-lock-on-auto-type">{{res 'setGenLockAutoType'}}</label>
-    </div>
-    {{/if}}
-    {{#if canDetectOsSleep}}
-        <div>
-            <input type="checkbox" class="settings__input input-base settings__general-lock-on-os-lock" id="settings__general-lock-on-os-lock"
-                   {{#if lockOnOsLock}}checked{{/if}} />
-            <label for="settings__general-lock-on-os-lock">{{res 'setGenLockOrSleep'}}</label>
-        </div>
-    {{/if}}
-
-    <h2 id="storage">{{res 'setGenStorage'}}</h2>
-    <div>
-        <input type="checkbox" class="settings__input input-base settings__general-disable-offline-storage" id="settings__general-disable-offline-storage"
-               {{#if disableOfflineStorage}}checked{{/if}} />
-        <label for="settings__general-disable-offline-storage">{{res 'setGenDisableOfflineStorage'}}</label>
-    </div>
-    <div>
-        <input type="checkbox" class="settings__input input-base settings__general-short-lived-storage-token" id="settings__general-short-lived-storage-token"
-               {{#if shortLivedStorageToken}}checked{{/if}} />
-        <label for="settings__general-short-lived-storage-token">{{res 'setGenShortLivedStorageToken'}}</label>
-    </div>
-
-    {{#each storageProviders as |prv|}}
-    <h4 class="settings__general-storage-header"><input
-            type="checkbox" id="settings__general-prv-check-{{prv.name}}" class="settings__general-prv-check"
-            data-storage="{{prv.name}}" {{#if prv.enabled}}checked{{/if}}
-    /><label for="settings__general-prv-check-{{prv.name}}">{{res prv.name}}</label></h4>
-    <div class="settings__general-prv-wrap settings__general-{{prv.name}} {{#ifeq prv.enabled false}}hide{{/ifeq}}"></div>
-    {{#if prv.loggedIn}}<button class="btn-silent settings__general-prv-logout"
-                                data-storage="{{prv.name}}">{{res 'setGenStorageLogout'}}</button>{{/if}}
-    {{/each}}
-
-    <h2 id="advanced">{{res 'advanced'}}</h2>
-    <a class="settings__general-show-advanced">{{res 'setGenShowAdvanced'}}</a>
-    <div class="settings__general-advanced hide">
-        {{#if devTools}}
-            <button class="btn-silent settings__general-dev-tools-link">{{res 'setGenDevTools'}}</button>
-            <button class="btn-silent settings__general-try-beta-link">{{res 'setGenTryBeta'}}</button>
-        {{/if}}
-        {{#if showReloadApp}}
-            <button class="btn-silent settings__general-reload-app-link">{{res 'setGenReloadApp'}}</button>
-        {{/if}}
-        <button class="btn-silent settings__general-show-logs-link">{{res 'setGenShowAppLogs'}}</button>
-    </div>
+</div>
+<div>
+    <input type="checkbox" class="settings__input input-base settings__general-auto-switch-theme" id="settings__general-auto-switch-theme" {{#if autoSwitchTheme}}checked{{/if}} />
+    <label for="settings__general-auto-switch-theme">{{res 'setGenAutoSwitchTheme'}}</label>
+</div>
+<div>
+    <label for="settings__general-font-size">{{res 'setGenFontSize'}}:</label>
+    <select class="settings__general-font-size settings__select input-base" id="settings__general-font-size">
+        <option value="0" {{#ifeq fontSize 0}}selected{{/ifeq}}>{{res 'setGenFontSizeNormal'}}</option>
+        <option value="1" {{#ifeq fontSize 1}}selected{{/ifeq}}>{{res 'setGenFontSizeLarge'}}</option>
+        <option value="2" {{#ifeq fontSize 2}}selected{{/ifeq}}>{{res 'setGenFontSizeLargest'}}</option>
+    </select>
+</div>
+{{#if supportsTitleBarStyles}}
+<div>
+    <label for="settings__general-titlebar-style">{{res 'setGenTitlebarStyle'}}:</label>
+    <select class="settings__general-titlebar-style settings__select input-base" id="settings__general-titlebar-style">
+        <option value="default" {{#ifeq titlebarStyle 'default'}}selected{{/ifeq}}>{{res 'setGenTitlebarStyleDefault'}}</option>
+        <option value="hidden" {{#ifeq titlebarStyle 'hidden'}}selected{{/ifeq}}>{{res 'setGenTitlebarStyleHidden'}}</option>
+        {{#if supportsCustomTitleBarAndDraggableWindow}}
+            <option value="hidden-inset" {{#ifeq titlebarStyle 'hidden-inset'}}selected{{/ifeq}}>{{res 'setGenTitlebarStyleHiddenInset'}}</option>
+        {{/if}}
+    </select>
+</div>
+{{/if}}
+<div>
+    <input type="checkbox" class="settings__input input-base settings__general-expand" id="settings__general-expand" {{#if expandGroups}}checked{{/if}} />
+    <label for="settings__general-expand">{{res 'setGenShowSubgroups'}}</label>
+</div>
+{{#if canSetTableView}}
+<div>
+    <input type="checkbox" class="settings__input input-base settings__general-table-view" id="settings__general-table-view" {{#if tableView}}checked{{/if}} />
+    <label for="settings__general-table-view">{{res 'setGenTableView'}}</label>
+</div>
+{{/if}}
+<div>
+    <input type="checkbox" class="settings__input input-base settings__general-colorful-icons" id="settings__general-colorful-icons" {{#if colorfulIcons}}checked{{/if}} />
+    <label for="settings__general-colorful-icons">{{res 'setGenColorfulIcons'}}</label>
+</div>
+
+<h2 id="function">{{res 'setGenFunction'}}</h2>
+{{#if canAutoSaveOnClose}}
+<div>
+    <input type="checkbox" class="settings__input input-base settings__general-auto-save" id="settings__general-auto-save"
+        {{#if autoSave}}checked{{/if}} />
+    <label for="settings__general-auto-save">{{res 'setGenAutoSyncOnClose'}}</label>
+</div>
+{{/if}}
+<div>
+    <label for="settings__general-auto-save-interval">{{res 'setGenAutoSyncTimer'}}:</label>
+    <select class="settings__select input-base settings__general-auto-save-interval"
+            id="settings__general-auto-save-interval">
+        <option value="0" {{#ifeq autoSaveInterval 0}}selected{{/ifeq}}>{{res 'setGenAutoSyncTimerOff'}}</option>
+        <option value="-1" {{#ifeq autoSaveInterval -1}}selected{{/ifeq}}>{{res 'setGenAutoSyncTimerOnChange'}}</option>
+        <option value="1" {{#ifeq autoSaveInterval 1}}selected{{/ifeq}}>{{#res 'setGenAutoSyncTimerInterval'}}
+            1{{/res}}</option>
+        <option value="5" {{#ifeq autoSaveInterval 5}}selected{{/ifeq}}>{{#res 'setGenAutoSyncTimerInterval'}}
+            5{{/res}}</option>
+        <option value="15" {{#ifeq autoSaveInterval 15}}selected{{/ifeq}}>{{#res 'setGenAutoSyncTimerInterval'}}
+            15{{/res}}</option>
+        <option value="30" {{#ifeq autoSaveInterval 30}}selected{{/ifeq}}>{{#res 'setGenAutoSyncTimerInterval'}}
+            30{{/res}}</option>
+        <option value="60" {{#ifeq autoSaveInterval 60}}selected{{/ifeq}}>{{#res 'setGenAutoSyncTimerInterval'}}
+            60{{/res}}</option>
+    </select>
+</div>
+<div>
+    <label for="settings__general-remember-key-files">{{res 'setGenRememberKeyFiles'}}:</label>
+    <select class="settings__general-remember-key-files settings__select input-base" id="settings__general-remember-key-files">
+        <option value="" {{#unless rememberKeyFiles}}selected{{/unless}}>{{res 'setGenNoRememberKeyFiles'}}</option>
+        <option value="data" {{#ifeq rememberKeyFiles 'data'}}selected{{/ifeq}}>{{res 'setGenRememberKeyFilesData'}}</option>
+        {{#if supportFiles}}<option value="path" {{#ifeq rememberKeyFiles 'path'}}selected{{/ifeq}}>{{res 'setGenRememberKeyFilesPath'}}</option>{{/if}}
+    </select>
+</div>
+{{#if canClearClipboard}}
+<div>
+    <label for="settings__general-clipboard">{{res 'setGenClearClip'}}:</label>
+    <select class="settings__general-clipboard settings__select input-base" id="settings__general-clipboard">
+        <option value="0" {{#unless clipboardSeconds}}selected{{/unless}}>{{res 'setGenNoClear'}}</option>
+        <option value="5" {{#ifeq clipboardSeconds 5}}selected{{/ifeq}}>{{#res 'setGenClearSeconds'}}5{{/res}}</option>
+        <option value="10" {{#ifeq clipboardSeconds 10}}selected{{/ifeq}}>{{#res 'setGenClearSeconds'}}10{{/res}}</option>
+        <option value="15" {{#ifeq clipboardSeconds 15}}selected{{/ifeq}}>{{#res 'setGenClearSeconds'}}15{{/res}}</option>
+        <option value="60" {{#ifeq clipboardSeconds 60}}selected{{/ifeq}}>{{res 'setGenClearMinute'}}</option>
+    </select>
+</div>
+{{/if}}
+{{#if canMinimize}}
+<div>
+    <input type="checkbox" class="settings__input input-base settings__general-minimize" id="settings__general-minimize"
+        {{#if minimizeOnClose}}checked{{/if}} />
+    <label for="settings__general-minimize">{{res 'setGenMinInstead'}}</label>
+</div>
+<div>
+    <input type="checkbox" class="settings__input input-base settings__general-minimize-on-field-copy" id="settings__general-minimize-on-field-copy"
+        {{#if minimizeOnFieldCopy}}checked{{/if}} />
+    <label for="settings__general-minimize-on-field-copy">{{res 'setGenMinOnFieldCopy'}}</label>
+</div>
+{{/if}}
+{{#if canAutoType}}
+<div>
+    <input type="checkbox" class="settings__input input-base settings__general-direct-autotype"
+        id="settings__general-direct-autotype" {{#if directAutotype}}checked{{/if}} />
+    <label for="settings__general-direct-autotype">{{res 'setGenDirectAutotype'}}</label>
+</div>
+<div>
+    <input type="checkbox" class="settings__input input-base settings__general-autotype-title-filter"
+           id="settings__general-autotype-title-filter" {{#if autoTypeTitleFilterEnabled}}checked{{/if}} />
+    <label for="settings__general-autotype-title-filter">{{res 'setGenAutoTypeTitleFilterEnabled'}}</label>
+</div>
+<div>
+    <input type="checkbox" class="settings__input input-base settings__general-field-label-dblclick-autotype"
+           id="settings__general-field-label-dblclick-autotype" {{#if fieldLabelDblClickAutoType}}checked{{/if}} />
+    <label for="settings__general-field-label-dblclick-autotype">{{res 'setGenFieldLabelDblClickAutoType'}}</label>
+</div>
+{{/if}}
+<div>
+    <input type="checkbox" class="settings__input input-base settings__general-use-markdown" id="settings__general-use-markdown" {{#if useMarkdown}}checked{{/if}} />
+    <label for="settings__general-use-markdown">{{res 'setGenUseMarkdown'}}</label>
+</div>
+<div>
+    <input type="checkbox" class="settings__input input-base settings__general-use-group-icon-for-entries"
+           id="settings__general-use-group-icon-for-entries" {{#if useGroupIconForEntries}}checked{{/if}} />
+    <label for="settings__general-use-group-icon-for-entries">{{res 'setGenUseGroupIconForEntries'}}</label>
+</div>
+{{#if hasDeviceOwnerAuth}}
+    <div>
+        <label for="settings__general-device-owner-auth">{{res 'setGenTouchId'}}:</label>
+        <select class="settings__general-device-owner-auth settings__select input-base" id="settings__general-device-owner-auth">
+            <option value="" {{#unless deviceOwnerAuth}}selected{{/unless}}>{{res 'setGenTouchIdDisabled'}}</option>
+            <option value="memory" {{#ifeq deviceOwnerAuth 'memory'}}selected{{/ifeq}}>{{res 'setGenTouchIdMemory'}}</option>
+            <option value="file" {{#ifeq deviceOwnerAuth 'file'}}selected{{/ifeq}}>{{res 'setGenTouchIdFile'}}</option>
+        </select>
+    </div>
+    {{#if deviceOwnerAuth}}
+        <label for="settings__general-device-owner-auth-timeout">{{res 'setGenTouchIdPass'}}:</label>
+        <select class="settings__general-device-owner-auth-timeout settings__select input-base" id="settings__general-device-owner-auth-timeout">
+            <option value="1" {{#ifeq deviceOwnerAuthTimeout 1}}selected{{/ifeq}}>{{Res 'oneMinute'}}</option>
+            <option value="5" {{#ifeq deviceOwnerAuthTimeout 5}}selected{{/ifeq}}>{{#Res 'minutes'}}5{{/Res}}</option>
+            <option value="30" {{#ifeq deviceOwnerAuthTimeout 30}}selected{{/ifeq}}>{{#Res 'minutes'}}30{{/Res}}</option>
+            <option value="60" {{#ifeq deviceOwnerAuthTimeout 60}}selected{{/ifeq}}>{{Res 'oneHour'}}</option>
+            <option value="120" {{#ifeq deviceOwnerAuthTimeout 120}}selected{{/ifeq}}>{{#Res 'hours'}}2{{/Res}}</option>
+            <option value="480" {{#ifeq deviceOwnerAuthTimeout 480}}selected{{/ifeq}}>{{#Res 'hours'}}8{{/Res}}</option>
+            <option value="1440" {{#ifeq deviceOwnerAuthTimeout 1440}}selected{{/ifeq}}>{{Res 'oneDay'}}</option>
+            <option value="10080" {{#ifeq deviceOwnerAuthTimeout 10080}}selected{{/ifeq}}>{{Res 'oneWeek'}}</option>
+            {{#ifeq deviceOwnerAuth 'file'}}
+                <option value="43200" {{#ifeq deviceOwnerAuthTimeout 43200}}selected{{/ifeq}}>{{Res 'oneMonth'}}</option>
+                <option value="525600" {{#ifeq deviceOwnerAuthTimeout 525600}}selected{{/ifeq}}>{{Res 'oneYear'}}</option>
+            {{/ifeq}}
+        </select>
+    {{/if}}
+{{/if}}
+
+<h2 id="audit">{{res 'setGenAudit'}}</h2>
+<div>
+    <input type="checkbox" class="settings__input input-base settings__general-audit-passwords"
+           id="settings__general-audit-passwords" {{#if auditPasswords}}checked{{/if}} />
+    <label for="settings__general-audit-passwords">{{res 'setGenAuditPasswords'}}</label>
+</div>
+
+<div>
+    <input type="checkbox" class="settings__input input-base settings__general-audit-password-entropy"
+           id="settings__general-audit-password-entropy" {{#if auditPasswordEntropy}}checked{{/if}} />
+    <label for="settings__general-audit-password-entropy">{{res 'setGenAuditPasswordEntropy'}}</label>
+</div>
+
+<div>
+    <input type="checkbox" class="settings__input input-base settings__general-exclude-pins-from-audit"
+           id="settings__general-exclude-pins-from-audit" {{#if excludePinsFromAudit}}checked{{/if}} />
+    <label for="settings__general-exclude-pins-from-audit">{{res 'setGenExcludePinsFromAudit'}}</label>
+</div>
+
+<div>
+    <input type="checkbox" class="settings__input input-base settings__general-check-passwords-on-hibp"
+           id="settings__general-check-passwords-on-hibp" {{#if checkPasswordsOnHIBP}}checked{{/if}} />
+    <label for="settings__general-check-passwords-on-hibp">
+        {{~#res 'setGenCheckPasswordsOnHIBP'~}}
+            <a href="{{hibpLink}}" rel="noreferrer noopener" target="_blank">Have I Been Pwned</a>
+        {{~/res~}}
+    </label>
+    <i class="fa fa-info-circle info-btn settings__general-toggle-help-hibp"></i>
+    <div class="settings__general-help-hibp hide">
+        {{~#res 'setGenHelpHIBP'~}}
+            <a href="{{hibpPrivacyLink}}" rel="noreferrer noopener" target="_blank">{{res 'setGenHelpHIBPLink'}}</a>
+        {{~/res~}}
+    </div>
+</div>
+
+<div>
+    <label for="settings__general-audit-password-age">{{res 'setGenAuditPasswordAge'}}:</label>
+    <select class="settings__select input-base settings__general-audit-password-age"
+            id="settings__general-audit-password-age">
+        <option value="0" {{#ifeq auditPasswordAge 0}}selected{{/ifeq}}>{{res 'setGenAuditPasswordAgeOff'}}</option>
+        <option value="1" {{#ifeq auditPasswordAge 1}}selected{{/ifeq}}>{{res 'setGenAuditPasswordAgeOneYear'}}</option>
+        <option value="2" {{#ifeq auditPasswordAge 2}}selected{{/ifeq}}>{{#res 'setGenAuditPasswordAgeYears'}}
+            2{{/res}}</option>
+        <option value="3" {{#ifeq auditPasswordAge 3}}selected{{/ifeq}}>{{#res 'setGenAuditPasswordAgeYears'}}
+            3{{/res}}</option>
+        <option value="5" {{#ifeq auditPasswordAge 5}}selected{{/ifeq}}>{{#res 'setGenAuditPasswordAgeYears'}}
+            5{{/res}}</option>
+        <option value="10" {{#ifeq auditPasswordAge 10}}selected{{/ifeq}}>{{#res 'setGenAuditPasswordAgeYears'}}
+            10{{/res}}</option>
+    </select>
+</div>
+
+<h2 id="lock">{{res 'setGenLock'}}</h2>
+<div>
+    <label for="settings__general-idle-minutes">{{res 'setGenLockInactive'}}:</label>
+    <select class="settings__general-idle-minutes settings__select input-base" id="settings__general-idle-minutes">
+        <option value="0" {{#cmp idleMinutes 0 '<='}}selected{{/cmp}}>{{res 'setGenNoAutoLock'}}</option>
+        <option value="5" {{#ifeq idleMinutes 5}}selected{{/ifeq}}>{{#res 'setGenLockMinutes'}}5{{/res}}</option>
+        <option value="10" {{#ifeq idleMinutes 10}}selected{{/ifeq}}>{{#res 'setGenLockMinutes'}}10{{/res}}</option>
+        <option value="15" {{#ifeq idleMinutes 15}}selected{{/ifeq}}>{{#res 'setGenLockMinutes'}}15{{/res}}</option>
+        <option value="30" {{#ifeq idleMinutes 30}}selected{{/ifeq}}>{{#res 'setGenLockMinutes'}}30{{/res}}</option>
+        <option value="60" {{#ifeq idleMinutes 60}}selected{{/ifeq}}>{{res 'setGenLockHour'}}</option>
+        <option value="180" {{#ifeq idleMinutes 180}}selected{{/ifeq}}>{{#res 'setGenLockHours'}}3{{/res}}</option>
+        <option value="360" {{#ifeq idleMinutes 360}}selected{{/ifeq}}>{{#res 'setGenLockHours'}}6{{/res}}</option>
+        <option value="720" {{#ifeq idleMinutes 720}}selected{{/ifeq}}>{{#res 'setGenLockHours'}}12{{/res}}</option>
+        <option value="1440" {{#ifeq idleMinutes 1440}}selected{{/ifeq}}>{{res 'setGenLockDay'}}</option>
+    </select>
+</div>
+{{#if canDetectMinimize}}
+<div>
+    <input type="checkbox" class="settings__input input-base settings__general-lock-on-minimize" id="settings__general-lock-on-minimize"
+           {{#if lockOnMinimize}}checked{{/if}} />
+    <label for="settings__general-lock-on-minimize">{{res 'setGenLockMinimize'}}</label>
+</div>
+{{/if}}
+<div>
+    <input type="checkbox" class="settings__input input-base settings__general-lock-on-copy" id="settings__general-lock-on-copy"
+           {{#if lockOnCopy}}checked{{/if}} />
+    <label for="settings__general-lock-on-copy">{{res 'setGenLockCopy'}}</label>
+</div>
+{{#if canAutoType}}
+<div>
+    <input type="checkbox" class="settings__input input-base settings__general-lock-on-auto-type" id="settings__general-lock-on-auto-type"
+           {{#if lockOnAutoType}}checked{{/if}} />
+    <label for="settings__general-lock-on-auto-type">{{res 'setGenLockAutoType'}}</label>
+</div>
+{{/if}}
+{{#if canDetectOsSleep}}
+    <div>
+        <input type="checkbox" class="settings__input input-base settings__general-lock-on-os-lock" id="settings__general-lock-on-os-lock"
+               {{#if lockOnOsLock}}checked{{/if}} />
+        <label for="settings__general-lock-on-os-lock">{{res 'setGenLockOrSleep'}}</label>
+    </div>
+{{/if}}
+
+<h2 id="storage">{{res 'setGenStorage'}}</h2>
+<div>
+    <input type="checkbox" class="settings__input input-base settings__general-disable-offline-storage" id="settings__general-disable-offline-storage"
+           {{#if disableOfflineStorage}}checked{{/if}} />
+    <label for="settings__general-disable-offline-storage">{{res 'setGenDisableOfflineStorage'}}</label>
+</div>
+<div>
+    <input type="checkbox" class="settings__input input-base settings__general-short-lived-storage-token" id="settings__general-short-lived-storage-token"
+           {{#if shortLivedStorageToken}}checked{{/if}} />
+    <label for="settings__general-short-lived-storage-token">{{res 'setGenShortLivedStorageToken'}}</label>
+</div>
+
+{{#each storageProviders as |prv|}}
+<h4 class="settings__general-storage-header"><input
+        type="checkbox" id="settings__general-prv-check-{{prv.name}}" class="settings__general-prv-check"
+        data-storage="{{prv.name}}" {{#if prv.enabled}}checked{{/if}}
+/><label for="settings__general-prv-check-{{prv.name}}">{{res prv.name}}</label></h4>
+<div class="settings__general-prv-wrap settings__general-{{prv.name}} {{#ifeq prv.enabled false}}hide{{/ifeq}}"></div>
+{{#if prv.loggedIn}}<button class="btn-silent settings__general-prv-logout"
+                            data-storage="{{prv.name}}">{{res 'setGenStorageLogout'}}</button>{{/if}}
+{{/each}}
+
+<h2 id="advanced">{{res 'advanced'}}</h2>
+<a class="settings__general-show-advanced">{{res 'setGenShowAdvanced'}}</a>
+<div class="settings__general-advanced hide">
+    {{#if devTools}}
+        <button class="btn-silent settings__general-dev-tools-link">{{res 'setGenDevTools'}}</button>
+        <button class="btn-silent settings__general-try-beta-link">{{res 'setGenTryBeta'}}</button>
+    {{/if}}
+    {{#if showReloadApp}}
+        <button class="btn-silent settings__general-reload-app-link">{{res 'setGenReloadApp'}}</button>
+    {{/if}}
+    <button class="btn-silent settings__general-show-logs-link">{{res 'setGenShowAppLogs'}}</button>
 </div>