feat(explore): policy feed as wire-service dispatch board#186
Conversation
- BillFeedRow now displays a colored state-abbreviation chip alongside the bill number so the state is visible even when no state filter is active. The chip is de-emphasized when the user has already filtered to a single state. - Added a search input to the policy feed header that filters bills by title, bill number, summary, and state. Works alongside the existing state/status/topic filters and flows through the same 'showing X of Y' counter.
Commits to a distinctive 'legislative wire / political desk' aesthetic for the Policy Bills feed, extending the existing terminal phrasing. - BillFeedRow: promote the title to the primary typographic element (larger, brighter, heavier). Metadata recedes to muted uppercase mono. Replace 'view' link with 'dispatch →' underlined in accent green. Add optional dateline stamp (a press-stamp block with the 2-letter state monogram, accent tick, and 'DATELINE' caption) for non-grouped views. - PolicyExploreView: when no state is selected, group the feed by state with sticky DATELINE banners above each group. State identity is now undeniable at a glance. When a state IS selected, the group banner and per-row dateline are both hidden (redundant). - Upgrade the search input into a command-bar: '>' prompt prefix, placeholder shows live dispatch count, global '/' keyboard shortcut focuses it, Esc clears it, kbd hints inline.
- Drop the state-grouped feed render. Grouping only-consecutive same-state bills after sorting by date produced scattered groups (e.g., TX, CA, TX again) that defeated the goal of seeing all bills per state together. Revert to the chronological feed with the per-row dateline stamp (which already solves state-at-a-glance). - Extract ScrollChevron from the left/right duplicated blocks in DataSourceTabs. - Drop narration-style comments that described WHAT the code does.
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: Path: .coderabbit.yaml Review profile: ASSERTIVE Plan: Pro Run ID: 📒 Files selected for processing (1)
📝 WalkthroughWalkthroughAdds client-side bill search with a "/" keyboard shortcut and escape-to-clear, refactors tab scroll chevrons into a shared helper, and updates BillFeedRow to accept a Changes
Sequence Diagram(s)sequenceDiagram
participant User as User
participant Browser as Browser/DOM
participant View as PolicyExploreView
participant RowList as BillFeedRowList
User->>Browser: press "/"
Browser->>View: keydown event
View->>Browser: focus & select search input
User->>View: type query
View->>View: update searchQuery state
View->>RowList: compute matchingBills (filter by query) and render
RowList->>Browser: render rows (each with hideDateline as passed)
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Possibly related PRs
🚥 Pre-merge checks | ✅ 2 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
Comment |
![chatgpt-codex-connector[bot]](https://avatars.githubusercontent.com/in/1144995?s=60&v=4){kind=small}
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: da87f0802a
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
Greptile SummaryThis PR redesigns the Policy Bills tab on The overall direction is solid and the UX details (keyboard shortcuts, live count feedback, stagger animation,
Confidence Score: 4/5Safe to merge after fixing the "filed" label — it's a one-liner in BillFeedRow.tsx and the rest of the PR is well-constructed. One P1 date-label mislabelling needs a one-line fix; all other changes are clean UX additions with good accessibility hygiene. The ScrollChevron refactor in DataSourceTabs is a straightforward extraction with no logic changes. No security, auth, or data-persistence concerns. The search-cap P2 is a UX follow-up, not a blocker. ui-nextjs/components/explore/BillFeedRow.tsx — fix Important Files Changed
Flowchart%%{init: {'theme': 'neutral'}}%%
flowchart TD
A([API fetch – up to 5000 bills]) --> B[allBills state]
B --> C{matchingBills useMemo}
F1[filters.stateFips] --> C
F2[filters.statuses] --> C
F3[filters.topics] --> C
F4[searchQuery\ntitle · bill_number · summary\nstate · state_name] --> C
C --> D[sort by last_action_date desc]
D --> E[filteredBills\nslice 0–50]
E --> G[BillFeedRow × N]
G --> H{hideDateline?}
H -- stateFips !== null --> I[hide dateline stamp]
H -- stateFips === null --> J[show XX · DATELINE]
K([/ keydown]) --> L[searchRef.focus + select]
M([Esc keydown]) --> N[clear searchQuery]
O([esc pill click]) --> N
|
![greptile-apps[bot]](https://avatars.githubusercontent.com/in/867647?s=60&v=4){kind=small}
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
ui-nextjs/components/explore/BillFeedRow.tsx (1)
97-105:⚠️ Potential issue | 🟡 MinorAccessible action text is inconsistent with visible link text.
Line 101 uses “View …” while Line 104 says “dispatch →”. Screen reader output should match the visible action copy.
As per coding guidelines "ui-nextjs/**/*.tsx: ... Check for proper TypeScript strict mode compliance and accessibility."Proposed fix
- aria-label={`View ${bill.bill_number}: ${bill.title}`} + aria-label={`Dispatch ${bill.bill_number}: ${bill.title}`}🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@ui-nextjs/components/explore/BillFeedRow.tsx` around lines 97 - 105, The anchor in BillFeedRow.tsx has an aria-label "View {bill.bill_number}: {bill.title}" that doesn't match the visible link text "dispatch →"; update the aria-label on that <a> (the dispatch link) to match the visible copy (e.g., "dispatch" or "dispatch — {bill.bill_number}: {bill.title}" if you need extra context) so screen reader output matches the visible action text; ensure the change is made on the anchor with href={bill.url} and preserves target, rel, and existing classes.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@ui-nextjs/components/explore/BillFeedRow.tsx`:
- Line 22: The "filed" label is using the wrong source date: create a separate
relative date for the filed timestamp instead of reusing relativeDate (which
should reflect last_action_date). In BillFeedRow, add a new variable (e.g.,
filedRelativeDate) computed from bill.filed_date (via formatRelativeDate) and
update the JSX that renders the "filed ..." text to use filedRelativeDate; keep
the existing relativeDate (or rename to lastActionRelativeDate) for
last_action_date usages so each label shows the correct date source.
In `@ui-nextjs/components/explore/PolicyExploreView.tsx`:
- Around line 37-43: The keyboard handler inside PolicyExploreView.tsx (the
const handler in the useEffect) currently ignores INPUT, TEXTAREA, and
contentEditable but not SELECT elements; update the guard to also skip when the
focused element's tagName is 'SELECT' (ensure you check tag === 'SELECT'
alongside 'INPUT' and 'TEXTAREA') so pressing '/' while a select is focused
doesn't hijack focus for the search shortcut.
---
Outside diff comments:
In `@ui-nextjs/components/explore/BillFeedRow.tsx`:
- Around line 97-105: The anchor in BillFeedRow.tsx has an aria-label "View
{bill.bill_number}: {bill.title}" that doesn't match the visible link text
"dispatch →"; update the aria-label on that <a> (the dispatch link) to match the
visible copy (e.g., "dispatch" or "dispatch — {bill.bill_number}: {bill.title}"
if you need extra context) so screen reader output matches the visible action
text; ensure the change is made on the anchor with href={bill.url} and preserves
target, rel, and existing classes.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: ASSERTIVE
Plan: Pro
Run ID: 3969d482-e137-4551-ba77-226cc21878d8
📒 Files selected for processing (3)
ui-nextjs/components/explore/BillFeedRow.tsxui-nextjs/components/explore/DataSourceTabs.tsxui-nextjs/components/explore/PolicyExploreView.tsx
- Relabel the timestamp in BillFeedRow from 'filed' to 'last action' so it matches the underlying bill.last_action_date value. The feed is sorted by most-recent action, so that's the meaningful timestamp. - Add SELECT to the tag list skipped by the '/' keyboard shortcut in PolicyExploreView so pressing '/' while a select is focused doesn't hijack focus.
There was a problem hiding this comment.
Actionable comments posted: 1
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
ui-nextjs/components/explore/BillFeedRow.tsx (1)
97-105:⚠️ Potential issue | 🟡 MinorUpdate the link’s accessible name to match “dispatch”.
The visible label changed to
dispatch →, butaria-labelstill announcesView .... Becausearia-labeloverrides the link text, screen reader users will get the old wording.Suggested fix
<a href={bill.url} target="_blank" rel="noopener noreferrer" - aria-label={`View ${bill.bill_number}: ${bill.title}`} + aria-label={`Dispatch ${bill.bill_number}: ${bill.title}`} className="shrink-0 self-center text-[11px] font-mono uppercase tracking-wider text-[`#00ff32`]/80 hover:text-[`#00ff32`] whitespace-nowrap border-b border-[`#00ff32`]/30 hover:border-[`#00ff32`] pb-0.5 transition-colors" > dispatch → </a>As per coding guidelines
ui-nextjs/**/*.tsx: “Check for proper TypeScript strict mode compliance and accessibility.”🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@ui-nextjs/components/explore/BillFeedRow.tsx` around lines 97 - 105, Update the anchor in BillFeedRow so its ARIA name matches the visible label "dispatch →": locate the <a> element in the BillFeedRow component that currently sets aria-label={`View ${bill.bill_number}: ${bill.title}`} and change the aria-label to "dispatch" (or to include the visible arrow if desired) or remove the aria-label so the link text is announced; ensure the change references the same bill prop and preserves target, rel, and styling.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@ui-nextjs/components/explore/PolicyExploreView.tsx`:
- Around line 214-219: The decorative prefix and shortcut hint span elements in
PolicyExploreView.tsx (the spans rendering ">" and the "/" hint) sit over the
input and block clicks—add the CSS utility class pointer-events-none to those
span elements (keep aria-hidden) so they become click-through, and apply the
same change to the second occurrence around lines ~257-265 to ensure clicks
focus the search field.
---
Outside diff comments:
In `@ui-nextjs/components/explore/BillFeedRow.tsx`:
- Around line 97-105: Update the anchor in BillFeedRow so its ARIA name matches
the visible label "dispatch →": locate the <a> element in the BillFeedRow
component that currently sets aria-label={`View ${bill.bill_number}:
${bill.title}`} and change the aria-label to "dispatch" (or to include the
visible arrow if desired) or remove the aria-label so the link text is
announced; ensure the change references the same bill prop and preserves target,
rel, and styling.
🪄 Autofix (Beta)
✅ Autofix completed
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: ASSERTIVE
Plan: Pro
Run ID: 794d3331-4a7d-424a-bd69-f783d42b4672
📒 Files selected for processing (2)
ui-nextjs/components/explore/BillFeedRow.tsxui-nextjs/components/explore/PolicyExploreView.tsx
|
Note Autofix is a beta feature. Expect some limitations and changes as we gather feedback and continue to improve it. Fixes Applied SuccessfullyFixed 1 file(s) based on 1 unresolved review comment. Files modified:
Commit: The changes have been pushed to the Time taken: |
Fixed 1 file(s) based on 1 unresolved review comment. Co-authored-by: CodeRabbit <noreply@coderabbit.ai>
1 participant
Summary
Follow-up to #185 addressing feedback that the bills table was hard to use: (1) no way to tell which state a bill belonged to in the unfiltered view, and (2) no search. Committed to a "legislative wire / political desk" aesthetic that extends the existing terminal phrasing on the explore page.
BillFeedRownow shows a 2-letter state monogram with an accent tick and "DATELINE" caption to the left of each bill. Hidden when a single state is already selected in the filter panel (redundant there).>prompt prefix, placeholder shows live dispatch count (filter 1,243 dispatches…), global/keyboard shortcut focuses it,Escclears it,kbdhints render inline. Filters by title, bill number, summary, state abbrev, and state name.text-smmuted totext-[15px] font-medium text-gray-100. Metadata (bill number, phase, filed date) recedes to uppercase mono.DataSourceTabsinto a single reusable component.Test plan
/explore→ Policy Bills tab: each row shows aXX · DATELINEstamp to the left of the phase glyph/anywhere on the page: search input receives focus and selects existing textEscwhile focused: search clearsescpill with search active: clears and refocuses input/hint kbd visible; with focus: hint fades outSummary by CodeRabbit
New Features
/keyboard shortcut, Escape to clear, inline hint/button, and client-side filtering.UI Improvements