From 07d9be692871431ace25ccd6dfaf49820833e90b Mon Sep 17 00:00:00 2001
From: Jason Henriquez <jasonhenriquez@protonmail.com>
Date: Sun, 22 Oct 2023 16:26:20 -0500
Subject: [PATCH 1/6] Implement styling for new subscribe button

---
 .../ft-subscribe-button.css                   | 48 +++++++++++++++++--
 .../ft-subscribe-button.js                    | 17 +++++++
 .../ft-subscribe-button.vue                   | 34 ++++++++++---
 src/renderer/main.js                          |  2 +
 .../SubscribedChannels/SubscribedChannels.vue |  2 +-
 static/locales/en-US.yaml                     |  2 +
 6 files changed, 94 insertions(+), 11 deletions(-)

diff --git a/src/renderer/components/ft-subscribe-button/ft-subscribe-button.css b/src/renderer/components/ft-subscribe-button/ft-subscribe-button.css
index 4d2871b3326e9..c658890de0745 100644
--- a/src/renderer/components/ft-subscribe-button/ft-subscribe-button.css
+++ b/src/renderer/components/ft-subscribe-button/ft-subscribe-button.css
@@ -1,8 +1,50 @@
+.buttonList {
+  margin: 5px;
+  margin-block-end: 10px;
+  border-radius: 4px;
+  block-size: fit-content;
+  box-shadow: 0px 1px 2px rgb(0 0 0 / 50%);
+  display: flex;
+  flex-wrap: nowrap;
+  /* addresses odd clipping behavior when adjusting window size*/
+  background-color: var(--primary-color);
+}
+
 /* Ensures style here overrides style of .btn */
 .subscribeButton.btn {
-  align-self: center;
-  block-size: 50%;
-  margin-block-end: 10px;
   min-inline-size: 150px;
   white-space: initial;
 }
+
+.subscribeButton.btn, .profileDropdownToggle.btn {
+  align-self: center;
+  margin-block: 0;
+  margin-inline: 0;
+}
+
+.hasProfileDropdownToggle > .subscribeButton.btn {
+  min-inline-size: 100px;
+  padding-inline: 5px;
+  border-inline-end: 2px solid var(--primary-color-active) !important;
+  border-start-end-radius: 0;
+  border-end-end-radius: 0;
+  box-sizing: content-box;
+}
+
+.hasProfileDropdownToggle > .subscribeButton.btn, .profileDropdownToggle.btn {
+  padding-block: 5px;
+  padding-inline: 6px;
+  box-shadow: none;
+  flex: auto;
+  block-size: 2em;
+}
+
+.profileDropdownToggle.btn {
+  border-inline-start: none !important;
+  border-start-start-radius: 0;
+  border-end-start-radius: 0;
+  display: inline-block;
+  min-inline-size: 1em;
+  padding-inline: 10px;
+  box-sizing: content-box;
+}
diff --git a/src/renderer/components/ft-subscribe-button/ft-subscribe-button.js b/src/renderer/components/ft-subscribe-button/ft-subscribe-button.js
index ba07a6a4a9547..ed35bfc7c3b43 100644
--- a/src/renderer/components/ft-subscribe-button/ft-subscribe-button.js
+++ b/src/renderer/components/ft-subscribe-button/ft-subscribe-button.js
@@ -25,12 +25,21 @@ export default defineComponent({
       type: String,
       required: true
     },
+    hideProfileDropdownToggle: {
+      type: Boolean,
+      default: false
+    },
     subscriptionCountText: {
       default: '',
       type: String,
       required: false
     }
   },
+  data: function () {
+    return {
+      isProfileDropdownOpen: false
+    }
+  },
   computed: {
     profileList: function () {
       return this.$store.getters.getProfileList
@@ -60,6 +69,10 @@ export default defineComponent({
         subscribedValue += ' ' + this.subscriptionCountText
       }
       return subscribedValue
+    },
+
+    isProfileDropdownEnabled: function () {
+      return !this.hideProfileDropdownToggle && this.profileList.length > 1
     }
 
   },
@@ -124,6 +137,10 @@ export default defineComponent({
       }
     },
 
+    toggleProfileDropdown: function() {
+      this.isProfileDropdownOpen = !this.isProfileDropdownOpen
+    },
+
     unsubscribe: function(profile, channelId) {
       const parsedProfile = deepCopy(profile)
       const index = parsedProfile.subscriptions.findIndex((channel) => {
diff --git a/src/renderer/components/ft-subscribe-button/ft-subscribe-button.vue b/src/renderer/components/ft-subscribe-button/ft-subscribe-button.vue
index 11bf54e7e66c6..2aea54f752c6a 100644
--- a/src/renderer/components/ft-subscribe-button/ft-subscribe-button.vue
+++ b/src/renderer/components/ft-subscribe-button/ft-subscribe-button.vue
@@ -1,11 +1,31 @@
 <template>
-  <ft-button
-    :label="subscribedText"
-    class="subscribeButton"
-    background-color="var(--primary-color)"
-    text-color="var(--text-with-main-color)"
-    @click="handleSubscription"
-  />
+  <div
+    class="buttonList"
+    :class="{ hasProfileDropdownToggle: isProfileDropdownEnabled}"
+  >
+    <ft-button
+      :label="subscribedText"
+      :no-border="true"
+      class="subscribeButton"
+      background-color="var(--primary-color)"
+      text-color="var(--text-with-main-color)"
+      @click="handleSubscription"
+    />
+    <ft-button
+      v-if="isProfileDropdownEnabled"
+      :no-border="true"
+      :title="isProfileDropdownOpen ? $t('Profile.Close Profile Dropdown') : $t('Profile.Open Profile Dropdown')"
+      class="profileDropdownToggle"
+      background-color="var(--primary-color)"
+      text-color="var(--text-with-main-color)"
+      @click="toggleProfileDropdown"
+    >
+      <font-awesome-icon
+        :icon="isProfileDropdownOpen ? ['fas', 'angle-up'] : ['fas', 'angle-down']"
+      />
+      <!-- :icon="['fas', isProfileDropdownOpen ? 'angle-up' : 'angle-down']" -->
+    </ft-button>
+  </div>
 </template>
 
 <script src="./ft-subscribe-button.js" />
diff --git a/src/renderer/main.js b/src/renderer/main.js
index c8345edf46fec..d522cf0bd5da3 100644
--- a/src/renderer/main.js
+++ b/src/renderer/main.js
@@ -9,6 +9,7 @@ import { library } from '@fortawesome/fontawesome-svg-core'
 // to avoid code conflict and duplicate entries
 import {
   faAngleDown,
+  faAngleUp,
   faArrowDown,
   faArrowLeft,
   faArrowRight,
@@ -81,6 +82,7 @@ Vue.config.productionTip = process.env.NODE_ENV === 'development'
 library.add(
   // solid icons
   faAngleDown,
+  faAngleUp,
   faArrowDown,
   faArrowLeft,
   faArrowRight,
diff --git a/src/renderer/views/SubscribedChannels/SubscribedChannels.vue b/src/renderer/views/SubscribedChannels/SubscribedChannels.vue
index 73bcb9af20e15..5a8a043bd72d3 100644
--- a/src/renderer/views/SubscribedChannels/SubscribedChannels.vue
+++ b/src/renderer/views/SubscribedChannels/SubscribedChannels.vue
@@ -53,7 +53,7 @@
               class="unsubscribeContainer"
             >
               <ft-subscribe-button
-                class="btn"
+                :hide-profile-dropdown-toggle="false"
                 :channel-id="channel.id"
                 :channel-name="channel.name"
                 :channel-thumbnail="channel.thumbnail"
diff --git a/static/locales/en-US.yaml b/static/locales/en-US.yaml
index b1b6a720a6e2f..6fd2d0d003853 100644
--- a/static/locales/en-US.yaml
+++ b/static/locales/en-US.yaml
@@ -546,6 +546,8 @@ Profile:
   Are you sure you want to delete the selected channels?  This will not delete the channel from any other profile.: Are
     you sure you want to delete the selected channels?  This will not delete the channel
     from any other profile.
+  Close Profile Dropdown: Close Profile Dropdown
+  Open Profile Dropdown: Open Profile Dropdown
 #On Channel Page
 Channel:
   Subscribe: Subscribe

From 069d90b13238143d8f7e072c2fdd151a7be8678e Mon Sep 17 00:00:00 2001
From: Jason Henriquez <jasonhenriquez@protonmail.com>
Date: Sun, 22 Oct 2023 17:31:11 -0500
Subject: [PATCH 2/6] Implement dropdown element and styling

---
 .../ft-profile-selector.js                    |  4 +
 .../ft-profile-selector.vue                   |  2 +-
 .../ft-subscribe-button.css                   | 83 +++++++++++++++++
 .../ft-subscribe-button.js                    | 68 ++++++++++----
 .../ft-subscribe-button.vue                   | 93 ++++++++++++++-----
 5 files changed, 209 insertions(+), 41 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 24faf0fed6881..7a16c990eb183 100644
--- a/src/renderer/components/ft-profile-selector/ft-profile-selector.js
+++ b/src/renderer/components/ft-profile-selector/ft-profile-selector.js
@@ -35,6 +35,10 @@ export default defineComponent({
     }
   },
   methods: {
+    isActiveProfile: function (profile) {
+      return profile._id === this.activeProfile._id
+    },
+
     toggleProfileList: function () {
       this.profileListShown = !this.profileListShown
 
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 f9696ad46a31a..5547c6d892572 100644
--- a/src/renderer/components/ft-profile-selector/ft-profile-selector.vue
+++ b/src/renderer/components/ft-profile-selector/ft-profile-selector.vue
@@ -46,7 +46,7 @@
           :key="index"
           class="profile"
           :aria-labelledby="'profile-' + index + '-name'"
-          aria-selected="false"
+          :aria-selected="isActiveProfile(profile)"
           tabindex="0"
           role="option"
           @click="setActiveProfile(profile)"
diff --git a/src/renderer/components/ft-subscribe-button/ft-subscribe-button.css b/src/renderer/components/ft-subscribe-button/ft-subscribe-button.css
index c658890de0745..33d78fd8522ca 100644
--- a/src/renderer/components/ft-subscribe-button/ft-subscribe-button.css
+++ b/src/renderer/components/ft-subscribe-button/ft-subscribe-button.css
@@ -39,6 +39,22 @@
   block-size: 2em;
 }
 
+.profileDropdown .profile {
+  cursor: pointer;
+  display: flex;
+  gap: 0.5em;
+  padding-inline-start: 0.5em;
+  block-size: 50px;
+  align-items: center;
+  -webkit-transition: background 0.2s ease-out;
+  -moz-transition: background 0.2s ease-out;
+  -o-transition: background 0.2s ease-out;
+  transition: background 0.2s ease-out;
+}
+
+.profileDropdown .profile:hover {
+}
+
 .profileDropdownToggle.btn {
   border-inline-start: none !important;
   border-start-start-radius: 0;
@@ -48,3 +64,70 @@
   padding-inline: 10px;
   box-sizing: content-box;
 }
+
+.profileDropdown {
+  background-color: var(--side-nav-color);
+  box-shadow: 0 1px 2px rgb(0 0 0 / 50%);
+  color: var(--secondary-text-color);
+  display: inline;
+  font-size: 12px;
+  max-block-size: 200px;
+  inline-size: 150px;
+  padding-inline: 0;
+  margin-block: 0;
+  overflow-y: scroll;
+  list-style-type: none;
+  position: absolute;
+  text-align: center;
+  -webkit-user-select: none;
+  user-select: none;
+  z-index: 3;
+}
+
+.profileDropdown .colorOption {
+  inline-size: 40px;
+  block-size: 40px;
+  cursor: pointer;
+  align-items: center;
+  display: flex;
+  justify-content: center;
+  flex-shrink: 0;
+  border-radius: 50%;
+  -webkit-border-radius: 50%;
+}
+
+.profileDropdown .initial {
+  font-size: 20px;
+  line-height: 1em;
+  text-align: center;
+  user-select: none;
+  -webkit-user-select: none;
+}
+
+/* .profileDropdown .profileList {
+  display: inline;
+  position: absolute;
+  inset-block-start: 60px;
+  inset-inline-end: 10px;
+  min-inline-size: 250px;
+  block-size: 400px;
+  padding: 5px;
+  background-color: var(--card-bg-color);
+  box-shadow: 0 0 4px var(--scrollbar-color-hover);
+} */
+
+.profileDropdown .profileName {
+  inline-size: 100%;
+  padding-inline-end: 1em;
+  text-align: start;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.profileDropdown .subscribed {
+  background-color: lightgreen;
+}
+
+.profileDropdown .unsubscribed {
+  background-color: lightgray
+}
diff --git a/src/renderer/components/ft-subscribe-button/ft-subscribe-button.js b/src/renderer/components/ft-subscribe-button/ft-subscribe-button.js
index ed35bfc7c3b43..6940442281a83 100644
--- a/src/renderer/components/ft-subscribe-button/ft-subscribe-button.js
+++ b/src/renderer/components/ft-subscribe-button/ft-subscribe-button.js
@@ -41,22 +41,34 @@ export default defineComponent({
     }
   },
   computed: {
+    profileInitials: function () {
+      return this.profileList.map((profile) => {
+        return profile?.name?.length > 0 ? Array.from(profile.name)[0].toUpperCase() : ''
+      })
+    },
+
     profileList: function () {
       return this.$store.getters.getProfileList
     },
 
+    profileDisplayList: function () {
+      if (this.activeProfile._id === MAIN_PROFILE_ID) {
+        return this.profileList
+      }
+
+      return [
+        this.profileList[0],
+        this.activeProfile,
+        ...this.profileList.filter((profile, i) => i !== 0 && !this.isActiveProfile(profile))
+      ]
+    },
+
     activeProfile: function () {
       return this.$store.getters.getActiveProfile
     },
 
     subscriptionInfo: function () {
-      return this.activeProfile.subscriptions.find((channel) => {
-        return channel.id === this.channelId
-      }) ?? null
-    },
-
-    isSubscribed: function () {
-      return this.subscriptionInfo !== null
+      return this.subscriptionInfoForProfile(this.activeProfile)
     },
 
     hideChannelSubscriptions: function () {
@@ -64,7 +76,7 @@ export default defineComponent({
     },
 
     subscribedText: function () {
-      let subscribedValue = (this.isSubscribed ? this.$t('Channel.Unsubscribe') : this.$t('Channel.Subscribe')).toUpperCase()
+      let subscribedValue = (this.isProfileSubscribed(this.activeProfile) ? this.$t('Channel.Unsubscribe') : this.$t('Channel.Subscribe')).toUpperCase()
       if (this.subscriptionCountText !== '' && !this.hideChannelSubscriptions) {
         subscribedValue += ' ' + this.subscriptionCountText
       }
@@ -77,14 +89,14 @@ export default defineComponent({
 
   },
   methods: {
-    handleSubscription: function () {
+    handleSubscription: function (profile = this.activeProfile) {
       if (this.channelId === '') {
         return
       }
 
-      const currentProfile = deepCopy(this.activeProfile)
+      const currentProfile = deepCopy(profile)
 
-      if (this.isSubscribed) {
+      if (this.isProfileSubscribed(profile)) {
         currentProfile.subscriptions = currentProfile.subscriptions.filter((channel) => {
           return channel.id !== this.channelId
         })
@@ -92,16 +104,16 @@ export default defineComponent({
         this.updateProfile(currentProfile)
         showToast(this.$t('Channel.Channel has been removed from your subscriptions'))
 
-        if (this.activeProfile._id === MAIN_PROFILE_ID) {
+        if (profile._id === MAIN_PROFILE_ID) {
           // Check if a subscription exists in a different profile.
           // Remove from there as well.
           let duplicateSubscriptions = 0
 
-          this.profileList.forEach((profile) => {
-            if (profile._id === MAIN_PROFILE_ID) {
+          this.profileList.forEach((profileInList) => {
+            if (profileInList._id === MAIN_PROFILE_ID) {
               return
             }
-            duplicateSubscriptions += this.unsubscribe(profile, this.channelId)
+            duplicateSubscriptions += this.unsubscribe(profileInList, this.channelId)
           })
 
           if (duplicateSubscriptions > 0) {
@@ -120,7 +132,7 @@ export default defineComponent({
         this.updateProfile(currentProfile)
         showToast(this.$t('Channel.Added channel to your subscriptions'))
 
-        if (this.activeProfile._id !== MAIN_PROFILE_ID) {
+        if (profile._id !== MAIN_PROFILE_ID) {
           const primaryProfile = deepCopy(this.profileList.find(prof => {
             return prof._id === MAIN_PROFILE_ID
           }))
@@ -135,12 +147,36 @@ export default defineComponent({
           }
         }
       }
+
+      if (this.isProfileDropdownEnabled && !this.isProfileDropdownOpen) {
+        this.toggleProfileDropdown()
+      }
+    },
+
+    handleProfileDropdownFocusOut: function () {
+      if (!this.$refs.profileDropdown.matches(':focus-within')) {
+        this.isProfileDropdownOpen = false
+      }
     },
 
     toggleProfileDropdown: function() {
       this.isProfileDropdownOpen = !this.isProfileDropdownOpen
     },
 
+    isActiveProfile: function (profile) {
+      return profile._id === this.activeProfile._id
+    },
+
+    subscriptionInfoForProfile: function (profile) {
+      return profile.subscriptions.find((channel) => {
+        return channel.id === this.channelId
+      }) ?? null
+    },
+
+    isProfileSubscribed: function (profile) {
+      return this.subscriptionInfoForProfile(profile) !== null
+    },
+
     unsubscribe: function(profile, channelId) {
       const parsedProfile = deepCopy(profile)
       const index = parsedProfile.subscriptions.findIndex((channel) => {
diff --git a/src/renderer/components/ft-subscribe-button/ft-subscribe-button.vue b/src/renderer/components/ft-subscribe-button/ft-subscribe-button.vue
index 2aea54f752c6a..3587aa141d7e3 100644
--- a/src/renderer/components/ft-subscribe-button/ft-subscribe-button.vue
+++ b/src/renderer/components/ft-subscribe-button/ft-subscribe-button.vue
@@ -1,30 +1,75 @@
 <template>
-  <div
-    class="buttonList"
-    :class="{ hasProfileDropdownToggle: isProfileDropdownEnabled}"
-  >
-    <ft-button
-      :label="subscribedText"
-      :no-border="true"
-      class="subscribeButton"
-      background-color="var(--primary-color)"
-      text-color="var(--text-with-main-color)"
-      @click="handleSubscription"
-    />
-    <ft-button
-      v-if="isProfileDropdownEnabled"
-      :no-border="true"
-      :title="isProfileDropdownOpen ? $t('Profile.Close Profile Dropdown') : $t('Profile.Open Profile Dropdown')"
-      class="profileDropdownToggle"
-      background-color="var(--primary-color)"
-      text-color="var(--text-with-main-color)"
-      @click="toggleProfileDropdown"
+  <div class="subscribeButton">
+    <div
+      class="buttonList"
+      :class="{ hasProfileDropdownToggle: isProfileDropdownEnabled}"
     >
-      <font-awesome-icon
-        :icon="isProfileDropdownOpen ? ['fas', 'angle-up'] : ['fas', 'angle-down']"
+      <ft-button
+        :label="subscribedText"
+        :no-border="true"
+        class="subscribeButton"
+        background-color="var(--primary-color)"
+        text-color="var(--text-with-main-color)"
+        @click="handleSubscription"
       />
-      <!-- :icon="['fas', isProfileDropdownOpen ? 'angle-up' : 'angle-down']" -->
-    </ft-button>
+      <ft-button
+        v-if="isProfileDropdownEnabled"
+        :no-border="true"
+        :title="isProfileDropdownOpen ? $t('Profile.Close Profile Dropdown') : $t('Profile.Open Profile Dropdown')"
+        class="profileDropdownToggle"
+        background-color="var(--primary-color)"
+        text-color="var(--text-with-main-color)"
+        @click="toggleProfileDropdown"
+      >
+        <font-awesome-icon
+          :icon="isProfileDropdownOpen ? ['fas', 'angle-up'] : ['fas', 'angle-down']"
+        />
+      </ft-button>
+    </div>
+    <template v-if="isProfileDropdownOpen">
+      <ul
+        ref="profileDropdown"
+        tabindex="-1"
+        class="profileDropdown bottom"
+        @focusout="handleProfileDropdownFocusOut"
+      >
+        <!-- may want to make role="checkbox" -->
+        <li
+          v-for="(profile, index) in profileDisplayList"
+          :id="'profile-' + index"
+          :key="'subscription-profile-' + index"
+          class="profile"
+          :class="{
+            subscribed: isProfileSubscribed(profile),
+            unsubscribed: !isProfileSubscribed(profile)
+          }"
+          :aria-labelledby="'profile-' + index + '-name'"
+          :aria-selected="isActiveProfile(profile)"
+          :aria-checked="isProfileSubscribed(profile)"
+          tabindex="0"
+          role="checkbox"
+          @click.stop.prevent="handleSubscription(profile)"
+          @keydown.space.stop.prevent="handleSubscription(profile)"
+        >
+          <div
+            class="colorOption"
+            :style="{ background: profile.bgColor, color: profile.textColor }"
+          >
+            <div
+              class="initial"
+            >
+              {{ profileInitials[index] }}
+            </div>
+          </div>
+          <p
+            :id="'profile-' + index + '-name'"
+            class="profileName"
+          >
+            {{ profile.name }}
+          </p>
+        </li>
+      </ul>
+    </template>
   </div>
 </template>
 

From 002ffde779d66a7a376e1ce6694c427985df2b30 Mon Sep 17 00:00:00 2001
From: Jason Henriquez <jasonhenriquez@protonmail.com>
Date: Thu, 26 Oct 2023 22:59:31 -0500
Subject: [PATCH 3/6] Implements remaining styling and logic

---
 .../ft-subscribe-button.css                   | 133 ----------------
 .../ft-subscribe-button.js                    |  18 ++-
 .../ft-subscribe-button.scss                  | 146 ++++++++++++++++++
 .../ft-subscribe-button.vue                   |  82 +++++-----
 src/renderer/views/Channel/Channel.css        |   1 +
 5 files changed, 203 insertions(+), 177 deletions(-)
 delete mode 100644 src/renderer/components/ft-subscribe-button/ft-subscribe-button.css
 create mode 100644 src/renderer/components/ft-subscribe-button/ft-subscribe-button.scss

diff --git a/src/renderer/components/ft-subscribe-button/ft-subscribe-button.css b/src/renderer/components/ft-subscribe-button/ft-subscribe-button.css
deleted file mode 100644
index 33d78fd8522ca..0000000000000
--- a/src/renderer/components/ft-subscribe-button/ft-subscribe-button.css
+++ /dev/null
@@ -1,133 +0,0 @@
-.buttonList {
-  margin: 5px;
-  margin-block-end: 10px;
-  border-radius: 4px;
-  block-size: fit-content;
-  box-shadow: 0px 1px 2px rgb(0 0 0 / 50%);
-  display: flex;
-  flex-wrap: nowrap;
-  /* addresses odd clipping behavior when adjusting window size*/
-  background-color: var(--primary-color);
-}
-
-/* Ensures style here overrides style of .btn */
-.subscribeButton.btn {
-  min-inline-size: 150px;
-  white-space: initial;
-}
-
-.subscribeButton.btn, .profileDropdownToggle.btn {
-  align-self: center;
-  margin-block: 0;
-  margin-inline: 0;
-}
-
-.hasProfileDropdownToggle > .subscribeButton.btn {
-  min-inline-size: 100px;
-  padding-inline: 5px;
-  border-inline-end: 2px solid var(--primary-color-active) !important;
-  border-start-end-radius: 0;
-  border-end-end-radius: 0;
-  box-sizing: content-box;
-}
-
-.hasProfileDropdownToggle > .subscribeButton.btn, .profileDropdownToggle.btn {
-  padding-block: 5px;
-  padding-inline: 6px;
-  box-shadow: none;
-  flex: auto;
-  block-size: 2em;
-}
-
-.profileDropdown .profile {
-  cursor: pointer;
-  display: flex;
-  gap: 0.5em;
-  padding-inline-start: 0.5em;
-  block-size: 50px;
-  align-items: center;
-  -webkit-transition: background 0.2s ease-out;
-  -moz-transition: background 0.2s ease-out;
-  -o-transition: background 0.2s ease-out;
-  transition: background 0.2s ease-out;
-}
-
-.profileDropdown .profile:hover {
-}
-
-.profileDropdownToggle.btn {
-  border-inline-start: none !important;
-  border-start-start-radius: 0;
-  border-end-start-radius: 0;
-  display: inline-block;
-  min-inline-size: 1em;
-  padding-inline: 10px;
-  box-sizing: content-box;
-}
-
-.profileDropdown {
-  background-color: var(--side-nav-color);
-  box-shadow: 0 1px 2px rgb(0 0 0 / 50%);
-  color: var(--secondary-text-color);
-  display: inline;
-  font-size: 12px;
-  max-block-size: 200px;
-  inline-size: 150px;
-  padding-inline: 0;
-  margin-block: 0;
-  overflow-y: scroll;
-  list-style-type: none;
-  position: absolute;
-  text-align: center;
-  -webkit-user-select: none;
-  user-select: none;
-  z-index: 3;
-}
-
-.profileDropdown .colorOption {
-  inline-size: 40px;
-  block-size: 40px;
-  cursor: pointer;
-  align-items: center;
-  display: flex;
-  justify-content: center;
-  flex-shrink: 0;
-  border-radius: 50%;
-  -webkit-border-radius: 50%;
-}
-
-.profileDropdown .initial {
-  font-size: 20px;
-  line-height: 1em;
-  text-align: center;
-  user-select: none;
-  -webkit-user-select: none;
-}
-
-/* .profileDropdown .profileList {
-  display: inline;
-  position: absolute;
-  inset-block-start: 60px;
-  inset-inline-end: 10px;
-  min-inline-size: 250px;
-  block-size: 400px;
-  padding: 5px;
-  background-color: var(--card-bg-color);
-  box-shadow: 0 0 4px var(--scrollbar-color-hover);
-} */
-
-.profileDropdown .profileName {
-  inline-size: 100%;
-  padding-inline-end: 1em;
-  text-align: start;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.profileDropdown .subscribed {
-  background-color: lightgreen;
-}
-
-.profileDropdown .unsubscribed {
-  background-color: lightgray
-}
diff --git a/src/renderer/components/ft-subscribe-button/ft-subscribe-button.js b/src/renderer/components/ft-subscribe-button/ft-subscribe-button.js
index 6940442281a83..aff9a9a71b29f 100644
--- a/src/renderer/components/ft-subscribe-button/ft-subscribe-button.js
+++ b/src/renderer/components/ft-subscribe-button/ft-subscribe-button.js
@@ -42,7 +42,7 @@ export default defineComponent({
   },
   computed: {
     profileInitials: function () {
-      return this.profileList.map((profile) => {
+      return this.profileDisplayList.map((profile) => {
         return profile?.name?.length > 0 ? Array.from(profile.name)[0].toUpperCase() : ''
       })
     },
@@ -51,15 +51,19 @@ export default defineComponent({
       return this.$store.getters.getProfileList
     },
 
+    /* sort by 'All Channels' -> active profile -> unsubscribed channels -> unsubscribed channels */
     profileDisplayList: function () {
-      if (this.activeProfile._id === MAIN_PROFILE_ID) {
-        return this.profileList
+      const mainProfileAndActiveProfile = [this.profileList[0]]
+      if (this.activeProfile._id !== MAIN_PROFILE_ID) {
+        mainProfileAndActiveProfile.push(this.activeProfile)
       }
 
       return [
-        this.profileList[0],
-        this.activeProfile,
-        ...this.profileList.filter((profile, i) => i !== 0 && !this.isActiveProfile(profile))
+        ...mainProfileAndActiveProfile,
+        ...this.profileList.filter((profile, i) =>
+          i !== 0 && !this.isActiveProfile(profile) && !this.isProfileSubscribed(profile)),
+        ...this.profileList.filter((profile, i) =>
+          i !== 0 && !this.isActiveProfile(profile) && this.isProfileSubscribed(profile))
       ]
     },
 
@@ -154,7 +158,7 @@ export default defineComponent({
     },
 
     handleProfileDropdownFocusOut: function () {
-      if (!this.$refs.profileDropdown.matches(':focus-within')) {
+      if (!this.$refs.subscribeButton.matches(':focus-within')) {
         this.isProfileDropdownOpen = false
       }
     },
diff --git a/src/renderer/components/ft-subscribe-button/ft-subscribe-button.scss b/src/renderer/components/ft-subscribe-button/ft-subscribe-button.scss
new file mode 100644
index 0000000000000..0a61d4d500d83
--- /dev/null
+++ b/src/renderer/components/ft-subscribe-button/ft-subscribe-button.scss
@@ -0,0 +1,146 @@
+.buttonList {
+  margin: 5px;
+  margin-block-end: 10px;
+  border-radius: 4px;
+  block-size: fit-content;
+  box-shadow: 0px 1px 2px rgb(0 0 0 / 50%);
+  display: flex;
+  flex-wrap: nowrap;
+  /* addresses odd clipping behavior when adjusting window size*/
+  background-color: var(--primary-color);
+}
+
+.ftSubscribeButton {
+  position: relative;
+  text-align: start;
+}
+
+/* Ensures style here overrides style of .btn */
+.subscribeButton.btn {
+  min-inline-size: 150px;
+  white-space: initial;
+}
+
+.subscribeButton.btn, .profileDropdownToggle.btn {
+  align-self: center;
+  margin-block: 0;
+  margin-inline: 0;
+}
+
+.dropdownOpened {
+  .subscribeButton, .profileDropdownToggle {
+    border-end-start-radius: 0;
+    border-end-end-radius: 0;
+  }
+}
+
+.profileDropdownToggle.btn {
+  border-inline-start: none !important;
+  border-start-start-radius: 0;
+  border-end-start-radius: 0;
+  display: inline-block;
+  min-inline-size: 1em;
+  padding-inline: 10px;
+  box-sizing: content-box;
+}
+
+.hasProfileDropdownToggle {
+  .subscribeButton.btn {
+    min-inline-size: 100px;
+    padding-inline: 5px;
+    border-inline-end: 2px solid var(--primary-color-active) !important;
+    border-start-end-radius: 0;
+    border-end-end-radius: 0;
+    box-sizing: content-box;
+  }
+}
+
+.hasProfileDropdownToggle > .subscribeButton.btn, .profileDropdownToggle.btn {
+  padding-block: 5px;
+  padding-inline: 6px;
+  box-shadow: none;
+  flex: auto;
+  block-size: 2em;
+}
+
+.profileDropdown {
+  background-color: var(--side-nav-color);
+  box-shadow: 0 1px 2px rgb(0 0 0 / 50%);
+  color: var(--secondary-text-color);
+  display: inline;
+  font-size: 12px;
+  max-block-size: 200px;
+  margin-block: -10px 0;
+  margin-inline: 5px 0;
+  overflow-y: scroll;
+  position: absolute;
+  text-align: center;
+  -webkit-user-select: none;
+  user-select: none;
+  z-index: 3;
+  // accounts for parent's left and right margins
+  inline-size: calc(100% - 10px);
+
+  .profileList {
+    list-style-type: none;
+    margin: 0;
+    padding-inline: 0;
+  }
+
+  .profile {
+    cursor: pointer;
+    display: flex;
+    gap: 0.5em;
+    padding-inline-start: 0.5em;
+    block-size: 50px;
+    align-items: center;
+    -webkit-transition: background 0.2s ease-out;
+    -moz-transition: background 0.2s ease-out;
+    -o-transition: background 0.2s ease-out;
+    transition: background 0.2s ease-out;
+
+    &:hover {
+      background-color: var(--side-nav-hover-color);
+      color: var(--side-nav-hover-text-color);
+      -moz-transition: background 0.2s ease-in;
+      -o-transition: background 0.2s ease-in;
+      transition: background 0.2s ease-in;
+    }
+
+    .colorOption {
+      inline-size: 40px;
+      block-size: 40px;
+      cursor: pointer;
+      align-items: center;
+      display: flex;
+      justify-content: center;
+      flex-shrink: 0;
+      border-radius: 50%;
+      -webkit-border-radius: 50%;
+    }
+
+    .initial {
+      font-size: 20px;
+      line-height: 1em;
+      text-align: center;
+      user-select: none;
+      -webkit-user-select: none;
+    }
+
+    .profileName {
+      padding-inline-end: 1em;
+      text-align: start;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+
+    &.subscribed {
+      background-color: var(--primary-color);
+
+      .profileName {
+        color: var(--text-with-main-color);
+      }
+    }
+  }
+}
diff --git a/src/renderer/components/ft-subscribe-button/ft-subscribe-button.vue b/src/renderer/components/ft-subscribe-button/ft-subscribe-button.vue
index 3587aa141d7e3..1767123a78309 100644
--- a/src/renderer/components/ft-subscribe-button/ft-subscribe-button.vue
+++ b/src/renderer/components/ft-subscribe-button/ft-subscribe-button.vue
@@ -1,5 +1,10 @@
 <template>
-  <div class="subscribeButton">
+  <div
+    ref="subscribeButton"
+    class="ftSubscribeButton"
+    :class="{ dropdownOpened: isProfileDropdownOpen}"
+    @focusout="handleProfileDropdownFocusOut"
+  >
     <div
       class="buttonList"
       :class="{ hasProfileDropdownToggle: isProfileDropdownEnabled}"
@@ -27,51 +32,54 @@
       </ft-button>
     </div>
     <template v-if="isProfileDropdownOpen">
-      <ul
-        ref="profileDropdown"
+      <div
         tabindex="-1"
-        class="profileDropdown bottom"
-        @focusout="handleProfileDropdownFocusOut"
+        class="profileDropdown"
       >
-        <!-- may want to make role="checkbox" -->
-        <li
-          v-for="(profile, index) in profileDisplayList"
-          :id="'profile-' + index"
-          :key="'subscription-profile-' + index"
-          class="profile"
-          :class="{
-            subscribed: isProfileSubscribed(profile),
-            unsubscribed: !isProfileSubscribed(profile)
-          }"
-          :aria-labelledby="'profile-' + index + '-name'"
-          :aria-selected="isActiveProfile(profile)"
-          :aria-checked="isProfileSubscribed(profile)"
-          tabindex="0"
-          role="checkbox"
-          @click.stop.prevent="handleSubscription(profile)"
-          @keydown.space.stop.prevent="handleSubscription(profile)"
+        <ul
+          class="profileList"
+          :aria-expanded="isProfileDropdownOpen"
         >
-          <div
-            class="colorOption"
-            :style="{ background: profile.bgColor, color: profile.textColor }"
+          <!-- may want to make role="checkbox" -->
+          <li
+            v-for="(profile, index) in profileDisplayList"
+            :id="'profile-' + index"
+            :key="'subscription-profile-' + index"
+            class="profile"
+            :class="{
+              subscribed: isProfileSubscribed(profile),
+              unsubscribed: !isProfileSubscribed(profile)
+            }"
+            :aria-labelledby="'profile-' + index + '-name'"
+            :aria-selected="isActiveProfile(profile)"
+            :aria-checked="isProfileSubscribed(profile)"
+            tabindex="0"
+            role="checkbox"
+            @click.stop.prevent="handleSubscription(profile)"
+            @keydown.space.stop.prevent="handleSubscription(profile)"
           >
             <div
-              class="initial"
+              class="colorOption"
+              :style="{ background: profile.bgColor, color: profile.textColor }"
             >
-              {{ profileInitials[index] }}
+              <div
+                class="initial"
+              >
+                {{ isProfileSubscribed(profile) ? '✓' : profileInitials[index] }}
+              </div>
             </div>
-          </div>
-          <p
-            :id="'profile-' + index + '-name'"
-            class="profileName"
-          >
-            {{ profile.name }}
-          </p>
-        </li>
-      </ul>
+            <p
+              :id="'profile-' + index + '-name'"
+              class="profileName"
+            >
+              {{ profile.name }}
+            </p>
+          </li>
+        </ul>
+      </div>
     </template>
   </div>
 </template>
 
 <script src="./ft-subscribe-button.js" />
-<style src="./ft-subscribe-button.css" />
+<style lang="scss" src="./ft-subscribe-button.scss" />
diff --git a/src/renderer/views/Channel/Channel.css b/src/renderer/views/Channel/Channel.css
index 28567c0320034..3852c84b5fd5d 100644
--- a/src/renderer/views/Channel/Channel.css
+++ b/src/renderer/views/Channel/Channel.css
@@ -69,6 +69,7 @@
   display: flex;
   gap: 30px;
   justify-content: space-between;
+  align-items: center;
 }
 
 .subscribeButton {

From fffecfe2f31d45f28149d5ba9199e922ac4d48c2 Mon Sep 17 00:00:00 2001
From: Jason Henriquez <jasonhenriquez@protonmail.com>
Date: Fri, 27 Oct 2023 00:35:18 -0500
Subject: [PATCH 4/6] Correct use of aria-selected in FT

Note: was able to add aria-controls to ft-profile-selector because it keeps the hidden dropdown in the DOM. The same is not true of the ft-icon-button or ft-subscribe-button. Main point: aria-expanded should go on the button opening the dropdown, not the dropdown itself.
---
 src/renderer/components/ft-icon-button/ft-icon-button.vue   | 3 +--
 .../components/ft-profile-selector/ft-profile-selector.vue  | 3 +++
 .../components/ft-subscribe-button/ft-subscribe-button.scss | 2 +-
 .../components/ft-subscribe-button/ft-subscribe-button.vue  | 6 ++----
 4 files changed, 7 insertions(+), 7 deletions(-)

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 b1760e528e600..c699f4392ddfc 100644
--- a/src/renderer/components/ft-icon-button/ft-icon-button.vue
+++ b/src/renderer/components/ft-icon-button/ft-icon-button.vue
@@ -14,6 +14,7 @@
       }"
       tabindex="0"
       role="button"
+      :aria-expanded="dropdownShown"
       @click="handleIconClick"
       @mousedown="handleIconMouseDown"
       @keydown.enter.prevent="handleIconClick"
@@ -33,7 +34,6 @@
             v-if="dropdownOptions.length > 0"
             class="list"
             role="listbox"
-            :aria-expanded="dropdownShown"
           >
             <li
               v-for="(option, index) in dropdownOptions"
@@ -71,7 +71,6 @@
             v-if="dropdownOptions.length > 0"
             class="list"
             role="listbox"
-            :aria-expanded="dropdownShown"
           >
             <li
               v-for="(option, index) in dropdownOptions"
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 5547c6d892572..98daa0fb32d4b 100644
--- a/src/renderer/components/ft-profile-selector/ft-profile-selector.vue
+++ b/src/renderer/components/ft-profile-selector/ft-profile-selector.vue
@@ -6,6 +6,8 @@
       :style="{ background: activeProfile.bgColor, color: activeProfile.textColor }"
       tabindex="0"
       role="button"
+      :aria-expanded="profileListShown"
+      aria-controls="profileSelectorList"
       @click="toggleProfileList"
       @mousedown="handleIconMouseDown"
       @keydown.space.prevent="toggleProfileList"
@@ -19,6 +21,7 @@
     </div>
     <ft-card
       v-show="profileListShown"
+      id="profileSelectorList"
       ref="profileList"
       class="profileList"
       tabindex="-1"
diff --git a/src/renderer/components/ft-subscribe-button/ft-subscribe-button.scss b/src/renderer/components/ft-subscribe-button/ft-subscribe-button.scss
index 0a61d4d500d83..303dbccc94f5a 100644
--- a/src/renderer/components/ft-subscribe-button/ft-subscribe-button.scss
+++ b/src/renderer/components/ft-subscribe-button/ft-subscribe-button.scss
@@ -6,7 +6,7 @@
   box-shadow: 0px 1px 2px rgb(0 0 0 / 50%);
   display: flex;
   flex-wrap: nowrap;
-  /* addresses odd clipping behavior when adjusting window size*/
+  /* addresses odd clipping behavior when adjusting window size */
   background-color: var(--primary-color);
 }
 
diff --git a/src/renderer/components/ft-subscribe-button/ft-subscribe-button.vue b/src/renderer/components/ft-subscribe-button/ft-subscribe-button.vue
index 1767123a78309..822a5c277eb15 100644
--- a/src/renderer/components/ft-subscribe-button/ft-subscribe-button.vue
+++ b/src/renderer/components/ft-subscribe-button/ft-subscribe-button.vue
@@ -24,6 +24,7 @@
         class="profileDropdownToggle"
         background-color="var(--primary-color)"
         text-color="var(--text-with-main-color)"
+        :aria-expanded="isProfileDropdownOpen"
         @click="toggleProfileDropdown"
       >
         <font-awesome-icon
@@ -38,17 +39,14 @@
       >
         <ul
           class="profileList"
-          :aria-expanded="isProfileDropdownOpen"
         >
-          <!-- may want to make role="checkbox" -->
           <li
             v-for="(profile, index) in profileDisplayList"
             :id="'profile-' + index"
             :key="'subscription-profile-' + index"
             class="profile"
             :class="{
-              subscribed: isProfileSubscribed(profile),
-              unsubscribed: !isProfileSubscribed(profile)
+              subscribed: isProfileSubscribed(profile)
             }"
             :aria-labelledby="'profile-' + index + '-name'"
             :aria-selected="isActiveProfile(profile)"

From 8a2842dadd51a60ce34f5b61c73792746028e4f0 Mon Sep 17 00:00:00 2001
From: Jason Henriquez <jasonhenriquez@protonmail.com>
Date: Fri, 27 Oct 2023 18:58:41 -0500
Subject: [PATCH 5/6] Resolve subscribe button staying upon bug

---
 src/renderer/views/SubscribedChannels/SubscribedChannels.vue | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/renderer/views/SubscribedChannels/SubscribedChannels.vue b/src/renderer/views/SubscribedChannels/SubscribedChannels.vue
index 5a8a043bd72d3..88b8ad36cd552 100644
--- a/src/renderer/views/SubscribedChannels/SubscribedChannels.vue
+++ b/src/renderer/views/SubscribedChannels/SubscribedChannels.vue
@@ -26,7 +26,7 @@
         <ft-flex-box class="channels">
           <div
             v-for="channel in channelList"
-            :key="channel.key"
+            :key="channel.id"
             class="channel"
           >
             <router-link
@@ -53,7 +53,6 @@
               class="unsubscribeContainer"
             >
               <ft-subscribe-button
-                :hide-profile-dropdown-toggle="false"
                 :channel-id="channel.id"
                 :channel-name="channel.name"
                 :channel-thumbnail="channel.thumbnail"

From 0f3ae7ab9b3f85ab569d502e2f8f82f18589c70a Mon Sep 17 00:00:00 2001
From: Jason Henriquez <jasonhenriquez@protonmail.com>
Date: Fri, 27 Oct 2023 19:00:52 -0500
Subject: [PATCH 6/6] Remove unneeded vendor-specific transition prefixes

See discussion here: https://www.web-plus-plus.com/Articles/css-transition-moz-and-webkit-vs-css3
---
 .../components/ft-channel-bubble/ft-channel-bubble.css    | 5 -----
 src/renderer/components/ft-input/ft-input.css             | 8 --------
 .../components/ft-profile-bubble/ft-profile-bubble.css    | 5 -----
 .../ft-profile-selector/ft-profile-selector.css           | 5 -----
 .../components/ft-subscribe-button/ft-subscribe-button.js | 2 +-
 .../ft-subscribe-button/ft-subscribe-button.scss          | 5 -----
 .../ft-subscribe-button/ft-subscribe-button.vue           | 8 ++++----
 .../side-nav-more-options/side-nav-more-options.css       | 4 ----
 src/renderer/components/side-nav/side-nav.css             | 4 ----
 9 files changed, 5 insertions(+), 41 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 fcb7b96e50df7..1a4878d64cb3c 100644
--- a/src/renderer/components/ft-channel-bubble/ft-channel-bubble.css
+++ b/src/renderer/components/ft-channel-bubble/ft-channel-bubble.css
@@ -11,17 +11,12 @@
   overflow: hidden;
   color: inherit;
   text-decoration: none;
-  -webkit-transition: background 0.2s ease-out;
-  -moz-transition: background 0.2s ease-out;
-  -o-transition: background 0.2s ease-out;
   transition: background 0.2s ease-out;
 }
 
 .bubblePadding:hover {
   background-color: var(--side-nav-hover-color);
   color: var(--side-nav-hover-text-color);
-  -moz-transition: background 0.2s ease-in;
-  -o-transition: background 0.2s ease-in;
   transition: background 0.2s ease-in;
 }
 
diff --git a/src/renderer/components/ft-input/ft-input.css b/src/renderer/components/ft-input/ft-input.css
index a458b9869336d..4d383d327244e 100644
--- a/src/renderer/components/ft-input/ft-input.css
+++ b/src/renderer/components/ft-input/ft-input.css
@@ -57,8 +57,6 @@
   border-radius: 100%;
   color: var(--primary-text-color);
   opacity: 0;
-  -moz-transition: background 0.2s ease-in;
-  -o-transition: background 0.2s ease-in;
   transition: background 0.2s ease-in;
 }
 
@@ -74,8 +72,6 @@
 .clearInputTextButton.visible:active {
   background-color: var(--tertiary-text-color);
   color: var(--side-nav-active-text-color);
-  -moz-transition: background 0.2s ease-in;
-  -o-transition: background 0.2s ease-in;
   transition: background 0.2s ease-in;
 }
 
@@ -172,8 +168,6 @@
 .inputAction.enabled:hover {
   background-color: var(--side-nav-hover-color);
   color: var(--side-nav-hover-text-color);
-  -moz-transition: background 0.2s ease-in;
-  -o-transition: background 0.2s ease-in;
   transition: background 0.2s ease-in;
 }
 
@@ -184,8 +178,6 @@
 .inputAction.enabled:active {
   background-color: var(--tertiary-text-color);
   color: var(--side-nav-active-text-color);
-  -moz-transition: background 0.2s ease-in;
-  -o-transition: background 0.2s ease-in;
   transition: background 0.2s ease-in;
 }
 
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 a3266e01b7c1d..024da1567200b 100644
--- a/src/renderer/components/ft-profile-bubble/ft-profile-bubble.css
+++ b/src/renderer/components/ft-profile-bubble/ft-profile-bubble.css
@@ -4,17 +4,12 @@
   padding-block: 10px 30px;
   padding-inline: 10px;
   cursor: pointer;
-  -webkit-transition: background 0.2s ease-out;
-  -moz-transition: background 0.2s ease-out;
-  -o-transition: background 0.2s ease-out;
   transition: background 0.2s ease-out;
 }
 
 .bubblePadding:hover {
   background-color: var(--side-nav-hover-color);
   color: var(--side-nav-hover-text-color);
-  -moz-transition: background 0.2s ease-in;
-  -o-transition: background 0.2s ease-in;
   transition: background 0.2s ease-in;
 }
 
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 94ee6e91d376e..19c39f6d31e15 100644
--- a/src/renderer/components/ft-profile-selector/ft-profile-selector.css
+++ b/src/renderer/components/ft-profile-selector/ft-profile-selector.css
@@ -42,17 +42,12 @@
 .profile {
   cursor: pointer;
   block-size: 50px;
-  -webkit-transition: background 0.2s ease-out;
-  -moz-transition: background 0.2s ease-out;
-  -o-transition: background 0.2s ease-out;
   transition: background 0.2s ease-out;
 }
 
 .profile:hover {
   background-color: var(--side-nav-hover-color);
   color: var(--side-nav-hover-text-color);
-  -moz-transition: background 0.2s ease-in;
-  -o-transition: background 0.2s ease-in;
   transition: background 0.2s ease-in;
 }
 
diff --git a/src/renderer/components/ft-subscribe-button/ft-subscribe-button.js b/src/renderer/components/ft-subscribe-button/ft-subscribe-button.js
index aff9a9a71b29f..a8ab091770e86 100644
--- a/src/renderer/components/ft-subscribe-button/ft-subscribe-button.js
+++ b/src/renderer/components/ft-subscribe-button/ft-subscribe-button.js
@@ -51,7 +51,7 @@ export default defineComponent({
       return this.$store.getters.getProfileList
     },
 
-    /* sort by 'All Channels' -> active profile -> unsubscribed channels -> unsubscribed channels */
+    /* sort by 'All Channels' -> active profile -> unsubscribed channels -> subscribed channels */
     profileDisplayList: function () {
       const mainProfileAndActiveProfile = [this.profileList[0]]
       if (this.activeProfile._id !== MAIN_PROFILE_ID) {
diff --git a/src/renderer/components/ft-subscribe-button/ft-subscribe-button.scss b/src/renderer/components/ft-subscribe-button/ft-subscribe-button.scss
index 303dbccc94f5a..1d8667fa14491 100644
--- a/src/renderer/components/ft-subscribe-button/ft-subscribe-button.scss
+++ b/src/renderer/components/ft-subscribe-button/ft-subscribe-button.scss
@@ -94,16 +94,11 @@
     padding-inline-start: 0.5em;
     block-size: 50px;
     align-items: center;
-    -webkit-transition: background 0.2s ease-out;
-    -moz-transition: background 0.2s ease-out;
-    -o-transition: background 0.2s ease-out;
     transition: background 0.2s ease-out;
 
     &:hover {
       background-color: var(--side-nav-hover-color);
       color: var(--side-nav-hover-text-color);
-      -moz-transition: background 0.2s ease-in;
-      -o-transition: background 0.2s ease-in;
       transition: background 0.2s ease-in;
     }
 
diff --git a/src/renderer/components/ft-subscribe-button/ft-subscribe-button.vue b/src/renderer/components/ft-subscribe-button/ft-subscribe-button.vue
index 822a5c277eb15..7aded099d7e89 100644
--- a/src/renderer/components/ft-subscribe-button/ft-subscribe-button.vue
+++ b/src/renderer/components/ft-subscribe-button/ft-subscribe-button.vue
@@ -42,13 +42,13 @@
         >
           <li
             v-for="(profile, index) in profileDisplayList"
-            :id="'profile-' + index"
-            :key="'subscription-profile-' + index"
+            :id="'subscription-profile-' + index"
+            :key="index"
             class="profile"
             :class="{
               subscribed: isProfileSubscribed(profile)
             }"
-            :aria-labelledby="'profile-' + index + '-name'"
+            :aria-labelledby="'subscription-profile-' + index + '-name'"
             :aria-selected="isActiveProfile(profile)"
             :aria-checked="isProfileSubscribed(profile)"
             tabindex="0"
@@ -67,7 +67,7 @@
               </div>
             </div>
             <p
-              :id="'profile-' + index + '-name'"
+              :id="'subscription-profile-' + index + '-name'"
               class="profileName"
             >
               {{ profile.name }}
diff --git a/src/renderer/components/side-nav-more-options/side-nav-more-options.css b/src/renderer/components/side-nav-more-options/side-nav-more-options.css
index 6da86c064ea0d..4945a84ecde27 100644
--- a/src/renderer/components/side-nav-more-options/side-nav-more-options.css
+++ b/src/renderer/components/side-nav-more-options/side-nav-more-options.css
@@ -14,16 +14,12 @@
 .navOption:hover {
   background-color: var(--side-nav-hover-color);
   color: var(--side-nav-hover-text-color);
-  -moz-transition: background 0.2s ease-in;
-  -o-transition: background 0.2s ease-in;
   transition: background 0.2s ease-in;
 }
 
 .navOption:active {
   background-color: var(--side-nav-active-color);
   color: var(--side-nav-active-text-color);
-  -moz-transition: background 0.2s ease-in;
-  -o-transition: background 0.2s ease-in;
   transition: background 0.2s ease-in;
 }
 
diff --git a/src/renderer/components/side-nav/side-nav.css b/src/renderer/components/side-nav/side-nav.css
index de36a3f621bf5..a9a869114a770 100644
--- a/src/renderer/components/side-nav/side-nav.css
+++ b/src/renderer/components/side-nav/side-nav.css
@@ -53,16 +53,12 @@
 .navOption:hover, .navChannel:hover {
   background-color: var(--side-nav-hover-color);
   color: var(--side-nav-hover-text-color);
-  -moz-transition: background 0.2s ease-in;
-  -o-transition: background 0.2s ease-in;
   transition: background 0.2s ease-in;
 }
 
 .navOption:active, .navChannel:active {
   background-color: var(--side-nav-active-color);
   color: var(--side-nav-active-text-color);
-  -moz-transition: background 0.2s ease-in;
-  -o-transition: background 0.2s ease-in;
   transition: background 0.2s ease-in;
 }