Updates to downloader, audio track ordering, hard deleting from file system, UI updates and fixes

components/app/Appbar.vue

@@ -9,10 +9,10 @@
       </a>
       <div v-if="user">
         <div class="px-4 py-2 bg-bg bg-opacity-30 rounded-md flex items-center" @click="clickShowLibraryModal">
-          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+          <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4m0 5c0 2.21-3.582 4-8 4s-8-1.79-8-4" />
           </svg>
-          <p class="text-lg font-book leading-4 ml-2">{{ currentLibraryName }}</p>
+          <p class="text-base font-book leading-4 ml-2">{{ currentLibraryName }}</p>
         </div>
       </div>
       <div class="flex-grow" />

components/app/AudioPlayerContainer.vue

@@ -166,12 +166,13 @@ export default {
       }
     },
     async playLibraryItem(libraryItemId) {
+      console.log('Called playLibraryItem', libraryItemId)
       AbsAudioPlayer.prepareLibraryItem({ libraryItemId, playWhenReady: true })
         .then((data) => {
-          console.log('TEST library item play response', JSON.stringify(data))
+          console.log('Library item play response', JSON.stringify(data))
         })
         .catch((error) => {
-          console.error('TEST failed', error)
+          console.error('Failed', error)
         })
     }
   },

components/app/SideDrawer.vue

@@ -8,9 +8,10 @@
           <strong>{{ username }}</strong>
         </p>
       </div>
+
       <div class="w-full overflow-y-auto">
         <template v-for="item in navItems">
-          <nuxt-link :to="item.to" :key="item.text" class="w-full hover:bg-bg hover:bg-opacity-60 flex items-center py-3 px-6 text-gray-300">
+          <nuxt-link :to="item.to" :key="item.text" class="w-full hover:bg-bg hover:bg-opacity-60 flex items-center py-3 px-6 text-gray-300" :class="currentRoutePath.startsWith(item.to) ? 'bg-bg bg-opacity-60' : ''">
             <span class="text-lg" :class="item.iconOutlined ? 'material-icons-outlined' : 'material-icons'">{{ item.icon }}</span>
             <p class="pl-4">{{ item.text }}</p>
           </nuxt-link>
@@ -82,25 +83,9 @@ export default {
           icon: 'home',
           text: 'Home',
           to: '/bookshelf'
-        },
-        {
-          icon: 'person',
-          text: 'Account',
-          to: '/account'
-        },
-        {
-          icon: 'folder',
-          iconOutlined: true,
-          text: 'Local Media',
-          to: '/localMedia/folders'
         }
-        // {
-        //   icon: 'settings',
-        //   text: 'Settings',
-        //   to: '/config'
-        // }
       ]
-      if (!this.socketConnected) {
+      if (!this.serverConnectionConfig) {
         items = [
           {
             icon: 'cloud_off',
@@ -108,8 +93,24 @@ export default {
             to: '/connect'
           }
         ].concat(items)
+      } else {
+        items.push({
+          icon: 'person',
+          text: 'Account',
+          to: '/account'
+        })
       }
+
+      items.push({
+        icon: 'folder',
+        iconOutlined: true,
+        text: 'Local Media',
+        to: '/localMedia/folders'
+      })
       return items
+    },
+    currentRoutePath() {
+      return this.$route.path
     }
   },
   methods: {

components/modals/Dialog.vue

@@ -0,0 +1,55 @@
+<template>
+  <modals-modal v-model="show" :width="300" height="100%">
+    <template #outer>
+      <div v-if="title" class="absolute top-7 left-4 z-40" style="max-width: 80%">
+        <p class="text-white text-lg truncate">{{ title }}</p>
+      </div>
+    </template>
+
+    <div class="w-full h-full overflow-hidden absolute top-0 left-0 flex items-center justify-center" @click="show = false">
+      <div ref="container" class="w-full overflow-x-hidden overflow-y-auto bg-primary rounded-lg border border-white border-opacity-20" style="max-height: 75%" @click.stop>
+        <ul class="h-full w-full" role="listbox" aria-labelledby="listbox-label">
+          <template v-for="item in items">
+            <li :key="item.value" class="text-gray-50 select-none relative py-4 cursor-pointer hover:bg-black-400" role="option" @click="clickedOption(item.value)">
+              <div class="relative flex items-center px-3">
+                <p class="font-normal block truncate text-base text-white text-opacity-80">{{ item.text }}</p>
+              </div>
+            </li>
+          </template>
+        </ul>
+      </div>
+    </div>
+  </modals-modal>
+</template>
+
+<script>
+export default {
+  props: {
+    value: Boolean,
+    title: String,
+    items: {
+      type: Array,
+      default: () => []
+    }
+  },
+  data() {
+    return {}
+  },
+  computed: {
+    show: {
+      get() {
+        return this.value
+      },
+      set(val) {
+        this.$emit('input', val)
+      }
+    }
+  },
+  methods: {
+    clickedOption(action) {
+      this.$emit('action', action)
+    }
+  },
+  mounted() {}
+}
+</script>

components/ui/TextInputWithLabel.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="w-full">
-    <p class="px-1 pb-1 text-sm font-semibold">{{ label }}</p>
-    <ui-text-input v-model="inputValue" :disabled="disabled" :type="type" class="w-full px-4 py-2" />
+    <p class="pb-0.5 text-sm font-semibold">{{ label }}</p>
+    <ui-text-input v-model="inputValue" :disabled="disabled" :type="type" text-size="base" class="w-full" />
   </div>
 </template>