Add badges & better error / none states

[Shrinks99]

User description

Changes

• Adds a badge counting the filtered search results for each day (good for when collapsed!)
• Adds better error / none states for when there's no archives to show
• Changes search highlight theming to the primary colour

Screenshots

---

PR Type

Enhancement

---

Description

• Added badges showing filtered search result count

• Improved search highlight styling with system colors

• Added "No results found" state for empty searches

• Enhanced UI with centered empty state message

---

Changes walkthrough 📝

Relevant files

Enhancement

argo-archive-list.ts Enhanced search UI with badges and empty state                      src/argo-archive-list.ts Added .center-flex-container class for centering content Created .md-badge style with primary color styling Updated search highlight color to use system color variables Added "No results found" message when search returns no results Implemented count badges showing number of filtered results per day +29/-1

---

Need help?

Type /help how to ... in the comments thread for any questions about PR-Agent usage.

Check out the documentation for more information.

[pr-agent-monadical]

PR Reviewer Guide 🔍

Here are some key observations to aid the review process:

⏱️ Estimated effort to review: 2 🔵🔵⚪⚪⚪

🧪 No relevant tests

🔒 No security concerns identified

⚡ Recommended focus areas for review Accessibility The badge color contrast should be verified to ensure it meets accessibility standards. Consider testing the primary color against on-primary text for sufficient contrast ratio. display: block; background-color: var(--md-sys-color-primary); color: var(--md-sys-color-on-primary); font-size: var(--md-sys-typescale-label-small); border-radius: 999px; padding: 2px 6px; } Empty State Handling The empty state implementation is a good addition, but consider adding an aria-live region to announce when search results change to zero for better screen reader support. if (!this.filteredPages.length) { return html` <div class="card-container center-flex-container"> <p class="md-typescale-body-medium">No results found.</p> </div> `; }