chore: use some better icons (#1851)

package.json

@@ -26,6 +26,7 @@
     "ismobilejs": "^0.4.0",
     "local-storage": "^2.0.0",
     "lodash": "^4.17.19",
+    "lucide-vue-next": "^0.452.0",
     "nouislider": "^14.0.2",
     "nprogress": "^0.2.0",
     "plyr": "1.5.x",
@@ -73,7 +74,6 @@
     "kill-port": "^1.6.1",
     "laravel-vite-plugin": "^1.0.2",
     "lint-staged": "^10.3.0",
-    "lucide-vue-next": "^0.363.0",
     "postcss": "^8.4.38",
     "postcss-mixins": "^10.0.0",
     "postcss-nested": "^6.0.1",

resources/assets/js/components/layout/app-footer/FooterExtraControls.vue

@@ -19,7 +19,7 @@
         title="Show equalizer"
         @click.prevent="showEqualizer"
       >
-        <Icon :icon="faSliders" fixed-width />
+        <AudioLinesIcon size="16" />
       </FooterBtn>
 
       <VolumeSlider />
@@ -32,7 +32,8 @@
 </template>
 
 <script lang="ts" setup>
-import { faBolt, faCompress, faExpand, faSliders } from '@fortawesome/free-solid-svg-icons'
+import { faBolt, faCompress, faExpand } from '@fortawesome/free-solid-svg-icons'
+import { AudioLinesIcon } from 'lucide-vue-next'
 import { computed, onMounted, ref } from 'vue'
 import { eventBus, isFullscreenSupported, isAudioContextSupported as useEqualizer } from '@/utils'
 import { useRouter } from '@/composables'

resources/assets/js/components/layout/app-footer/__snapshots__/FooterPlaybackControls.spec.ts.snap

@@ -2,7 +2,7 @@
 
 exports[`renders with a current playable 1`] = `
 <div data-v-2e8b419d="" class="playback-controls flex flex-1 flex-col justify-center">
-  <div data-v-2e8b419d="" class="flex items-center justify-between md:justify-center gap-5 md:gap-12 px-4 md:px-0"><button data-v-2e8b419d="" class="transition-[color] duration-200 ease-in-out text-k-text-secondary hover:text-k-text-primary text-base" type="button" title="Unlike"><br data-testid="Icon" icon="[object Object]"></button><!-- a placeholder to maintain the asymmetric layout --><button data-v-2e8b419d="" class="transition-[color] duration-200 ease-in-out text-k-text-secondary hover:text-k-text-primary text-2xl" type="button" title="Play previous in queue"><br data-v-2e8b419d="" data-testid="Icon" icon="[object Object]"></button><br data-v-2e8b419d="" data-testid="PlayButton"><button data-v-2e8b419d="" class="transition-[color] duration-200 ease-in-out text-k-text-secondary hover:text-k-text-primary text-2xl" type="button" title="Play next in queue"><br data-v-2e8b419d="" data-testid="Icon" icon="[object Object]"></button><button data-v-cab48a7c="" data-v-2e8b419d="" class="opacity-30 text-base" 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">
+  <div data-v-2e8b419d="" class="flex items-center justify-between md:justify-center gap-5 md:gap-12 px-4 md:px-0"><button data-v-2e8b419d="" class="transition-[color] duration-200 ease-in-out text-k-text-secondary hover:text-k-text-primary text-base" type="button" title="Unlike"><br data-testid="Icon" icon="[object Object]"></button><!-- a placeholder to maintain the asymmetric layout --><button data-v-2e8b419d="" class="transition-[color] duration-200 ease-in-out text-k-text-secondary hover:text-k-text-primary text-2xl" type="button" title="Play previous in queue"><br data-v-2e8b419d="" data-testid="Icon" icon="[object Object]"></button><br data-v-2e8b419d="" data-testid="PlayButton"><button data-v-2e8b419d="" class="transition-[color] duration-200 ease-in-out text-k-text-secondary hover:text-k-text-primary text-2xl" type="button" title="Play next in queue"><br data-v-2e8b419d="" data-testid="Icon" icon="[object Object]"></button><button data-v-cab48a7c="" data-v-2e8b419d="" class="opacity-30 text-base" 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" 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>
@@ -13,7 +13,7 @@ exports[`renders with a current playable 1`] = `
 
 exports[`renders without a current playable 1`] = `
 <div data-v-2e8b419d="" class="playback-controls flex flex-1 flex-col justify-center">
-  <div data-v-2e8b419d="" class="flex items-center justify-between md:justify-center gap-5 md:gap-12 px-4 md:px-0"><button data-v-2e8b419d="" type="button"></button><!-- a placeholder to maintain the asymmetric layout --><button data-v-2e8b419d="" class="transition-[color] duration-200 ease-in-out text-k-text-secondary hover:text-k-text-primary text-2xl" type="button" title="Play previous in queue"><br data-v-2e8b419d="" data-testid="Icon" icon="[object Object]"></button><br data-v-2e8b419d="" data-testid="PlayButton"><button data-v-2e8b419d="" class="transition-[color] duration-200 ease-in-out text-k-text-secondary hover:text-k-text-primary text-2xl" type="button" title="Play next in queue"><br data-v-2e8b419d="" data-testid="Icon" icon="[object Object]"></button><button data-v-cab48a7c="" data-v-2e8b419d="" class="opacity-30 text-base" 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">
+  <div data-v-2e8b419d="" class="flex items-center justify-between md:justify-center gap-5 md:gap-12 px-4 md:px-0"><button data-v-2e8b419d="" type="button"></button><!-- a placeholder to maintain the asymmetric layout --><button data-v-2e8b419d="" class="transition-[color] duration-200 ease-in-out text-k-text-secondary hover:text-k-text-primary text-2xl" type="button" title="Play previous in queue"><br data-v-2e8b419d="" data-testid="Icon" icon="[object Object]"></button><br data-v-2e8b419d="" data-testid="PlayButton"><button data-v-2e8b419d="" class="transition-[color] duration-200 ease-in-out text-k-text-secondary hover:text-k-text-primary text-2xl" type="button" title="Play next in queue"><br data-v-2e8b419d="" data-testid="Icon" icon="[object Object]"></button><button data-v-cab48a7c="" data-v-2e8b419d="" class="opacity-30 text-base" 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" 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>

resources/assets/js/components/layout/main-wrapper/extra-drawer/ExtraDrawerTabHeader.vue

@@ -15,7 +15,7 @@
     title="Artist information"
     @click.prevent="toggleTab('Artist')"
   >
-    <Icon :icon="faMicrophone" fixed-width />
+    <MicVocalIcon size="18" />
   </ExtraDrawerButton>
   <ExtraDrawerButton
     id="extraTabAlbum"
@@ -39,10 +39,12 @@
 </template>
 
 <script lang="ts" setup>
-import { faCompactDisc, faFeather, faMicrophone } from '@fortawesome/free-solid-svg-icons'
+import { faCompactDisc, faFeather } from '@fortawesome/free-solid-svg-icons'
+import { MicVocalIcon } from 'lucide-vue-next'
 import { faYoutube } from '@fortawesome/free-brands-svg-icons'
 import { computed } from 'vue'
 import { useThirdPartyServices } from '@/composables'
+
 import ExtraDrawerButton from '@/components/layout/main-wrapper/extra-drawer/ExtraDrawerButton.vue'
 
 const props = withDefaults(defineProps<{ modelValue?: ExtraPanelTab | null }>(), {

resources/assets/js/components/layout/main-wrapper/sidebar/SidebarYourLibrarySection.vue

@@ -19,13 +19,13 @@
       </SidebarItem>
       <SidebarItem href="#/artists" screen="Artists">
         <template #icon>
-          <Icon :icon="faMicrophone" fixed-width />
+          <MicVocalIcon size="16" />
         </template>
         Artists
       </SidebarItem>
       <SidebarItem href="#/genres" screen="Genres">
         <template #icon>
-          <Icon :icon="faTags" fixed-width />
+          <GuitarIcon size="16" />
         </template>
         Genres
       </SidebarItem>
@@ -43,7 +43,8 @@
 </template>
 
 <script lang="ts" setup>
-import { faCompactDisc, faMicrophone, faMusic, faPodcast, faTags } from '@fortawesome/free-solid-svg-icons'
+import { faCompactDisc, faMusic, faPodcast } from '@fortawesome/free-solid-svg-icons'
+import { GuitarIcon, MicVocalIcon } from 'lucide-vue-next'
 import { unescape } from 'lodash'
 import { ref } from 'vue'
 import { eventBus } from '@/utils'

resources/assets/js/components/screens/GenreListScreen.vue

@@ -6,7 +6,7 @@
 
     <ScreenEmptyState v-if="libraryEmpty">
       <template #icon>
-        <Icon :icon="faTags" />
+        <GuitarIcon size="96" />
       </template>
       No genres found.
       <span class="secondary d-block">
@@ -45,7 +45,7 @@
 </template>
 
 <script lang="ts" setup>
-import { faTags } from '@fortawesome/free-solid-svg-icons'
+import { GuitarIcon } from 'lucide-vue-next'
 import { maxBy, minBy } from 'lodash'
 import { computed, onMounted, ref } from 'vue'
 import { commonStore, genreStore } from '@/stores'

resources/assets/js/components/screens/GenreScreen.vue

@@ -39,7 +39,7 @@
 
     <ScreenEmptyState v-if="!songs.length && !loading">
       <template #icon>
-        <Icon :icon="faTags" />
+        <GuitarIcon size="96" />
       </template>
 
       No songs in this genre.
@@ -49,7 +49,7 @@
 
 <script lang="ts" setup>
 import { computed, onMounted, ref, watch } from 'vue'
-import { faTags } from '@fortawesome/free-solid-svg-icons'
+import { GuitarIcon } from 'lucide-vue-next'
 import { eventBus, pluralize, secondsToHumanReadable } from '@/utils'
 import { playbackService } from '@/services'
 import { genreStore, songStore } from '@/stores'

resources/assets/js/components/ui/ViewModeSwitch.vue

@@ -8,7 +8,7 @@
       title="View as thumbnails"
     >
       <input v-model="value" class="hidden" name="view-mode" type="radio" value="thumbnails">
-      <Icon :icon="faThumbnailsHehe" />
+      <LayoutGridIcon size="16" />
       <span class="hidden">View as thumbnails</span>
     </label>
 
@@ -20,15 +20,14 @@
       title="View as list"
     >
       <input v-model="value" class="hidden" name="view-mode" type="radio" value="list">
-      <Icon :icon="faList" />
+      <LayoutListIcon size="16" />
       <span class="hidden">View as list</span>
     </label>
   </span>
 </template>
 
 <script lang="ts" setup>
-import { faMicrosoft as faThumbnailsHehe } from '@fortawesome/free-brands-svg-icons'
+import { LayoutGridIcon, LayoutListIcon } from 'lucide-vue-next'
-import { faList } from '@fortawesome/free-solid-svg-icons'
 import { computed } from 'vue'
 
 const props = withDefaults(defineProps<{ modelValue?: ArtistAlbumViewMode }>(), { modelValue: 'thumbnails' })

resources/assets/js/components/ui/__snapshots__/ViewModeSwitch.spec.ts.snap

@@ -1,5 +1,23 @@
 // Vitest Snapshot v1
 
-exports[`renders list mode 1`] = `<span data-v-d5772cd7="" class="flex w-[64px] border border-solid border-white/20 rounded-md overflow-hidden mt-[0.5rem] md:mt-0"><label data-v-d5772cd7="" class="thumbnails" data-testid="view-mode-thumbnail" title="View as thumbnails"><input data-v-d5772cd7="" class="hidden" name="view-mode" type="radio" value="thumbnails"><br data-v-d5772cd7="" data-testid="Icon" icon="[object Object]"><span data-v-d5772cd7="" class="hidden">View as thumbnails</span></label><label data-v-d5772cd7="" class="active list" data-testid="view-mode-list" title="View as list"><input data-v-d5772cd7="" class="hidden" name="view-mode" type="radio" value="list"><br data-v-d5772cd7="" data-testid="Icon" icon="[object Object]"><span data-v-d5772cd7="" class="hidden">View as list</span></label></span>`;
+exports[`renders list mode 1`] = `
+<span data-v-d5772cd7="" class="flex w-[64px] border border-solid border-white/20 rounded-md overflow-hidden mt-[0.5rem] md:mt-0"><label data-v-d5772cd7="" class="thumbnails" data-testid="view-mode-thumbnail" title="View as thumbnails"><input data-v-d5772cd7="" class="hidden" name="view-mode" type="radio" value="thumbnails"><svg data-v-d5772cd7="" 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" class="lucide lucide-layout-grid-icon"><rect width="7" height="7" x="3" y="3" rx="1"></rect><rect width="7" height="7" x="14" y="3" rx="1"></rect><rect width="7" height="7" x="14" y="14" rx="1"></rect><rect width="7" height="7" x="3" y="14" rx="1"></rect></svg><span data-v-d5772cd7="" class="hidden">View as thumbnails</span></label><label data-v-d5772cd7="" class="active list" data-testid="view-mode-list" title="View as list"><input data-v-d5772cd7="" class="hidden" name="view-mode" type="radio" value="list"><svg data-v-d5772cd7="" 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" class="lucide lucide-layout-list-icon">
+    <rect width="7" height="7" x="3" y="3" rx="1"></rect>
+    <rect width="7" height="7" x="3" y="14" rx="1"></rect>
+    <path d="M14 4h7"></path>
+    <path d="M14 9h7"></path>
+    <path d="M14 15h7"></path>
+    <path d="M14 20h7"></path>
+  </svg><span data-v-d5772cd7="" class="hidden">View as list</span></label></span>
+`;
 
-exports[`renders thumbnails mode 1`] = `<span data-v-d5772cd7="" class="flex w-[64px] border border-solid border-white/20 rounded-md overflow-hidden mt-[0.5rem] md:mt-0"><label data-v-d5772cd7="" class="active thumbnails" data-testid="view-mode-thumbnail" title="View as thumbnails"><input data-v-d5772cd7="" class="hidden" name="view-mode" type="radio" value="thumbnails"><br data-v-d5772cd7="" data-testid="Icon" icon="[object Object]"><span data-v-d5772cd7="" class="hidden">View as thumbnails</span></label><label data-v-d5772cd7="" class="list" data-testid="view-mode-list" title="View as list"><input data-v-d5772cd7="" class="hidden" name="view-mode" type="radio" value="list"><br data-v-d5772cd7="" data-testid="Icon" icon="[object Object]"><span data-v-d5772cd7="" class="hidden">View as list</span></label></span>`;
+exports[`renders thumbnails mode 1`] = `
+<span data-v-d5772cd7="" class="flex w-[64px] border border-solid border-white/20 rounded-md overflow-hidden mt-[0.5rem] md:mt-0"><label data-v-d5772cd7="" class="active thumbnails" data-testid="view-mode-thumbnail" title="View as thumbnails"><input data-v-d5772cd7="" class="hidden" name="view-mode" type="radio" value="thumbnails"><svg data-v-d5772cd7="" 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" class="lucide lucide-layout-grid-icon"><rect width="7" height="7" x="3" y="3" rx="1"></rect><rect width="7" height="7" x="14" y="3" rx="1"></rect><rect width="7" height="7" x="14" y="14" rx="1"></rect><rect width="7" height="7" x="3" y="14" rx="1"></rect></svg><span data-v-d5772cd7="" class="hidden">View as thumbnails</span></label><label data-v-d5772cd7="" class="list" data-testid="view-mode-list" title="View as list"><input data-v-d5772cd7="" class="hidden" name="view-mode" type="radio" value="list"><svg data-v-d5772cd7="" 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" class="lucide lucide-layout-list-icon">
+    <rect width="7" height="7" x="3" y="3" rx="1"></rect>
+    <rect width="7" height="7" x="3" y="14" rx="1"></rect>
+    <path d="M14 4h7"></path>
+    <path d="M14 9h7"></path>
+    <path d="M14 15h7"></path>
+    <path d="M14 20h7"></path>
+  </svg><span data-v-d5772cd7="" class="hidden">View as list</span></label></span>
+`;

yarn.lock

@@ -4007,11 +4007,6 @@ is-unicode-supported@^0.1.0:
   resolved "https://registry.npmjs.org/is-unicode-supported/-/is-unicode-supported-0.1.0.tgz"
   integrity sha512-knxG2q4UC3u8stRGyAVJCOdxFmv5DZiRcdlIaAQXAbSfJya+OhopNotLQrstBhququ4ZpuKbDc/8S6mgXgPFPw==
 
-is-unicode-supported@^1.3.0:
-  version "1.3.0"
-  resolved "https://registry.yarnpkg.com/is-unicode-supported/-/is-unicode-supported-1.3.0.tgz#d824984b616c292a2e198207d4a609983842f714"
-  integrity sha512-43r2mRvz+8JRIKnWJ+3j8JtjRKZ6GmjzfaE/qiBJnikNnYv/6bagRJ1kUhNk8R5EX/GkobD+r+sfxCPJsiKBLQ==
-
 is-weakmap@^2.0.1:
   version "2.0.1"
   resolved "https://registry.npmjs.org/is-weakmap/-/is-weakmap-2.0.1.tgz"
@@ -4468,10 +4463,10 @@ lru-cache@^4.1.5:
     pseudomap "^1.0.2"
     yallist "^2.1.2"
 
-lucide-vue-next@^0.363.0:
+lucide-vue-next@^0.452.0:
-  version "0.363.0"
+  version "0.452.0"
-  resolved "https://registry.npmjs.org/lucide-vue-next/-/lucide-vue-next-0.363.0.tgz"
+  resolved "https://registry.yarnpkg.com/lucide-vue-next/-/lucide-vue-next-0.452.0.tgz#dbd87395feae9fdd2116300982b084b0aa2f1429"
-  integrity sha512-dc5KgrXhCPMEzKz6voDVvxXkwEr7n+Q4b7qLyS2e3DTlH9GMFydS4fHoSvpZR/a5M7i1EOpFI8/BA8SPjAOwEQ==
+  integrity sha512-a7i6LayYT/kPDkwRvcWWZlPTRPiaM11xhUhFctRXmjibZod9TdVhk4U/7q2RYYkkkDJHp/4OSiXbxC82+mda3Q==
 
 lz-string@^1.4.4:
   version "1.4.4"