From 2fd7b8628e03dda4276b642d7be75a534e2172cc Mon Sep 17 00:00:00 2001
From: Phan An <me@phanan.net>
Date: Wed, 27 Mar 2024 12:31:39 +0100
Subject: [PATCH] chore(ui): better icons for playlist and repeat mode

---
 package.json                                  |  5 ++++-
 .../FooterPlaybackControls.spec.ts.snap       | 22 ++++++++++---------
 .../sidebar/PlaylistSidebarItem.vue           |  4 ++--
 .../js/components/ui/RepeatModeSwitch.vue     |  9 +++-----
 yarn.lock                                     | 15 +++++++++++++
 5 files changed, 36 insertions(+), 19 deletions(-)

diff --git a/package.json b/package.json
index 5c7cd499..2195439e 100644
--- a/package.json
+++ b/package.json
@@ -52,6 +52,7 @@
     "@typescript-eslint/parser": "^4.11.1",
     "@vitejs/plugin-vue": "^5.0.4",
     "@vueuse/core": "^10.9.0",
+    "add": "^2.0.6",
     "cross-env": "^7.0.3",
     "cypress": "^9.5.4",
     "eslint": "^8.14.0",
@@ -69,13 +70,15 @@
     "kill-port": "^1.6.1",
     "laravel-vite-plugin": "^1.0.2",
     "lint-staged": "^10.3.0",
+    "lucide-vue-next": "^0.363.0",
     "sass": "^1.72.0",
     "start-server-and-test": "^2.0.3",
     "typescript": "^4.8.4",
     "vite": "^5.1.6",
     "vitepress": "^1.0.0-rc.45",
     "vitest": "^0.24.0",
-    "vue-advanced-cropper": "^2.8.8"
+    "vue-advanced-cropper": "^2.8.8",
+    "yarn": "^1.22.22"
   },
   "scripts": {
     "lint": "eslint ./resources/assets/js/**/*.ts --no-error-on-unmatched-pattern && eslint ./cypress/**/*.ts  --no-error-on-unmatched-pattern",
diff --git a/resources/assets/js/components/layout/app-footer/__snapshots__/FooterPlaybackControls.spec.ts.snap b/resources/assets/js/components/layout/app-footer/__snapshots__/FooterPlaybackControls.spec.ts.snap
index 86283532..422e8f75 100644
--- a/resources/assets/js/components/layout/app-footer/__snapshots__/FooterPlaybackControls.spec.ts.snap
+++ b/resources/assets/js/components/layout/app-footer/__snapshots__/FooterPlaybackControls.spec.ts.snap
@@ -2,20 +2,22 @@
 
 exports[`renders with a current song 1`] = `
 <div data-v-2e8b419d="" class="playback-controls" data-testid="footer-middle-pane">
-  <div data-v-2e8b419d="" class="buttons"><button data-v-2e8b419d="" title="Unlike Fahrstuhl to Heaven by Led Zeppelin" type="button" class="like-btn"><br data-testid="Icon" icon="[object Object]"></button><!-- a placeholder to maintain the flex layout --><button data-v-2e8b419d="" type="button" title="Play previous song"><br data-v-2e8b419d="" data-testid="Icon" icon="[object Object]"></button><br data-v-2e8b419d="" data-testid="PlayButton"><button data-v-2e8b419d="" type="button" title="Play next song"><br data-v-2e8b419d="" data-testid="Icon" icon="[object Object]"></button><button data-v-cab48a7c="" data-v-2e8b419d="" class="repeat-mode-btn" title="Change repeat mode (current: No Repeat)" data-testid="repeat-mode-switch" type="button">
-      <div data-v-cab48a7c="" class="fa-layers"><br data-v-cab48a7c="" data-testid="Icon" icon="[object Object]">
-        <!--v-if-->
-      </div>
-    </button></div>
+  <div data-v-2e8b419d="" class="buttons"><button data-v-2e8b419d="" title="Unlike Fahrstuhl to Heaven by Led Zeppelin" type="button" class="like-btn"><br data-testid="Icon" icon="[object Object]"></button><!-- a placeholder to maintain the flex layout --><button data-v-2e8b419d="" type="button" title="Play previous song"><br data-v-2e8b419d="" data-testid="Icon" icon="[object Object]"></button><br data-v-2e8b419d="" data-testid="PlayButton"><button data-v-2e8b419d="" type="button" title="Play next song"><br data-v-2e8b419d="" data-testid="Icon" icon="[object Object]"></button><button data-v-cab48a7c="" data-v-2e8b419d="" class="repeat-mode-btn" title="Change repeat mode (current: No Repeat)" data-testid="repeat-mode-switch" type="button"><svg data-v-cab48a7c="" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" size="16" class="lucide lucide-repeat-icon">
+        <path d="m17 2 4 4-4 4"></path>
+        <path d="M3 11v-1a4 4 0 0 1 4-4h14"></path>
+        <path d="m7 22-4-4 4-4"></path>
+        <path d="M21 13v1a4 4 0 0 1-4 4H3"></path>
+      </svg></button></div>
 </div>
 `;
 
 exports[`renders without a current song 1`] = `
 <div data-v-2e8b419d="" class="playback-controls" data-testid="footer-middle-pane">
-  <div data-v-2e8b419d="" class="buttons"><button data-v-2e8b419d="" type="button"></button><!-- a placeholder to maintain the flex layout --><button data-v-2e8b419d="" type="button" title="Play previous song"><br data-v-2e8b419d="" data-testid="Icon" icon="[object Object]"></button><br data-v-2e8b419d="" data-testid="PlayButton"><button data-v-2e8b419d="" type="button" title="Play next song"><br data-v-2e8b419d="" data-testid="Icon" icon="[object Object]"></button><button data-v-cab48a7c="" data-v-2e8b419d="" class="repeat-mode-btn" title="Change repeat mode (current: No Repeat)" data-testid="repeat-mode-switch" type="button">
-      <div data-v-cab48a7c="" class="fa-layers"><br data-v-cab48a7c="" data-testid="Icon" icon="[object Object]">
-        <!--v-if-->
-      </div>
-    </button></div>
+  <div data-v-2e8b419d="" class="buttons"><button data-v-2e8b419d="" type="button"></button><!-- a placeholder to maintain the flex layout --><button data-v-2e8b419d="" type="button" title="Play previous song"><br data-v-2e8b419d="" data-testid="Icon" icon="[object Object]"></button><br data-v-2e8b419d="" data-testid="PlayButton"><button data-v-2e8b419d="" type="button" title="Play next song"><br data-v-2e8b419d="" data-testid="Icon" icon="[object Object]"></button><button data-v-cab48a7c="" data-v-2e8b419d="" class="repeat-mode-btn" title="Change repeat mode (current: No Repeat)" data-testid="repeat-mode-switch" type="button"><svg data-v-cab48a7c="" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" size="16" class="lucide lucide-repeat-icon">
+        <path d="m17 2 4 4-4 4"></path>
+        <path d="M3 11v-1a4 4 0 0 1 4-4h14"></path>
+        <path d="m7 22-4-4 4-4"></path>
+        <path d="M21 13v1a4 4 0 0 1-4 4H3"></path>
+      </svg></button></div>
 </div>
 `;
diff --git a/resources/assets/js/components/layout/main-wrapper/sidebar/PlaylistSidebarItem.vue b/resources/assets/js/components/layout/main-wrapper/sidebar/PlaylistSidebarItem.vue
index c605d84f..f13adedc 100644
--- a/resources/assets/js/components/layout/main-wrapper/sidebar/PlaylistSidebarItem.vue
+++ b/resources/assets/js/components/layout/main-wrapper/sidebar/PlaylistSidebarItem.vue
@@ -15,7 +15,7 @@
       <Icon v-else-if="isFavoriteList(list)" :icon="faHeart" class="text-maroon" fixed-width />
       <Icon v-else-if="list.is_smart" :icon="faWandMagicSparkles" fixed-width />
       <Icon v-else-if="list.is_collaborative" :icon="faUsers" fixed-width />
-      <Icon v-else :icon="faFileLines" fixed-width />
+      <ListMusic v-else :size="16" />
       <span>{{ list.name }}</span>
     </a>
   </li>
@@ -24,11 +24,11 @@
 <script lang="ts" setup>
 import {
   faClockRotateLeft,
-  faFileLines,
   faHeart,
   faUsers,
   faWandMagicSparkles
 } from '@fortawesome/free-solid-svg-icons'
+import { ListMusic } from 'lucide-vue-next'
 import { computed, ref, toRefs } from 'vue'
 import { eventBus } from '@/utils'
 import { favoriteStore } from '@/stores'
diff --git a/resources/assets/js/components/ui/RepeatModeSwitch.vue b/resources/assets/js/components/ui/RepeatModeSwitch.vue
index e8a225b4..4d8c13fc 100644
--- a/resources/assets/js/components/ui/RepeatModeSwitch.vue
+++ b/resources/assets/js/components/ui/RepeatModeSwitch.vue
@@ -7,16 +7,13 @@
     type="button"
     @click.prevent="changeMode"
   >
-    <FontAwesomeLayers>
-      <Icon :icon="faRepeat" />
-      <FontAwesomeLayersText v-if="mode === 'REPEAT_ONE'" counter value="1" />
-    </FontAwesomeLayers>
+    <Repeat1 v-if="mode === 'REPEAT_ONE'" :size="16" />
+    <Repeat v-else :size="16" />
   </button>
 </template>
 
 <script lang="ts" setup>
-import { FontAwesomeLayers, FontAwesomeLayersText } from '@fortawesome/vue-fontawesome'
-import { faRepeat } from '@fortawesome/free-solid-svg-icons'
+import { Repeat, Repeat1 } from 'lucide-vue-next'
 import { computed, toRef } from 'vue'
 import { playbackService } from '@/services'
 import { preferenceStore } from '@/stores'
diff --git a/yarn.lock b/yarn.lock
index 36a8c2d1..dc39ed80 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1128,6 +1128,11 @@ acorn@^8.5.0, acorn@^8.8.0:
   resolved "https://registry.yarnpkg.com/acorn/-/acorn-8.8.0.tgz#88c0187620435c7f6015803f5539dae05a9dbea8"
   integrity sha512-QOxyigPVrpZ2GXT+PFyZTl6TtOFc5egxHIP9IlQ+RbupQuX4RkT/Bee4/kQuC02Xkzg84JcT7oLYtDIQxp+v7w==
 
+add@^2.0.6:
+  version "2.0.6"
+  resolved "https://registry.yarnpkg.com/add/-/add-2.0.6.tgz#248f0a9f6e5a528ef2295dbeec30532130ae2235"
+  integrity sha512-j5QzrmsokwWWp6kUcJQySpbG+xfOBqqKnup3OIk1pz+kB/80SLorZ9V8zHFLO92Lcd+hbvq8bT+zOGoPkmBV0Q==
+
 agent-base@6:
   version "6.0.2"
   resolved "https://registry.yarnpkg.com/agent-base/-/agent-base-6.0.2.tgz#49fff58577cfee3f37176feab4c22e00f86d7f77"
@@ -3537,6 +3542,11 @@ lru-cache@^6.0.0:
   dependencies:
     yallist "^4.0.0"
 
+lucide-vue-next@^0.363.0:
+  version "0.363.0"
+  resolved "https://registry.yarnpkg.com/lucide-vue-next/-/lucide-vue-next-0.363.0.tgz#c838b274d04a98f59e22244a07f8692580794d64"
+  integrity sha512-dc5KgrXhCPMEzKz6voDVvxXkwEr7n+Q4b7qLyS2e3DTlH9GMFydS4fHoSvpZR/a5M7i1EOpFI8/BA8SPjAOwEQ==
+
 lz-string@^1.4.4:
   version "1.4.4"
   resolved "https://registry.yarnpkg.com/lz-string/-/lz-string-1.4.4.tgz#c0d8eaf36059f705796e1e344811cf4c498d3a26"
@@ -5027,6 +5037,11 @@ yaml@^1.10.0:
   resolved "https://registry.yarnpkg.com/yaml/-/yaml-1.10.2.tgz#2301c5ffbf12b467de8da2333a459e29e7920e4b"
   integrity sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==
 
+yarn@^1.22.22:
+  version "1.22.22"
+  resolved "https://registry.yarnpkg.com/yarn/-/yarn-1.22.22.tgz#ac34549e6aa8e7ead463a7407e1c7390f61a6610"
+  integrity sha512-prL3kGtyG7o9Z9Sv8IPfBNrWTDmXB4Qbes8A9rEzt6wkJV8mUvoirjU0Mp3GGAU06Y0XQyA3/2/RQFVuK7MTfg==
+
 yauzl@^2.10.0:
   version "2.10.0"
   resolved "https://registry.yarnpkg.com/yauzl/-/yauzl-2.10.0.tgz#c7eb17c93e112cb1086fa6d8e51fb0667b79a5f9"