Implement base UI for new list display settings

src/renderer/components/ft-list-video/ft-list-video.vue

@@ -116,6 +116,7 @@
         theme="base-no-default"
         :size="16"
         :use-shadow="false"
+        :close-on-click="true"
         dropdown-position-x="left"
         :dropdown-options="dropdownOptions"
         @click="handleOptionsClick"

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 () {

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"

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
       }
-    }
+    },
   }
 })

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, sortListUsingMethod } 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'
     ])
   }
 })

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')"

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
+  }
+}

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

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 = {

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