feat: add playing status on sidebar playlists (#1517)

* udpate playing status on sidebar playlists

* update player mode logic & delete unused codes

* change sidebar svg to volume-half

* format code and relevant optimizations

* justify-between

* change object visit mode to dot.

* delete duplited `flex` class

* add playlist id check
in case playlist id conflicts with album.

src/renderer/components/SvgIcon.tsx

@@ -1,4 +1,50 @@
-const SvgIcon = ({ name, className }: { name: string; className?: string }) => {
+type SvgName =
+  | 'back'
+  | 'dislike'
+  | 'dj'
+  | 'email'
+  | 'explicit'
+  | 'eye-off'
+  | 'eye'
+  | 'fm'
+  | 'forward'
+  | 'heart-outline'
+  | 'heart'
+  | 'home'
+  | 'lock'
+  | 'lyrics'
+  | 'more'
+  | 'music-library'
+  | 'music-note'
+  | 'next'
+  | 'pause'
+  | 'phone'
+  | 'play-fill'
+  | 'play'
+  | 'playlist'
+  | 'podcast'
+  | 'previous'
+  | 'qrcode'
+  | 'repeat'
+  | 'repeat-1'
+  | 'search'
+  | 'settings'
+  | 'shuffle'
+  | 'user'
+  | 'volume-half'
+  | 'volume-mute'
+  | 'volume'
+  | 'windows-close'
+  | 'windows-maximize'
+  | 'windows-un-maximize'
+  | 'x'
+const SvgIcon = ({
+  name,
+  className,
+}: {
+  name: SvgName
+  className?: string
+}) => {
   const symbolId = `#icon-${name}`
   return (
     <svg aria-hidden='true' className={className}>