Added collapsible views.

frontend/src/assets/css/style.css

@@ -31,6 +31,10 @@
     background-color: #000;
   }
 
+  .is-unselectable {
+    user-select: none;
+  }
+
   @media (prefers-color-scheme: dark) {
     * {
       unicode-bidi: plaintext;
@@ -64,4 +68,8 @@
     .container {
       background-color: #0f1010;
     }
+
+    .is-unselectable {
+      user-select: none;
+    }
   }

frontend/src/components/Page-Completed.vue

@@ -1,11 +1,18 @@
 <template>
-  <h1 class="is-size-3">
-    Completed
+  <h1 class="is-size-3 is-clickable is-unselectable" @click="showCompleted = !showCompleted">
+    <span class="icon-text">
+      <span class="icon">
+        <font-awesome-icon :icon="showCompleted ? 'fa-solid fa-arrow-up' : 'fa-solid fa-arrow-down'" />
+      </span>
+      <span>Completed</span>
+    </span>
   </h1>
 
+  <div v-if="showCompleted">
     <div class="columns has-text-centered" v-if="hasItems">
       <div class="column">
-      <button type="button" class="button is-fullwidth is-ghost is-inverted" @click="masterSelectAll = !masterSelectAll">
+        <button type="button" class="button is-fullwidth is-ghost is-inverted"
+          @click="masterSelectAll = !masterSelectAll">
           <span class="icon-text">
             <span class="icon">
               <font-awesome-icon :icon="!masterSelectAll ? 'fa-regular fa-square-check' : 'fa-regular fa-square'" />
@@ -166,11 +173,13 @@
         </span>
       </p>
     </div>
+  </div>
 </template>
 
 <script setup>
 import { defineProps, computed, ref, watch, defineEmits } from 'vue';
 import moment from "moment";
+import { useStorage } from '@vueuse/core'
 
 const emits = defineEmits(['deleteItem', 'addItem', 'playItem']);
 
@@ -187,6 +196,7 @@ const props = defineProps({
 
 const selectedElms = ref([]);
 const masterSelectAll = ref(false);
+const showCompleted = useStorage('showCompleted', true)
 
 watch(masterSelectAll, (value) => {
   for (const key in props.completed) {

frontend/src/components/Page-Downloading.vue

@@ -1,8 +1,14 @@
 <template>
-  <h1 class="is-size-3">
-    Queue
+  <h1 class="is-size-3 is-clickable is-unselectable" @click="showQueue = !showQueue">
+    <icon class="icon-text">
+      <span class="icon">
+        <font-awesome-icon :icon="showQueue ? 'fa-solid fa-arrow-up' : 'fa-solid fa-arrow-down'" />
+      </span>
+      <span>Queue</span>
+    </icon>
   </h1>
 
+  <div v-if="showQueue">
     <div class="columns has-text-centered" v-if="hasQueuedItems">
       <div class="column">
         <button type="button" class="button is-fullwidth is-ghost" @click="masterSelectAll = !masterSelectAll">
@@ -111,11 +117,13 @@
         </span>
       </p>
     </div>
+  </div>
 </template>
 
 <script setup>
 import { defineProps, defineEmits, ref, watch, computed } from 'vue';
 import moment from "moment";
+import { useStorage } from '@vueuse/core'
 
 defineEmits(['deleteItem']);
 
@@ -132,6 +140,7 @@ const props = defineProps({
 
 const selectedElms = ref([]);
 const masterSelectAll = ref(false);
+const showQueue = useStorage('showQueue', true)
 
 watch(masterSelectAll, (value) => {
   for (const key in props.queue) {

frontend/src/main.js

@@ -5,7 +5,7 @@ import { library } from '@fortawesome/fontawesome-svg-core'
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
 import {
   faCog, faTrash, faLink, faPlus, faTrashCan, faCircleXmark, faCircleCheck, faRotateRight, faDownload, faUpRightFromSquare,
-  faSpinner, faWifi, faSignal
+  faSpinner, faWifi, faSignal, faArrowUp, faArrowDown,
 } from '@fortawesome/free-solid-svg-icons'
 
 import { faSquare, faSquareCheck } from '@fortawesome/free-regular-svg-icons'
@@ -17,7 +17,7 @@ import './assets/css/bulma-dark.css'
 import '@creativebulma/bulma-tooltip/dist/bulma-tooltip.min.css';
 
 library.add(faCog, faTrash, faLink, faPlus, faTrashCan, faCircleXmark, faCircleCheck, faRotateRight, faDownload, faUpRightFromSquare,
-  faSquare, faSquareCheck, faSpinner, faWifi, faSignal)
+  faSquare, faSquareCheck, faSpinner, faWifi, faSignal, faArrowUp, faArrowDown,)
 const app = createApp(App);
 
 app.config.globalProperties.capitalize = s => s && s[0].toUpperCase() + s.slice(1);