add search page

src/components/AlbumView/Header.vue

@@ -8,15 +8,15 @@
       )`,
     }"
   >
-    <div class="art rounded">
-      <img
-        :src="imguri.artist + album.artistimg"
-        alt=""
-        class="circular shadow-lg"
-        loading="lazy"
-      />
-    </div>
     <div class="info" :class="{ nocontrast: isLight(album.colors[0]) }">
+      <div class="art rounded">
+        <img
+          :src="imguri.artist + album.artistimg"
+          alt=""
+          class="circular shadow-lg"
+          loading="lazy"
+        />
+      </div>
       <div class="top">
         <div class="h">
           <span v-if="album.is_soundtrack">Soundtrack</span>
@@ -40,8 +40,8 @@
         />
       </div>
     </div>
-    <div class="bigimg ">
-      <img class="rounded shadow-lg" :src="imguri.thumb + album.image" alt="" />
+    <div class="rounded shadow-lg bigimg">
+      <img :src="imguri.thumb + album.image" />
     </div>
   </div>
 </template>
@@ -92,21 +92,23 @@ useVisibility(albumheaderthing, handleVisibilityState);
 <style lang="scss">
 .a-header {
   display: grid;
-  grid-template-columns: 1fr min-content;
-  grid-template-rows: 1fr 1fr;
-  grid-template-areas: "artist thumbnail" "tags thumbnail";
+  grid-template-columns: 1fr auto;
   gap: 1rem;
   padding: 1rem;
   height: 100% !important;
   background-color: $black;
   background-image: linear-gradient(37deg, $black 20%, $gray, $black 90%);
+  overflow: hidden;
 
   .bigimg {
-    grid-area: thumbnail;
-    width: 16rem;
+    height: 100%;
+    word-break: break-all;
+    overflow: hidden;
 
     img {
-      height: 100%;
+      width: 100%;
+      aspect-ratio: 1;
+      object-fit: cover;
     }
   }
 
@@ -130,7 +132,6 @@ useVisibility(albumheaderthing, handleVisibilityState);
   }
 
   .info {
-    grid-area: tags;
     width: 100%;
     display: flex;
     flex-direction: column;

src/components/FolderView/SongList.vue

@@ -189,7 +189,7 @@ function getTrackList() {
 .table {
   height: 100%;
   overflow-y: hidden;
-  background-color: $gray5;
+  background-color: $black;
   padding: $small 0;
 
   .header {
@@ -262,7 +262,8 @@ function getTrackList() {
   .isSmallArtists {
     display: unset !important;
     font-size: small;
-    opacity: 0.7;
+    color: $white;
+    opacity: 0.67;
   }
 }
 
@@ -275,10 +276,4 @@ function getTrackList() {
     display: none !important;
   }
 }
-
-// .table.isLarge {
-//   .songlist-item {
-//     grid-template-columns: 1.5rem 1.5fr 1fr 1fr 2rem 2.5rem;
-//   }
-// }
 </style>

src/components/LeftSidebar/Navigation.vue

@@ -5,7 +5,8 @@
       :key="menu.name"
       :to="{ name: menu.route_name, params: menu?.params }"
     >
-      <div class="nav-button" id="home-button">
+      <div v-if="menu.separator" :class="{ separator: menu.separator }"></div>
+      <div class="nav-button" id="home-button" v-else>
         <div class="in">
           <component :is="menu.icon"></component>
           <span>{{ menu.name }}</span>
@@ -19,6 +20,8 @@
 import PlaylistSvg from "../../assets/icons/playlist.svg";
 import FolderSvg from "../../assets/icons/folder.svg";
 import SettingsSvg from "../../assets/icons/settings.svg";
+import SearchSvg from "../../assets/icons/search.svg";
+
 import { Routes } from "@/composables/enums";
 
 const menus = [
@@ -33,6 +36,14 @@ const menus = [
     params: { path: "$home" },
     icon: FolderSvg,
   },
+  {
+    name: "search",
+    route_name: Routes.search,
+    icon: SearchSvg,
+  },
+  {
+    separator: true,
+  },
   {
     name: "settings",
     route_name: Routes.settings,
@@ -44,8 +55,8 @@ const menus = [
 <style lang="scss">
 .side-nav-container {
   color: #fff;
-  margin: 1rem 0;
   text-transform: capitalize;
+  margin-top: 1rem;
 
   .nav-button {
     border-radius: $small;

src/components/LeftSidebar/nowPlaying.vue

@@ -1,13 +1,11 @@
 <template>
   <div class="now-playing-card t-center rounded">
-    <div>
-      <SongCard :track="currenttrack" />
-      <div class="l-track-time">
-        <span class="rounded">{{ formatSeconds(duration.current) }}</span
-        ><span class="rounded">{{ formatSeconds(duration.full) }}</span>
-      </div>
-      <Progress />
+    <SongCard :track="queue.currenttrack" />
+    <div class="l-track-time">
+      <span class="rounded">{{ formatSeconds(duration.current) }}</span
+      ><span class="rounded">{{ formatSeconds(duration.full) }}</span>
     </div>
+    <Progress />
     <HotKeys />
   </div>
 </template>
@@ -21,22 +19,20 @@ import Progress from "./NP/Progress.vue";
 import SongCard from "./NP/SongCard.vue";
 
 const queue = useQStore();
-const { currenttrack, duration } = queue;
+const { duration } = queue;
 </script>
 <style lang="scss">
 .now-playing-card {
   padding: 1rem;
   width: 100%;
   display: grid;
-  grid-template-rows: 1fr max-content;
-  position: relative;
+  grid-template-rows: 1fr max-content max-content max-content;
   gap: 1rem;
 
   .l-track-time {
     display: flex;
     justify-content: space-between;
     opacity: 0.8;
-    margin-top: $small;
 
     span {
       font-size: small;

src/components/RightSideBar/Search/ArtistGrid.vue

@@ -41,11 +41,6 @@ const search = useSearchStore();
 defineProps<{
   album_grid?: boolean;
 }>();
-
-// function loadMore() {
-//   search.updateLoadCounter("artists");
-//   search.loadArtists(search.loadCounter.artists);
-// }
 </script>
 
 <style lang="scss">
@@ -56,7 +51,7 @@ defineProps<{
 
 .search-results-grid {
   display: grid;
-  grid-template-columns: repeat(2, 1fr);
+  grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
   gap: 0.75rem;
 }
 </style>

src/components/RightSideBar/SearchInput.vue

@@ -29,7 +29,7 @@
 </template>
 
 <script setup lang="ts">
-import { onMounted, ref } from "vue";
+import { onMounted } from "vue";
 import QueueSvg from "../../assets/icons/queue.svg";
 import SearchSvg from "../../assets/icons/search.svg";
 import useSearchStore from "../../stores/search";

src/components/nav/NavBar.vue

@@ -2,7 +2,12 @@
   <div class="topnav">
     <div class="left">
       <NavButtons />
-      <div class="info">
+      <div
+        class="info"
+        :style="{
+          overflow: $route.name === Routes.search ? 'visible' : 'hidden',
+        }"
+      >
         <APTitle v-show="showAPTitle" />
         <SimpleTitle
           v-show="$route.name == Routes.playlists"
@@ -13,6 +18,7 @@
           :text="'Settings'"
         />
         <Folder v-show="$route.name == Routes.folder" :subPaths="subPaths" />
+        <SearchTitle v-show="$route.name == Routes.search" />
       </div>
     </div>
 
@@ -36,6 +42,7 @@ import APTitle from "./Titles/APTitle.vue";
 import useNavStore from "@/stores/nav";
 
 import { computed } from "@vue/reactivity";
+import SearchTitle from "./Titles/SearchTitle.vue";
 
 const route = useRoute();
 const nav = useNavStore();
@@ -89,8 +96,8 @@ watch(
     gap: 1rem;
 
     .info {
-      overflow: hidden;
       margin: auto 0;
+      // overflow: hidden;
 
       .title {
         font-size: 1.5rem;

src/components/nav/Titles/Folder.vue

@@ -37,11 +37,13 @@ onUpdated(() => {
 
 <style lang="scss">
 #folder-nav-title {
+  overflow: hidden;
   width: 100%;
 
   .folder {
     display: flex;
     gap: $small;
+    width: inherit;
 
     .playbtnrect {
       height: 2.25rem;
@@ -62,6 +64,7 @@ onUpdated(() => {
       height: 2.25rem;
       display: flex;
       align-items: center;
+      width: 100%;
       overflow: auto;
       padding-right: $smaller;
 
@@ -87,8 +90,7 @@ onUpdated(() => {
 
         .path {
           white-space: nowrap;
-          display: flex;
-          align-items: center;
+          margin: auto 0;
           cursor: default;
 
           .text {
@@ -97,11 +99,10 @@ onUpdated(() => {
           }
 
           &::before {
-            content: "";
-            height: $medium;
+            content: "/";
+            font-size: small;
             margin-right: $smaller;
-            border-right: solid 1px $white;
-            transform: rotate(20deg);
+            opacity: .25;
           }
 
           &:first-child {

src/components/nav/Titles/SearchTitle.vue

@@ -0,0 +1,26 @@
+<template>
+  <div class="nav-search-input">
+    <SearchInput />
+  </div>
+</template>
+
+<script setup lang="ts">
+import SearchInput from "@/components/RightSideBar/SearchInput.vue";
+</script>
+
+<style lang="scss">
+.nav-search-input {
+  #gsearch-input {
+    display: unset;
+
+    #ginner {
+      max-width: 30rem;
+      margin: 0 auto;
+    }
+
+    .buttons {
+      display: none;
+    }
+  }
+}
+</style>

src/components/shared/SongItem.vue

@@ -112,22 +112,6 @@ function showMenu(e: Event) {
   gap: 1rem;
   user-select: none;
 
-  // @include for-desktop-down {
-  //   grid-template-columns: 1.5rem 1.5fr 1fr 2.5rem;
-
-  //   .song-album {
-  //     display: none !important;
-  //   }
-
-  //   .song-duration {
-  //     display: none !important;
-  //   }
-  // }
-
-  // @include tablet-portrait {
-  //   grid-template-columns: 1.5rem 1.5fr 1fr 2.5rem;
-  // }
-
   &:hover {
     background-color: $gray4;
 
@@ -232,10 +216,6 @@ function showMenu(e: Event) {
 
   td:nth-child(2) {
     border-radius: 0 $small $small 0;
-
-    // @include phone-only {
-    //   border-radius: $small;
-    // }
   }
 }
 </style>

src/components/shared/TrackItem.vue

@@ -139,7 +139,7 @@ const playThis = (track: Track) => {
 
   .artist {
     font-size: small;
-    color: rgba(255, 255, 255, 0.637);
+    opacity: .67;
   }
 }
 </style>

src/composables/enums.ts

@@ -34,4 +34,5 @@ export enum Routes {
   album = "AlbumView",
   artists = "ArtistsView",
   settings = "SettingsView",
+  search = "SearchView"
 }

src/router/index.ts

@@ -11,6 +11,8 @@ import Home from "@/views/Home.vue";
 import PlaylistList from "@/views/PlaylistList.vue";
 import PlaylistView from "@/views/playlist/index.vue";
 import SettingsView from "@/views/SettingsView.vue";
+import SearchView from "@/views/Search.vue";
+
 import { createRouter, createWebHashHistory } from "vue-router";
 
 const routes = [
@@ -94,6 +96,11 @@ const routes = [
     name: "SettingsView",
     component: SettingsView,
   },
+  {
+    path: "/search",
+    name: "SearchView",
+    component: SearchView,
+  },
   {
     path: "/:pathMatch(.*)",
     component: () => import("../views/NotFound.vue"),

src/views/Search.vue

@@ -0,0 +1,25 @@
+<template>
+  <div class="search-view">
+    <div class="scrollable">
+      <Main />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import SearchInput from "@/components/RightSideBar/SearchInput.vue";
+import Main from "@/components/RightSideBar/Search/Main.vue";
+</script>
+
+<style lang="scss">
+.search-view {
+  height: 100%;
+  background-color: $black;
+  padding-top: 0;
+
+  .scrollable {
+    height: 100%;
+    overflow: auto;
+  }
+}
+</style>