Migrate FtProgressBar to the composition API

src/renderer/App.js

@@ -7,7 +7,7 @@ import FtNotificationBanner from './components/ft-notification-banner/ft-notific
 import FtPrompt from './components/ft-prompt/ft-prompt.vue'
 import FtButton from './components/ft-button/ft-button.vue'
 import FtToast from './components/ft-toast/ft-toast.vue'
-import FtProgressBar from './components/ft-progress-bar/ft-progress-bar.vue'
+import FtProgressBar from './components/FtProgressBar/FtProgressBar.vue'
 import FtPlaylistAddVideoPrompt from './components/ft-playlist-add-video-prompt/ft-playlist-add-video-prompt.vue'
 import FtCreatePlaylistPrompt from './components/ft-create-playlist-prompt/ft-create-playlist-prompt.vue'
 import FtSearchFilters from './components/ft-search-filters/ft-search-filters.vue'

src/renderer/components/ft-progress-bar/ft-progress-bar.css → src/renderer/components/FtProgressBar/FtProgressBar.css

@@ -4,6 +4,5 @@
   inset-block-end: 0;
   inset-inline-start: 0;
   background-color: var(--primary-color);
-  z-index: 1;
-  transition: inline-size 0.5s;
+  z-index: 4;
 }

src/renderer/components/FtProgressBar/FtProgressBar.vue

@@ -0,0 +1,18 @@
+<template>
+  <div
+    class="progressBar"
+    :style="{ inlineSize: progressBarPercentage + '%' }"
+  />
+</template>
+
+<script setup>
+import { computed } from 'vue'
+
+import store from '../../store/index'
+
+const progressBarPercentage = computed(() => {
+  return store.getters.getProgressBarPercentage
+})
+</script>
+
+<style scoped src="./FtProgressBar.css" />