From 5b6daa48c0496f8172ba5525afe7714098341ca4 Mon Sep 17 00:00:00 2001
From: Padreug <padreug@aiolabs.dev>
Date: Sun, 17 May 2026 15:23:47 +0200
Subject: [PATCH] Use a type-colored trend icon instead of an inline
 INCOME/EXPENSE badge
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The inline badge ate horizontal space in the description column and
forced "room for 3 nights" to wrap. Move the type signal to the
existing avatar slot — green trending_up for income, red trending_down
for expense — which was previously a redundant orange pending icon
(the whole card is pending entries). Tooltip now distinguishes
income vs expense pending state.
---
 templates/libra/index.html | 20 +++++++++-----------
 1 file changed, 9 insertions(+), 11 deletions(-)

diff --git a/templates/libra/index.html b/templates/libra/index.html
index 7af400f..929b817 100644
--- a/templates/libra/index.html
+++ b/templates/libra/index.html
@@ -76,20 +76,18 @@
         <q-list separator>
           <q-item v-for="entry in pendingExpenses" :key="entry.id">
             <q-item-section avatar>
-              <q-icon name="pending" color="orange" size="sm">
-                <q-tooltip>Pending approval</q-tooltip>
+              <q-icon
+                :name="isIncomeEntry(entry) ? 'trending_up' : 'trending_down'"
+                :color="isIncomeEntry(entry) ? 'green' : 'red'"
+                size="sm"
+              >
+                <q-tooltip>
+                  {% raw %}{{ isIncomeEntry(entry) ? 'Pending income approval' : 'Pending expense approval' }}{% endraw %}
+                </q-tooltip>
               </q-icon>
             </q-item-section>
             <q-item-section>
-              <q-item-label>
-                <q-badge
-                  :color="isIncomeEntry(entry) ? 'green' : 'red'"
-                  class="q-mr-sm"
-                >
-                  {% raw %}{{ isIncomeEntry(entry) ? 'INCOME' : 'EXPENSE' }}{% endraw %}
-                </q-badge>
-                {% raw %}{{ entry.description }}{% endraw %}
-              </q-item-label>
+              <q-item-label>{% raw %}{{ entry.description }}{% endraw %}</q-item-label>
               <q-item-label caption>
                 {% raw %}{{ formatDate(entry.entry_date) }}{% endraw %}
               </q-item-label>