replace background image with svg

- add symlink svg
- fix validate playlist thumbnails

src/components/FolderView/FolderItem.vue

@@ -1,33 +1,36 @@
 <template>
-  <router-link
-    :to="{ name: 'FolderView', params: { path: props.folder.path } }"
-  >
+  <router-link :to="{ name: 'FolderView', params: { path: folder.path } }">
     <div class="f-item">
-      <div class="icon image"></div>
+      <div class="icon">
+        <FolderSvg v-if="!folder.is_sym" />
+        <SymLinkSvg v-if="folder.is_sym" />
+      </div>
       <div class="info">
-        <div class="f-item-text ellip">{{ props.folder.name }}</div>
+        <div class="f-item-text ellip">{{ folder.name }}</div>
         <div class="separator no-border"></div>
-        <div class="f-item-count">{{ props.folder.trackcount }} tracks</div>
+        <div class="f-item-count">{{ folder.trackcount }} tracks</div>
       </div>
     </div>
   </router-link>
 </template>
 
 <script setup lang="ts">
-const props = defineProps({
-  folder: {
-    type: Object,
-    required: true,
-  },
-});
+import { Folder } from "@/interfaces";
+import FolderSvg from "../../assets/icons/folder.svg";
+import SymLinkSvg from "../../assets/icons/symlink.svg";
+
+defineProps<{
+  folder: Folder;
+}>();
 </script>
 
 <style lang="scss">
 .f-container .f-item {
   height: 5rem;
-  display: flex;
+  display: grid;
+  grid-template-columns: max-content 1fr;
+  padding-right: 1rem;
   align-items: center;
-  position: relative;
   background-color: $gray4;
   transition: all 0.2s ease;
   border-radius: 0.75rem;
@@ -37,16 +40,10 @@ const props = defineProps({
   }
 
   .icon {
-    background-image: url(../../assets/icons/folder.svg);
-    width: 2rem;
-    height: 1.5rem;
-    margin-right: 1rem;
-    margin-left: 1rem;
+    margin: 0 0.75rem;
   }
 
   .info {
-    width: 100%;
-
     .f-item-count {
       font-size: 0.8rem;
       color: rgba(219, 217, 217, 0.63);