feat: modernise the catalogue UI with advanced search, filters and motion by ManuChitiva · Pull Request #122 · azerothcore/git-catalogue

ManuChitiva · 2026-11-03T17:35:56Z

What

A full pass on the catalogue experience: search, discovery, loading feedback, motion and the repository details page.

Why

matchingItems only checked item.name, so searching a topic (lua), a description or an author returned nothing. The list was a flat stack of rows, with no filters, no result count, no loading state and an unstyled details page.

Before / after

Home

Before	After

Searching lua (0 results before, 24 after)

Before	After

Repository details

Before	After

Search

Multi-field: name, full name, description, topics, language and owner.
Multi-term AND, case and accent insensitive.
Operators: topic:lua, lang:TypeScript (language:), owner:azerothcore, stars:>100.
Query persisted in sessionStorage; "Reset" clears search and filters.
Result count, clear button, Escape to clear and / to focus.

Filters

Panel	Active filters

Topic chips (top 14 per tab), language and minimum stars; active filters render as removable chips and the count badge on the button.

Loading and motion

Skeleton while loading	Route transition

Header, toolbar and tabs rise in sequence; rows fade in in pairs (90 ms apart).
Every route change goes through a dark AzerothCore veil (wordmark + red line) that covers the swap and reveals the new section.
The eyebrow draws its red line, settles its tracking and keeps a pulsing dot.
prefers-reduced-motion disables all of it.

Star tiers

> 300 stars	> 100 stars

> 300: 3 stars (one above, two below) that spin in and settle. Animation plays once, staggered per star, and starts when the route veil lifts.
> 100: 2 gold stars, static.
> 10: 1 gold star.
≤ 10: neutral single star.

Details

Breadcrumb (Catalogue / owner / repo), hero with description, topics, GitHub and Download ZIP, stats row, README card with GitHub-like typography and a sticky About sidebar.

Mobile

Test plan

npx ng build — passes.
npm run test-ci -- --browsers=ChromeHeadless — 28 SUCCESS.
Manual checks: lua, transmog, eluna azerothcore, topic:lua, owner:azerothcore, stars:>100, filters, reset, / shortcut, star tiers, route transition, 420 px layout.

Notes

No new dependencies and no configuration changes.
Screenshots live in the fork branch assets-preview (preview/v2) so the PR diff stays free of binaries.
CI: the E2E workflow is in action_required waiting for a maintainer to approve the first run from this fork; CodeRabbit skipped automatic review because the repo has fewer than 10 stars.

…ntrols Search now matches name, description, topics, language and author, requires every term to match, and ignores case and accents. Adds a result count, a clear button, Escape to clear, / to focus the input, an empty state, and persists the query across navigation.

coderabbitai · 2026-11-03T17:36:05Z

Important

Trigger review

This repository does not receive automatic reviews because it has fewer than 10 stars.

Run configuration

Source mode: Auto
Repository: Unavailable
Branch: Unavailable
File: No configuration file from this repository applied
Commit: Unavailable
Layers: defaults
Review profile: CHILL
Plan: Advanced
Run ID: 66cf8916-d269-42b0-8a02-455a6e787b83

Autofix · Keep fixing CodeRabbit findings and required CI, and resolving merge conflicts

Tip

🎯 Customize your risk assessments

Guide how CodeRabbit assesses merge risk and security architecture risk. Highlight sensitive changes and explain your security boundaries using Merge Risk Instructions and Security Risk Instructions in your review settings. Security architecture risk assessments require the Advanced plan or above.

✅ Automatic approvals, with your rules

Let CodeRabbit approve pull requests once required threads are resolved, pre-merge checks pass, and your risk limits are met. Enable Automatic approvals in review settings, with overrides for teams or file paths.

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

Share

Moves search and sort into a sticky toolbar, renders repositories as responsive cards with topic chips and metadata, and adds a dedicated empty state. Keeps the existing Angular Material tabs and paginator.

ManuChitiva · 2026-11-03T17:47:07Z

Thanks for the summary. As noted above, CodeRabbit is not reviewing this repository automatically, and the comment does not contain actionable findings.

Local verification before pushing:

npx ng build — passes.
npm run test-ci -- --browsers=ChromeHeadless — 28 SUCCESS.
Visual check at 1280 px and 420 px; before/after screenshots are in the PR description.

The E2E workflow is in action_required; a maintainer needs to approve the first workflow run from this fork. Happy to adjust anything once CI runs.

Adds a hero header with description and topics, a stats row, a styled README card with GitHub-like typography, and a sticky about sidebar with links and download actions.

Adds the light editorial layout, filter panel with topics/language/min stars, query operators, skeleton loading, staggered row entrance, branded route transition, spinning star tiers and header animations.

@for

Replace *ngIf/*ngFor with @if/@for across the home, repository, details and root templates, as requested in review.

@for

We prefer template literals over string concatenation and the built-in control flow over *ngFor, so this moves the remaining code to them. The how-to page loses the ?. on CONF because under @for it makes keyvalue type the values as unknown, which breaks the build.

The header took more vertical space than it needed, and on long lists you had to scroll to the bottom to change page.

Relative paths were resolved against the catalogue site, so those images never loaded. They now point at the file in the repository on its default branch.

The touch area of the smaller pagination buttons stuck out of the tab content and made it scroll sideways.

Helias · 2026-11-04T18:12:02Z

Super cool!
While I was there I made some minor improvements and fixes. I really like this new style, I hope to update also some forks based on this git-catalogue

Thanks!

feat: refresh catalogue layout with search toolbar and repository cards

3cd5770

Moves search and sort into a sticky toolbar, renders repositories as responsive cards with topic chips and metadata, and adds a dedicated empty state. Keeps the existing Angular Material tabs and paginator.

ManuChitiva changed the title ~~feat: improve catalogue search with multi-field matching and clear controls~~ feat: improve catalogue search and refresh the home layout Nov 3, 2026

feat: refresh repository details page

e2b3247

Adds a hero header with description and topics, a stats row, a styled README card with GitHub-like typography, and a sticky about sidebar with links and download actions.

ManuChitiva changed the title ~~feat: improve catalogue search and refresh the home layout~~ feat: improve catalogue search and refresh the home and details views Nov 3, 2026

feat: polish catalogue UX with advanced filters, motion and star tiers

938cd24

Adds the light editorial layout, filter panel with topics/language/min stars, query operators, skeleton loading, staggered row entrance, branded route transition, spinning star tiers and header animations.

ManuChitiva changed the title ~~feat: improve catalogue search and refresh the home and details views~~ feat: modernise the catalogue UI with advanced search, filters and motion Nov 3, 2026

Helias reviewed Nov 4, 2026

View reviewed changes

Comment thread src/app/home/home.component.html Resolved

Helias reviewed Nov 4, 2026

View reviewed changes

Comment thread src/app/home/home.component.html Resolved

ManuChitiva and others added 5 commits November 4, 2026 12:43

refactor: use Angular control flow in catalogue templates

7dbb08b

Replace *ngIf/*ngFor with @if/@for across the home, repository, details and root templates, as requested in review.

feat: tighten the catalogue header and add pagination above the results

5015bcf

The header took more vertical space than it needed, and on long lists you had to scroll to the bottom to change page.

fix: show README images that use relative paths

ed72ad1

Relative paths were resolved against the catalogue site, so those images never loaded. They now point at the file in the repository on its default branch.

fix: remove the horizontal scrollbar inside the catalogue tabs

5c5380d

The touch area of the smaller pagination buttons stuck out of the tab content and made it scroll sideways.

Helias merged commit d53125b into azerothcore:master Nov 4, 2026
2 checks passed

Navigation Menu

Repository navigation

feat: modernise the catalogue UI with advanced search, filters and motion - #122

feat: modernise the catalogue UI with advanced search, filters and motion#122
Helias merged 9 commits into
azerothcore:masterfrom
ManuChitiva:improve-search

ManuChitiva commented Nov 3, 2026 •

edited

Loading

Uh oh!

coderabbitai Bot commented Nov 3, 2026 •

edited

Loading

Uh oh!

ManuChitiva commented Nov 3, 2026

Uh oh!

Uh oh!

Uh oh!

Helias commented Nov 4, 2026

Uh oh!

Uh oh!

Reviewers

Uh oh!

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Conversation

ManuChitiva commented Nov 3, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

What

Why

Before / after

Search

Filters

Loading and motion

Star tiers

Details

Mobile

Test plan

Notes

Uh oh!

coderabbitai Bot commented Nov 3, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

ManuChitiva commented Nov 3, 2026

Uh oh!

Uh oh!

Uh oh!

Helias commented Nov 4, 2026

Uh oh!

Uh oh!

Reviewers

Uh oh!

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

ManuChitiva commented Nov 3, 2026 •

edited

Loading

coderabbitai Bot commented Nov 3, 2026 •

edited

Loading