From 63d93e2050348b4d88c29028a4b3b83b6d4a4c10 Mon Sep 17 00:00:00 2001
From: Bnyro <yannick.fehler@web.de>
Date: Thu, 11 Aug 2022 19:12:08 +0200
Subject: [PATCH 1/4] sort preferences

---
 src/components/PreferencesPage.vue | 501 ++++++++++++++++-------------
 1 file changed, 280 insertions(+), 221 deletions(-)

diff --git a/src/components/PreferencesPage.vue b/src/components/PreferencesPage.vue
index ee88f268..6f0aef5f 100644
--- a/src/components/PreferencesPage.vue
+++ b/src/components/PreferencesPage.vue
@@ -6,171 +6,281 @@
     </div>
     <h1 v-t="'titles.preferences'" class="font-bold text-center" />
     <hr />
-    <h2>SponsorBlock</h2>
-    <p><span v-t="'actions.uses_api_from'" /><a class="link" href="https://sponsor.ajay.app/">sponsor.ajay.app</a></p>
-    <label for="chkEnableSponsorblock"><strong v-t="'actions.enable_sponsorblock'" /></label>
+    <label for="ddlTheme" class="pref">
+        <strong v-t="'actions.theme'" />
+        <select id="ddlTheme" v-model="selectedTheme" class="select w-auto" @change="onChange($event)">
+            <option v-t="'actions.auto'" value="auto" />
+            <option v-t="'actions.dark'" value="dark" />
+            <option v-t="'actions.light'" value="light" /></select
+    ></label>
+    <label class="pref" for="chkAutoPlayVideo">
+        <strong v-t="'actions.autoplay_video'" />
+        <input
+            id="chkAutoPlayVideo"
+            v-model="autoPlayVideo"
+            class="checkbox"
+            type="checkbox"
+            @change="onChange($event)"
+        />
+    </label>
+    <label class="pref" for="chkAudioOnly">
+        <strong v-t="'actions.audio_only'" />
+        <input id="chkAudioOnly" v-model="listen" class="checkbox" type="checkbox" @change="onChange($event)" />
+    </label>
+    <label class="pref" for="ddlDefaultQuality">
+        <strong v-t="'actions.default_quality'" />
+        <select id="ddlDefaultQuality" v-model="defaultQuality" class="select w-auto" @change="onChange($event)">
+            <option v-t="'actions.auto'" value="0" />
+            <option v-for="resolution in resolutions" :key="resolution" :value="resolution" v-text="`${resolution}p`" />
+        </select>
+    </label>
+    <label class="pref" for="txtBufferingGoal">
+        <strong v-t="'actions.buffering_goal'" />
+        <input
+            id="txtBufferingGoal"
+            v-model="bufferingGoal"
+            class="input w-auto"
+            type="text"
+            @change="onChange($event)"
+        />
+    </label>
+    <label class="pref" for="ddlCountrySelection">
+        <strong v-t="'actions.country_selection'" />
+        <select id="ddlCountrySelection" v-model="countrySelected" class="select" @change="onChange($event)">
+            <option v-for="country in countryMap" :key="country.code" :value="country.code" v-text="country.name" />
+        </select>
+    </label>
+    <label class="pref" for="ddlDefaultHomepage">
+        <strong v-t="'actions.default_homepage'" />
+        <select id="ddlDefaultHomepage" v-model="defaultHomepage" class="select w-auto" @change="onChange($event)">
+            <option v-t="'titles.trending'" value="trending" />
+            <option v-t="'titles.feed'" value="feed" />
+        </select>
+    </label>
+    <label class="pref" for="chkShowComments">
+        <strong v-t="'actions.show_comments'" />
+        <input
+            id="chkShowComments"
+            v-model="showComments"
+            class="checkbox"
+            type="checkbox"
+            @change="onChange($event)"
+        />
+    </label>
+    <label class="pref" for="chkMinimizeDescription">
+        <strong v-t="'actions.minimize_description_default'" />
+        <input
+            id="chkMinimizeDescription"
+            v-model="minimizeDescription"
+            class="checkbox"
+            type="checkbox"
+            @change="onChange($event)"
+        />
+    </label>
+    <label class="pref" for="chkMinimizeRecommendations">
+        <strong v-t="'actions.minimize_recommendations_default'" />
+        <input
+            id="chkMinimizeRecommendations"
+            v-model="minimizeRecommendations"
+            class="checkbox"
+            type="checkbox"
+            @change="onChange($event)"
+        />
+    </label>
+    <label class="pref" for="chkStoreWatchHistory">
+        <strong v-t="'actions.store_watch_history'" />
+        <input
+            id="chkStoreWatchHistory"
+            v-model="watchHistory"
+            class="checkbox"
+            type="checkbox"
+            @change="onChange($event)"
+        />
+    </label>
+    <label class="pref" for="ddlLanguageSelection">
+        <strong v-t="'actions.language_selection'" />
+        <select id="ddlLanguageSelection" v-model="selectedLanguage" class="select w-auto" @change="onChange($event)">
+            <option v-for="language in languages" :key="language.code" :value="language.code" v-text="language.name" />
+        </select>
+    </label>
+    <label class="pref" for="ddlEnabledCodecs">
+        <strong v-t="'actions.enabled_codecs'" />
+        <select
+            id="ddlEnabledCodecs"
+            v-model="enabledCodecs"
+            class="select w-auto h-auto"
+            multiple
+            @change="onChange($event)"
+        >
+            <option value="av1">AV1</option>
+            <option value="vp9">VP9</option>
+            <option value="avc">AVC (h.264)</option>
+        </select>
+    </label>
+    <label class="pref" for="chkDisableLBRY">
+        <strong v-t="'actions.disable_lbry'" />
+        <input id="chkDisableLBRY" v-model="disableLBRY" class="checkbox" type="checkbox" @change="onChange($event)" />
+    </label>
+    <label class="pref" for="chkEnableLBRYProxy">
+        <strong v-t="'actions.enable_lbry_proxy'" />
+        <input
+            id="chkEnableLBRYProxy"
+            v-model="proxyLBRY"
+            class="checkbox"
+            type="checkbox"
+            @change="onChange($event)"
+        />
+    </label>
+
+    <h2 class="text-center">SponsorBlock</h2>
+    <p class="text-center">
+        <span v-t="'actions.uses_api_from'" /><a class="link" href="https://sponsor.ajay.app/">sponsor.ajay.app</a>
+    </p>
+    <label class="pref" for="chkEnableSponsorblock">
+        <strong v-t="'actions.enable_sponsorblock'" />
+        <input
+            id="chkEnableSponsorblock"
+            v-model="sponsorBlock"
+            class="checkbox"
+            type="checkbox"
+            @change="onChange($event)"
+        />
+    </label>
+    <label class="pref" for="chkSkipSponsors">
+        <strong v-t="'actions.skip_sponsors'" />
+        <input id="chkSkipSponsors" v-model="skipSponsor" class="checkbox" type="checkbox" @change="onChange($event)" />
+    </label>
+    <label class="pref" for="chkSkipIntro">
+        <strong v-t="'actions.skip_intro'" />
+        <input id="chkSkipIntro" v-model="skipIntro" class="checkbox" type="checkbox" @change="onChange($event)" />
+    </label>
+    <label class="pref" for="chkSkipOutro">
+        <strong v-t="'actions.skip_outro'" />
+        <input id="chkSkipOutro" v-model="skipOutro" class="checkbox" type="checkbox" @change="onChange($event)" />
+    </label>
+    <label class="pref" for="chkSkipPreview">
+        <strong v-t="'actions.skip_preview'" />
+        <input id="chkSkipPreview" v-model="skipPreview" class="checkbox" type="checkbox" @change="onChange($event)" />
+    </label>
+    <label class="pref" for="chkSkipInteraction">
+        <strong v-t="'actions.skip_interaction'" />
+        <input
+            id="chkSkipInteraction"
+            v-model="skipInteraction"
+            class="checkbox"
+            type="checkbox"
+            @change="onChange($event)"
+        />
+    </label>
+    <label class="pref" for="chkSkipSelfPromo">
+        <strong v-t="'actions.skip_self_promo'" />
+        <input
+            id="chkSkipSelfPromo"
+            v-model="skipSelfPromo"
+            class="checkbox"
+            type="checkbox"
+            @change="onChange($event)"
+        />
+    </label>
+    <label class="pref" for="chkSkipNonMusic">
+        <strong v-t="'actions.skip_non_music'" />
+        <input
+            id="chkSkipNonMusic"
+            v-model="skipMusicOffTopic"
+            class="checkbox"
+            type="checkbox"
+            @change="onChange($event)"
+        />
+    </label>
+    <label class="pref" for="chkSkipHighlight">
+        <strong v-t="'actions.skip_highlight'" />
+        <input
+            id="chkSkipHighlight"
+            v-model="skipHighlight"
+            class="checkbox"
+            type="checkbox"
+            @change="onChange($event)"
+        />
+    </label>
+    <label class="pref" for="chkSkipFiller">
+        <strong v-t="'actions.skip_filler_tangent'" />
+        <input id="chkSkipFiller" v-model="skipFiller" class="checkbox" type="checkbox" @change="onChange($event)" />
+    </label>
+    <label class="pref" for="chkShowMarkers">
+        <strong v-t="'actions.show_markers'" />
+        <input id="chkShowMarkers" v-model="showMarkers" class="checkbox" type="checkbox" @change="onChange($event)" />
+    </label>
+
+    <label class="pref" for="ddlInstanceSelection">
+        <strong v-text="`${$t('actions.instance_selection')}:`" />
+        <select id="ddlInstanceSelection" v-model="selectedInstance" class="select w-auto" @change="onChange($event)">
+            <option
+                v-for="instance in instances"
+                :key="instance.name"
+                :value="instance.api_url"
+                v-text="instance.name"
+            />
+        </select>
+    </label>
+    <label class="pref" for="chkAuthInstance">
+        <strong v-text="`${$t('actions.different_auth_instance')}:`" />
+        <input
+            id="chkAuthInstance"
+            v-model="authInstance"
+            class="checkbox"
+            type="checkbox"
+            @change="onChange($event)"
+        />
+    </label>
+    <template v-if="authInstance">
+        <label class="pref" for="ddlAuthInstanceSelection">
+            <strong v-text="`${$t('actions.instance_auth_selection')}:`" />
+            <select
+                id="ddlAuthInstanceSelection"
+                v-model="selectedAuthInstance"
+                class="select w-auto"
+                @change="onChange($event)"
+            >
+                <option
+                    v-for="instance in instances"
+                    :key="instance.name"
+                    :value="instance.api_url"
+                    v-text="instance.name"
+                />
+            </select>
+        </label>
+    </template>
     <br />
-    <input
-        id="chkEnableSponsorblock"
-        v-model="sponsorBlock"
-        class="checkbox"
-        type="checkbox"
-        @change="onChange($event)"
-    />
-    <br />
-    <label for="chkSkipSponsors"><strong v-t="'actions.skip_sponsors'" /></label>
-    <br />
-    <input id="chkSkipSponsors" v-model="skipSponsor" class="checkbox" type="checkbox" @change="onChange($event)" />
-    <br />
-    <label for="chkSkipIntro"><strong v-t="'actions.skip_intro'" /></label>
-    <br />
-    <input id="chkSkipIntro" v-model="skipIntro" class="checkbox" type="checkbox" @change="onChange($event)" />
-    <br />
-    <label for="chkSkipOutro"><strong v-t="'actions.skip_outro'" /></label>
-    <br />
-    <input id="chkSkipOutro" v-model="skipOutro" class="checkbox" type="checkbox" @change="onChange($event)" />
-    <br />
-    <label for="chkSkipPreview"><strong v-t="'actions.skip_preview'" /></label>
-    <br />
-    <input id="chkSkipPreview" v-model="skipPreview" class="checkbox" type="checkbox" @change="onChange($event)" />
-    <br />
-    <label for="chkSkipInteraction"><strong v-t="'actions.skip_interaction'" /></label>
-    <br />
-    <input
-        id="chkSkipInteraction"
-        v-model="skipInteraction"
-        class="checkbox"
-        type="checkbox"
-        @change="onChange($event)"
-    />
-    <br />
-    <label for="chkSkipSelfPromo"><strong v-t="'actions.skip_self_promo'" /></label>
-    <br />
-    <input id="chkSkipSelfPromo" v-model="skipSelfPromo" class="checkbox" type="checkbox" @change="onChange($event)" />
-    <br />
-    <label for="chkSkipNonMusic"><strong v-t="'actions.skip_non_music'" /></label>
-    <br />
-    <input
-        id="chkSkipNonMusic"
-        v-model="skipMusicOffTopic"
-        class="checkbox"
-        type="checkbox"
-        @change="onChange($event)"
-    />
-    <br />
-    <label for="chkSkipHighlight"><strong v-t="'actions.skip_highlight'" /></label>
-    <br />
-    <input id="chkSkipHighlight" v-model="skipHighlight" class="checkbox" type="checkbox" @change="onChange($event)" />
-    <br />
-    <label for="chkSkipFiller"><strong v-t="'actions.skip_filler_tangent'" /></label>
-    <br />
-    <input id="chkSkipFiller" v-model="skipFiller" class="checkbox" type="checkbox" @change="onChange($event)" />
-    <br />
-    <label for="chkShowMarkers"><strong v-t="'actions.show_markers'" /></label>
-    <br />
-    <input id="chkShowMarkers" v-model="showMarkers" class="checkbox" type="checkbox" @change="onChange($event)" />
-    <br />
-    <label for="ddlTheme"><strong v-t="'actions.theme'" /></label>
-    <br />
-    <select id="ddlTheme" v-model="selectedTheme" class="select w-auto" @change="onChange($event)">
-        <option v-t="'actions.auto'" value="auto" />
-        <option v-t="'actions.dark'" value="dark" />
-        <option v-t="'actions.light'" value="light" />
-    </select>
-    <br />
-    <label for="chkAutoPlayVideo"><strong v-t="'actions.autoplay_video'" /></label>
-    <br />
-    <input id="chkAutoPlayVideo" v-model="autoPlayVideo" class="checkbox" type="checkbox" @change="onChange($event)" />
-    <br />
-    <label for="chkAudioOnly"><strong v-t="'actions.audio_only'" /></label>
-    <br />
-    <input id="chkAudioOnly" v-model="listen" class="checkbox" type="checkbox" @change="onChange($event)" />
-    <br />
-    <label for="ddlDefaultQuality"><strong v-t="'actions.default_quality'" /></label>
-    <br />
-    <select id="ddlDefaultQuality" v-model="defaultQuality" class="select w-auto" @change="onChange($event)">
-        <option v-t="'actions.auto'" value="0" />
-        <option v-for="resolution in resolutions" :key="resolution" :value="resolution" v-text="`${resolution}p`" />
-    </select>
-    <br />
-    <label for="txtBufferingGoal"><strong v-t="'actions.buffering_goal'" /></label>
-    <br />
-    <input id="txtBufferingGoal" v-model="bufferingGoal" class="input w-auto" type="text" @change="onChange($event)" />
-    <br />
-    <label for="ddlCountrySelection"><strong v-t="'actions.country_selection'" /></label>
-    <br />
-    <select id="ddlCountrySelection" v-model="countrySelected" class="select w-auto" @change="onChange($event)">
-        <option v-for="country in countryMap" :key="country.code" :value="country.code" v-text="country.name" />
-    </select>
-    <br />
-    <label for="ddlDefaultHomepage"><strong v-t="'actions.default_homepage'" /></label>
-    <br />
-    <select id="ddlDefaultHomepage" v-model="defaultHomepage" class="select w-auto" @change="onChange($event)">
-        <option v-t="'titles.trending'" value="trending" />
-        <option v-t="'titles.feed'" value="feed" />
-    </select>
-    <br />
-    <label for="chkShowComments"><strong v-t="'actions.show_comments'" /></label>
-    <br />
-    <input id="chkShowComments" v-model="showComments" class="checkbox" type="checkbox" @change="onChange($event)" />
-    <br />
-    <label for="chkMinimizeDescription"><strong v-t="'actions.minimize_description_default'" /></label>
-    <br />
-    <input
-        id="chkMinimizeDescription"
-        v-model="minimizeDescription"
-        class="checkbox"
-        type="checkbox"
-        @change="onChange($event)"
-    />
-    <br />
-    <label for="chkMinimizeRecommendations"><strong v-t="'actions.minimize_recommendations_default'" /></label>
-    <br />
-    <input
-        id="chkMinimizeRecommendations"
-        v-model="minimizeRecommendations"
-        class="checkbox"
-        type="checkbox"
-        @change="onChange($event)"
-    />
-    <br />
-    <label for="chkStoreWatchHistory"><strong v-t="'actions.store_watch_history'" /></label>
-    <br />
-    <input
-        id="chkStoreWatchHistory"
-        v-model="watchHistory"
-        class="checkbox"
-        type="checkbox"
-        @change="onChange($event)"
-    />
-    <br />
-    <label for="ddlLanguageSelection"><strong v-t="'actions.language_selection'" /></label>
-    <br />
-    <select id="ddlLanguageSelection" v-model="selectedLanguage" class="select w-auto" @change="onChange($event)">
-        <option v-for="language in languages" :key="language.code" :value="language.code" v-text="language.name" />
-    </select>
-    <br />
-    <label for="ddlEnabledCodecs"><strong v-t="'actions.enabled_codecs'" /></label>
-    <br />
-    <select
-        id="ddlEnabledCodecs"
-        v-model="enabledCodecs"
-        class="select w-auto h-auto"
-        multiple
-        @change="onChange($event)"
-    >
-        <option value="av1">AV1</option>
-        <option value="vp9">VP9</option>
-        <option value="avc">AVC (h.264)</option>
-    </select>
-    <br />
-    <label for="chkDisableLBRY"><strong v-t="'actions.disable_lbry'" /></label>
-    <br />
-    <input id="chkDisableLBRY" v-model="disableLBRY" class="checkbox" type="checkbox" @change="onChange($event)" />
-    <br />
-    <label for="chkEnableLBRYProxy"><strong v-t="'actions.enable_lbry_proxy'" /></label>
-    <br />
-    <input id="chkEnableLBRYProxy" v-model="proxyLBRY" class="checkbox" type="checkbox" @change="onChange($event)" />
+
+    <!-- options that are visible only when logged in -->
+    <div v-if="this.authenticated">
+        <label class="pref" for="txtDeleteAccountPassword">
+            <strong v-t="'actions.delete_account'" />
+            <div class="flex items-center">
+                <input
+                    id="txtDeleteAccountPassword"
+                    ref="txtDeleteAccountPassword"
+                    v-model="password"
+                    v-on:keyup.enter="deleteAccount"
+                    :placeholder="$t('login.password')"
+                    :aria-label="$t('login.password')"
+                    class="input w-auto mr-12"
+                    type="password"
+                />
+                <a class="btn w-auto" @click="deleteAccount" v-t="'actions.delete_account'" />
+            </div>
+        </label>
+        <div class="pref">
+            <a class="btn w-auto" @click="logout" v-t="'actions.logout'" />
+            <a
+                class="btn w-auto"
+                style="margin-left: 0.5em"
+                @click="invalidateSession"
+                v-t="'actions.invalidate_session'"
+            />
+        </div>
+        <br />
+    </div>
     <h2 id="instancesList" v-t="'actions.instances_list'" />
     <table class="table">
         <thead>
@@ -200,63 +310,6 @@
     </table>
 
     <hr />
-
-    <label for="ddlInstanceSelection"><strong v-text="`${$t('actions.instance_selection')}:`" /></label>
-    <br />
-    <select id="ddlInstanceSelection" v-model="selectedInstance" class="select w-auto" @change="onChange($event)">
-        <option v-for="instance in instances" :key="instance.name" :value="instance.api_url" v-text="instance.name" />
-    </select>
-    <br />
-    <label for="chkAuthInstance"><strong v-text="`${$t('actions.different_auth_instance')}:`" /></label>
-    <br />
-    <input id="chkAuthInstance" v-model="authInstance" class="checkbox" type="checkbox" @change="onChange($event)" />
-    <template v-if="authInstance">
-        <br />
-        <label for="ddlAuthInstanceSelection"><strong v-text="`${$t('actions.instance_auth_selection')}:`" /></label>
-        <br />
-        <select
-            id="ddlAuthInstanceSelection"
-            v-model="selectedAuthInstance"
-            class="select w-auto"
-            @change="onChange($event)"
-        >
-            <option
-                v-for="instance in instances"
-                :key="instance.name"
-                :value="instance.api_url"
-                v-text="instance.name"
-            />
-        </select>
-    </template>
-    <!-- options that are visible only when logged in -->
-    <br />
-    <div v-if="this.authenticated">
-        <label for="txtDeleteAccountPassword"><strong v-t="'actions.delete_account'" /></label>
-        <br />
-        <div>
-            <input
-                id="txtDeleteAccountPassword"
-                ref="txtDeleteAccountPassword"
-                v-model="password"
-                v-on:keyup.enter="deleteAccount"
-                :placeholder="$t('login.password')"
-                :aria-label="$t('login.password')"
-                class="input w-auto"
-                type="password"
-            />
-            <a class="btn w-auto ml-2" @click="deleteAccount" v-t="'actions.delete_account'" />
-            <br />
-        </div>
-        <br />
-        <a class="btn w-auto" @click="logout" v-t="'actions.logout'" />
-        <a
-            class="btn w-auto"
-            style="margin-left: 0.5em"
-            @click="invalidateSession"
-            v-t="'actions.invalidate_session'"
-        />
-        <br />
-    </div>
 </template>
 
 <script>
@@ -529,3 +582,9 @@ export default {
     },
 };
 </script>
+
+<style>
+.pref {
+    @apply flex justify-between items-center mx-[15vw] my-1.5;
+}
+</style>

From 606644608b2639d11cede6557804a9e8ce0db6d7 Mon Sep 17 00:00:00 2001
From: Bnyro <yannick.fehler@web.de>
Date: Thu, 11 Aug 2022 19:23:18 +0200
Subject: [PATCH 2/4] add more categories

---
 src/components/PreferencesPage.vue | 49 ++++++++++++++++--------------
 src/locales/en.json                |  5 ++-
 2 files changed, 31 insertions(+), 23 deletions(-)

diff --git a/src/components/PreferencesPage.vue b/src/components/PreferencesPage.vue
index 6f0aef5f..50e22994 100644
--- a/src/components/PreferencesPage.vue
+++ b/src/components/PreferencesPage.vue
@@ -11,8 +11,30 @@
         <select id="ddlTheme" v-model="selectedTheme" class="select w-auto" @change="onChange($event)">
             <option v-t="'actions.auto'" value="auto" />
             <option v-t="'actions.dark'" value="dark" />
-            <option v-t="'actions.light'" value="light" /></select
-    ></label>
+            <option v-t="'actions.light'" value="light" />
+        </select>
+    </label>
+    <label class="pref" for="ddlLanguageSelection">
+        <strong v-t="'actions.language_selection'" />
+        <select id="ddlLanguageSelection" v-model="selectedLanguage" class="select w-auto" @change="onChange($event)">
+            <option v-for="language in languages" :key="language.code" :value="language.code" v-text="language.name" />
+        </select>
+    </label>
+    <label class="pref" for="ddlCountrySelection">
+        <strong v-t="'actions.country_selection'" />
+        <select id="ddlCountrySelection" v-model="countrySelected" class="select" @change="onChange($event)">
+            <option v-for="country in countryMap" :key="country.code" :value="country.code" v-text="country.name" />
+        </select>
+    </label>
+    <label class="pref" for="ddlDefaultHomepage">
+        <strong v-t="'actions.default_homepage'" />
+        <select id="ddlDefaultHomepage" v-model="defaultHomepage" class="select w-auto" @change="onChange($event)">
+            <option v-t="'titles.trending'" value="trending" />
+            <option v-t="'titles.feed'" value="feed" />
+        </select>
+    </label>
+
+    <h2 class="text-center" v-text="`${$t('titles.player')}`" />
     <label class="pref" for="chkAutoPlayVideo">
         <strong v-t="'actions.autoplay_video'" />
         <input
@@ -44,19 +66,6 @@
             @change="onChange($event)"
         />
     </label>
-    <label class="pref" for="ddlCountrySelection">
-        <strong v-t="'actions.country_selection'" />
-        <select id="ddlCountrySelection" v-model="countrySelected" class="select" @change="onChange($event)">
-            <option v-for="country in countryMap" :key="country.code" :value="country.code" v-text="country.name" />
-        </select>
-    </label>
-    <label class="pref" for="ddlDefaultHomepage">
-        <strong v-t="'actions.default_homepage'" />
-        <select id="ddlDefaultHomepage" v-model="defaultHomepage" class="select w-auto" @change="onChange($event)">
-            <option v-t="'titles.trending'" value="trending" />
-            <option v-t="'titles.feed'" value="feed" />
-        </select>
-    </label>
     <label class="pref" for="chkShowComments">
         <strong v-t="'actions.show_comments'" />
         <input
@@ -97,12 +106,6 @@
             @change="onChange($event)"
         />
     </label>
-    <label class="pref" for="ddlLanguageSelection">
-        <strong v-t="'actions.language_selection'" />
-        <select id="ddlLanguageSelection" v-model="selectedLanguage" class="select w-auto" @change="onChange($event)">
-            <option v-for="language in languages" :key="language.code" :value="language.code" v-text="language.name" />
-        </select>
-    </label>
     <label class="pref" for="ddlEnabledCodecs">
         <strong v-t="'actions.enabled_codecs'" />
         <select
@@ -211,6 +214,7 @@
         <input id="chkShowMarkers" v-model="showMarkers" class="checkbox" type="checkbox" @change="onChange($event)" />
     </label>
 
+    <h2 class="text-center" v-text="`${$t('titles.instance')}`" />
     <label class="pref" for="ddlInstanceSelection">
         <strong v-text="`${$t('actions.instance_selection')}:`" />
         <select id="ddlInstanceSelection" v-model="selectedInstance" class="select w-auto" @change="onChange($event)">
@@ -254,6 +258,7 @@
 
     <!-- options that are visible only when logged in -->
     <div v-if="this.authenticated">
+        <h2 class="text-center" v-text="`${$t('titles.account')}`"></h2>
         <label class="pref" for="txtDeleteAccountPassword">
             <strong v-t="'actions.delete_account'" />
             <div class="flex items-center">
@@ -264,7 +269,7 @@
                     v-on:keyup.enter="deleteAccount"
                     :placeholder="$t('login.password')"
                     :aria-label="$t('login.password')"
-                    class="input w-auto mr-12"
+                    class="input w-auto mr-2"
                     type="password"
                 />
                 <a class="btn w-auto" @click="deleteAccount" v-t="'actions.delete_account'" />
diff --git a/src/locales/en.json b/src/locales/en.json
index 229cacb5..4bf36dea 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -7,7 +7,10 @@
         "preferences": "Preferences",
         "history": "History",
         "subscriptions": "Subscriptions",
-        "playlists": "Playlists"
+        "playlists": "Playlists",
+        "account": "Account",
+        "instance": "Instance",
+        "player": "Player"
     },
     "player": {
         "watch_on": "Watch on {0}"

From 58ca23aec908cf0f73ef4fe9c3efe5e0bc862d9d Mon Sep 17 00:00:00 2001
From: Bnyro <yannick.fehler@web.de>
Date: Thu, 11 Aug 2022 19:34:35 +0200
Subject: [PATCH 3/4] add note

---
 src/components/PreferencesPage.vue | 7 ++++---
 src/locales/en.json                | 3 +++
 2 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/src/components/PreferencesPage.vue b/src/components/PreferencesPage.vue
index 50e22994..a1944133 100644
--- a/src/components/PreferencesPage.vue
+++ b/src/components/PreferencesPage.vue
@@ -313,8 +313,9 @@
             </tr>
         </tbody>
     </table>
-
-    <hr />
+    <br />
+    <p v-text="`${$t('information.preferences_note')}`" />
+    <br />
 </template>
 
 <script>
@@ -590,6 +591,6 @@ export default {
 
 <style>
 .pref {
-    @apply flex justify-between items-center mx-[15vw] my-1.5;
+    @apply flex justify-between items-center mx-[15vw] my-2;
 }
 </style>
diff --git a/src/locales/en.json b/src/locales/en.json
index 4bf36dea..bf7a9041 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -136,5 +136,8 @@
     },
     "subscriptions": {
         "subscribed_channels_count": "Subscribed to: {0}"
+    },
+    "information": {
+        "preferences_note": "Note: preferences are saved in the local storage of your browser. Deleting your browser data will reset them."
     }
 }

From 69bfd093b3c2257386f570d25860179462a51b7f Mon Sep 17 00:00:00 2001
From: Bnyro <yannick.fehler@web.de>
Date: Thu, 11 Aug 2022 19:41:07 +0200
Subject: [PATCH 4/4] add reset prefs button

---
 src/components/PreferencesPage.vue | 7 +++++++
 src/locales/en.json                | 3 ++-
 2 files changed, 9 insertions(+), 1 deletion(-)

diff --git a/src/components/PreferencesPage.vue b/src/components/PreferencesPage.vue
index a1944133..63de1040 100644
--- a/src/components/PreferencesPage.vue
+++ b/src/components/PreferencesPage.vue
@@ -316,6 +316,7 @@
     <br />
     <p v-text="`${$t('information.preferences_note')}`" />
     <br />
+    <button class="btn" v-text="`${$t('actions.reset_preferences')}`" @click="resetPreferences()" />
 </template>
 
 <script>
@@ -573,6 +574,12 @@ export default {
             // redirect to trending page
             window.location = "/";
         },
+        resetPreferences() {
+            // clear the local storage
+            localStorage.clear();
+            // redirect to the home page
+            window.location = "/";
+        },
         async invalidateSession() {
             this.fetchJson(this.authApiUrl() + "/logout", null, {
                 method: "POST",
diff --git a/src/locales/en.json b/src/locales/en.json
index bf7a9041..c1af3178 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -92,7 +92,8 @@
         "instance_auth_selection": "Autentication Instance Selection",
         "clone_playlist": "Clone Playlist",
         "clone_playlist_success": "Successfully cloned!",
-        "download_as_txt": "Download as .txt"
+        "download_as_txt": "Download as .txt",
+        "reset_preferences": "Reset preferences"
     },
     "comment": {
         "pinned_by": "Pinned by",