feat(frontend): work through the dashboard design audit

reposilite-frontend/src/components/browser/DeleteEntryModal.vue

@@ -19,7 +19,7 @@ import { VueFinalModal } from 'vue-final-modal'
 import '@vueform/toggle/themes/default.css'
 import CloseIcon from '../icons/CloseIcon.vue'
 import { useSession } from '../../store/session'
-import { createToast } from 'mosha-vue-toastify'
+import { createErrorToast, errorMessage } from '../../helpers/toast'
 import { computed } from 'vue'
 import useQualifier from '../../store/qualifier'
 import { property } from '../../helpers/vue-extensions'
@@ -35,9 +35,7 @@ const { refreshQualifier } = useQualifier()
 const deleteEntry = ({ path, file }) => {
   client.value.maven.delete(path + '/' + file)
     .then(() => refreshQualifier())
-    .catch(error => createToast(`Cannot delete file - ${error.response.status}: ${error.response.data.message}`, {
-      type: 'danger'
-    }))
+    .catch(error => createErrorToast(`Cannot delete file: ${errorMessage(error)}`))
 }
 
 const deleteAndClose = () => {

reposilite-frontend/src/components/browser/FileList.vue

@@ -17,7 +17,7 @@
 <script setup lang="jsx">
 import download from 'downloadjs'
 import { useRoute } from 'vue-router'
-import { createToast } from 'mosha-vue-toastify'
+import { createErrorToast, errorMessage } from '../../helpers/toast'
 import { createURL } from '../../store/client'
 import { useSession } from '../../store/session'
 import ListEntry from './DetailedListEntry.vue'
@@ -49,9 +49,7 @@ const { client } = useSession()
 const downloadHandler = (path, name) => {
   client.value.maven.download(path.substring(1) + '/' + name)
     .then(response => download(response.data, name, response.headers['content-type']))
-    .catch(error => createToast(`Cannot download file - ${error.response.status}: ${error.response.data.message}`, {
-      type: 'danger'
-    }))
+    .catch(error => createErrorToast(`Cannot download file: ${errorMessage(error)}`))
 }
 
 const deleteModalValue = ref()

reposilite-frontend/src/components/browser/FileUpload.vue

@@ -100,34 +100,43 @@ const uploadFiles = () => {
 
 <template>
   <div id="browser-upload">
-    <div 
-      :class="[ isEnabled ? 'rounded-t-3xl rounded-b' : 'rounded-3xl' ]"
+    <!--
+      Set apart from the entries above it on purpose. This used to be a rounded pill of the
+      same size and shape as a directory row, separated from real content only by the colour
+      of a dot, so an action sat in the middle of a list of things.
+    -->
+    <p class="pt-6 pb-2 text-xs font-medium uppercase tracking-wide text-gray-500 dark:text-gray-400">
+      Upload to <span class="normal-case">{{ '/' + destination }}</span>
+    </p>
+    <div
       class="
-        border border-dashed mt-1.5 cursor-pointer
-        bg-gray-50 border-gray-300 hover:transition-colors hover:duration-200 hover:bg-white
-        dark:bg-black dark:border-gray-800 dark:hover:transition-colors dark:hover:duration-400 dark:hover:bg-gray-900
+        mt-1.5 cursor-pointer rounded-lg border-2 border-dashed
+        border-gray-300 bg-gray-50 hover:transition-colors hover:duration-200 hover:bg-white
+        dark:border-gray-700 dark:bg-black dark:hover:transition-colors dark:hover:bg-gray-900
       "
     >
       <FileUpload
-        class="btn btn-primary flex text-left"
+        class="flex text-left"
         post-action="/upload/post"
         :multiple="true"
         :drop="true"
         :drop-directory="true"
         v-model="files"
         ref="upload"
       >
-        <div class="my-3 px-6">
-          <div v-if="isEnabled" class="py-1">
-            <p class="font-bold">
-              Deploy selected files to
-              <span class="text-gray-500">{{'/' + destination}}</span>
+        <div class="w-full px-6 py-6 text-center">
+          <p v-if="isEnabled" class="font-bold">
+            Deploy selected files to
+            <span class="text-gray-500">{{ '/' + destination }}</span>
+          </p>
+          <template v-else>
+            <p class="font-semibold text-gray-700 dark:text-gray-200">
+              Drop files here, or click to choose them
             </p>
-          </div>
-          <div v-else class="flex">
-            <span class="text-xm pt-[0.4rem]">🟣</span>
-            <span class="font-bold px-5">Select files</span>
-          </div>
+            <p class="pt-1 text-xs text-gray-500 dark:text-gray-400">
+              Whole directories work too. Nothing is sent until you confirm.
+            </p>
+          </template>
         </div>
       </FileUpload>
       <div v-if="isEnabled">

reposilite-frontend/src/components/card/CardMenu.vue

@@ -16,7 +16,6 @@
 
 <script setup>
 import { ref, watchEffect } from 'vue'
-import DownIcon from '../icons/DownIcon.vue'
 
 defineProps({
   configurations: {
@@ -37,44 +36,29 @@ watchEffect(() => {
 
 const selectConfiguration = (configuration) =>
   selectedTab.value = configuration.name
-
-const dropdownOpen = ref(localStorage.getItem('dropdown-open') || false)
-watchEffect(() => localStorage.setItem('dropdown-open', dropdownOpen.value))
 </script>
 
+<!--
+  One row that scrolls sideways when it runs out of width, which is what the main navigation
+  does. There used to be a second implementation underneath: a dropdown that only appeared
+  below 640px, so the same choice was made two different ways depending on the window.
+  It also never reopened after a reload, because its open flag came back from localStorage
+  as the string "false", which is true.
+-->
 <template>
-  <div>
-    <div id="card-menu" class="flex mt-2 max-sm:hidden">
-      <div 
-        v-for="configuration in configurations" 
-        :key="configuration.name" 
+  <div id="card-menu" class="mt-2 overflow-x-auto">
+    <div class="flex flex-nowrap">
+      <button
+        v-for="configuration in configurations"
+        :key="configuration.name"
+        type="button"
+        class="shrink-0 grow cursor-pointer whitespace-nowrap border-b-2 border-transparent px-7 py-4 text-center"
+        :class="{ 'border-gray-800! dark:border-gray-100!': configuration.name === selectedTab }"
+        :aria-current="configuration.name === selectedTab ? 'true' : undefined"
         @click="selectConfiguration(configuration)"
-        class="py-4 px-7 flex-grow text-center border-b-2 cursor-pointer border-transparent"
-        :class="{ 'border-gray-800!': configuration.name === selectedTab }"
       >
         {{ configuration.name }}
-      </div>
-    </div>
-    <div class="hidden flex-col items-center mt-[24px] max-sm:flex">
-      <div
-        class="w-full box-border py-[5px] p-2 rounded-lg border-1 border-gray-200 dark:border-dark-300"
-        @click="dropdownOpen = !dropdownOpen"
-      >
-        {{ selectedTab }}
-        <div class="w-[20px] h-[25px] float-right m-auto flex items-center">
-          <DownIcon />
-        </div>
-      </div>
-      <ul v-if="!dropdownOpen" class="rounded-lg w-full box-border p-2 bg-gray-100 dark:bg-dark-600">
-        <li
-            v-for="configuration in configurations"
-            :key="configuration.name"
-            @click="selectConfiguration(configuration); dropdownOpen = !dropdownOpen"
-            class="dropdown py-1"
-            :class="{ 'hidden': configuration.name === selectedTab }">
-          {{ configuration.name }}
-        </li>
-      </ul>
+      </button>
     </div>
   </div>
-</template>
+</template>