reformat, add data refresh button

frontend/src/components/ActiveSearchList.vue

@@ -28,7 +28,6 @@ function highlightText(text: string, searchterm: string) {
 
 <template>
   <div class="w-full h-full text-xs">
-    
     <div v-if="props.artist && props.artist.length > 0" class="mb-4">
       <h2 class="px-4 py-2 font-semibold text-lg uppercase tracking-wider action">Artists</h2>
       <ul class="space-y-1 px-2">
@@ -48,15 +47,18 @@ function highlightText(text: string, searchterm: string) {
 
     <div v-if="props.songs && props.songs.length > 0">
       <h2 class="px-4 py-2 font-semibold text-lg uppercase tracking-wider action">Songs</h2>
-      <ul class="space-y-1 px-2 pb-20"> <li v-for="(song, index) in props.songs" :key="index">
+      <ul class="space-y-1 px-2 pb-20">
+        <li v-for="(song, index) in props.songs" :key="index">
           <button
             @click="playSong(song.hash)"
             class="flex items-center p-2 rounded-xl w-full text-left transition-colors"
           >
             <img
-              :src="song.previewimage 
+              :src="
-                ? `${userStore.cloudflareUrl.value}${song.previewimage}?h=120&w=120` 
+                song.previewimage
-                : '/default-bg.png'"
+                  ? `${userStore.cloudflareUrl.value}${song.previewimage}?h=120&w=120`
+                  : '/default-bg.png'
+              "
               class="rounded-lg w-12 h-12 object-cover shrink-0"
               loading="lazy"
             />

frontend/src/components/ActiveSearchSkeleton.vue

@@ -1,6 +1,5 @@
 <template>
   <div class="w-full h-full text-xs animate-pulse">
-    
     <div class="mb-4">
       <div class="my-2 ml-4 rounded w-24 h-6 action"></div>
       <ul class="space-y-1 px-2">
@@ -28,7 +27,6 @@
         </li>
       </ul>
     </div>
-    
   </div>
 </template>
 
@@ -38,10 +36,21 @@
 }
 
 @keyframes pulse {
-  0%, 100% { opacity: 1; }
+  0%,
-  50% { opacity: 0.4; }
+  100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.4;
+  }
 }
 
-.info { background-color: currentColor; opacity: 0.1; }
+.info {
-.action { background-color: currentColor; opacity: 0.05; }
+  background-color: currentColor;
+  opacity: 0.1;
+}
+.action {
+  background-color: currentColor;
+  opacity: 0.05;
+}
 </style>

frontend/src/components/CollectionItem.vue

@@ -85,12 +85,14 @@ onBeforeUnmount(() => {
         <hr />
       </div>
     </header>
-    <div class="gap-2 grid grid-cols-2 lg:grid-cols-3 2xl:grid-cols-4 p-2 overflow-y-auto collection-container song-item-wrapper coll-container">
+    <div
+      class="gap-2 grid grid-cols-2 lg:grid-cols-3 2xl:grid-cols-4 p-2 overflow-y-auto collection-container song-item-wrapper coll-container"
+    >
       <SongItem v-for="(song, index) in songs" :key="index" :song="song" />
 
-    <template v-if="loading">
+      <template v-if="loading">
-      <SongItemSkeleton v-for="i in 10" :key="'skeleton-' + i" />
+        <SongItemSkeleton v-for="i in 10" :key="'skeleton-' + i" />
-    </template>
+      </template>
     </div>
   </main>
 </template>

frontend/src/components/CollectionListItem.vue

@@ -8,12 +8,13 @@ const props = defineProps<{ collection: CollectionPreview }>();
 
 <template>
   <RouterLink :to="'/collection/' + props.collection.index" class="w-full">
-    <div class="flex items-center border rounded-lg h-24 overflow-hidden bordercolor">     <img
+    <div class="flex items-center border rounded-lg h-24 overflow-hidden bordercolor">
+      <img
         class="p-1 rounded-lg w-24 h-24"
         :src="encodeURI(`${userStore.cloudflareUrl.value}${props.collection.previewimage}`)"
         loading="lazy"
       />
-        <div class="flex flex-col overflow-hidden text-left">
+      <div class="flex flex-col overflow-hidden text-left">
         <h3 class="overflow-hidden text-ellipsis whitespace-nowrap info">{{ props.collection.name }}</h3>
         <h5 class="text-sm info">{{ props.collection.length }} Songs</h5>
       </div>

frontend/src/components/SongItem.vue

@@ -25,9 +25,11 @@ function updateSong() {
   >
     <img
       class="p-1 rounded-lg w-14 md:w-24 h-16 md:h-24 object-cover shrink-0"
-      :src="props.song?.previewimage 
+      :src="
-        ? encodeURI(`${userStore.cloudflareUrl.value}${props.song.previewimage}?h=56&w=56`) 
+        props.song?.previewimage
-        : '/default-bg.png'"
+          ? encodeURI(`${userStore.cloudflareUrl.value}${props.song.previewimage}?h=56&w=56`)
+          : '/default-bg.png'
+      "
       loading="lazy"
     />
 

frontend/src/views/CollectionView.vue

@@ -66,17 +66,12 @@ onMounted(async () => {
 
 <template>
   <main class="flex flex-col w-full h-full overflow-hidden">
-    
     <div
       ref="containerRef"
       class="flex-1 content-start gap-2 grid grid-cols-1 md:grid-cols-3 lg:grid-cols-4 p-2 overflow-y-auto"
-      style="min-height: 0;" 
+      style="min-height: 0"
     >
-      <CollectionListItem 
+      <CollectionListItem v-for="(collection, index) in collections" :key="index" :collection="collection" />
-        v-for="(collection, index) in collections" 
-        :key="index" 
-        :collection="collection" 
-      />
 
       <template v-if="isLoading">
         <CollectionListItemSkeleton v-for="i in 12" :key="'skeleton-' + i" />

frontend/src/views/MeView.vue

@@ -120,15 +120,18 @@ function reset() {
         <button @click="copyToClipboard" class="bg-white/5 hover:bg-white/10 p-2 border bordercolor" title="Copy URL">
           <i class="fa-solid fa-copy"></i>
         </button>
-        <button @click="pasteFromClipboard" class="bg-white/5 hover:bg-white/10 p-2 border rounded-r-lg text-yellow-500 bordercolor" title="Paste URL">
+        <button
+          @click="pasteFromClipboard"
+          class="bg-white/5 hover:bg-white/10 p-2 border rounded-r-lg text-yellow-500 bordercolor"
+          title="Paste URL"
+        >
           <i class="fa-solid fa-paste"></i>
         </button>
         <div
           v-if="isHealthy !== null"
           class="self-center rounded-full w-2 h-2"
           :class="isHealthy ? 'bg-green-500 shadow-[0_0_8px_green]' : 'bg-red-500 shadow-[0_0_8px_red]'"
-        >
+        ></div>
-      </div>
       </div>
     </div>
 
@@ -137,6 +140,7 @@ function reset() {
     <button v-if="!userStore.user.value" @click="getMe" class="mx-4 p-0.5 border rounded-lg bordercolor">
       {{ loginStatus }}
     </button>
+    <button v-else @click="getMe" class="mx-4 p-0.5 border rounded-lg bordercolor">Refresh</button>
 
     <div class="flex flex-col justify-around p-10 w-full">
       <div class="flex flex-1 justify-between">

frontend/src/views/SearchView.vue

@@ -60,7 +60,7 @@ async function fetchSearchArtist(artist: string) {
     songs.value = data.map((song: Song) => ({
       ...song,
       previewimage: `${userStore.cloudflareUrl.value}/api/v1/images/${song.previewimage}`,
-      url: `${userStore.cloudflareUrl.value}/api/v1/audio/${song.url}`
+      url: `${userStore.cloudflareUrl.value}/api/v1/audio/${song.url}`,
     }));
 
     router.replace({ query: { ...route.query, a: artist } });
@@ -88,9 +88,12 @@ watch(searchInput, (val) => {
   }
 });
 
-watch(() => route.query.a, (newArtist) => {
+watch(
-  if (newArtist) fetchSearchArtist(newArtist as string);
+  () => route.query.a,
-});
+  (newArtist) => {
+    if (newArtist) fetchSearchArtist(newArtist as string);
+  },
+);
 
 onMounted(() => {
   if (route.query.a) fetchSearchArtist(route.query.a as string);
@@ -128,35 +131,24 @@ onMounted(() => {
     </div>
 
     <div class="relative flex-1 overflow-y-auto">
-      
       <div
         v-if="showSearch && (activesongs.length || artists.length || isLoading)"
         class="z-20 absolute backdrop-blur-xl w-full min-h-full"
       >
         <ActiveSearchSkeleton v-if="isLoading" />
 
-        <ActiveSearchList 
+        <ActiveSearchList v-else :songs="activesongs" :artist="artists" :search="searchInput" />
-          v-else 
-          :songs="activesongs" 
-          :artist="artists" 
-          :search="searchInput" 
-        />
       </div>
 
-        <template v-else>
+      <template v-else>
-          <SongItem 
+        <SongItem v-for="(song, index) in songs" :key="song.hash || index" :song="song" class="song-render-node" />
-            v-for="(song, index) in songs" 
+      </template>
-            :key="song.hash || index" 
-            :song="song"
-            class="song-render-node"
-          />
-        </template>
 
-        <div v-if="!isLoading && songs.length === 0 && !showSearch" class="col-span-full opacity-30 py-20 text-center">
+      <div v-if="!isLoading && songs.length === 0 && !showSearch" class="col-span-full opacity-30 py-20 text-center">
-          <i class="mb-4 text-6xl fa-solid fa-music"></i>
+        <i class="mb-4 text-6xl fa-solid fa-music"></i>
-          <p>Find your favorite music</p>
+        <p>Find your favorite music</p>
-        </div>
       </div>
+    </div>
   </main>
 </template>