core: Upgrade Font Awesome and refactor components (#28)

Author: adityalohuni

package.json

@@ -22,7 +22,7 @@
   "dependencies": {
     "@electron-toolkit/preload": "^3.0.2",
     "@electron-toolkit/utils": "^4.0.0",
-    "@fortawesome/fontawesome-free": "^6.7.2",
+    "@fortawesome/fontawesome-free": "^7.0.1",
     "@sveltejs/kit": "^2.27.0",
     "@xhayper/discord-rpc": "^1.3.0",
     "cli-linux-x64": "^1.1.4",

pnpm-lock.yaml

@@ -263,17 +263,17 @@
     }
 </script>
 
-<div class="miniplayer-container" on:dblclick={miniplayerDoubleClickHandler}>
+<div class="miniplayer-container" ondblclick={miniplayerDoubleClickHandler}>
     <!-- Auxiliary icons (more, fullscreen, volume, like) -->
 
     <div
         class="miniplayer-player-icon-container miniplayer-player-volume-container"
     >
-        <i class="miniplayer-icon fa-solid {volumeIcon}" on:mousedown={onClickOnVolumeIcon} />
+        <i class="miniplayer-icon fa-solid {volumeIcon}" onmousedown={onClickOnVolumeIcon} />
         <div class="miniplayer-volume-bar-container" id="volume-container">
             <div
                 class="miniplayer-volume-bar-container-inner"
-                on:mousedown={onClickOnVolumeBar}
+                onmousedown={onClickOnVolumeBar}
             >
                 <div class="miniplayer-volume-bar-container-inner-2">
                     <div
@@ -292,7 +292,7 @@
     <div
         class="miniplayer-player-icon-container miniplayer-player-fullscreen-container"
         style="transform:scale(92%) translateY(-7%)"
-        on:click={toggleFullscreen}
+        onclick={toggleFullscreen}
     >
         <i
             class="miniplayer-icon fa-solid fa{fullscreen
@@ -309,7 +309,7 @@
 
     <div
         class="miniplayer-player-icon-container miniplayer-player-more-container"
-        on:click={openMenu}
+        onclick={openMenu}
     >
         <i
             class="miniplayer-icon fa-solid fa-angles-{fullscreen
@@ -333,7 +333,7 @@
 
     <div
         class="miniplayer-player-icon-container miniplayer-player-clear-mode-container"
-        on:click={setViewClear}
+        onclick={setViewClear}
         style="opacity: {fullscreen ? '1' : '0'}; visibility: {fullscreen
             ? 'visible'
             : 'hidden'};"
@@ -343,7 +343,7 @@
 
     <div
         class="miniplayer-player-icon-container miniplayer-player-lyrics-mode-container"
-        on:click={setViewLyrics}
+        onclick={setViewLyrics}
         style="opacity: {fullscreen ? '1' : '0'}; visibility: {fullscreen
             ? 'visible'
             : 'hidden'};"
@@ -423,7 +423,7 @@
                 ></div>
             </div>
             <div class="miniplayer-nav-container">
-                <div class="miniplayer-icon-container" on:click={playPrevious}>
+                <div class="miniplayer-icon-container" onclick={playPrevious}>
                     <i class="miniplayer-icon fa-solid fa-backward-step"></i>
                 </div>
                 <div class="miniplayer-icon-container">
@@ -436,7 +436,7 @@
                             : resumePlayback}
                     />
                 </div>
-                <div class="miniplayer-icon-container" on:click={playNext}>
+                <div class="miniplayer-icon-container" onclick={playNext}>
                     <i class="miniplayer-icon fa-solid fa-forward-step"></i>
                 </div>
             </div>

resources/tidal.svg

@@ -4,7 +4,7 @@
 
 <div
     class="miniplayer-play-pause-container"
-    on:click={callback}
+    onclick={callback}
 >
     <i class="miniplayer-play-pause-icon {icon}"></i>
 </div>

resources/tidalWhite.svg

@@ -8,15 +8,10 @@
     }
 </script>
 
-<a class="button-container {active ? 'button-container-active' : ''}" on:click="{changePage}" href="#">
+<a class="button-container {active ? 'button-container-active' : ''}" onclick="{changePage}" href="#">
 
     <div class="button-icon-container">
-        {#if icon != "tidal" }
         <i class="button-icon {icon}"></i>
-        {/if}
-        {#if icon == "tidal" }
-        <img class="button-icon" style="width: 1.3rem; transform: translateX(-45%) translateY(-50%);" src="../../resources/tidal.svg?asset"/>
-        {/if}
     </div>
     <p class="button-text {active ? 'button-text-active' : ''}">{text}</p>
 </a>

src/renderer/src/components/miniplayer/Miniplayer.svelte

@@ -57,7 +57,7 @@
         active={currentPage.page == "/mpd" ? true : false}
     />
     <Button
-        icon="tidal"
+        icon="fa-brands fa-tidal"
         text="Tidal"
         href="/tidal"
         active={currentPage.page.indexOf('/tidal') == 0 ? true : false}

src/renderer/src/components/miniplayer/parts/PausePlay.svelte

@@ -18,7 +18,7 @@
         It's meant to be <i>simple</i>, so don't expect crazy features. It has all you need from
         a modern music player, and nothing more.<br/><br/>
         If you want to help with the development, <span class="vermilion-grad">Vermilion</span> is made in Electron and Svelte. See 
-        <a target="_blank" class="home-link" href="" on:click={openRepo}>the repo</a>.
+        <a target="_blank" class="home-link" href="" onclick={openRepo}>the repo</a>.
         <br/><br/>
         The name <span class="vermilion-grad">Vermilion</span> comes from the same word, defined as a vivid red to reddish-orange color.
     </p>

src/renderer/src/components/side/Button.svelte

@@ -20,7 +20,7 @@
     }
 </script>
 
-<div class="album-icon-container" on:click={goToAlbum}>
+<div class="album-icon-container" onclick={goToAlbum}>
     {#if iconURL != ""}
         <img class="album-icon-image" src={iconURL} />
     {:else}