From d5a0a3aafeda2b5d3e5cc218397e567046b81af3 Mon Sep 17 00:00:00 2001
From: arabcoders <admin@arabcoders.org>
Date: Tue, 14 Oct 2025 18:32:09 +0300
Subject: [PATCH] more minor design updates. Ref #441

---
 ui/app/pages/conditions.vue       | 34 ++++++++++++++-----------------
 ui/app/pages/notifications.vue    | 21 +++++++++++--------
 ui/app/pages/task_definitions.vue | 19 +++++++++++------
 ui/app/pages/tasks.vue            |  2 +-
 4 files changed, 41 insertions(+), 35 deletions(-)

diff --git a/ui/app/pages/conditions.vue b/ui/app/pages/conditions.vue
index dab5d0d1..30c49ef7 100644
--- a/ui/app/pages/conditions.vue
+++ b/ui/app/pages/conditions.vue
@@ -4,11 +4,17 @@
       <div class="column is-12 is-clearfix is-unselectable">
         <span class="title is-4">
           <span class="icon-text">
-            <span class="icon"><i class="fa-solid fa-filter" /></span>
-            <span>Conditions</span>
+            <template v-if="toggleForm">
+              <span class="icon"><i class="fa-solid" :class="{ 'fa-edit': itemRef, 'fa-plus': !itemRef }" /></span>
+              <span>{{ itemRef ? `Edit - ${item.name}` : 'Add new condition' }}</span>
+            </template>
+            <template v-else>
+              <span class="icon"><i class="fa-solid fa-filter" /></span>
+              <span>Conditions</span>
+            </template>
           </span>
         </span>
-        <div class="is-pulled-right">
+        <div class="is-pulled-right" v-if="!toggleForm">
           <div class="field is-grouped">
             <p class="control">
               <button class="button is-primary" @click="resetForm(false); toggleForm = !toggleForm;">
@@ -25,9 +31,10 @@
             </p>
           </div>
         </div>
-        <div class="is-hidden-mobile">
-          <span class="subtitle">Run yt-dlp custom match filter on returned info. and apply cli arguments if matched.
-            This is an advanced feature and should be used with caution.</span>
+        <div class="is-hidden-mobile" v-if="!toggleForm">
+          <span class="subtitle">
+            Run yt-dlp custom match filter on returned info. and apply cli arguments if matched.
+          </span>
         </div>
       </div>
 
@@ -46,12 +53,6 @@
                   <a class="has-text-info" v-tooltip="'Export item.'" @click.prevent="exportItem(cond)">
                     <span class="icon"><i class="fa-solid fa-file-export" /></span>
                   </a>
-                  <button @click="cond.raw = !cond.raw">
-                    <span class="icon"><i class="fa-solid" :class="{
-                      'fa-arrow-down': !cond?.raw,
-                      'fa-arrow-up': cond?.raw,
-                    }" /></span>
-                  </button>
                 </div>
               </header>
               <div class="card-content is-flex-grow-1">
@@ -74,15 +75,10 @@
                   </p>
                 </div>
               </div>
-              <div class="card-content" v-if="cond?.raw">
-                <div class="content">
-                  <pre><code>{{ JSON.stringify(cleanObject(cond, remove_keys), null, 2) }}</code></pre>
-                </div>
-              </div>
               <div class="card-footer mt-auto">
                 <div class="card-footer-item">
                   <button class="button is-warning is-fullwidth" @click="editItem(cond)">
-                    <span class="icon"><i class="fa-solid fa-cog" /></span>
+                    <span class="icon"><i class="fa-solid fa-edit" /></span>
                     <span>Edit</span>
                   </button>
                 </div>
@@ -129,7 +125,7 @@
 
 <script setup lang="ts">
 import type { ConditionItem, ImportedConditionItem } from '~/types/conditions'
-import {useConfirm} from '~/composables/useConfirm'
+import { useConfirm } from '~/composables/useConfirm'
 
 type ConditionItemWithUI = ConditionItem & { raw?: boolean }
 
diff --git a/ui/app/pages/notifications.vue b/ui/app/pages/notifications.vue
index 68be8390..9aedad56 100644
--- a/ui/app/pages/notifications.vue
+++ b/ui/app/pages/notifications.vue
@@ -4,8 +4,14 @@
       <div class="column is-12 is-clearfix is-unselectable">
         <span class="title is-4">
           <span class="icon-text">
-            <span class="icon"><i class="fa-solid fa-paper-plane" /></span>
-            <span>Notifications</span>
+            <template v-if="toggleForm">
+              <span class="icon"><i class="fa-solid" :class="{ 'fa-edit': targetRef, 'fa-plus': !targetRef }" /></span>
+              <span>{{ targetRef ? `Edit - ${target.name}` : 'Add new notification target' }}</span>
+            </template>
+            <template v-else>
+              <span class="icon"><i class="fa-solid fa-paper-plane" /></span>
+              <span>Notifications</span>
+            </template>
           </span>
         </span>
         <div class="is-pulled-right" v-if="!toggleForm">
@@ -44,7 +50,7 @@
             </p>
           </div>
         </div>
-        <div class="is-hidden-mobile">
+        <div class="is-hidden-mobile" v-if="!toggleForm">
           <span class="subtitle">
             Send notifications to your webhooks based on specified events or presets.
           </span>
@@ -103,7 +109,7 @@
                       <div class="control">
                         <button class="button is-warning is-small is-fullwidth" v-tooltip="'Edit'"
                           @click="editItem(item)">
-                          <span class="icon"><i class="fa-solid fa-cog" /></span>
+                          <span class="icon"><i class="fa-solid fa-edit" /></span>
                         </button>
                       </div>
                       <div class="control">
@@ -162,7 +168,7 @@
                 <div class="card-footer mt-auto">
                   <div class="card-footer-item">
                     <button class="button is-warning is-fullwidth" @click="editItem(item);">
-                      <span class="icon"><i class="fa-solid fa-trash-can" /></span>
+                      <span class="icon"><i class="fa-solid fa-edit" /></span>
                       <span>Edit</span>
                     </button>
                   </div>
@@ -200,9 +206,6 @@
             The other keys <code>id</code>, <code>event</code> and <code>created_at</code> will be sent as they are.
           </li>
           <li>We also send two special headers <code>X-Event-ID</code> and <code>X-Event</code> with the request.</li>
-          <li>Support for <code>Apprise URLs</code> is in beta and subject to many changes to come, currently the
-            message field fallback to JSON encoded string of the event if no custom message set by us for that
-            particular event.</li>
           <li>
             If you have selected specific presets or events, this will take priority, For example, if you limited the
             target to <code>default</code> preset and selected <code>ALL</code> events, only events that reference the
@@ -219,7 +222,7 @@
 <script setup lang="ts">
 import { useStorage } from '@vueuse/core'
 import type { notification, notificationImport } from '~/types/notification'
-import {useConfirm} from '~/composables/useConfirm'
+import { useConfirm } from '~/composables/useConfirm'
 
 const toast = useNotification()
 const socket = useSocketStore()
diff --git a/ui/app/pages/task_definitions.vue b/ui/app/pages/task_definitions.vue
index d70f4da6..d001fc14 100644
--- a/ui/app/pages/task_definitions.vue
+++ b/ui/app/pages/task_definitions.vue
@@ -4,11 +4,17 @@
       <div class="column is-12 is-clearfix is-unselectable">
         <span class="title is-4">
           <span class="icon-text">
-            <span class="icon"><i class="fa-solid fa-diagram-project" /></span>
-            <span>Task Definitions</span>
+            <template v-if="isEditorOpen">
+              <span class="icon"><i class="fa-solid fa-pen-to-square" /></span>
+              <span>{{ editorTitle }}</span>
+            </template>
+            <template v-else>
+              <span class="icon"><i class="fa-solid fa-diagram-project" /></span>
+              <span>Task Definitions</span>
+            </template>
           </span>
         </span>
-        <div class="is-pulled-right">
+        <div class="is-pulled-right" v-if="!isEditorOpen">
           <div class="field is-grouped">
 
             <p class="control">
@@ -46,7 +52,7 @@
             </p>
           </div>
         </div>
-        <div class="is-hidden-mobile">
+        <div class="is-hidden-mobile" v-if="!isEditorOpen">
           <span class="subtitle">
             Create definitions to turn any website into a downloadable feed of links.
           </span>
@@ -167,7 +173,8 @@
         <Message message_class="has-background-info-90 has-text-dark" title="Loading" icon="fas fa-spinner fa-spin"
           message="Loading data. Please wait..." v-if="isLoading" />
         <Message title="No definitions" message="No task definitions are configured yet. Create one to get started."
-          class="is-background-warning-80 has-text-dark" icon="fas fa-exclamation-circle" v-else />
+          class="is-background-warning-80 has-text-dark" icon="fas fa-exclamation-circle"
+          v-if="!isLoading && !isEditorOpen" />
       </div>
     </div>
 
@@ -257,7 +264,7 @@ const currentSummary = computed<TaskDefinitionSummary | undefined>(() => {
 const editorTitle = computed<string>(() => {
   return 'create' === editorMode.value
     ? 'Create Task Definition'
-    : `Edit ${currentSummary.value?.name || 'Task Definition'}`
+    : `Edit - ${currentSummary.value?.name || 'Task Definition'}`
 })
 
 const cloneDocument = (document: TaskDefinitionDocument): TaskDefinitionDocument => {
diff --git a/ui/app/pages/tasks.vue b/ui/app/pages/tasks.vue
index 471cfd90..bfc8cbd1 100644
--- a/ui/app/pages/tasks.vue
+++ b/ui/app/pages/tasks.vue
@@ -6,7 +6,7 @@
           <span class="icon-text">
             <template v-if="toggleForm">
               <span class="icon"><i class="fa-solid" :class="{ 'fa-edit': taskRef, 'fa-plus': !taskRef }" /></span>
-              <span>{{ taskRef ? `Edit - ${task.name}` : 'Add' }}</span>
+              <span>{{ taskRef ? `Edit - ${task.name}` : 'Add new task' }}</span>
             </template>
             <template v-else>
               <span class="icon"><i class="fa-solid fa-tasks" /></span>