m/paliad
1
0
Fork 0
Code Issues 146 Pull Requests 8 Actions 3 Packages Projects Releases Wiki Activity

Merge: t-paliad-160 §C cosmetic — eye-pill on approval-pending entities (feynman, 4bab520, icon-only eye glyph on /deadlines + /appointments + /agenda; tooltip retains lifecycle labels pending_create/update/complete/delete; inbox surface unchanged with --historic text-pill variant; pure frontend)

Browse Source
This commit is contained in:
m
2026-05-08 18:19:15 +02:00
parent c06be27cce 4bab520119
commit 6008d36a13
3 changed files with 47 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
frontend/src/client/agenda.ts
View File

@@ -2,6 +2,13 @@ import { initI18n, onLangChange, t, tDyn, getLang } from "./i18n";
import { initSidebar } from "./sidebar";
import { attachEventTypeMultiSelectFilter, type FilterHandle } from "./event-types";
// Eye-icon SVG used inside .approval-pill--icon (mirrors events.ts).
const APPROVAL_PILL_EYE_SVG =
'<svg viewBox="0 0 24 24" aria-hidden="true">' +
'<path d="M2 12s4-7 10-7 10 7 10 7-4 7-10 7-10-7-10-7z"/>' +
'<circle cx="12" cy="12" r="3"/>' +
'</svg>';
let eventTypeFilter: FilterHandle | null = null;
type Urgency = "overdue" | "today" | "tomorrow" | "this_week" | "later";
@@ -279,8 +286,11 @@ function renderItem(it: AgendaItem, bucketUrgency: Urgency): string {
const project = it.project_id
? `<a class="agenda-item-project" href="/projects/${esc(it.project_id)}">${esc(formatProjectLabel(it))}</a>`
: "";
// Icon-only pill — eye glyph + tooltip with the lifecycle label.
// m's 2026-05-08 cosmetic ask.
const pendingLabel = it.approval_status === "pending" ? tDyn("approvals.pending_update.label") : "";
const pendingPill = it.approval_status === "pending"
? `<span class="approval-pill" title="${esc(tDyn("approvals.pending_update.label"))}">${esc(tDyn("approvals.pending_update.label"))}</span>`
? `<span class="approval-pill approval-pill--icon" title="${esc(pendingLabel)}" aria-label="${esc(pendingLabel)}">${APPROVAL_PILL_EYE_SVG}</span>`
: "";
const timePart = it.type === "appointment"

19
frontend/src/client/events.ts
View File

@@ -9,6 +9,16 @@ import {
} from "./event-types";
import { projectIndent } from "./project-indent";
// Eye-icon SVG used inside .approval-pill--icon. Kept as a string
// constant rather than a separate module since only events.ts and
// agenda.ts render it; the duplication is two lines, easier to read
// than yet another import.
const APPROVAL_PILL_EYE_SVG =
'<svg viewBox="0 0 24 24" aria-hidden="true">' +
'<path d="M2 12s4-7 10-7 10 7 10 7-4 7-10 7-10-7-10-7z"/>' +
'<circle cx="12" cy="12" r="3"/>' +
'</svg>';
// EventsPage shared client (t-paliad-110). Drives /deadlines and
// /appointments off the same shell — the route handler injects
// `window.__PALIAD_EVENTS__ = { defaultType: "deadline" | "appointment" }`
@@ -507,12 +517,13 @@ function renderRow(item: EventListItem, showReopen: boolean): string {
? `<span class="termin-type-chip termin-type-${esc(item.appointment_type)}">${esc(tDyn(`appointments.type.${item.appointment_type}`) || item.appointment_type)}</span>`
: "&mdash;";
// Approval pending pill (t-paliad-138). Soft-tint the row + insert a
// ⚠ chip next to the title. Generic "pending approval" — the inbox
// shows the lifecycle detail.
// Approval pending pill (t-paliad-138 / m's 2026-05-08 cosmetic ask).
// Soft-tint the row + drop an eye-icon pill next to the title; hover
// reveals the lifecycle label. Inbox surface shows the full detail.
const pendingClass = item.approval_status === "pending" ? " entity-row--pending-update" : "";
const pendingLabel = item.approval_status === "pending" ? t("approvals.pending_update.label") : "";
const pendingPill = item.approval_status === "pending"
? `<span class="approval-pill" title="${esc(t("approvals.pending_update.label"))}">${esc(t("approvals.pending_update.label"))}</span>`
? `<span class="approval-pill approval-pill--icon" title="${esc(pendingLabel)}" aria-label="${esc(pendingLabel)}">${APPROVAL_PILL_EYE_SVG}</span>`
: "";
return `<tr class="frist-row events-row events-row-${item.type}${pendingClass}" data-id="${esc(item.id)}" data-type="${item.type}">

21
frontend/src/styles/global.css
View File

@@ -10612,6 +10612,27 @@ dialog.quick-add-sheet::backdrop {
}
.approval-pill::before { content: "⚠"; }
/* Icon-only variant — eye glyph signals "preliminary, awaiting approval"
* without consuming row width. Hover (title attr) reveals the full
* lifecycle label. m's 2026-05-08 ask: smaller pill, eye icon, tooltip. */
.approval-pill--icon {
width: 22px;
height: 22px;
padding: 0;
justify-content: center;
cursor: help;
}
.approval-pill--icon::before { content: ""; }
.approval-pill--icon svg {
width: 14px;
height: 14px;
stroke: currentColor;
fill: none;
stroke-width: 1.8;
stroke-linecap: round;
stroke-linejoin: round;
}
.approval-pill--historic {
background: var(--bg-soft);
color: var(--fg-muted);