feat: add devicon icons to tag badges#25
Conversation
Folder Restructure: - Move completed task notes to `x_docs/OLD/` - Move reference notes to `x_docs/my_notes/` - Move active task folder to `x_docs/` root - Delete obsolete/redundant notes (colours, flex_grid_layout, globals-compare, etc.) New Documentation: - Add `authentication.md` and `navigation.md` to `OLD/` for architecture reference - Add `textbook/url-state.md` for searchParams pattern documentation Configuration: - Add `Read(x_docs/OLD/**)` to Claude deny list to prevent reading archived docs Consolidates project documentation by separating active work from completed tasks and archived reference material. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Component Structure: - Move tag-link.tsx from right-sidebar/ to components/ for reuse - Update imports in right-sidebar and home page Home Page: - Replace inline tag spans with TagLink component - Change title from demo text to "All Questions" - Remove demo content (overflow tests, flexbox examples) - Reduce tags to tailwind and nextjs only TagLink is now a shared component used by both the right sidebar and home page, providing consistent tag styling and link behaviour across the application.
Handover Documentation: - Add handover-2.md with implementation spec for devicon integration - Rename handover.md to handover-1.md (previous right sidebar work) - Include visual target reference (tags.jpg) Reference Materials: - Add devicon.json registry (600+ icons with styles and aliases) - Add devicon-readme.md for installation and usage reference Documents the JSON registry lookup approach for adding technology icons to tag badges. Includes technical constraints around style availability per icon and alias resolution from the official devicon registry.
Devicon Integration: - Add `getDeviconClassName()` utility with O(1) registry lookup - Support 600+ icons via devicon.json with alias resolution (js → javascript) - Style preference: plain → original → line → first available - Configurable `colored` param for brand colours vs monotone TagLink Component: - Render devicon icons inline when available - Fall back to Lucide `<Tag />` for unknown tags - Add `colored` prop (default false, right sidebar uses true) Infrastructure: - Load devicon CSS via CDN in layout - Add 20 unit tests for icon resolution Docs: - Rename x_docs/OLD to x_docs/DONE - Move right-sidebar handover to DONE, mark criteria verified Enables automatic technology icons for user-generated tags without manual mapping. Icons render for any tag matching the devicon registry. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
Caution Review failedThe pull request is closed. Summary by CodeRabbit
✏️ Tip: You can customize this high-level summary in your review settings. WalkthroughAdds devicon support and a new shared TagLink component with optional coloured icons and icon selection logic; introduces lib/devicon utility and tests, updates tag rendering and layout to load devicon stylesheet, and adds/removes several documentation files and test/data changes. Changes
Sequence Diagram(s)(omitted) Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes Possibly related PRs
Poem
Pre-merge checks and finishing touches❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
📜 Recent review detailsConfiguration used: Organization UI Review profile: ASSERTIVE Plan: Pro 📒 Files selected for processing (5)
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. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 6
📜 Review details
Configuration used: Organization UI
Review profile: ASSERTIVE
Plan: Pro
⛔ Files ignored due to path filters (3)
x_docs/DONE/2026-01-01-right-sidebar/current.jpgis excluded by!**/*.jpgx_docs/DONE/2026-01-01-right-sidebar/pic1-target.jpgis excluded by!**/*.jpgx_docs/DONE/2026-01-01-right-sidebar/tags.jpgis excluded by!**/*.jpg
📒 Files selected for processing (32)
.claude/settings.jsonapp/(root)/page.tsxapp/layout.tsxcomponents/right-sidebar/right-sidebar.tsxcomponents/right-sidebar/tag-link.tsxcomponents/tag-link.tsxlib/devicon.jsonlib/devicon.test.tslib/devicon.tsx_docs/DONE/2025-12-14-eval-auth-ui-customise.mdx_docs/DONE/2025-12-17-make-mobile-nav.mdx_docs/DONE/2025-12-17-page-spacing.mdx_docs/DONE/2025-12-25-layout-refactor.mdx_docs/DONE/2026-01-01-right-sidebar/devicon-readme.mdx_docs/DONE/2026-01-01-right-sidebar/devicon.jsonx_docs/DONE/2026-01-01-right-sidebar/handover-1.mdx_docs/DONE/2026-01-01-right-sidebar/handover-2.mdx_docs/DONE/authentication.mdx_docs/DONE/navigation.mdx_docs/mine/colours.mdx_docs/mine/flex_grid_layout.mdx_docs/mine/globals-compare.mdx_docs/mine/nav_mobile_sidebar-and-rail.mdx_docs/my_notes/WORDS.mdx_docs/my_notes/caching-explained-1.mdx_docs/my_notes/caching-explained-2.mdx_docs/my_notes/micro-interactions.mdx_docs/my_notes/secrets-reference.mdx_docs/my_notes/theme_resources.mdx_docs/my_notes/zustand.mdx_docs/quick_notes.mdx_docs/textbook/url-state.md
💤 Files with no reviewable changes (6)
- components/right-sidebar/tag-link.tsx
- x_docs/mine/colours.md
- x_docs/quick_notes.md
- x_docs/mine/flex_grid_layout.md
- x_docs/mine/nav_mobile_sidebar-and-rail.md
- x_docs/mine/globals-compare.md
🧰 Additional context used
📓 Path-based instructions (3)
**/*.{ts,tsx,js,jsx,md}
📄 CodeRabbit inference engine (CLAUDE.md)
Use British English throughout the codebase (comments, strings, documentation)
Files:
app/(root)/page.tsxx_docs/DONE/2026-01-01-right-sidebar/handover-2.mdx_docs/DONE/navigation.mdlib/devicon.tsx_docs/textbook/url-state.mdapp/layout.tsxlib/devicon.test.tscomponents/right-sidebar/right-sidebar.tsxx_docs/DONE/authentication.mdx_docs/DONE/2026-01-01-right-sidebar/devicon-readme.mdcomponents/tag-link.tsxx_docs/DONE/2026-01-01-right-sidebar/handover-1.md
**/*.{ts,tsx}
📄 CodeRabbit inference engine (CLAUDE.md)
**/*.{ts,tsx}: Only add "use client" directive when interactivity is needed
Avoid manual useMemo/useCallback unless profiling shows need
Files:
app/(root)/page.tsxlib/devicon.tsapp/layout.tsxlib/devicon.test.tscomponents/right-sidebar/right-sidebar.tsxcomponents/tag-link.tsx
**/*.{ts,tsx,js,jsx}
📄 CodeRabbit inference engine (CLAUDE.md)
Always use @/ import aliases, even for sibling files (use @/app/fonts instead of ./fonts)
Files:
app/(root)/page.tsxlib/devicon.tsapp/layout.tsxlib/devicon.test.tscomponents/right-sidebar/right-sidebar.tsxcomponents/tag-link.tsx
🧠 Learnings (8)
📚 Learning: 2025-12-10T20:20:46.607Z
Learnt from: michellepace
Repo: michellepace/devflow PR: 7
File: components/navigation/navbar/index.tsx:1-12
Timestamp: 2025-12-10T20:20:46.607Z
Learning: Clerk's Next.js components (SignedIn, SignedOut, SignInButton, SignUpButton, UserButton) from clerk/nextjs can be used inside Server Components without adding 'use client' in the consuming component. They manage client/server boundary internally. When reviewing code, prefer omitting 'use client' in server components that render these Clerk components and avoid introducing client directives solely for these components. This guideline helps maintain server/server boundary and reduce client bundle size.
Applied to files:
app/(root)/page.tsxapp/layout.tsxcomponents/right-sidebar/right-sidebar.tsxcomponents/tag-link.tsx
📚 Learning: 2025-12-25T13:56:09.644Z
Learnt from: michellepace
Repo: michellepace/devflow PR: 18
File: components/navigation/content-top-bar.tsx:23-30
Timestamp: 2025-12-25T13:56:09.644Z
Learning: In the Grok-style layout for this project, authenticated user account controls (Clerk's UserButton) are placed in the sidebar footer (components/app-sidebar.tsx), not in the content top bar (components/navigation/content-top-bar.tsx). The content top bar only displays SignedOut authentication options (Sign in/Sign up buttons).
Applied to files:
x_docs/DONE/navigation.mdx_docs/DONE/authentication.md
📚 Learning: 2025-12-25T15:46:08.787Z
Learnt from: michellepace
Repo: michellepace/devflow PR: 18
File: lib/utils.ts:17-19
Timestamp: 2025-12-25T15:46:08.787Z
Learning: In Tailwind CSS v4, the shorthand bg-(image:--gradient-primary) with parentheses is valid and equivalent to bg-[image:var(--gradient-primary)]. The michellepace/devflow repo standardizes on using the v4 shorthand syntax with parentheses for CSS variable references; when you need a Tailwind utility that references a CSS variable, prefer the shorthand form to maintain consistency across TypeScript files in the project (e.g., lib/**/*.ts).
Applied to files:
lib/devicon.tslib/devicon.test.ts
📚 Learning: 2025-12-28T22:41:43.683Z
Learnt from: CR
Repo: michellepace/devflow PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-12-28T22:41:43.683Z
Learning: Applies to proxy.ts : Use proxy.ts with clerkMiddleware() instead of middleware.ts for authentication
Applied to files:
x_docs/DONE/authentication.md
📚 Learning: 2025-12-10T20:20:54.402Z
Learnt from: michellepace
Repo: michellepace/devflow PR: 7
File: components/navigation/navbar/index.tsx:1-12
Timestamp: 2025-12-10T20:20:54.402Z
Learning: Clerk's Next.js components (SignedIn, SignedOut, SignInButton, SignUpButton, UserButton) exported from clerk/nextjs are designed to work in Server Components without requiring a "use client" directive in the consuming component, as they handle the client/server boundary internally with their own directives.
Applied to files:
x_docs/DONE/authentication.md
📚 Learning: 2025-12-28T22:41:43.683Z
Learnt from: CR
Repo: michellepace/devflow PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-12-28T22:41:43.683Z
Learning: Applies to components/auth/clerk-signin.tsx : Sign In component (components/auth/clerk-signin.tsx) should be a client component with theme-aware logo
Applied to files:
x_docs/DONE/authentication.md
📚 Learning: 2025-12-28T22:41:43.683Z
Learnt from: CR
Repo: michellepace/devflow PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-12-28T22:41:43.683Z
Learning: Applies to components/clerk-provider.tsx : ClerkProvider should be implemented in components/clerk-provider.tsx and apply shadcn theme and Inter font
Applied to files:
x_docs/DONE/authentication.md
📚 Learning: 2025-12-28T22:41:43.683Z
Learnt from: CR
Repo: michellepace/devflow PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-12-28T22:41:43.683Z
Learning: Applies to components/auth/clerk-signup.tsx : Sign Up component (components/auth/clerk-signup.tsx) should use a static logo
Applied to files:
x_docs/DONE/authentication.md
🧬 Code graph analysis (3)
app/(root)/page.tsx (1)
components/tag-link.tsx (1)
TagLink(12-37)
lib/devicon.test.ts (1)
lib/devicon.ts (1)
getDeviconClassName(44-68)
components/tag-link.tsx (1)
lib/devicon.ts (1)
getDeviconClassName(44-68)
🪛 LanguageTool
x_docs/DONE/2026-01-01-right-sidebar/handover-2.md
[uncategorized] ~39-~39: The official spelling of this programming framework is “Next.js”.
Context: ...["original", "original-wordmark"] | | nextjs | `["plain", "line", "original-wordmark...
(NODE_JS)
[uncategorized] ~54-~54: The official spelling of this programming framework is “Next.js”.
Context: ...| ["reactjs"] | reactjs → react | | nextjs | [] | (no aliases) | | android | `[]...
(NODE_JS)
[style] ~81-~81: Would you like to use the Oxford spelling “normalizes”? The spelling ‘normalises’ is also correct.
Context: ...viconClassName(name): string | null` — normalises tag name, looks up registry, selects co...
(OXFORD_SPELLING_Z_NOT_S)
[style] ~84-~84: To form a complete sentence, be sure to include a subject.
Context: ...TagLink is currently the only consumer. Can be extracted later if icons appear else...
(MISSING_IT_THERE)
[typographical] ~108-~108: Do not use a colon (:) before a series that is introduced by a preposition (‘for’). Remove the colon or add a noun or a noun phrase after the preposition.
Context: ...n CSS loaded via CDN - [x] Icons render for: nextjs, react, javascript, tailwindcss ...
(RP_COLON)
[uncategorized] ~108-~108: The official spelling of this programming framework is “Next.js”.
Context: ... loaded via CDN - [x] Icons render for: nextjs, react, javascript, tailwindcss - [x] A...
(NODE_JS)
x_docs/textbook/url-state.md
[uncategorized] ~24-~24: Use a comma before ‘or’ if it connects two independent clauses (unless they are closely connected and short).
Context: ...or Redux, etc.) when state changes often or you need fine-grained control over re-r...
(COMMA_COMPOUND_SENTENCE)
x_docs/DONE/authentication.md
[style] ~47-~47: Would you like to use the Oxford spelling “localization”? The spelling ‘localisation’ is also correct.
Context: ...rovider.tsx` applies global theming and localisation defaults. ### Proxy (Route Protection)...
(OXFORD_SPELLING_Z_NOT_S)
[misspelling] ~62-~62: This word is normally spelled as one.
Context: ...erk uses catch-all routes to handle its multi-step authentication flows: - `app/(auth)/si...
(EN_COMPOUNDS_MULTI_STEP)
[style] ~69-~69: Would you like to use the Oxford spelling “customizations”? The spelling ‘customisations’ is also correct.
Context: ...d <SignUp> components with appearance customisations. ### Auth Layout `app/(auth)/layout.t...
(OXFORD_SPELLING_Z_NOT_S)
[style] ~83-~83: Would you like to use the Oxford spelling “customizes”? The spelling ‘customises’ is also correct.
Context: ... use CSS variables. The component also customises header alignment (left-aligned rather t...
(OXFORD_SPELLING_Z_NOT_S)
[style] ~91-~91: Would you like to use the Oxford spelling “Customization”? The spelling ‘Customisation’ is also correct.
Context: ...light and dark backgrounds. --- ## UI Customisation Clerk's appearance is customised at tw...
(OXFORD_SPELLING_Z_NOT_S)
[style] ~93-~93: Would you like to use the Oxford spelling “customized”? The spelling ‘customised’ is also correct.
Context: ...UI Customisation Clerk's appearance is customised at two levels: ### Global (ClerkProvid...
(OXFORD_SPELLING_Z_NOT_S)
[grammar] ~101-~101: An apostrophe ‘s’ denotes possession. Did you mean to use the plural form of the noun (no apostrophe)?
Context: ...Clerk styles - Font: References the app's Inter font via CSS variable - **Button ...
(NOUN_APOSTROPHE_S_VERB)
[style] ~103-~103: Would you like to use the Oxford spelling “Localization”? The spelling ‘Localisation’ is also correct.
Context: ...and gradient (--gradient-primary) - Localisation: Custom text for sign-in/sign-up titl...
(OXFORD_SPELLING_Z_NOT_S)
[style] ~156-~156: Would you like to use the Oxford spelling “localization”? The spelling ‘localisation’ is also correct.
Context: ...rovider.tsx| Global Clerk theming and localisation | |app/(auth)/layout.tsx` | Auth page...
(OXFORD_SPELLING_Z_NOT_S)
[style] ~169-~169: Would you like to use the Oxford spelling “localization”? The spelling ‘localisation’ is also correct.
Context: ...es with authentication state. - Clerk's localisation API allows customising any text string....
(OXFORD_SPELLING_Z_NOT_S)
[style] ~169-~169: Would you like to use the Oxford spelling “customizing”? The spelling ‘customising’ is also correct.
Context: ...tate. - Clerk's localisation API allows customising any text string. The `{{provider|titlei...
(OXFORD_SPELLING_Z_NOT_S)
x_docs/DONE/2026-01-01-right-sidebar/devicon-readme.md
[style] ~261-~261: Consider a more concise word here.
Context: ...de.js and NPM. These tools are required in order to build Devicon properly.
Install Fi...
(IN_ORDER_TO_PREMIUM)
[uncategorized] ~287-~287: ‘Amount of’ should usually only be used with uncountable or mass nouns. Consider using “number” if this is not the case.
Context: ...n your operating system's speed and the amount of icons.
If there are any error...
(AMOUNTOF_TO_NUMBEROF)
🔇 Additional comments (11)
x_docs/DONE/navigation.md (1)
1-265: Exemplary navigation architecture documentation.This is comprehensive, well-structured documentation that clearly explains the navigation system across breakpoints and contexts. The visual breakdowns, component architecture, and implementation details are particularly clear. Importantly, the authentication UI placement (lines 82–91) correctly reflects the Grok-style layout pattern where the UserButton appears in the sidebar footer rather than the content top bar. The document appropriately uses British English throughout (e.g., "expiry" on line 188) and serves as clear handover material for the navigation system.
components/tag-link.tsx (4)
1-4: LGTM: Import usage follows guidelines.All imports correctly use the
@/alias convention as specified in the coding guidelines.
24-24: LGTM: Correct Tailwind v4 CSS variable syntax.The
bg-(--tag-bg)andtext-(--tag-text)syntax correctly uses parentheses for CSS variables, which is the required syntax in Tailwind v4 (a breaking change from v3's bracket syntax).
12-37: LGTM: Appropriate server component usage.The component correctly omits the "use client" directive. Next.js Link components work in server components, and no client-side interactivity (hooks, event handlers) is present. This follows the coding guideline to only add "use client" when interactivity is needed.
12-16: Default value mismatch is intentional. ThegetDeviconClassNameutility defaultscoloredtotrue(permissive, brand colours enabled) whilstTagLinkdefaults tofalse(monotone, opt-in). This is a deliberate design pattern: the utility provides a general-purpose default, whilst the component establishes a context-specific default for its primary use case. No action required.components/right-sidebar/right-sidebar.tsx (1)
2-2: LGTM! Clean refactoring to centralised TagLink component.The import path update correctly references the new shared
TagLinkcomponent location, and thecoloredprop enables brand colours for the popular tags sidebar. The boolean attribute without an explicit value correctly evaluates totrue, aligning with the component's API.Also applies to: 62-62
lib/devicon.test.ts (1)
1-130: Excellent test coverage with proper British English usage.The test suite comprehensively covers all critical paths of
getDeviconClassName:
- Known icons with different style preferences (plain vs original)
- Alias resolution for common abbreviations
- Input normalisation (case, whitespace)
- Edge cases (unknown tags, empty strings)
- Style fallback logic when preferred styles are unavailable
- Coloured/uncoloured icon variants
The use of British English ("normalisation", "coloured") correctly aligns with the project's coding guidelines.
x_docs/DONE/2026-01-01-right-sidebar/devicon-readme.md (1)
1-319: Reference documentation from Devicon project.This is archived reference documentation from the official Devicon project. The static analysis style hints (lines 261, 287) apply to the original upstream content and don't require changes, as this is third-party documentation kept for reference purposes.
lib/devicon.ts (3)
63-67: Excellent style preference logic.The style selection correctly prioritises
plain→original→linewith fallback to the first available style in the registry. This handles the varying style availability across different devicons elegantly.
1-1: LGTM: Correct usage of conventions.The code correctly uses the
@/import alias (line 1) as per coding guidelines, and British English spelling "normalised" (line 48) throughout. Well done maintaining consistency with project standards.Based on learnings, when referencing CSS variables in Tailwind v4, this project standardises on using the shorthand syntax with parentheses (e.g.,
bg-(--var)), though this utility doesn't directly interact with Tailwind.Also applies to: 48-48
24-28: No case sensitivity bug exists in this code.The
nameMapstores lowercase keys because all names indevicon.jsonare already lowercase (e.g., "react", "angular", "adonisjs"). Lookups use the normalised (lowercase) input, so the code functions correctly as-is. The proposed.toLowerCase()fix is redundant sinceentry.nameis already lowercase from the source data.Likely an incorrect or invalid review comment.
TagLink Component: - Add `showIcon` prop (default: false) for optional icon display - Change default to text-only badges for cleaner appearance - Icons render only when `showIcon` is explicitly enabled Right Sidebar: - Add explicit `showIcon` prop to retain icons with brand colours Documentation: - Update handover to reflect new prop and defaults Simplifies default TagLink usage for contexts where icons add clutter. The right sidebar retains rich visual treatment with `showIcon colored`, while question cards use minimal text-only badges. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Mock Data: - Add 5 new tags (typescript, css, tailwind, nodejs, html) - Sort tags by question count descending Test: - Add assertion to verify tags return in descending order by question count New tags ensure devicon icons display for common programming topics. The sort order test documents the expected behaviour and will catch data ordering issues when migrating to a database. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
1 participant
Summary
<Tag />icon for unknown tagsChanges
Core Implementation:
lib/devicon.ts—getDeviconClassName()utility with O(1) registry lookuplib/devicon.json— Committed registry for predictable behaviourcomponents/tag-link.tsx— Render icons inline withcoloredprop supportIntegration:
app/layout.tsx— Load devicon CSS via CDNcomponents/right-sidebar/right-sidebar.tsx— Use brand colours in sidebarTests:
Test plan
🤖 Generated with Claude Code