Improve visual design #26

New Issue

2026-10-02T21:52:41Z

niklas commented

2026-10-02 21:52:41 +00:00

Your app already has a solid dark theme and a clear structure. The biggest gains are in spacing bugs, labeling, and navigation.

Quick fixes (bugs, not taste)

Missing padding: the "Seen before" card text and the "Ryuvia" heading on Team touch the card edge. Give cards a consistent 16px inner padding.
Team heading: it sits directly under the tabs with no gap. Add space above it, or drop the box and use a plain page title.
Low-contrast link: "Source ↗" is dark blue on dark. Lighten it so it passes AA contrast.

Make it easier for new users

Navigation: the hamburger sheet hides your main sections. A bottom tab bar (Queue, On-call, Alerts, Team, More) lets people see what the app does at a glance.
Team switcher: the "Ryuvia" pill looks like a tag. Add a chevron so it reads as a dropdown.
Queue filters: the chips are cut off with no scroll hint. Add a fade at the edge, or show counts ("Open 1", "Acked 0").
Incident row: the red left border and "3h" are unexplained. Show "Triggered 3h ago" and add a small severity label.
Vague copy: "One owner.", "All in use.", "All quiet, as they should be." force people to decode them. Use plain labels like "1 member", "2 escalation levels", "Dead man's switch: healthy" with a green check.

On-call page

Seven identical "niklas you" rows are noise. Collapse consecutive days into one shift bar ("Fri 2 Oct → Wed 21 Oct, you"), or draw a timeline.
"Week 40" means nothing to most people. Show "28 Sep – 4 Oct" with "Week 40" as secondary text.
"Your next shifts" lists the shift you're already in. Label it "Current shift" and show "ends in 19 days".
The "you" tag is easy to miss. Use a pill badge, and highlight your rows.

Incident detail

Put the primary actions (Acknowledge, Resolve) at the top of the page. Your action bar is already sticky at the bottom, which is good, but "Snooze" and "···" need clearer labels.
Group the timeline by phase and show who was paged or escalated. Two "you acknowledged" and two "Paged you" entries look like a bug. Merge or label them (for example "re-acknowledged").
Make the top card more scannable with duration, severity, and the responsible person in one row, and keep the label chips collapsed.

Polish

Use one type scale (about 4 sizes) and limit color to meaning: red for critical, amber for acked, green for healthy, and a single accent for actions.
Section headers like "SEEN BEFORE" are fine, but give them more space above than below so groups read as units.
Add proper empty states, such as an illustration and one line for "No open incidents, all clear".

Your app already has a solid dark theme and a clear structure. The biggest gains are in spacing bugs, labeling, and navigation. **Quick fixes (bugs, not taste)** - **Missing padding**: the "Seen before" card text and the "Ryuvia" heading on Team touch the card edge. Give cards a consistent 16px inner padding. - **Team heading**: it sits directly under the tabs with no gap. Add space above it, or drop the box and use a plain page title. - **Low-contrast link**: "Source ↗" is dark blue on dark. Lighten it so it passes AA contrast. **Make it easier for new users** - **Navigation**: the hamburger sheet hides your main sections. A bottom tab bar (Queue, On-call, Alerts, Team, More) lets people see what the app does at a glance. - **Team switcher**: the "Ryuvia" pill looks like a tag. Add a chevron so it reads as a dropdown. - **Queue filters**: the chips are cut off with no scroll hint. Add a fade at the edge, or show counts ("Open 1", "Acked 0"). - **Incident row**: the red left border and "3h" are unexplained. Show "Triggered 3h ago" and add a small severity label. - **Vague copy**: "One owner.", "All in use.", "All quiet, as they should be." force people to decode them. Use plain labels like "1 member", "2 escalation levels", "Dead man's switch: healthy" with a green check. **On-call page** - Seven identical "niklas you" rows are noise. Collapse consecutive days into one shift bar ("Fri 2 Oct → Wed 21 Oct, you"), or draw a timeline. - "Week 40" means nothing to most people. Show "28 Sep – 4 Oct" with "Week 40" as secondary text. - "Your next shifts" lists the shift you're already in. Label it "Current shift" and show "ends in 19 days". - The "you" tag is easy to miss. Use a pill badge, and highlight your rows. **Incident detail** - Put the primary actions (Acknowledge, Resolve) at the top of the page. Your action bar is already sticky at the bottom, which is good, but "Snooze" and "···" need clearer labels. - Group the timeline by phase and show who was paged or escalated. Two "you acknowledged" and two "Paged you" entries look like a bug. Merge or label them (for example "re-acknowledged"). - Make the top card more scannable with duration, severity, and the responsible person in one row, and keep the label chips collapsed. **Polish** - Use one type scale (about 4 sizes) and limit color to meaning: red for critical, amber for acked, green for healthy, and a single accent for actions. - Section headers like "SEEN BEFORE" are fine, but give them more space above than below so groups read as units. - Add proper empty states, such as an illustration and one line for "No open incidents, all clear".

niklas referenced this issue

2026-10-03 07:02:00 +00:00

handleIncidentTimeline: check rows.Err() after the Next() loop #27

niklas referenced this issue from a commit

2026-10-03 07:02:38 +00:00

Web: visual design pass (issue #26)

niklas referenced a pull request that will close this issue

2026-10-03 07:02:50 +00:00

Web: visual design pass (issue #26) #28

niklas closed this issue

2026-10-03 07:08:19 +00:00

niklas referenced this issue from a commit