From 4db34e0c56696dff2f2aa35c9cfa208df0ad32cf Mon Sep 17 00:00:00 2001
From: jmt-gh <13617455+jmt-gh@users.noreply.github.com>
Date: Fri, 25 Nov 2022 21:06:18 -0800
Subject: [PATCH 01/11] Add new settings content component

This commit adds a new settings conent component. This is a container
component for the settings pages, so that they all get the same
formatting by default. It handles the header text, description text, and
any "add new" plus button as needed.
---
 client/components/app/SettingsContent.vue | 48 +++++++++++++++++++++++
 1 file changed, 48 insertions(+)
 create mode 100644 client/components/app/SettingsContent.vue

diff --git a/client/components/app/SettingsContent.vue b/client/components/app/SettingsContent.vue
new file mode 100644
index 00000000..df079711
--- /dev/null
+++ b/client/components/app/SettingsContent.vue
@@ -0,0 +1,48 @@
+<template>
+  <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">{{ headerText }}</h1>
+
+      <div v-if="showAddButton" class="mx-2 w-7 h-7 flex items-center justify-center rounded-full cursor-pointer hover:bg-white hover:bg-opacity-10 text-center" @click="clicked">
+        <span class="material-icons" style="font-size: 1.4rem">add</span>
+      </div>
+    </div>
+
+    <p v-if="description" id="description" class="mb-6 text-gray-200" v-html="description" />
+
+    <slot></slot>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    headerText: String,
+    description: String,
+    note: String,
+    showAddButton: Boolean
+  },
+  methods: {
+    clicked() {
+      this.$emit('clicked');
+    }
+  }
+}
+</script>
+
+<style>
+#description a {
+  color: rgb(96 165 250);
+}
+#description a:hover {
+  color: rgb(147 197 253);
+  text-decoration-line: underline;
+}
+#description code {
+  font-size: 0.875rem;
+  border-radius: 6px;
+  background-color: rgb(82, 82, 82);
+  color: white;
+  padding: 2px 4px;
+}
+</style>
\ No newline at end of file

From 762748225d726ba7f123f7384424bc7ad89274c7 Mon Sep 17 00:00:00 2001
From: jmt-gh <13617455+jmt-gh@users.noreply.github.com>
Date: Fri, 25 Nov 2022 21:07:41 -0800
Subject: [PATCH 02/11] convert settings page to use settings content component

---
 client/pages/config/index.vue | 9 +++------
 1 file changed, 3 insertions(+), 6 deletions(-)

diff --git a/client/pages/config/index.vue b/client/pages/config/index.vue
index 5e25c8a6..ca65963b 100644
--- a/client/pages/config/index.vue
+++ b/client/pages/config/index.vue
@@ -1,10 +1,6 @@
 <template>
   <div>
-    <div class="bg-bg rounded-md shadow-lg border border-white border-opacity-5 p-4 mb-2">
-      <div class="mb-2">
-        <h1 class="text-xl">{{ $strings.HeaderSettings }}</h1>
-      </div>
-
+    <app-settings-content :headerText="$strings.HeaderSettings">
       <div class="lg:flex">
         <div class="flex-1">
           <div class="pt-4">
@@ -199,7 +195,7 @@
           </div> -->
         </div>
       </div>
-    </div>
+    </app-settings-content>
 
     <div class="h-0.5 bg-primary bg-opacity-30 w-full" />
 
@@ -209,6 +205,7 @@
       <ui-btn color="bg" small :padding-x="4" class="hidden lg:block mr-2" :loading="isPurgingCache" @click.stop="purgeItemsCache">{{ $strings.ButtonPurgeItemsCache }}</ui-btn>
       <ui-btn color="bg" small :padding-x="4" class="hidden lg:block mr-2" :loading="isResettingLibraryItems" @click="resetLibraryItems">{{ $strings.ButtonRemoveAllLibraryItems }}</ui-btn>
     </div>
+    
     <div class="flex items-center py-4">
       <div class="flex-grow" />
       <p class="pr-2 text-sm font-book text-yellow-400">

From e3ec5dd50650f041cf64f20172bc841f3b6eebc4 Mon Sep 17 00:00:00 2001
From: jmt-gh <13617455+jmt-gh@users.noreply.github.com>
Date: Fri, 25 Nov 2022 21:08:10 -0800
Subject: [PATCH 03/11] convert sessions page to use settings content component

---
 client/pages/config/sessions.vue | 10 ++++------
 1 file changed, 4 insertions(+), 6 deletions(-)

diff --git a/client/pages/config/sessions.vue b/client/pages/config/sessions.vue
index 4f51d511..f6a663e3 100644
--- a/client/pages/config/sessions.vue
+++ b/client/pages/config/sessions.vue
@@ -1,9 +1,7 @@
 <template>
-  <div class="w-full h-full">
-    <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">{{ $strings.HeaderListeningSessions }}</h1>
-      </div>
+  <div>
+    <app-settings-content :headerText="$strings.HeaderListeningSessions">
+
 
       <div class="flex justify-end mb-2">
         <ui-dropdown v-model="selectedUser" :items="userItems" :label="$strings.LabelFilterByUser" small class="max-w-48" @input="updateUserFilter" />
@@ -56,7 +54,7 @@
         </div>
       </div>
       <p v-else class="text-white text-opacity-50">{{ $strings.MessageNoListeningSessions }}</p>
-    </div>
+    </app-settings-content>
 
     <modals-listening-session-modal v-model="showSessionModal" :session="selectedSession" @removedSession="removedSession" />
   </div>

From d5a19f2b42cee0844170d9ddd30f5e8697a95061 Mon Sep 17 00:00:00 2001
From: jmt-gh <13617455+jmt-gh@users.noreply.github.com>
Date: Fri, 25 Nov 2022 21:08:54 -0800
Subject: [PATCH 04/11] Convert Library settings page to use new component

This commit moves the library settings page over to use the new
component. This page is 1 of 2 that actually has a component for itself,
so it was mostly just modifying that existing component and wrapping it
---
 client/components/tables/library/LibrariesTable.vue | 8 +-------
 client/pages/config/libraries.vue                   | 5 +++--
 2 files changed, 4 insertions(+), 9 deletions(-)

diff --git a/client/components/tables/library/LibrariesTable.vue b/client/components/tables/library/LibrariesTable.vue
index e40f6583..90e4cf1a 100644
--- a/client/components/tables/library/LibrariesTable.vue
+++ b/client/components/tables/library/LibrariesTable.vue
@@ -1,11 +1,5 @@
 <template>
-  <div id="librariesTable" 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">{{ $strings.HeaderLibraries }}</h1>
-      <div class="mx-2 w-7 h-7 flex items-center justify-center rounded-full cursor-pointer hover:bg-white hover:bg-opacity-10 text-center" @click="clickAddLibrary">
-        <span class="material-icons" style="font-size: 1.4rem">add</span>
-      </div>
-    </div>
+  <div id="librariesTable">
     <draggable v-if="libraryCopies.length" :list="libraryCopies" v-bind="dragOptions" class="list-group" handle=".drag-handle" draggable=".item" tag="div" @start="startDrag" @end="endDrag">
       <template v-for="library in libraryCopies">
         <div :key="library.id" class="item">
diff --git a/client/pages/config/libraries.vue b/client/pages/config/libraries.vue
index 0c4762ce..135bc425 100644
--- a/client/pages/config/libraries.vue
+++ b/client/pages/config/libraries.vue
@@ -1,7 +1,8 @@
 <template>
   <div>
-    <tables-library-libraries-table @showLibraryModal="setShowLibraryModal" />
-
+    <app-settings-content :headerText="$strings.HeaderLibraries" showAddButton=true @clicked="setShowLibraryModal">
+      <tables-library-libraries-table @showLibraryModal="setShowLibraryModal" />
+    </app-settings-content>
     <modals-libraries-edit-modal v-model="showLibraryModal" :library="selectedLibrary" />
   </div>
 </template>

From 5de6ee136ac820f640e0d11f64fff4ccba5379d5 Mon Sep 17 00:00:00 2001
From: jmt-gh <13617455+jmt-gh@users.noreply.github.com>
Date: Fri, 25 Nov 2022 21:10:05 -0800
Subject: [PATCH 05/11] Convert Users settings page to use new component

This commit moves the Users settings page to use the new Settings
Content component. Similar to the Libraries page, this one is already a
component. I mimiced the behavior of the existing libraries component to
get the same functionality needed here
---
 client/components/tables/UsersTable.vue |  9 +--------
 client/pages/config/users/index.vue     | 17 ++++++++++++++---
 2 files changed, 15 insertions(+), 11 deletions(-)

diff --git a/client/components/tables/UsersTable.vue b/client/components/tables/UsersTable.vue
index 8fb644ea..d243fe31 100644
--- a/client/components/tables/UsersTable.vue
+++ b/client/components/tables/UsersTable.vue
@@ -1,12 +1,5 @@
 <template>
-  <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">{{ $strings.HeaderUsers }}</h1>
-      <div class="mx-2 w-7 h-7 flex items-center justify-center rounded-full cursor-pointer hover:bg-white hover:bg-opacity-10 text-center" @click="clickAddUser">
-        <span class="material-icons" style="font-size: 1.4rem">add</span>
-      </div>
-    </div>
-
+  <div>
     <div class="text-center">
       <table id="accounts">
         <tr>
diff --git a/client/pages/config/users/index.vue b/client/pages/config/users/index.vue
index a47eedc4..7501ef0c 100644
--- a/client/pages/config/users/index.vue
+++ b/client/pages/config/users/index.vue
@@ -1,16 +1,27 @@
 <template>
   <div>
-    <tables-users-table />
+    <app-settings-content :headerText="$strings.HeaderUsers" showAddButton=true @clicked="setShowUserModal">
+      <tables-users-table />
+    </app-settings-content>
+    <modals-account-modal ref="accountModal" v-model="showAccountModal" :account="selectedAccount" />
   </div>
 </template>
 
 <script>
 export default {
   data() {
-    return {}
+    return {
+      selectedAccount: null,
+      showAccountModal: false,
+    }
   },
   computed: {},
-  methods: {},
+  methods: {
+    setShowUserModal(selectedAccount) {
+      this.selectedAccount = selectedAccount
+      this.showAccountModal = true
+    }
+  },
   mounted() {}
 }
 </script>
\ No newline at end of file

From a3ca6159fb480888d624b53e37cd764265138911 Mon Sep 17 00:00:00 2001
From: jmt-gh <13617455+jmt-gh@users.noreply.github.com>
Date: Fri, 25 Nov 2022 21:11:17 -0800
Subject: [PATCH 06/11] convert stats page to use new settings component

---
 client/pages/config/stats.vue | 117 +++++++++++++++++-----------------
 1 file changed, 58 insertions(+), 59 deletions(-)

diff --git a/client/pages/config/stats.vue b/client/pages/config/stats.vue
index 0c10dc44..ccd17e57 100644
--- a/client/pages/config/stats.vue
+++ b/client/pages/config/stats.vue
@@ -1,69 +1,68 @@
 <template>
-  <div class="bg-bg rounded-md shadow-lg border border-white border-opacity-5 p-4 mb-8">
-    <h1 class="text-xl">{{ $strings.HeaderYourStats }}</h1>
+  <div>
+    <app-settings-content :headerText="$strings.HeaderYourStats">
+      <div class="flex justify-center">
+        <div class="flex p-2">
+          <svg class="hidden sm:block h-14 w-14 lg:h-18 lg:w-18" viewBox="0 0 24 24">
+            <path
+              fill="currentColor"
+              d="M19 1L14 6V17L19 12.5V1M21 5V18.5C19.9 18.15 18.7 18 17.5 18C15.8 18 13.35 18.65 12 19.5V6C10.55 4.9 8.45 4.5 6.5 4.5C4.55 4.5 2.45 4.9 1 6V20.65C1 20.9 1.25 21.15 1.5 21.15C1.6 21.15 1.65 21.1 1.75 21.1C3.1 20.45 5.05 20 6.5 20C8.45 20 10.55 20.4 12 21.5C13.35 20.65 15.8 20 17.5 20C19.15 20 20.85 20.3 22.25 21.05C22.35 21.1 22.4 21.1 22.5 21.1C22.75 21.1 23 20.85 23 20.6V6C22.4 5.55 21.75 5.25 21 5M10 18.41C8.75 18.09 7.5 18 6.5 18C5.44 18 4.18 18.19 3 18.5V7.13C3.91 6.73 5.14 6.5 6.5 6.5C7.86 6.5 9.09 6.73 10 7.13V18.41Z"
+            />
+          </svg>
+          <div class="px-3">
+            <p class="text-4xl md:text-5xl font-bold">{{ userItemsFinished.length }}</p>
+            <p class="font-book text-xs md:text-sm text-white text-opacity-80">{{ $strings.LabelStatsItemsFinished }}</p>
+          </div>
+        </div>
 
-    <div class="flex justify-center">
-      <div class="flex p-2">
-        <svg class="hidden sm:block h-14 w-14 lg:h-18 lg:w-18" viewBox="0 0 24 24">
-          <path
-            fill="currentColor"
-            d="M19 1L14 6V17L19 12.5V1M21 5V18.5C19.9 18.15 18.7 18 17.5 18C15.8 18 13.35 18.65 12 19.5V6C10.55 4.9 8.45 4.5 6.5 4.5C4.55 4.5 2.45 4.9 1 6V20.65C1 20.9 1.25 21.15 1.5 21.15C1.6 21.15 1.65 21.1 1.75 21.1C3.1 20.45 5.05 20 6.5 20C8.45 20 10.55 20.4 12 21.5C13.35 20.65 15.8 20 17.5 20C19.15 20 20.85 20.3 22.25 21.05C22.35 21.1 22.4 21.1 22.5 21.1C22.75 21.1 23 20.85 23 20.6V6C22.4 5.55 21.75 5.25 21 5M10 18.41C8.75 18.09 7.5 18 6.5 18C5.44 18 4.18 18.19 3 18.5V7.13C3.91 6.73 5.14 6.5 6.5 6.5C7.86 6.5 9.09 6.73 10 7.13V18.41Z"
-          />
-        </svg>
-        <div class="px-3">
-          <p class="text-4xl md:text-5xl font-bold">{{ userItemsFinished.length }}</p>
-          <p class="font-book text-xs md:text-sm text-white text-opacity-80">{{ $strings.LabelStatsItemsFinished }}</p>
+        <div class="flex p-2">
+          <div class="hidden sm:block">
+            <span class="hidden sm:block material-icons-outlined text-5xl lg:text-6xl">event</span>
+          </div>
+          <div class="px-1">
+            <p class="text-4xl md:text-5xl font-bold">{{ totalDaysListened }}</p>
+            <p class="font-book text-xs md:text-sm text-white text-opacity-80">{{ $strings.LabelStatsDaysListened }}</p>
+          </div>
+        </div>
+
+        <div class="flex p-2">
+          <div class="hidden sm:block">
+            <span class="material-icons-outlined text-5xl lg:text-6xl">watch_later</span>
+          </div>
+          <div class="px-1">
+            <p class="text-4xl md:text-5xl font-bold">{{ totalMinutesListening }}</p>
+            <p class="font-book text-xs md:text-sm text-white text-opacity-80">{{ $strings.LabelStatsMinutesListening }}</p>
+          </div>
         </div>
       </div>
-
-      <div class="flex p-2">
-        <div class="hidden sm:block">
-          <span class="hidden sm:block material-icons-outlined text-5xl lg:text-6xl">event</span>
-        </div>
-        <div class="px-1">
-          <p class="text-4xl md:text-5xl font-bold">{{ totalDaysListened }}</p>
-          <p class="font-book text-xs md:text-sm text-white text-opacity-80">{{ $strings.LabelStatsDaysListened }}</p>
-        </div>
-      </div>
-
-      <div class="flex p-2">
-        <div class="hidden sm:block">
-          <span class="material-icons-outlined text-5xl lg:text-6xl">watch_later</span>
-        </div>
-        <div class="px-1">
-          <p class="text-4xl md:text-5xl font-bold">{{ totalMinutesListening }}</p>
-          <p class="font-book text-xs md:text-sm text-white text-opacity-80">{{ $strings.LabelStatsMinutesListening }}</p>
-        </div>
-      </div>
-    </div>
-    <div class="flex flex-col md:flex-row overflow-hidden max-w-full">
-      <stats-daily-listening-chart :listening-stats="listeningStats" class="origin-top-left transform scale-75 lg:scale-100" />
-      <div class="w-80 my-6 mx-auto">
-        <div class="flex mb-4 items-center">
-          <h1 class="text-2xl font-book">{{ $strings.HeaderStatsRecentSessions }}</h1>
-          <div class="flex-grow" />
-          <ui-btn :to="`/config/users/${user.id}/sessions`" class="text-xs" :padding-x="1.5" :padding-y="1">{{ $strings.ButtonViewAll }}</ui-btn>
-        </div>
-        <p v-if="!mostRecentListeningSessions.length">{{ $strings.MessageNoListeningSessions }}</p>
-        <template v-for="(item, index) in mostRecentListeningSessions">
-          <div :key="item.id" class="w-full py-0.5">
-            <div class="flex items-center mb-1">
-              <p class="text-sm font-book text-white text-opacity-70 w-8">{{ index + 1 }}.&nbsp;</p>
-              <div class="w-56">
-                <p class="text-sm font-book text-white text-opacity-80 truncate">{{ item.mediaMetadata ? item.mediaMetadata.title : '' }}</p>
-                <p class="text-xs text-white text-opacity-50">{{ $dateDistanceFromNow(item.updatedAt) }}</p>
-              </div>
-              <div class="flex-grow" />
-              <div class="w-18 text-right">
-                <p class="text-sm font-bold">{{ $elapsedPretty(item.timeListening) }}</p>
+      <div class="flex flex-col md:flex-row overflow-hidden max-w-full">
+        <stats-daily-listening-chart :listening-stats="listeningStats" class="origin-top-left transform scale-75 lg:scale-100" />
+        <div class="w-80 my-6 mx-auto">
+          <div class="flex mb-4 items-center">
+            <h1 class="text-2xl font-book">{{ $strings.HeaderStatsRecentSessions }}</h1>
+            <div class="flex-grow" />
+            <ui-btn :to="`/config/users/${user.id}/sessions`" class="text-xs" :padding-x="1.5" :padding-y="1">{{ $strings.ButtonViewAll }}</ui-btn>
+          </div>
+          <p v-if="!mostRecentListeningSessions.length">{{ $strings.MessageNoListeningSessions }}</p>
+          <template v-for="(item, index) in mostRecentListeningSessions">
+            <div :key="item.id" class="w-full py-0.5">
+              <div class="flex items-center mb-1">
+                <p class="text-sm font-book text-white text-opacity-70 w-8">{{ index + 1 }}.&nbsp;</p>
+                <div class="w-56">
+                  <p class="text-sm font-book text-white text-opacity-80 truncate">{{ item.mediaMetadata ? item.mediaMetadata.title : '' }}</p>
+                  <p class="text-xs text-white text-opacity-50">{{ $dateDistanceFromNow(item.updatedAt) }}</p>
+                </div>
+                <div class="flex-grow" />
+                <div class="w-18 text-right">
+                  <p class="text-sm font-bold">{{ $elapsedPretty(item.timeListening) }}</p>
+                </div>
               </div>
             </div>
-          </div>
-        </template>
+          </template>
+        </div>
       </div>
-    </div>
-
-    <stats-heatmap v-if="listeningStats" :days-listening="listeningStats.days" class="my-2" />
+      <stats-heatmap v-if="listeningStats" :days-listening="listeningStats.days" class="my-2" />
+    </app-settings-content>
   </div>
 </template>
 

From 087de03a1f793b2213f9577b4e20ccd0fe52aa96 Mon Sep 17 00:00:00 2001
From: jmt-gh <13617455+jmt-gh@users.noreply.github.com>
Date: Fri, 25 Nov 2022 21:11:32 -0800
Subject: [PATCH 07/11] convert log page to use new settings component

---
 client/pages/config/log.vue | 9 +++------
 1 file changed, 3 insertions(+), 6 deletions(-)

diff --git a/client/pages/config/log.vue b/client/pages/config/log.vue
index 12714121..aa172d2d 100644
--- a/client/pages/config/log.vue
+++ b/client/pages/config/log.vue
@@ -1,9 +1,6 @@
 <template>
-  <div class="w-full h-full">
-    <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">{{ $strings.HeaderLogs }}</h1>
-      </div>
+  <div>
+    <app-settings-content :header-text="$strings.HeaderLogs">
       <div class="flex justify-between mb-2 place-items-end">
         <ui-text-input ref="input" v-model="search" placeholder="Search filter.." @input="inputUpdate" clearable class="w-full sm:w-40 h-8 text-sm sm:mb-0" />
 
@@ -25,7 +22,7 @@
           <p class="text-xl text-gray-200 mb-2">{{ $strings.MessageNoLogs }}</p>
         </div>
       </div>
-    </div>
+    </app-settings-content>
   </div>
 </template>
 

From 000d7fd2498fc0bdd989e48d0198027a0810cd36 Mon Sep 17 00:00:00 2001
From: jmt-gh <13617455+jmt-gh@users.noreply.github.com>
Date: Fri, 25 Nov 2022 21:11:45 -0800
Subject: [PATCH 08/11] convert library stats page to use new settings
 component

---
 client/pages/config/library-stats.vue | 117 +++++++++++++-------------
 1 file changed, 59 insertions(+), 58 deletions(-)

diff --git a/client/pages/config/library-stats.vue b/client/pages/config/library-stats.vue
index 8fd69f69..d7dd33bc 100644
--- a/client/pages/config/library-stats.vue
+++ b/client/pages/config/library-stats.vue
@@ -1,66 +1,67 @@
 <template>
-  <div class="bg-bg rounded-md shadow-lg border border-white border-opacity-5 p-4 mb-8">
-    <h1 class="text-xl">{{ $strings.HeaderLibraryStats }}: {{ currentLibraryName }}</h1>
-    <stats-preview-icons v-if="totalItems" :library-stats="libraryStats" />
+  <div>
+    <app-settings-content :headerText="$strings.HeaderLibraryStats + ': ' + currentLibraryName">
+      <stats-preview-icons v-if="totalItems" :library-stats="libraryStats" />
 
-    <div class="flex lg:flex-row flex-wrap justify-between flex-col mt-8">
-      <div class="w-80 my-6 mx-auto">
-        <h1 class="text-2xl mb-4 font-book">{{ $strings.HeaderStatsTop5Genres }}</h1>
-        <p v-if="!top5Genres.length">{{ $strings.MessageNoGenres }}</p>
-        <template v-for="genre in top5Genres">
-          <div :key="genre.genre" class="w-full py-2">
-            <div class="flex items-end mb-1">
-              <p class="text-2xl font-bold">{{ Math.round((100 * genre.count) / totalItems) }}&nbsp;%</p>
-              <div class="flex-grow" />
-              <nuxt-link :to="`/library/${currentLibraryId}/bookshelf?filter=genres.${$encode(genre.genre)}`" class="text-base font-book text-white text-opacity-70 hover:underline">
-                {{ genre.genre }}
-              </nuxt-link>
+      <div class="flex lg:flex-row flex-wrap justify-between flex-col mt-8">
+        <div class="w-80 my-6 mx-auto">
+          <h1 class="text-2xl mb-4 font-book">{{ $strings.HeaderStatsTop5Genres }}</h1>
+          <p v-if="!top5Genres.length">{{ $strings.MessageNoGenres }}</p>
+          <template v-for="genre in top5Genres">
+            <div :key="genre.genre" class="w-full py-2">
+              <div class="flex items-end mb-1">
+                <p class="text-2xl font-bold">{{ Math.round((100 * genre.count) / totalItems) }}&nbsp;%</p>
+                <div class="flex-grow" />
+                <nuxt-link :to="`/library/${currentLibraryId}/bookshelf?filter=genres.${$encode(genre.genre)}`" class="text-base font-book text-white text-opacity-70 hover:underline">
+                  {{ genre.genre }}
+                </nuxt-link>
+              </div>
+              <div class="w-full rounded-full h-3 bg-primary bg-opacity-50 overflow-hidden">
+                <div class="bg-yellow-400 h-full rounded-full" :style="{ width: Math.round((100 * genre.count) / totalItems) + '%' }" />
+              </div>
             </div>
-            <div class="w-full rounded-full h-3 bg-primary bg-opacity-50 overflow-hidden">
-              <div class="bg-yellow-400 h-full rounded-full" :style="{ width: Math.round((100 * genre.count) / totalItems) + '%' }" />
+          </template>
+        </div>
+        <div class="w-80 my-6 mx-auto">
+          <h1 class="text-2xl mb-4 font-book">{{ $strings.HeaderStatsTop10Authors }}</h1>
+          <p v-if="!top10Authors.length">{{ $strings.MessageNoAuthors }}</p>
+          <template v-for="(author, index) in top10Authors">
+            <div :key="author.id" class="w-full py-2">
+              <div class="flex items-center mb-1">
+                <p class="text-sm font-book text-white text-opacity-70 w-36 pr-2 truncate">
+                  {{ index + 1 }}.&nbsp;&nbsp;&nbsp;&nbsp;<nuxt-link :to="`/library/${currentLibraryId}/bookshelf?filter=authors.${$encode(author.id)}`" class="hover:underline">{{ author.name }}</nuxt-link>
+                </p>
+                <div class="flex-grow rounded-full h-2.5 bg-primary bg-opacity-0 overflow-hidden">
+                  <div class="bg-yellow-400 h-full rounded-full" :style="{ width: Math.round((100 * author.count) / mostUsedAuthorCount) + '%' }" />
+                </div>
+                <div class="w-4 ml-3">
+                  <p class="text-sm font-bold">{{ author.count }}</p>
+                </div>
+              </div>
             </div>
-          </div>
-        </template>
+          </template>
+        </div>
+        <div class="w-80 my-6 mx-auto">
+          <h1 class="text-2xl mb-4 font-book">{{ $strings.HeaderStatsLongestItems }}</h1>
+          <p v-if="!top10LongestItems.length">{{ $strings.MessageNoItems }}</p>
+          <template v-for="(ab, index) in top10LongestItems">
+            <div :key="index" class="w-full py-2">
+              <div class="flex items-center mb-1">
+                <p class="text-sm font-book text-white text-opacity-70 w-44 pr-2 truncate">
+                  {{ index + 1 }}.&nbsp;&nbsp;&nbsp;&nbsp;<nuxt-link :to="`/item/${ab.id}`" class="hover:underline">{{ ab.title }}</nuxt-link>
+                </p>
+                <div class="flex-grow rounded-full h-2.5 bg-primary bg-opacity-0 overflow-hidden">
+                  <div class="bg-yellow-400 h-full rounded-full" :style="{ width: Math.round((100 * ab.duration) / longestItemDuration) + '%' }" />
+                </div>
+                <div class="w-4 ml-3">
+                  <p class="text-sm font-bold">{{ (ab.duration / 3600).toFixed(1) }}</p>
+                </div>
+              </div>
+            </div>
+          </template>
+        </div>
       </div>
-      <div class="w-80 my-6 mx-auto">
-        <h1 class="text-2xl mb-4 font-book">{{ $strings.HeaderStatsTop10Authors }}</h1>
-        <p v-if="!top10Authors.length">{{ $strings.MessageNoAuthors }}</p>
-        <template v-for="(author, index) in top10Authors">
-          <div :key="author.id" class="w-full py-2">
-            <div class="flex items-center mb-1">
-              <p class="text-sm font-book text-white text-opacity-70 w-36 pr-2 truncate">
-                {{ index + 1 }}.&nbsp;&nbsp;&nbsp;&nbsp;<nuxt-link :to="`/library/${currentLibraryId}/bookshelf?filter=authors.${$encode(author.id)}`" class="hover:underline">{{ author.name }}</nuxt-link>
-              </p>
-              <div class="flex-grow rounded-full h-2.5 bg-primary bg-opacity-0 overflow-hidden">
-                <div class="bg-yellow-400 h-full rounded-full" :style="{ width: Math.round((100 * author.count) / mostUsedAuthorCount) + '%' }" />
-              </div>
-              <div class="w-4 ml-3">
-                <p class="text-sm font-bold">{{ author.count }}</p>
-              </div>
-            </div>
-          </div>
-        </template>
-      </div>
-      <div class="w-80 my-6 mx-auto">
-        <h1 class="text-2xl mb-4 font-book">{{ $strings.HeaderStatsLongestItems }}</h1>
-        <p v-if="!top10LongestItems.length">{{ $strings.MessageNoItems }}</p>
-        <template v-for="(ab, index) in top10LongestItems">
-          <div :key="index" class="w-full py-2">
-            <div class="flex items-center mb-1">
-              <p class="text-sm font-book text-white text-opacity-70 w-44 pr-2 truncate">
-                {{ index + 1 }}.&nbsp;&nbsp;&nbsp;&nbsp;<nuxt-link :to="`/item/${ab.id}`" class="hover:underline">{{ ab.title }}</nuxt-link>
-              </p>
-              <div class="flex-grow rounded-full h-2.5 bg-primary bg-opacity-0 overflow-hidden">
-                <div class="bg-yellow-400 h-full rounded-full" :style="{ width: Math.round((100 * ab.duration) / longestItemDuration) + '%' }" />
-              </div>
-              <div class="w-4 ml-3">
-                <p class="text-sm font-bold">{{ (ab.duration / 3600).toFixed(1) }}</p>
-              </div>
-            </div>
-          </div>
-        </template>
-      </div>
-    </div>
+    </app-settings-content>
   </div>
 </template>
 

From 61f805549357443e76722bf8ed0fc1c98f4394f8 Mon Sep 17 00:00:00 2001
From: jmt-gh <13617455+jmt-gh@users.noreply.github.com>
Date: Fri, 25 Nov 2022 21:12:12 -0800
Subject: [PATCH 09/11] convert notifications page to use new settings
 component

---
 client/pages/config/notifications.vue | 28 +++------------------------
 1 file changed, 3 insertions(+), 25 deletions(-)

diff --git a/client/pages/config/notifications.vue b/client/pages/config/notifications.vue
index f09cf922..cd434db8 100644
--- a/client/pages/config/notifications.vue
+++ b/client/pages/config/notifications.vue
@@ -1,11 +1,6 @@
 <template>
   <div>
-    <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">{{ $strings.HeaderAppriseNotificationSettings }}</h1>
-      </div>
-      <p id="appriseDescription" class="mb-6 text-gray-200" v-html="$strings.MessageAppriseDescription" />
-
+    <app-settings-content :header-text="$strings.HeaderAppriseNotificationSettings" :description="$strings.MessageAppriseDescription">
       <form @submit.prevent="submitForm">
         <ui-text-input-with-label ref="apiUrlInput" v-model="appriseApiUrl" :disabled="savingSettings" label="Apprise API Url" class="mb-2" />
 
@@ -43,7 +38,7 @@
       <template v-for="notification in notifications">
         <cards-notification-card :key="notification.id" :notification="notification" @update="updateSettings" @edit="editNotification" />
       </template>
-    </div>
+    </app-settings-content>
 
     <modals-notification-edit-modal v-model="showEditModal" :notification="selectedNotification" :notification-data="notificationData" @update="updateSettings" />
   </div>
@@ -172,21 +167,4 @@ export default {
     this.$root.socket.off('notifications_updated', this.notificationsUpdated)
   }
 }
-</script>
-
-<style>
-#appriseDescription a {
-  color: rgb(96 165 250);
-}
-#appriseDescription a:hover {
-  color: rgb(147 197 253);
-  text-decoration-line: underline;
-}
-#appriseDescription code {
-  font-size: 0.875rem;
-  border-radius: 6px;
-  background-color: rgb(82, 82, 82);
-  color: white;
-  padding: 2px 4px;
-}
-</style>
\ No newline at end of file
+</script>
\ No newline at end of file

From c62a1dfff0f8a3a9c49cf4203fa7fa431d8209c6 Mon Sep 17 00:00:00 2001
From: jmt-gh <13617455+jmt-gh@users.noreply.github.com>
Date: Fri, 25 Nov 2022 21:12:23 -0800
Subject: [PATCH 10/11] Convert Backup page to use new settings component

This commit moves the Backup page to use the new settings component.

As part of this, I had to do a little bit of modification for some of
the strings, as I cleaned up the way the strings are laid out on the
page.
---
 client/pages/config/backups.vue | 15 +++------------
 client/strings/de.json          |  3 +--
 client/strings/en-us.json       |  5 ++---
 client/strings/es.json          |  5 ++---
 client/strings/fr.json          |  3 +--
 client/strings/hr.json          |  5 ++---
 client/strings/it.json          |  3 +--
 client/strings/pl.json          |  5 ++---
 client/strings/zh-cn.json       |  3 +--
 9 files changed, 15 insertions(+), 32 deletions(-)

diff --git a/client/pages/config/backups.vue b/client/pages/config/backups.vue
index edb9fe08..36071aa3 100644
--- a/client/pages/config/backups.vue
+++ b/client/pages/config/backups.vue
@@ -1,13 +1,6 @@
 <template>
-  <div class="w-full h-full">
-    <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">{{ $strings.HeaderBackups }}</h1>
-      </div>
-
-      <p class="text-base mb-2 text-gray-300">{{ $strings.MessageBackupsDescription }} <span class="font-mono text-gray-100">/metadata/items</span> & <span class="font-mono text-gray-100">/metadata/authors</span>.</p>
-      <p class="text-base mb-4 text-gray-300">{{ $strings.MessageBackupsNote }}</p>
-
+  <div>
+    <app-settings-content :header-text="$strings.HeaderBackups" :description="$strings.MessageBackupsDescription">
       <div class="flex items-center py-2">
         <ui-toggle-switch v-model="enableBackups" small :disabled="updatingServerSettings" @input="updateBackupsSettings" />
         <ui-tooltip :text="$strings.LabelBackupsEnableAutomaticBackupsHelp">
@@ -40,9 +33,7 @@
       </div>
 
       <tables-backups-table />
-    </div>
-
-    <modals-backup-schedule-modal v-model="showCronBuilder" :cron-expression.sync="cronExpression" />
+    </app-settings-content>
   </div>
 </template>
 
diff --git a/client/strings/de.json b/client/strings/de.json
index 2e248058..fc8af9f2 100644
--- a/client/strings/de.json
+++ b/client/strings/de.json
@@ -407,8 +407,7 @@
   "LabelYourBookmarks": "Lesezeichen",
   "LabelYourProgress": "Fortschritt",
   "MessageAppriseDescription": "Um diese Funktion nutzen zu können, müssen Sie eine Instanz von <a href=\"https://github.com/caronc/apprise-api\" target=\"_blank\">Apprise API</a> laufen haben oder eine API verwenden welche dieselbe Anfragen bearbeiten kann. <br />Die Apprise API Url muss der vollständige URL-Pfad sein, an den die Benachrichtigung gesendet werden soll, z.B. wenn Ihre API-Instanz unter <code>http://192.168.1.1:8337</code> läuft, würden Sie <code>http://192.168.1.1:8337/notify</code> eingeben.",
-  "MessageBackupsDescription": "In Sicherungen werden Benutzer, Benutzerfortschritte, Details zu den Bibliotheksobjekten, Servereinstellungen und Bilder gespeichert",
-  "MessageBackupsNote": "Die Sicherungen enthalten keine Dateien welche in Ihren Bibliotheksordnern gespeichert sind.",
+  "MessageBackupsDescription": "In Sicherungen werden Benutzer, Benutzerfortschritte, Details zu den Bibliotheksobjekten, Servereinstellungen und Bilder gespeichert <code>/metadata/items</code> & <code>/metadata/authors</code>. Die Sicherungen enthalten keine Dateien welche in Ihren Bibliotheksordnern gespeichert sind.",
   "MessageBatchQuickMatchDescription": "Der Schnellabgleich versucht, fehlende Titelbilder und Metadaten für die ausgewählten Artikel hinzuzufügen. Aktivieren Sie die nachstehenden Optionen, damit der Schnellabgleich vorhandene Titelbilder und/oder Metadaten überschreiben kann.",
   "MessageBookshelfNoCollections": "Es wurden noch keine Sammlungen erstellt",
   "MessageBookshelfNoResultsForFilter": "Keine Ergebnisse für filter \"{0}: {1}\"",
diff --git a/client/strings/en-us.json b/client/strings/en-us.json
index 2d450958..d92fd606 100644
--- a/client/strings/en-us.json
+++ b/client/strings/en-us.json
@@ -407,8 +407,7 @@
   "LabelYourBookmarks": "Your Bookmarks",
   "LabelYourProgress": "Your Progress",
   "MessageAppriseDescription": "To use this feature you will need to have an instance of <a href=\"https://github.com/caronc/apprise-api\" target=\"_blank\">Apprise API</a> running or an api that will handle those same requests. <br />The Apprise API Url should be the full URL path to send the notification, e.g., if your API instance is served at <code>http://192.168.1.1:8337</code> then you would put <code>http://192.168.1.1:8337/notify</code>.",
-  "MessageBackupsDescription": "Backups include users, user progress, library item details, server settings, and images stored in",
-  "MessageBackupsNote": "Backups do not include any files stored in your library folders.",
+  "MessageBackupsDescription": "Backups include users, user progress, library item details, server settings, and images stored in <code>/metadata/items</code> & <code>/metadata/authors</code>. Backups <strong>do not</strong> include any files stored in your library folders.",
   "MessageBatchQuickMatchDescription": "Quick Match will attempt to add missing covers and metadata for the selected items. Enable the options below to allow Quick Match to overwrite existing covers and/or metadata.",
   "MessageBookshelfNoCollections": "You haven't made any collections yet",
   "MessageBookshelfNoResultsForFilter": "No Results for filter \"{0}: {1}\"",
@@ -571,4 +570,4 @@
   "WeekdayThursday": "Thursday",
   "WeekdayTuesday": "Tuesday",
   "WeekdayWednesday": "Wednesday"
-}
\ No newline at end of file
+}
diff --git a/client/strings/es.json b/client/strings/es.json
index 2d450958..d92fd606 100644
--- a/client/strings/es.json
+++ b/client/strings/es.json
@@ -407,8 +407,7 @@
   "LabelYourBookmarks": "Your Bookmarks",
   "LabelYourProgress": "Your Progress",
   "MessageAppriseDescription": "To use this feature you will need to have an instance of <a href=\"https://github.com/caronc/apprise-api\" target=\"_blank\">Apprise API</a> running or an api that will handle those same requests. <br />The Apprise API Url should be the full URL path to send the notification, e.g., if your API instance is served at <code>http://192.168.1.1:8337</code> then you would put <code>http://192.168.1.1:8337/notify</code>.",
-  "MessageBackupsDescription": "Backups include users, user progress, library item details, server settings, and images stored in",
-  "MessageBackupsNote": "Backups do not include any files stored in your library folders.",
+  "MessageBackupsDescription": "Backups include users, user progress, library item details, server settings, and images stored in <code>/metadata/items</code> & <code>/metadata/authors</code>. Backups <strong>do not</strong> include any files stored in your library folders.",
   "MessageBatchQuickMatchDescription": "Quick Match will attempt to add missing covers and metadata for the selected items. Enable the options below to allow Quick Match to overwrite existing covers and/or metadata.",
   "MessageBookshelfNoCollections": "You haven't made any collections yet",
   "MessageBookshelfNoResultsForFilter": "No Results for filter \"{0}: {1}\"",
@@ -571,4 +570,4 @@
   "WeekdayThursday": "Thursday",
   "WeekdayTuesday": "Tuesday",
   "WeekdayWednesday": "Wednesday"
-}
\ No newline at end of file
+}
diff --git a/client/strings/fr.json b/client/strings/fr.json
index 81406f4e..81c2ec58 100644
--- a/client/strings/fr.json
+++ b/client/strings/fr.json
@@ -407,8 +407,7 @@
   "LabelYourBookmarks": "Vos Signets",
   "LabelYourProgress": "Votre Progression",
   "MessageAppriseDescription": "Nécessite une instance d'<a href=\"https://github.com/caronc/apprise-api\" target=\"_blank\">API Apprise</a> pour utiliser cette fonctionnalité ou une api qui prend en charge les mêmes requêtes. <br />L'URL de l'API Apprise doit comprendre le chemin complet pour envoyer la notification. Par exemple, si votre instance écoute sur <code>http://192.168.1.1:8337</code> alors vous devez mettre <code>http://192.168.1.1:8337/notify</code>.",
-  "MessageBackupsDescription": "Les Sauvegardes incluent les utilisateurs, la progression de lecture par utilisateur, les détails des articles des bibliothèques, les paramètres du serveur et les images sauvegardées.",
-  "MessageBackupsNote": "Les Sauvegardes n'incluent pas les fichiers de votre bibliothèque.",
+  "MessageBackupsDescription": "Les Sauvegardes incluent les utilisateurs, la progression de lecture par utilisateur, les détails des articles des bibliothèques, les paramètres du serveur et les images sauvegardées. Les Sauvegardes n'incluent pas les fichiers de votre bibliothèque.",
   "MessageBatchQuickMatchDescription": "La Recherche par Correspondance Rapide tentera d'ajouter les couvertures et les métadonnées manquantes pour les articles sélectionnés. Activer l'option suivante pour autoriser la Recherche par Correspondance à écraser les données existantes.",
   "MessageBookshelfNoCollections": "Vous n'avez pas encore de collections",
   "MessageBookshelfNoResultsForFilter": "Aucun résultat pour le filtre \"{0}: {1}\"",
diff --git a/client/strings/hr.json b/client/strings/hr.json
index 00f83abf..070f998a 100644
--- a/client/strings/hr.json
+++ b/client/strings/hr.json
@@ -407,8 +407,7 @@
   "LabelYourBookmarks": "Tvoje knjižne oznake",
   "LabelYourProgress": "Tvoj napredak",
   "MessageAppriseDescription": "To use this feature you will need to have an instance of <a href=\"https://github.com/caronc/apprise-api\" target=\"_blank\">Apprise API</a> running or an api that will handle those same requests. <br />The Apprise API Url should be the full URL path to send the notification, e.g., if your API instance is served at <code>http://192.168.1.1:8337</code> then you would put <code>http://192.168.1.1:8337/notify</code>.",
-  "MessageBackupsDescription": "Backups uključuju korisnike, korisnikov napredak, detalje stavki iz biblioteke, postavke server i slike iz",
-  "MessageBackupsNote": "Backups ne uključuju nijedne datoteke koje su u folderima biblioteke.",
+  "MessageBackupsDescription": "Backups uključuju korisnike, korisnikov napredak, detalje stavki iz biblioteke, postavke server i slike iz <code>/metadata/items</code> & <code>/metadata/authors</code>. Backups ne uključuju nijedne datoteke koje su u folderima biblioteke.",
   "MessageBatchQuickMatchDescription": "Quick Match će probati dodati nedostale covere i metapodatke za odabrane stavke. Uključi postavke ispod da omočutie Quick Mathchu da zamijeni postojeće covere i/ili metapodatke.",
   "MessageBookshelfNoCollections": "You haven't made any collections yet",
   "MessageBookshelfNoResultsForFilter": "No Results for filter \"{0}: {1}\"",
@@ -571,4 +570,4 @@
   "WeekdayThursday": "Četvrtak",
   "WeekdayTuesday": "Utorak",
   "WeekdayWednesday": "Srijeda"
-}
\ No newline at end of file
+}
diff --git a/client/strings/it.json b/client/strings/it.json
index 113dc43e..f0f5f70c 100644
--- a/client/strings/it.json
+++ b/client/strings/it.json
@@ -407,8 +407,7 @@
   "LabelYourBookmarks": "I tuoi Preferiti",
   "LabelYourProgress": "Completato al",
   "MessageAppriseDescription": "Per utilizzare questa funzione è necessario disporre di un'istanza di <a href=\"https://github.com/caronc/apprise-api\" target=\"_blank\">Apprise API</a> in esecuzione o un'API che gestirà quelle stesse richieste. <br />L'API Url dovrebbe essere il percorso URL completo per inviare la notifica, ad esempio se la tua istanza API è servita cosi .<code>http://192.168.1.1:8337</code> Allora dovrai mettere <code>http://192.168.1.1:8337/notify</code>.",
-  "MessageBackupsDescription": "I backup includono utenti, progressi degli utenti, dettagli sugli elementi della libreria, impostazioni del server e immagini archiviate in",
-  "MessageBackupsNote": "I backup non includono i file archiviati nelle cartelle della libreria.",
+  "MessageBackupsDescription": "I backup includono utenti, progressi degli utenti, dettagli sugli elementi della libreria, impostazioni del server e immagini archiviate in <code>/metadata/items</code> & <code>/metadata/authors</code>. I backup non includono i file archiviati nelle cartelle della libreria.",
   "MessageBatchQuickMatchDescription": "Quick Match tenterà di aggiungere copertine e metadati mancanti per gli elementi selezionati. Attiva l'opzione per consentire a Quick Match di sovrascrivere copertine e/o metadati esistenti.",
   "MessageBookshelfNoCollections": "Non hai ancora creato nessuna raccolta ",
   "MessageBookshelfNoResultsForFilter": "Nessul risultato per il filtro \"{0}: {1}\"",
diff --git a/client/strings/pl.json b/client/strings/pl.json
index a9fdffb0..bd5cafaa 100644
--- a/client/strings/pl.json
+++ b/client/strings/pl.json
@@ -407,8 +407,7 @@
   "LabelYourBookmarks": "Twoje zakładki",
   "LabelYourProgress": "Twój postęp",
   "MessageAppriseDescription": "Aby użyć tej funkcji, konieczne jest posiadanie instancji <a href=\"https://github.com/caronc/apprise-api\" target=\"_blank\">Apprise API</a> albo innego rozwiązania, które obsługuje schemat zapytań Apprise. <br />URL do interfejsu API powinno być całkowitą ścieżką, np., jeśli Twoje API do powiadomień jest dostępne pod adresem <code>http://192.168.1.1:8337</code> to wpisany tutaj URL powinien mieć postać: <code>http://192.168.1.1:8337/notify</code>.",
-  "MessageBackupsDescription": "Kopie zapasowe obejmują użytkowników, postępy użytkowników, szczegóły pozycji biblioteki, ustawienia serwera i obrazy przechowywane w",
-  "MessageBackupsNote": "Kopie zapasowe nie obejmują żadnych plików przechowywanych w folderach biblioteki.",
+  "MessageBackupsDescription": "Kopie zapasowe obejmują użytkowników, postępy użytkowników, szczegóły pozycji biblioteki, ustawienia serwera i obrazy przechowywane w <code>/metadata/items</code> & <code>/metadata/authors</code>. Kopie zapasowe nie obejmują żadnych plików przechowywanych w folderach biblioteki.",
   "MessageBatchQuickMatchDescription": "Quick Match będzie próbował dodać brakujące okładki i metadane dla wybranych elementów. Włącz poniższe opcje, aby umożliwić Quick Match nadpisanie istniejących okładek i/lub metadanych.",
   "MessageBookshelfNoCollections": "Nie posiadasz jeszcze żadnych kolekcji",
   "MessageBookshelfNoResultsForFilter": "Nie znaleziono żadnych pozycji przy aktualnym filtrowaniu \"{0}: {1}\"",
@@ -571,4 +570,4 @@
   "WeekdayThursday": "Czwartek",
   "WeekdayTuesday": "Wtorek",
   "WeekdayWednesday": "Środa"
-}
\ No newline at end of file
+}
diff --git a/client/strings/zh-cn.json b/client/strings/zh-cn.json
index 73c5a33c..11d9aafb 100644
--- a/client/strings/zh-cn.json
+++ b/client/strings/zh-cn.json
@@ -407,8 +407,7 @@
   "LabelYourBookmarks": "你的书签",
   "LabelYourProgress": "你的进度",
   "MessageAppriseDescription": "要使用此功能，您需要运行一个 <a href=\"https://github.com/caronc/apprise-api\" target=\"_blank\">Apprise API</a> 实例或一个可以处理这些相同请求的 API. <br />Apprise API Url 应该是发送通知的完整 URL 路径, 例如: 如果你的 API 实例运行在 <code>http://192.168.1.1:8337</code>, 那么你可以输入 <code>http://192.168.1.1:8337/notify</code>.",
-  "MessageBackupsDescription": "备份包括用户, 用户进度, 媒体库项目详细信息, 服务器设置和图像, 存储在",
-  "MessageBackupsNote": "备份不包括存储在您的媒体库文件夹中的任何文件.",
+  "MessageBackupsDescription": "备份包括用户, 用户进度, 媒体库项目详细信息, 服务器设置和图像, 存储在 <code>/metadata/items</code> & <code>/metadata/authors</code>. 备份不包括存储在您的媒体库文件夹中的任何文件.",
   "MessageBatchQuickMatchDescription": "快速匹配将尝试为所选项目添加缺少的封面和元数据. 启用以下选项以允许快速匹配覆盖现有封面和或元数据.",
   "MessageBookshelfNoCollections": "你尚未进行任何收藏",
   "MessageBookshelfNoResultsForFilter": "过滤器无结果 \"{0}: {1}\"",

From 53f73e12014946bfa137ceeda0ba2a27e5f4b951 Mon Sep 17 00:00:00 2001
From: advplyr <advplyr@protonmail.com>
Date: Sat, 26 Nov 2022 11:08:09 -0600
Subject: [PATCH 11/11] Settings content updates

---
 client/components/app/SettingsContent.vue | 10 +++++-----
 client/pages/config/index.vue             |  4 ++--
 client/pages/config/libraries.vue         |  2 +-
 client/pages/config/library-stats.vue     |  2 +-
 client/pages/config/sessions.vue          |  4 +---
 client/pages/config/stats.vue             |  2 +-
 client/pages/config/users/index.vue       |  4 ++--
 7 files changed, 13 insertions(+), 15 deletions(-)

diff --git a/client/components/app/SettingsContent.vue b/client/components/app/SettingsContent.vue
index df079711..4c1f24ed 100644
--- a/client/components/app/SettingsContent.vue
+++ b/client/components/app/SettingsContent.vue
@@ -8,7 +8,7 @@
       </div>
     </div>
 
-    <p v-if="description" id="description" class="mb-6 text-gray-200" v-html="description" />
+    <p v-if="description" id="settings-description" class="mb-6 text-gray-200" v-html="description" />
 
     <slot></slot>
   </div>
@@ -24,21 +24,21 @@ export default {
   },
   methods: {
     clicked() {
-      this.$emit('clicked');
+      this.$emit('clicked')
     }
   }
 }
 </script>
 
 <style>
-#description a {
+#settings-description a {
   color: rgb(96 165 250);
 }
-#description a:hover {
+#settings-description a:hover {
   color: rgb(147 197 253);
   text-decoration-line: underline;
 }
-#description code {
+#settings-description code {
   font-size: 0.875rem;
   border-radius: 6px;
   background-color: rgb(82, 82, 82);
diff --git a/client/pages/config/index.vue b/client/pages/config/index.vue
index ca65963b..9f466763 100644
--- a/client/pages/config/index.vue
+++ b/client/pages/config/index.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <app-settings-content :headerText="$strings.HeaderSettings">
+    <app-settings-content :header-text="$strings.HeaderSettings">
       <div class="lg:flex">
         <div class="flex-1">
           <div class="pt-4">
@@ -205,7 +205,7 @@
       <ui-btn color="bg" small :padding-x="4" class="hidden lg:block mr-2" :loading="isPurgingCache" @click.stop="purgeItemsCache">{{ $strings.ButtonPurgeItemsCache }}</ui-btn>
       <ui-btn color="bg" small :padding-x="4" class="hidden lg:block mr-2" :loading="isResettingLibraryItems" @click="resetLibraryItems">{{ $strings.ButtonRemoveAllLibraryItems }}</ui-btn>
     </div>
-    
+
     <div class="flex items-center py-4">
       <div class="flex-grow" />
       <p class="pr-2 text-sm font-book text-yellow-400">
diff --git a/client/pages/config/libraries.vue b/client/pages/config/libraries.vue
index 135bc425..6f892a96 100644
--- a/client/pages/config/libraries.vue
+++ b/client/pages/config/libraries.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <app-settings-content :headerText="$strings.HeaderLibraries" showAddButton=true @clicked="setShowLibraryModal">
+    <app-settings-content :header-text="$strings.HeaderLibraries" show-add-button @clicked="setShowLibraryModal">
       <tables-library-libraries-table @showLibraryModal="setShowLibraryModal" />
     </app-settings-content>
     <modals-libraries-edit-modal v-model="showLibraryModal" :library="selectedLibrary" />
diff --git a/client/pages/config/library-stats.vue b/client/pages/config/library-stats.vue
index d7dd33bc..181946f6 100644
--- a/client/pages/config/library-stats.vue
+++ b/client/pages/config/library-stats.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <app-settings-content :headerText="$strings.HeaderLibraryStats + ': ' + currentLibraryName">
+    <app-settings-content :header-text="$strings.HeaderLibraryStats + ': ' + currentLibraryName">
       <stats-preview-icons v-if="totalItems" :library-stats="libraryStats" />
 
       <div class="flex lg:flex-row flex-wrap justify-between flex-col mt-8">
diff --git a/client/pages/config/sessions.vue b/client/pages/config/sessions.vue
index f6a663e3..2e417ce5 100644
--- a/client/pages/config/sessions.vue
+++ b/client/pages/config/sessions.vue
@@ -1,8 +1,6 @@
 <template>
   <div>
-    <app-settings-content :headerText="$strings.HeaderListeningSessions">
-
-
+    <app-settings-content :header-text="$strings.HeaderListeningSessions">
       <div class="flex justify-end mb-2">
         <ui-dropdown v-model="selectedUser" :items="userItems" :label="$strings.LabelFilterByUser" small class="max-w-48" @input="updateUserFilter" />
       </div>
diff --git a/client/pages/config/stats.vue b/client/pages/config/stats.vue
index ccd17e57..70f5058f 100644
--- a/client/pages/config/stats.vue
+++ b/client/pages/config/stats.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <app-settings-content :headerText="$strings.HeaderYourStats">
+    <app-settings-content :header-text="$strings.HeaderYourStats">
       <div class="flex justify-center">
         <div class="flex p-2">
           <svg class="hidden sm:block h-14 w-14 lg:h-18 lg:w-18" viewBox="0 0 24 24">
diff --git a/client/pages/config/users/index.vue b/client/pages/config/users/index.vue
index 7501ef0c..c6279b47 100644
--- a/client/pages/config/users/index.vue
+++ b/client/pages/config/users/index.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <app-settings-content :headerText="$strings.HeaderUsers" showAddButton=true @clicked="setShowUserModal">
+    <app-settings-content :header-text="$strings.HeaderUsers" show-add-button @clicked="setShowUserModal">
       <tables-users-table />
     </app-settings-content>
     <modals-account-modal ref="accountModal" v-model="showAccountModal" :account="selectedAccount" />
@@ -12,7 +12,7 @@ export default {
   data() {
     return {
       selectedAccount: null,
-      showAccountModal: false,
+      showAccountModal: false
     }
   },
   computed: {},