From ed9ce05ac06fccc28526ccfe9cb12e29b00175e9 Mon Sep 17 00:00:00 2001
From: arabcoders <admin@arabcoders.org>
Date: Fri, 17 Oct 2025 17:21:21 +0300
Subject: [PATCH] [FEAT] Added checkbox in task add page to directly archive
 all items in a task.

---
 CONTRIBUTING.md                |  6 +++++-
 ui/.env.example                |  2 ++
 ui/app/components/TaskForm.vue | 27 +++++++++++++++++++++++++--
 ui/app/pages/tasks.vue         | 28 +++++++++++++++++++++-------
 4 files changed, 53 insertions(+), 10 deletions(-)
 create mode 100644 ui/.env.example

diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
index 012559a2..6386594d 100644
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -223,13 +223,17 @@ cd ui
 pnpm install
 ```
 
+> [!NOTE]
+> Create a `.env` file in the `ui/` directory based on `.env.example` to configure environment variables.
+> to link the frontend to the backend API.
+
 3. **Run the frontend development server:**
 
 ```bash
 pnpm dev
 ```
 
-The frontend will be available at `http://localhost:3000` (or the port shown in the terminal)
+The frontend will be available at `http://localhost:8082` (or the port shown in the terminal)
 
 4. **Verify the setup:**
 
diff --git a/ui/.env.example b/ui/.env.example
new file mode 100644
index 00000000..0aa72bd5
--- /dev/null
+++ b/ui/.env.example
@@ -0,0 +1,2 @@
+NUXT_API_URL="http://localhost:8081/api/"
+NUXT_PUBLIC_WSS=":8081/"
diff --git a/ui/app/components/TaskForm.vue b/ui/app/components/TaskForm.vue
index 157d5499..e05ac89a 100644
--- a/ui/app/components/TaskForm.vue
+++ b/ui/app/components/TaskForm.vue
@@ -231,6 +231,28 @@
                 </div>
               </div>
 
+              <div class="column is-6-tablet is-12-mobile" v-if="!reference">
+                <div class="field">
+                  <label class="label is-inline" for="archive_all_after_add">
+                    <span class="icon"><i class="fa-solid fa-box-archive" /></span>
+                    Mark all existing items as downloaded
+                  </label>
+                  <div class="control is-unselectable">
+                    <input id="archive_all_after_add" type="checkbox" v-model="archiveAllAfterAdd" :disabled="addInProgress"
+                      class="switch is-danger" />
+                    <label for="archive_all_after_add" class="is-unselectable">
+                      {{ archiveAllAfterAdd ? 'Yes' : 'No' }}
+                    </label>
+                  </div>
+                  <span class="help">
+                    <span class="icon"><i class="fa-solid fa-info" /></span>
+                    <span class="is-bold">
+                      If enabled, all existing items in the feed will be marked as downloaded after adding the task.
+                    </span>
+                  </span>
+                </div>
+              </div>
+
               <div class="column is-12">
                 <div class="field">
                   <label class="label is-unselectable" for="cli_options">
@@ -317,7 +339,7 @@ const props = defineProps<{
 
 const emitter = defineEmits<{
   (e: 'cancel'): void
-  (e: 'submit', payload: { reference: string | null | undefined, task: task_item }): void
+  (e: 'submit', payload: { reference: string | null | undefined, task: task_item, archive_all?: boolean }): void
 }>()
 
 const toast = useNotification()
@@ -329,6 +351,7 @@ const convertInProgress = ref<boolean>(false)
 const import_string = ref<string>('')
 const showOptions = ref<boolean>(false)
 const ytDlpOpt = ref<AutoCompleteOptions>([])
+const archiveAllAfterAdd = ref<boolean>(false)
 
 const CHANNEL_REGEX = /^https?:\/\/(?:www\.)?youtube\.com\/(?:(?:channel\/(?<channelId>UC[0-9A-Za-z_-]{22}))|(?:c\/(?<customName>[A-Za-z0-9_-]+))|(?:user\/(?<userName>[A-Za-z0-9_-]+))|(?:@(?<handle>[A-Za-z0-9_-]+)))(?<suffix>\/.*)?\/?$/
 
@@ -389,7 +412,7 @@ const checkInfo = async (): Promise<void> => {
     form.cli = form.cli.trim()
   }
 
-  emitter('submit', { reference: toRaw(props.reference), task: toRaw(form) })
+  emitter('submit', { reference: toRaw(props.reference), task: toRaw(form), archive_all: archiveAllAfterAdd.value })
 }
 
 const importItem = async (): Promise<void> => {
diff --git a/ui/app/pages/tasks.vue b/ui/app/pages/tasks.vue
index 10842ac9..35ccad94 100644
--- a/ui/app/pages/tasks.vue
+++ b/ui/app/pages/tasks.vue
@@ -422,6 +422,7 @@ import Modal from '~/components/Modal.vue'
 import { useConfirm } from '~/composables/useConfirm'
 import TaskInspect from '~/components/TaskInspect.vue'
 import type { task_item, exported_task, error_response } from '~/types/tasks'
+import { sleep } from '~/utils'
 
 const box = useConfirm()
 const toast = useNotification()
@@ -634,7 +635,7 @@ const deleteItem = async (item: task_item) => {
   toast.success('Task deleted.')
 }
 
-const updateItem = async ({ reference, task }: { reference?: string | null | undefined, task: task_item }) => {
+const updateItem = async ({ reference, task, archive_all }: { reference?: string | null | undefined, task: task_item, archive_all?: boolean }) => {
   if (reference) {
     // -- find the task index.
     const index = tasks.value.findIndex((t) => t?.id === reference)
@@ -651,6 +652,16 @@ const updateItem = async ({ reference, task }: { reference?: string | null | und
   }
 
   toast.success('Task updated.')
+
+  if (!reference && true === archive_all) {
+    const newTask = tasks.value[tasks.value.length - 1]
+    if (newTask) {
+      await sleep(1)
+      await nextTick()
+      await archiveAll(newTask, true)
+    }
+  }
+
   resetForm(true)
 }
 
@@ -817,14 +828,17 @@ const get_tags = (name: string): Array<string> => {
 
 const remove_tags = (name: string): string => name.replace(/\[(.*?)\]/g, '').trim();
 
-const archiveAll = async (item: task_item) => {
+const archiveAll = async (item: task_item, by_pass: boolean = false) => {
   try {
-    const { status } = await cDialog({
-      message: `Mark all '${item.name}' items as downloaded in download archive?`
-    })
 
-    if (true !== status) {
-      return;
+    if (true !== by_pass) {
+      const { status } = await cDialog({
+        message: `Mark all '${item.name}' items as downloaded in download archive?`
+      })
+
+      if (true !== status) {
+        return;
+      }
     }
 
     item.in_progress = true