From 28e2830c858f7259516e79d54d7bdf14806a4d6b Mon Sep 17 00:00:00 2001
From: absidue <48293849+absidue@users.noreply.github.com>
Date: Sat, 25 Jan 2025 16:52:46 +0100
Subject: [PATCH] Migrate ProfileSettings, FtProfileBubble and FtProfileEdit to
 the composition API

---
 .../FtProfileBubble.css}                      |   0
 .../FtProfileBubble/FtProfileBubble.vue       |  74 +++++
 .../FtProfileEdit.css}                        |   0
 .../FtProfileEdit/FtProfileEdit.vue           | 270 ++++++++++++++++++
 .../ft-profile-bubble/ft-profile-bubble.js    |  51 ----
 .../ft-profile-bubble/ft-profile-bubble.vue   |  28 --
 .../ft-profile-edit/ft-profile-edit.js        | 169 -----------
 .../ft-profile-edit/ft-profile-edit.vue       | 111 -------
 .../views/ProfileSettings/ProfileSettings.css |   6 +-
 .../views/ProfileSettings/ProfileSettings.js  |  90 ------
 .../views/ProfileSettings/ProfileSettings.vue | 130 +++++++--
 11 files changed, 461 insertions(+), 468 deletions(-)
 rename src/renderer/components/{ft-profile-bubble/ft-profile-bubble.css => FtProfileBubble/FtProfileBubble.css} (100%)
 create mode 100644 src/renderer/components/FtProfileBubble/FtProfileBubble.vue
 rename src/renderer/components/{ft-profile-edit/ft-profile-edit.css => FtProfileEdit/FtProfileEdit.css} (100%)
 create mode 100644 src/renderer/components/FtProfileEdit/FtProfileEdit.vue
 delete mode 100644 src/renderer/components/ft-profile-bubble/ft-profile-bubble.js
 delete mode 100644 src/renderer/components/ft-profile-bubble/ft-profile-bubble.vue
 delete mode 100644 src/renderer/components/ft-profile-edit/ft-profile-edit.js
 delete mode 100644 src/renderer/components/ft-profile-edit/ft-profile-edit.vue
 delete mode 100644 src/renderer/views/ProfileSettings/ProfileSettings.js

diff --git a/src/renderer/components/ft-profile-bubble/ft-profile-bubble.css b/src/renderer/components/FtProfileBubble/FtProfileBubble.css
similarity index 100%
rename from src/renderer/components/ft-profile-bubble/ft-profile-bubble.css
rename to src/renderer/components/FtProfileBubble/FtProfileBubble.css
diff --git a/src/renderer/components/FtProfileBubble/FtProfileBubble.vue b/src/renderer/components/FtProfileBubble/FtProfileBubble.vue
new file mode 100644
index 0000000000000..41bfa293edeee
--- /dev/null
+++ b/src/renderer/components/FtProfileBubble/FtProfileBubble.vue
@@ -0,0 +1,74 @@
+<template>
+  <div
+    class="bubblePadding"
+    tabindex="0"
+    role="button"
+    :aria-labelledby="id"
+    @click="click"
+    @keydown.space.enter.prevent="click"
+  >
+    <div
+      class="bubble"
+      :style="{ background: backgroundColor, color: textColor }"
+    >
+      <div class="initial">
+        {{ profileInitial }}
+      </div>
+    </div>
+    <div
+      :id="id"
+      class="profileName"
+    >
+      {{ translatedProfileName }}
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+import { useId } from '../../composables/use-id-polyfill'
+import { useI18n } from '../../composables/use-i18n-polyfill'
+
+import { getFirstCharacter } from '../../helpers/strings'
+
+const props = defineProps({
+  profileName: {
+    type: String,
+    required: true
+  },
+  isMainProfile: {
+    type: Boolean,
+    required: true
+  },
+  backgroundColor: {
+    type: String,
+    required: true
+  },
+  textColor: {
+    type: String,
+    required: true
+  }
+})
+
+const { locale, t } = useI18n()
+
+const id = useId()
+
+const translatedProfileName = computed(() => {
+  return props.isMainProfile ? t('Profile.All Channels') : props.profileName
+})
+
+const profileInitial = computed(() => {
+  return props.profileName
+    ? getFirstCharacter(translatedProfileName.value, locale.value).toUpperCase()
+    : ''
+})
+
+const emit = defineEmits(['click'])
+
+function click() {
+  emit('click')
+}
+</script>
+
+<style scoped src="./FtProfileBubble.css" />
diff --git a/src/renderer/components/ft-profile-edit/ft-profile-edit.css b/src/renderer/components/FtProfileEdit/FtProfileEdit.css
similarity index 100%
rename from src/renderer/components/ft-profile-edit/ft-profile-edit.css
rename to src/renderer/components/FtProfileEdit/FtProfileEdit.css
diff --git a/src/renderer/components/FtProfileEdit/FtProfileEdit.vue b/src/renderer/components/FtProfileEdit/FtProfileEdit.vue
new file mode 100644
index 0000000000000..bc6383102d331
--- /dev/null
+++ b/src/renderer/components/FtProfileEdit/FtProfileEdit.vue
@@ -0,0 +1,270 @@
+<template>
+  <div>
+    <FtCard class="card">
+      <h2>{{ editOrCreateProfileLabel }}</h2>
+      <FtFlexBox class="profileEdit">
+        <div>
+          <h3>{{ $t("Profile.Color Picker") }}</h3>
+          <FtFlexBox
+            class="colorOptions"
+          >
+            <div
+              v-for="color in COLOR_VALUES"
+              :key="color"
+              class="colorOption"
+              :title="color + ' ' + $t('Profile.Custom Color')"
+              :style="{ background: color }"
+              tabindex="0"
+              role="button"
+              @click="profileBgColor = color"
+              @keydown.space.prevent="profileBgColor = color"
+              @keydown.enter.prevent="profileBgColor = color"
+            />
+          </FtFlexBox>
+          <div class="customColorSection">
+            <label for="colorPicker">{{ $t("Profile.Custom Color") }}</label>
+            <input
+              id="colorPicker"
+              v-model="profileBgColor"
+              type="color"
+            >
+          </div>
+          <FtInput
+            class="colorSelection"
+            placeholder=""
+            :value="profileBgColor"
+            :show-action-button="false"
+            :disabled="true"
+          />
+        </div>
+        <div class="secondEditRow">
+          <div>
+            <h3>{{ editOrCreateProfileNameLabel }}</h3>
+            <FtInput
+              class="profileName"
+              :placeholder="$t('Profile.Profile Name')"
+              :disabled="isMainProfile"
+              :value="translatedProfileName"
+              :show-action-button="false"
+              :maxlength="100"
+              @input="profileName = $event"
+              @keydown.enter.native="saveProfile"
+            />
+          </div>
+          <div>
+            <h3>{{ $t("Profile.Profile Preview") }}</h3>
+            <div class="profilePreviewSection">
+              <div
+                class="colorOption"
+                :style="{ background: profileBgColor, color: profileTextColor }"
+              >
+                <div
+                  class="initial"
+                >
+                  {{ profileInitial }}
+                </div>
+              </div>
+              <FtFlexBox>
+                <FtButton
+                  v-if="isNew"
+                  :label="$t('Profile.Create Profile')"
+                  @click="saveProfile"
+                />
+                <template
+                  v-else
+                >
+                  <FtButton
+                    :label="$t('Profile.Update Profile')"
+                    @click="saveProfile"
+                  />
+                  <FtButton
+                    :label="$t('Profile.Make Default Profile')"
+                    @click="setDefaultProfile"
+                  />
+                  <FtButton
+                    v-if="!isMainProfile"
+                    :label="$t('Profile.Delete Profile')"
+                    text-color="var(--destructive-text-color)"
+                    background-color="var(--destructive-color)"
+                    :icon="['fas', 'trash']"
+                    @click="showDeletePrompt = true"
+                  />
+                </template>
+              </FtFlexBox>
+            </div>
+          </div>
+        </div>
+      </FtFlexBox>
+    </FtCard>
+    <FtPrompt
+      v-if="showDeletePrompt"
+      :label="deletePromptLabel"
+      :option-names="deletePromptNames"
+      :option-values="DELETE_PROMPT_VALUES"
+      :is-first-option-destructive="true"
+      @click="handleDeletePrompt"
+    />
+  </div>
+</template>
+
+<script setup>
+import { computed, ref, watch } from 'vue'
+import { useI18n } from '../../composables/use-i18n-polyfill'
+
+import FtCard from '../ft-card/ft-card.vue'
+import FtPrompt from '../FtPrompt/FtPrompt.vue'
+import FtFlexBox from '../ft-flex-box/ft-flex-box.vue'
+import FtInput from '../ft-input/ft-input.vue'
+import FtButton from '../ft-button/ft-button.vue'
+
+import store from '../../store/index'
+
+import { MAIN_PROFILE_ID } from '../../../constants'
+import { calculateColorLuminance, colors } from '../../helpers/colors'
+import { showToast } from '../../helpers/utils'
+import { getFirstCharacter } from '../../helpers/strings'
+
+/**
+ * @typedef {object} Profile
+ * @property {string} _id
+ * @property {string} name
+ * @property {string} bgColor
+ * @property {string} textColor
+ * @property {object[]} subscriptions
+ * @property {string} subscriptions[].id
+ * @property {string|undefined} subscriptions[].name
+ * @property {string|undefined} subscriptions[].thumbnail
+ */
+
+const { locale, t } = useI18n()
+
+const props = defineProps({
+  isMainProfile: {
+    type: Boolean,
+    required: true
+  },
+  isNew: {
+    type: Boolean,
+    required: true
+  },
+  profile: {
+    type: Object,
+    required: true
+  }
+})
+
+const emit = defineEmits(['new-profile-created', 'profile-deleted'])
+
+const COLOR_VALUES = colors.map(color => color.value)
+
+/** @type {import('vue').ComputedRef<Profile>} */
+const activeProfile = computed(() => store.getters.getActiveProfile)
+
+/** @type {import('vue').Ref<string | undefined>} */
+const profileId = ref(props.profile._id)
+
+/** @type {import('vue').Ref<string>} */
+const profileName = ref(props.profile.name)
+
+/** @type {import('vue').Ref<string>} */
+const profileBgColor = ref(props.profile.bgColor)
+
+/** @type {import('vue').Ref<string>} */
+const profileTextColor = ref(props.profile.textColor)
+
+watch(profileBgColor, (value) => {
+  profileTextColor.value = calculateColorLuminance(value)
+})
+
+const translatedProfileName = computed(() => {
+  return props.isMainProfile ? t('Profile.All Channels') : profileName.value
+})
+
+const profileInitial = computed(() => {
+  return profileName.value
+    ? getFirstCharacter(translatedProfileName.value, locale.value).toUpperCase()
+    : ''
+})
+
+const editOrCreateProfileLabel = computed(() => {
+  return props.isNew ? t('Profile.Create Profile') : t('Profile.Edit Profile')
+})
+
+const editOrCreateProfileNameLabel = computed(() => {
+  return props.isNew ? t('Profile.Create Profile Name') : t('Profile.Edit Profile Name')
+})
+
+function saveProfile() {
+  if (profileName.value === '') {
+    showToast(t('Profile.Your profile name cannot be empty'))
+    return
+  }
+
+  const profile = {
+    name: profileName.value,
+    bgColor: profileBgColor.value,
+    textColor: profileTextColor.value,
+    subscriptions: props.profile.subscriptions
+  }
+
+  if (!props.isNew) {
+    profile._id = profileId.value
+  }
+
+  if (props.isNew) {
+    store.dispatch('createProfile', profile)
+    showToast(t('Profile.Profile has been created'))
+    emit('new-profile-created')
+  } else {
+    store.dispatch('updateProfile', profile)
+    showToast(t('Profile.Profile has been updated'))
+  }
+}
+
+function setDefaultProfile() {
+  store.dispatch('updateDefaultProfile', profileId.value)
+  showToast(t('Profile.Your default profile has been set to {profile}', { profile: translatedProfileName.value }))
+}
+
+const DELETE_PROMPT_VALUES = ['delete', 'cancel']
+
+const deletePromptNames = computed(() => [
+  t('Yes, Delete'),
+  t('Cancel')
+])
+
+const deletePromptLabel = computed(() => {
+  return `${t('Profile.Are you sure you want to delete this profile?')} ${t('Profile["All subscriptions will also be deleted."]')}`
+})
+
+const showDeletePrompt = ref(false)
+
+/** @type {import('vue').ComputedRef<string>} */
+const defaultProfile = computed(() => store.getters.getDefaultProfile)
+
+/**
+ * @param {'delete' | 'cancel' | null} response
+ */
+function handleDeletePrompt(response) {
+  if (response === 'delete') {
+    if (activeProfile.value._id === profileId.value) {
+      store.dispatch('updateActiveProfile', MAIN_PROFILE_ID)
+    }
+
+    store.dispatch('removeProfile', profileId.value)
+
+    showToast(t('Profile.Removed {profile} from your profiles', { profile: translatedProfileName.value }))
+
+    if (defaultProfile.value === profileId.value) {
+      store.dispatch('updateDefaultProfile', MAIN_PROFILE_ID)
+      showToast(t('Profile.Your default profile has been changed to your primary profile'))
+    }
+
+    emit('profile-deleted')
+  } else {
+    showDeletePrompt.value = false
+  }
+}
+</script>
+
+<style scoped src="./FtProfileEdit.css" />
diff --git a/src/renderer/components/ft-profile-bubble/ft-profile-bubble.js b/src/renderer/components/ft-profile-bubble/ft-profile-bubble.js
deleted file mode 100644
index c0926f9788bd1..0000000000000
--- a/src/renderer/components/ft-profile-bubble/ft-profile-bubble.js
+++ /dev/null
@@ -1,51 +0,0 @@
-import { defineComponent } from 'vue'
-import { sanitizeForHtmlId } from '../../helpers/accessibility'
-import { MAIN_PROFILE_ID } from '../../../constants'
-import { getFirstCharacter } from '../../helpers/strings'
-
-export default defineComponent({
-  name: 'FtProfileBubble',
-  props: {
-    profileName: {
-      type: String,
-      required: true
-    },
-    profileId: {
-      type: String,
-      required: true
-    },
-    backgroundColor: {
-      type: String,
-      required: true
-    },
-    textColor: {
-      type: String,
-      required: true
-    }
-  },
-  emits: ['click'],
-  computed: {
-    locale: function () {
-      return this.$i18n.locale
-    },
-    isMainProfile: function () {
-      return this.profileId === MAIN_PROFILE_ID
-    },
-    sanitizedId: function() {
-      return 'profileBubble' + sanitizeForHtmlId(this.profileId)
-    },
-    profileInitial: function () {
-      return this.profileName
-        ? getFirstCharacter(this.translatedProfileName, this.locale).toUpperCase()
-        : ''
-    },
-    translatedProfileName: function () {
-      return this.isMainProfile ? this.$t('Profile.All Channels') : this.profileName
-    }
-  },
-  methods: {
-    click: function() {
-      this.$emit('click')
-    },
-  }
-})
diff --git a/src/renderer/components/ft-profile-bubble/ft-profile-bubble.vue b/src/renderer/components/ft-profile-bubble/ft-profile-bubble.vue
deleted file mode 100644
index 2366ef7df976e..0000000000000
--- a/src/renderer/components/ft-profile-bubble/ft-profile-bubble.vue
+++ /dev/null
@@ -1,28 +0,0 @@
-<template>
-  <div
-    class="bubblePadding"
-    tabindex="0"
-    role="button"
-    :aria-labelledby="sanitizedId"
-    @click="click"
-    @keydown.space.enter.prevent="click"
-  >
-    <div
-      class="bubble"
-      :style="{ background: backgroundColor, color: textColor }"
-    >
-      <div class="initial">
-        {{ profileInitial }}
-      </div>
-    </div>
-    <div
-      :id="sanitizedId"
-      class="profileName"
-    >
-      {{ translatedProfileName }}
-    </div>
-  </div>
-</template>
-
-<script src="./ft-profile-bubble.js" />
-<style scoped src="./ft-profile-bubble.css" />
diff --git a/src/renderer/components/ft-profile-edit/ft-profile-edit.js b/src/renderer/components/ft-profile-edit/ft-profile-edit.js
deleted file mode 100644
index ac305850a6433..0000000000000
--- a/src/renderer/components/ft-profile-edit/ft-profile-edit.js
+++ /dev/null
@@ -1,169 +0,0 @@
-import { defineComponent } from 'vue'
-import { mapActions } from 'vuex'
-import FtCard from '../../components/ft-card/ft-card.vue'
-import FtPrompt from '../FtPrompt/FtPrompt.vue'
-import FtFlexBox from '../../components/ft-flex-box/ft-flex-box.vue'
-import FtInput from '../../components/ft-input/ft-input.vue'
-import FtButton from '../../components/ft-button/ft-button.vue'
-import { MAIN_PROFILE_ID } from '../../../constants'
-import { calculateColorLuminance, colors } from '../../helpers/colors'
-import { showToast } from '../../helpers/utils'
-import { getFirstCharacter } from '../../helpers/strings'
-
-export default defineComponent({
-  name: 'FtProfileEdit',
-  components: {
-    'ft-card': FtCard,
-    'ft-prompt': FtPrompt,
-    'ft-flex-box': FtFlexBox,
-    'ft-input': FtInput,
-    'ft-button': FtButton
-  },
-  props: {
-    isMainProfile: {
-      type: Boolean,
-      required: true
-    },
-    isNew: {
-      type: Boolean,
-      required: true
-    },
-    profile: {
-      type: Object,
-      required: true
-    }
-  },
-  emits: ['new-profile-created', 'profile-deleted'],
-  data: function () {
-    return {
-      showDeletePrompt: false,
-      profileId: '',
-      profileName: '',
-      profileBgColor: '',
-      profileTextColor: '',
-      deletePromptValues: [
-        'delete',
-        'cancel'
-      ]
-    }
-  },
-  computed: {
-    locale: function () {
-      return this.$i18n.locale
-    },
-    colorValues: function () {
-      return colors.map(color => color.value)
-    },
-    profileInitial: function () {
-      return this.profileName
-        ? getFirstCharacter(this.translatedProfileName, this.locale).toUpperCase()
-        : ''
-    },
-    activeProfile: function () {
-      return this.$store.getters.getActiveProfile
-    },
-    defaultProfile: function () {
-      return this.$store.getters.getDefaultProfile
-    },
-    deletePromptLabel: function () {
-      return `${this.$t('Profile.Are you sure you want to delete this profile?')} ${this.$t('Profile["All subscriptions will also be deleted."]')}`
-    },
-    deletePromptNames: function () {
-      return [
-        this.$t('Yes, Delete'),
-        this.$t('Cancel')
-      ]
-    },
-    editOrCreateProfileLabel: function () {
-      return this.isNew ? this.$t('Profile.Create Profile') : this.$t('Profile.Edit Profile')
-    },
-    editOrCreateProfileNameLabel: function () {
-      return this.isNew ? this.$t('Profile.Create Profile Name') : this.$t('Profile.Edit Profile Name')
-    },
-    translatedProfileName: function () {
-      return this.isMainProfile ? this.$t('Profile.All Channels') : this.profileName
-    }
-  },
-  watch: {
-    profileBgColor: function (val) {
-      this.profileTextColor = calculateColorLuminance(val)
-    }
-  },
-  created: function () {
-    this.profileId = this.profile._id
-    this.profileName = this.profile.name
-    this.profileBgColor = this.profile.bgColor
-    this.profileTextColor = this.profile.textColor
-  },
-  methods: {
-    openDeletePrompt: function () {
-      this.showDeletePrompt = true
-    },
-
-    handleDeletePrompt: function (response) {
-      if (response === 'delete') {
-        this.deleteProfile()
-      } else {
-        this.showDeletePrompt = false
-      }
-    },
-
-    saveProfile: function () {
-      if (this.profileName === '') {
-        showToast(this.$t('Profile.Your profile name cannot be empty'))
-        return
-      }
-      const profile = {
-        name: this.profileName,
-        bgColor: this.profileBgColor,
-        textColor: this.profileTextColor,
-        subscriptions: this.profile.subscriptions
-      }
-
-      if (!this.isNew) {
-        profile._id = this.profileId
-      }
-
-      if (this.isNew) {
-        this.createProfile(profile)
-        showToast(this.$t('Profile.Profile has been created'))
-        this.$emit('new-profile-created')
-      } else {
-        this.updateProfile(profile)
-        showToast(this.$t('Profile.Profile has been updated'))
-      }
-    },
-
-    setDefaultProfile: function () {
-      this.updateDefaultProfile(this.profileId)
-      const message = this.$t('Profile.Your default profile has been set to {profile}', { profile: this.translatedProfileName })
-      showToast(message)
-    },
-
-    deleteProfile: function () {
-      if (this.activeProfile._id === this.profileId) {
-        this.updateActiveProfile(MAIN_PROFILE_ID)
-      }
-
-      this.removeProfile(this.profileId)
-
-      const message = this.$t('Profile.Removed {profile} from your profiles', { profile: this.translatedProfileName })
-      showToast(message)
-
-      if (this.defaultProfile === this.profileId) {
-        this.updateDefaultProfile(MAIN_PROFILE_ID)
-        showToast(this.$t('Profile.Your default profile has been changed to your primary profile'))
-      }
-
-      this.$emit('profile-deleted')
-    },
-
-    ...mapActions([
-      'createProfile',
-      'updateProfile',
-      'removeProfile',
-      'updateDefaultProfile',
-      'updateActiveProfile'
-    ])
-  }
-})
diff --git a/src/renderer/components/ft-profile-edit/ft-profile-edit.vue b/src/renderer/components/ft-profile-edit/ft-profile-edit.vue
deleted file mode 100644
index 966cdeddd9471..0000000000000
--- a/src/renderer/components/ft-profile-edit/ft-profile-edit.vue
+++ /dev/null
@@ -1,111 +0,0 @@
-<template>
-  <div>
-    <ft-card class="card">
-      <h2>{{ editOrCreateProfileLabel }}</h2>
-      <ft-flex-box class="profileEdit">
-        <div>
-          <h3>{{ $t("Profile.Color Picker") }}</h3>
-          <ft-flex-box
-            class="colorOptions"
-          >
-            <div
-              v-for="(color, index) in colorValues"
-              :key="index"
-              class="colorOption"
-              :title="color + ' ' + $t('Profile.Custom Color')"
-              :style="{ background: color }"
-              tabindex="0"
-              @click="profileBgColor = color"
-              @keydown.space.prevent="profileBgColor = color"
-              @keydown.enter.prevent="profileBgColor = color"
-            />
-          </ft-flex-box>
-          <div class="customColorSection">
-            <label for="colorPicker">{{ $t("Profile.Custom Color") }}</label>
-            <input
-              id="colorPicker"
-              v-model="profileBgColor"
-              type="color"
-            >
-          </div>
-          <ft-input
-            class="colorSelection"
-            placeholder=""
-            :value="profileBgColor"
-            :show-action-button="false"
-            :disabled="true"
-          />
-        </div>
-        <div class="secondEditRow">
-          <div>
-            <h3>{{ editOrCreateProfileNameLabel }}</h3>
-            <ft-input
-              class="profileName"
-              :placeholder="$t('Profile.Profile Name')"
-              :disabled="isMainProfile"
-              :value="translatedProfileName"
-              :show-action-button="false"
-              :maxlength="100"
-              @input="e => profileName = e"
-              @keydown.enter.native="saveProfile"
-            />
-          </div>
-          <div>
-            <h3>{{ $t("Profile.Profile Preview") }}</h3>
-            <div class="profilePreviewSection">
-              <div
-                class="colorOption"
-                :style="{ background: profileBgColor, color: profileTextColor }"
-                style="cursor: default"
-              >
-                <div
-                  class="initial"
-                >
-                  {{ profileInitial }}
-                </div>
-              </div>
-              <ft-flex-box>
-                <ft-button
-                  v-if="isNew"
-                  :label="$t('Profile.Create Profile')"
-                  @click="saveProfile"
-                />
-                <template
-                  v-else
-                >
-                  <ft-button
-                    :label="$t('Profile.Update Profile')"
-                    @click="saveProfile"
-                  />
-                  <ft-button
-                    :label="$t('Profile.Make Default Profile')"
-                    @click="setDefaultProfile"
-                  />
-                  <ft-button
-                    v-if="!isMainProfile"
-                    :label="$t('Profile.Delete Profile')"
-                    text-color="var(--destructive-text-color)"
-                    background-color="var(--destructive-color)"
-                    :icon="['fas', 'trash']"
-                    @click="openDeletePrompt"
-                  />
-                </template>
-              </ft-flex-box>
-            </div>
-          </div>
-        </div>
-      </ft-flex-box>
-    </ft-card>
-    <ft-prompt
-      v-if="showDeletePrompt"
-      :label="deletePromptLabel"
-      :option-names="deletePromptNames"
-      :option-values="deletePromptValues"
-      :is-first-option-destructive="true"
-      @click="handleDeletePrompt"
-    />
-  </div>
-</template>
-
-<script src="./ft-profile-edit.js" />
-<style scoped src="./ft-profile-edit.css" />
diff --git a/src/renderer/views/ProfileSettings/ProfileSettings.css b/src/renderer/views/ProfileSettings/ProfileSettings.css
index 4ec9e91f2297e..446d5da64bb30 100644
--- a/src/renderer/views/ProfileSettings/ProfileSettings.css
+++ b/src/renderer/views/ProfileSettings/ProfileSettings.css
@@ -12,14 +12,14 @@ h2 {
   margin-inline: auto;
 }
 
-.profileList > .openedProfile {
+.openedProfile {
   background-color: var(--primary-text-color);
   transition: background 0.2s ease-out;
   color: var(--card-bg-color);
 }
 
-.profileList > .openedProfile:hover,
-.profileList > .openedProfile:focus-visible {
+.openedProfile:hover,
+.openedProfile:focus-visible {
   background-color: var(--tertiary-text-color);
   transition: background 0.2s ease-in;
 }
diff --git a/src/renderer/views/ProfileSettings/ProfileSettings.js b/src/renderer/views/ProfileSettings/ProfileSettings.js
deleted file mode 100644
index 6650d93f6cdcd..0000000000000
--- a/src/renderer/views/ProfileSettings/ProfileSettings.js
+++ /dev/null
@@ -1,90 +0,0 @@
-import { defineComponent } from 'vue'
-import { mapGetters } from 'vuex'
-import FtCard from '../../components/ft-card/ft-card.vue'
-import FtFlexBox from '../../components/ft-flex-box/ft-flex-box.vue'
-import FtProfileBubble from '../../components/ft-profile-bubble/ft-profile-bubble.vue'
-import FtButton from '../../components/ft-button/ft-button.vue'
-import FtLoader from '../../components/ft-loader/ft-loader.vue'
-import FtProfileEdit from '../../components/ft-profile-edit/ft-profile-edit.vue'
-import FtProfileChannelList from '../../components/ft-profile-channel-list/ft-profile-channel-list.vue'
-import FtProfileFilterChannelsList from '../../components/ft-profile-filter-channels-list/ft-profile-filter-channels-list.vue'
-import { calculateColorLuminance, getRandomColor } from '../../helpers/colors'
-import { MAIN_PROFILE_ID } from '../../../constants'
-
-export default defineComponent({
-  name: 'ProfileSettings',
-  components: {
-    'ft-card': FtCard,
-    'ft-flex-box': FtFlexBox,
-    'ft-profile-bubble': FtProfileBubble,
-    'ft-button': FtButton,
-    'ft-loader': FtLoader,
-    'ft-profile-edit': FtProfileEdit,
-    'ft-profile-channel-list': FtProfileChannelList,
-    'ft-profile-filter-channels-list': FtProfileFilterChannelsList
-  },
-  data: function () {
-    return {
-      isNewProfileOpen: false,
-      openSettingsProfileId: null,
-      openSettingsProfile: null
-    }
-  },
-  computed: {
-    ...mapGetters([
-      'profileById'
-    ]),
-    profileList: function () {
-      return this.$store.getters.getProfileList
-    },
-    isMainProfile: function () {
-      return this.openSettingsProfileId === MAIN_PROFILE_ID
-    }
-  },
-  watch: {
-    profileList: {
-      handler: function () {
-        this.openSettingsProfile = this.getProfileById(this.openSettingsProfileId)
-      },
-      deep: true
-    }
-  },
-  methods: {
-    openSettingsForNewProfile: function () {
-      this.isNewProfileOpen = true
-      const bgColor = getRandomColor().value
-      const textColor = calculateColorLuminance(bgColor)
-      this.openSettingsProfile = {
-        name: '',
-        bgColor: bgColor,
-        textColor: textColor,
-        subscriptions: []
-      }
-      this.openSettingsProfileId = -1
-    },
-    openSettingsForProfileWithId: function (profileId) {
-      if (this.profileId === this.openSettingsProfileId) {
-        return
-      }
-      this.isNewProfileOpen = false
-      this.openSettingsProfileId = profileId
-      this.openSettingsProfile = this.getProfileById(profileId)
-    },
-    getProfileById: function (profileId) {
-      if (!profileId) {
-        return null
-      }
-
-      return this.profileById(profileId)
-    },
-    handleNewProfileCreated: function () {
-      this.isNewProfileOpen = false
-      this.openSettingsProfile = null
-      this.openSettingsProfileId = -1
-    },
-    handleProfileDeleted: function () {
-      this.openSettingsProfile = null
-      this.openSettingsProfileId = -1
-    }
-  }
-})
diff --git a/src/renderer/views/ProfileSettings/ProfileSettings.vue b/src/renderer/views/ProfileSettings/ProfileSettings.vue
index 76b737d2ee31e..fbd0b93eb730e 100644
--- a/src/renderer/views/ProfileSettings/ProfileSettings.vue
+++ b/src/renderer/views/ProfileSettings/ProfileSettings.vue
@@ -1,43 +1,44 @@
 <template>
   <div>
-    <ft-card class="card">
+    <FtCard class="card">
       <h2>{{ $t("Profile.Profile Manager") }}</h2>
-      <ft-flex-box
+      <FtFlexBox
         class="profileList"
       >
-        <ft-profile-bubble
-          v-for="(profile, index) in profileList"
-          :key="index"
-          :profile-id="profile._id"
+        <FtProfileBubble
+          v-for="profile in profileList"
+          :key="profile._id"
+          :is-main-profile="profile._id === MAIN_PROFILE_ID"
           :profile-name="profile.name"
           :background-color="profile.bgColor"
           :text-color="profile.textColor"
           :class="{ openedProfile: openSettingsProfile?._id === profile._id }"
           @click="openSettingsForProfileWithId(profile._id)"
         />
-      </ft-flex-box>
-      <ft-flex-box>
-        <ft-button
-          v-if="!isNewProfileOpen"
+      </FtFlexBox>
+      <FtFlexBox
+        v-if="!isNewProfileOpen"
+      >
+        <FtButton
           :label="$t('Profile.Create New Profile')"
           @click="openSettingsForNewProfile"
         />
-      </ft-flex-box>
-    </ft-card>
+      </FtFlexBox>
+    </FtCard>
     <div
       v-if="openSettingsProfile"
       :key="openSettingsProfileId"
     >
-      <ft-profile-channel-list
+      <FtProfileChannelList
         v-if="!isNewProfileOpen"
         :profile="openSettingsProfile"
         :is-main-profile="isMainProfile"
       />
-      <ft-profile-filter-channels-list
+      <FtProfileFilterChannelsList
         v-if="!isNewProfileOpen && !isMainProfile"
         :profile="openSettingsProfile"
       />
-      <ft-profile-edit
+      <FtProfileEdit
         :profile="openSettingsProfile"
         :is-new="isNewProfileOpen"
         :is-main-profile="isMainProfile"
@@ -48,5 +49,102 @@
   </div>
 </template>
 
-<script src="./ProfileSettings.js" />
+<script setup>
+import { computed, ref, shallowRef, watch } from 'vue'
+
+import FtCard from '../../components/ft-card/ft-card.vue'
+import FtFlexBox from '../../components/ft-flex-box/ft-flex-box.vue'
+import FtProfileBubble from '../../components/FtProfileBubble/FtProfileBubble.vue'
+import FtButton from '../../components/ft-button/ft-button.vue'
+import FtProfileEdit from '../../components/FtProfileEdit/FtProfileEdit.vue'
+import FtProfileChannelList from '../../components/ft-profile-channel-list/ft-profile-channel-list.vue'
+import FtProfileFilterChannelsList from '../../components/ft-profile-filter-channels-list/ft-profile-filter-channels-list.vue'
+
+import store from '../../store/index'
+
+import { calculateColorLuminance, getRandomColor } from '../../helpers/colors'
+import { MAIN_PROFILE_ID } from '../../../constants'
+
+/**
+ * @typedef {object} Profile
+ * @property {string} _id
+ * @property {string} name
+ * @property {string} bgColor
+ * @property {string} textColor
+ * @property {object[]} subscriptions
+ * @property {string} subscriptions[].id
+ * @property {string|undefined} subscriptions[].name
+ * @property {string|undefined} subscriptions[].thumbnail
+ */
+
+const isNewProfileOpen = ref(false)
+
+/** @type {import('vue').Ref<string>} */
+const openSettingsProfileId = ref('')
+
+/** @type {import('vue').ShallowRef<Profile|null>} */
+const openSettingsProfile = shallowRef(null)
+
+/** @type {import('vue').ComputedRef<Profile[]>} */
+const profileList = computed(() => {
+  return store.getters.getProfileList
+})
+
+watch(profileList, () => {
+  openSettingsProfile.value = getProfileById(openSettingsProfileId.value)
+}, { deep: true })
+
+const isMainProfile = computed(() => {
+  return MAIN_PROFILE_ID === openSettingsProfileId.value
+})
+
+function openSettingsForNewProfile() {
+  isNewProfileOpen.value = true
+
+  openSettingsProfile.value = {
+    name: '',
+    bgColor: getRandomColor().value,
+    textColor: calculateColorLuminance(getRandomColor().value),
+    subscriptions: []
+  }
+
+  openSettingsProfileId.value = ''
+}
+
+/**
+ * @param {string} profileId
+ */
+function openSettingsForProfileWithId(profileId) {
+  if (profileId === openSettingsProfileId.value) {
+    return
+  }
+
+  isNewProfileOpen.value = false
+  openSettingsProfileId.value = profileId
+  openSettingsProfile.value = getProfileById(profileId)
+}
+
+/**
+ * @param {string | null} profileId
+ */
+function getProfileById(profileId) {
+  if (!profileId) {
+    return null
+  }
+
+  return store.getters.profileById(profileId)
+}
+
+function handleNewProfileCreated() {
+  isNewProfileOpen.value = false
+  openSettingsProfile.value = null
+  openSettingsProfileId.value = ''
+}
+
+function handleProfileDeleted() {
+  openSettingsProfile.value = null
+  openSettingsProfileId.value = ''
+}
+</script>
+
 <style scoped src="./ProfileSettings.css" />