Added show/hide form button.

frontend/src/App.vue

@@ -1,6 +1,6 @@
 <template>
-  <PageHeader :config="config" />
+  <PageHeader :config="config" @toggleForm="addForm = !addForm" />
-  <formAdd :config="config" @addItem="addItem" />
+  <formAdd v-if="addForm" :config="config" @addItem="addItem" />
   <DownloadingList :config="config" :queue="downloading" @deleteItem="deleteItem" />
   <PageCompleted :config="config" :completed="completed" @deleteItem="deleteItem" @addItem="addItem"
     @playItem="playItem" />
@@ -26,7 +26,7 @@ import PageFooter from './components/Page-Footer'
 import VideoPlayer from './components/Video-Player'
 import { io } from "socket.io-client";
 import { useToast } from 'vue-toastification'
-import { useEventBus } from '@vueuse/core'
+import { useStorage, useEventBus } from '@vueuse/core'
 
 const toast = useToast();
 const bus = useEventBus('item_added');
@@ -39,6 +39,7 @@ const config = reactive({
 const downloading = reactive({});
 const completed = reactive({});
 const video_link = ref('');
+const addForm = useStorage('addForm', true)
 
 onMounted(() => {
   const socket = io(process.env.VUE_APP_BASE_URL, {

frontend/src/components/Page-Completed.vue

@@ -1,5 +1,5 @@
 <template>
-  <h1 class="is-size-3 is-clickable is-unselectable" @click="showCompleted = !showCompleted">
+  <h1 class="mt-3 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'" />

frontend/src/components/Page-Downloading.vue

@@ -1,5 +1,5 @@
 <template>
-  <h1 class="is-size-3 is-clickable is-unselectable" @click="showQueue = !showQueue">
+  <h1 class="mt-3 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'" />

frontend/src/components/Page-Header.vue

@@ -17,6 +17,11 @@
           </span>
         </span>
       </div>
+      <div class="navbar-item">
+        <button data-tooltip="Show/Hide Add Form" class="button is-dark has-tooltip-bottom" @click="$emit('toggleForm')">
+          <font-awesome-icon icon="fa-solid fa-plus" />
+        </button>
+      </div>
       <div class="navbar-item">
         <button data-tooltip="Switch to Light theme" class="button is-dark has-tooltip-bottom"
           @click="selectedTheme = 'light'" v-if="selectedTheme == 'dark'">🌞</button>
@@ -28,11 +33,13 @@
 </template>
 
 <script setup>
-import { defineProps, watch, onMounted } from 'vue'
+import { defineProps, defineEmits, watch, onMounted } from 'vue'
 import { useStorage } from '@vueuse/core'
 
 const selectedTheme = useStorage('theme', (() => window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light')());
 
+defineEmits(['toggleForm'])
+
 defineProps({
   config: {
     type: Object,