From 347f99adb607d2d1bdd3b199eda7e18220286e87 Mon Sep 17 00:00:00 2001
From: arabcoders <admin@arabcoders.org>
Date: Tue, 8 Jul 2025 22:54:05 +0300
Subject: [PATCH 1/6] Set default value for auto_start in TaskForm component

---
 ui/components/TaskForm.vue | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/ui/components/TaskForm.vue b/ui/components/TaskForm.vue
index 0e5c3a13..9b540c9a 100644
--- a/ui/components/TaskForm.vue
+++ b/ui/components/TaskForm.vue
@@ -328,6 +328,9 @@ onMounted(() => {
   if (!props.task?.preset || '' === props.task.preset) {
     form.preset = toRaw(config.app.default_preset)
   }
+  if (typeof form.auto_start === 'undefined' || form.auto_start === null) {
+    form.auto_start = true
+  }
 })
 
 const checkInfo = async () => {

From a8b318b40e0ba991ea0789929463b6186d73cead Mon Sep 17 00:00:00 2001
From: arabcoders <admin@arabcoders.org>
Date: Wed, 9 Jul 2025 19:14:19 +0300
Subject: [PATCH 2/6] Refactor confirmation messages for consistency across
 components

---
 ui/@types/item.d.ts                | 18 ++++++++++++++++++
 ui/components/ConditionForm.vue    |  2 +-
 ui/components/NotificationForm.vue |  2 +-
 ui/components/Queue.vue            |  4 ++--
 ui/components/TaskForm.vue         |  2 +-
 ui/pages/index.vue                 |  9 +++++----
 ui/pages/notifications.vue         |  4 ++--
 7 files changed, 30 insertions(+), 11 deletions(-)
 create mode 100644 ui/@types/item.d.ts

diff --git a/ui/@types/item.d.ts b/ui/@types/item.d.ts
new file mode 100644
index 00000000..51abcfff
--- /dev/null
+++ b/ui/@types/item.d.ts
@@ -0,0 +1,18 @@
+export type item_request = {
+  /** URL of the item to download */
+  url: string,
+  /** Preset to use for the download */
+  preset?: string,
+  /** Where to save the downloaded item */
+  folder?: string,
+  /** Output template for the downloaded item */
+  template?: string,
+  /** Additional command line options for yt-dlp */
+  cli?: string,
+  /** Cookies file for the download */
+  cookies?: string,
+  /** Auto start the download */
+  auto_start?: boolean,
+  /** Extras data for the item */
+  extras?: Record<string, any>,
+}
diff --git a/ui/components/ConditionForm.vue b/ui/components/ConditionForm.vue
index 39619f5d..263acb22 100644
--- a/ui/components/ConditionForm.vue
+++ b/ui/components/ConditionForm.vue
@@ -330,7 +330,7 @@ const importItem = async () => {
       return
     }
 
-    if ((form.filter || form.cli) && false === box.confirm('This will overwrite the current data. Are you sure?', true)) {
+    if ((form.filter || form.cli) && false === box.confirm('Overwrite the current form fields?', true)) {
       return
     }
 
diff --git a/ui/components/NotificationForm.vue b/ui/components/NotificationForm.vue
index 81e06ffe..15599088 100644
--- a/ui/components/NotificationForm.vue
+++ b/ui/components/NotificationForm.vue
@@ -351,7 +351,7 @@ const importItem = async () => {
     }
 
     if (form.target) {
-      if (false === box.confirm('This will overwrite the current form fields. Are you sure?', true)) {
+      if (false === box.confirm('Overwrite the current form fields?', true)) {
         return
       }
     }
diff --git a/ui/components/Queue.vue b/ui/components/Queue.vue
index ce62eaaa..75ccf661 100644
--- a/ui/components/Queue.vue
+++ b/ui/components/Queue.vue
@@ -523,7 +523,7 @@ const updateProgress = (item) => {
 }
 
 const confirmCancel = item => {
-  if (true !== box.confirm(`Are you sure you want to cancel (${item.title})?`)) {
+  if (true !== box.confirm(`Cancel '${item.title}'?`)) {
     return false
   }
   cancelItems(item._id)
@@ -531,7 +531,7 @@ const confirmCancel = item => {
 }
 
 const cancelSelected = () => {
-  if (true !== box.confirm('Are you sure you want to cancel selected items?')) {
+  if (true !== box.confirm(`Cancel '${selectedElms.value.length}' selected items?`)) {
     return false;
   }
   cancelItems(selectedElms.value)
diff --git a/ui/components/TaskForm.vue b/ui/components/TaskForm.vue
index 9b540c9a..bb7463d0 100644
--- a/ui/components/TaskForm.vue
+++ b/ui/components/TaskForm.vue
@@ -387,7 +387,7 @@ const importItem = async () => {
     }
 
     if (form.url || form.timer) {
-      if (false === box.confirm('This will overwrite the current form fields. Are you sure?', true)) {
+      if (false === box.confirm('Overwrite the current form fields?', true)) {
         return
       }
     }
diff --git a/ui/pages/index.vue b/ui/pages/index.vue
index 72f005fd..9e5d5e27 100644
--- a/ui/pages/index.vue
+++ b/ui/pages/index.vue
@@ -66,7 +66,7 @@
     <Queue @getInfo="(url: string, preset: string = '') => view_info(url, false, preset)" :thumbnails="show_thumbnail"
       :query="query" @getItemInfo="(id: string) => view_info(`/api/history/${id}`, true)" @clear_search="query = ''" />
     <History @getInfo="(url: string, preset: string = '') => view_info(url, false, preset)"
-      @add_new="item => toNewDownload(item)" :query="query" :thumbnails="show_thumbnail"
+      @add_new="(item: item_request) => toNewDownload(item)" :query="query" :thumbnails="show_thumbnail"
       @getItemInfo="(id: string) => view_info(`/api/history/${id}`, true)" @clear_search="query = ''" />
     <GetInfo v-if="info_view.url" :link="info_view.url" :preset="info_view.preset" :useUrl="info_view.useUrl"
       @closeModel="close_info()" />
@@ -75,6 +75,7 @@
 
 <script setup lang="ts">
 import { useStorage } from '@vueuse/core'
+import type { item_request } from '~/@types/item'
 
 const config = useConfigStore()
 const stateStore = useStateStore()
@@ -90,7 +91,7 @@ const info_view = ref({
   preset: '',
   useUrl: false,
 }) as Ref<{ url: string, preset: string, useUrl: boolean }>
-const item_form = ref({})
+const item_form = ref<item_request|object>({})
 const query = ref()
 const toggleFilter = ref(false)
 
@@ -123,7 +124,7 @@ watch(() => stateStore.queue, () => {
 }, { deep: true })
 
 const pauseDownload = () => {
-  if (false === box.confirm('Are you sure you want to pause all non-active downloads?')) {
+  if (false === box.confirm('Pause all non-active downloads?')) {
     return false
   }
 
@@ -152,7 +153,7 @@ watch(() => info_view.value.url, v => {
 
 const changeDisplay = () => display_style.value = display_style.value === 'cards' ? 'list' : 'cards'
 
-const toNewDownload = async (item: any) => {
+const toNewDownload = async (item: item_request) => {
   if (!item) {
     return
   }
diff --git a/ui/pages/notifications.vue b/ui/pages/notifications.vue
index 846f27ed..64b72cce 100644
--- a/ui/pages/notifications.vue
+++ b/ui/pages/notifications.vue
@@ -236,7 +236,7 @@ const updateData = async notifications => {
 }
 
 const deleteItem = async item => {
-  if (true !== box.confirm(`Are you sure you want to delete notification target (${item.name})?`)) {
+  if (true !== box.confirm(`Delete '${item.name}'?`)) {
     return
   }
 
@@ -296,7 +296,7 @@ const editItem = item => {
 const join_events = events => (!events || events.length < 1) ? 'ALL' : events.map(e => ucFirst(e)).join(', ')
 
 const sendTest = async () => {
-  if (true !== box.confirm('Are you sure you want to send a test notification?')) {
+  if (true !== box.confirm('Send test notification?')) {
     return
   }
 

From f782cad21325006552de1cd50d312f7c17918eba Mon Sep 17 00:00:00 2001
From: arabcoders <admin@arabcoders.org>
Date: Thu, 10 Jul 2025 01:02:38 +0300
Subject: [PATCH 3/6] minor download form improvements.

---
 ui/@types/item.d.ts           |   2 +
 ui/@types/responses.d.ts      |  18 +++
 ui/components/NewDownload.vue | 204 ++++++++++++++++++----------------
 ui/utils/index.js             |  21 ----
 ui/utils/utils.ts             |  24 ++++
 5 files changed, 151 insertions(+), 118 deletions(-)
 create mode 100644 ui/@types/responses.d.ts
 create mode 100644 ui/utils/utils.ts

diff --git a/ui/@types/item.d.ts b/ui/@types/item.d.ts
index 51abcfff..547d2666 100644
--- a/ui/@types/item.d.ts
+++ b/ui/@types/item.d.ts
@@ -1,4 +1,6 @@
 export type item_request = {
+  /** Unique identifier for the item */
+  id?: string|null,
   /** URL of the item to download */
   url: string,
   /** Preset to use for the download */
diff --git a/ui/@types/responses.d.ts b/ui/@types/responses.d.ts
new file mode 100644
index 00000000..377ed414
--- /dev/null
+++ b/ui/@types/responses.d.ts
@@ -0,0 +1,18 @@
+export type error_response = {
+  /** The error message */
+  error: string,
+}
+
+export type convert_args_response = {
+  /** The converted CLI args */
+  opts?: Record<string, any>,
+  /** The output template if was provided */
+  output_template?: string,
+  /** The download path if was provided */
+  download_path?: string,
+  /** The download format if was provided */
+  format?: string,
+  /** The removed options from the original CLI args if any. */
+  removed_options?: string[],
+}
+
diff --git a/ui/components/NewDownload.vue b/ui/components/NewDownload.vue
index 6a2ae274..5238feba 100644
--- a/ui/components/NewDownload.vue
+++ b/ui/components/NewDownload.vue
@@ -7,33 +7,31 @@
             <div class="column is-12">
               <label class="label is-inline is-unselectable" for="url">
                 <span class="icon"><i class="fa-solid fa-link" /></span>
-                URLs
+                URLs. separated by <span class="is-bold">{{ getSeparatorsName(separator) }}</span>
               </label>
               <div class="field is-grouped">
                 <div class="control is-expanded">
-                  <input type="text" class="input" id="url" placeholder="Video or playlist link"
+                  <input type="text" class="input" id="url" placeholder="URLs to download"
                     :disabled="!socket.isConnected || addInProgress" v-model="form.url">
                 </div>
-                <div class="control is-align-content-space-around" v-if="!config.app.basic_mode"
-                v-tooltip="'Auto start the download after adding it.'">
-                  <input id="auto_start" type="checkbox" v-model="auto_start" :disabled="addInProgress"
-                    class="switch is-success" />
-                  <label for="auto_start" class="is-unselectable">Start</label>
+                <div class="control">
+                  <button type="submit" class="button is-primary"
+                    :class="{ 'is-loading': !socket.isConnected || addInProgress }"
+                    :disabled="!socket.isConnected || addInProgress || !form?.url">
+                    <span class="icon"><i class="fa-solid fa-plus" /></span>
+                    <span>Add</span>
+                  </button>
                 </div>
               </div>
-              <span class="help is-bold is-unselectable">
-                <span class="icon"><i class="fa-solid fa-info" /></span>
-                <span>You can add multiple URLs separated by <code
-                    class="is-bold">{{ getSeparatorsName(separator) }}</code>.</span>
-              </span>
             </div>
+
             <div class="column is-4-tablet is-12-mobile" v-if="!config.app.basic_mode">
               <div class="field has-addons">
-                <div class="control">
-                  <a href="#" class="button is-static">
+                <div class="control" @click="show_description = !show_description">
+                  <label class="button is-static">
                     <span class="icon"><i class="fa-solid fa-sliders" /></span>
                     <span>Preset</span>
-                  </a>
+                  </label>
                 </div>
                 <div class="control is-expanded">
                   <div class="select is-fullwidth">
@@ -55,13 +53,14 @@
                 </div>
               </div>
             </div>
+
             <div class="column is-6-tablet is-12-mobile" v-if="!config.app.basic_mode">
               <div class="field has-addons" v-tooltip="'Folder relative to ' + config.app.download_path">
                 <div class="control">
-                  <a href="#" class="button is-static">
+                  <label class="button is-static">
                     <span class="icon"><i class="fa-solid fa-folder" /></span>
                     <span>Save in</span>
-                  </a>
+                  </label>
                 </div>
                 <div class="control is-expanded">
                   <input type="text" class="input is-fullwidth" id="path" v-model="form.folder" placeholder="Default"
@@ -69,23 +68,24 @@
                 </div>
               </div>
             </div>
-            <div class="column">
-              <button type="submit" class="button is-primary"
-                :class="{ 'is-loading': !socket.isConnected || addInProgress }"
-                :disabled="!socket.isConnected || addInProgress || !form?.url">
-                <span class="icon"><i class="fa-solid fa-plus" /></span>
-                <span>Add</span>
-              </button>
+
+            <div class="column is-narrow" v-if="!config.app.basic_mode"
+              v-tooltip="`Automatically start downloading after adding. [${auto_start ? 'Enabled' : 'Disabled'}]`">
+              <input id="auto_start" type="checkbox" v-model="auto_start" :disabled="addInProgress"
+                class="switch is-success" />
+              <label for="auto_start" class="is-unselectable"></label>
             </div>
+
             <div class="column" v-if="!config.app.basic_mode">
               <button type="button" class="button is-info" @click="showAdvanced = !showAdvanced"
                 :class="{ 'is-loading': !socket.isConnected }" :disabled="!socket.isConnected">
                 <span class="icon"><i class="fa-solid fa-cog" /></span>
-                <span>Opts</span>
+                <span>Options</span>
               </button>
             </div>
+
             <div class="column is-12"
-              v-if="!config.app.basic_mode && !hasFormatInConfig && get_preset(form.preset)?.description">
+              v-if="show_description && !config.app.basic_mode && !hasFormatInConfig && get_preset(form.preset)?.description">
               <div class="is-overflow-auto" style="max-height: 150px;">
                 <div class="is-ellipsis is-clickable" @click="expand_description">
                   <span class="icon"><i class="fa-solid fa-info" /></span> {{ get_preset(form.preset)?.description }}
@@ -96,12 +96,14 @@
 
           <div class="columns is-multiline is-mobile" v-if="showAdvanced && !config.app.basic_mode">
             <div class="column is-4-tablet is-12-mobile" v-if="!config.app.basic_mode">
-              <div class="field">
-                <label class="label is-inline is-unselectable">
-                  <span class="icon"><i class="fa-solid fa-object-ungroup" /></span>
-                  <span>URLs Separator</span>
-                </label>
+              <div class="field has-addons">
                 <div class="control">
+                  <label class="button is-static">
+                    <span class="icon"><i class="fa-solid fa-object-ungroup" /></span>
+                    <span>Separator</span>
+                  </label>
+                </div>
+                <div class="control is-expanded">
                   <div class="select is-fullwidth">
                     <select class="is-fullwidth" :disabled="!socket.isConnected || addInProgress" v-model="separator">
                       <option v-for="(sep, index) in separators" :key="`sep-${index}`" :value="sep.value">
@@ -110,31 +112,33 @@
                     </select>
                   </div>
                 </div>
-                <span class="help is-bold">
-                  <span class="icon"><i class="fa-solid fa-info" /></span>
-                  <span>Use this to separate multiple URLs in the input field.</span>
-                </span>
               </div>
+              <span class="help is-bold is-unselectable">
+                <span class="icon"><i class="fa-solid fa-info" /></span>
+                <span>Use this to separate multiple URLs in the input field.</span>
+              </span>
             </div>
 
             <div class="column is-8-tablet is-12-mobile">
-              <div class="field">
-                <label class="label is-inline is-unselectable" for="output_format"
-                  v-tooltip="'Default: ' + config.app.output_template">
-                  <span class="icon"><i class="fa-solid fa-file" /></span>
-                  Output Template
-                </label>
+              <div class="field has-addons">
                 <div class="control">
+                  <label for="output_format" v-tooltip="'Default: ' + config.app.output_template"
+                    class="button is-static is-unselectable">
+                    <span class="icon"><i class="fa-solid fa-file" /></span>
+                    <span>Template</span>
+                  </label>
+                </div>
+                <div class="control is-expanded">
                   <input type="text" class="input" v-model="form.template" id="output_format"
                     :disabled="!socket.isConnected || addInProgress"
                     placeholder="Uses default output template naming if empty.">
                 </div>
-                <span class="help is-bold">
-                  <span class="icon"><i class="fa-solid fa-info" /></span>
-                  <span>All output template naming options can be found at <NuxtLink target="_blank"
-                      to="https://github.com/yt-dlp/yt-dlp#output-template">this page</NuxtLink>.</span>
-                </span>
               </div>
+              <span class="help is-bold is-unselectable">
+                <span class="icon"><i class="fa-solid fa-info" /></span>
+                <span>All output template naming options can be found at <NuxtLink target="_blank"
+                    to="https://github.com/yt-dlp/yt-dlp#output-template">this page</NuxtLink>.</span>
+              </span>
             </div>
 
             <div class="column is-6-tablet is-12-mobile">
@@ -154,7 +158,7 @@
                   <span>Check <NuxtLink target="_blank" to="https://github.com/yt-dlp/yt-dlp#general-options">this page
                     </NuxtLink> for more info. <span class="has-text-danger">Not all options are supported <NuxtLink
                         target="_blank"
-                        to="https://github.com/arabcoders/ytptube/blob/master/app/library/Utils.py#L24-L46">some are
+                        to="https://github.com/arabcoders/ytptube/blob/master/app/library/Utils.py#L26-L48">some are
                         ignored</NuxtLink>. Use with caution these options can break yt-dlp or the frontend.</span>
                   </span>
                 </span>
@@ -222,7 +226,7 @@
 
                 <div class="control">
                   <button type="button" class="button is-danger" @click="resetConfig"
-                    :disabled="!socket.isConnected || form?.id" v-tooltip="'Reset local settings'">
+                    :disabled="!!(!socket.isConnected || form?.id)" v-tooltip="'Reset local settings'">
                     <span class="icon"><i class="fa-solid fa-rotate-left" /></span>
                     <span>Reset</span>
                   </button>
@@ -237,22 +241,23 @@
     <datalist id="folders" v-if="config?.folders">
       <option v-for="dir in config.folders" :key="dir" :value="dir" />
     </datalist>
+    <ConfirmDialog v-if="dialog_confirm.visible" :visible="dialog_confirm.visible" :title="dialog_confirm.title"
+      :message="dialog_confirm.message" :options="dialog_confirm.options" @confirm="dialog_confirm.confirm"
+      @cancel="() => dialog_confirm.visible = false" />
   </main>
 </template>
 
-<script setup>
+<script setup lang="ts">
 import 'assets/css/bulma-switch.css'
 import { useStorage } from '@vueuse/core'
+import type { item_request } from '~/@types/item'
 
-const props = defineProps({
-  item: {
-    type: Object,
-    required: false,
-    default: () => { },
-  },
-})
-
-const emitter = defineEmits(['getInfo', 'clear_form', 'remove_archive'])
+const props = defineProps<{ item?: Partial<item_request> }>()
+const emitter = defineEmits<{
+  (e: 'getInfo', url: string, preset: string | undefined): void
+  (e: 'clear_form'): void
+  (e: 'remove_archive', url: string): void
+}>()
 const config = useConfigStore()
 const socket = useSocketStore()
 const toast = useNotification()
@@ -266,18 +271,19 @@ const separators = [
   { name: 'Space', value: ' ', }
 ]
 
-const getSeparatorsName = (value) => {
+const getSeparatorsName = (value: string): string => {
   const sep = separators.find(s => s.value === value)
   return sep ? `${sep.name} (${value})` : 'Unknown'
 }
 
-const showAdvanced = useStorage('show_advanced', false)
-const separator = useStorage('url_separator', separators[0].value)
-const auto_start = useStorage('auto_start', true)
+const showAdvanced = useStorage<boolean>('show_advanced', false)
+const separator = useStorage<string>('url_separator', separators[0].value)
+const auto_start = useStorage<boolean>('auto_start', true)
+const show_description = useStorage<boolean>('show_description', true)
 
-const addInProgress = ref(false)
+const addInProgress = ref<boolean>(false)
 
-const form = useStorage('local_config_v1', {
+const form = useStorage<item_request>('local_config_v1', {
   id: null,
   url: '',
   preset: config.app.default_preset,
@@ -286,6 +292,14 @@ const form = useStorage('local_config_v1', {
   template: '',
   folder: '',
   extras: {},
+}) as Ref<item_request>
+
+const dialog_confirm = ref({
+  visible: false,
+  title: 'Confirm Action',
+  confirm: () => { },
+  message: '',
+  options: [],
 })
 
 const addDownload = async () => {
@@ -296,9 +310,9 @@ const addDownload = async () => {
     }
   }
 
-  const request_data = []
+  const request_data = [] as Array<item_request>
 
-  form.value.url.split(separator.value).forEach(async (url) => {
+  form.value.url.split(separator.value).forEach(async (url: string) => {
     if (!url.trim()) {
       return
     }
@@ -311,7 +325,7 @@ const addDownload = async () => {
       cookies: config.app.basic_mode ? '' : form.value.cookies,
       cli: config.app.basic_mode ? null : form.value.cli,
       auto_start: config.app.basic_mode ? true : auto_start.value
-    }
+    } as item_request
 
     if (form.value?.extras && Object.keys(form.value.extras).length > 0) {
       data.extras = form.value.extras
@@ -334,7 +348,7 @@ const addDownload = async () => {
       return
     }
 
-    data.forEach(item => {
+    data.forEach((item: Record<string, any>) => {
       if (false !== item.status) {
         return
       }
@@ -344,7 +358,7 @@ const addDownload = async () => {
     form.value.url = ''
     emitter('clear_form')
   }
-  catch (e) {
+  catch (e: any) {
     console.error(e)
     toast.error(`Error: ${e.message}`)
   } finally {
@@ -353,12 +367,13 @@ const addDownload = async () => {
 }
 
 const resetConfig = () => {
-  if (true !== box.confirm('Reset your local configuration?')) {
-    return
-  }
+  dialog_confirm.value.visible = true
+  dialog_confirm.value.message = `Reset local configuration?`
+  dialog_confirm.value.confirm = reset_config
+}
 
+const reset_config = () => {
   form.value = {
-    id: null,
     url: '',
     preset: config.app.default_preset,
     cookies: '',
@@ -366,15 +381,16 @@ const resetConfig = () => {
     template: '',
     folder: '',
     extras: {},
-  }
+  } as item_request
 
   showAdvanced.value = false
   separator.value = separators[0].value
 
   toast.success('Local configuration has been reset.')
+  dialog_confirm.value.visible = false
 }
 
-const convertOptions = async args => {
+const convertOptions = async (args: string) => {
   try {
     const response = await convertCliOptions(args)
 
@@ -387,7 +403,7 @@ const convertOptions = async args => {
     }
 
     return response.opts
-  } catch (e) {
+  } catch (e: any) {
     toast.error(e.message)
   }
 
@@ -418,36 +434,30 @@ onMounted(async () => {
   }
 
   if (props?.item) {
-    Object.keys(props.item).forEach(key => {
-      if (key in form.value) {
-        let value = props.item[key]
-        if ('extras' === key) {
-          value = JSON.parse(JSON.stringify(props.item[key]))
-        }
-        form.value[key] = value
-      }
-    })
-    emitter('clear_form');
+    const updates: Partial<item_request> = {}
+    const keys = Object.keys(props.item) as (keyof item_request)[]
+    for (const key of keys) {
+      const value = props.item[key]
+      updates[key] = key === 'extras' ? JSON.parse(JSON.stringify(value)) : value!
+    }
+    form.value = { ...form.value, ...updates }
+    emitter('clear_form')
   }
 
   await nextTick()
+
   if (!separators.some(s => s.value === separator.value)) {
     separator.value = separators[0].value
   }
 })
 
-const hasFormatInConfig = computed(() => {
-  if (!form.value?.cli) {
-    return false
-  }
-  return /(?<!\S)(-f|--format)(=|\s)(\S+)/.test(form.value.cli)
-})
+const hasFormatInConfig = computed((): boolean => !!form.value.cli?.match(/(?<!\S)(-f|--format)(=|\s)(\S+)/))
 
-const filter_presets = (flag = true) => config.presets.filter(item => item.default === flag)
-const get_preset = name => config.presets.find(item => item.name === name)
-const expand_description = e => toggleClass(e.target, ['is-ellipsis', 'is-pre-wrap'])
+const filter_presets = (flag: boolean = true) => config.presets.filter(item => item.default === flag)
+const get_preset = (name: string | undefined) => config.presets.find(item => item.name === name)
+const expand_description = (e: Event) => toggleClass(e.target, ['is-ellipsis', 'is-pre-wrap'])
 
-const removeFromArchive = async url => {
+const removeFromArchive = async (url: string) => {
   try {
     const req = await request(`/api/archive/0`, {
       credentials: 'include',
@@ -463,7 +473,7 @@ const removeFromArchive = async url => {
     }
 
     toast.success(data.message ?? `Removed item from archive.`)
-  } catch (e) {
+  } catch (e: any) {
     toast.error(`Error: ${e.message}`)
   }
 }
diff --git a/ui/utils/index.js b/ui/utils/index.js
index 9d4a4d2c..5a1aaea6 100644
--- a/ui/utils/index.js
+++ b/ui/utils/index.js
@@ -385,26 +385,6 @@ const formatBytes = (bytes, decimals = 2) => {
 }
 
 
-/**
- * Convert options to JSON
- *
- * @param {string} opts
- *
- * @returns {Promise<string>}
- */
-const convertCliOptions = async opts => {
-  const response = await request('/api/yt-dlp/convert', {
-    method: 'POST',
-    body: JSON.stringify({ args: opts }),
-  });
-
-  const data = await response.json()
-  if (200 !== response.status) {
-    throw new Error(`Error: (${response.status}): ${data.error}`)
-  }
-
-  return data
-}
 
 /**
  * Check if array or object has data.
@@ -513,7 +493,6 @@ export {
   getQueryParams,
   makeDownload,
   formatBytes,
-  convertCliOptions,
   has_data,
   toggleClass,
   cleanObject,
diff --git a/ui/utils/utils.ts b/ui/utils/utils.ts
new file mode 100644
index 00000000..e873864d
--- /dev/null
+++ b/ui/utils/utils.ts
@@ -0,0 +1,24 @@
+import type { convert_args_response } from "~/@types/responses";
+
+/**
+ * Convert options to JSON
+ *
+ * @param {string} opts
+ *
+ * @returns {Promise<convert_args_response>} The converted options
+ */
+const convertCliOptions = async (opts: string): Promise<convert_args_response> => {
+  const response = await request('/api/yt-dlp/convert', {
+    method: 'POST',
+    body: JSON.stringify({ args: opts }),
+  });
+
+  const data = await response.json()
+  if (200 !== response.status) {
+    throw new Error(`Error: (${response.status}): ${data.error}`)
+  }
+
+  return data
+}
+
+export { convertCliOptions }

From 9d24fc01b43b6e45cb66950e8983731927f50e16 Mon Sep 17 00:00:00 2001
From: arabcoders <admin@arabcoders.org>
Date: Fri, 11 Jul 2025 18:18:29 +0300
Subject: [PATCH 4/6] Make it possible to cancel download and retain the temp
 data, ref #332

---
 app/library/Download.py      | 28 ++++++++++++++++++++--------
 app/library/DownloadQueue.py |  2 +-
 app/library/Utils.py         | 10 +++++-----
 app/library/ytdlp.py         | 12 ++++++++++++
 4 files changed, 38 insertions(+), 14 deletions(-)
 create mode 100644 app/library/ytdlp.py

diff --git a/app/library/Download.py b/app/library/Download.py
index 29474493..ff9c790b 100644
--- a/app/library/Download.py
+++ b/app/library/Download.py
@@ -4,18 +4,20 @@ import logging
 import multiprocessing
 import os
 import re
+import signal
 import time
 from datetime import UTC, datetime
 from email.utils import formatdate
 from pathlib import Path
 
-import yt_dlp
+import yt_dlp.utils
 
 from .config import Config
 from .Events import EventBus, Events
 from .ffprobe import ffprobe
 from .ItemDTO import ItemDTO
 from .Utils import delete_dir, extract_info, extract_ytdlp_logs, load_cookies
+from .ytdlp import YTDLP
 from .YTDLPOpts import YTDLPOpts
 
 
@@ -264,10 +266,17 @@ class Download:
 
             params["logger"] = NestedLogger(self.logger)
 
-            cls = yt_dlp.YoutubeDL(params=params)
+            cls = YTDLP(params=params)
 
             self.started_time = int(time.time())
 
+            def mark_cancelled(*_):
+                cls._interrupted = True
+                cls.to_screen("[info] Interrupt received, exiting cleanly...")
+                raise SystemExit(130)  # noqa: TRY301
+
+            signal.signal(signal.SIGUSR1, mark_cancelled)
+
             if isinstance(self.info_dict, dict) and len(self.info_dict) > 1:
                 self.logger.debug(f"Downloading '{self.info.url}' using pre-info.")
                 cls.process_ie_result(
@@ -275,10 +284,10 @@ class Download:
                     download=True,
                     extra_info={k: v for k, v in self.info.extras.items() if k not in self.info_dict},
                 )
-                ret = cls._download_retcode
+                ret: int = cls._download_retcode
             else:
                 self.logger.debug(f"Downloading using url: {self.info.url}")
-                ret = cls.download(url_list=[self.info.url])
+                ret: int = cls.download(url_list=[self.info.url])
 
             self.status_queue.put({"id": self.id, "status": "finished" if ret == 0 else "error"})
         except yt_dlp.utils.ExistingVideoReached as exc:
@@ -333,7 +342,7 @@ class Download:
             return False
 
         self.cancel_in_progress = True
-        procId = self.proc.ident
+        procId: int | None = self.proc.ident
 
         self.logger.info(f"Closing PID='{procId}' download process.")
 
@@ -387,7 +396,10 @@ class Download:
 
         try:
             self.logger.info(f"Killing download process: '{self.proc.ident}'.")
-            self.proc.kill()
+            if self.proc.pid and "posix" == os.name:
+                os.kill(self.proc.pid, signal.SIGUSR1)
+            else:
+                self.proc.kill()
             return True
         except Exception as e:
             self.logger.error(f"Failed to kill process: '{self.proc.ident}'. {e}")
@@ -398,9 +410,9 @@ class Download:
         if self.temp_keep is True or not self.temp_path:
             return
 
-        if "finished" != self.info.status and self.is_live:
+        if "finished" != self.info.status and self.info.downloaded_bytes > 0:
             self.logger.warning(
-                f"Keeping live temp folder '{self.temp_path}', as the reported status is not finished '{self.info.status}'."
+                f"Keeping temp folder '{self.temp_path}', as the reported status is not finished '{self.info.status}'."
             )
             return
 
diff --git a/app/library/DownloadQueue.py b/app/library/DownloadQueue.py
index fb1bf668..ff4f4fd0 100644
--- a/app/library/DownloadQueue.py
+++ b/app/library/DownloadQueue.py
@@ -10,7 +10,7 @@ from pathlib import Path
 from sqlite3 import Connection
 from typing import TYPE_CHECKING
 
-import yt_dlp
+import yt_dlp.utils
 from aiohttp import web
 
 from .ag_utils import ag
diff --git a/app/library/Utils.py b/app/library/Utils.py
index 18e90ee3..8f9a8cdc 100644
--- a/app/library/Utils.py
+++ b/app/library/Utils.py
@@ -15,11 +15,11 @@ from http.cookiejar import MozillaCookieJar
 from pathlib import Path
 from typing import TypeVar
 
-import yt_dlp
 from Crypto.Cipher import AES
 from yt_dlp.utils import age_restricted, match_str
 
 from .LogWrapper import LogWrapper
+from .ytdlp import YTDLP
 
 LOG: logging.Logger = logging.getLogger("Utils")
 
@@ -47,7 +47,7 @@ REMOVE_KEYS: list = [
     },
 ]
 
-YTDLP_INFO_CLS: yt_dlp.YoutubeDL = None
+YTDLP_INFO_CLS: YTDLP = None
 
 ALLOWED_SUBS_EXTENSIONS: tuple[str] = (".srt", ".vtt", ".ass")
 
@@ -189,7 +189,7 @@ def extract_info(
     if no_archive and "download_archive" in params:
         del params["download_archive"]
 
-    data = yt_dlp.YoutubeDL(params=params).extract_info(url, download=False)
+    data = YTDLP(params=params).extract_info(url, download=False)
 
     if data and follow_redirect and "_type" in data and "url" == data["_type"]:
         return extract_info(
@@ -208,7 +208,7 @@ def extract_info(
     if not data["is_premiere"]:
         data["is_premiere"] = "video" == data.get("media_type") and "is_upcoming" == data.get("live_status")
 
-    return yt_dlp.YoutubeDL.sanitize_info(data) if sanitize_info else data
+    return YTDLP.sanitize_info(data) if sanitize_info else data
 
 
 def merge_dict(source: dict, destination: dict) -> dict:
@@ -1103,7 +1103,7 @@ def get_archive_id(url: str) -> tuple[bool, dict[str | None, str | None, str | N
     }
 
     if YTDLP_INFO_CLS is None:
-        YTDLP_INFO_CLS = yt_dlp.YoutubeDL(
+        YTDLP_INFO_CLS = YTDLP(
             params={
                 "color": "no_color",
                 "extract_flat": True,
diff --git a/app/library/ytdlp.py b/app/library/ytdlp.py
new file mode 100644
index 00000000..8c5cc719
--- /dev/null
+++ b/app/library/ytdlp.py
@@ -0,0 +1,12 @@
+import yt_dlp
+
+
+class YTDLP(yt_dlp.YoutubeDL):
+    _interrupted = False
+
+    def _delete_downloaded_files(self, *args, **kwargs):
+        if self._interrupted:
+            self.to_screen("[info] Cancelled — skipping temp cleanup.")
+            return None
+
+        return super()._delete_downloaded_files(*args, **kwargs)

From 5e14c232d7a0c377e12d49f9cc2bb7ae343a6685 Mon Sep 17 00:00:00 2001
From: arabcoders <admin@arabcoders.org>
Date: Fri, 11 Jul 2025 18:53:43 +0300
Subject: [PATCH 5/6] move condition to ts

---
 ui/@types/conditions.d.ts       |  12 +++
 ui/components/ConditionForm.vue | 146 ++++++++++++++++----------------
 ui/pages/conditions.vue         | 141 +++++++++++++++---------------
 3 files changed, 152 insertions(+), 147 deletions(-)
 create mode 100644 ui/@types/conditions.d.ts

diff --git a/ui/@types/conditions.d.ts b/ui/@types/conditions.d.ts
new file mode 100644
index 00000000..a6d440d3
--- /dev/null
+++ b/ui/@types/conditions.d.ts
@@ -0,0 +1,12 @@
+export type ConditionItem = {
+  id?: string
+  name: string
+  filter: string
+  cli: string
+  [key: string]: any
+}
+
+export type ImportedConditionItem = ConditionItem & {
+  _type: string
+  _version: string
+}
diff --git a/ui/components/ConditionForm.vue b/ui/components/ConditionForm.vue
index 263acb22..97537ab6 100644
--- a/ui/components/ConditionForm.vue
+++ b/ui/components/ConditionForm.vue
@@ -206,77 +206,37 @@
   </main>
 </template>
 
-<script setup>
+<script setup lang="ts">
 import { useStorage } from '@vueuse/core'
-const emitter = defineEmits(['cancel', 'submit'])
 import { decode } from '~/utils/importer'
+import type { ConditionItem, ImportedConditionItem } from '~/@types/conditions'
 
-const props = defineProps({
-  reference: {
-    type: String,
-    required: false,
-    default: null,
-  },
-  item: {
-    type: Object,
-    required: true,
-  },
-  addInProgress: {
-    type: Boolean,
-    required: false,
-    default: false,
-  },
-})
+const emitter = defineEmits<{
+  (e: 'cancel'): void
+  (e: 'submit', payload: { reference: string | null | undefined, item: ConditionItem }): void
+}>()
 
-const test_data = ref({ show: false, url: '', data: { status: null, data: {} }, in_progress: false })
+const props = defineProps<{
+  reference?: string | null
+  item: ConditionItem
+  addInProgress?: boolean
+}>()
 
 const toast = useNotification()
-const box = useConfirm()
-const form = reactive(JSON.parse(JSON.stringify(props.item)))
-const import_string = ref('')
 const showImport = useStorage('showImport', false)
+const box = useConfirm()
 
-const run_test = async () => {
-  if (!test_data.value.url) {
-    toast.error('The URL is required for testing.', { force: true })
-    return
-  }
+const form = reactive<ConditionItem>(JSON.parse(JSON.stringify(props.item)))
+const import_string = ref('')
+const test_data = ref<{
+  show: boolean,
+  url: string,
+  in_progress: boolean,
+  data: { status: boolean | null, data: Record<string, any> }
+}>({ show: false, url: '', in_progress: false, data: { status: null, data: {} } })
 
-  try {
-    new URL(test_data.value.url)
-  } catch (e) {
-    toast.error('The URL is invalid.', { force: true })
-    return
-  }
-
-  test_data.value.in_progress = true
-  test_data.value.data.status = null
-
-  try {
-    const response = await request('/api/conditions/test', {
-      method: 'POST',
-      body: JSON.stringify({
-        url: test_data.value.url,
-        condition: form.filter,
-      }),
-    })
-
-    const json = await response.json()
-    if (!response.ok) {
-      toast.error(json.message || json.error || 'Unknown error', { force: true })
-      return
-    }
-
-    test_data.value.data = json
-  } catch (e) {
-    toast.error(`Failed to test condition. ${error.message}`)
-  } finally {
-    test_data.value.in_progress = false
-  }
-}
-
-const checkInfo = async () => {
-  const required = ['name', 'filter', 'cli']
+const checkInfo = async (): Promise<void> => {
+  const required: (keyof ConditionItem)[] = ['name', 'filter', 'cli']
 
   for (const key of required) {
     if (!form[key]) {
@@ -285,15 +245,15 @@ const checkInfo = async () => {
     }
   }
 
-  if (form?.cli && '' !== form.cli) {
+  if (form.cli && '' !== form.cli.trim()) {
     const options = await convertOptions(form.cli)
-    if (null === options) {
+    if (options === null) {
       return
     }
     form.cli = form.cli.trim()
   }
 
-  let copy = JSON.parse(JSON.stringify(form))
+  const copy: ConditionItem = JSON.parse(JSON.stringify(form))
 
   for (const key in copy) {
     if (typeof copy[key] !== 'string') {
@@ -305,32 +265,68 @@ const checkInfo = async () => {
   emitter('submit', { reference: toRaw(props.reference), item: toRaw(copy) })
 }
 
-const convertOptions = async args => {
+const convertOptions = async (args: string): Promise<any | null> => {
   try {
     const response = await convertCliOptions(args)
     return response.opts
-  } catch (e) {
+  } catch (e: any) {
     toast.error(e.message)
   }
   return null
 }
 
-const importItem = async () => {
-  let val = import_string.value.trim()
+const run_test = async (): Promise<void> => {
+  if (!test_data.value.url) {
+    toast.error('The URL is required for testing.', { force: true })
+    return
+  }
+
+  try {
+    new URL(test_data.value.url)
+  } catch {
+    toast.error('The URL is invalid.', { force: true })
+    return
+  }
+
+  test_data.value.in_progress = true
+  test_data.value.data.status = null
+
+  try {
+    const response = await request('/api/conditions/test', {
+      method: 'POST',
+      body: JSON.stringify({ url: test_data.value.url, condition: form.filter })
+    })
+
+    const json = await response.json()
+    if (!response.ok) {
+      toast.error(json.message || json.error || 'Unknown error', { force: true })
+      return
+    }
+
+    test_data.value.data = json
+  } catch (error: any) {
+    toast.error(`Failed to test condition. ${error.message}`)
+  } finally {
+    test_data.value.in_progress = false
+  }
+}
+
+const importItem = async (): Promise<void> => {
+  const val = import_string.value.trim()
   if (!val) {
     toast.error('The import string is required.')
     return
   }
 
   try {
-    const item = decode(val)
+    const item = decode(val) as ImportedConditionItem
 
-    if (!item?._type || 'condition' !== item._type) {
+    if (!item?._type || item._type !== 'condition') {
       toast.error(`Invalid import string. Expected type 'condition', got '${item._type ?? 'unknown'}'.`)
       return
     }
 
-    if ((form.filter || form.cli) && false === box.confirm('Overwrite the current form fields?', true)) {
+    if ((form.filter || form.cli) && !box.confirm('Overwrite the current form fields?', true)) {
       return
     }
 
@@ -348,14 +344,14 @@ const importItem = async () => {
 
     import_string.value = ''
     showImport.value = false
-  } catch (e) {
+  } catch (e: any) {
     console.error(e)
     toast.error(`Failed to parse import string. ${e.message}`)
   }
 }
 
-const show_data = () => {
-  if (!test_data.value.data?.data || !Object.keys(test_data.value.data?.data).length) {
+const show_data = (): string => {
+  if (!test_data.value.data?.data || Object.keys(test_data.value.data.data).length === 0) {
     return 'No data to show.'
   }
 
diff --git a/ui/pages/conditions.vue b/ui/pages/conditions.vue
index 6c3c2a54..f590572d 100644
--- a/ui/pages/conditions.vue
+++ b/ui/pages/conditions.vue
@@ -16,7 +16,7 @@
               </button>
             </p>
             <p class="control">
-              <button class="button is-info" @click="reloadContent" :class="{ 'is-loading': isLoading }"
+              <button class="button is-info" @click="reloadContent(false)" :class="{ 'is-loading': isLoading }"
                 :disabled="!socket.isConnected || isLoading" v-if="items && items.length > 0">
                 <span class="icon"><i class="fas fa-refresh" /></span>
               </button>
@@ -30,8 +30,8 @@
       </div>
 
       <div class="column is-12" v-if="toggleForm">
-        <ConditionForm :addInProgress="addInProgress" :reference="itemRef" :item="item" @cancel="resetForm(true)"
-          @submit="updateItem" />
+        <ConditionForm :addInProgress="addInProgress" :reference="itemRef" :item="item as ConditionItem"
+          @cancel="resetForm(true)" @submit="updateItem" />
       </div>
 
       <div class="column is-12" v-if="!toggleForm">
@@ -114,18 +114,19 @@
   </div>
 </template>
 
-<script setup>
+<script setup lang="ts">
 import { request } from '~/utils/index'
 import { encode } from '~/utils/importer'
+import type { ConditionItem, ImportedConditionItem } from '~/@types/conditions'
 
 const toast = useNotification()
 const config = useConfigStore()
 const socket = useSocketStore()
 const box = useConfirm()
 
-const items = ref([])
-const item = ref({})
-const itemRef = ref("")
+const items = ref<ConditionItem[]>([])
+const item = ref<Partial<ConditionItem>>({})
+const itemRef = ref<string | null | undefined>("")
 const toggleForm = ref(false)
 const isLoading = ref(false)
 const initialLoad = ref(true)
@@ -146,15 +147,15 @@ watch(() => socket.isConnected, async () => {
   }
 })
 
-const reloadContent = async (fromMounted = false) => {
+
+const reloadContent = async (fromMounted = false): Promise<void> => {
   try {
     isLoading.value = true
-    const response = await request("/api/conditions")
+    const response = await request('/api/conditions')
 
     if (fromMounted && !response.ok) {
       return
     }
-
     const data = await response.json()
     if (data.length < 1) {
       return
@@ -162,17 +163,16 @@ const reloadContent = async (fromMounted = false) => {
 
     items.value = data
   } catch (e) {
-    if (fromMounted) {
-      return
+    if (!fromMounted) {
+      console.error(e)
+      toast.error('Failed to fetch page content.')
     }
-    console.error(e)
-    toast.error("Failed to fetch page content.")
   } finally {
     isLoading.value = false
   }
 }
 
-const resetForm = (closeForm = false) => {
+const resetForm = (closeForm = false): void => {
   item.value = {}
   itemRef.value = null
   addInProgress.value = false
@@ -181,30 +181,29 @@ const resetForm = (closeForm = false) => {
   }
 }
 
-const updateItems = async items => {
-  let data
+const updateItems = async (newItems: ConditionItem[]): Promise<boolean> => {
+  let data: any
+
   try {
     addInProgress.value = true
 
-    const local_items = []
-    for (const item of items) {
-      const { id, name, filter, cli } = item
+    const validItems = newItems.map(({ id, name, filter, cli }) => {
       if (!name || !filter || !cli) {
-        toast.error("Name, filter and cli are required.")
-        return false
+        toast.error('Name, filter and cli are required.')
+        throw new Error('Missing fields')
       }
-      local_items.push({ id, name, filter, cli })
-    }
-
-    const response = await request("/api/conditions", {
-      method: "PUT",
-      headers: { "Content-Type": "application/json" },
-      body: JSON.stringify(local_items),
+      return { id, name, filter, cli }
     })
 
-    data = await response.json()
+    const response = await request('/api/conditions', {
+      method: 'PUT',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify(validItems),
+    })
 
-    if (200 !== response.status) {
+    data = await response.json() as ConditionItem[]
+
+    if (response.status !== 200) {
       toast.error(`Failed to update items. ${data.error}`)
       return false
     }
@@ -212,44 +211,46 @@ const updateItems = async items => {
     items.value = data
     resetForm(true)
     return true
-  } catch (e) {
-    toast.error(`Failed to update items. ${data?.error}. ${e.message}`)
+  } catch (e: any) {
+    toast.error(`Failed to update items. ${data?.error ?? ''} ${e.message}`)
   } finally {
     addInProgress.value = false
   }
+
+  return false
 }
 
-const deleteItem = async (item) => {
-  if (true !== box.confirm(`Delete '${item.name}'?`, true)) {
+const deleteItem = async (cond: ConditionItem): Promise<void> => {
+  if (!box.confirm(`Delete '${cond.name}'?`, true)) {
     return
   }
 
-  const index = items.value.findIndex((t) => t?.id === item.id)
-  if (index > -1) {
-    items.value.splice(index, 1)
-  } else {
-    toast.error("Item not found.")
+  const index = items.value.findIndex(t => t?.id === cond.id)
+  if (-1 === index) {
+    toast.error('Item not found.')
     return
   }
 
+  items.value.splice(index, 1)
   const status = await updateItems(items.value)
-
-  if (!status) {
-    return
+  if (status) {
+    toast.success('Item deleted.')
   }
-
-  toast.success("Item deleted.")
 }
 
-const updateItem = async ({ reference, item }) => {
-  item = cleanObject(item, remove_keys)
+const updateItem = async ({ reference, item: updatedItem, }: {
+  reference: string | null | undefined,
+  item: ConditionItem
+}): Promise<void> => {
+  updatedItem = cleanObject(updatedItem, remove_keys)
+
   if (reference) {
     const index = items.value.findIndex(t => t?.id === reference)
-    if (index > -1) {
-      items.value[index] = item
+    if (index !== -1) {
+      items.value[index] = updatedItem
     }
   } else {
-    items.value.push(item)
+    items.value.push(updatedItem)
   }
 
   const status = await updateItems(items.value)
@@ -257,36 +258,32 @@ const updateItem = async ({ reference, item }) => {
     return
   }
 
-  toast.success(`Item ${reference ? "updated" : "added"}.`)
+  toast.success(`Item ${reference ? 'updated' : 'added'}.`)
   resetForm(true)
 }
 
-const editItem = _item => {
-  item.value = _item
+const editItem = (_item: ConditionItem): void => {
+  item.value = { ..._item }
   itemRef.value = _item.id
   toggleForm.value = true
 }
 
-onMounted(async () => (socket.isConnected ? await reloadContent(true) : ""))
+const exportItem = (cond: ConditionItem): void => {
+  const clone: Partial<ImportedConditionItem> = JSON.parse(JSON.stringify(cond))
+  delete clone.id
 
-const exportItem = item => {
-  let data = JSON.parse(JSON.stringify(item))
-  if ("id" in data) {
-    delete data['id']
-  }
+  const userData: ImportedConditionItem = {
+    ...Object.fromEntries(Object.entries(clone).filter(([_, v]) => !!v)),
+    _type: 'condition',
+    _version: '1.0',
+  } as ImportedConditionItem
 
-  let userData = {}
-
-  for (const key of Object.keys(data)) {
-    if (!data[key]) {
-      continue
-    }
-    userData[key] = data[key]
-  }
-
-  userData['_type'] = 'condition'
-  userData['_version'] = '1.0'
-
-  return copyText(encode(userData))
+  copyText(encode(userData))
 }
+
+onMounted(async () => {
+  if (socket.isConnected) {
+    await reloadContent(true)
+  }
+})
 </script>

From dfe1acbec438bf8331bf77b75cf7d9242ca9bc04 Mon Sep 17 00:00:00 2001
From: arabcoders <admin@arabcoders.org>
Date: Fri, 11 Jul 2025 19:46:41 +0300
Subject: [PATCH 6/6] minor design update

---
 ui/components/FloatingImage.vue |  82 ++++++++++-----------
 ui/components/GetInfo.vue       |  72 ++++++++----------
 ui/components/LateLoader.vue    | 125 ++++++++++++++++----------------
 ui/components/Message.vue       |  82 ++++++++-------------
 ui/components/NewDownload.vue   |  70 ++++++------------
 ui/components/Settings.vue      |  43 ++++++-----
 ui/pages/index.vue              |  42 ++++++++---
 ui/utils/utils.ts               |  23 +++++-
 8 files changed, 265 insertions(+), 274 deletions(-)

diff --git a/ui/components/FloatingImage.vue b/ui/components/FloatingImage.vue
index 2c346b57..ff49e122 100644
--- a/ui/components/FloatingImage.vue
+++ b/ui/components/FloatingImage.vue
@@ -19,40 +19,32 @@
   </vTooltip>
 </template>
 
-<script setup>
+<script setup lang="ts">
+import { ref } from 'vue'
 import { request } from '~/utils/index'
 
-const props = defineProps({
-  image: {
-    type: String,
-    required: false,
-  },
-  title: {
-    type: String,
-    required: false
-  },
-  loader: {
-    Type: Function,
-    required: false,
-  },
-  privacy: {
-    type: Boolean,
-    required: false,
-    default: true
-  }
-});
+const props = defineProps < {
+  image?: string
+  title?: string
+  loader?: () => Promise < void>
+    privacy ?: boolean
+} > ()
 
 const cache = useSessionCache()
 const toast = useNotification()
-const url = ref()
+const url = ref < string | null > (null)
 const error = ref(false)
 const isPreloading = ref(false)
 
-let loadTimer = null;
-const cancelRequest = new AbortController();
+let loadTimer: ReturnType<typeof setTimeout> | null = null
+const cancelRequest = new AbortController()
 
-const defaultLoader = async () => {
+const defaultLoader = async (): Promise<void> => {
   try {
+    if (!props.image) {
+      return
+    }
+
     if (cache.has(props.image)) {
       url.value = cache.get(props.image)
       return
@@ -60,18 +52,16 @@ const defaultLoader = async () => {
 
     const response = await request(props.image, { signal: cancelRequest.signal })
 
-    if (200 !== response.status) {
+    if (!response.ok) {
       toast.error(`ImageView Request error. ${response.status}: ${response.statusText}`)
-      return;
+      return
     }
 
-    const objUrl = URL.createObjectURL(await response.blob());
-
+    const objUrl = URL.createObjectURL(await response.blob())
     cache.set(props.image, objUrl)
-
-    url.value = objUrl;
-  } catch (e) {
-    if ('not_needed' === e) {
+    url.value = objUrl
+  } catch (e: any) {
+    if (e === 'not_needed') {
       return
     }
     console.error(e)
@@ -81,25 +71,28 @@ const defaultLoader = async () => {
   }
 }
 
-const stopTimer = async () => {
+const stopTimer = async (): Promise<void> => {
   if (error.value) {
     return
   }
 
   if (url.value) {
     isPreloading.value = false
-    url.value = null;
-    return;
+    url.value = null
+    return
   }
 
   await awaiter(() => isPreloading.value)
-  clearTimeout(loadTimer)
+  if (loadTimer !== null) {
+    clearTimeout(loadTimer)
+  }
+
   isPreloading.value = false
-  url.value = null;
+  url.value = null
   cancelRequest.abort('not_needed')
 }
 
-const loadContent = async () => {
+const loadContent = async (): Promise<void> => {
   if (props.loader) {
     return props.loader()
   }
@@ -107,11 +100,18 @@ const loadContent = async () => {
   return defaultLoader()
 }
 
-const clearCache = async () => {
+const clearCache = async (): Promise<void> => {
+  if (!props.image) return
+
   cache.remove(props.image)
-  url.value = '';
+  url.value = ''
   return loadContent()
 }
 
-const pImg = e => e.target.naturalHeight > e.target.naturalWidth ? e.target.classList.add('image-portrait') : null
+const pImg = (e: Event): void => {
+  const target = e.target as HTMLImageElement
+  if (target.naturalHeight > target.naturalWidth) {
+    target.classList.add('image-portrait')
+  }
+}
 </script>
diff --git a/ui/components/GetInfo.vue b/ui/components/GetInfo.vue
index d1dccd20..4dee4779 100644
--- a/ui/components/GetInfo.vue
+++ b/ui/components/GetInfo.vue
@@ -1,3 +1,9 @@
+<style scoped>
+code {
+  color: var(--bulma-code) !important
+}
+</style>
+
 <template>
   <div>
     <div class="modal is-active" v-if="false === externalModel">
@@ -31,62 +37,41 @@
   </div>
 </template>
 
-<style scoped>
-code {
-  color: var(--bulma-code) !important
-}
-</style>
 <script setup lang="ts">
+import { ref, onMounted, onBeforeUnmount } from 'vue'
 import { request } from '~/utils/index'
 
 const toast = useNotification()
+const emitter = defineEmits<{ (e: 'closeModel'): void }>()
 
-const emitter = defineEmits(['closeModel'])
-const isLoading = ref<Boolean>(false)
+const props = defineProps<{
+  link?: string
+  preset?: string
+  useUrl?: boolean
+  externalModel?: boolean
+}>()
+
+const isLoading = ref<boolean>(false)
 const data = ref<any>({})
 
-const props = defineProps({
-  link: {
-    type: String,
-    default: '',
-    required: false,
-  },
-  preset: {
-    type: String,
-    default: '',
-    required: false,
-  },
-  useUrl: {
-    type: Boolean,
-    default: false,
-    required: false,
-  },
-  externalModel: {
-    type: Boolean,
-    default: false,
-    required: false,
-  },
-})
-
-const handle_event = (e: KeyboardEvent) => {
-  if (e.key !== 'Escape') {
-    return
+const handle_event = (e: KeyboardEvent): void => {
+  if (e.key === 'Escape') {
+    emitter('closeModel')
   }
-  emitter('closeModel')
 }
 
-onMounted(async () => {
+onMounted(async (): Promise<void> => {
   document.addEventListener('keydown', handle_event)
 
-  let url = props.useUrl ? props.link : '/api/yt-dlp/url/info';
+  let url = props.useUrl ? props.link || '' : '/api/yt-dlp/url/info'
 
   if (!props.useUrl) {
-    let params = new URLSearchParams();
+    const params = new URLSearchParams()
     if (props.preset) {
-      params.append('preset', props.preset);
+      params.append('preset', props.preset)
     }
-    params.append('url', props.link);
-    url += '?' + params.toString();
+    params.append('url', props.link || '')
+    url += '?' + params.toString()
   }
 
   try {
@@ -96,10 +81,9 @@ onMounted(async () => {
 
     try {
       data.value = JSON.parse(body)
-    } catch (e) {
+    } catch {
       data.value = body
     }
-
   } catch (e: any) {
     console.error(e)
     toast.error(`Error: ${e.message}`)
@@ -108,5 +92,7 @@ onMounted(async () => {
   }
 })
 
-onBeforeUnmount(() => document.removeEventListener('keydown', handle_event))
+onBeforeUnmount(() => {
+  document.removeEventListener('keydown', handle_event)
+})
 </script>
diff --git a/ui/components/LateLoader.vue b/ui/components/LateLoader.vue
index f3921e86..337494f7 100644
--- a/ui/components/LateLoader.vue
+++ b/ui/components/LateLoader.vue
@@ -1,76 +1,77 @@
 <template>
-  <div ref="targetEl" :style="`min-height:${fixedMinHeight ? fixedMinHeight : (minHeight)}px`">
-    <slot v-if="shouldRender"/>
+  <div ref="targetEl" :style="`min-height:${fixedMinHeight || props.minHeight || 0}px`">
+    <slot v-if="shouldRender" />
   </div>
 </template>
 
-<script>
-import {nextTick, ref} from 'vue'
-import {useIntersectionObserver} from '@vueuse/core'
+<script setup lang="ts">
+import { ref, nextTick, onBeforeUnmount } from 'vue'
+import { useIntersectionObserver } from '@vueuse/core'
 
-function onIdle(cb = () => {
-}) {
-  if ("requestIdleCallback" in window) {
-    window.requestIdleCallback(cb);
+const props = defineProps<{
+  renderOnIdle?: boolean
+  unrender?: boolean
+  minHeight?: number
+  unrenderDelay?: number
+}>()
+
+const shouldRender = ref(false)
+const targetEl = ref<HTMLElement | null>(null)
+const fixedMinHeight = ref(0)
+
+let unrenderTimer: ReturnType<typeof setTimeout> | null = null
+let renderTimer: ReturnType<typeof setTimeout> | null = null
+
+function onIdle(cb: () => void): void {
+  if ('requestIdleCallback' in window) {
+    (window as any).requestIdleCallback(cb)
   } else {
-    setTimeout(() => nextTick(cb), 300);
+    setTimeout(() => nextTick(cb), 300)
   }
 }
 
-export default {
-  props: {
-    renderOnIdle: Boolean,
-    unrender: Boolean,
-    minHeight: Number,
-    unrenderDelay: {
-      type: Number,
-      default: 6000,
-    },
-  },
-  setup(props) {
-    const shouldRender = ref(false);
-    const targetEl = ref();
-    const fixedMinHeight = ref(0);
-    let unrenderTimer;
-    let renderTimer;
+const { stop } = useIntersectionObserver(targetEl, ([{ isIntersecting }]) => {
+  if (isIntersecting) {
+    if (unrenderTimer) clearTimeout(unrenderTimer)
 
-    const {stop} = useIntersectionObserver(targetEl, ([{isIntersecting}]) => {
-          if (isIntersecting) {
-            // perhaps the user re-scrolled to a component that was set to unrender. In that case stop the un-rendering timer
-            clearTimeout(unrenderTimer);
-            // if we're dealing under-rendering lets add a waiting period of 200ms before rendering.
-            // If a component enters the viewport and also leaves it within 200ms it will not render at all.
-            // This saves work and improves performance when user scrolls very fast
-            renderTimer = setTimeout(() => (shouldRender.value = true), props.unrender ? 200 : 0);
-            shouldRender.value = true;
-            if (!props.unrender) {
-              stop();
-            }
-          } else if (props.unrender) {
-            // if the component was set to render, cancel that
-            clearTimeout(renderTimer);
-            unrenderTimer = setTimeout(() => {
-              if (targetEl.value?.clientHeight) {
-                fixedMinHeight.value = targetEl.value.clientHeight;
-              }
-              shouldRender.value = false;
-            }, props.unrenderDelay);
-          }
-        }, {
-          rootMargin: "600px",
-        }
-    );
+    renderTimer = setTimeout(() => { shouldRender.value = true }, props.unrender ? 200 : 0)
 
-    if (props.renderOnIdle) {
-      onIdle(() => {
-        shouldRender.value = true;
-        if (!props.unrender) {
-          stop();
-        }
-      });
+    shouldRender.value = true
+
+    if (!props.unrender) {
+      stop()
+    }
+  }
+  else if (props.unrender) {
+    if (renderTimer) {
+      clearTimeout(renderTimer)
     }
 
-    return {targetEl, shouldRender, fixedMinHeight};
-  },
-};
+    unrenderTimer = setTimeout(() => {
+      if (targetEl.value?.clientHeight) {
+        fixedMinHeight.value = targetEl.value.clientHeight
+      }
+      shouldRender.value = false
+    }, props.unrenderDelay ?? 6000)
+  }
+}, { rootMargin: '600px', })
+
+if (props.renderOnIdle) {
+  onIdle(() => {
+    shouldRender.value = true
+    if (!props.unrender) {
+      stop()
+    }
+  })
+}
+
+onBeforeUnmount(() => {
+  if (renderTimer) {
+    clearTimeout(renderTimer)
+
+  }
+  if (unrenderTimer) {
+    clearTimeout(unrenderTimer)
+  }
+})
 </script>
diff --git a/ui/components/Message.vue b/ui/components/Message.vue
index 4209ce2d..ff4293be 100644
--- a/ui/components/Message.vue
+++ b/ui/components/Message.vue
@@ -1,67 +1,45 @@
 <template>
-  <div class="notification" :class="message_class">
-    <button class="delete" @click="$emit('close')" v-if="!useToggle && useClose"></button>
-    <div @click="$emit('toggle')" class="is-clickable is-pulled-right is-unselectable" v-if="useToggle">
+  <div class="notification" :class="props.message_class">
+    <button class="delete" @click="emit('close')" v-if="!props.useToggle && props.useClose"></button>
+
+    <div @click="emit('toggle')" class="is-clickable is-pulled-right is-unselectable" v-if="props.useToggle">
       <span class="icon">
-        <i class="fas" :class="{ 'fa-arrow-up': toggle, 'fa-arrow-down': !toggle }"></i>
+        <i class="fas" :class="{ 'fa-arrow-up': props.toggle, 'fa-arrow-down': !props.toggle }"></i>
       </span>
-      <span>{{ toggle ? 'Close' : 'Open' }}</span>
+      <span>{{ props.toggle ? 'Close' : 'Open' }}</span>
     </div>
-    <div class="notification-title is-unselectable" :class="{ 'is-clickable': useToggle }" v-if="title || icon"
-      @click="useToggle ? $emit('toggle', toggle) : null">
-      <template v-if="icon">
+
+    <div class="notification-title is-unselectable" :class="{ 'is-clickable': props.useToggle }"
+      v-if="props.title || props.icon" @click="props.useToggle ? emit('toggle', props.toggle) : null">
+      <template v-if="props.icon">
         <span class="icon-text">
-          <span class="icon"><i :class="icon"></i></span>
-          <span>{{ title }}</span>
+          <span class="icon"><i :class="props.icon"></i></span>
+          <span>{{ props.title }}</span>
         </span>
       </template>
-      <template v-else>{{ title }}</template>
+      <template v-else>{{ props.title }}</template>
     </div>
-    <div class="notification-content content" v-if="false === useToggle || toggle">
-      <template v-if="message">{{ message }}</template>
+
+    <div class="notification-content content" v-if="!props.useToggle || props.toggle">
+      <template v-if="props.message">{{ props.message }}</template>
       <slot />
     </div>
   </div>
 </template>
 
-<script setup>
-defineProps({
-  title: {
-    type: String,
-    default: null,
-    required: false
-  },
-  icon: {
-    type: String,
-    default: null,
-    required: false
-  },
-  message: {
-    type: String,
-    default: null,
-    required: false
-  },
-  message_class: {
-    type: String,
-    default: 'is-info',
-    required: false
-  },
-  useToggle: {
-    type: Boolean,
-    default: false,
-    required: false
-  },
-  toggle: {
-    type: Boolean,
-    default: false,
-    required: false
-  },
-  useClose: {
-    type: Boolean,
-    default: false,
-    required: false
-  }
-})
+<script setup lang="ts">
+const props = defineProps < {
+  title?: string
+  icon?: string
+  message?: string
+  message_class?: string
+  useToggle?: boolean
+  toggle?: boolean
+  useClose?: boolean
+} > ()
 
-defineEmits(['toggle', 'close'])
+const emit = defineEmits < {
+  (e: 'toggle', value ?: boolean): void
+  (e: 'close'): void
+}> ()
 </script>
diff --git a/ui/components/NewDownload.vue b/ui/components/NewDownload.vue
index 5238feba..6f6f70cc 100644
--- a/ui/components/NewDownload.vue
+++ b/ui/components/NewDownload.vue
@@ -7,7 +7,7 @@
             <div class="column is-12">
               <label class="label is-inline is-unselectable" for="url">
                 <span class="icon"><i class="fa-solid fa-link" /></span>
-                URLs. separated by <span class="is-bold">{{ getSeparatorsName(separator) }}</span>
+                URLs separated by <span class="is-bold">{{ getSeparatorsName(separator) }}</span>
               </label>
               <div class="field is-grouped">
                 <div class="control is-expanded">
@@ -69,18 +69,11 @@
               </div>
             </div>
 
-            <div class="column is-narrow" v-if="!config.app.basic_mode"
-              v-tooltip="`Automatically start downloading after adding. [${auto_start ? 'Enabled' : 'Disabled'}]`">
-              <input id="auto_start" type="checkbox" v-model="auto_start" :disabled="addInProgress"
-                class="switch is-success" />
-              <label for="auto_start" class="is-unselectable"></label>
-            </div>
-
             <div class="column" v-if="!config.app.basic_mode">
               <button type="button" class="button is-info" @click="showAdvanced = !showAdvanced"
                 :class="{ 'is-loading': !socket.isConnected }" :disabled="!socket.isConnected">
                 <span class="icon"><i class="fa-solid fa-cog" /></span>
-                <span>Options</span>
+                <span>Advanced Options</span>
               </button>
             </div>
 
@@ -96,42 +89,30 @@
 
           <div class="columns is-multiline is-mobile" v-if="showAdvanced && !config.app.basic_mode">
             <div class="column is-4-tablet is-12-mobile" v-if="!config.app.basic_mode">
-              <div class="field has-addons">
-                <div class="control">
-                  <label class="button is-static">
-                    <span class="icon"><i class="fa-solid fa-object-ungroup" /></span>
-                    <span>Separator</span>
-                  </label>
-                </div>
-                <div class="control is-expanded">
-                  <div class="select is-fullwidth">
-                    <select class="is-fullwidth" :disabled="!socket.isConnected || addInProgress" v-model="separator">
-                      <option v-for="(sep, index) in separators" :key="`sep-${index}`" :value="sep.value">
-                        {{ sep.name }} ({{ sep.value }})
-                      </option>
-                    </select>
-                  </div>
-                </div>
+              <div class="field">
+                <input id="auto_start" type="checkbox" v-model="auto_start" :disabled="addInProgress"
+                  class="switch is-success" />
+                <label for="auto_start" class="is-unselectable">
+                  {{ auto_start ? 'Auto start' : 'Manual start' }}
+                </label>
               </div>
-              <span class="help is-bold is-unselectable">
+              <span class="help">
                 <span class="icon"><i class="fa-solid fa-info" /></span>
-                <span>Use this to separate multiple URLs in the input field.</span>
+                <span class="is-bold">Whether to start the download automatically or wait.</span>
               </span>
             </div>
 
             <div class="column is-8-tablet is-12-mobile">
               <div class="field has-addons">
                 <div class="control">
-                  <label for="output_format" v-tooltip="'Default: ' + config.app.output_template"
-                    class="button is-static is-unselectable">
+                  <label for="output_format" class="button is-static is-unselectable">
                     <span class="icon"><i class="fa-solid fa-file" /></span>
                     <span>Template</span>
                   </label>
                 </div>
                 <div class="control is-expanded">
                   <input type="text" class="input" v-model="form.template" id="output_format"
-                    :disabled="!socket.isConnected || addInProgress"
-                    placeholder="Uses default output template naming if empty.">
+                    :disabled="!socket.isConnected || addInProgress" :placeholder="get_output_template()">
                 </div>
               </div>
               <span class="help is-bold is-unselectable">
@@ -251,6 +232,7 @@
 import 'assets/css/bulma-switch.css'
 import { useStorage } from '@vueuse/core'
 import type { item_request } from '~/@types/item'
+import { getSeparatorsName, separators } from '~/utils/utils'
 
 const props = defineProps<{ item?: Partial<item_request> }>()
 const emitter = defineEmits<{
@@ -261,20 +243,6 @@ const emitter = defineEmits<{
 const config = useConfigStore()
 const socket = useSocketStore()
 const toast = useNotification()
-const box = useConfirm()
-
-const separators = [
-  { name: 'Comma', value: ',', },
-  { name: 'Semicolon', value: ';', },
-  { name: 'Colon', value: ':', },
-  { name: 'Pipe', value: '|', },
-  { name: 'Space', value: ' ', }
-]
-
-const getSeparatorsName = (value: string): string => {
-  const sep = separators.find(s => s.value === value)
-  return sep ? `${sep.name} (${value})` : 'Unknown'
-}
 
 const showAdvanced = useStorage<boolean>('show_advanced', false)
 const separator = useStorage<string>('url_separator', separators[0].value)
@@ -384,7 +352,6 @@ const reset_config = () => {
   } as item_request
 
   showAdvanced.value = false
-  separator.value = separators[0].value
 
   toast.success('Local configuration has been reset.')
   dialog_confirm.value.visible = false
@@ -477,4 +444,15 @@ const removeFromArchive = async (url: string) => {
     toast.error(`Error: ${e.message}`)
   }
 }
+
+const get_output_template = () => {
+  if (form.value.preset && !hasFormatInConfig.value) {
+    const preset = config.presets.find(p => p.name === form.value.preset)
+    if (preset && preset.template) {
+      return preset.template
+    }
+  }
+  return config.app.output_template || '%(title)s.%(ext)s'
+}
+
 </script>
diff --git a/ui/components/Settings.vue b/ui/components/Settings.vue
index 336b22d5..658556dc 100644
--- a/ui/components/Settings.vue
+++ b/ui/components/Settings.vue
@@ -51,7 +51,7 @@
 
               <div class="field">
                 <label class="label is-unselectable" for="random_bg_opacity">
-                  Background visibility <code>{{ parseFloat(1.0 - bg_opacity).toFixed(2) }}</code>
+                  Background visibility <code>{{ parseFloat(String(1.0 - bg_opacity)).toFixed(2) }}</code>
                 </label>
                 <div class="control">
                   <input id="random_bg_opacity" style="width: 100%" type="range" v-model="bg_opacity" min="0.50"
@@ -69,6 +69,19 @@
                 </div>
               </div>
 
+              <div class="field">
+                <label class="label is-unselectable" for="show_thumbnail">URLs Separator</label>
+                <div class="control">
+                  <div class="select is-fullwidth">
+                    <select class="is-fullwidth" v-model="separator">
+                      <option v-for="(sep, index) in separators" :key="`sep-${index}`" :value="sep.value">
+                        {{ sep.name }} ({{ sep.value }})
+                      </option>
+                    </select>
+                  </div>
+                </div>
+              </div>
+
             </div>
             <div class="column is-6">
               <div class="field">
@@ -126,24 +139,20 @@
   </div>
 </template>
 
-<script setup>
+<script setup lang="ts">
 import { useStorage } from '@vueuse/core'
 import { POSITION } from 'vue-toastification'
+import { separators } from '~/utils/utils'
 
-defineProps({
-  isLoading: {
-    type: Boolean,
-    required: true
-  }
-})
-
-const bg_enable = useStorage('random_bg', true)
-const bg_opacity = useStorage('random_bg_opacity', 0.95)
-const selectedTheme = useStorage('theme', 'auto')
-const allow_toasts = useStorage('allow_toasts', true)
-const reduce_confirm = useStorage('reduce_confirm', false)
-const toast_position = useStorage('toast_position', POSITION.TOP_RIGHT)
-const toast_dismiss_on_click = useStorage('toast_dismiss_on_click', true)
-const show_thumbnail = useStorage('show_thumbnail', true)
+defineProps<{ isLoading: boolean }>()
 
+const bg_enable = useStorage<boolean>('random_bg', true)
+const bg_opacity = useStorage<number>('random_bg_opacity', 0.95)
+const selectedTheme = useStorage<'auto' | 'light' | 'dark'>('theme', 'auto')
+const allow_toasts = useStorage<boolean>('allow_toasts', true)
+const reduce_confirm = useStorage<boolean>('reduce_confirm', false)
+const toast_position = useStorage<POSITION>('toast_position', POSITION.TOP_RIGHT)
+const toast_dismiss_on_click = useStorage<boolean>('toast_dismiss_on_click', true)
+const show_thumbnail = useStorage<boolean>('show_thumbnail', true)
+const separator = useStorage<string>('url_separator', separators[0].value)
 </script>
diff --git a/ui/pages/index.vue b/ui/pages/index.vue
index 9e5d5e27..af30088a 100644
--- a/ui/pages/index.vue
+++ b/ui/pages/index.vue
@@ -18,27 +18,28 @@
             </p>
 
             <p class="control">
-              <button class="button is-danger is-light" v-tooltip.bottom="'Filter'"
-                @click="toggleFilter = !toggleFilter">
+              <button class="button is-danger is-light" @click="toggleFilter = !toggleFilter">
                 <span class="icon"><i class="fas fa-filter" /></span>
+                <span class="is-hidden-mobile">Filter</span>
               </button>
             </p>
 
             <p class="control" v-if="!config.app.basic_mode && false === config.app.basic_mode">
-              <button class="button is-warning" @click="pauseDownload" v-if="false === config.paused"
-                v-tooltip.bottom="'Pause non-active downloads.'">
+              <button class="button is-warning" @click="pauseDownload" v-if="false === config.paused">
                 <span class="icon"><i class="fas fa-pause" /></span>
+                <span class="is-hidden-mobile">Pause</span>
               </button>
               <button class="button is-danger" @click="socket.emit('resume', {})" v-else
                 v-tooltip.bottom="'Resume downloading.'">
                 <span class="icon"><i class="fas fa-play" /></span>
+                <span class="is-hidden-mobile">Resume</span>
               </button>
             </p>
 
             <p class="control" v-if="!config.app.basic_mode && false === config.app.basic_mode">
-              <button v-tooltip.bottom="'Toggle download form'" class="button is-primary has-tooltip-bottom"
-                @click="config.showForm = !config.showForm">
+              <button class="button is-primary has-tooltip-bottom" @click="config.showForm = !config.showForm">
                 <span class="icon"><i class="fa-solid fa-plus" /></span>
+                <span class="is-hidden-mobile">New Download</span>
               </button>
             </p>
 
@@ -47,6 +48,7 @@
                 @click="() => changeDisplay()">
                 <span class="icon"><i class="fa-solid"
                     :class="{ 'fa-table': display_style === 'cards', 'fa-table-list': display_style === 'list' }" /></span>
+                <span class="is-hidden-mobile">{{ display_style === 'cards' ? 'Cards' : 'List' }}</span>
               </button>
             </p>
 
@@ -70,6 +72,9 @@
       @getItemInfo="(id: string) => view_info(`/api/history/${id}`, true)" @clear_search="query = ''" />
     <GetInfo v-if="info_view.url" :link="info_view.url" :preset="info_view.preset" :useUrl="info_view.useUrl"
       @closeModel="close_info()" />
+    <ConfirmDialog v-if="dialog_confirm.visible" :visible="dialog_confirm.visible" :title="dialog_confirm.title"
+      :html_message="dialog_confirm.html_message" :options="dialog_confirm.options" @confirm="dialog_confirm.confirm"
+      @cancel="() => dialog_confirm.visible = false" />
   </div>
 </template>
 
@@ -91,9 +96,16 @@ const info_view = ref({
   preset: '',
   useUrl: false,
 }) as Ref<{ url: string, preset: string, useUrl: boolean }>
-const item_form = ref<item_request|object>({})
+const item_form = ref<item_request | object>({})
 const query = ref()
 const toggleFilter = ref(false)
+const dialog_confirm = ref({
+  visible: false,
+  title: 'Confirm Action',
+  confirm: () => { },
+  html_message: '',
+  options: [],
+})
 
 watch(toggleFilter, () => {
   if (!toggleFilter.value) {
@@ -123,12 +135,18 @@ watch(() => stateStore.queue, () => {
   useHead({ title: `YTPTube: ( ${Object.keys(stateStore.queue).length || 0}/${config.app.max_workers}  | ${Object.keys(stateStore.history).length || 0} )` })
 }, { deep: true })
 
-const pauseDownload = () => {
-  if (false === box.confirm('Pause all non-active downloads?')) {
-    return false
-  }
 
-  socket.emit('pause', {})
+const pauseDownload = () => {
+  dialog_confirm.value.visible = true
+  dialog_confirm.value.html_message = `<span class="is-bold">Pause All non-active downloads?</span><br>
+  <span class="has-text-danger">
+    <span class="icon"><i class="fa-solid fa-exclamation-triangle"></i></span>
+    <span>This will not stop downloads that are currently in progress.</span>
+  </span>`
+  dialog_confirm.value.confirm = () => {
+    socket.emit('pause', {})
+    dialog_confirm.value.visible = false
+  }
 }
 
 const close_info = () => {
diff --git a/ui/utils/utils.ts b/ui/utils/utils.ts
index e873864d..5a840bba 100644
--- a/ui/utils/utils.ts
+++ b/ui/utils/utils.ts
@@ -1,5 +1,26 @@
 import type { convert_args_response } from "~/@types/responses";
 
+const separators = [
+  { name: 'Comma', value: ',', },
+  { name: 'Semicolon', value: ';', },
+  { name: 'Colon', value: ':', },
+  { name: 'Pipe', value: '|', },
+  { name: 'Space', value: ' ', }
+]
+
+/**
+ * Get the name of a separator based on its value
+ *
+ * @param {string} value - The separator value
+ *
+ * @returns {string} The name of the separator, or 'Unknown' if not found
+ */
+const getSeparatorsName = (value: string): string => {
+  const sep = separators.find(s => s.value === value)
+  return sep ? `${sep.name} (${value})` : 'Unknown'
+}
+
+
 /**
  * Convert options to JSON
  *
@@ -21,4 +42,4 @@ const convertCliOptions = async (opts: string): Promise<convert_args_response> =
   return data
 }
 
-export { convertCliOptions }
+export { convertCliOptions, separators, getSeparatorsName }