fix alligment, remove scrollbars, clean up layout to support desktop properly

frontend/src/views/CollectionView.vue

@@ -19,9 +19,7 @@ const fetchCollections = async () => {
   isLoading.value = true;
 
   const response = await api.musicBackendCollections(offset.value, limit.value);
-  console.log(response.data.songs.length)
   let songs = mapApiToCollectionPreview(response.data.songs)
-  console.log(songs)
   collections.value = [...collections.value, ...songs];
   offset.value += limit.value;
 
@@ -48,7 +46,7 @@ onMounted(async () => {
 </script>
 
 <template>
-  <main class="flex-1 text-center flex flex-col h-full overflow-scroll">
+  <main class="flex-1 text-center flex flex-col h-full overflow-y-scroll">
     <div class="flex flex-col overflow-scroll collection-container">
       <CollectionListItem v-for="(collection, index) in collections" :key="index" :collection="collection" />
     </div>

frontend/src/views/FavouritView.vue

@@ -3,7 +3,7 @@ import SongItem from '../components/SongItem.vue'
 </script>
 
 <template>
-  <main class="flex-1 flex-col overflow-scroll">
+  <main class="flex-1 flex-col overflow-y-scroll">
     <p>Coming Soon...</p>
   </main>
 </template>

frontend/src/views/HistoryView.vue

@@ -0,0 +1,21 @@
+<template>
+
+  <main class="flex-1 flex-col overflow-hidden">
+    <div class="flex-1 flex-col h-full overflow-y-scroll song-container">
+        <p class="p-1 rounded-full backdrop--light shadow-xl text-center">History</p>
+        <p v-if="songs.length === 0">No songs found</p>
+      <SongItem v-for="(song, index) in songs" :key="song.hash" :song="song" />
+    </div>
+  </main>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import SongItem from '../components/SongItem.vue'
+
+import { useAudio } from '@/composables/useAudio';
+const audioStore = useAudio();
+
+const songs = computed(() => Array.from(audioStore.recentlyPlayed.value?.values()).reverse() || [])
+
+</script>

frontend/src/views/MeView.vue

@@ -32,8 +32,6 @@ function save(bg: string | null, main: string | null, info: string | null, borde
   localStorage.setItem('actionColor', main ?? actionColor.value);
   localStorage.setItem('infoColor', info ?? infoColor.value);
   localStorage.setItem('borderColor', border ?? borderColor.value);
-
-  console.log("bg", bgColor.value, "action:", actionColor.value, "info", infoColor.value, "border", borderColor.value)
 }
 
 async function getMe() {
@@ -44,12 +42,10 @@ async function getMe() {
     console.log("redirect detected");
   }
 
-  console.log(data)
   if (data.id === null || data.id === undefined || Object.keys(data).length === 0) {
     return
   }
 
-  console.log("active user: ", data.name)
   userStore.setUser(data);
   userStore.baseUrl.value(data.endpoint);
 
@@ -86,7 +82,7 @@ function reset() {
     </div>
   </header>
 
-  <main class="flex-1 flex flex-col overflow-scroll">
+  <main class="flex-1 flex flex-col h-full overflow-y-scroll">
     <input @change="update" type="text" id="url-input" :value="userStore.baseUrl.value" disabled />
     <br>
     <button v-if="!userStore.user.value" @click="getMe" class="border bordercolor rounded-lg p-0.5">{{ loginStatus }}</button>
@@ -128,10 +124,9 @@ function reset() {
           class="appearance-none w-8 h-8 border-2 p-0 overflow-hidden cursor-pointer">
       </div>
     </div>
-
     <div class="w-full p-2">
       <p>Current</p>
-      <SongItem :song="audioStore.currentSong" />
+      <SongItem :song="audioStore.currentSong.value" />
     </div>
 
     <div class="w-full p-2 bg-black">
@@ -139,14 +134,14 @@ function reset() {
           class="border rounded-lg p-0.5" @click="save('#000000', '#5e2d8f', '#57db5d', '#b3002d')">Choose
         </button>
       </p>
-      <SongItem :song="audioStore.currentSong" :border="'#b3002d'" :action="'#5e2d8f'" :info="'#57db5d'" />
+      <SongItem :song="audioStore.currentSong.value" :border="'#b3002d'" :action="'#5e2d8f'" :info="'#57db5d'" />
     </div>
     <div class="w-full p-2" style="background-color: #1c1719">
       <p class="flex-1 flex justify-between" style=" color : #ec4889">Default<button style="border-color : #ec4889"
           class="border rounded-lg p-0.5" @click="save('#1c1719', '#eab308', '#ec4889', '#ec4889')">Choose
         </button>
       </p>
-      <SongItem :song="audioStore.currentSong" :border="'#ec4889'" :info="'#ec4889'" :action="'#eab308'" />
+      <SongItem :song="audioStore.currentSong.value" :border="'#ec4889'" :info="'#ec4889'" :action="'#eab308'" />
     </div>
 
     <div class="w-full p-2" style="background-color: #ff4c4c">
@@ -155,7 +150,7 @@ function reset() {
         <button style="border-color: #ffffff" class="border rounded-lg p-0.5"
           @click="save('#ff4c4c', '#ffcc00', '#ffffff', '#ffffff')">Choose</button>
       </p>
-      <SongItem :song="audioStore.currentSong" :border="'#ffffff'" :info="'#ffffff'" :action="'#ffcc00'" />
+      <SongItem :song="audioStore.currentSong.value" :border="'#ffffff'" :info="'#ffffff'" :action="'#ffcc00'" />
     </div>
 
     <div class="w-full p-2" style="background-color: #003d00">
@@ -164,7 +159,7 @@ function reset() {
         <button style="border-color: #e0f8d8" class="border rounded-lg p-0.5"
           @click="save('#003d00', '#a8d5a2', '#e0f8d8', '#e0f8d8')">Choose</button>
       </p>
-      <SongItem :song="audioStore.currentSong" :border="'#e0f8d8'" :info="'#e0f8d8'" :action="'#a8d5a2'" />
+      <SongItem :song="audioStore.currentSong.value" :border="'#e0f8d8'" :info="'#e0f8d8'" :action="'#a8d5a2'" />
     </div>
 
     <div class="w-full p-2" style="background-color: #00274d">
@@ -173,7 +168,7 @@ function reset() {
         <button style="border-color: #00ffff" class="border rounded-lg p-0.5"
           @click="save('#00274d', '#0099ff', '#00ffff', '#00ffff')">Choose</button>
       </p>
-      <SongItem :song="audioStore.currentSong" :border="'#00ffff'" :info="'#00ffff'" :action="'#0099ff'" />
+      <SongItem :song="audioStore.currentSong.value" :border="'#00ffff'" :info="'#00ffff'" :action="'#0099ff'" />
     </div>
 
   </main>

frontend/src/views/MenuView.vue

@@ -10,10 +10,10 @@ function isActive(path: string) {
 </script>
 
 <template>
-  <main class="flex-1 flex flex-col h-full overflow-y-scroll">
+  <main class="flex-1 flex flex-col h-full overflow-y-scroll md:overflow-hidden">
     <header v-show="true">
       <div class="wrapper">
-        <nav class="flex justify-start my-2 mx-1 space-x-1 overflow-x-scroll flex-nowrap text-nowrap">
+        <nav class="flex justify-start my-2 mx-1 space-x-1 overflow-y-scroll flex-nowrap text-nowrap">
           <RouterLink class="p-1 rounded-full backdrop--light shadow-xl" to="/"><i class="fa-solid fa-arrow-left"></i>
           </RouterLink>
           <RouterLink :class="`p-1 rounded-full backdrop--light shadow-xl ${isActive('/')}`" to="/menu/recent">Recently

frontend/src/views/NowPlayingView.vue

@@ -74,8 +74,9 @@ const bgimg = computed(() => audioStore.currentSong.value?.previewimage || '/def
       <input
         class="w-full appearance-none h-2 rounded-full bg-yellow-200 bg-opacity-20 accent-yellow-600 outline-none"
         type="range"
-        @change="audioStore.updateTime"
+        @input="event => audioStore.updateTime(Number(event.target.value))"
         :max="100"
+        step="0.001"
         :value="audioStore.percentDone.value"
       />
     </div>

frontend/src/views/RecentView.vue

@@ -2,7 +2,7 @@
 import SongItem from '../components/SongItem.vue'
 
 import { type Song, type CollectionPreview, mapApiToSongs } from '../script/types'
-import { ref, onMounted } from 'vue'
+import { ref, onMounted, nextTick } from 'vue'
 import { useRoute } from 'vue-router';
 import { useAudio } from '@/composables/useAudio';
 import { useUser } from '@/composables/useUser';
@@ -16,6 +16,7 @@ const api = musicApi()
 
 const songs = ref<Song[]>([]);
 const name = ref('name');
+const containerRef = ref<HTMLElement | null>(null);
 
 const limit = ref(100);
 const offset = ref(0);
@@ -46,7 +47,9 @@ const fetchRecent = async () => {
 onMounted(async () => {
   await fetchRecent();
 
-  const container = document.querySelector('.song-container');
+  await nextTick(); 
+
+  const container = containerRef.value;
   if (container) {
     container.addEventListener('scroll', async () => {
       const scrollTop = container.scrollTop;
@@ -64,11 +67,10 @@ onMounted(async () => {
 </script>
 
 <template>
-
-  <main class="flex-1 flex-col overflow-scroll">
-    <div class="flex-1 flex-col h-full overflow-scroll song-container">
-
+    <div
+      ref="containerRef"
+      class="flex-1 flex-col  overflow-y-scroll song-container"
+    >
       <SongItem v-for="(song, index) in songs" :key="index" :song="song" />
     </div>
-  </main>
 </template>

frontend/src/views/SearchView.vue

@@ -108,19 +108,19 @@ watch(searchInput, async (val) => {
     </div>
   </header>
 
-  <main class="flex flex-col flex-1 w-full h-full overflow-scroll">
+  <main class="flex flex-col flex-1 w-full h-full">
     <div class="relative">
       <input
         v-model="searchInput"
         placeholder="Type to Search..."
-        class="flex-1 max-h-12 search border bordercolor accent-pink-800 bg-yellow-300 bg-opacity-20 rounded-lg m-2 p-2"
+        class="w-full flex-1 max-h-12 search border bordercolor accent-pink-800 bg-yellow-300 bg-opacity-20 rounded-lg p-2"
       />
-      <div class="absolute h-16 right-4 flex flex-col justify-center cursor-pointer" @click="emptySearch">
+      <div class="absolute top-4 right-4 flex flex-col justify-center cursor-pointer" @click="emptySearch">
         <i class="far fa-times-circle opacity-50"></i>
       </div>
     </div>
 
-    <div class="relative flex flex-col w-full h-full overflow-scroll">
+    <div class="relative flex flex-col w-full h-full overflow-y-scroll">
       <div v-if="showSearch" class="absolute w-full text-center search-recommendations z-20">
         <ActiveSearchList :songs="activesongs" :artist="artists" :search="searchTerm" />
       </div>