From fe1e88243b58ff255939da2fdeb1da3171344382 Mon Sep 17 00:00:00 2001
From: ArabCoders <admin@arabcoders.org>
Date: Thu, 30 Nov 2023 16:17:13 +0300
Subject: [PATCH] Added show/hide form button.

---
 frontend/src/App.vue                         | 7 ++++---
 frontend/src/components/Page-Completed.vue   | 2 +-
 frontend/src/components/Page-Downloading.vue | 2 +-
 frontend/src/components/Page-Header.vue      | 9 ++++++++-
 4 files changed, 14 insertions(+), 6 deletions(-)

diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index 134fcb00..cd408b9f 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -1,6 +1,6 @@
 <template>
-  <PageHeader :config="config" />
-  <formAdd :config="config" @addItem="addItem" />
+  <PageHeader :config="config" @toggleForm="addForm = !addForm" />
+  <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, {
diff --git a/frontend/src/components/Page-Completed.vue b/frontend/src/components/Page-Completed.vue
index 900e09be..5e70ecc1 100644
--- a/frontend/src/components/Page-Completed.vue
+++ b/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'" />
diff --git a/frontend/src/components/Page-Downloading.vue b/frontend/src/components/Page-Downloading.vue
index a7c113a5..8db15797 100644
--- a/frontend/src/components/Page-Downloading.vue
+++ b/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'" />
diff --git a/frontend/src/components/Page-Header.vue b/frontend/src/components/Page-Header.vue
index ce3e44a0..17d5ff98 100644
--- a/frontend/src/components/Page-Header.vue
+++ b/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,