From 5f5dce6d53a3657b241a29bb9de6b264a3bf97bd Mon Sep 17 00:00:00 2001
From: "jmt-gh)" <13617455+jmt-gh@users.noreply.github.com>
Date: Sun, 19 Jun 2022 17:31:52 -0700
Subject: [PATCH] initial Settings update

---
 client/pages/config/index.vue | 339 +++++++++++++++++-----------------
 1 file changed, 172 insertions(+), 167 deletions(-)

diff --git a/client/pages/config/index.vue b/client/pages/config/index.vue
index e6ae76c0..df1c7922 100644
--- a/client/pages/config/index.vue
+++ b/client/pages/config/index.vue
@@ -1,169 +1,191 @@
 <template>
   <div>
     <!-- <div class="h-0.5 bg-primary bg-opacity-50 w-full" /> -->
+    <div class="sm:flex bg-bg rounded-md shadow-lg border border-white border-opacity-5 p-4 mb-8" style="background-color: ">
 
-    <div class="bg-bg rounded-md shadow-lg border border-white border-opacity-5 p-4 mb-8">
-      <div class="flex items-center mb-2">
-        <h1 class="text-xl font-semibold">Settings</h1>
+      <div id="firstcolumn" class="flex-1" style="background-color: ">
+        <div class="mb-2">
+          <h1 class="text-xl">Settings</h1>
+        </div>
+
+        <div class="mb-2">
+          <h1 class="text-xl font-semibold">General</h1>
+        </div>
+          <div class="flex items-center py-2">
+            <ui-toggle-switch v-model="newServerSettings.storeCoverWithItem" :disabled="updatingServerSettings" @input="(val) => updateSettingsKey('storeCoverWithItem', val)" />
+            <ui-tooltip :text="tooltips.storeCoverWithItem">
+              <p class="pl-4 text-lg">
+                Store covers with item
+                <span class="material-icons icon-text">info_outlined</span>
+              </p>
+            </ui-tooltip>
+          </div>
+
+          <div class="flex items-center py-2">
+            <ui-toggle-switch v-model="newServerSettings.storeMetadataWithItem" :disabled="updatingServerSettings" @input="(val) => updateSettingsKey('storeMetadataWithItem', val)" />
+            <ui-tooltip :text="tooltips.storeMetadataWithItem">
+              <p class="pl-4 text-lg">
+                Store metadata with item
+                <span class="material-icons icon-text">info_outlined</span>
+              </p>
+            </ui-tooltip>
+          </div>
+
+          <div class="flex items-center py-2">
+            <ui-toggle-switch v-model="newServerSettings.sortingIgnorePrefix" :disabled="updatingServerSettings" @input="(val) => updateSettingsKey('sortingIgnorePrefix', val)" />
+            <ui-tooltip :text="tooltips.sortingIgnorePrefix">
+              <p class="pl-4 text-lg">
+                Ignore prefixes when sorting title and series
+                <span class="material-icons icon-text">info_outlined</span>
+              </p>
+            </ui-tooltip>
+          </div>
+          <div v-if="newServerSettings.sortingIgnorePrefix" class="w-72 ml-14 mb-2">
+            <ui-multi-select v-model="newServerSettings.sortingPrefixes" small :items="newServerSettings.sortingPrefixes" label="Prefixes to Ignore (case insensitive)" @input="updateSortingPrefixes" :disabled="updatingServerSettings" />
+          </div>
+
+          <div class="flex items-center py-2">
+            <ui-toggle-switch v-model="newServerSettings.chromecastEnabled" :disabled="updatingServerSettings" @input="(val) => updateSettingsKey('chromecastEnabled', val)" />
+            <p class="pl-4 text-lg">Enable Chromecast</p>
+          </div>
+
+        <div class="flex items-center mb-2 mt-8">
+          <h1 class="text-xl font-semibold">Display</h1>
+        </div>
+
+        <div class="flex items-center py-2">
+          <ui-toggle-switch v-model="useSquareBookCovers" :disabled="updatingServerSettings" @input="updateBookCoverAspectRatio" />
+          <ui-tooltip :text="tooltips.coverAspectRatio">
+            <p class="pl-4 text-lg">
+              Use square book covers
+              <span class="material-icons icon-text">info_outlined</span>
+            </p>
+          </ui-tooltip>
+        </div>
+
+        <div class="flex items-center py-2">
+          <ui-toggle-switch v-model="useAlternativeBookshelfView" :disabled="updatingServerSettings" @input="updateAlternativeBookshelfView" />
+          <ui-tooltip :text="tooltips.bookshelfView">
+            <p class="pl-4 text-lg">
+              Use alternative bookshelf view
+              <span class="material-icons icon-text">info_outlined</span>
+            </p>
+          </ui-tooltip>
+        </div>
+
+        <div class="flex items-center py-2">
+          <p class="pr-4 text-lg">Date Format</p>
+          <ui-dropdown v-model="newServerSettings.dateFormat" :items="dateFormats" small class="max-w-40" @input="(val) => updateSettingsKey('dateFormat', val)" />
+        </div>
       </div>
 
-      <div class="flex items-center py-2">
-        <ui-toggle-switch v-model="newServerSettings.storeCoverWithItem" :disabled="updatingServerSettings" @input="(val) => updateSettingsKey('storeCoverWithItem', val)" />
-        <ui-tooltip :text="tooltips.storeCoverWithItem">
-          <p class="pl-4 text-lg">
-            Store covers with item
-            <span class="material-icons icon-text">info_outlined</span>
-          </p>
-        </ui-tooltip>
-      </div>
+      <div id="secondcolumn" class="flex-1" style="background-color: ">
+        <div class="flex items-center mb-2 mt-8">
+          <h1 class="text-xl font-semibold">Scanner</h1>
+        </div>
 
-      <div class="flex items-center py-2">
-        <ui-toggle-switch v-model="newServerSettings.storeMetadataWithItem" :disabled="updatingServerSettings" @input="(val) => updateSettingsKey('storeMetadataWithItem', val)" />
-        <ui-tooltip :text="tooltips.storeMetadataWithItem">
-          <p class="pl-4 text-lg">
-            Store metadata with item
-            <span class="material-icons icon-text">info_outlined</span>
-          </p>
-        </ui-tooltip>
-      </div>
+        <div class="flex items-center py-2">
+          <ui-toggle-switch v-model="newServerSettings.scannerParseSubtitle" :disabled="updatingServerSettings" @input="(val) => updateSettingsKey('scannerParseSubtitle', val)" />
+          <ui-tooltip :text="tooltips.scannerParseSubtitle">
+            <p class="pl-4 text-lg">
+              Scanner parse subtitles
+              <span class="material-icons icon-text">info_outlined</span>
+            </p>
+          </ui-tooltip>
+        </div>
 
-      <div class="flex items-center py-2">
-        <ui-toggle-switch v-model="newServerSettings.sortingIgnorePrefix" :disabled="updatingServerSettings" @input="(val) => updateSettingsKey('sortingIgnorePrefix', val)" />
-        <ui-tooltip :text="tooltips.sortingIgnorePrefix">
-          <p class="pl-4 text-lg">
-            Ignore prefixes when sorting title and series
-            <span class="material-icons icon-text">info_outlined</span>
-          </p>
-        </ui-tooltip>
-      </div>
-      <div v-if="newServerSettings.sortingIgnorePrefix" class="w-72 ml-14 mb-2">
-        <ui-multi-select v-model="newServerSettings.sortingPrefixes" small :items="newServerSettings.sortingPrefixes" label="Prefixes to Ignore (case insensitive)" @input="updateSortingPrefixes" :disabled="updatingServerSettings" />
-      </div>
+        <div class="flex items-center py-2">
+          <ui-toggle-switch v-model="newServerSettings.scannerFindCovers" :disabled="updatingServerSettings" @input="(val) => updateSettingsKey('scannerFindCovers', val)" />
+          <ui-tooltip :text="tooltips.scannerFindCovers">
+            <p class="pl-4 text-lg">
+              Scanner find covers
+              <span class="material-icons icon-text">info_outlined</span>
+            </p>
+          </ui-tooltip>
+          <div class="flex-grow" />
+        </div>
+        <div v-if="newServerSettings.scannerFindCovers" class="w-44 ml-14 mb-2">
+          <ui-dropdown v-model="newServerSettings.scannerCoverProvider" small :items="providers" label="Cover Provider" @input="updateScannerCoverProvider" :disabled="updatingServerSettings" />
+        </div>
 
-      <div class="flex items-center py-2">
-        <ui-toggle-switch v-model="newServerSettings.chromecastEnabled" :disabled="updatingServerSettings" @input="(val) => updateSettingsKey('chromecastEnabled', val)" />
-        <p class="pl-4 text-lg">Enable Chromecast</p>
-      </div>
+        <div class="flex items-center py-2">
+          <ui-toggle-switch v-model="newServerSettings.scannerPreferAudioMetadata" :disabled="updatingServerSettings" @input="(val) => updateSettingsKey('scannerPreferAudioMetadata', val)" />
+          <ui-tooltip :text="tooltips.scannerPreferAudioMetadata">
+            <p class="pl-4 text-lg">
+              Scanner prefer audio metadata
+              <span class="material-icons icon-text">info_outlined</span>
+            </p>
+          </ui-tooltip>
+        </div>
 
-      <div class="flex items-center mb-2 mt-8">
-        <h1 class="text-xl font-semibold">Display Settings</h1>
-      </div>
+        <div class="flex items-center py-2">
+          <ui-toggle-switch v-model="newServerSettings.scannerPreferOverdriveMediaMarker" :disabled="updatingServerSettings" @input="(val) => updateSettingsKey('scannerPreferOverdriveMediaMarker', val)" />
+          <ui-tooltip :text="tooltips.scannerPreferOverdriveMediaMarker">
+            <p class="pl-4 text-lg">
+              Scanner prefer Overdrive Media Markers for chapters
+              <span class="material-icons icon-text">info_outlined</span>
+            </p>
+          </ui-tooltip>
+        </div>
 
-      <div class="flex items-center py-2">
-        <ui-toggle-switch v-model="useSquareBookCovers" :disabled="updatingServerSettings" @input="updateBookCoverAspectRatio" />
-        <ui-tooltip :text="tooltips.coverAspectRatio">
-          <p class="pl-4 text-lg">
-            Use square book covers
-            <span class="material-icons icon-text">info_outlined</span>
-          </p>
-        </ui-tooltip>
-      </div>
+        <div class="flex items-center py-2">
+          <ui-toggle-switch v-model="newServerSettings.scannerPreferOpfMetadata" :disabled="updatingServerSettings" @input="(val) => updateSettingsKey('scannerPreferOpfMetadata', val)" />
+          <ui-tooltip :text="tooltips.scannerPreferOpfMetadata">
+            <p class="pl-4 text-lg">
+              Scanner prefer OPF metadata
+              <span class="material-icons icon-text">info_outlined</span>
+            </p>
+          </ui-tooltip>
+        </div>
 
-      <div class="flex items-center py-2">
-        <ui-toggle-switch v-model="useAlternativeBookshelfView" :disabled="updatingServerSettings" @input="updateAlternativeBookshelfView" />
-        <ui-tooltip :text="tooltips.bookshelfView">
-          <p class="pl-4 text-lg">
-            Use alternative bookshelf view
-            <span class="material-icons icon-text">info_outlined</span>
-          </p>
-        </ui-tooltip>
-      </div>
+        <div class="flex items-center py-2">
+          <ui-toggle-switch v-model="newServerSettings.scannerPreferMatchedMetadata" :disabled="updatingServerSettings" @input="(val) => updateSettingsKey('scannerPreferMatchedMetadata', val)" />
+          <ui-tooltip :text="tooltips.scannerPreferMatchedMetadata">
+            <p class="pl-4 text-lg">
+              Scanner prefer matched metadata
+              <span class="material-icons icon-text">info_outlined</span>
+            </p>
+          </ui-tooltip>
+        </div>
 
-      <div class="flex items-center py-2">
-        <p class="pr-4 text-lg">Date Format</p>
-        <ui-dropdown v-model="newServerSettings.dateFormat" :items="dateFormats" small class="max-w-40" @input="(val) => updateSettingsKey('dateFormat', val)" />
-      </div>
+        <div class="flex items-center py-2">
+          <ui-toggle-switch v-model="newServerSettings.scannerDisableWatcher" :disabled="updatingServerSettings" @input="(val) => updateSettingsKey('scannerDisableWatcher', val)" />
+          <ui-tooltip :text="tooltips.scannerDisableWatcher">
+            <p class="pl-4 text-lg">
+              Disable Watcher
+              <span class="material-icons icon-text">info_outlined</span>
+            </p>
+          </ui-tooltip>
+        </div>
 
-      <div class="flex items-center mb-2 mt-8">
-        <h1 class="text-xl font-semibold">Scanner Settings</h1>
-      </div>
+        <div class="flex items-center mb-2 mt-8">
+          <h1 class="text-xl font-semibold">Experimental Features</h1>
+        </div>
 
-      <div class="flex items-center py-2">
-        <ui-toggle-switch v-model="newServerSettings.scannerParseSubtitle" :disabled="updatingServerSettings" @input="(val) => updateSettingsKey('scannerParseSubtitle', val)" />
-        <ui-tooltip :text="tooltips.scannerParseSubtitle">
-          <p class="pl-4 text-lg">
-            Scanner parse subtitles
-            <span class="material-icons icon-text">info_outlined</span>
-          </p>
-        </ui-tooltip>
-      </div>
+        <div>
+          <div class="flex items-center">
+            <ui-toggle-switch v-model="showExperimentalFeatures" />
+            <ui-tooltip :text="tooltips.experimentalFeatures">
+              <p class="pl-4 text-lg">
+                Experimental Features
+                <a href="https://github.com/advplyr/audiobookshelf/discussions/75" target="_blank">
+                  <span class="material-icons icon-text">info_outlined</span>
+                </a>
+              </p>
+            </ui-tooltip>
+          </div>
+        </div>
 
-      <div class="flex items-center py-2">
-        <ui-toggle-switch v-model="newServerSettings.scannerFindCovers" :disabled="updatingServerSettings" @input="(val) => updateSettingsKey('scannerFindCovers', val)" />
-        <ui-tooltip :text="tooltips.scannerFindCovers">
-          <p class="pl-4 text-lg">
-            Scanner find covers
-            <span class="material-icons icon-text">info_outlined</span>
-          </p>
-        </ui-tooltip>
-        <div class="flex-grow" />
-      </div>
-      <div v-if="newServerSettings.scannerFindCovers" class="w-44 ml-14 mb-2">
-        <ui-dropdown v-model="newServerSettings.scannerCoverProvider" small :items="providers" label="Cover Provider" @input="updateScannerCoverProvider" :disabled="updatingServerSettings" />
-      </div>
-
-      <div class="flex items-center py-2">
-        <ui-toggle-switch v-model="newServerSettings.scannerPreferAudioMetadata" :disabled="updatingServerSettings" @input="(val) => updateSettingsKey('scannerPreferAudioMetadata', val)" />
-        <ui-tooltip :text="tooltips.scannerPreferAudioMetadata">
-          <p class="pl-4 text-lg">
-            Scanner prefer audio metadata
-            <span class="material-icons icon-text">info_outlined</span>
-          </p>
-        </ui-tooltip>
-      </div>
-
-      <div class="flex items-center py-2">
-        <ui-toggle-switch v-model="newServerSettings.scannerPreferOverdriveMediaMarker" :disabled="updatingServerSettings" @input="(val) => updateSettingsKey('scannerPreferOverdriveMediaMarker', val)" />
-        <ui-tooltip :text="tooltips.scannerPreferOverdriveMediaMarker">
-          <p class="pl-4 text-lg">
-            Scanner prefer Overdrive Media Markers for chapters
-            <span class="material-icons icon-text">info_outlined</span>
-          </p>
-        </ui-tooltip>
-      </div>
-
-      <div class="flex items-center py-2">
-        <ui-toggle-switch v-model="newServerSettings.scannerPreferOpfMetadata" :disabled="updatingServerSettings" @input="(val) => updateSettingsKey('scannerPreferOpfMetadata', val)" />
-        <ui-tooltip :text="tooltips.scannerPreferOpfMetadata">
-          <p class="pl-4 text-lg">
-            Scanner prefer OPF metadata
-            <span class="material-icons icon-text">info_outlined</span>
-          </p>
-        </ui-tooltip>
-      </div>
-
-      <div class="flex items-center py-2">
-        <ui-toggle-switch v-model="newServerSettings.scannerPreferMatchedMetadata" :disabled="updatingServerSettings" @input="(val) => updateSettingsKey('scannerPreferMatchedMetadata', val)" />
-        <ui-tooltip :text="tooltips.scannerPreferMatchedMetadata">
-          <p class="pl-4 text-lg">
-            Scanner prefer matched metadata
-            <span class="material-icons icon-text">info_outlined</span>
-          </p>
-        </ui-tooltip>
-      </div>
-
-      <div class="flex items-center py-2">
-        <ui-toggle-switch v-model="newServerSettings.scannerDisableWatcher" :disabled="updatingServerSettings" @input="(val) => updateSettingsKey('scannerDisableWatcher', val)" />
-        <ui-tooltip :text="tooltips.scannerDisableWatcher">
-          <p class="pl-4 text-lg">
-            Disable Watcher
-            <span class="material-icons icon-text">info_outlined</span>
-          </p>
-        </ui-tooltip>
-      </div>
-
-      <div class="flex items-center mb-2 mt-8">
-        <h1 class="text-xl font-semibold">Experimental Feature Settings</h1>
-      </div>
-
-      <div class="flex items-center py-2">
-        <ui-toggle-switch v-model="newServerSettings.enableEReader" :disabled="updatingServerSettings" @input="(val) => updateSettingsKey('enableEReader', val)" />
-        <ui-tooltip :text="tooltips.enableEReader">
-          <p class="pl-4 text-lg">
-            Enable e-reader for all users
-            <span class="material-icons icon-text">info_outlined</span>
-          </p>
-        </ui-tooltip>
+        <div class="flex items-center py-2">
+          <ui-toggle-switch v-model="newServerSettings.enableEReader" :disabled="updatingServerSettings" @input="(val) => updateSettingsKey('enableEReader', val)" />
+          <ui-tooltip :text="tooltips.enableEReader">
+            <p class="pl-4 text-lg">
+              Enable e-reader for all users
+              <span class="material-icons icon-text">info_outlined</span>
+            </p>
+          </ui-tooltip>
+        </div>
+        
       </div>
     </div>
 
@@ -207,23 +229,6 @@
 
     <div class="h-0.5 bg-primary bg-opacity-30 w-full" />
 
-    <div class="py-12 mb-4 opacity-60 hover:opacity-100">
-      <div class="flex items-center">
-        <div>
-          <div class="flex items-center">
-            <ui-toggle-switch v-model="showExperimentalFeatures" />
-            <ui-tooltip :text="tooltips.experimentalFeatures">
-              <p class="pl-4 text-lg">
-                Experimental Features
-                <a href="https://github.com/advplyr/audiobookshelf/discussions/75" target="_blank">
-                  <span class="material-icons icon-text">info_outlined</span>
-                </a>
-              </p>
-            </ui-tooltip>
-          </div>
-        </div>
-      </div>
-    </div>
 
     <prompt-dialog v-model="showConfirmPurgeCache" :width="675">
       <div class="px-4 w-full text-sm py-6 rounded-lg bg-bg shadow-lg border border-black-300">