feat: Complete UX cleanup - Agent colors & streamlined navigation
Agent Color System: - Added unique colors for each agent (orchestrator: purple, researcher: teal, negotiator: red, ar_manager: yellow) - CSS variables and utility classes (.agent-*, .agent-badge-*, .agent-border-*) - Tasks table now shows colored left border per agent - Agent names displayed in their brand color Navigation Simplification: - Removed 'Email Log' from main menu (reduced clutter) - Email Log now accessible via link in Emails page - Active state for both /emails and /email-log on Emails nav item Visual Improvements: - Agent assignments now visually distinct at a glance - Cleaner, more focused navigation menu - Better information architecture
This commit is contained in:
parent
50c1a0315b
commit
dc2ea07621
4 changed files with 45 additions and 8 deletions
|
|
@ -29,6 +29,13 @@
|
||||||
--radius-sm: 9px;
|
--radius-sm: 9px;
|
||||||
--radius-xs: 6px;
|
--radius-xs: 6px;
|
||||||
--transition: .18s cubic-bezier(.4,0,.2,1);
|
--transition: .18s cubic-bezier(.4,0,.2,1);
|
||||||
|
|
||||||
|
/* Agent Colors */
|
||||||
|
--agent-orchestrator: #7c6fff;
|
||||||
|
--agent-researcher: #06d6a0;
|
||||||
|
--agent-negotiator: #f43f5e;
|
||||||
|
--agent-ar_manager: #fbbf24;
|
||||||
|
--agent-default: #38bdf8;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* ── Reset & Base ─────────────────────────────────────────────────────────── */
|
/* ── Reset & Base ─────────────────────────────────────────────────────────── */
|
||||||
|
|
@ -710,6 +717,23 @@ hr { border-color: var(--border); opacity: 1; }
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* ── Agent Color System ─────────────────────────────────────────────────────── */
|
||||||
|
|
||||||
|
.agent-orchestrator { color: var(--agent-orchestrator) !important; }
|
||||||
|
.agent-researcher { color: var(--agent-researcher) !important; }
|
||||||
|
.agent-negotiator { color: var(--agent-negotiator) !important; }
|
||||||
|
.agent-ar_manager { color: var(--agent-ar_manager) !important; }
|
||||||
|
|
||||||
|
.agent-badge-orchestrator { background-color: var(--agent-orchestrator) !important; }
|
||||||
|
.agent-badge-researcher { background-color: var(--agent-researcher) !important; }
|
||||||
|
.agent-badge-negotiator { background-color: var(--agent-negotiator) !important; }
|
||||||
|
.agent-badge-ar_manager { background-color: var(--agent-ar_manager) !important; }
|
||||||
|
|
||||||
|
.agent-border-orchestrator { border-left: 3px solid var(--agent-orchestrator); }
|
||||||
|
.agent-border-researcher { border-left: 3px solid var(--agent-researcher); }
|
||||||
|
.agent-border-negotiator { border-left: 3px solid var(--agent-negotiator); }
|
||||||
|
.agent-border-ar_manager { border-left: 3px solid var(--agent-ar_manager); }
|
||||||
|
|
||||||
/* ── Responsive adjustments ───────────────────────────────────────────────── */
|
/* ── Responsive adjustments ───────────────────────────────────────────────── */
|
||||||
|
|
||||||
@media (max-width: 768px) {
|
@media (max-width: 768px) {
|
||||||
|
|
|
||||||
|
|
@ -55,15 +55,10 @@
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
<li class="nav-item">
|
<li class="nav-item">
|
||||||
<a class="nav-link {% if request.path == '/emails' %}active{% endif %}" href="/emails">
|
<a class="nav-link {% if request.path in ['/emails', '/email-log'] %}active{% endif %}" href="/emails">
|
||||||
<span>✉</span> Emails
|
<span>✉</span> Emails
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
<li class="nav-item">
|
|
||||||
<a class="nav-link {% if request.path == '/email-log' %}active{% endif %}" href="/email-log">
|
|
||||||
<span>📋</span> Log
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li class="nav-item">
|
<li class="nav-item">
|
||||||
<a class="nav-link {% if request.path == '/team' %}active{% endif %}" href="/team">
|
<a class="nav-link {% if request.path == '/team' %}active{% endif %}" href="/team">
|
||||||
<span>👥</span> Team
|
<span>👥</span> Team
|
||||||
|
|
|
||||||
|
|
@ -104,6 +104,22 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<div class="row g-4 mt-4">
|
||||||
|
<div class="col-12">
|
||||||
|
<div class="card">
|
||||||
|
<div class="card-header bg-secondary d-flex justify-content-between align-items-center">
|
||||||
|
<h5 class="mb-0">📋 Email Journal / Log</h5>
|
||||||
|
<a href="/email-log" class="btn btn-sm btn-outline-light">Vollständiges Log</a>
|
||||||
|
</div>
|
||||||
|
<div class="card-body">
|
||||||
|
<p class="text-muted">
|
||||||
|
Das vollständige Email-Journal zeigt alle verarbeiteten Emails mit Details zu Status, Agent-Zuweisungen und Zeitstempeln.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
|
|
||||||
{% block scripts %}
|
{% block scripts %}
|
||||||
|
|
|
||||||
|
|
@ -30,7 +30,7 @@
|
||||||
</thead>
|
</thead>
|
||||||
<tbody>
|
<tbody>
|
||||||
{% for task in tasks %}
|
{% for task in tasks %}
|
||||||
<tr>
|
<tr class="agent-border-{{ task.agent_key or 'default' }}">
|
||||||
<td style="color:var(--text-muted);">{{ task.id }}</td>
|
<td style="color:var(--text-muted);">{{ task.id }}</td>
|
||||||
<td>
|
<td>
|
||||||
<strong>{{ task.title }}</strong>
|
<strong>{{ task.title }}</strong>
|
||||||
|
|
@ -49,7 +49,9 @@
|
||||||
</div>
|
</div>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
</td>
|
</td>
|
||||||
<td style="font-size:.8rem;">{{ task.assigned_agent }}</td>
|
<td style="font-size:.8rem;" class="agent-{{ task.agent_key or 'default' }}">
|
||||||
|
<strong>{{ task.assigned_agent }}</strong>
|
||||||
|
</td>
|
||||||
<td>
|
<td>
|
||||||
{% if task.status == 'pending' %}
|
{% if task.status == 'pending' %}
|
||||||
<span class="badge bg-warning">Pending</span>
|
<span class="badge bg-warning">Pending</span>
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue