[FIX] update some web related design choices and improve messaging

ui/app/components/ConditionForm.vue

@@ -153,12 +153,20 @@
                       </div>
                     </div>
                   </div>
-                  <span class="help is-bold">
-                    <span class="icon"><i class="fa-solid fa-info" /></span>
-                    <span>
-                      For advanced users only. This feature is meant to be expanded later. the only supported key right
-                      now. <code>ignore_download</code> with value of <code>true</code>. Keys must be lowercase with
-                      underscores (e.g., custom_field).</span>
+                  <span class="help ">
+                    <div class="message is-info">
+                      <div class="message-body content pl-0 is-small pt-1">
+                        <ul>
+                          <li>For advanced users only. This feature is meant to be expanded later.</li>
+                          <li>Keys must be lowercase with underscores (e.g., custom_field).</li>
+                          <li>You must click on Add to actually add the option.</li>
+                          <li>The key <code>ignore_download</code> with value of <code>true</code> will instruct
+                            <b>YTPTube</b> to ignore the download and directly mark the item as archived. this is useful
+                            to skip certain kind of downloads.
+                          </li>
+                        </ul>
+                      </div>
+                    </div>
                   </span>
                 </div>
               </div>
@@ -268,7 +276,7 @@ import { useStorage } from '@vueuse/core'
 import TextareaAutocomplete from '~/components/TextareaAutocomplete.vue'
 import type { AutoCompleteOptions } from '~/types/autocomplete';
 import type { ConditionItem, ImportedConditionItem } from '~/types/conditions'
-import {useConfirm} from '~/composables/useConfirm'
+import { useConfirm } from '~/composables/useConfirm'
 
 const emitter = defineEmits<{
   (e: 'cancel'): void
@@ -325,7 +333,7 @@ const checkInfo = async (): Promise<void> => {
   }
 
   if ((!form.cli || '' === form.cli.trim()) && Object.keys(form.extras).length < 1) {
-    toast.error('Either command options for yt-dlp or at least one extra option is required.')
+    toast.error('Command options for yt-dlp or at least one extra option is required.')
     return
   }
 
@@ -544,4 +552,5 @@ const updateExtraValue = (key: string, event: Event): void => {
   const value = target.value.trim()
   form.extras[key] = value ? parseValue(value) : ''
 }
+
 </script>

ui/app/components/GetInfo.vue

@@ -1,45 +1,9 @@
-<style scoped>
-code {
-  color: var(--bulma-code) !important
-}
-</style>
-
 <template>
-  <div>
-    <div class="modal is-active" v-if="false === externalModel">
-      <div class="modal-background" @click="emitter('closeModel')"></div>
-      <div class="modal-content modal-content-max">
-        <div style="font-size:30vh; width: 99%" class="has-text-centered" v-if="isLoading">
-          <i class="fas fa-circle-notch fa-spin"></i>
-        </div>
-        <div v-else>
-          <div class="content p-0 m-0" style="position: relative">
-            <pre><code class="p-4 is-block" v-text="data" />
-              <button class="button m-4" @click="() => copyText(JSON.stringify(data, null, 4))"
-                style="position: absolute; top:0; right:0;">
-                <span class="icon"><i class="fas fa-copy"></i></span>
-              </button>
-            </pre>
-          </div>
-        </div>
-      </div>
-      <button class="modal-close is-large" aria-label="close" @click="emitter('closeModel')"></button>
-    </div>
-    <div class="modal-content-max" style="height: 80vh;" v-else>
-      <div class="content p-0 m-0" style="position: relative">
-        <pre><code class="p-4 is-block" v-text="data" /></pre>
-        <button class="button m-4" @click="() => copyText(JSON.stringify(data, null, 4))"
-          style="position: absolute; top:0; right:0;">
-          <span class="icon"><i class="fas fa-copy"></i></span>
-        </button>
-      </div>
-    </div>
-  </div>
+  <ModalText :isLoading="isLoading" :data="data" :externalModel="externalModel"
+    @closeModel="() => emitter('closeModel')" :code_classes="code_classes" />
 </template>
 
 <script setup lang="ts">
-import { disableOpacity, enableOpacity } from '~/utils';
-
 const toast = useNotification()
 const emitter = defineEmits<{ (e: 'closeModel'): void }>()
 
@@ -49,21 +13,13 @@ const props = defineProps<{
   cli?: string
   useUrl?: boolean
   externalModel?: boolean
+  code_classes?: string
 }>()
 
 const isLoading = ref<boolean>(false)
 const data = ref<any>({})
 
-const handle_event = (e: KeyboardEvent): void => {
-  if (e.key === 'Escape') {
-    emitter('closeModel')
-  }
-}
-
 onMounted(async (): Promise<void> => {
-  disableOpacity()
-  document.addEventListener('keydown', handle_event)
-
   let url = props.useUrl ? props.link || '' : '/api/yt-dlp/url/info'
 
   if (!props.useUrl) {
@@ -95,9 +51,4 @@ onMounted(async (): Promise<void> => {
     isLoading.value = false
   }
 })
-
-onBeforeUnmount(() => {
-  enableOpacity()
-  document.removeEventListener('keydown', handle_event)
-})
 </script>

ui/app/components/InputAutocomplete.vue

@@ -21,7 +21,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, watch, computed, defineModel, defineProps, nextTick } from 'vue'
+import { ref, watch, computed, nextTick } from 'vue'
 import type { AutoCompleteOptions } from '~/types/autocomplete'
 
 const props = withDefaults(defineProps<{

ui/app/components/TextareaAutocomplete.vue

@@ -20,7 +20,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, computed, defineModel, defineProps, watch, nextTick } from 'vue'
+import { ref, computed, watch, nextTick } from 'vue'
 import type { AutoCompleteOptions } from '~/types/autocomplete'
 
 const props = defineProps<{