try an experimental search page redesign

src/views/search/albums.vue

@@ -0,0 +1,11 @@
+<template>
+  <div class="search-albums-view"></div>
+</template>
+
+<script setup lang="ts"></script>
+
+<style lang="scss">
+.search-albums-view {
+  height: 100%;
+}
+</style>

src/views/search/artists.vue

@@ -0,0 +1,11 @@
+<template>
+  <div class="search-artists-view"></div>
+</template>
+
+<script setup lang="ts"></script>
+
+<style lang="scss">
+.search-artists-view {
+  height: 100%;
+}
+</style>

src/views/search/folders.vue

@@ -0,0 +1,11 @@
+<template>
+  <div class="search-folders-view"></div>
+</template>
+
+<script setup lang="ts"></script>
+
+<style lang="scss">
+.search-folders-view {
+  height: 100%;
+}
+</style>

src/views/search/main.vue

@@ -0,0 +1,66 @@
+<template>
+  <div class="search-view">
+    <div class="tabs">
+      <button v-for="page in pages">{{ page }}</button>
+    </div>
+    <div class="noscroll">
+      <component :is="getComponent()" />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useRoute } from "vue-router";
+
+import TracksPage from "./tracks.vue";
+import AlbumPage from "./albums.vue";
+import ArtistPage from "./artists.vue";
+
+enum pages {
+  tracks = "tracks",
+  albums = "albums",
+  artists = "artists",
+}
+
+const route = useRoute();
+const page = route.params.page as string;
+
+function getComponent() {
+  switch (page) {
+    case pages.tracks:
+      return TracksPage;
+    case pages.albums:
+      return AlbumPage;
+
+    case pages.artists:
+      return ArtistPage;
+
+    default:
+      return TracksPage;
+  }
+}
+</script>
+
+<style lang="scss">
+.search-view {
+  height: calc(100% - 1rem);
+  width: calc(100% - $small);
+  display: grid;
+  grid-template-rows: max-content 1fr;
+
+  .tabs {
+    width: fit-content;
+    display: flex;
+    gap: 1rem;
+    // margin: 0 auto;
+    margin-bottom: 1rem;
+
+    & > * {
+      background-color: $gray4;
+      padding: $small 1rem;
+      border-radius: $small;
+      text-transform: capitalize;
+    }
+  }
+}
+</style>

src/views/search/tracks.vue

@@ -0,0 +1,30 @@
+<template>
+  <div class="search-tracks-view">
+    <div class="noscroll">
+      <Layout :no_header="true" :tracks="search.tracks.value" />
+    </div>
+    <button @click.prevent="search.loadTracks">Load More</button>
+  </div>
+</template>
+
+<script setup lang="ts">
+import Layout from "@/layouts/HeaderAndVList.vue";
+import useSearchStore from "@/stores/search";
+
+const search = useSearchStore();
+</script>
+
+<style lang="scss">
+.search-tracks-view {
+  height: 100%;
+
+  display: grid;
+  grid-template-rows: 1fr max-content;
+  gap: 1rem;
+
+  button {
+    width: fit-content;
+    margin: 0 auto;
+  }
+}
+</style>