From da915b0716e9a53bf5d09fc54d5da050716f63fb Mon Sep 17 00:00:00 2001
From: Jason Henriquez <jasonhenriquez@protonmail.com>
Date: Mon, 23 Oct 2023 02:14:17 -0500
Subject: [PATCH 01/14] Implement iconButton radioButton dropdown handling &
 related props

---
 .../ft-icon-button/ft-icon-button.js          | 71 ++++++++++++++++++-
 .../ft-icon-button/ft-icon-button.scss        | 16 ++++-
 .../ft-icon-button/ft-icon-button.vue         | 69 ++++++++++++++++--
 3 files changed, 146 insertions(+), 10 deletions(-)

diff --git a/src/renderer/components/ft-icon-button/ft-icon-button.js b/src/renderer/components/ft-icon-button/ft-icon-button.js
index 93c4db4df142..ed3c469a0c08 100644
--- a/src/renderer/components/ft-icon-button/ft-icon-button.js
+++ b/src/renderer/components/ft-icon-button/ft-icon-button.js
@@ -1,10 +1,12 @@
 import { defineComponent } from 'vue'
 import FtPrompt from '../ft-prompt/ft-prompt.vue'
+import FtButton from '../ft-button/ft-button.vue'
 import { sanitizeForHtmlId } from '../../helpers/accessibility'
 
 export default defineComponent({
   name: 'FtIconButton',
   components: {
+    'ft-button': FtButton,
     'ft-prompt': FtPrompt
   },
   props: {
@@ -50,7 +52,9 @@ export default defineComponent({
     },
     dropdownOptions: {
       // Array of objects with these properties
-      // - type: ('labelValue'|'divider', default to 'labelValue' for less typing)
+      // - type: ('labelValue'|'divider'|'radiogroup', default to 'labelValue' for less typing)
+      // - radios: ({ type?: 'radio', label: String, value: String, checked: Boolean } | { type: divider })[]
+      //          (if type == 'radiogroup', representing a separate group of checkboxes)
       // - label: String (if type == 'labelValue')
       // - value: String (if type == 'labelValue')
       type: Array,
@@ -59,6 +63,18 @@ export default defineComponent({
     dropdownModalOnMobile: {
       type: Boolean,
       default: false
+    },
+    closeOnClick: {
+      type: Boolean,
+      default: true
+    },
+    hideIcon: {
+      type: Boolean,
+      default: false
+    },
+    useFtButton: {
+      type: Boolean,
+      default: false
     }
   },
   data: function () {
@@ -123,7 +139,58 @@ export default defineComponent({
         this.$emit('click', url)
       }
 
-      this.dropdownShown = false
+      if (this.closeOnClick) {
+        this.dropdownShown = false
+      }
+    },
+
+    handleRadioDropdownKeydown: function({ url, index, groupIndex }, event) {
+      if (!(event instanceof KeyboardEvent) || event.altKey) {
+        return
+      }
+
+      let isNext = null
+      switch (event.key) {
+        case ' ':
+        case 'Spacebar':
+          this.handleDropdownClick({ url, index })
+          return
+        case 'ArrowRight':
+        case 'ArrowDown':
+          isNext = true
+          break
+        case 'ArrowLeft':
+        case 'ArrowUp':
+          isNext = false
+          break
+        default:
+          return
+      }
+
+      this.focusElement(
+        {
+          isNext,
+          index,
+          list: this.dropdownOptions[groupIndex].radios,
+          idPrefix: this.title,
+          groupIndex
+        }
+      )
+    },
+
+    focusElement: function ({ isNext, index, list, idPrefix, groupIndex }) {
+      let newIndex = index
+      const max = list.length - 1
+      do {
+        newIndex += (isNext ? 1 : -1)
+        if (newIndex === -1) {
+          newIndex = max
+        } else if (newIndex > max) {
+          newIndex = 0
+        }
+      } while (list[newIndex].type === 'divider')
+      const newElement = document.getElementById(sanitizeForHtmlId(idPrefix + groupIndex + '-' + newIndex))
+      newElement?.focus()
     },
 
     handleResize: function () {
diff --git a/src/renderer/components/ft-icon-button/ft-icon-button.scss b/src/renderer/components/ft-icon-button/ft-icon-button.scss
index 58f776dd6414..89314910e36a 100644
--- a/src/renderer/components/ft-icon-button/ft-icon-button.scss
+++ b/src/renderer/components/ft-icon-button/ft-icon-button.scss
@@ -110,13 +110,13 @@
     inset-block-start: 45px;
   }
 
-  .list {
+  .list, .radiogroup {
     list-style-type: none;
     margin: 0;
     padding: 0;
   }
 
-  .listItem {
+  .listItem, .radioItem {
     cursor: pointer;
     margin: 0;
     padding-block: 8px;
@@ -138,6 +138,18 @@
     }
   }
 
+  .radioItem {
+    padding-inline: 10px;
+    display: flex;
+    gap: 15px;
+    text-align: start;
+    justify-content: space-between;
+  }
+
+  .uncheckedFiller {
+    inline-size: 10.5px;
+  }
+
   .listItemDivider {
     border-block-start: 1px solid var(--tertiary-text-color);
     margin-block: 1px;
diff --git a/src/renderer/components/ft-icon-button/ft-icon-button.vue b/src/renderer/components/ft-icon-button/ft-icon-button.vue
index b1760e528e60..11aeb64d7350 100644
--- a/src/renderer/components/ft-icon-button/ft-icon-button.vue
+++ b/src/renderer/components/ft-icon-button/ft-icon-button.vue
@@ -1,6 +1,7 @@
 <template>
   <div class="ftIconButton">
     <font-awesome-icon
+      v-if="!hideIcon && !useFtButton"
       class="iconButton"
       :title="title"
       :icon="icon"
@@ -19,6 +20,17 @@
       @keydown.enter.prevent="handleIconClick"
       @keydown.space.prevent="handleIconClick"
     />
+    <ft-button
+      v-if="useFtButton"
+      class="iconFtButton"
+      @click="handleIconClick"
+    >
+      <font-awesome-icon
+        :icon="!hideIcon ? icon : null"
+        :class="{ [theme]: true }"
+      />
+      {{ title }}
+    </ft-button>
     <template
       v-if="dropdownShown"
     >
@@ -67,8 +79,48 @@
         @focusout="handleDropdownFocusOut"
       >
         <slot>
+          <template
+            v-if="dropdownOptions[0]?.type === 'radiogroup'"
+          >
+            <div
+              v-for="(option, radioGroupIndex) in dropdownOptions"
+              :id="sanitizeForHtmlId(title + radioGroupIndex)"
+              :key="radioGroupIndex"
+              class="radiogroup"
+              role="radiogroup"
+            >
+              <div
+                v-for="(radio, radioButtonIndex) in option.radios"
+                :id="sanitizeForHtmlId(title + radioGroupIndex + '-' + radioButtonIndex)"
+                :key="radioGroupIndex + '-' + radioButtonIndex"
+                :role="radio.type === 'divider' ? 'separator' : 'radio'"
+                :aria-checked="radio.checked"
+                :tabindex="radio.checked ? '0' : '-1'"
+                :class="{
+                  radioItem: radio.type !== 'divider',
+                  listItemDivider: radio.type === 'divider',
+                  checked: radio.checked
+                }"
+                @click="handleDropdownClick({url: radio.value, index: radioButtonIndex})"
+                @keydown.left.right.up.down.space.prevent="handleRadioDropdownKeydown({url: radio.value, index: radioButtonIndex, groupIndex: radioGroupIndex}, $event)"
+              >
+                <span class="radioOptionLabel">
+                  {{ radio.type === 'divider' ? '' : radio.label }}
+                </span>
+                <font-awesome-icon
+                  v-if="radio.checked"
+                  :icon="['fas', 'check']"
+                  class="radioCheckedIcon"
+                />
+                <div
+                  v-else
+                  class="uncheckedFiller"
+                />
+              </div>
+            </div>
+          </template>
           <ul
-            v-if="dropdownOptions.length > 0"
+            v-else-if="dropdownOptions.length > 0"
             class="list"
             role="listbox"
             :aria-expanded="dropdownShown"
@@ -80,12 +132,17 @@
               :role="option.type === 'divider' ? 'separator' : 'option'"
               aria-selected="false"
               :tabindex="option.type === 'divider' ? '-1' : '0'"
-              :class="option.type === 'divider' ? 'listItemDivider' : 'listItem'"
-              @click="handleDropdownClick({url: option.value, index: index}, $event)"
-              @keydown.enter="handleDropdownClick({url: option.value, index: index}, $event)"
-              @keydown.space="handleDropdownClick({url: option.value, index: index}, $event)"
+              :class="{
+                listItem: option.type !== 'divider',
+                listItemDivider: option.type === 'divider'
+              }"
+              @click="handleDropdownClick({url: option.value, index: index})"
+              @keydown.enter="handleDropdownClick({url: option.value, index: index})"
+              @keydown.space="handleDropdownClick({url: option.value, index: index})"
             >
-              {{ option.type === 'divider' ? '' : option.label }}
+              <span>
+                {{ option.type === 'divider' ? '' : option.label }}
+              </span>
             </li>
           </ul>
         </slot>

From 16870f4c9da69644e8cfd7d11e96a024fba4d3c7 Mon Sep 17 00:00:00 2001
From: Jason Henriquez <jasonhenriquez@protonmail.com>
Date: Mon, 23 Oct 2023 02:46:52 -0500
Subject: [PATCH 02/14] Update with workaround to make use-ft-button icon
 dropdown close when button is clicked

---
 .../components/ft-icon-button/ft-icon-button.js      |  7 ++++++-
 .../components/ft-icon-button/ft-icon-button.vue     | 12 ++++++------
 2 files changed, 12 insertions(+), 7 deletions(-)

diff --git a/src/renderer/components/ft-icon-button/ft-icon-button.js b/src/renderer/components/ft-icon-button/ft-icon-button.js
index ed3c469a0c08..84f34cff1cfd 100644
--- a/src/renderer/components/ft-icon-button/ft-icon-button.js
+++ b/src/renderer/components/ft-icon-button/ft-icon-button.js
@@ -128,7 +128,12 @@ export default defineComponent({
       if (this.mouseDownOnIcon) {
         this.mouseDownOnIcon = false
       } else if (!this.$refs.dropdown.matches(':focus-within')) {
-        this.dropdownShown = false
+        // workaround to close dropdown when originating ft-button is clicked
+        if (this.showFtButton) {
+          setTimeout(() => { this.dropdownShown = false }, 85)
+        } else {
+          this.dropdownShown = false
+        }
       }
     },
 
diff --git a/src/renderer/components/ft-icon-button/ft-icon-button.vue b/src/renderer/components/ft-icon-button/ft-icon-button.vue
index 11aeb64d7350..8f20b2961ff0 100644
--- a/src/renderer/components/ft-icon-button/ft-icon-button.vue
+++ b/src/renderer/components/ft-icon-button/ft-icon-button.vue
@@ -55,9 +55,9 @@
               aria-selected="false"
               tabindex="-1"
               :class="option.type === 'divider' ? 'listItemDivider' : 'listItem'"
-              @click="handleDropdownClick({url: option.value, index: index})"
-              @keydown.enter="handleDropdownClick({url: option.value, index: index})"
-              @keydown.space="handleDropdownClick({url: option.value, index: index})"
+              @click="handleDropdownClick({url: option.value, index})"
+              @keydown.enter="handleDropdownClick({url: option.value, index})"
+              @keydown.space="handleDropdownClick({url: option.value, index})"
             >
               {{ option.type === 'divider' ? '' : option.label }}
             </li>
@@ -136,9 +136,9 @@
                 listItem: option.type !== 'divider',
                 listItemDivider: option.type === 'divider'
               }"
-              @click="handleDropdownClick({url: option.value, index: index})"
-              @keydown.enter="handleDropdownClick({url: option.value, index: index})"
-              @keydown.space="handleDropdownClick({url: option.value, index: index})"
+              @click="handleDropdownClick({url: option.value, index})"
+              @keydown.enter="handleDropdownClick({url: option.value, index})"
+              @keydown.space="handleDropdownClick({url: option.value, index})"
             >
               <span>
                 {{ option.type === 'divider' ? '' : option.label }}

From 1e29ec23c9d24e4114d05665e0fefa4045b2d501 Mon Sep 17 00:00:00 2001
From: Jason Henriquez <jasonhenriquez@protonmail.com>
Date: Mon, 23 Oct 2023 02:49:01 -0500
Subject: [PATCH 03/14] Implement base UI for new list display settings

---
 .../ft-profile-selector.js                    | 19 +++-
 .../ft-profile-selector.vue                   |  2 +-
 src/renderer/components/side-nav/side-nav.js  | 14 ++-
 .../theme-settings/theme-settings.js          | 56 ++++++++++-
 .../theme-settings/theme-settings.vue         | 31 ++++++
 src/renderer/helpers/utils.js                 | 97 +++++++++++++++++++
 src/renderer/main.js                          |  2 +
 src/renderer/store/modules/settings.js        |  5 +
 static/locales/en-US.yaml                     | 10 +-
 9 files changed, 224 insertions(+), 12 deletions(-)

diff --git a/src/renderer/components/ft-profile-selector/ft-profile-selector.js b/src/renderer/components/ft-profile-selector/ft-profile-selector.js
index 24faf0fed688..7aa283b74e03 100644
--- a/src/renderer/components/ft-profile-selector/ft-profile-selector.js
+++ b/src/renderer/components/ft-profile-selector/ft-profile-selector.js
@@ -1,9 +1,8 @@
 import { defineComponent } from 'vue'
 import { mapActions } from 'vuex'
-
 import FtCard from '../../components/ft-card/ft-card.vue'
 import FtIconButton from '../../components/ft-icon-button/ft-icon-button.vue'
-import { showToast } from '../../helpers/utils'
+import { deepCopy, showToast, sortListUsingMethod } from '../../helpers/utils'
 
 export default defineComponent({
   name: 'FtProfileSelector',
@@ -21,6 +20,14 @@ export default defineComponent({
     profileList: function () {
       return this.$store.getters.getProfileList
     },
+    sortedProfileList: function () {
+      const profileList = deepCopy(this.profileList)
+      // profiles are already sorted
+      if (this.profileListSort !== 'alphabeticalAscending') {
+        sortListUsingMethod(profileList, 'name', this.profileListSort)
+      }
+      return profileList
+    },
     activeProfile: function () {
       return this.$store.getters.getActiveProfile
     },
@@ -32,7 +39,13 @@ export default defineComponent({
       return this.profileList.map((profile) => {
         return profile?.name?.length > 0 ? Array.from(profile.name)[0].toUpperCase() : ''
       })
-    }
+    },
+    profileListSort: function () {
+      return this.$store.getters.getProfileListSort
+    },
+    profileListCondensedOption: function () {
+      return this.$store.getters.getProfileListCondensedOption
+    },
   },
   methods: {
     toggleProfileList: function () {
diff --git a/src/renderer/components/ft-profile-selector/ft-profile-selector.vue b/src/renderer/components/ft-profile-selector/ft-profile-selector.vue
index f9696ad46a31..057a85eb4fac 100644
--- a/src/renderer/components/ft-profile-selector/ft-profile-selector.vue
+++ b/src/renderer/components/ft-profile-selector/ft-profile-selector.vue
@@ -41,7 +41,7 @@
         aria-labelledby="profileListTitle"
       >
         <div
-          v-for="(profile, index) in profileList"
+          v-for="(profile, index) in sortedProfileList"
           :id="'profile-' + index"
           :key="index"
           class="profile"
diff --git a/src/renderer/components/side-nav/side-nav.js b/src/renderer/components/side-nav/side-nav.js
index 76adcbfd581b..34d6dec6c720 100644
--- a/src/renderer/components/side-nav/side-nav.js
+++ b/src/renderer/components/side-nav/side-nav.js
@@ -2,7 +2,7 @@ import { defineComponent } from 'vue'
 import FtFlexBox from '../ft-flex-box/ft-flex-box.vue'
 import SideNavMoreOptions from '../side-nav-more-options/side-nav-more-options.vue'
 import { youtubeImageUrlToInvidious } from '../../helpers/api/invidious'
-import { deepCopy } from '../../helpers/utils'
+import { deepCopy, sortListUsingMethod } from '../../helpers/utils'
 
 export default defineComponent({
   name: 'SideNav',
@@ -35,9 +35,7 @@ export default defineComponent({
     activeSubscriptions: function () {
       const subscriptions = deepCopy(this.activeProfile.subscriptions)
 
-      subscriptions.sort((a, b) => {
-        return a.name?.toLowerCase().localeCompare(b.name?.toLowerCase(), this.locale)
-      })
+      sortListUsingMethod(subscriptions, 'name', this.subscriptionListSort)
 
       if (this.backendPreference === 'invidious') {
         subscriptions.forEach((channel) => {
@@ -65,6 +63,12 @@ export default defineComponent({
     hideText: function () {
       return !this.isOpen && this.hideLabelsSideBar
     },
+    subscriptionListSort: function () {
+      return this.$store.getters.getSubscriptionListSort
+    },
+    subscriptionListCondensedOption: function () {
+      return this.$store.getters.getSubscriptionListCondensedOption
+    },
     applyNavIconExpand: function() {
       return {
         navIconExpand: this.hideText
@@ -74,6 +78,6 @@ export default defineComponent({
       return {
         hiddenLabels: this.hideText
       }
-    }
+    },
   }
 })
diff --git a/src/renderer/components/theme-settings/theme-settings.js b/src/renderer/components/theme-settings/theme-settings.js
index 090a6dc8984c..26169ed7abb2 100644
--- a/src/renderer/components/theme-settings/theme-settings.js
+++ b/src/renderer/components/theme-settings/theme-settings.js
@@ -7,6 +7,8 @@ import FtSlider from '../ft-slider/ft-slider.vue'
 import FtFlexBox from '../ft-flex-box/ft-flex-box.vue'
 import FtPrompt from '../ft-prompt/ft-prompt.vue'
 import { colors } from '../../helpers/colors'
+import { listDisplayDropdownOptions, handleListDisplayDropdownOptionClick } from '../../helpers/utils'
+import FtIconButton from '../ft-icon-button/ft-icon-button.vue'
 
 export default defineComponent({
   name: 'ThemeSettings',
@@ -16,6 +18,7 @@ export default defineComponent({
     'ft-toggle-switch': FtToggleSwitch,
     'ft-slider': FtSlider,
     'ft-flex-box': FtFlexBox,
+    'ft-icon-button': FtIconButton,
     'ft-prompt': FtPrompt
   },
   data: function () {
@@ -124,7 +127,39 @@ export default defineComponent({
 
     usingElectron: function () {
       return process.env.IS_ELECTRON
-    }
+    },
+
+    subscriptionListSort: function () {
+      return this.$store.getters.getSubscriptionListSort
+    },
+
+    subscriptionListCondensedOption: function () {
+      return this.$store.getters.getSubscriptionListCondensedOption
+    },
+
+    profileListSort: function () {
+      return this.$store.getters.getProfileListSort
+    },
+
+    profileListCondensedOption: function () {
+      return this.$store.getters.getProfileListCondensedOption
+    },
+
+    settingsSectionListSort: function () {
+      return this.$store.getters.getSettingsSectionListSort
+    },
+
+    subscriptionListDisplayDropdownOptions: function () {
+      return listDisplayDropdownOptions(this.subscriptionListSort, false, this.subscriptionListCondensedOption)
+    },
+
+    profileListDisplayDropdownOptions: function () {
+      return listDisplayDropdownOptions(this.profileListSort, false, this.profileListCondensedOption)
+    },
+
+    settingsSectionListDisplayDropdownOptions: function () {
+      return listDisplayDropdownOptions(this.settingsSectionListSort, true)
+    },
   },
   mounted: function () {
     this.disableSmoothScrollingToggleValue = this.disableSmoothScrolling
@@ -159,6 +194,18 @@ export default defineComponent({
       })
     },
 
+    handleSubscriptionListDisplayDropdownOptionClick: function (option) {
+      handleListDisplayDropdownOptionClick(option, (o) => this.updateSubscriptionListSort(o), (o) => this.subscriptionListCondensedOption(o))
+    },
+
+    handleProfileListDisplayDropdownOptionClick: function (option) {
+      handleListDisplayDropdownOptionClick(option, (o) => this.updateProfileListSort(o), (o) => this.updateProfileListCondensedOption(o))
+    },
+
+    handleSettingsSectionListDisplayDropdownOptionClick: function (option) {
+      handleListDisplayDropdownOptionClick(option, (o) => this.updateSettingsSectionListSort(o))
+    },
+
     ...mapActions([
       'updateBarColor',
       'updateBaseTheme',
@@ -168,7 +215,12 @@ export default defineComponent({
       'updateUiScale',
       'updateDisableSmoothScrolling',
       'updateHideLabelsSideBar',
-      'updateHideHeaderLogo'
+      'updateHideHeaderLogo',
+      'updateSubscriptionListSort',
+      'updateSubscriptionListCondensedOption',
+      'updateProfileListSort',
+      'updateProfileListCondensedOption',
+      'updateSettingsSectionListSort'
     ])
   }
 })
diff --git a/src/renderer/components/theme-settings/theme-settings.vue b/src/renderer/components/theme-settings/theme-settings.vue
index 27cd6d8589c8..4c5603a27f51 100644
--- a/src/renderer/components/theme-settings/theme-settings.vue
+++ b/src/renderer/components/theme-settings/theme-settings.vue
@@ -51,6 +51,37 @@
       />
     </ft-flex-box>
     <br>
+    <!-- theme="base-no-default" -->
+    <ft-flex-box>
+      <ft-icon-button
+        :icon="['fas', 'bars']"
+        :title="$t('Settings.List Display Settings.Subscription List Display Options')"
+        :use-ft-button="true"
+        :close-on-click="false"
+        dropdown-position-x="bottom"
+        :dropdown-options="subscriptionListDisplayDropdownOptions"
+        @click="handleSubscriptionListDisplayDropdownOptionClick"
+      />
+      <ft-icon-button
+        :icon="['fas', 'user']"
+        :title="$t('Settings.List Display Settings.Profile List Display Options')"
+        :use-ft-button="true"
+        :close-on-click="false"
+        dropdown-position-x="bottom"
+        :dropdown-options="profileListDisplayDropdownOptions"
+        @click="handleProfileListDisplayDropdownOptionClick"
+      />
+      <ft-icon-button
+        :icon="['fas', 'sliders']"
+        :title="$t('Settings.List Display Settings.Settings Section List Display Options')"
+        :use-ft-button="true"
+        :close-on-click="false"
+        dropdown-position-x="bottom"
+        :dropdown-options="settingsSectionListDisplayDropdownOptions"
+        @click="handleSettingsSectionListDisplayDropdownOptionClick"
+      />
+    </ft-flex-box>
+    <br>
     <ft-flex-box>
       <ft-select
         :placeholder="$t('Settings.Theme Settings.Base Theme.Base Theme')"
diff --git a/src/renderer/helpers/utils.js b/src/renderer/helpers/utils.js
index 906a5f2d2d92..7286e350cfbd 100644
--- a/src/renderer/helpers/utils.js
+++ b/src/renderer/helpers/utils.js
@@ -4,12 +4,18 @@ import { IpcChannels } from '../../constants'
 import FtToastEvents from '../components/ft-toast/ft-toast-events'
 import i18n from '../i18n/index'
 import router from '../router/index'
+import store from '../store/index'
 
 // allowed characters in channel handle: A-Z, a-z, 0-9, -, _, .
 // https://support.google.com/youtube/answer/11585688#change_handle
 export const CHANNEL_HANDLE_REGEX = /^@[\w.-]{3,30}$/
 
 const PUBLISHED_TEXT_REGEX = /(\d+)\s?([a-z]+)/i
+
+function locale() {
+  return i18n.locale.replace('_', '-')
+}
+
 /**
  * @param {string} publishedText
  */
@@ -672,3 +678,94 @@ export function escapeHTML(untrusted) {
 export function deepCopy(obj) {
   return JSON.parse(JSON.stringify(obj))
 }
+
+export function listDisplayDropdownOptions(currentSort, showDefaultOption, currentCondensedOption) {
+  const radioGroup1 = []
+  const options = [
+    {
+      type: 'radiogroup',
+      radios: radioGroup1
+    }
+  ]
+  if (showDefaultOption) {
+    radioGroup1.push(
+      {
+        type: 'radiogroup',
+        label: i18n.t('Settings.List Display Settings.Use Default Sort'),
+        value: 'defaultSort',
+        checked: currentSort === 'defaultSort',
+      }
+    )
+  }
+
+  radioGroup1.push(
+    {
+      type: 'checkbox',
+      label: i18n.t('Settings.List Display Settings.Sort by Title (Ascending)'),
+      value: 'alphabeticalAscending',
+      checked: currentSort === 'alphabeticalAscending',
+    },
+    {
+      type: 'checkbox',
+      label: i18n.t('Settings.List Display Settings.Sort by Title (Descending)'),
+      value: 'alphabeticalDescending',
+      checked: currentSort === 'alphabeticalDescending',
+    }
+  )
+
+  if (currentCondensedOption) {
+    const radioGroup2 = []
+    options.push(
+      {
+        type: 'radiogroup',
+        radios: radioGroup2
+      }
+    )
+    radioGroup2.push(
+      {
+        type: 'divider'
+      },
+      {
+        type: 'checkbox',
+        label: i18n.t('Settings.List Display Settings.Show title when space is available'),
+        value: 'useSpaceForTitle',
+        checked: currentCondensedOption === 'useSpaceForTitle',
+      },
+      {
+        type: 'checkbox',
+        label: i18n.t('Settings.List Display Settings.Show more entries when space is available'),
+        value: 'useSpaceForMoreEntries',
+        checked: currentCondensedOption === 'useSpaceForMoreEntries',
+      }
+    )
+  }
+
+  return options
+}
+
+export function handleListDisplayDropdownOptionClick(option, sortCallback, condensedOptionCallback) {
+  switch (option) {
+    case 'defaultSort':
+    case 'alphabeticalAscending':
+    case 'alphabeticalDescending':
+      sortCallback(option)
+      break
+    case 'useSpaceForTitle':
+    case 'useSpaceForMoreEntries':
+      condensedOptionCallback(option)
+      break
+  }
+}
+
+export function sortListUsingMethod(list, property, method) {
+  switch (method) {
+    case 'defaultSort':
+      break
+    case 'alphabeticalAscending':
+      list.sort((a, b) => a[property]?.toLowerCase().localeCompare(b[property]?.toLowerCase(), locale()))
+      break
+    case 'alphabeticalDescending':
+      list.sort((a, b) => b[property]?.toLowerCase().localeCompare(a[property]?.toLowerCase(), locale()))
+      break
+  }
+}
diff --git a/src/renderer/main.js b/src/renderer/main.js
index c8345edf46fe..ff437e027128 100644
--- a/src/renderer/main.js
+++ b/src/renderer/main.js
@@ -62,6 +62,7 @@ import {
   faThumbtack,
   faTimes,
   faTimesCircle,
+  faUser,
   faUsers,
 } from '@fortawesome/free-solid-svg-icons'
 import {
@@ -134,6 +135,7 @@ library.add(
   faThumbtack,
   faTimes,
   faTimesCircle,
+  faUser,
   faUsers,
 
   // brand icons
diff --git a/src/renderer/store/modules/settings.js b/src/renderer/store/modules/settings.js
index ba2ff912b121..3dec9f30bce4 100644
--- a/src/renderer/store/modules/settings.js
+++ b/src/renderer/store/modules/settings.js
@@ -297,6 +297,11 @@ const state = {
   allowDashAv1Formats: false,
   commentAutoLoadEnabled: false,
   useDeArrowTitles: false,
+  profileListCondensedOption: 'useSpaceForTitle',
+  profileListSort: 'alphabeticalAscending',
+  subscriptionListCondensedOption: 'useSpaceForTitle',
+  subscriptionListSort: 'alphabeticalAscending',
+  settingsSectionListSort: 'defaultSort',
 }
 
 const stateWithSideEffects = {
diff --git a/static/locales/en-US.yaml b/static/locales/en-US.yaml
index b1b6a720a6e2..9fa5a19ce1c2 100644
--- a/static/locales/en-US.yaml
+++ b/static/locales/en-US.yaml
@@ -52,7 +52,6 @@ Global:
     Subscriber Count: 1 subscriber | {count} subscribers
     View Count: 1 view | {count} views
     Watching Count: 1 watching | {count} watching
-
 # Search Bar
 Search / Go to URL: Search / Go to URL
 Search Bar:
@@ -474,6 +473,15 @@ Settings:
     Set Password To Prevent Access: Set a password to prevent access to settings
     Set Password: Set Password
     Remove Password: Remove Password
+  List Display Settings:
+    Subscription List Display Options: Subscription List Display Options
+    Profile List Display Options: Profile List Display Options
+    Settings Section List Display Options: Settings Section List Display Options
+    Use Default Sort: Use Default Sort
+    Sort by Title (Ascending): Sort by Title (Ascending)
+    Sort by Title (Descending): Sort by Title (Descending)
+    Show title when space is available: Show title when space is available
+    Show more entries when space is available: Show more entries when space is available
 About:
   #On About page
   About: About

From e8e8116723a555806deb74ee2ad56aad14accf0d Mon Sep 17 00:00:00 2001
From: Jason Henriquez <jasonhenriquez@protonmail.com>
Date: Tue, 24 Oct 2023 09:00:22 -0500
Subject: [PATCH 04/14] Update ft-icon-button dropdown focusout logic to work
 for new paradigm as well

---
 .../ft-icon-button/ft-icon-button.js          | 23 ++++++-------------
 .../ft-icon-button/ft-icon-button.vue         | 10 +++++---
 2 files changed, 14 insertions(+), 19 deletions(-)

diff --git a/src/renderer/components/ft-icon-button/ft-icon-button.js b/src/renderer/components/ft-icon-button/ft-icon-button.js
index 84f34cff1cfd..f523ceea46ce 100644
--- a/src/renderer/components/ft-icon-button/ft-icon-button.js
+++ b/src/renderer/components/ft-icon-button/ft-icon-button.js
@@ -80,10 +80,14 @@ export default defineComponent({
   data: function () {
     return {
       dropdownShown: false,
-      mouseDownOnIcon: false,
       useModal: false
     }
   },
+  computed: {
+    id: function () {
+      return sanitizeForHtmlId(`iconButton-${this.title}`)
+    }
+  },
   mounted: function () {
     if (this.dropdownModalOnMobile) {
       this.useModal = window.innerWidth <= 900
@@ -118,22 +122,9 @@ export default defineComponent({
       }
     },
 
-    handleIconMouseDown: function () {
-      if (this.dropdownShown) {
-        this.mouseDownOnIcon = true
-      }
-    },
-
     handleDropdownFocusOut: function () {
-      if (this.mouseDownOnIcon) {
-        this.mouseDownOnIcon = false
-      } else if (!this.$refs.dropdown.matches(':focus-within')) {
-        // workaround to close dropdown when originating ft-button is clicked
-        if (this.showFtButton) {
-          setTimeout(() => { this.dropdownShown = false }, 85)
-        } else {
-          this.dropdownShown = false
-        }
+      if (this.dropdownShown && !this.$refs.iconButton.matches(':focus-within')) {
+        this.dropdownShown = false
       }
     },
 
diff --git a/src/renderer/components/ft-icon-button/ft-icon-button.vue b/src/renderer/components/ft-icon-button/ft-icon-button.vue
index 8f20b2961ff0..e593aae93d0c 100644
--- a/src/renderer/components/ft-icon-button/ft-icon-button.vue
+++ b/src/renderer/components/ft-icon-button/ft-icon-button.vue
@@ -1,7 +1,12 @@
 <template>
-  <div class="ftIconButton">
+  <div
+    ref="iconButton"
+    class="ftIconButton"
+    @focusout="handleDropdownFocusOut()"
+  >
     <font-awesome-icon
       v-if="!hideIcon && !useFtButton"
+      :id="id"
       class="iconButton"
       :title="title"
       :icon="icon"
@@ -16,12 +21,12 @@
       tabindex="0"
       role="button"
       @click="handleIconClick"
-      @mousedown="handleIconMouseDown"
       @keydown.enter.prevent="handleIconClick"
       @keydown.space.prevent="handleIconClick"
     />
     <ft-button
       v-if="useFtButton"
+      :id="id"
       class="iconFtButton"
       @click="handleIconClick"
     >
@@ -76,7 +81,6 @@
           bottom: dropdownPositionY === 'bottom',
           top: dropdownPositionY === 'top'
         }"
-        @focusout="handleDropdownFocusOut"
       >
         <slot>
           <template

From c574dd8e63a8aa7ec668a8c1d8fe4ab8f5deaa69 Mon Sep 17 00:00:00 2001
From: Jason Henriquez <jasonhenriquez@protonmail.com>
Date: Tue, 24 Oct 2023 09:31:08 -0500
Subject: [PATCH 05/14] Update settings objects & logic to use list/grid
 paradigm

---
 .../ft-channel-bubble/ft-channel-bubble.css   |  14 ++
 .../ft-channel-bubble/ft-channel-bubble.js    |   4 +
 .../ft-channel-bubble/ft-channel-bubble.vue   |   3 +
 .../ft-profile-selector.js                    |  13 +-
 src/renderer/components/side-nav/side-nav.css |   9 +
 src/renderer/components/side-nav/side-nav.js  |  16 +-
 src/renderer/components/side-nav/side-nav.vue |  22 ++-
 .../theme-settings/theme-settings.js          | 186 +++++++++++++++---
 src/renderer/helpers/utils.js                 |  79 --------
 src/renderer/store/modules/settings.js        |  20 +-
 static/locales/en-US.yaml                     |  17 +-
 11 files changed, 253 insertions(+), 130 deletions(-)

diff --git a/src/renderer/components/ft-channel-bubble/ft-channel-bubble.css b/src/renderer/components/ft-channel-bubble/ft-channel-bubble.css
index fcb7b96e50df..fba11079830d 100644
--- a/src/renderer/components/ft-channel-bubble/ft-channel-bubble.css
+++ b/src/renderer/components/ft-channel-bubble/ft-channel-bubble.css
@@ -25,6 +25,20 @@
   transition: background 0.2s ease-in;
 }
 
+.bubblePadding.small {
+  min-inline-size: 40%;
+  min-block-size: 55px;
+  gap: 0px;
+  padding-block: 5px;
+  padding-inline: 5px;
+  box-sizing: border-box;
+}
+
+.bubblePadding.small > .bubble {
+  inline-size: 35px;
+  block-size: 35px;
+}
+
 .bubble {
   inline-size: 50px;
   block-size: 50px;
diff --git a/src/renderer/components/ft-channel-bubble/ft-channel-bubble.js b/src/renderer/components/ft-channel-bubble/ft-channel-bubble.js
index c9854b34d6eb..a1f5cdee00dc 100644
--- a/src/renderer/components/ft-channel-bubble/ft-channel-bubble.js
+++ b/src/renderer/components/ft-channel-bubble/ft-channel-bubble.js
@@ -18,6 +18,10 @@ export default defineComponent({
     showSelected: {
       type: Boolean,
       default: false
+    },
+    appearance: {
+      type: String,
+      default: 'default'
     }
   },
   data: function () {
diff --git a/src/renderer/components/ft-channel-bubble/ft-channel-bubble.vue b/src/renderer/components/ft-channel-bubble/ft-channel-bubble.vue
index 53abe2f282c3..e457b211ab08 100644
--- a/src/renderer/components/ft-channel-bubble/ft-channel-bubble.vue
+++ b/src/renderer/components/ft-channel-bubble/ft-channel-bubble.vue
@@ -2,6 +2,9 @@
   <router-link
     v-if="!showSelected"
     class="bubblePadding"
+    :class="{
+      [appearance]: true
+    }"
     :aria-labelledby="sanitizedId"
     :to="`/channel/${channelId}`"
   >
diff --git a/src/renderer/components/ft-profile-selector/ft-profile-selector.js b/src/renderer/components/ft-profile-selector/ft-profile-selector.js
index 7aa283b74e03..c0f759d87274 100644
--- a/src/renderer/components/ft-profile-selector/ft-profile-selector.js
+++ b/src/renderer/components/ft-profile-selector/ft-profile-selector.js
@@ -22,9 +22,9 @@ export default defineComponent({
     },
     sortedProfileList: function () {
       const profileList = deepCopy(this.profileList)
-      // profiles are already sorted
-      if (this.profileListSort !== 'alphabeticalAscending') {
-        sortListUsingMethod(profileList, 'name', this.profileListSort)
+      // profiles are already sorted alphabetically ascending
+      if (this.profileListOptions.sort !== 'alphabeticalAscending') {
+        sortListUsingMethod(profileList, 'name', this.profileListOptions.sort)
       }
       return profileList
     },
@@ -40,11 +40,8 @@ export default defineComponent({
         return profile?.name?.length > 0 ? Array.from(profile.name)[0].toUpperCase() : ''
       })
     },
-    profileListSort: function () {
-      return this.$store.getters.getProfileListSort
-    },
-    profileListCondensedOption: function () {
-      return this.$store.getters.getProfileListCondensedOption
+    profileListOptions: function () {
+      return this.$store.getters.getProfileListOptions
     },
   },
   methods: {
diff --git a/src/renderer/components/side-nav/side-nav.css b/src/renderer/components/side-nav/side-nav.css
index de36a3f621bf..ddaf8c8c236b 100644
--- a/src/renderer/components/side-nav/side-nav.css
+++ b/src/renderer/components/side-nav/side-nav.css
@@ -169,6 +169,15 @@
   margin-block-end: 0.3em;
 }
 
+.grid {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.useSpaceForMoreEntriesWithTitles > * {
+  flex: 1;
+}
+
 @media only screen and (max-width: 680px) {
   .inner {
     display: contents; /* sunglasses emoji */
diff --git a/src/renderer/components/side-nav/side-nav.js b/src/renderer/components/side-nav/side-nav.js
index 34d6dec6c720..7f86fadb795f 100644
--- a/src/renderer/components/side-nav/side-nav.js
+++ b/src/renderer/components/side-nav/side-nav.js
@@ -1,4 +1,5 @@
 import { defineComponent } from 'vue'
+import FtChannelBubble from '../ft-channel-bubble/ft-channel-bubble.vue'
 import FtFlexBox from '../ft-flex-box/ft-flex-box.vue'
 import SideNavMoreOptions from '../side-nav-more-options/side-nav-more-options.vue'
 import { youtubeImageUrlToInvidious } from '../../helpers/api/invidious'
@@ -7,6 +8,7 @@ import { deepCopy, sortListUsingMethod } from '../../helpers/utils'
 export default defineComponent({
   name: 'SideNav',
   components: {
+    'ft-channel-bubble': FtChannelBubble,
     'ft-flex-box': FtFlexBox,
     'side-nav-more-options': SideNavMoreOptions
   },
@@ -35,7 +37,7 @@ export default defineComponent({
     activeSubscriptions: function () {
       const subscriptions = deepCopy(this.activeProfile.subscriptions)
 
-      sortListUsingMethod(subscriptions, 'name', this.subscriptionListSort)
+      sortListUsingMethod(subscriptions, 'name', this.subscriptionListOptions.sort)
 
       if (this.backendPreference === 'invidious') {
         subscriptions.forEach((channel) => {
@@ -63,11 +65,8 @@ export default defineComponent({
     hideText: function () {
       return !this.isOpen && this.hideLabelsSideBar
     },
-    subscriptionListSort: function () {
-      return this.$store.getters.getSubscriptionListSort
-    },
-    subscriptionListCondensedOption: function () {
-      return this.$store.getters.getSubscriptionListCondensedOption
+    subscriptionListOptions: function () {
+      return this.$store.getters.getSubscriptionListOptions
     },
     applyNavIconExpand: function() {
       return {
@@ -79,5 +78,10 @@ export default defineComponent({
         hiddenLabels: this.hideText
       }
     },
+  },
+  methods: {
+    navigate: function (route) {
+      this.$router.push('/' + route)
+    },
   }
 })
diff --git a/src/renderer/components/side-nav/side-nav.vue b/src/renderer/components/side-nav/side-nav.vue
index b46924602902..a19afdeffefe 100644
--- a/src/renderer/components/side-nav/side-nav.vue
+++ b/src/renderer/components/side-nav/side-nav.vue
@@ -200,7 +200,7 @@
       </router-link>
       <hr>
       <div
-        v-if="!hideActiveSubscriptions"
+        v-if="!hideActiveSubscriptions && (!isOpen | subscriptionList.displayType === 'list')"
       >
         <router-link
           v-for="(channel, index) in activeSubscriptions"
@@ -208,7 +208,7 @@
           :to="`/channel/${channel.id}`"
           class="navChannel channelLink mobileHidden"
           :title="channel.name"
-          role="button"
+          role="link"
         >
           <div
             class="thumbnailContainer"
@@ -230,6 +230,24 @@
           </p>
         </router-link>
       </div>
+      <!-- && !(subscriptionListOptions.displayType === 'grid' &&
+              !subscriptionListOptions.showGridItemTitles) -->
+      <div
+        v-if="isOpen && subscriptionListOptions.displayType === 'grid'"
+        class="grid"
+        :style="{ minInlineSize: (subscriptionListOptions.itemsPerGridRow * 100) + '%'} "
+      >
+        <ft-channel-bubble
+          v-for="(channel, index) in activeSubscriptions"
+          :id="`sidenav-channel-${index}`"
+          :key="index"
+          :channel-id="channel.id"
+          :channel-name="channel.name"
+          :channel-thumbnail="channel.thumbnail"
+          appearance="small"
+          @click="navigate(`channel/${channel.id}`)"
+        />
+      </div>
     </div>
   </ft-flex-box>
 </template>
diff --git a/src/renderer/components/theme-settings/theme-settings.js b/src/renderer/components/theme-settings/theme-settings.js
index 26169ed7abb2..07d14c382ee9 100644
--- a/src/renderer/components/theme-settings/theme-settings.js
+++ b/src/renderer/components/theme-settings/theme-settings.js
@@ -7,7 +7,6 @@ import FtSlider from '../ft-slider/ft-slider.vue'
 import FtFlexBox from '../ft-flex-box/ft-flex-box.vue'
 import FtPrompt from '../ft-prompt/ft-prompt.vue'
 import { colors } from '../../helpers/colors'
-import { listDisplayDropdownOptions, handleListDisplayDropdownOptionClick } from '../../helpers/utils'
 import FtIconButton from '../ft-icon-button/ft-icon-button.vue'
 
 export default defineComponent({
@@ -129,36 +128,28 @@ export default defineComponent({
       return process.env.IS_ELECTRON
     },
 
-    subscriptionListSort: function () {
-      return this.$store.getters.getSubscriptionListSort
+    subscriptionListOptions: function () {
+      return this.$store.getters.getSubscriptionListOptions
     },
 
-    subscriptionListCondensedOption: function () {
-      return this.$store.getters.getSubscriptionListCondensedOption
+    profileListOptions: function () {
+      return this.$store.getters.getProfileListOptions
     },
 
-    profileListSort: function () {
-      return this.$store.getters.getProfileListSort
-    },
-
-    profileListCondensedOption: function () {
-      return this.$store.getters.getProfileListCondensedOption
-    },
-
-    settingsSectionListSort: function () {
-      return this.$store.getters.getSettingsSectionListSort
+    settingsSectionListOptions: function () {
+      return this.$store.getters.getSettingsSectionListOptions
     },
 
     subscriptionListDisplayDropdownOptions: function () {
-      return listDisplayDropdownOptions(this.subscriptionListSort, false, this.subscriptionListCondensedOption)
+      return this.listDisplayDropdownOptions(this.subscriptionListOptions, false)
     },
 
     profileListDisplayDropdownOptions: function () {
-      return listDisplayDropdownOptions(this.profileListSort, false, this.profileListCondensedOption)
+      return this.listDisplayDropdownOptions(this.profileListOptions, false)
     },
 
     settingsSectionListDisplayDropdownOptions: function () {
-      return listDisplayDropdownOptions(this.settingsSectionListSort, true)
+      return this.listDisplayDropdownOptions(this.settingsSectionListOptions, true)
     },
   },
   mounted: function () {
@@ -195,15 +186,161 @@ export default defineComponent({
     },
 
     handleSubscriptionListDisplayDropdownOptionClick: function (option) {
-      handleListDisplayDropdownOptionClick(option, (o) => this.updateSubscriptionListSort(o), (o) => this.subscriptionListCondensedOption(o))
+      const newListOptions = this.getNewListOptions(this.subscriptionListOptions, option)
+      this.updateSubscriptionListOptions(newListOptions)
     },
 
     handleProfileListDisplayDropdownOptionClick: function (option) {
-      handleListDisplayDropdownOptionClick(option, (o) => this.updateProfileListSort(o), (o) => this.updateProfileListCondensedOption(o))
+      const newListOptions = this.getNewListOptions(this.profileListOptions, option)
+      this.updateProfileListOptions(newListOptions)
     },
 
     handleSettingsSectionListDisplayDropdownOptionClick: function (option) {
-      handleListDisplayDropdownOptionClick(option, (o) => this.updateSettingsSectionListSort(o))
+      const newListOptions = this.getNewListOptions(this.settingsSectionListOptions, option)
+      this.updateSettingsSectionListOptions(newListOptions)
+    },
+
+    getNewListOptions: function(list, option) {
+      switch (option) {
+        case 'defaultSort':
+        case 'alphabeticalAscending':
+        case 'alphabeticalDescending':
+          return {
+            ...list,
+            sort: option
+          }
+        case 'showGridItemTitles':
+        case 'hideGridItemTitles':
+          return {
+            ...list,
+            showGridItemTitles: option === 'showGridItemTitles'
+          }
+        case 'list':
+        case 'grid':
+          return {
+            ...list,
+            displayType: option
+          }
+        default:
+          return {
+            ...list,
+            itemsPerGridRow: option
+          }
+      }
+    },
+
+    listDisplayDropdownOptions: function (listOptions, showDefaultOption) {
+      const radioGroupSort = []
+      const options = [
+        {
+          type: 'radiogroup',
+          radios: radioGroupSort
+        }
+      ]
+      if (showDefaultOption) {
+        radioGroupSort.push(
+          {
+            type: 'checkbox',
+            label: this.$t('Settings.List Display Settings.Sort.Use Default Sort'),
+            value: 'defaultSort',
+            checked: listOptions.sort === 'defaultSort',
+          }
+        )
+      }
+
+      radioGroupSort.push(
+        {
+          type: 'checkbox',
+          label: this.$t('Settings.List Display Settings.Sort.Sort by Title (Ascending)'),
+          value: 'alphabeticalAscending',
+          checked: listOptions.sort === 'alphabeticalAscending',
+        },
+        {
+          type: 'checkbox',
+          label: this.$t('Settings.List Display Settings.Sort.Sort by Title (Descending)'),
+          value: 'alphabeticalDescending',
+          checked: listOptions.sort === 'alphabeticalDescending',
+        }
+      )
+
+      if (listOptions.displayType) {
+        const radioGroupDisplayType = []
+        options.push(
+          {
+            type: 'radiogroup',
+            radios: radioGroupDisplayType
+          }
+        )
+        radioGroupDisplayType.push(
+          {
+            type: 'divider'
+          },
+          {
+            type: 'checkbox',
+            label: this.$t('Settings.List Display Settings.Display Type.List'),
+            value: 'list',
+            checked: listOptions.displayType === 'list',
+          },
+          {
+            type: 'checkbox',
+            label: this.$t('Settings.List Display Settings.Display Type.Grid.Grid'),
+            value: 'grid',
+            checked: listOptions.displayType === 'grid',
+          }
+        )
+
+        if (listOptions.displayType === 'grid') {
+          const radioGroupItemsPerGridRow = []
+          options.push(
+            {
+              type: 'radiogroup',
+              radios: radioGroupItemsPerGridRow
+            }
+          )
+
+          radioGroupItemsPerGridRow.push(
+            {
+              type: 'divider'
+            }
+          )
+
+          for (let i = 2; i <= 5; ++i) {
+            radioGroupItemsPerGridRow.push({
+              type: 'checkbox',
+              label: this.$tc('Settings.List Display Settings.Display Type.Grid.Item per grid row', i, { number: i }),
+              value: i,
+              checked: listOptions.itemsPerGridRow === i
+            })
+          }
+
+          const radioGroupShowGridItemTitles = []
+          options.push(
+            {
+              type: 'radiogroup',
+              radios: radioGroupShowGridItemTitles
+            }
+          )
+          radioGroupShowGridItemTitles.push(
+            {
+              type: 'divider'
+            },
+            {
+              type: 'checkbox',
+              label: this.$t('Settings.List Display Settings.Titles.Grid.Show Grid Item Titles'),
+              value: 'showGridItemTitles',
+              checked: listOptions.showGridItemTitles
+            },
+            {
+              type: 'checkbox',
+              label: this.$t('Settings.List Display Settings.Titles.Grid.Hide Grid Item Titles'),
+              value: 'hideGridItemTitles',
+              checked: !listOptions.showGridItemTitles,
+            }
+          )
+        }
+      }
+
+      return options
     },
 
     ...mapActions([
@@ -217,10 +354,9 @@ export default defineComponent({
       'updateHideLabelsSideBar',
       'updateHideHeaderLogo',
       'updateSubscriptionListSort',
-      'updateSubscriptionListCondensedOption',
-      'updateProfileListSort',
-      'updateProfileListCondensedOption',
-      'updateSettingsSectionListSort'
+      'updateSubscriptionListOptions',
+      'updateProfileListOptions',
+      'updateSettingsSectionListOptions'
     ])
   }
 })
diff --git a/src/renderer/helpers/utils.js b/src/renderer/helpers/utils.js
index 7286e350cfbd..ab49b0de189a 100644
--- a/src/renderer/helpers/utils.js
+++ b/src/renderer/helpers/utils.js
@@ -4,7 +4,6 @@ import { IpcChannels } from '../../constants'
 import FtToastEvents from '../components/ft-toast/ft-toast-events'
 import i18n from '../i18n/index'
 import router from '../router/index'
-import store from '../store/index'
 
 // allowed characters in channel handle: A-Z, a-z, 0-9, -, _, .
 // https://support.google.com/youtube/answer/11585688#change_handle
@@ -679,84 +678,6 @@ export function deepCopy(obj) {
   return JSON.parse(JSON.stringify(obj))
 }
 
-export function listDisplayDropdownOptions(currentSort, showDefaultOption, currentCondensedOption) {
-  const radioGroup1 = []
-  const options = [
-    {
-      type: 'radiogroup',
-      radios: radioGroup1
-    }
-  ]
-  if (showDefaultOption) {
-    radioGroup1.push(
-      {
-        type: 'radiogroup',
-        label: i18n.t('Settings.List Display Settings.Use Default Sort'),
-        value: 'defaultSort',
-        checked: currentSort === 'defaultSort',
-      }
-    )
-  }
-
-  radioGroup1.push(
-    {
-      type: 'checkbox',
-      label: i18n.t('Settings.List Display Settings.Sort by Title (Ascending)'),
-      value: 'alphabeticalAscending',
-      checked: currentSort === 'alphabeticalAscending',
-    },
-    {
-      type: 'checkbox',
-      label: i18n.t('Settings.List Display Settings.Sort by Title (Descending)'),
-      value: 'alphabeticalDescending',
-      checked: currentSort === 'alphabeticalDescending',
-    }
-  )
-
-  if (currentCondensedOption) {
-    const radioGroup2 = []
-    options.push(
-      {
-        type: 'radiogroup',
-        radios: radioGroup2
-      }
-    )
-    radioGroup2.push(
-      {
-        type: 'divider'
-      },
-      {
-        type: 'checkbox',
-        label: i18n.t('Settings.List Display Settings.Show title when space is available'),
-        value: 'useSpaceForTitle',
-        checked: currentCondensedOption === 'useSpaceForTitle',
-      },
-      {
-        type: 'checkbox',
-        label: i18n.t('Settings.List Display Settings.Show more entries when space is available'),
-        value: 'useSpaceForMoreEntries',
-        checked: currentCondensedOption === 'useSpaceForMoreEntries',
-      }
-    )
-  }
-
-  return options
-}
-
-export function handleListDisplayDropdownOptionClick(option, sortCallback, condensedOptionCallback) {
-  switch (option) {
-    case 'defaultSort':
-    case 'alphabeticalAscending':
-    case 'alphabeticalDescending':
-      sortCallback(option)
-      break
-    case 'useSpaceForTitle':
-    case 'useSpaceForMoreEntries':
-      condensedOptionCallback(option)
-      break
-  }
-}
-
 export function sortListUsingMethod(list, property, method) {
   switch (method) {
     case 'defaultSort':
diff --git a/src/renderer/store/modules/settings.js b/src/renderer/store/modules/settings.js
index 3dec9f30bce4..3da4c2f01b72 100644
--- a/src/renderer/store/modules/settings.js
+++ b/src/renderer/store/modules/settings.js
@@ -297,11 +297,21 @@ const state = {
   allowDashAv1Formats: false,
   commentAutoLoadEnabled: false,
   useDeArrowTitles: false,
-  profileListCondensedOption: 'useSpaceForTitle',
-  profileListSort: 'alphabeticalAscending',
-  subscriptionListCondensedOption: 'useSpaceForTitle',
-  subscriptionListSort: 'alphabeticalAscending',
-  settingsSectionListSort: 'defaultSort',
+  profileListOptions: {
+    sort: 'alphabeticalAscending',
+    displayType: 'list',
+    showGridItemTitles: true,
+    itemsPerGridRow: 2
+  },
+  subscriptionListOptions: {
+    sort: 'alphabeticalAscending',
+    displayType: 'list',
+    showGridItemTitles: true,
+    itemsPerGridRow: 2
+  },
+  settingsSectionListOptions: {
+    sort: 'alphabeticalAscending'
+  }
 }
 
 const stateWithSideEffects = {
diff --git a/static/locales/en-US.yaml b/static/locales/en-US.yaml
index 9fa5a19ce1c2..f69d1f3a28e0 100644
--- a/static/locales/en-US.yaml
+++ b/static/locales/en-US.yaml
@@ -477,11 +477,18 @@ Settings:
     Subscription List Display Options: Subscription List Display Options
     Profile List Display Options: Profile List Display Options
     Settings Section List Display Options: Settings Section List Display Options
-    Use Default Sort: Use Default Sort
-    Sort by Title (Ascending): Sort by Title (Ascending)
-    Sort by Title (Descending): Sort by Title (Descending)
-    Show title when space is available: Show title when space is available
-    Show more entries when space is available: Show more entries when space is available
+    Sort:
+      Use Default Sort: Use Default Sort
+      Sort by Title (Ascending): Sort by Title (Ascending)
+      Sort by Title (Descending): Sort by Title (Descending)
+    Display Type:
+      List: List
+      Grid:
+        Grid: Grid
+        Item per grid row: 1 item per grid row | {number} items per grid row
+        Show Grid Item Titles: Show Grid Item Titles
+        Hide Grid Item Titles: Hide Grid Item Titles
+
 About:
   #On About page
   About: About

From 24cf09ba61f6a938cf9ee9c262f2f1ff6af0932c Mon Sep 17 00:00:00 2001
From: Jason Henriquez <jasonhenriquez@protonmail.com>
Date: Tue, 24 Oct 2023 21:39:04 -0500
Subject: [PATCH 06/14] Implement side nav subscription list options

---
 .../ft-channel-bubble/ft-channel-bubble.css   | 20 +++++++-------
 .../ft-channel-bubble/ft-channel-bubble.js    | 16 +++++++++---
 .../ft-channel-bubble/ft-channel-bubble.vue   | 14 +++++++++-
 .../ft-icon-button/ft-icon-button.scss        |  5 ++++
 .../ft-icon-button/ft-icon-button.vue         |  7 ++++-
 src/renderer/components/side-nav/side-nav.css |  6 +----
 src/renderer/components/side-nav/side-nav.vue | 12 ++++-----
 .../theme-settings/theme-settings.js          | 10 +++----
 .../theme-settings/theme-settings.vue         | 26 ++++++++++---------
 static/locales/en-US.yaml                     | 10 +++----
 10 files changed, 78 insertions(+), 48 deletions(-)

diff --git a/src/renderer/components/ft-channel-bubble/ft-channel-bubble.css b/src/renderer/components/ft-channel-bubble/ft-channel-bubble.css
index fba11079830d..1bcc07735dda 100644
--- a/src/renderer/components/ft-channel-bubble/ft-channel-bubble.css
+++ b/src/renderer/components/ft-channel-bubble/ft-channel-bubble.css
@@ -25,23 +25,25 @@
   transition: background 0.2s ease-in;
 }
 
-.bubblePadding.small {
-  min-inline-size: 40%;
-  min-block-size: 55px;
-  gap: 0px;
+.bubblePadding.sideNavGrid {
   padding-block: 5px;
-  padding-inline: 5px;
-  box-sizing: border-box;
+  padding-inline: 0;
+  gap: 10px;
+  block-size: unset;
 }
 
-.bubblePadding.small > .bubble {
+.bubblePadding.sideNavGrid > .bubble {
   inline-size: 35px;
   block-size: 35px;
 }
 
+.bubblePadding.sideNavGrid > .channelName {
+  max-inline-size: 90%;
+  font-size: 10.5px;
+  white-space: nowrap;
+}
+
 .bubble {
-  inline-size: 50px;
-  block-size: 50px;
   border-radius: 100%;
   -webkit-border-radius: 100%;
 }
diff --git a/src/renderer/components/ft-channel-bubble/ft-channel-bubble.js b/src/renderer/components/ft-channel-bubble/ft-channel-bubble.js
index a1f5cdee00dc..a8632c5c70bc 100644
--- a/src/renderer/components/ft-channel-bubble/ft-channel-bubble.js
+++ b/src/renderer/components/ft-channel-bubble/ft-channel-bubble.js
@@ -15,14 +15,22 @@ export default defineComponent({
       type: String,
       required: true
     },
+    bubbleSize: {
+      type: Number,
+      default: 50
+    },
     showSelected: {
       type: Boolean,
       default: false
     },
-    appearance: {
-      type: String,
-      default: 'default'
-    }
+    showTitle: {
+      type: Boolean,
+      default: true
+    },
+    sideNavGrid: {
+      type: Boolean,
+      default: false
+    },
   },
   data: function () {
     return {
diff --git a/src/renderer/components/ft-channel-bubble/ft-channel-bubble.vue b/src/renderer/components/ft-channel-bubble/ft-channel-bubble.vue
index e457b211ab08..6d61717d45d5 100644
--- a/src/renderer/components/ft-channel-bubble/ft-channel-bubble.vue
+++ b/src/renderer/components/ft-channel-bubble/ft-channel-bubble.vue
@@ -3,17 +3,23 @@
     v-if="!showSelected"
     class="bubblePadding"
     :class="{
-      [appearance]: true
+      sideNavGrid
     }"
     :aria-labelledby="sanitizedId"
+    :title="showTitle ? null : channelName"
     :to="`/channel/${channelId}`"
   >
     <img
       class="bubble"
+      :style="{
+        blockSize: bubbleSize + 'px',
+        inlineSize: bubbleSize + 'px'
+      }"
       :src="channelThumbnail"
       alt=""
     >
     <div
+      v-if="showTitle"
       :id="sanitizedId"
       class="channelName"
     >
@@ -26,11 +32,16 @@
     role="button"
     tabindex="0"
     :aria-labelledby="sanitizedId"
+    :title="showTitle ? null : channelName"
     @click="handleClick"
     @keydown.space.enter.prevent="handleClick($event)"
   >
     <img
       class="bubble"
+      :style="{
+        blockSize: bubbleSize + 'px',
+        inlineSize: bubbleSize + 'px'
+      }"
       :src="channelThumbnail"
       alt=""
     >
@@ -45,6 +56,7 @@
     </div>
     <div
       :id="sanitizedId"
+      :hidden="!showTitle"
       class="channelName"
     >
       {{ channelName }}
diff --git a/src/renderer/components/ft-icon-button/ft-icon-button.scss b/src/renderer/components/ft-icon-button/ft-icon-button.scss
index 89314910e36a..05702d4217bd 100644
--- a/src/renderer/components/ft-icon-button/ft-icon-button.scss
+++ b/src/renderer/components/ft-icon-button/ft-icon-button.scss
@@ -81,6 +81,11 @@
   }
 }
 
+.iconFtButton {
+  display: flex;
+  gap: 10px;
+}
+
 .iconDropdown {
   background-color: var(--side-nav-color);
   box-shadow: 0 1px 2px rgb(0 0 0 / 50%);
diff --git a/src/renderer/components/ft-icon-button/ft-icon-button.vue b/src/renderer/components/ft-icon-button/ft-icon-button.vue
index e593aae93d0c..b94b7ff877ac 100644
--- a/src/renderer/components/ft-icon-button/ft-icon-button.vue
+++ b/src/renderer/components/ft-icon-button/ft-icon-button.vue
@@ -33,8 +33,13 @@
       <font-awesome-icon
         :icon="!hideIcon ? icon : null"
         :class="{ [theme]: true }"
+        :style="{
+          fontSize: size + 'px'
+        }"
       />
-      {{ title }}
+      <span>
+        {{ title }}
+      </span>
     </ft-button>
     <template
       v-if="dropdownShown"
diff --git a/src/renderer/components/side-nav/side-nav.css b/src/renderer/components/side-nav/side-nav.css
index ddaf8c8c236b..75e571b10596 100644
--- a/src/renderer/components/side-nav/side-nav.css
+++ b/src/renderer/components/side-nav/side-nav.css
@@ -169,15 +169,11 @@
   margin-block-end: 0.3em;
 }
 
-.grid {
+.iconGrid {
   display: flex;
   flex-wrap: wrap;
 }
 
-.useSpaceForMoreEntriesWithTitles > * {
-  flex: 1;
-}
-
 @media only screen and (max-width: 680px) {
   .inner {
     display: contents; /* sunglasses emoji */
diff --git a/src/renderer/components/side-nav/side-nav.vue b/src/renderer/components/side-nav/side-nav.vue
index a19afdeffefe..2400158185dc 100644
--- a/src/renderer/components/side-nav/side-nav.vue
+++ b/src/renderer/components/side-nav/side-nav.vue
@@ -200,7 +200,7 @@
       </router-link>
       <hr>
       <div
-        v-if="!hideActiveSubscriptions && (!isOpen | subscriptionList.displayType === 'list')"
+        v-if="!hideActiveSubscriptions && (!isOpen | subscriptionListOptions.displayType === 'list')"
       >
         <router-link
           v-for="(channel, index) in activeSubscriptions"
@@ -230,21 +230,21 @@
           </p>
         </router-link>
       </div>
-      <!-- && !(subscriptionListOptions.displayType === 'grid' &&
-              !subscriptionListOptions.showGridItemTitles) -->
       <div
         v-if="isOpen && subscriptionListOptions.displayType === 'grid'"
-        class="grid"
-        :style="{ minInlineSize: (subscriptionListOptions.itemsPerGridRow * 100) + '%'} "
+        class="iconGrid"
       >
         <ft-channel-bubble
           v-for="(channel, index) in activeSubscriptions"
           :id="`sidenav-channel-${index}`"
           :key="index"
+          :style="{ inlineSize: 100 / subscriptionListOptions.itemsPerGridRow + '%' }"
           :channel-id="channel.id"
           :channel-name="channel.name"
           :channel-thumbnail="channel.thumbnail"
-          appearance="small"
+          :side-nav-grid="true"
+          :bubble-size="subscriptionListOptions.itemsPerGridRow > 2 ? 35 : 50"
+          :show-title="subscriptionListOptions.showGridItemTitles"
           @click="navigate(`channel/${channel.id}`)"
         />
       </div>
diff --git a/src/renderer/components/theme-settings/theme-settings.js b/src/renderer/components/theme-settings/theme-settings.js
index 07d14c382ee9..0149a6a2ef87 100644
--- a/src/renderer/components/theme-settings/theme-settings.js
+++ b/src/renderer/components/theme-settings/theme-settings.js
@@ -241,7 +241,7 @@ export default defineComponent({
         radioGroupSort.push(
           {
             type: 'checkbox',
-            label: this.$t('Settings.List Display Settings.Sort.Use Default Sort'),
+            label: this.$t('Settings.List Display Settings.Sort.Use default sort'),
             value: 'defaultSort',
             checked: listOptions.sort === 'defaultSort',
           }
@@ -251,13 +251,13 @@ export default defineComponent({
       radioGroupSort.push(
         {
           type: 'checkbox',
-          label: this.$t('Settings.List Display Settings.Sort.Sort by Title (Ascending)'),
+          label: this.$t('Settings.List Display Settings.Sort.Sort by title (A to Z)'),
           value: 'alphabeticalAscending',
           checked: listOptions.sort === 'alphabeticalAscending',
         },
         {
           type: 'checkbox',
-          label: this.$t('Settings.List Display Settings.Sort.Sort by Title (Descending)'),
+          label: this.$t('Settings.List Display Settings.Sort.Sort by title (Z to A)'),
           value: 'alphabeticalDescending',
           checked: listOptions.sort === 'alphabeticalDescending',
         }
@@ -326,13 +326,13 @@ export default defineComponent({
             },
             {
               type: 'checkbox',
-              label: this.$t('Settings.List Display Settings.Titles.Grid.Show Grid Item Titles'),
+              label: this.$t('Settings.List Display Settings.Display Type.Grid.Show grid item titles'),
               value: 'showGridItemTitles',
               checked: listOptions.showGridItemTitles
             },
             {
               type: 'checkbox',
-              label: this.$t('Settings.List Display Settings.Titles.Grid.Hide Grid Item Titles'),
+              label: this.$t('Settings.List Display Settings.Display Type.Grid.Hide grid item titles'),
               value: 'hideGridItemTitles',
               checked: !listOptions.showGridItemTitles,
             }
diff --git a/src/renderer/components/theme-settings/theme-settings.vue b/src/renderer/components/theme-settings/theme-settings.vue
index 4c5603a27f51..e187f91f39ac 100644
--- a/src/renderer/components/theme-settings/theme-settings.vue
+++ b/src/renderer/components/theme-settings/theme-settings.vue
@@ -39,25 +39,14 @@
         />
       </div>
     </div>
-    <ft-flex-box>
-      <ft-slider
-        :label="$t('Settings.Theme Settings.UI Scale')"
-        :default-value="uiScale"
-        :min-value="minUiScale"
-        :max-value="maxUiScale"
-        :step="uiScaleStep"
-        value-extension="%"
-        @change="updateUiScale(parseInt($event))"
-      />
-    </ft-flex-box>
     <br>
-    <!-- theme="base-no-default" -->
     <ft-flex-box>
       <ft-icon-button
         :icon="['fas', 'bars']"
         :title="$t('Settings.List Display Settings.Subscription List Display Options')"
         :use-ft-button="true"
         :close-on-click="false"
+        :size="22"
         dropdown-position-x="bottom"
         :dropdown-options="subscriptionListDisplayDropdownOptions"
         @click="handleSubscriptionListDisplayDropdownOptionClick"
@@ -67,6 +56,7 @@
         :title="$t('Settings.List Display Settings.Profile List Display Options')"
         :use-ft-button="true"
         :close-on-click="false"
+        :size="22"
         dropdown-position-x="bottom"
         :dropdown-options="profileListDisplayDropdownOptions"
         @click="handleProfileListDisplayDropdownOptionClick"
@@ -76,11 +66,23 @@
         :title="$t('Settings.List Display Settings.Settings Section List Display Options')"
         :use-ft-button="true"
         :close-on-click="false"
+        :size="22"
         dropdown-position-x="bottom"
         :dropdown-options="settingsSectionListDisplayDropdownOptions"
         @click="handleSettingsSectionListDisplayDropdownOptionClick"
       />
     </ft-flex-box>
+    <ft-flex-box>
+      <ft-slider
+        :label="$t('Settings.Theme Settings.UI Scale')"
+        :default-value="uiScale"
+        :min-value="minUiScale"
+        :max-value="maxUiScale"
+        :step="uiScaleStep"
+        value-extension="%"
+        @change="updateUiScale(parseInt($event))"
+      />
+    </ft-flex-box>
     <br>
     <ft-flex-box>
       <ft-select
diff --git a/static/locales/en-US.yaml b/static/locales/en-US.yaml
index f69d1f3a28e0..5f9211eee6a2 100644
--- a/static/locales/en-US.yaml
+++ b/static/locales/en-US.yaml
@@ -478,16 +478,16 @@ Settings:
     Profile List Display Options: Profile List Display Options
     Settings Section List Display Options: Settings Section List Display Options
     Sort:
-      Use Default Sort: Use Default Sort
-      Sort by Title (Ascending): Sort by Title (Ascending)
-      Sort by Title (Descending): Sort by Title (Descending)
+      Use default sort: Use default sort
+      Sort by title (A to Z): Sort by title (A to Z)
+      Sort by title (Z to A): Sort by title (Z to A)
     Display Type:
       List: List
       Grid:
         Grid: Grid
         Item per grid row: 1 item per grid row | {number} items per grid row
-        Show Grid Item Titles: Show Grid Item Titles
-        Hide Grid Item Titles: Hide Grid Item Titles
+        Show grid item titles: Show grid item titles
+        Hide grid item titles: Hide grid item titles
 
 About:
   #On About page

From 625ccac06402b9d9d83d59fc41bc8482575223cc Mon Sep 17 00:00:00 2001
From: Jason Henriquez <jasonhenriquez@protonmail.com>
Date: Wed, 25 Oct 2023 02:20:26 -0500
Subject: [PATCH 07/14] Implement profile selector list display options

---
 .../ft-profile-bubble/ft-profile-bubble.css   | 28 +++++++++++++++++++
 .../ft-profile-bubble/ft-profile-bubble.js    | 19 ++++++++++++-
 .../ft-profile-bubble/ft-profile-bubble.vue   |  5 ++++
 .../ft-profile-selector.css                   |  7 +++++
 .../ft-profile-selector.js                    | 14 +++++++---
 .../ft-profile-selector.vue                   | 28 +++++++++++++++++++
 6 files changed, 96 insertions(+), 5 deletions(-)

diff --git a/src/renderer/components/ft-profile-bubble/ft-profile-bubble.css b/src/renderer/components/ft-profile-bubble/ft-profile-bubble.css
index a3266e01b7c1..78e835329d63 100644
--- a/src/renderer/components/ft-profile-bubble/ft-profile-bubble.css
+++ b/src/renderer/components/ft-profile-bubble/ft-profile-bubble.css
@@ -27,6 +27,34 @@
   -webkit-border-radius: 50%;
 }
 
+.bubblePadding.profileSelectorGrid {
+  padding-block: 5px;
+  padding-inline: 0;
+  block-size: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.bubblePadding.profileSelectorGrid > .bubble {
+  inline-size: 40px;
+  block-size: 40px;
+  margin-block: 0;
+}
+
+.bubblePadding.profileSelectorGrid > .profileName {
+  max-inline-size: 90%;
+  font-size: 16px;
+  line-height: 50px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.bubblePadding.profileSelectorGrid .initial {
+  font-size: 20px;
+  padding-block: 10px;
+}
+
 .initial {
   font-size: 35px;
   line-height: 1em;
diff --git a/src/renderer/components/ft-profile-bubble/ft-profile-bubble.js b/src/renderer/components/ft-profile-bubble/ft-profile-bubble.js
index 410640d145fa..42cfe4b5f9ee 100644
--- a/src/renderer/components/ft-profile-bubble/ft-profile-bubble.js
+++ b/src/renderer/components/ft-profile-bubble/ft-profile-bubble.js
@@ -4,6 +4,10 @@ import { sanitizeForHtmlId } from '../../helpers/accessibility'
 export default defineComponent({
   name: 'FtProfileBubble',
   props: {
+    action: {
+      type: Function,
+      default: null
+    },
     profileName: {
       type: String,
       required: true
@@ -12,6 +16,14 @@ export default defineComponent({
       type: String,
       required: true
     },
+    profileSelectorGrid: {
+      type: Boolean,
+      default: false
+    },
+    showTitle: {
+      type: Boolean,
+      default: true
+    },
     backgroundColor: {
       type: String,
       required: true
@@ -19,7 +31,7 @@ export default defineComponent({
     textColor: {
       type: String,
       required: true
-    }
+    },
   },
   computed: {
     sanitizedId: function() {
@@ -31,6 +43,11 @@ export default defineComponent({
   },
   methods: {
     goToProfile: function (event) {
+      if (this.action) {
+        this.action(this.profileId)
+        return
+      }
+
       if (event instanceof KeyboardEvent) {
         if (event.target.getAttribute('role') === 'link' && event.key !== 'Enter') {
           return
diff --git a/src/renderer/components/ft-profile-bubble/ft-profile-bubble.vue b/src/renderer/components/ft-profile-bubble/ft-profile-bubble.vue
index cfed977e6899..1326f225356b 100644
--- a/src/renderer/components/ft-profile-bubble/ft-profile-bubble.vue
+++ b/src/renderer/components/ft-profile-bubble/ft-profile-bubble.vue
@@ -1,8 +1,12 @@
 <template>
   <div
     class="bubblePadding"
+    :class="{
+      profileSelectorGrid
+    }"
     tabindex="0"
     :aria-labelledby="sanitizedId"
+    :title="showTitle ? null : profileName"
     @click="goToProfile"
     @keydown.space.prevent="goToProfile($event)"
     @keydown.enter.prevent="goToProfile($event)"
@@ -17,6 +21,7 @@
     </div>
     <div
       :id="sanitizedId"
+      :hidden="!showTitle"
       class="profileName"
     >
       {{ profileName }}
diff --git a/src/renderer/components/ft-profile-selector/ft-profile-selector.css b/src/renderer/components/ft-profile-selector/ft-profile-selector.css
index 94ee6e91d376..8c19ce502ef9 100644
--- a/src/renderer/components/ft-profile-selector/ft-profile-selector.css
+++ b/src/renderer/components/ft-profile-selector/ft-profile-selector.css
@@ -36,9 +36,16 @@
 .profileWrapper {
   margin-block-start: 60px;
   block-size: 340px;
+  inline-size: 260px;
   overflow-y: auto;
 }
 
+.iconGrid {
+  display: flex;
+  flex-wrap: wrap;
+  block-size: unset;
+}
+
 .profile {
   cursor: pointer;
   block-size: 50px;
diff --git a/src/renderer/components/ft-profile-selector/ft-profile-selector.js b/src/renderer/components/ft-profile-selector/ft-profile-selector.js
index c0f759d87274..8937a917a4a4 100644
--- a/src/renderer/components/ft-profile-selector/ft-profile-selector.js
+++ b/src/renderer/components/ft-profile-selector/ft-profile-selector.js
@@ -2,13 +2,15 @@ import { defineComponent } from 'vue'
 import { mapActions } from 'vuex'
 import FtCard from '../../components/ft-card/ft-card.vue'
 import FtIconButton from '../../components/ft-icon-button/ft-icon-button.vue'
+import FtProfileBubble from '../ft-profile-bubble/ft-profile-bubble.vue'
 import { deepCopy, showToast, sortListUsingMethod } from '../../helpers/utils'
 
 export default defineComponent({
   name: 'FtProfileSelector',
   components: {
     'ft-card': FtCard,
-    'ft-icon-button': FtIconButton
+    'ft-icon-button': FtIconButton,
+    'ft-profile-bubble': FtProfileBubble
   },
   data: function () {
     return {
@@ -79,15 +81,19 @@ export default defineComponent({
     },
 
     setActiveProfile: function (profile) {
-      if (this.activeProfile._id !== profile._id) {
+      this.setActiveProfileGivenId(profile._id)
+    },
+
+    setActiveProfileGivenId: function (id) {
+      if (this.activeProfile._id !== id) {
         const targetProfile = this.profileList.find((x) => {
-          return x._id === profile._id
+          return x._id === id
         })
 
         if (targetProfile) {
           this.updateActiveProfile(targetProfile._id)
 
-          showToast(this.$t('Profile.{profile} is now the active profile', { profile: profile.name }))
+          showToast(this.$t('Profile.{profile} is now the active profile', { profile: targetProfile.name }))
         }
       }
 
diff --git a/src/renderer/components/ft-profile-selector/ft-profile-selector.vue b/src/renderer/components/ft-profile-selector/ft-profile-selector.vue
index 057a85eb4fac..c9cd679064b0 100644
--- a/src/renderer/components/ft-profile-selector/ft-profile-selector.vue
+++ b/src/renderer/components/ft-profile-selector/ft-profile-selector.vue
@@ -36,6 +36,7 @@
         @click="openProfileSettings"
       />
       <div
+        v-if="profileListOptions.displayType === 'list'"
         class="profileWrapper"
         role="listbox"
         aria-labelledby="profileListTitle"
@@ -70,6 +71,33 @@
           </p>
         </div>
       </div>
+      <div
+        v-else
+        class="profileWrapper"
+      >
+        <div
+          role="listbox"
+          class="iconGrid"
+          aria-labelledby="profileListTitle"
+        >
+          <ft-profile-bubble
+            v-for="(profile, index) in sortedProfileList"
+            :id="'profile-' + index"
+            :key="index"
+            :profile-id="profile._id"
+            :profile-name="profile.name"
+            :background-color="profile.bgColor"
+            :text-color="profile.textColor"
+            class="gridProfile"
+            :style="{ inlineSize: 100 / profileListOptions.itemsPerGridRow + '%' }"
+            :profile-selector-grid="true"
+            :show-title="profileListOptions.showGridItemTitles"
+            aria-selected="false"
+            role="option"
+            :action="setActiveProfileGivenId"
+          />
+        </div>
+      </div>
     </ft-card>
   </div>
 </template>

From fe6471cd1458c614e37bc2385fff446c1b3b7de8 Mon Sep 17 00:00:00 2001
From: Jason Henriquez <jasonhenriquez@protonmail.com>
Date: Wed, 25 Oct 2023 03:34:27 -0500
Subject: [PATCH 08/14] Implement settings section list sorting options

---
 src/renderer/store/modules/settings.js   |  2 +-
 src/renderer/views/Settings/Settings.js  | 84 +++++++++++++++++++++++-
 src/renderer/views/Settings/Settings.vue | 36 +++-------
 3 files changed, 92 insertions(+), 30 deletions(-)

diff --git a/src/renderer/store/modules/settings.js b/src/renderer/store/modules/settings.js
index 3da4c2f01b72..6e0a884b2d87 100644
--- a/src/renderer/store/modules/settings.js
+++ b/src/renderer/store/modules/settings.js
@@ -310,7 +310,7 @@ const state = {
     itemsPerGridRow: 2
   },
   settingsSectionListOptions: {
-    sort: 'alphabeticalAscending'
+    sort: 'defaultSort'
   }
 }
 
diff --git a/src/renderer/views/Settings/Settings.js b/src/renderer/views/Settings/Settings.js
index b208bc265564..07ce18448e63 100644
--- a/src/renderer/views/Settings/Settings.js
+++ b/src/renderer/views/Settings/Settings.js
@@ -14,6 +14,7 @@ import ParentControlSettings from '../../components/parental-control-settings/pa
 import ExperimentalSettings from '../../components/experimental-settings/experimental-settings.vue'
 import PasswordSettings from '../../components/password-settings/password-settings.vue'
 import PasswordDialog from '../../components/password-dialog/password-dialog.vue'
+import { deepCopy, sortListUsingMethod } from '../../helpers/utils'
 
 export default defineComponent({
   name: 'Settings',
@@ -36,17 +37,96 @@ export default defineComponent({
   },
   data: function () {
     return {
-      unlocked: false
+      unlocked: false,
+      settingsComponentsData: [
+        {
+          type: 'general-settings',
+          title: this.$t('Settings.General Settings.General Settings')
+        },
+        {
+          type: 'theme-settings',
+          title: this.$t('Settings.Theme Settings.Theme Settings')
+        },
+        {
+          type: 'player-settings',
+          title: this.$t('Settings.Player Settings.Player Settings')
+        },
+        {
+          type: 'external-player-settings',
+          title: this.$t('Settings.External Player Settings.External Player Settings'),
+          electronNeeded: true
+        },
+        {
+          type: 'subscription-settings',
+          title: this.$t('Settings.Subscription Settings.Subscription Settings')
+        },
+        {
+          type: 'distraction-settings',
+          title: this.$t('Settings.Distraction Settings.Distraction Settings')
+        },
+        {
+          type: 'privacy-settings',
+          title: this.$t('Settings.Privacy Settings.Privacy Settings')
+        },
+        {
+          type: 'data-settings',
+          title: this.$t('Settings.Data Settings.Data Settings')
+        },
+        {
+          type: 'proxy-settings',
+          title: this.$t('Settings.Proxy Settings.Proxy Settings'),
+          electronNeeded: true
+        },
+        {
+          type: 'download-settings',
+          title: this.$t('Settings.Download Settings.Download Settings'),
+          electronNeeded: true
+        },
+        {
+          type: 'parental-control-settings',
+          title: this.$t('Settings.Parental Control Settings.Parental Control Settings')
+        },
+        {
+          type: 'sponsor-block-settings',
+          title: this.$t('Settings.SponsorBlock Settings.SponsorBlock Settings'),
+        },
+        {
+          type: 'experimental-settings',
+          title: this.$t('Settings.Experimental Settings.Experimental Settings'),
+          electronNeeded: true
+        },
+        {
+          type: 'password-settings',
+          title: this.$t('Settings.Password Settings.Password Settings')
+        },
+      ]
     }
   },
   computed: {
+    settingsComponents: function () {
+      if (!this.usingElectron) {
+        return this.settingsComponentsData.filter((settingsComponent) => !settingsComponent.electronNeeded)
+      }
+      return this.settingsComponentsData
+    },
+
+    sortedSettingsSectionComponents: function () {
+      const settingsComponents = deepCopy(this.settingsComponents)
+      sortListUsingMethod(settingsComponents, 'title', this.settingsSectionListOptions.sort)
+      return settingsComponents
+    },
+
     usingElectron: function () {
       return process.env.IS_ELECTRON
     },
 
     settingsPassword: function () {
       return this.$store.getters.getSettingsPassword
-    }
+    },
+
+    settingsSectionListOptions: function () {
+      return this.$store.getters.getSettingsSectionListOptions
+    },
   },
   created: function () {
     if (this.settingsPassword === '') {
diff --git a/src/renderer/views/Settings/Settings.vue b/src/renderer/views/Settings/Settings.vue
index 0109b54cdd09..c3030312936d 100644
--- a/src/renderer/views/Settings/Settings.vue
+++ b/src/renderer/views/Settings/Settings.vue
@@ -1,33 +1,15 @@
 <template>
   <div>
     <template v-if="unlocked">
-      <general-settings />
-      <hr>
-      <theme-settings />
-      <hr>
-      <player-settings />
-      <hr>
-      <external-player-settings v-if="usingElectron" />
-      <hr v-if="usingElectron">
-      <subscription-settings />
-      <hr>
-      <distraction-settings />
-      <hr>
-      <privacy-settings />
-      <hr>
-      <data-settings />
-      <hr>
-      <proxy-settings v-if="usingElectron" />
-      <hr v-if="usingElectron">
-      <download-settings v-if="usingElectron" />
-      <hr v-if="usingElectron">
-      <parental-control-settings />
-      <hr>
-      <sponsor-block-settings />
-      <hr v-if="usingElectron">
-      <experimental-settings v-if="usingElectron" />
-      <hr>
-      <password-settings />
+      <div
+        v-for="(settingsComponent, i) in sortedSettingsSectionComponents"
+        :key="i"
+      >
+        <hr v-if="i !== 0">
+        <component
+          :is="settingsComponent.type"
+        />
+      </div>
     </template>
     <password-dialog
       v-else

From 5876d59803623a87b0580e784cca09096868717c Mon Sep 17 00:00:00 2001
From: Jason Henriquez <jasonhenriquez@protonmail.com>
Date: Wed, 25 Oct 2023 04:31:13 -0500
Subject: [PATCH 09/14] Update with mobileHidden property

---
 src/renderer/components/side-nav/side-nav.vue | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/renderer/components/side-nav/side-nav.vue b/src/renderer/components/side-nav/side-nav.vue
index 2400158185dc..d82cb5e92e6b 100644
--- a/src/renderer/components/side-nav/side-nav.vue
+++ b/src/renderer/components/side-nav/side-nav.vue
@@ -232,12 +232,13 @@
       </div>
       <div
         v-if="isOpen && subscriptionListOptions.displayType === 'grid'"
-        class="iconGrid"
+        class="iconGrid mobileHidden"
       >
         <ft-channel-bubble
           v-for="(channel, index) in activeSubscriptions"
           :id="`sidenav-channel-${index}`"
           :key="index"
+          class="mobileHidden"
           :style="{ inlineSize: 100 / subscriptionListOptions.itemsPerGridRow + '%' }"
           :channel-id="channel.id"
           :channel-name="channel.name"

From 145fd6775343560d1ffc75b121c2abcb8c269a8a Mon Sep 17 00:00:00 2001
From: Jason Henriquez <jasonhenriquez@protonmail.com>
Date: Thu, 26 Oct 2023 12:53:05 -0500
Subject: [PATCH 10/14] Implement suggestions

---
 .../components/ft-channel-bubble/ft-channel-bubble.vue         | 2 +-
 src/renderer/components/ft-icon-button/ft-icon-button.vue      | 2 +-
 .../components/ft-profile-bubble/ft-profile-bubble.vue         | 2 +-
 src/renderer/components/side-nav/side-nav.vue                  | 3 +--
 src/renderer/views/Settings/Settings.js                        | 2 +-
 5 files changed, 5 insertions(+), 6 deletions(-)

diff --git a/src/renderer/components/ft-channel-bubble/ft-channel-bubble.vue b/src/renderer/components/ft-channel-bubble/ft-channel-bubble.vue
index 6d61717d45d5..43b00ee4bc05 100644
--- a/src/renderer/components/ft-channel-bubble/ft-channel-bubble.vue
+++ b/src/renderer/components/ft-channel-bubble/ft-channel-bubble.vue
@@ -56,7 +56,7 @@
     </div>
     <div
       :id="sanitizedId"
-      :hidden="!showTitle"
+      v-show="showTitle"
       class="channelName"
     >
       {{ channelName }}
diff --git a/src/renderer/components/ft-icon-button/ft-icon-button.vue b/src/renderer/components/ft-icon-button/ft-icon-button.vue
index b94b7ff877ac..9d8059fe7cf6 100644
--- a/src/renderer/components/ft-icon-button/ft-icon-button.vue
+++ b/src/renderer/components/ft-icon-button/ft-icon-button.vue
@@ -2,7 +2,7 @@
   <div
     ref="iconButton"
     class="ftIconButton"
-    @focusout="handleDropdownFocusOut()"
+    @focusout="handleDropdownFocusOut"
   >
     <font-awesome-icon
       v-if="!hideIcon && !useFtButton"
diff --git a/src/renderer/components/ft-profile-bubble/ft-profile-bubble.vue b/src/renderer/components/ft-profile-bubble/ft-profile-bubble.vue
index 1326f225356b..61cc70c7bf48 100644
--- a/src/renderer/components/ft-profile-bubble/ft-profile-bubble.vue
+++ b/src/renderer/components/ft-profile-bubble/ft-profile-bubble.vue
@@ -21,7 +21,7 @@
     </div>
     <div
       :id="sanitizedId"
-      :hidden="!showTitle"
+      v-show="showTitle"
       class="profileName"
     >
       {{ profileName }}
diff --git a/src/renderer/components/side-nav/side-nav.vue b/src/renderer/components/side-nav/side-nav.vue
index d82cb5e92e6b..5ec40bfe0d4d 100644
--- a/src/renderer/components/side-nav/side-nav.vue
+++ b/src/renderer/components/side-nav/side-nav.vue
@@ -200,7 +200,7 @@
       </router-link>
       <hr>
       <div
-        v-if="!hideActiveSubscriptions && (!isOpen | subscriptionListOptions.displayType === 'list')"
+        v-if="!hideActiveSubscriptions && (!isOpen || subscriptionListOptions.displayType === 'list')"
       >
         <router-link
           v-for="(channel, index) in activeSubscriptions"
@@ -208,7 +208,6 @@
           :to="`/channel/${channel.id}`"
           class="navChannel channelLink mobileHidden"
           :title="channel.name"
-          role="link"
         >
           <div
             class="thumbnailContainer"
diff --git a/src/renderer/views/Settings/Settings.js b/src/renderer/views/Settings/Settings.js
index 07ce18448e63..ec7d300a8f57 100644
--- a/src/renderer/views/Settings/Settings.js
+++ b/src/renderer/views/Settings/Settings.js
@@ -104,7 +104,7 @@ export default defineComponent({
   },
   computed: {
     settingsComponents: function () {
-      if (!this.usingElectron) {
+      if (!process.env.IS_ELECTRON) {
         return this.settingsComponentsData.filter((settingsComponent) => !settingsComponent.electronNeeded)
       }
       return this.settingsComponentsData

From 572c94fb95aff7757e6ba5136f66691ed440f13e Mon Sep 17 00:00:00 2001
From: Jason <84899178+jasonhenriquez@users.noreply.github.com>
Date: Thu, 26 Oct 2023 17:53:13 +0000
Subject: [PATCH 11/14] Update src/renderer/views/Settings/Settings.vue

Co-authored-by: absidue <48293849+absidue@users.noreply.github.com>
---
 src/renderer/views/Settings/Settings.vue | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/renderer/views/Settings/Settings.vue b/src/renderer/views/Settings/Settings.vue
index c3030312936d..8da833dd2e17 100644
--- a/src/renderer/views/Settings/Settings.vue
+++ b/src/renderer/views/Settings/Settings.vue
@@ -1,15 +1,15 @@
 <template>
   <div>
     <template v-if="unlocked">
-      <div
+      <template
         v-for="(settingsComponent, i) in sortedSettingsSectionComponents"
-        :key="i"
+        :key="settingsComponent.type"
       >
         <hr v-if="i !== 0">
         <component
           :is="settingsComponent.type"
         />
-      </div>
+      </template>
     </template>
     <password-dialog
       v-else

From 732fd2937fcb13ee7bd4aad3777c2a54baf1ffa9 Mon Sep 17 00:00:00 2001
From: Jason Henriquez <jasonhenriquez@protonmail.com>
Date: Thu, 26 Oct 2023 13:10:43 -0500
Subject: [PATCH 12/14] Replace locale to be local variable in sorting function

---
 src/renderer/helpers/utils.js | 9 +++------
 1 file changed, 3 insertions(+), 6 deletions(-)

diff --git a/src/renderer/helpers/utils.js b/src/renderer/helpers/utils.js
index ab49b0de189a..0ef39d7b909d 100644
--- a/src/renderer/helpers/utils.js
+++ b/src/renderer/helpers/utils.js
@@ -11,10 +11,6 @@ export const CHANNEL_HANDLE_REGEX = /^@[\w.-]{3,30}$/
 
 const PUBLISHED_TEXT_REGEX = /(\d+)\s?([a-z]+)/i
 
-function locale() {
-  return i18n.locale.replace('_', '-')
-}
-
 /**
  * @param {string} publishedText
  */
@@ -679,14 +675,15 @@ export function deepCopy(obj) {
 }
 
 export function sortListUsingMethod(list, property, method) {
+  const locale = i18n.locale.replace('_', '-')
   switch (method) {
     case 'defaultSort':
       break
     case 'alphabeticalAscending':
-      list.sort((a, b) => a[property]?.toLowerCase().localeCompare(b[property]?.toLowerCase(), locale()))
+      list.sort((a, b) => a[property]?.toLowerCase().localeCompare(b[property]?.toLowerCase(), locale))
       break
     case 'alphabeticalDescending':
-      list.sort((a, b) => b[property]?.toLowerCase().localeCompare(a[property]?.toLowerCase(), locale()))
+      list.sort((a, b) => b[property]?.toLowerCase().localeCompare(a[property]?.toLowerCase(), locale))
       break
   }
 }

From ba60c42089a7fcb7980a829206066c3ae01d10f3 Mon Sep 17 00:00:00 2001
From: Jason Henriquez <jasonhenriquez@protonmail.com>
Date: Thu, 26 Oct 2023 13:16:11 -0500
Subject: [PATCH 13/14] Remove descending sort for lists with default sorting
 optionn

---
 .../components/theme-settings/theme-settings.js | 17 +++++++++++------
 1 file changed, 11 insertions(+), 6 deletions(-)

diff --git a/src/renderer/components/theme-settings/theme-settings.js b/src/renderer/components/theme-settings/theme-settings.js
index 0149a6a2ef87..96b1cff7a170 100644
--- a/src/renderer/components/theme-settings/theme-settings.js
+++ b/src/renderer/components/theme-settings/theme-settings.js
@@ -254,15 +254,20 @@ export default defineComponent({
           label: this.$t('Settings.List Display Settings.Sort.Sort by title (A to Z)'),
           value: 'alphabeticalAscending',
           checked: listOptions.sort === 'alphabeticalAscending',
-        },
-        {
-          type: 'checkbox',
-          label: this.$t('Settings.List Display Settings.Sort.Sort by title (Z to A)'),
-          value: 'alphabeticalDescending',
-          checked: listOptions.sort === 'alphabeticalDescending',
         }
       )
 
+      if (!showDefaultOption) {
+        radioGroupSort.push(
+          {
+            type: 'checkbox',
+            label: this.$t('Settings.List Display Settings.Sort.Sort by title (Z to A)'),
+            value: 'alphabeticalDescending',
+            checked: listOptions.sort === 'alphabeticalDescending',
+          }
+        )
+      }
+
       if (listOptions.displayType) {
         const radioGroupDisplayType = []
         options.push(

From dc28f86d9c22fa2e73cc31181b80b95616f0f3b6 Mon Sep 17 00:00:00 2001
From: Jason Henriquez <jasonhenriquez@protonmail.com>
Date: Thu, 26 Oct 2023 14:39:41 -0500
Subject: [PATCH 14/14] Prevent non-mobile-specific theme settings from showing
 on mobile; update settings section sort to be ft-select with only default and
 ascending options; adjust labels; adjust new controls' placement & appearance
 in settings

---
 .../ft-icon-button/ft-icon-button.scss        |  1 +
 .../theme-settings/theme-settings.js          | 71 ++++++++-----------
 .../theme-settings/theme-settings.scss        |  9 +++
 .../theme-settings/theme-settings.vue         | 69 +++++++++---------
 src/renderer/store/modules/settings.js        |  4 +-
 src/renderer/views/Settings/Settings.js       |  6 +-
 static/locales/en-US.yaml                     | 30 ++++----
 7 files changed, 95 insertions(+), 95 deletions(-)
 create mode 100644 src/renderer/components/theme-settings/theme-settings.scss

diff --git a/src/renderer/components/ft-icon-button/ft-icon-button.scss b/src/renderer/components/ft-icon-button/ft-icon-button.scss
index 05702d4217bd..7f083e0c75a8 100644
--- a/src/renderer/components/ft-icon-button/ft-icon-button.scss
+++ b/src/renderer/components/ft-icon-button/ft-icon-button.scss
@@ -84,6 +84,7 @@
 .iconFtButton {
   display: flex;
   gap: 10px;
+  inline-size: 100%;
 }
 
 .iconDropdown {
diff --git a/src/renderer/components/theme-settings/theme-settings.js b/src/renderer/components/theme-settings/theme-settings.js
index 96b1cff7a170..9b9225bb679d 100644
--- a/src/renderer/components/theme-settings/theme-settings.js
+++ b/src/renderer/components/theme-settings/theme-settings.js
@@ -40,6 +40,10 @@ export default defineComponent({
         'catppuccinMocha',
         'pastelPink',
         'hotPink'
+      ],
+      settingsSectionListOrderValues: [
+        'defaultSort',
+        'alphabeticalAscending'
       ]
     }
   },
@@ -136,20 +140,23 @@ export default defineComponent({
       return this.$store.getters.getProfileListOptions
     },
 
-    settingsSectionListOptions: function () {
-      return this.$store.getters.getSettingsSectionListOptions
+    settingsSectionListOrder: function () {
+      return this.$store.getters.getSettingsSectionListOrder
     },
 
-    subscriptionListDisplayDropdownOptions: function () {
-      return this.listDisplayDropdownOptions(this.subscriptionListOptions, false)
+    settingsSectionListOrderNames: function () {
+      return [
+        this.$t('Settings.Theme Settings.List Display Settings.Sort.Default'),
+        this.$t('Settings.Theme Settings.List Display Settings.Sort.Sort by title (A to Z)'),
+      ]
     },
 
-    profileListDisplayDropdownOptions: function () {
-      return this.listDisplayDropdownOptions(this.profileListOptions, false)
+    subscriptionListDisplayDropdownOptions: function () {
+      return this.listDisplayDropdownOptions(this.subscriptionListOptions)
     },
 
-    settingsSectionListDisplayDropdownOptions: function () {
-      return this.listDisplayDropdownOptions(this.settingsSectionListOptions, true)
+    profileListDisplayDropdownOptions: function () {
+      return this.listDisplayDropdownOptions(this.profileListOptions)
     },
   },
   mounted: function () {
@@ -195,11 +202,6 @@ export default defineComponent({
       this.updateProfileListOptions(newListOptions)
     },
 
-    handleSettingsSectionListDisplayDropdownOptionClick: function (option) {
-      const newListOptions = this.getNewListOptions(this.settingsSectionListOptions, option)
-      this.updateSettingsSectionListOptions(newListOptions)
-    },
-
     getNewListOptions: function(list, option) {
       switch (option) {
         case 'defaultSort':
@@ -229,7 +231,7 @@ export default defineComponent({
       }
     },
 
-    listDisplayDropdownOptions: function (listOptions, showDefaultOption) {
+    listDisplayDropdownOptions: function (listOptions) {
       const radioGroupSort = []
       const options = [
         {
@@ -237,37 +239,22 @@ export default defineComponent({
           radios: radioGroupSort
         }
       ]
-      if (showDefaultOption) {
-        radioGroupSort.push(
-          {
-            type: 'checkbox',
-            label: this.$t('Settings.List Display Settings.Sort.Use default sort'),
-            value: 'defaultSort',
-            checked: listOptions.sort === 'defaultSort',
-          }
-        )
-      }
 
       radioGroupSort.push(
         {
           type: 'checkbox',
-          label: this.$t('Settings.List Display Settings.Sort.Sort by title (A to Z)'),
+          label: this.$t('Settings.Theme Settings.List Display Settings.Sort.Sort by title (A to Z)'),
           value: 'alphabeticalAscending',
           checked: listOptions.sort === 'alphabeticalAscending',
+        },
+        {
+          type: 'checkbox',
+          label: this.$t('Settings.Theme Settings.List Display Settings.Sort.Sort by title (Z to A)'),
+          value: 'alphabeticalDescending',
+          checked: listOptions.sort === 'alphabeticalDescending',
         }
       )
 
-      if (!showDefaultOption) {
-        radioGroupSort.push(
-          {
-            type: 'checkbox',
-            label: this.$t('Settings.List Display Settings.Sort.Sort by title (Z to A)'),
-            value: 'alphabeticalDescending',
-            checked: listOptions.sort === 'alphabeticalDescending',
-          }
-        )
-      }
-
       if (listOptions.displayType) {
         const radioGroupDisplayType = []
         options.push(
@@ -282,13 +269,13 @@ export default defineComponent({
           },
           {
             type: 'checkbox',
-            label: this.$t('Settings.List Display Settings.Display Type.List'),
+            label: this.$t('Settings.Theme Settings.List Display Settings.Display Type.List'),
             value: 'list',
             checked: listOptions.displayType === 'list',
           },
           {
             type: 'checkbox',
-            label: this.$t('Settings.List Display Settings.Display Type.Grid.Grid'),
+            label: this.$t('Settings.Theme Settings.List Display Settings.Display Type.Grid.Grid'),
             value: 'grid',
             checked: listOptions.displayType === 'grid',
           }
@@ -312,7 +299,7 @@ export default defineComponent({
           for (let i = 2; i <= 5; ++i) {
             radioGroupItemsPerGridRow.push({
               type: 'checkbox',
-              label: this.$tc('Settings.List Display Settings.Display Type.Grid.Item per grid row', i, { number: i }),
+              label: this.$tc('Settings.Theme Settings.List Display Settings.Display Type.Grid.Item per grid row', i, { number: i }),
               value: i,
               checked: listOptions.itemsPerGridRow === i
             })
@@ -331,13 +318,13 @@ export default defineComponent({
             },
             {
               type: 'checkbox',
-              label: this.$t('Settings.List Display Settings.Display Type.Grid.Show grid item titles'),
+              label: this.$t('Settings.Theme Settings.List Display Settings.Display Type.Grid.Show grid item titles'),
               value: 'showGridItemTitles',
               checked: listOptions.showGridItemTitles
             },
             {
               type: 'checkbox',
-              label: this.$t('Settings.List Display Settings.Display Type.Grid.Hide grid item titles'),
+              label: this.$t('Settings.Theme Settings.List Display Settings.Display Type.Grid.Hide grid item titles'),
               value: 'hideGridItemTitles',
               checked: !listOptions.showGridItemTitles,
             }
@@ -361,7 +348,7 @@ export default defineComponent({
       'updateSubscriptionListSort',
       'updateSubscriptionListOptions',
       'updateProfileListOptions',
-      'updateSettingsSectionListOptions'
+      'updateSettingsSectionListOrder'
     ])
   }
 })
diff --git a/src/renderer/components/theme-settings/theme-settings.scss b/src/renderer/components/theme-settings/theme-settings.scss
new file mode 100644
index 000000000000..3918304d6a60
--- /dev/null
+++ b/src/renderer/components/theme-settings/theme-settings.scss
@@ -0,0 +1,9 @@
+.switchColumn > .listDisplayOptions {
+  inline-size: 100%;
+}
+
+@media only screen and (max-width: 680px) {
+  .listDisplayOptions {
+    display: none;
+  }
+}
diff --git a/src/renderer/components/theme-settings/theme-settings.vue b/src/renderer/components/theme-settings/theme-settings.vue
index e187f91f39ac..91a81a6d37da 100644
--- a/src/renderer/components/theme-settings/theme-settings.vue
+++ b/src/renderer/components/theme-settings/theme-settings.vue
@@ -40,38 +40,6 @@
       </div>
     </div>
     <br>
-    <ft-flex-box>
-      <ft-icon-button
-        :icon="['fas', 'bars']"
-        :title="$t('Settings.List Display Settings.Subscription List Display Options')"
-        :use-ft-button="true"
-        :close-on-click="false"
-        :size="22"
-        dropdown-position-x="bottom"
-        :dropdown-options="subscriptionListDisplayDropdownOptions"
-        @click="handleSubscriptionListDisplayDropdownOptionClick"
-      />
-      <ft-icon-button
-        :icon="['fas', 'user']"
-        :title="$t('Settings.List Display Settings.Profile List Display Options')"
-        :use-ft-button="true"
-        :close-on-click="false"
-        :size="22"
-        dropdown-position-x="bottom"
-        :dropdown-options="profileListDisplayDropdownOptions"
-        @click="handleProfileListDisplayDropdownOptionClick"
-      />
-      <ft-icon-button
-        :icon="['fas', 'sliders']"
-        :title="$t('Settings.List Display Settings.Settings Section List Display Options')"
-        :use-ft-button="true"
-        :close-on-click="false"
-        :size="22"
-        dropdown-position-x="bottom"
-        :dropdown-options="settingsSectionListDisplayDropdownOptions"
-        @click="handleSettingsSectionListDisplayDropdownOptionClick"
-      />
-    </ft-flex-box>
     <ft-flex-box>
       <ft-slider
         :label="$t('Settings.Theme Settings.UI Scale')"
@@ -84,6 +52,42 @@
       />
     </ft-flex-box>
     <br>
+    <div class="switchColumnGrid">
+      <div class="switchColumn">
+        <ft-select
+          :placeholder="$t('Settings.Theme Settings.Settings Section Sort Order')"
+          :value="settingsSectionListOrder"
+          :select-names="settingsSectionListOrderNames"
+          :select-values="settingsSectionListOrderValues"
+          @change="updateSettingsSectionListOrder"
+        />
+      </div>
+      <div class="switchColumn">
+        <ft-icon-button
+          class="listDisplayOptions"
+          :icon="['fas', 'bars']"
+          :title="$t('Settings.Theme Settings.List Display Settings.Subscription List Display Options')"
+          :use-ft-button="true"
+          :close-on-click="false"
+          :size="22"
+          dropdown-position-x="bottom"
+          :dropdown-options="subscriptionListDisplayDropdownOptions"
+          @click="handleSubscriptionListDisplayDropdownOptionClick"
+        />
+        <ft-icon-button
+          class="listDisplayOptions"
+          :icon="['fas', 'user']"
+          :title="$t('Settings.Theme Settings.List Display Settings.Profile List Display Options')"
+          :use-ft-button="true"
+          :close-on-click="false"
+          :size="22"
+          dropdown-position-x="bottom"
+          :dropdown-options="profileListDisplayDropdownOptions"
+          @click="handleProfileListDisplayDropdownOptionClick"
+        />
+      </div>
+    </div>
+    <br>
     <ft-flex-box>
       <ft-select
         :placeholder="$t('Settings.Theme Settings.Base Theme.Base Theme')"
@@ -120,3 +124,4 @@
 </template>
 
 <script src="./theme-settings.js" />
+<style scoped lang="scss" src="./theme-settings.scss" />
diff --git a/src/renderer/store/modules/settings.js b/src/renderer/store/modules/settings.js
index 6e0a884b2d87..2a8b8d17ef70 100644
--- a/src/renderer/store/modules/settings.js
+++ b/src/renderer/store/modules/settings.js
@@ -309,9 +309,7 @@ const state = {
     showGridItemTitles: true,
     itemsPerGridRow: 2
   },
-  settingsSectionListOptions: {
-    sort: 'defaultSort'
-  }
+  settingsSectionListOrder: 'defaultSort'
 }
 
 const stateWithSideEffects = {
diff --git a/src/renderer/views/Settings/Settings.js b/src/renderer/views/Settings/Settings.js
index 15cfb2c368dd..d4842b56e411 100644
--- a/src/renderer/views/Settings/Settings.js
+++ b/src/renderer/views/Settings/Settings.js
@@ -112,7 +112,7 @@ export default defineComponent({
 
     sortedSettingsSectionComponents: function () {
       const settingsComponents = deepCopy(this.settingsComponents)
-      sortListUsingMethod(settingsComponents, 'title', this.settingsSectionListOptions.sort)
+      sortListUsingMethod(settingsComponents, 'title', this.settingsSectionListOrder)
       return settingsComponents
     },
 
@@ -124,8 +124,8 @@ export default defineComponent({
       return this.$store.getters.getSettingsPassword
     },
 
-    settingsSectionListOptions: function () {
-      return this.$store.getters.getSettingsSectionListOptions
+    settingsSectionListOrder: function () {
+      return this.$store.getters.getSettingsSectionListOrder
     },
   },
   created: function () {
diff --git a/static/locales/en-US.yaml b/static/locales/en-US.yaml
index 5f9211eee6a2..774306272915 100644
--- a/static/locales/en-US.yaml
+++ b/static/locales/en-US.yaml
@@ -197,6 +197,21 @@ Settings:
     UI Scale: UI Scale
     Hide Side Bar Labels: Hide Side Bar Labels
     Hide FreeTube Header Logo: Hide FreeTube Header Logo
+    Settings Section Sort Order: Settings Section Sort Order
+    List Display Settings:
+      Subscription List Display Options: Subscription List Display Options
+      Profile List Display Options: Profile List Display Options
+      Sort:
+        Default: Default
+        Sort by title (A to Z): Sort by title (A to Z)
+        Sort by title (Z to A): Sort by title (Z to A)
+      Display Type:
+        List: List
+        Grid:
+          Grid: Grid
+          Item per grid row: 1 item per grid row | {number} items per grid row
+          Show grid item titles: Show grid item titles
+          Hide grid item titles: Hide grid item titles
     Base Theme:
       Base Theme: Base Theme
       Black: Black
@@ -473,21 +488,6 @@ Settings:
     Set Password To Prevent Access: Set a password to prevent access to settings
     Set Password: Set Password
     Remove Password: Remove Password
-  List Display Settings:
-    Subscription List Display Options: Subscription List Display Options
-    Profile List Display Options: Profile List Display Options
-    Settings Section List Display Options: Settings Section List Display Options
-    Sort:
-      Use default sort: Use default sort
-      Sort by title (A to Z): Sort by title (A to Z)
-      Sort by title (Z to A): Sort by title (Z to A)
-    Display Type:
-      List: List
-      Grid:
-        Grid: Grid
-        Item per grid row: 1 item per grid row | {number} items per grid row
-        Show grid item titles: Show grid item titles
-        Hide grid item titles: Hide grid item titles
 
 About:
   #On About page