improve component spacing

+ bump up folder and album page gap to ~ 1rem
+ test out noise texture on album img on album page
+
~ although i'm still annoyed about the scrollbar space irregularities (will fix someday)

src/components/AlbumView/Header.vue

@@ -15,6 +15,7 @@
         v-motion-slide-from-left
         class="rounded shadow-lg"
       />
+      <img class="filter rounded" src="../../assets/images/noise-texture.svg" alt="" />
     </div>
     <div class="info" :class="{ nocontrast: isLight() }">
       <div class="top" v-motion-slide-from-top>
@@ -187,6 +188,7 @@ function theyContrast(color1: string, color2: string) {
   .art {
     display: flex;
     align-items: flex-end;
+    position: relative;
 
     img {
       height: 16rem;
@@ -194,6 +196,11 @@ function theyContrast(color1: string, color2: string) {
       object-fit: cover;
       transition: all 0.2s ease-in-out;
     }
+
+    .filter {
+      position: absolute;
+      // display: none;
+    }
   }
 
   .nocontrast {

src/components/FolderView/FolderList.vue

@@ -1,37 +1,32 @@
 <template>
-  <div class="f-container rounded" :class="{ no_f: !props.folders.length }">
-    <div id="f-items" v-if="props.folders.length">
+  <div class="f-container rounded">
+    <div id="f-items">
       <FolderItem
-        v-for="folder in props.folders"
-        :key="folder"
+        v-for="folder in folders"
+        :key="JSON.stringify(folder)"
         :folder="folder"
       />
     </div>
   </div>
 </template>
 
-<script setup>
+<script setup lang="ts">
+import { Folder } from "@/interfaces";
 import FolderItem from "./FolderItem.vue";
 
-const props = defineProps({
-  folders: {
-    type: Array,
-    required: true,
-  },
-});
+defineProps<{
+  folders: Folder[];
+}>();
 </script>
 
 <style lang="scss">
-
-.no_f {
-  display: none;
-}
-
 #f-items {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
   gap: $medium;
   border-bottom: 1px solid $gray3;
-  padding-bottom: .55rem;
+  padding: 1rem 0;
+  padding-top: $small;
+  margin-bottom: 1rem;
 }
 </style>

src/components/FolderView/SongList.vue

@@ -130,9 +130,10 @@ function getTracks() {
 }
 
 .table {
-  width: 100%;
   height: 100%;
   overflow-y: hidden;
+  background-color: $gray5;
+  padding: $small 0;
 
   .current {
     a {

src/components/shared/SongItem.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    class="songlist-item rounded"
+    class="songlist-item"
     :class="[
       { current: isCurrent },
       { contexton: context_on },