Delete remote playlists

+ minor ui changes

src/components/Genres.vue

@@ -138,6 +138,7 @@ onMounted(get);
   font-size: 1rem;
   font-weight: bold;
   letter-spacing: 0.125rem;
+  line-break: anywhere;
   background-color: var(--color-background-mute);
   color: var(--btn-color);
   transition: background-color 0.1s ease;
@@ -153,4 +154,9 @@ onMounted(get);
   text-align: center;
   text-transform: capitalize;
 }
+@media (max-width: 600px) {
+  .btn-grid {
+    grid-template-columns: repeat(3, 1fr);
+  }
+}
 </style>

src/components/NewPlaylist.vue

@@ -473,7 +473,7 @@ onMounted(async () => {
 .grid {
   display: grid;
   width: fit-content;
-  gap: 2rem;
+  gap: 1rem;
   grid-auto-rows: 10rem;
   margin: 0 auto;
 }
@@ -553,4 +553,9 @@ input[type='file']::file-selector-button {
   display: block;
   text-align: center;
 }
+@media (min-width: 400px) {
+  .grid {
+    grid-template-columns: 1fr 1fr;
+  }
+}
 </style>

src/components/Search.vue

@@ -5,8 +5,12 @@ import Btn from './Btn.vue';
 import SongItem from './SongItem.vue';
 import AlbumItem from './AlbumItem.vue';
 
-import { getJsonPiped, getPipedQuery } from '@/scripts/fetch.js';
-import { useRoute, useWrap, useShare } from '@/scripts/util.js';
+import {
+  getJsonPiped,
+  getPipedQuery,
+  useAuthRemovePlaylist,
+} from '@/scripts/fetch.js';
+import { useVerifyAuth, useRoute, useWrap, useShare } from '@/scripts/util.js';
 import { useCreatePlaylist, useRemovePlaylist } from '@/scripts/db.js';
 
 import { useResults, useArtist } from '@/stores/results.js';
@@ -103,6 +107,20 @@ const shuffleAdd = () => {
       });
     }
   },
+  removePlaylist = async id => {
+    if (!id && !prompt('Confirm?')) return;
+
+    if (useVerifyAuth(id)) {
+      const { message } = await useAuthRemovePlaylist(id);
+      if (message != 'ok') {
+        alert(message);
+        return;
+      }
+    } else useRemovePlaylist(id);
+
+    useRoute('/library');
+    nav.state.page = 'library';
+  },
   getSearch = q => {
     if (q) {
       const pq = useWrap(q);
@@ -252,12 +270,10 @@ onDeactivated(() => {
               @click="shuffleAdd"></button>
 
             <button
-              v-if="results.items?.songs?.title.startsWith('Local • ')"
+              v-if="results.items?.songs?.items?.[0]?.playlistId"
               class="bi bi-trash3 clickable"
               @click="
-                useRemovePlaylist(
-                  results.items?.songs?.title?.replace('Local • ', ''),
-                )
+                removePlaylist(results.items?.songs?.items?.[0]?.playlistId)
               "></button>
           </div>
         </Transition>

src/components/SongItem.vue

@@ -105,9 +105,9 @@ onMounted(() => {
     <span class="flex content">
       <h4>{{ title }}</h4>
       <a
+        class="ign"
         :href="channel"
-        @click.prevent="artist.getArtist(channel.replace('/channel/', ''))"
-        class="ign">
+        @click.prevent="artist.getArtist(channel.replace('/channel/', ''))">
         <i class="ign">{{ author ? author.replaceAll(' - Topic', '') : '' }}</i>
       </a>
     </span>

src/components/StatusBar.vue

@@ -308,7 +308,7 @@ async function Like() {
   border-top: 0.25rem solid var(--color-foreground);
   background: var(--color-background);
   min-height: 15vh;
-  z-index: 2;
+  z-index: 999;
 }
 
 .statusbar-progress-container,