ottyl/tickets/071-filter-bar-button-placement-and-popup-clarity.md

071 — Filter bar's syntax button/popup is ugly and incoherent

Summary

Wishlist feedback, verbatim: "UI filter ugly syntax. The button moved to the right, away from the existing button cluster. The popup is a incoherent mess and should be clearer."

Two distinct complaints bundled together:

1. Layout regression — some button (the filter-help/syntax button, presumably introduced or moved by ticket 065's filter-bar help rewrite) now sits away from the rest of the filter bar's button cluster in FilterBar.tsx (webapp/src/components/FilterBar.tsx, currently 67 lines), instead of grouped with the others.
2. Content/clarity — whatever popup that button opens (the filter syntax help introduced/reworked in ticket 065, "filter-bar-help-should-describe-filter-syntax-not-regex") reads as an incoherent mess rather than a clear reference.

Scope

• Reproduce in the running app: open the filter bar, locate the syntax/help button, and confirm which button has drifted from the cluster and what "incoherent" means concretely (wall of text? disorganized sections? unclear examples?) — the wishlist entry doesn't specify, so this needs eyes-on before a fix.
• Fix the button's position so it's grouped with the filter bar's other controls again.
• Rework the popup's content/layout for clarity — likely restructuring into clearly separated sections (e.g. by filter feature: regex match, metric comparison, datetime, sort) with short examples per section, rather than a single undifferentiated block.
• Out of scope: changing the underlying filter grammar itself (filter_parser.pest/filter_parser.rs) — this is presentation only.

Acceptance criteria

• The filter syntax button sits back with the filter bar's other buttons, not isolated to one side.
• The help popup reads as a structured, scannable reference rather than a single dense block — verified visually in the running app (make dev), not just by inspecting JSX.

Depends on

None. Touches the same area as ticket 065 and ticket 066 ("filter-bar-value-doesnt-reflect-active-preset-or-sort") — check those haven't already reshuffled this layout before starting.