From f33dc84c57acbe75a9868a15dc9ea97b149ba115 Mon Sep 17 00:00:00 2001
From: arabcoders <admin@arabcoders.org>
Date: Sun, 26 Apr 2026 20:18:38 +0300
Subject: [PATCH] refactor: minor ui update

---
 ui/app/assets/css/tailwind.css | 16 ++++++++
 ui/app/pages/conditions.vue    | 67 +++++++++++++-----------------
 ui/app/pages/dl_fields.vue     |  7 +---
 ui/app/pages/notifications.vue | 74 +++++++++++++++++-----------------
 ui/app/pages/presets.vue       | 40 ++++++++----------
 ui/app/pages/tasks.vue         | 24 +++++------
 6 files changed, 110 insertions(+), 118 deletions(-)

diff --git a/ui/app/assets/css/tailwind.css b/ui/app/assets/css/tailwind.css
index 856a63ed..b8f550b5 100644
--- a/ui/app/assets/css/tailwind.css
+++ b/ui/app/assets/css/tailwind.css
@@ -33,6 +33,22 @@
 }
 
 @layer components {
+  .feature-meta-grid {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr);
+    gap: 0.5rem;
+  }
+
+  @media (width >= 40rem) {
+    .feature-meta-grid {
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
+
+    .feature-meta-grid > :last-child:nth-child(odd) {
+      grid-column: 1 / -1;
+    }
+  }
+
   .shell-surface {
     background:
       radial-gradient(circle at top left, rgb(99 102 241 / 0.1), transparent 28%),
diff --git a/ui/app/pages/conditions.vue b/ui/app/pages/conditions.vue
index 7c5b1b07..3a78c340 100644
--- a/ui/app/pages/conditions.vue
+++ b/ui/app/pages/conditions.vue
@@ -309,57 +309,48 @@
               </span>
             </div>
 
-            <button
-              type="button"
-              class="flex min-w-0 w-full items-start gap-2 rounded-md border border-default bg-muted/20 px-3 py-2 text-left"
-              @click="toggleExpand(cond.id, 'filter')"
-            >
-              <UIcon name="i-lucide-filter" class="mt-0.5 size-4 shrink-0 text-toned" />
-              <div class="min-w-0 flex-1">
-                <div class="text-xs font-medium text-toned">Filter</div>
-                <span :class="['block', expandClass(cond.id, 'filter')]">{{ cond.filter }}</span>
-              </div>
-            </button>
+            <div class="feature-meta-grid">
+              <button
+                type="button"
+                class="flex min-w-0 w-full items-start gap-2 rounded-md border border-default bg-muted/20 px-3 py-2 text-left"
+                @click="toggleExpand(cond.id, 'filter')"
+              >
+                <UIcon name="i-lucide-filter" class="mt-0.5 size-4 shrink-0 text-toned" />
+                <div class="min-w-0 flex-1">
+                  <div class="text-xs font-medium text-toned">Filter</div>
+                  <span :class="['block', expandClass(cond.id, 'filter')]">{{ cond.filter }}</span>
+                </div>
+              </button>
 
-            <div v-if="cond.cli || cond.description" class="grid grid-cols-1 gap-2 sm:grid-cols-2">
               <button
                 v-if="cond.cli"
                 type="button"
-                :class="[
-                  'flex min-w-0 w-full items-start gap-2 rounded-md border border-default bg-muted/20 px-3 py-2 text-left',
-                  !cond.description && 'sm:col-span-2',
-                ]"
+                class="flex min-w-0 w-full items-start gap-2 rounded-md border border-default bg-muted/20 px-3 py-2 text-left"
                 @click="toggleExpand(cond.id, 'cli')"
               >
                 <UIcon name="i-lucide-terminal" class="mt-0.5 size-4 shrink-0 text-toned" />
                 <div class="min-w-0 flex-1">
-                  <div class="text-xs font-medium text-toned">CLI</div>
+                  <div class="text-xs font-medium text-toned">CLI options</div>
                   <span :class="['block', expandClass(cond.id, 'cli')]">{{ cond.cli }}</span>
                 </div>
               </button>
-
-              <button
-                v-if="cond.description"
-                type="button"
-                :class="[
-                  'flex min-w-0 w-full items-start gap-2 rounded-md border border-default bg-muted/20 px-3 py-2 text-left',
-                  !cond.cli && 'sm:col-span-2',
-                ]"
-                @click="toggleExpand(cond.id, 'description')"
-              >
-                <UIcon
-                  name="i-lucide-message-square-text"
-                  class="mt-0.5 size-4 shrink-0 text-toned"
-                />
-                <div class="min-w-0 flex-1">
-                  <div class="text-xs font-medium text-toned">Description</div>
-                  <span :class="['block', expandClass(cond.id, 'description')]">{{
-                    cond.description
-                  }}</span>
-                </div>
-              </button>
             </div>
 
+            <button
+              v-if="cond.description"
+              type="button"
+              class="flex min-w-0 w-full items-start gap-2 rounded-md border border-default bg-muted/20 px-3 py-2 text-left"
+              @click="toggleExpand(cond.id, 'description')"
+            >
+              <UIcon name="i-lucide-align-left" class="mt-0.5 size-4 shrink-0 text-toned" />
+              <div class="min-w-0 flex-1">
+                <div class="text-xs font-medium text-toned">Description</div>
+                <span :class="['block', expandClass(cond.id, 'description')]">{{
+                  cond.description
+                }}</span>
+              </div>
+            </button>
+
             <div
               v-if="extrasEntries(cond.extras).length > 0"
               class="rounded-md border border-default bg-muted/20 px-3 py-2"
diff --git a/ui/app/pages/dl_fields.vue b/ui/app/pages/dl_fields.vue
index ebc618d7..4f616fb5 100644
--- a/ui/app/pages/dl_fields.vue
+++ b/ui/app/pages/dl_fields.vue
@@ -300,13 +300,10 @@
               </span>
             </div>
 
-            <div class="grid grid-cols-1 gap-2 sm:grid-cols-2">
+            <div class="feature-meta-grid">
               <button
                 type="button"
-                :class="[
-                  'flex min-w-0 w-full items-start gap-2 rounded-md border border-default bg-muted/20 px-3 py-2 text-left',
-                  !field.description && 'sm:col-span-2',
-                ]"
+                class="flex min-w-0 w-full items-start gap-2 rounded-md border border-default bg-muted/20 px-3 py-2 text-left"
                 @click="toggleExpand(field.id, 'field')"
               >
                 <UIcon name="i-lucide-terminal" class="mt-0.5 size-4 shrink-0 text-toned" />
diff --git a/ui/app/pages/notifications.vue b/ui/app/pages/notifications.vue
index fe9ba388..291d8ad5 100644
--- a/ui/app/pages/notifications.vue
+++ b/ui/app/pages/notifications.vue
@@ -363,29 +363,44 @@
               </span>
             </div>
 
-            <button
-              type="button"
-              class="flex min-w-0 w-full items-start gap-2 rounded-md border border-default bg-muted/20 px-3 py-2 text-left"
-              @click="toggleExpand(item.id, 'url')"
-            >
-              <UIcon name="i-lucide-link" class="mt-0.5 size-4 shrink-0 text-toned" />
-              <div class="min-w-0 flex-1">
-                <div class="text-xs font-medium text-toned">Target URL</div>
-                <a
-                  :href="item.request.url"
-                  target="_blank"
-                  rel="noreferrer"
-                  class="block text-highlighted hover:underline"
-                  @click.stop
-                >
-                  <span :class="['block', expandClass(item.id, 'url')]">
-                    {{ item.request.url }}
-                  </span>
-                </a>
-              </div>
-            </button>
+            <div class="feature-meta-grid">
+              <button
+                type="button"
+                class="flex min-w-0 w-full items-start gap-2 rounded-md border border-default bg-muted/20 px-3 py-2 text-left"
+                @click="toggleExpand(item.id, 'url')"
+              >
+                <UIcon name="i-lucide-link" class="mt-0.5 size-4 shrink-0 text-toned" />
+                <div class="min-w-0 flex-1">
+                  <div class="text-xs font-medium text-toned">Target URL</div>
+                  <a
+                    :href="item.request.url"
+                    target="_blank"
+                    rel="noreferrer"
+                    class="block text-highlighted hover:underline"
+                    @click.stop
+                  >
+                    <span :class="['block', expandClass(item.id, 'url')]">
+                      {{ item.request.url }}
+                    </span>
+                  </a>
+                </div>
+              </button>
+
+              <button
+                v-if="headerKeys(item).length > 0"
+                type="button"
+                class="flex min-w-0 w-full items-start gap-2 rounded-md border border-default bg-muted/20 px-3 py-2 text-left"
+                @click="toggleExpand(item.id, 'headers')"
+              >
+                <UIcon name="i-lucide-key" class="mt-0.5 size-4 shrink-0 text-toned" />
+                <div class="min-w-0 flex-1">
+                  <div class="text-xs font-medium text-toned">Headers</div>
+                  <span :class="['block', expandClass(item.id, 'headers')]">
+                    {{ headerKeys(item).join(', ') }}
+                  </span>
+                </div>
+              </button>
 
-            <div class="grid grid-cols-1 gap-2 sm:grid-cols-2">
               <button
                 type="button"
                 class="flex min-w-0 w-full items-start gap-2 rounded-md border border-default bg-muted/20 px-3 py-2 text-left"
@@ -417,21 +432,6 @@
                 </div>
               </button>
             </div>
-
-            <button
-              v-if="headerKeys(item).length > 0"
-              type="button"
-              class="flex min-w-0 w-full items-start gap-2 rounded-md border border-default bg-muted/20 px-3 py-2 text-left"
-              @click="toggleExpand(item.id, 'headers')"
-            >
-              <UIcon name="i-lucide-key" class="mt-0.5 size-4 shrink-0 text-toned" />
-              <div class="min-w-0 flex-1">
-                <div class="text-xs font-medium text-toned">Headers</div>
-                <span :class="['block', expandClass(item.id, 'headers')]">
-                  {{ headerKeys(item).join(', ') }}
-                </span>
-              </div>
-            </button>
           </div>
 
           <template #footer>
diff --git a/ui/app/pages/presets.vue b/ui/app/pages/presets.vue
index 16c784e8..5a9b8299 100644
--- a/ui/app/pages/presets.vue
+++ b/ui/app/pages/presets.vue
@@ -306,29 +306,26 @@
               </span>
             </div>
 
-            <button
-              v-if="item.folder"
-              type="button"
-              class="flex min-w-0 w-full items-start gap-2 rounded-md border border-default bg-muted/20 px-3 py-2 text-left"
-              @click="toggleExpand(item.id, 'folder')"
-            >
-              <UIcon name="i-lucide-folder-output" class="mt-0.5 size-4 shrink-0 text-toned" />
-              <div class="min-w-0 flex-1">
-                <div class="text-xs font-medium text-toned">Download path</div>
-                <span :class="['block', expandClass(item.id, 'folder')]">{{
-                  calcPath(item.folder)
-                }}</span>
-              </div>
-            </button>
+            <div v-if="item.folder || item.template || item.cli" class="feature-meta-grid">
+              <button
+                v-if="item.folder"
+                type="button"
+                class="flex min-w-0 w-full items-start gap-2 rounded-md border border-default bg-muted/20 px-3 py-2 text-left"
+                @click="toggleExpand(item.id, 'folder')"
+              >
+                <UIcon name="i-lucide-folder-output" class="mt-0.5 size-4 shrink-0 text-toned" />
+                <div class="min-w-0 flex-1">
+                  <div class="text-xs font-medium text-toned">Download path</div>
+                  <span :class="['block', expandClass(item.id, 'folder')]">{{
+                    calcPath(item.folder)
+                  }}</span>
+                </div>
+              </button>
 
-            <div v-if="item.template || item.cli" class="grid grid-cols-1 gap-2 sm:grid-cols-2">
               <button
                 v-if="item.template"
                 type="button"
-                :class="[
-                  'flex min-w-0 w-full items-start gap-2 rounded-md border border-default bg-muted/20 px-3 py-2 text-left',
-                  !item.cli && 'sm:col-span-2',
-                ]"
+                class="flex min-w-0 w-full items-start gap-2 rounded-md border border-default bg-muted/20 px-3 py-2 text-left"
                 @click="toggleExpand(item.id, 'template')"
               >
                 <UIcon name="i-lucide-file-code-2" class="mt-0.5 size-4 shrink-0 text-toned" />
@@ -343,10 +340,7 @@
               <button
                 v-if="item.cli"
                 type="button"
-                :class="[
-                  'flex min-w-0 w-full items-start gap-2 rounded-md border border-default bg-muted/20 px-3 py-2 text-left',
-                  !item.template && 'sm:col-span-2',
-                ]"
+                class="flex min-w-0 w-full items-start gap-2 rounded-md border border-default bg-muted/20 px-3 py-2 text-left"
                 @click="toggleExpand(item.id, 'cli')"
               >
                 <UIcon name="i-lucide-terminal" class="mt-0.5 size-4 shrink-0 text-toned" />
diff --git a/ui/app/pages/tasks.vue b/ui/app/pages/tasks.vue
index 3104d61f..713a76e4 100644
--- a/ui/app/pages/tasks.vue
+++ b/ui/app/pages/tasks.vue
@@ -470,13 +470,15 @@
               </button>
             </div>
 
-            <div class="grid grid-cols-1 gap-2 sm:grid-cols-2">
+            <div
+              v-if="
+                item.timer || item.folder || item.template || item.cli || willTaskBeProcessed(item)
+              "
+              class="feature-meta-grid"
+            >
               <button
                 type="button"
-                :class="[
-                  'flex min-w-0 w-full items-start gap-2 rounded-md border border-default bg-muted/20 px-3 py-2 text-left',
-                  !item.folder && 'sm:col-span-2',
-                ]"
+                class="flex min-w-0 w-full items-start gap-2 rounded-md border border-default bg-muted/20 px-3 py-2 text-left"
                 @click="toggleExpand(item.id, 'schedule')"
               >
                 <UIcon
@@ -532,16 +534,11 @@
                   </span>
                 </div>
               </button>
-            </div>
 
-            <div v-if="item.template || item.cli" class="grid grid-cols-1 gap-2 sm:grid-cols-2">
               <button
                 v-if="item.template"
                 type="button"
-                :class="[
-                  'flex min-w-0 w-full items-start gap-2 rounded-md border border-default bg-muted/20 px-3 py-2 text-left',
-                  !item.cli && 'sm:col-span-2',
-                ]"
+                class="flex min-w-0 w-full items-start gap-2 rounded-md border border-default bg-muted/20 px-3 py-2 text-left"
                 @click="toggleExpand(item.id, 'template')"
               >
                 <UIcon name="i-lucide-file-code-2" class="mt-0.5 size-4 shrink-0 text-toned" />
@@ -556,10 +553,7 @@
               <button
                 v-if="item.cli"
                 type="button"
-                :class="[
-                  'flex min-w-0 w-full items-start gap-2 rounded-md border border-default bg-muted/20 px-3 py-2 text-left',
-                  !item.template && 'sm:col-span-2',
-                ]"
+                class="flex min-w-0 w-full items-start gap-2 rounded-md border border-default bg-muted/20 px-3 py-2 text-left"
                 @click="toggleExpand(item.id, 'cli')"
               >
                 <UIcon name="i-lucide-terminal" class="mt-0.5 size-4 shrink-0 text-toned" />