Files
projax/web/static/style.css
mAi e055e4607e feat(phase 3c per-events): event_date on item_links, Documents UI, PER URL resolver, MCP date-aware add_link
migration 0011_item_links_event_date.sql: ADD event_date date + partial
index (idempotent). Day granularity by design per the PER spec; the
column lands NULL on every existing row, no backfill.

store:
- ItemLink gains an EventDate *time.Time (every read path scans it).
- AddLinkDated(ctx, item, refType, refID, rel, note, date, metadata)
  upserts with COALESCE(new, old) for note + event_date so partial
  callers don't clobber prior state.
- DatedLinks(item) returns event_date IS NOT NULL ordered DESC.

web:
- per.go: parsePER strips a trailing .YYMMDD (rejects invalid dates like
  Feb 30); collisionTag yields a/b/.../z/aa/ab/...; computePERs walks
  DatedLinks output and assigns render-time collision tags inside each
  date group. Tags are never stored.
- handleDetail: 404 retry with PER stripped — /i/mfin.house1.260515
  resolves to the house1 item with HighlightDate=2026-05-15.
- documents_section.tmpl: add-form (ref_type/date/ref_id/note),
  date-sorted rows with computed PER, ref-type badge, remove × with
  anti-forgery item-id check, highlight row when HighlightDate matches.
- POST /i/{path}/links/add and /links/remove handlers; HTMX swap on the
  fragment, redirect for non-HTMX callers.

mcp:
- add_link accepts event_date: "YYYY-MM-DD" (parsed strict, hands back
  fmt.Errorf on bad form). linkView.event_date surfaces it on responses.
- Existing add_link callers without event_date keep working unchanged.

docs:
- docs/standards/per.md gains an Implementation section pointing at
  item_links.event_date + ref_types + render-time collision policy.
- docs/design.md adds a Documents/dated artifacts section with the
  schema delta, conflict policy, and URL routing rules.

tests:
- per_test.go: parsePER (valid/invalid dates, non-numeric, wrong
  length); collisionTag (1..53); computePERs (bare-then-.a, skips
  undated, multi-date grouping).
2026-05-15 18:35:21 +02:00

160 lines
10 KiB
CSS

/* projax — minimal style. Desktop browser only. */
:root {
--fg: #1a1a1a;
--muted: #6a6a6a;
--bg: #fafafa;
--bg-alt: #f0efe8;
--border: #d8d4c8;
--accent: #2f5d9e;
--warn: #b35900;
--ok: #2b7a4b;
--bad: #a02929;
}
* { box-sizing: border-box; }
html { font: 14px/1.45 system-ui, -apple-system, "Segoe UI", sans-serif; color: var(--fg); background: var(--bg); }
body { margin: 0; }
header { background: var(--bg-alt); border-bottom: 1px solid var(--border); padding: 8px 16px; }
header nav { display: flex; gap: 16px; align-items: center; }
header .logout-form { margin: 0 0 0 auto; }
header .logout-btn { background: none; border: none; color: var(--muted); cursor: pointer; padding: 4px 6px; font: inherit; }
header .logout-btn:hover { color: var(--bad); text-decoration: underline; }
header .brand { font-weight: 600; font-size: 1.1em; color: var(--fg); text-decoration: none; }
header a { color: var(--accent); text-decoration: none; }
header a:hover { text-decoration: underline; }
main { padding: 16px 24px; max-width: 1100px; margin: 0 auto; }
h1 { font-size: 1.4em; margin: 0 0 8px; }
h2 { font-size: 1.1em; margin: 24px 0 8px; }
.counts { color: var(--muted); margin: 0 0 16px; }
.tree ul { list-style: none; padding-left: 18px; margin: 4px 0; border-left: 1px dotted var(--border); }
.tree > ul.forest { padding-left: 0; border-left: none; }
.node { margin: 2px 0; }
.node.area > a { font-weight: 600; }
.slug { color: var(--muted); font-family: ui-monospace, SFMono-Regular, monospace; font-size: 0.85em; margin-left: 8px; }
.status { display: inline-block; font-size: 0.75em; padding: 1px 6px; border-radius: 999px; border: 1px solid var(--border); background: #fff; margin-left: 8px; }
.status-active { color: var(--ok); }
.status-done { color: var(--accent); }
.status-archived { color: var(--muted); }
.source { display: inline-block; font-size: 0.75em; padding: 1px 6px; border-radius: 4px; background: var(--bg-alt); border: 1px solid var(--border); }
.source-mai\.projects { color: var(--warn); }
.tag { display: inline-block; font-size: 0.72em; padding: 1px 6px; border-radius: 999px; background: var(--bg-alt); border: 1px solid var(--border); margin-left: 4px; color: var(--accent); text-decoration: none; }
a.tag:hover { background: var(--accent); color: #fff; }
.tag-on { background: var(--accent); color: #fff; }
.mgmt { display: inline-block; font-size: 0.72em; padding: 1px 6px; border-radius: 4px; background: #fff; border: 1px solid var(--border); margin-left: 4px; color: var(--muted); }
.mgmt-mai { color: var(--warn); border-color: var(--warn); }
.mgmt-self { color: var(--ok); border-color: var(--ok); }
.tagbar { margin: 12px 0; padding: 8px 0; border-bottom: 1px dotted var(--border); }
.tagbar .muted { color: var(--muted); margin-right: 8px; }
.tagbar .clear { margin-left: 12px; color: var(--bad); }
.muted { color: var(--muted); }
.add { margin-left: 6px; color: var(--accent); text-decoration: none; }
.add:hover { text-decoration: underline; }
.orphans { margin-top: 32px; }
.flat { list-style: none; padding: 0; }
.flat li { padding: 4px 0; border-bottom: 1px dashed var(--border); }
.edit, .promote, .inline-promote { display: grid; gap: 12px; max-width: 720px; }
.inline-promote { display: contents; }
form label { display: flex; flex-direction: column; gap: 4px; font-size: 0.9em; color: var(--muted); }
form label.checkbox { flex-direction: row; align-items: center; gap: 8px; }
form input[type="text"], form input:not([type]), form select, form textarea {
font: inherit; padding: 6px 8px; border: 1px solid var(--border); background: #fff; border-radius: 4px;
}
form textarea { font-family: ui-monospace, SFMono-Regular, monospace; font-size: 0.92em; }
form .actions { display: flex; gap: 12px; align-items: center; }
button { font: inherit; padding: 6px 14px; border: 1px solid var(--accent); background: var(--accent); color: #fff; border-radius: 4px; cursor: pointer; }
button:hover { filter: brightness(0.92); }
.cancel { color: var(--muted); text-decoration: none; }
.cancel:hover { text-decoration: underline; color: var(--bad); }
.readonly pre { background: var(--bg-alt); padding: 12px; border: 1px solid var(--border); border-radius: 4px; white-space: pre-wrap; }
table.classify { width: 100%; border-collapse: collapse; margin-top: 16px; }
table.classify th, table.classify td { padding: 8px; border-bottom: 1px solid var(--border); text-align: left; vertical-align: top; }
table.classify input, table.classify select { width: 100%; }
.error { color: var(--bad); }
/* Tasks section — HTMX-driven VTODO writeback (phase 2.b). */
.tasks .cal-block { border: 1px solid var(--border); border-radius: 4px; padding: 8px 12px; margin: 8px 0 16px; background: #fff; }
.tasks .cal-block h3 { font-size: 0.95em; margin: 0 0 8px; color: var(--muted); }
.tasks ul.todo { list-style: none; padding: 0; margin: 0; }
.tasks li.todo-row { display: flex; gap: 6px; align-items: center; padding: 4px 0; border-bottom: 1px dotted var(--border); }
.tasks li.todo-row:last-child { border-bottom: none; }
.tasks li.todo-row form.inline { display: inline-flex; align-items: center; gap: 4px; margin: 0; }
.tasks li.todo-row .todo-edit { flex: 1; }
.tasks li.todo-row .todo-edit input[type="text"] { flex: 1; min-width: 12em; }
.tasks li.todo-row button { padding: 2px 8px; }
.tasks li.todo-row button.check, .tasks li.todo-row button.x {
background: #fff; color: var(--muted); border-color: var(--border);
font-size: 1.1em; line-height: 1; padding: 2px 6px;
}
.tasks li.todo-row button.check:hover { color: var(--ok); border-color: var(--ok); }
.tasks li.todo-row button.x:hover { color: var(--bad); border-color: var(--bad); }
.tasks .todo-create { display: flex; gap: 6px; margin: 6px 0 10px; }
.tasks .todo-create input[type="text"] { flex: 1; }
.tasks ul.done .summary { color: var(--muted); text-decoration: line-through; flex: 1; }
.banner.warn { background: #fff5e6; border: 1px solid var(--warn); color: var(--warn); padding: 6px 10px; border-radius: 4px; margin: 8px 0; }
/* Issues section — Gitea-issue ingest (phase 2.d). */
.issues .repo-block { border: 1px solid var(--border); border-radius: 4px; padding: 8px 12px; margin: 8px 0 16px; background: #fff; }
.issues .repo-block h3 { font-size: 0.95em; margin: 0 0 8px; display: flex; gap: 12px; align-items: baseline; }
.issues .repo-block h3 a { color: var(--accent); text-decoration: none; }
.issues .repo-block h3 a:hover { text-decoration: underline; }
.issues ul.issues { list-style: none; padding: 0; margin: 0; }
.issues li.issue-row { display: flex; gap: 6px; align-items: baseline; padding: 4px 0; border-bottom: 1px dotted var(--border); flex-wrap: wrap; }
.issues li.issue-row:last-child { border-bottom: none; }
.issues li.issue-row .num { color: var(--muted); font-family: ui-monospace, SFMono-Regular, monospace; font-size: 0.85em; text-decoration: none; }
.issues li.issue-row .title { color: var(--fg); text-decoration: none; flex: 1; min-width: 12em; }
.issues li.issue-row .title:hover { text-decoration: underline; color: var(--accent); }
.issues li.issue-row .label { display: inline-block; font-size: 0.72em; padding: 1px 6px; border-radius: 999px; background: var(--bg-alt); border: 1px solid var(--border); color: var(--accent); }
.issues li.issue-row .milestone { font-size: 0.72em; padding: 1px 6px; border-radius: 4px; background: #fff; border: 1px solid var(--border); color: var(--warn); }
.issues li.issue-row .assignee { font-size: 0.78em; color: var(--muted); }
.issues ul.closed .title { color: var(--muted); }
/* Tree-page filter bar (phase 3b). */
.tree-section { display: block; }
#tree-filterbar { padding: 12px 0; border-bottom: 1px dotted var(--border); margin-bottom: 12px; }
#tree-filterbar .search { margin: 0 0 8px; display: flex; }
#tree-filterbar .search input[type="search"] {
width: 100%; font: inherit; padding: 6px 10px;
border: 1px solid var(--border); background: #fff; border-radius: 4px;
}
#tree-filterbar .chip-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 4px 0; }
#tree-filterbar .chip-row .muted { width: 4em; flex-shrink: 0; }
.mgmt-chip, .status-chip, .has-chip {
display: inline-block; font-size: 0.78em; padding: 1px 8px; border-radius: 999px;
background: #fff; border: 1px solid var(--border); color: var(--muted); text-decoration: none;
}
.mgmt-chip:hover, .status-chip:hover, .has-chip:hover { color: var(--fg); border-color: var(--accent); }
.chip-on { background: var(--accent); color: #fff; border-color: var(--accent); }
.chip-on:hover { color: #fff; filter: brightness(0.92); }
#tree-filterbar small { opacity: 0.75; margin-left: 2px; }
.tree-section .empty { padding: 24px; color: var(--muted); }
.tree-section .clear { color: var(--bad); }
/* Documents / PER-dated artifacts (phase 3c). */
.documents { margin-top: 24px; }
.documents .doc-add { display: flex; gap: 6px; margin: 8px 0 12px; align-items: center; flex-wrap: wrap; }
.documents .doc-add input[type="text"] { flex: 1; min-width: 8em; }
.documents ul.docs { list-style: none; padding: 0; margin: 0; }
.documents li.doc-row {
display: flex; gap: 8px; align-items: baseline; padding: 6px 0;
border-bottom: 1px dotted var(--border); flex-wrap: wrap;
}
.documents li.doc-row:last-child { border-bottom: none; }
.documents li.doc-row.highlight { background: #fff5d6; padding-left: 8px; border-left: 3px solid var(--warn); }
.documents .per {
font-family: ui-monospace, SFMono-Regular, monospace; font-size: 0.88em;
color: var(--accent); background: var(--bg-alt); padding: 1px 6px; border-radius: 4px;
}
.documents .ref-type {
display: inline-block; font-size: 0.72em; padding: 1px 6px; border-radius: 999px;
background: #fff; border: 1px solid var(--border); color: var(--muted);
}
.documents .ref-type-document { color: var(--accent); border-color: var(--accent); }
.documents .ref-type-note { color: var(--ok); border-color: var(--ok); }
.documents .ref-type-url { color: var(--warn); border-color: var(--warn); }
.documents .ref-id { font-family: ui-monospace, SFMono-Regular, monospace; font-size: 0.85em; flex: 1; min-width: 8em; }
.documents .doc-note { color: var(--muted); font-style: italic; }
.documents .doc-remove .x {
background: #fff; color: var(--muted); border-color: var(--border);
font-size: 1.05em; line-height: 1; padding: 2px 6px;
}
.documents .doc-remove .x:hover { color: var(--bad); border-color: var(--bad); }