From b522069d8ee6347c15d294ba245c9cedddcf3ea7 Mon Sep 17 00:00:00 2001
From: geoffrey45 <geoffreymungai45@gmail.com>
Date: Sun, 31 Jul 2022 10:31:41 +0300
Subject: [PATCH 1/4] delete thumbnails with 0 bytes size

---
 server/app/lib/albumslib.py | 9 +++++----
 server/app/lib/taglib.py    | 9 ++++++---
 2 files changed, 11 insertions(+), 7 deletions(-)

diff --git a/server/app/lib/albumslib.py b/server/app/lib/albumslib.py
index eea60e4f..6e196523 100644
--- a/server/app/lib/albumslib.py
+++ b/server/app/lib/albumslib.py
@@ -37,7 +37,6 @@ class RipAlbumImage:
 
 
 class ValidateAlbumThumbs:
-
     @staticmethod
     def remove_obsolete():
         """
@@ -54,6 +53,10 @@ class ValidateAlbumThumbs:
 
             if e is None:
                 os.remove(entry.path)
+                break
+
+            if os.path.getsize(entry.path) == 0:
+                os.remove(entry.path)
 
     @staticmethod
     def find_lost_thumbnails():
@@ -61,9 +64,7 @@ class ValidateAlbumThumbs:
         Re-rip lost album thumbnails
         """
         entries = os.scandir(THUMBS_PATH)
-        entries = [
-            Thumbnail(entry.name) for entry in entries if entry.is_file()
-        ]
+        entries = [Thumbnail(entry.name) for entry in entries if entry.is_file()]
 
         albums = helpers.Get.get_all_albums()
         thumbs = [(album.hash + ".webp") for album in albums]
diff --git a/server/app/lib/taglib.py b/server/app/lib/taglib.py
index 4770035d..8cd6280e 100644
--- a/server/app/lib/taglib.py
+++ b/server/app/lib/taglib.py
@@ -9,7 +9,7 @@ from mutagen.id3 import ID3
 from PIL import Image
 
 
-def return_album_art(filepath: str):
+def parse_album_art(filepath: str):
     """
     Returns the album art for a given audio file.
     """
@@ -36,9 +36,12 @@ def extract_thumb(filepath: str, webp_path: str) -> bool:
     tsize = settings.THUMB_SIZE
 
     if os.path.exists(img_path):
-        return True
+        img_size = os.path.getsize(filepath)
 
-    album_art = return_album_art(filepath)
+        if img_size > 0:
+            return True
+
+    album_art = parse_album_art(filepath)
 
     if album_art is not None:
         img = Image.open(BytesIO(album_art))

From 8fa0516b56b379c2235ac06d9487bc3a8dac91cd Mon Sep 17 00:00:00 2001
From: geoffrey45 <geoffreymungai45@gmail.com>
Date: Mon, 1 Aug 2022 00:23:39 +0300
Subject: [PATCH 2/4] 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/App.vue                              |  7 ---
 src/assets/css/global.scss               | 37 +++++------
 src/assets/css/moz.scss                  | 16 +++++
 src/assets/images/noise-texture.svg      | 78 ++++++++++++++++++++++++
 src/components/AlbumView/Header.vue      |  7 +++
 src/components/FolderView/FolderList.vue | 29 ++++-----
 src/components/FolderView/SongList.vue   |  3 +-
 src/components/shared/SongItem.vue       |  2 +-
 src/layouts/HeaderContentBottom.vue      | 37 +++++------
 src/views/FolderView.vue                 |  2 +-
 10 files changed, 155 insertions(+), 63 deletions(-)
 create mode 100644 src/assets/css/moz.scss
 create mode 100644 src/assets/images/noise-texture.svg

diff --git a/src/App.vue b/src/App.vue
index 34f63140..c38cf0c8 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -94,11 +94,4 @@ onStartTyping(() => {
     display: none;
   }
 }
-
-.content {
-  padding: 0 $small;
-  margin-top: $small;
-  overflow: auto;
-  padding-right: $small !important;
-}
 </style>
diff --git a/src/assets/css/global.scss b/src/assets/css/global.scss
index 5cd5d38f..4b126bc2 100644
--- a/src/assets/css/global.scss
+++ b/src/assets/css/global.scss
@@ -1,5 +1,6 @@
 @import "../css/ProgressBar.scss";
 @import "mixins.scss";
+@import "./moz.scss";
 
 :root {
   --separator: #ffffff46;
@@ -85,11 +86,26 @@ a {
   max-width: 2720px;
   height: 100vh;
   margin: 0 auto;
+  gap: $small;
+}
+
+#acontent {
+  grid-area: content;
+  width: calc(100% + $small);
+  max-width: 1955px;
+  overflow: hidden auto;
+  margin: 0 auto;
+  padding-right: $medium;
+  margin-bottom: $small;
+
+  .nav {
+    margin: $small;
+    width: calc(100% - 1rem);
+  }
 }
 
 .tabs {
   grid-area: tabs;
-  border-left: solid 1px $gray3;
 
   @include tablet-landscape {
     display: none;
@@ -137,24 +153,9 @@ a {
   display: flex;
 }
 
-#acontent {
-  grid-area: content;
-  width: 100%;
-  max-width: 1955px;
-  padding: $small;
-  padding-left: 0;
-  overflow: auto;
-  margin: 0 auto;
-
-  .nav {
-    margin: $small;
-    width: calc(100% - 1rem);
-  }
-}
-
 .r-sidebar {
   grid-area: r-sidebar;
-  border-left: solid 1px $gray3;
+  // border-left: solid 1px $gray3;
 }
 
 .image {
@@ -187,7 +188,7 @@ a {
 /* width */
 
 ::-webkit-scrollbar {
-  width: 0.5rem;
+  width: 3px;
 }
 
 /* Track */
diff --git a/src/assets/css/moz.scss b/src/assets/css/moz.scss
new file mode 100644
index 00000000..72b6c623
--- /dev/null
+++ b/src/assets/css/moz.scss
@@ -0,0 +1,16 @@
+// Styles that only apply on our dear Firefox 
+
+@-moz-document url-prefix() {
+  #acontent {
+    padding-right: 1rem !important;
+  }
+
+  #ap-page {
+    width: 100% !important;
+    padding-right: 1rem !important;
+  }
+
+  .ap-page-bottom-container {
+    width: calc(100% - 1rem) !important;
+  }
+}
diff --git a/src/assets/images/noise-texture.svg b/src/assets/images/noise-texture.svg
new file mode 100644
index 00000000..8acc4de0
--- /dev/null
+++ b/src/assets/images/noise-texture.svg
@@ -0,0 +1,78 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="1600"
+   height="900"
+   viewBox="0 0 1600 900"
+   version="1.1"
+   id="svg13"
+   sodipodi:docname="noise-texture.svg"
+   inkscape:version="0.92.4 (5da689c313, 2019-01-14)">
+  <metadata
+     id="metadata17">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="1366"
+     inkscape:window-height="714"
+     id="namedview15"
+     showgrid="false"
+     inkscape:zoom="0.26222222"
+     inkscape:cx="28.104465"
+     inkscape:cy="117.7106"
+     inkscape:window-x="0"
+     inkscape:window-y="28"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg13" />
+  <defs
+     id="defs9">
+    <radialGradient
+       id="a"
+       gradientTransform="matrix(1 1 -1 1 0.5 -0.5)">
+      <stop
+         stop-color="#455A64"
+         stop-opacity="0"
+         offset="0.25"
+         id="stop2"
+         style="stop-color:#222222;stop-opacity:0" />
+      <stop
+         stop-color="#455A64"
+         stop-opacity="0.5"
+         offset="0.75"
+         id="stop4"
+         style="stop-color:#222222;stop-opacity:0.50196081" />
+      <stop
+         stop-color="#455A64"
+         stop-opacity="1"
+         offset="1"
+         id="stop6"
+         style="stop-color:#222222;stop-opacity:1" />
+    </radialGradient>
+  </defs>
+  <rect
+     width="1600"
+     height="900"
+     fill="url(#a)"
+     id="rect11" />
+</svg>
diff --git a/src/components/AlbumView/Header.vue b/src/components/AlbumView/Header.vue
index 6bf05e8e..45abe96d 100644
--- a/src/components/AlbumView/Header.vue
+++ b/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 {
diff --git a/src/components/FolderView/FolderList.vue b/src/components/FolderView/FolderList.vue
index fd9cc654..f438e7c8 100644
--- a/src/components/FolderView/FolderList.vue
+++ b/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>
diff --git a/src/components/FolderView/SongList.vue b/src/components/FolderView/SongList.vue
index 34b10c85..c8a56221 100644
--- a/src/components/FolderView/SongList.vue
+++ b/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 {
diff --git a/src/components/shared/SongItem.vue b/src/components/shared/SongItem.vue
index ac1e8bc9..56405594 100644
--- a/src/components/shared/SongItem.vue
+++ b/src/components/shared/SongItem.vue
@@ -1,6 +1,6 @@
 <template>
   <div
-    class="songlist-item rounded"
+    class="songlist-item"
     :class="[
       { current: isCurrent },
       { contexton: context_on },
diff --git a/src/layouts/HeaderContentBottom.vue b/src/layouts/HeaderContentBottom.vue
index cf8a1b0b..603efde7 100644
--- a/src/layouts/HeaderContentBottom.vue
+++ b/src/layouts/HeaderContentBottom.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="ap-container noscroll">
+  <div class="ap-container noscroll rounded">
     <div id="ap-page">
       <header class="ap-page-header" ref="apheader">
         <slot name="header"></slot>
@@ -101,13 +101,28 @@ function toggleBottom() {
 .ap-container {
   height: 100%;
   position: relative;
-  margin-right: -$small;
+  width: calc(100% + 1rem);
+
+  #ap-page {
+    overflow: auto;
+    height: 100%;
+    position: relative;
+    display: grid;
+    grid-template-rows: 18rem 1fr;
+    gap: 1rem;
+    padding-right: $small;
+    width: calc(100% - $small);
+
+    .ap-page-content {
+      padding-bottom: 16rem;
+    }
+  }
 
   .ap-page-bottom-container {
     position: absolute;
     bottom: 0;
     height: 15rem;
-    width: calc(100% - $small);
+    width: calc(100% - 1.25rem);
     background-color: $gray;
     transition: all 0.5s ease !important;
     overscroll-behavior: contain;
@@ -164,21 +179,7 @@ function toggleBottom() {
   }
 
   .addbottompadding {
-    padding-bottom: 17rem;
-  }
-}
-
-#ap-page {
-  padding-right: $small;
-  height: 100%;
-  position: relative;
-  overflow: auto;
-  display: grid;
-  grid-template-rows: 18rem 1fr;
-  gap: 1rem;
-
-  .ap-page-content {
-    padding-bottom: 17rem;
+    padding-bottom: 16rem;
   }
 }
 </style>
diff --git a/src/views/FolderView.vue b/src/views/FolderView.vue
index 22518311..1b9cbd13 100644
--- a/src/views/FolderView.vue
+++ b/src/views/FolderView.vue
@@ -1,7 +1,7 @@
 <template>
   <div id="f-view-parent">
     <div id="scrollable" ref="scrollable">
-      <FolderList :folders="FStore.dirs" />
+      <FolderList :folders="FStore.dirs" v-if="FStore.dirs.length" />
       <SongList :tracks="FStore.tracks" :path="FStore.path" />
     </div>
   </div>

From 9e1f73e281102ec9ec96154c9c38664f47178e0d Mon Sep 17 00:00:00 2001
From: geoffrey45 <geoffreymungai45@gmail.com>
Date: Tue, 2 Aug 2022 02:43:06 +0300
Subject: [PATCH 3/4] set global margin on the main app grid

+ refactor margins and paddings in some components
---
 src/assets/css/BottomBar/BottomBar.scss       |  1 -
 src/assets/css/global.scss                    | 32 +++++++++++--------
 src/components/FolderView/FolderList.vue      |  2 +-
 src/components/RightSideBar/Home/Main.vue     |  2 --
 src/components/RightSideBar/Main.vue          | 16 +---------
 .../RightSideBar/Search/AlbumGrid.vue         |  1 -
 .../RightSideBar/Search/ArtistGrid.vue        |  1 -
 .../RightSideBar/Search/PlaylistsGrid.vue     |  1 -
 src/components/RightSideBar/SearchInput.vue   |  5 ++-
 src/components/RightSideBar/Tabs.vue          |  7 ++--
 src/components/nav/NavBar.vue                 | 19 ++---------
 src/views/FolderView.vue                      |  1 -
 src/views/Playlists.vue                       |  1 -
 13 files changed, 28 insertions(+), 61 deletions(-)

diff --git a/src/assets/css/BottomBar/BottomBar.scss b/src/assets/css/BottomBar/BottomBar.scss
index 775e7c96..58820b87 100644
--- a/src/assets/css/BottomBar/BottomBar.scss
+++ b/src/assets/css/BottomBar/BottomBar.scss
@@ -4,7 +4,6 @@
 
   .grid {
     background-color: $primary;
-    display: grid;
     height: 100%;
     padding-right: $small;
 
diff --git a/src/assets/css/global.scss b/src/assets/css/global.scss
index 4b126bc2..93d13c2c 100644
--- a/src/assets/css/global.scss
+++ b/src/assets/css/global.scss
@@ -1,6 +1,6 @@
 @import "../css/ProgressBar.scss";
 @import "mixins.scss";
-@import "./moz.scss";
+// @import "./moz.scss";
 
 :root {
   --separator: #ffffff46;
@@ -71,32 +71,37 @@ a {
   display: none;
 }
 
+input[type="search"] {
+  height: 2.25rem;
+}
+
 .l-container {
   display: grid;
   grid-template-columns: min-content 1fr min-content;
-  grid-template-rows: 3.5rem 1fr 1fr;
-  grid-auto-flow: row;
+  grid-template-rows: 2.5rem 1fr 4rem;
   grid-template-areas:
     "l-sidebar nav search-input"
     "l-sidebar content r-sidebar"
     "l-sidebar content r-sidebar"
     "l-sidebar content tabs";
-  width: 100%;
   align-content: center;
   max-width: 2720px;
-  height: 100vh;
+  height: calc(100vh - 1rem);
   margin: 0 auto;
-  gap: $small;
+  gap: 1rem;
+  margin: $small;
+}
+
+#tabs {
+  grid-area: tabs;
+  height: 3.5rem;
 }
 
 #acontent {
   grid-area: content;
-  width: calc(100% + $small);
   max-width: 1955px;
   overflow: hidden auto;
-  margin: 0 auto;
-  padding-right: $medium;
-  margin-bottom: $small;
+  margin-top: -$small;
 
   .nav {
     margin: $small;
@@ -124,7 +129,6 @@ a {
   width: 17rem;
   grid-area: l-sidebar;
   background-color: $black;
-  margin: $small;
   padding: 1rem;
 }
 
@@ -155,7 +159,8 @@ a {
 
 .r-sidebar {
   grid-area: r-sidebar;
-  // border-left: solid 1px $gray3;
+  margin-top: -$small;
+  width: 29rem;
 }
 
 .image {
@@ -194,7 +199,7 @@ a {
 /* Track */
 
 ::-webkit-scrollbar-track {
-  background: rgba(51, 51, 51, 0.459);
+  background: transparent;
   border-radius: 1rem;
 }
 
@@ -244,6 +249,7 @@ a {
     background-position: 0 38%;
   }
 }
+
 @keyframes similarAlbums {
   0% {
     background-position: 0 38%;
diff --git a/src/components/FolderView/FolderList.vue b/src/components/FolderView/FolderList.vue
index f438e7c8..ed036153 100644
--- a/src/components/FolderView/FolderList.vue
+++ b/src/components/FolderView/FolderList.vue
@@ -26,7 +26,7 @@ defineProps<{
   gap: $medium;
   border-bottom: 1px solid $gray3;
   padding: 1rem 0;
-  padding-top: $small;
+  padding-top: 0;
   margin-bottom: 1rem;
 }
 </style>
diff --git a/src/components/RightSideBar/Home/Main.vue b/src/components/RightSideBar/Home/Main.vue
index 2533d3ff..c8592ad0 100644
--- a/src/components/RightSideBar/Home/Main.vue
+++ b/src/components/RightSideBar/Home/Main.vue
@@ -8,8 +8,6 @@
 <style lang="scss">
 .r-home {
   height: calc(100% - 1rem);
-  padding: 0 $small $small 0;
-  margin-top: $small;
 }
 </style>
 
diff --git a/src/components/RightSideBar/Main.vue b/src/components/RightSideBar/Main.vue
index da6326ac..f1b8895d 100644
--- a/src/components/RightSideBar/Main.vue
+++ b/src/components/RightSideBar/Main.vue
@@ -27,9 +27,7 @@ const tabs = useTabStore();
 
 <style lang="scss">
 .r-sidebar {
-  width: 29em;
-  background-color: rgba(4, 12, 34, 0.103);
-  padding: 0 $small;
+
 
   @include phone-only {
     display: none;
@@ -64,18 +62,6 @@ const tabs = useTabStore();
         height: 100%;
       }
     }
-
-    .tab-keys {
-      display: none;
-      width: 3rem;
-      right: 0;
-      height: 100%;
-      position: absolute;
-      grid-area: tabs;
-      border-radius: 0;
-      overflow: hidden;
-      border-left: solid 1px $gray;
-    }
   }
 }
 </style>
diff --git a/src/components/RightSideBar/Search/AlbumGrid.vue b/src/components/RightSideBar/Search/AlbumGrid.vue
index 7c590cad..89fc819f 100644
--- a/src/components/RightSideBar/Search/AlbumGrid.vue
+++ b/src/components/RightSideBar/Search/AlbumGrid.vue
@@ -36,7 +36,6 @@ function loadMore() {
   }
 
   .grid {
-    display: grid;
     grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr));
     flex-wrap: wrap;
     gap: 0.75rem;
diff --git a/src/components/RightSideBar/Search/ArtistGrid.vue b/src/components/RightSideBar/Search/ArtistGrid.vue
index 76ecb489..82c21a54 100644
--- a/src/components/RightSideBar/Search/ArtistGrid.vue
+++ b/src/components/RightSideBar/Search/ArtistGrid.vue
@@ -35,7 +35,6 @@ function loadMore() {
   }
 
   .grid {
-    display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 0.75rem;
   }
diff --git a/src/components/RightSideBar/Search/PlaylistsGrid.vue b/src/components/RightSideBar/Search/PlaylistsGrid.vue
index 5a611d22..e30984ca 100644
--- a/src/components/RightSideBar/Search/PlaylistsGrid.vue
+++ b/src/components/RightSideBar/Search/PlaylistsGrid.vue
@@ -36,7 +36,6 @@ function loadMore() {
   }
 
   .grid {
-    display: grid;
     grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr));
     flex-wrap: wrap;
     gap: 0.75rem;
diff --git a/src/components/RightSideBar/SearchInput.vue b/src/components/RightSideBar/SearchInput.vue
index 002d3511..2fe5e7a1 100644
--- a/src/components/RightSideBar/SearchInput.vue
+++ b/src/components/RightSideBar/SearchInput.vue
@@ -32,9 +32,9 @@ function unfocusThis() {
 
 <style lang="scss">
 #gsearch-input {
-  padding: $small;
   display: flex;
-
+  margin-bottom: $small;
+  
   @include tablet-landscape {
     display: none;
   }
@@ -46,7 +46,6 @@ function unfocusThis() {
     display: flex;
     gap: $small;
     background-color: $gray4;
-    height: 2.25rem;
 
     .icon {
       width: 2rem;
diff --git a/src/components/RightSideBar/Tabs.vue b/src/components/RightSideBar/Tabs.vue
index d0a2a179..2c2392c5 100644
--- a/src/components/RightSideBar/Tabs.vue
+++ b/src/components/RightSideBar/Tabs.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="tabs">
+  <div class="tabs" id="tabs">
     <div class="cont rounded">
       <div
         v-for="tab in tabs.tabs"
@@ -22,8 +22,8 @@ const tabs = useTabStore();
 
 <style lang="scss">
 .tabs {
-  padding: $small;
-  height: 4.25rem;
+  grid-area: tabs;
+  height: 100%;
 
   .cont {
     background-color: $black;
@@ -58,7 +58,6 @@ const tabs = useTabStore();
     .t-item {
       background-color: transparent;
     }
-
   }
 
   .search {
diff --git a/src/components/nav/NavBar.vue b/src/components/nav/NavBar.vue
index 5084c8bf..8df2c4e6 100644
--- a/src/components/nav/NavBar.vue
+++ b/src/components/nav/NavBar.vue
@@ -16,7 +16,6 @@
       <Loader />
     </div>
     <div class="right">
-      <div class="more image"></div>
       <Search />
     </div>
   </div>
@@ -78,16 +77,12 @@ watch(
 );
 </script>
 
-<!-- !!use nav store to sync the title component!! -->
-
 <style lang="scss">
 .topnav {
   display: grid;
   grid-template-columns: 1fr min-content max-content;
-  padding-bottom: 1rem;
-  margin: $small $small 0 0;
-  border-bottom: 1px solid $gray3;
-  height: 3rem;
+  // border-bottom: 1px solid $gray3;
+  // padding-bottom: $small;
 
   .left {
     display: grid;
@@ -115,16 +110,6 @@ watch(
     width: 100%;
     display: flex;
     gap: $small;
-
-    .more {
-      width: 2.25rem;
-      aspect-ratio: 1;
-      height: 100%;
-      background-color: $gray5;
-      background-image: url("../../assets/icons/more.svg");
-      transform: rotate(90deg);
-      border-radius: $small;
-    }
   }
 }
 </style>
diff --git a/src/views/FolderView.vue b/src/views/FolderView.vue
index 1b9cbd13..9beedacb 100644
--- a/src/views/FolderView.vue
+++ b/src/views/FolderView.vue
@@ -51,7 +51,6 @@ onBeforeRouteUpdate((to, from) => {
 
 #scrollable {
   overflow-y: auto;
-  height: calc(100% - $small);
   scrollbar-color: grey transparent;
 
   @include phone-only {
diff --git a/src/views/Playlists.vue b/src/views/Playlists.vue
index 9e999ddd..5f8cb324 100644
--- a/src/views/Playlists.vue
+++ b/src/views/Playlists.vue
@@ -25,7 +25,6 @@ const pStore = usePStore();
   scrollbar-color: $gray2 transparent;
 
   .grid {
-    display: grid;
     grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
     gap: 1rem;
   }

From e45dd6c2b179747036728df2950acb78e629c5aa Mon Sep 17 00:00:00 2001
From: geoffrey45 <geoffreymungai45@gmail.com>
Date: Tue, 2 Aug 2022 03:12:28 +0300
Subject: [PATCH 4/4] more padding + margin edits

---
 src/assets/css/global.scss                  |  5 +++--
 src/components/FolderView/FolderItem.vue    |  2 +-
 src/components/FolderView/FolderList.vue    |  7 +++----
 src/components/RightSideBar/SearchInput.vue | 12 +++++++-----
 src/components/nav/Search.vue               |  4 ++++
 5 files changed, 18 insertions(+), 12 deletions(-)

diff --git a/src/assets/css/global.scss b/src/assets/css/global.scss
index 93d13c2c..ca25aca2 100644
--- a/src/assets/css/global.scss
+++ b/src/assets/css/global.scss
@@ -72,13 +72,13 @@ a {
 }
 
 input[type="search"] {
-  height: 2.25rem;
+  height: 2.25rem !important;
 }
 
 .l-container {
   display: grid;
   grid-template-columns: min-content 1fr min-content;
-  grid-template-rows: 2.5rem 1fr 4rem;
+  grid-template-rows: max-content 1fr max-content;
   grid-template-areas:
     "l-sidebar nav search-input"
     "l-sidebar content r-sidebar"
@@ -95,6 +95,7 @@ input[type="search"] {
 #tabs {
   grid-area: tabs;
   height: 3.5rem;
+  margin-top: -$small;
 }
 
 #acontent {
diff --git a/src/components/FolderView/FolderItem.vue b/src/components/FolderView/FolderItem.vue
index 8ca2b6d5..141db6f1 100644
--- a/src/components/FolderView/FolderItem.vue
+++ b/src/components/FolderView/FolderItem.vue
@@ -31,7 +31,7 @@ defineProps<{
   grid-template-columns: max-content 1fr;
   padding-right: 1rem;
   align-items: center;
-  background-color: $gray4;
+  background-color: $gray3;
   transition: all 0.2s ease;
   border-radius: 0.75rem;
 
diff --git a/src/components/FolderView/FolderList.vue b/src/components/FolderView/FolderList.vue
index ed036153..d97449a2 100644
--- a/src/components/FolderView/FolderList.vue
+++ b/src/components/FolderView/FolderList.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="f-container rounded">
-    <div id="f-items">
+    <div id="f-items" class="rounded">
       <FolderItem
         v-for="folder in folders"
         :key="JSON.stringify(folder)"
@@ -24,9 +24,8 @@ defineProps<{
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
   gap: $medium;
-  border-bottom: 1px solid $gray3;
-  padding: 1rem 0;
-  padding-top: 0;
+  padding: $small;
   margin-bottom: 1rem;
+  background-color: $gray5;
 }
 </style>
diff --git a/src/components/RightSideBar/SearchInput.vue b/src/components/RightSideBar/SearchInput.vue
index 2fe5e7a1..9f526f1e 100644
--- a/src/components/RightSideBar/SearchInput.vue
+++ b/src/components/RightSideBar/SearchInput.vue
@@ -7,7 +7,7 @@
         class="rounded"
         v-model="search.query"
         placeholder="Search your library"
-        type="text"
+        type="search"
         @focus="focusThis()"
         @blur="unfocusThis()"
       />
@@ -33,8 +33,9 @@ function unfocusThis() {
 <style lang="scss">
 #gsearch-input {
   display: flex;
-  margin-bottom: $small;
-  
+  height: max-content;
+  // margin-bottom: $smaller;
+
   @include tablet-landscape {
     display: none;
   }
@@ -44,11 +45,12 @@ function unfocusThis() {
     border-radius: 0.4rem;
     position: relative;
     display: flex;
-    gap: $small;
+    background-color: $red;
     background-color: $gray4;
 
     .icon {
-      width: 2rem;
+      width: 2.25rem;
+      aspect-ratio: 1;
       background-image: url("../../assets/icons/search.svg");
       background-size: 1.5rem;
       margin-left: $smaller;
diff --git a/src/components/nav/Search.vue b/src/components/nav/Search.vue
index 7640bbb6..62e96653 100644
--- a/src/components/nav/Search.vue
+++ b/src/components/nav/Search.vue
@@ -14,9 +14,13 @@
 
 <style lang="scss">
 #nav-search {
+  // border: solid 1px $gray2;
+
   form {
     display: flex;
     gap: $small;
+    padding: 0;
+    margin: 0;
 
     input[type="search"] {
       background-color: $gray5;