Initial work on highlighting changed settings. Some refactoring to

simplify addition of new settings

1 files changed, 59 insertions, 59 deletions

diff --git a/src/components/settings_modal/tabs/general_tab.vue b/src/components/settings_modal/tabs/general_tab.vue
index 7f06d0bd..e03e731b 100644
--- a/src/components/settings_modal/tabs/general_tab.vue
+++ b/src/components/settings_modal/tabs/general_tab.vue
@@ -7,9 +7,9 @@
           <interface-language-switcher />
         </li>
         <li v-if="instanceSpecificPanelPresent">
-          <Checkbox v-model="hideISP">
+          <BooleanSetting path="hideISP">
             {{ $t('settings.hide_isp') }}
-          </Checkbox>
+          </BooleanSetting>
         </li>
       </ul>
     </div>
@@ -17,46 +17,46 @@
       <h2>{{ $t('nav.timeline') }}</h2>
       <ul class="setting-list">
         <li>
-          <Checkbox v-model="hideMutedPosts">
-            {{ $t('settings.hide_muted_posts') }} {{ $t('settings.instance_default', { value: hideMutedPostsLocalizedValue }) }}
-          </Checkbox>
+          <BooleanSetting path="hideMutedPosts">
+            {{ $t('settings.hide_muted_posts') }}
+          </BooleanSetting>
         </li>
         <li>
-          <Checkbox v-model="collapseMessageWithSubject">
-            {{ $t('settings.collapse_subject') }} {{ $t('settings.instance_default', { value: collapseMessageWithSubjectLocalizedValue }) }}
-          </Checkbox>
+          <BooleanSetting path="collapseMessageWithSubject">
+            {{ $t('settings.collapse_subject') }}
+          </BooleanSetting>
         </li>
         <li>
-          <Checkbox v-model="streaming">
+          <BooleanSetting path="streaming">
             {{ $t('settings.streaming') }}
-          </Checkbox>
+          </BooleanSetting>
           <ul
             class="setting-list suboptions"
             :class="[{disabled: !streaming}]"
           >
             <li>
-              <Checkbox
-                v-model="pauseOnUnfocused"
+              <BooleanSetting
+                path="pauseOnUnfocused"
                 :disabled="!streaming"
               >
                 {{ $t('settings.pause_on_unfocused') }}
-              </Checkbox>
+              </BooleanSetting>
             </li>
           </ul>
         </li>
         <li>
-          <Checkbox v-model="useStreamingApi">
+          <BooleanSetting path="useStreamingApi">
             {{ $t('settings.useStreamingApi') }}
             <br>
             <small>
               {{ $t('settings.useStreamingApiWarning') }}
             </small>
-          </Checkbox>
+          </BooleanSetting>
         </li>
         <li>
-          <Checkbox v-model="emojiReactionsOnTimeline">
+          <BooleanSetting path="emojiReactionsOnTimeline">
             {{ $t('settings.emoji_reactions_on_timeline') }}
-          </Checkbox>
+          </BooleanSetting>
         </li>
       </ul>
     </div>
@@ -65,14 +65,14 @@
       <h2>{{ $t('settings.composing') }}</h2>
       <ul class="setting-list">
         <li>
-          <Checkbox v-model="scopeCopy">
-            {{ $t('settings.scope_copy') }} {{ $t('settings.instance_default', { value: scopeCopyLocalizedValue }) }}
-          </Checkbox>
+          <BooleanSetting path="scopeCopy">
+            {{ $t('settings.scope_copy') }}
+          </BooleanSetting>
         </li>
         <li>
-          <Checkbox v-model="alwaysShowSubjectInput">
-            {{ $t('settings.subject_input_always_show') }} {{ $t('settings.instance_default', { value: alwaysShowSubjectInputLocalizedValue }) }}
-          </Checkbox>
+          <BooleanSetting path="alwaysShowSubjectInput">
+            {{ $t('settings.subject_input_always_show') }}
+          </BooleanSetting>
         </li>
         <li>
           <div>
@@ -127,19 +127,19 @@
           </div>
         </li>
         <li>
-          <Checkbox v-model="minimalScopesMode">
-            {{ $t('settings.minimal_scopes_mode') }} {{ $t('settings.instance_default', { value: minimalScopesModeLocalizedValue }) }}
-          </Checkbox>
+          <BooleanSetting path="minimalScopesMode">
+            {{ $t('settings.minimal_scopes_mode') }} {{ minimalScopesModeDefaultValue }}
+          </BooleanSetting>
         </li>
         <li>
-          <Checkbox v-model="autohideFloatingPostButton">
+          <BooleanSetting path="autohideFloatingPostButton">
             {{ $t('settings.autohide_floating_post_button') }}
-          </Checkbox>
+          </BooleanSetting>
         </li>
         <li>
-          <Checkbox v-model="padEmoji">
+          <BooleanSetting path="padEmoji">
             {{ $t('settings.pad_emoji') }}
-          </Checkbox>
+          </BooleanSetting>
         </li>
       </ul>
     </div>
@@ -148,14 +148,14 @@
       <h2>{{ $t('settings.attachments') }}</h2>
       <ul class="setting-list">
         <li>
-          <Checkbox v-model="hideAttachments">
+          <BooleanSetting path="hideAttachments">
             {{ $t('settings.hide_attachments_in_tl') }}
-          </Checkbox>
+          </BooleanSetting>
         </li>
         <li>
-          <Checkbox v-model="hideAttachmentsInConv">
+          <BooleanSetting path="hideAttachmentsInConv">
             {{ $t('settings.hide_attachments_in_convo') }}
-          </Checkbox>
+          </BooleanSetting>
         </li>
         <li>
           <label for="maxThumbnails">
@@ -163,7 +163,7 @@
           </label>
           <input
             id="maxThumbnails"
-            v-model.number="maxThumbnails"
+            path.number="maxThumbnails"
             class="number-input"
             type="number"
             min="0"
@@ -171,48 +171,48 @@
           >
         </li>
         <li>
-          <Checkbox v-model="hideNsfw">
+          <BooleanSetting path="hideNsfw">
             {{ $t('settings.nsfw_clickthrough') }}
-          </Checkbox>
+          </BooleanSetting>
         </li>
         <ul class="setting-list suboptions">
           <li>
-            <Checkbox
-              v-model="preloadImage"
+            <BooleanSetting
+              path="preloadImage"
               :disabled="!hideNsfw"
             >
               {{ $t('settings.preload_images') }}
-            </Checkbox>
+            </BooleanSetting>
           </li>
           <li>
-            <Checkbox
-              v-model="useOneClickNsfw"
+            <BooleanSetting
+              path="useOneClickNsfw"
               :disabled="!hideNsfw"
             >
               {{ $t('settings.use_one_click_nsfw') }}
-            </Checkbox>
+            </BooleanSetting>
           </li>
         </ul>
         <li>
-          <Checkbox v-model="stopGifs">
+          <BooleanSetting path="stopGifs">
             {{ $t('settings.stop_gifs') }}
-          </Checkbox>
+          </BooleanSetting>
         </li>
         <li>
-          <Checkbox v-model="loopVideo">
+          <BooleanSetting path="loopVideo">
             {{ $t('settings.loop_video') }}
-          </Checkbox>
+          </BooleanSetting>
           <ul
             class="setting-list suboptions"
             :class="[{disabled: !streaming}]"
           >
             <li>
-              <Checkbox
-                v-model="loopVideoSilentOnly"
+              <BooleanSetting
+                path="loopVideoSilentOnly"
                 :disabled="!loopVideo || !loopSilentAvailable"
               >
                 {{ $t('settings.loop_video_silent_only') }}
-              </Checkbox>
+              </BooleanSetting>
               <div
                 v-if="!loopSilentAvailable"
                 class="unavailable"
@@ -223,14 +223,14 @@
           </ul>
         </li>
         <li>
-          <Checkbox v-model="playVideosInModal">
+          <BooleanSetting path="playVideosInModal">
             {{ $t('settings.play_videos_in_modal') }}
-          </Checkbox>
+          </BooleanSetting>
         </li>
         <li>
-          <Checkbox v-model="useContainFit">
+          <BooleanSetting path="useContainFit">
             {{ $t('settings.use_contain_fit') }}
-          </Checkbox>
+          </BooleanSetting>
         </li>
       </ul>
     </div>
@@ -239,9 +239,9 @@
       <h2>{{ $t('settings.notifications') }}</h2>
       <ul class="setting-list">
         <li>
-          <Checkbox v-model="webPushNotifications">
+          <BooleanSetting path="webPushNotifications">
             {{ $t('settings.enable_web_push_notifications') }}
-          </Checkbox>
+          </BooleanSetting>
         </li>
       </ul>
     </div>
@@ -250,9 +250,9 @@
       <h2>{{ $t('settings.fun') }}</h2>
       <ul class="setting-list">
         <li>
-          <Checkbox v-model="greentext">
-            {{ $t('settings.greentext') }} {{ $t('settings.instance_default', { value: greentextLocalizedValue }) }}
-          </Checkbox>
+          <BooleanSetting path="greentext">
+            {{ $t('settings.greentext') }}
+          </BooleanSetting>
         </li>
       </ul>
     </div>