Skip to content

Redesign tutorials filter UI with skill tabs, search, and collapsible tags#17579

Merged
wackerow merged 8 commits into
ethereum:devfrom
konopkja:redesign/tutorials-filter-ui
Feb 20, 2026
Merged

Redesign tutorials filter UI with skill tabs, search, and collapsible tags#17579
wackerow merged 8 commits into
ethereum:devfrom
konopkja:redesign/tutorials-filter-ui

Conversation

@konopkja
Copy link
Copy Markdown
Contributor

@konopkja konopkja commented Feb 16, 2026

Summary

  • Skill-level TabNav: Replaces flat tag layout with animated tab selector (All / Beginner / Intermediate / Advanced) with counts and icons, using the same TabNav component from the events page
  • Inline search: Text search across tutorial title, description, tags, and author — positioned on the same row as the skill tabs
  • Collapsible topic tags: Top 12 tags by popularity shown by default, remaining behind a "+N more" expander to eliminate the wall-of-tags problem
  • Active filters summary: Dismissible pills showing current skill, tag, and search filters with a clear-all action
  • ContentHero header: Modernized page header using ContentHero with breadcrumbs, doge-computer hero image, and submit button integrated into the hero
  • Color-coded skill badges: Tutorial cards now use green/yellow/red tag variants for beginner/intermediate/advanced

Before

~54 tags displayed as a flat grid with no hierarchy or grouping

After

Structured filter UI with skill tabs, search, and organized topic tags

Preview link

https://deploy-preview-17579.ethereum.it/developers/tutorials

Test plan

  • Visit /developers/tutorials/ and verify the ContentHero renders with doge image and submit button
  • Click each skill tab (All/Beginner/Intermediate/Advanced) and confirm filtering works
  • Type in the search bar and confirm results filter by title/description/tags/author
  • Click topic tags and verify AND-logic filtering
  • Click "+N more" to expand all tags, then "Show less" to collapse
  • Verify active filters summary appears with dismissible pills
  • Click "Clear" to reset all filters
  • Verify skill badges on cards are color-coded (green/yellow/red)
  • Test on mobile viewport — tabs should stack above search
  • Verify skeleton loader matches new layout structure

🤖 Generated with Claude Code

…tHero

Replace the flat wall of ~54 tags with a structured filter UI:
- TabNav skill-level selector (All/Beginner/Intermediate/Advanced) with counts and icons
- Inline search bar for filtering by title, description, tags, or author
- Collapsible topic tags: top 12 by popularity shown by default, rest behind "+N more"
- Active filters summary bar with dismissible pills and clear-all
- Color-coded skill badges on tutorial cards (green/yellow/red)

Modernize the page header using ContentHero with breadcrumbs,
doge-computer hero image, and submit button integrated into the hero.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
@netlify
Copy link
Copy Markdown

netlify Bot commented Feb 18, 2026

Deploy Preview for ethereumorg ready!

Name Link
🔨 Latest commit 689838a
🔍 Latest deploy log https://app.netlify.com/projects/ethereumorg/deploys/69978543c61750000800c0e1
😎 Deploy Preview https://deploy-preview-17579.ethereum.it
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.
Lighthouse
Lighthouse
7 paths audited
Performance: 57 (🟢 up 2 from production)
Accessibility: 94 (no change from production)
Best Practices: 100 (no change from production)
SEO: 99 (🔴 down 1 from production)
PWA: 59 (no change from production)
View the detailed breakdown and full score reports

To edit notification comments on pull requests, go to your Netlify project configuration.

wackerow and others added 6 commits February 19, 2026 13:54
- remove dynamic import
- pass label as children
Co-authored-by: Gemini <noreply@google.com>
- Match skeleton loading fallback to actual component layout (max-w-screen-lg, lg breakpoints)
- Translate skill name in active filter summary
- Add aria-label to search input for screen readers
- Fix Text component type (HTMLParagraphElement, not HTMLHeadElement)
- Remove redundant array spread in setSelectedTags
- Guard skill Tag render against undefined tutorial.skill

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
@github-actions github-actions Bot added content 🖋️ This involves copy additions or edits translation 🌍 This is related to our Translation Program labels Feb 19, 2026
@wackerow wackerow merged commit f34e104 into ethereum:dev Feb 20, 2026
7 checks passed
@pettinarip pettinarip mentioned this pull request Feb 27, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

content 🖋️ This involves copy additions or edits translation 🌍 This is related to our Translation Program

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants