feat: add right-sidebar content with top questions and popular tags#24
feat: add right-sidebar content with top questions and popular tags#24michellepace merged 11 commits intomainfrom
Conversation
File renames: - desktop-top-bar → desktop-topbar - mobile-top-bar → mobile-topbar - mobile-nav-link → mobile-navlink Structure: - Move right-sidebar.tsx to dedicated components/right-sidebar/ folder - Update import paths in layout.tsx and mobile-nav.tsx Standardises compound word naming (removing hyphens). The right-sidebar folder prepares for Phase II components (question-link.tsx, tag-badge.tsx). 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Adds Badge component from shadcn/ui registry with CVA variants (default, secondary, destructive, outline) and asChild polymorphism via Radix Slot. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Playwright MCP: - Add browser_fill_form, browser_hover, browser_press_key, browser_type Bash commands: - Add git diff, gh pr view, npx vercel wildcards Expands Claude's auto-approved tool permissions for browser testing and CLI operations, reducing interaction prompts during development workflows.
Components: - Add QuestionLink with multi-line title and ChevronRight icon - Add TagLink with Badge toptag variant and question count - Add toptag Badge variant (uppercase, secondary colours) Data Layer: - Add lib/data/questions.ts with getTopQuestions() async function - Add lib/data/tags.ts with getPopularTags() async function - Export Question and Tag types for reuse Routes: - Add /question/[id] placeholder page - Add /tags/[slug] placeholder page Replace skeleton placeholders with functional content. Data layer uses async functions ready for MongoDB integration. RightSidebar now fetches data via Promise.all for parallel loading. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
Documentation: - Document two-layer animation stack: Tailwind CSS for base, Motion for advanced - Include decision tree for choosing between Tailwind and Motion - Cover shadcn/ui integration patterns (wrapper, motion component, pre-built) - Define centralised motion tokens approach for globals.css Provides a reference guide for implementing microinteractions in the DevFlow project, covering bundle considerations, accessibility, and v0 compatibility. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
CSS Variables: - Add --tag-bg and --tag-text with mode-specific OKLCH values - Remove unused --mobile-nav variable and its @theme registration Components: - Update toptag variant to use bg-(--tag-bg) text-(--tag-text) with px-4 py-2 - Switch mobile-nav background from bg-mobile-nav to bg-sidebar - Remove font-semibold from tag question count Tag badges now match pic1-target.jpg. Using CSS variable shorthand syntax (Tailwind 4) allows dark mode to work via cascade without dark: variants. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
QuestionLink: - Remove dated `hover:bg-accent/50` background overlay - Add underline reveal on hover with muted decoration colour - Animate chevron icon 2px right on hover with 150ms transition Replaces heavy background overlay with subtle, Linear-inspired hover effects that draw attention without obscuring surrounding content. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
TagLink: - Replace bg-accent/50 overlay with subtle translate-y and scale on hover - Move toptag styles inline to Badge className - Reduce count text size and use muted colour Badge: - Remove custom toptag variant, revert to pristine shadcn Keeps badge.tsx aligned with upstream shadcn for easier updates. The lift effect provides tactile feedback without the dated background overlay. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Implementation summary for sidebar components and data layer - Visual reference screenshots (target design and current state) - Notes on tag styling alignment and microinteraction changes - Draft requirements for future Devicon integration Historical record of the right-sidebar feature development decisions and next steps. 🤖 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 a right-sidebar feature with async server rendering and mock data sources, new question and tag routes, badge/tag CSS tokens, navigation import path updates, Playwright/Bash permissions, UI components (Badge, QuestionLink, TagLink), tests and E2E coverage, and supporting documentation. Changes
Sequence Diagram(s)sequenceDiagram
autonumber
participant Page as Server Page
participant RS as RightSidebar (async)
participant QSvc as getTopQuestions()
participant TSvc as getPopularTags()
participant QL as QuestionLink
participant TL as TagLink
Page->>RS: render RightSidebar
activate RS
Note right of RS `#f0f4ff`: Async server component\nuses Promise.all
par Concurrent fetch
RS->>QSvc: getTopQuestions(5)
activate QSvc
QSvc-->>RS: Promise<Question[]>
deactivate QSvc
and
RS->>TSvc: getPopularTags(5)
activate TSvc
TSvc-->>RS: Promise<Tag[]>
deactivate TSvc
end
RS->>RS: Promise.all resolves
RS->>QL: map questions -> QuestionLink components
RS->>TL: map tags -> TagLink components
RS-->>Page: rendered sidebar HTML
deactivate RS
Estimated code review effort🎯 4 (Complex) | ⏱️ ~45 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 (6)
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: 4
📜 Review details
Configuration used: Organization UI
Review profile: ASSERTIVE
Plan: Pro
⛔ Files ignored due to path filters (2)
x_docs/mine/2026-01-01-right-sidebar/current.jpgis excluded by!**/*.jpgx_docs/mine/2026-01-01-right-sidebar/pic1-target.jpgis excluded by!**/*.jpg
📒 Files selected for processing (17)
.claude/settings.jsonapp/(root)/layout.tsxapp/(root)/question/[id]/page.tsxapp/(root)/tags/[slug]/page.tsxapp/globals.csscomponents/navigation/desktop-topbar.tsxcomponents/navigation/mobile-nav.tsxcomponents/navigation/mobile-navlink.tsxcomponents/navigation/mobile-topbar.tsxcomponents/right-sidebar/question-link.tsxcomponents/right-sidebar/right-sidebar.tsxcomponents/right-sidebar/tag-link.tsxcomponents/ui/badge.tsxlib/data/questions.tslib/data/tags.tsx_docs/mine/2026-01-01-right-sidebar/handover.mdx_docs/mine/micro-interactions.md
🧰 Additional context used
📓 Path-based instructions (4)
**/*.{ts,tsx,js,jsx,md}
📄 CodeRabbit inference engine (CLAUDE.md)
Use British English throughout the codebase (comments, strings, documentation)
Files:
components/right-sidebar/tag-link.tsxapp/(root)/tags/[slug]/page.tsxx_docs/mine/2026-01-01-right-sidebar/handover.mdcomponents/right-sidebar/question-link.tsxcomponents/right-sidebar/right-sidebar.tsxx_docs/mine/micro-interactions.mdapp/(root)/layout.tsxcomponents/ui/badge.tsxcomponents/navigation/mobile-nav.tsxlib/data/questions.tslib/data/tags.tsapp/(root)/question/[id]/page.tsx
**/*.{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:
components/right-sidebar/tag-link.tsxapp/(root)/tags/[slug]/page.tsxcomponents/right-sidebar/question-link.tsxcomponents/right-sidebar/right-sidebar.tsxapp/(root)/layout.tsxcomponents/ui/badge.tsxcomponents/navigation/mobile-nav.tsxlib/data/questions.tslib/data/tags.tsapp/(root)/question/[id]/page.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:
components/right-sidebar/tag-link.tsxapp/(root)/tags/[slug]/page.tsxcomponents/right-sidebar/question-link.tsxcomponents/right-sidebar/right-sidebar.tsxapp/(root)/layout.tsxcomponents/ui/badge.tsxcomponents/navigation/mobile-nav.tsxlib/data/questions.tslib/data/tags.tsapp/(root)/question/[id]/page.tsx
🧠 Learnings (6)
📚 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:
components/right-sidebar/tag-link.tsxapp/(root)/tags/[slug]/page.tsxcomponents/right-sidebar/question-link.tsxcomponents/right-sidebar/right-sidebar.tsxapp/(root)/layout.tsxcomponents/ui/badge.tsxcomponents/navigation/mobile-nav.tsxapp/(root)/question/[id]/page.tsx
📚 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 app/**/[*]/page.{ts,tsx} : Next.js 16: Dynamic route params must be awaited as they are now a Promise - use { params }: { params: Promise<{ id: string }> }
Applied to files:
app/(root)/tags/[slug]/page.tsxapp/(root)/question/[id]/page.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:
app/(root)/layout.tsx
📚 Learning: 2025-12-25T13:56:02.914Z
Learnt from: michellepace
Repo: michellepace/devflow PR: 18
File: components/navigation/content-top-bar.tsx:23-30
Timestamp: 2025-12-25T13:56:02.914Z
Learning: In a Grok-style layout, move authenticated user controls (Clerk's UserButton) out of the top navigation and into the sidebar footer (e.g., components/app-sidebar.tsx). Ensure components/navigation/content-top-bar.tsx only renders SignedOut options (Sign in/Sign up). Apply this guideline to all TSX files under components/navigation to enforce consistent placement of authentication UI across the navigation layer.
Applied to files:
components/navigation/mobile-nav.tsx
📚 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/data/questions.tslib/data/tags.ts
📚 Learning: 2025-12-30T21:09:31.840Z
Learnt from: michellepace
Repo: michellepace/devflow PR: 23
File: app/globals.css:131-135
Timestamp: 2025-12-30T21:09:31.840Z
Learning: In CSS theme files, duplicating variable declarations in :root and .dark blocks is intentional to keep a parallel structure for readability and future maintenance. This pattern improves quick visual comparison and simplifies adding new themes. If you duplicate, ensure both blocks have identical values for the variables that are shared; consider centralizing truly shared tokens later only if maintenance burden grows.
Applied to files:
app/globals.css
🧬 Code graph analysis (4)
components/right-sidebar/tag-link.tsx (3)
components/ui/badge.tsx (1)
Badge(46-46)app/(root)/tags/page.tsx (1)
TagsPage(1-3)app/(root)/page.tsx (1)
tag(59-66)
app/(root)/tags/[slug]/page.tsx (2)
app/(root)/tags/page.tsx (1)
TagsPage(1-3)app/(root)/page.tsx (2)
h1(1-99)tag(59-66)
components/right-sidebar/right-sidebar.tsx (4)
lib/data/questions.ts (1)
getTopQuestions(30-33)lib/data/tags.ts (1)
getPopularTags(18-21)components/right-sidebar/question-link.tsx (1)
QuestionLink(9-21)components/right-sidebar/tag-link.tsx (1)
TagLink(9-23)
components/ui/badge.tsx (1)
lib/utils.ts (1)
cn(4-6)
🪛 LanguageTool
x_docs/mine/2026-01-01-right-sidebar/handover.md
[uncategorized] ~18-~18: The official spelling of this programming framework is “Next.js”.
Context: ...s/[slug]/page.tsx| Placeholder page —/tags/nextjs` | > URL strategy: Questions use n...
(NODE_JS)
[grammar] ~49-~49: A determiner may be missing.
Context: ...tag-link.tsx` to the target design. Use recommended best pragmatic practice of centralised themi...
(THE_SUPERLATIVE)
[style] ~49-~49: Would you like to use the Oxford spelling “centralized”? The spelling ‘centralised’ is also correct.
Context: ... recommended best pragmatic practice of centralised theming (CSS custom properties in `app/...
(OXFORD_SPELLING_Z_NOT_S)
[style] ~64-~64: Would you like to use the Oxford spelling “centralized”? The spelling ‘centralised’ is also correct.
Context: ...— Next.js 15, Tailwind config). Examine centralised theming in app/globals.css and evalua...
(OXFORD_SPELLING_Z_NOT_S)
[style] ~97-~97: Would you like to use the Oxford spelling “normalized”? The spelling ‘normalised’ is also correct.
Context: ...er automatically for user-created tags (normalised) when a matching devicon exists. If no ...
(OXFORD_SPELLING_Z_NOT_S)
[style] ~99-~99: Would you like to use the Oxford spelling “formalized”? The spelling ‘formalised’ is also correct.
Context: ...raft details in <draft> tags, will be formalised later: ### Approach (to be de...
(OXFORD_SPELLING_Z_NOT_S)
[typographical] ~125-~125: 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: ...Verified: - [ ] Icons render correctly for: nextjs, react, javascript, postgres - [...
(RP_COLON)
[uncategorized] ~125-~125: The official spelling of this programming framework is “Next.js”.
Context: ...ied: - [ ] Icons render correctly for: nextjs, react, javascript, postgres - [ ] Alia...
(NODE_JS)
x_docs/mine/micro-interactions.md
[style] ~3-~3: Would you like to use the Oxford spelling “centralized”? The spelling ‘centralised’ is also correct.
Context: ... guidance for shadcn/ui integration and centralised theming. --- ## The Recommended Stack...
(OXFORD_SPELLING_Z_NOT_S)
[style] ~126-~126: Would you like to use the Oxford spelling “Centralized”? The spelling ‘Centralised’ is also correct.
Context: ...tion's conditional animations. --- ## Centralised Theming in globals.css ### The Questio...
(OXFORD_SPELLING_Z_NOT_S)
[style] ~199-~199: Would you like to use the Oxford spelling “Centralize”? The spelling ‘Centralise’ is also correct.
Context: ...lementing animations | ### What NOT to Centralise Avoid putting these in globals.css: -...
(OXFORD_SPELLING_Z_NOT_S)
[style] ~329-~329: Would you like to use the Oxford spelling “Centralize”? The spelling ‘Centralise’ is also correct.
Context: ... } from "motion/react" ``` ### Step 3: Centralise Your Timing Tokens Add motion tokens t...
(OXFORD_SPELLING_Z_NOT_S)
🔇 Additional comments (19)
components/right-sidebar/question-link.tsx (1)
1-21: LGTM!The component is correctly implemented as a server component with CSS-only hover microinteractions. The use of
group-hoverfor the underline and chevron translate effects provides smooth, performant animations without requiring client-side JavaScript.app/(root)/tags/[slug]/page.tsx (1)
1-8: LGTM!The page correctly implements the Next.js 15 async params pattern by typing
paramsas aPromiseand awaiting it before destructuring. The placeholder implementation aligns with the PR objectives.app/(root)/question/[id]/page.tsx (1)
1-8: LGTM!The page correctly implements the Next.js 15 async params pattern, matching the same structure used in the tags page. The placeholder implementation is consistent and correct.
lib/data/questions.ts (1)
26-33: LGTM!The async function signature is forward-compatible with the planned MongoDB integration mentioned in the TODO comment. While the current implementation is synchronous, maintaining the async signature now prevents breaking changes when the database query is implemented.
components/navigation/mobile-nav.tsx (2)
13-13: Import path is correctly configured.The renamed file
mobile-navlink.tsxexists atcomponents/navigation/, and the import statement using the@/alias is properly established. No further action required.
61-61: CSS variable forbg-sidebaris properly defined.The
--sidebarCSS variable is defined in globals.css in both light mode (oklch(1 0 0)) and dark mode (oklch(0.1783 0.0128 270.6)), and thebg-sidebarutility class is actively used throughout the codebase in multiple navigation and UI components. The change frombg-mobile-navtobg-sidebarconsolidates the styling consistently with the sidebar theming..claude/settings.json (1)
11-11: LGTM!The added Playwright browser actions and Bash command permissions appropriately support the E2E testing and development workflows for the new interactive components introduced in this PR.
Also applies to: 12-12, 16-16, 22-22, 33-33, 37-37, 53-53
app/globals.css (1)
128-130: LGTM!The new
--tag-bgand--tag-textCSS custom properties for tag badges are properly defined in both light and dark themes with appropriate colour values. The parallel structure in:rootand.darkblocks maintains consistency with the existing theming pattern.Based on learnings, the duplicate structure aids readability and future maintenance.
Also applies to: 190-192
components/right-sidebar/tag-link.tsx (3)
1-7: LGTM!The imports follow the @/ alias convention, and the
TagLinkPropstype definition is clear and appropriate for the component's requirements.
9-23: LGTM!The component structure is clean and correctly implemented as a Server Component. The hover microinteractions use CSS-only transforms, and the conditional rendering of
questionCountis appropriate. The absence of a "use client" directive is correct, as per coding guidelines.
15-15: Fix the Tailwind CSS v4 arbitrary value syntax for CSS variables.The Badge className uses incorrect syntax for referencing CSS custom properties. Tailwind CSS v4 requires square brackets for arbitrary values, not parentheses.
🔎 Proposed fix for the CSS variable syntax
- <Badge className="rounded-md border-transparent bg-(--tag-bg) px-4 py-2 uppercase text-(--tag-text)"> + <Badge className="rounded-md border-transparent bg-[--tag-bg] px-4 py-2 uppercase text-[--tag-text]">⛔ Skipped due to learnings
Learnt from: michellepace Repo: michellepace/devflow PR: 18 File: lib/utils.ts:17-19 Timestamp: 2025-12-25T15:46:14.812Z Learning: In Tailwind CSS v4, the shorthand syntax `bg-(image:--gradient-primary)` with parentheses is valid and equivalent to the traditional bracket syntax `bg-[image:var(--gradient-primary)]`. The project michellepace/devflow has standardized on using the v4 shorthand syntax with parentheses for CSS variable references.Learnt from: CR Repo: michellepace/devflow PR: 0 File: CLAUDE.md:0-0 Timestamp: 2025-12-28T22:41:43.683Z Learning: Applies to **/*.css : Tailwind CSS v4: Use import "tailwindcss" syntax instead of tailwind directivesapp/(root)/layout.tsx (1)
2-5: LGTM!The updated import paths reflect the file reorganisation and naming standardisation described in the PR objectives. The changes improve code organisation without affecting runtime behaviour.
components/ui/badge.tsx (2)
1-5: LGTM!The imports are minimal and appropriate. The type-only React import is a good practice, and the @/ alias convention is correctly followed.
28-46: LGTM!The Badge component implementation is clean and follows shadcn/ui patterns. The polymorphic rendering via the
asChildprop is correctly implemented, and the absence of a "use client" directive is appropriate since the component has no client-side interactivity.components/right-sidebar/right-sidebar.tsx (2)
15-19: Well-structured parallel data fetching.The use of
Promise.allfor concurrent fetching is appropriate and efficient. The async server component pattern is correctly applied here, avoiding the need for a"use client"directive.Consider whether error handling is needed if
getTopQuestionsorgetPopularTagscould fail in production (e.g., when backed by MongoDB). Currently, a rejection would cause the entire component to fail silently.
39-46: LGTM!The component mapping is clean, keys are appropriately unique (
_idfor questions,namefor tags), and the props are correctly passed to child components.Also applies to: 56-63
lib/data/tags.ts (1)
1-4: Clean type definition.The
Tagtype is well-defined and appropriately exported for use across the codebase.x_docs/mine/micro-interactions.md (1)
1-14: Comprehensive microinteractions guide.Well-structured documentation covering the two-layer animation approach (Tailwind + Motion). The British English spellings ("centralised", "whilst", "colour") are correct per the coding guidelines—ignore the static analysis suggestions for American spellings.
x_docs/mine/2026-01-01-right-sidebar/handover.md (1)
1-7: Clear handover documentation.Good practice to mark stale documentation explicitly. The British English spellings throughout ("centralised", "normalised", "formalised") are correct per the coding guidelines—the static analysis suggestions for American spellings should be disregarded.
Mock Data: - Change "center" to "centre" in question title Aligns mock data with project's British English requirement per CLAUDE.md. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
There was a problem hiding this comment.
Actionable comments posted: 1
📜 Review details
Configuration used: Organization UI
Review profile: ASSERTIVE
Plan: Pro
📒 Files selected for processing (1)
lib/data/questions.ts
🧰 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:
lib/data/questions.ts
**/*.{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:
lib/data/questions.ts
**/*.{ts,tsx,js,jsx}
📄 CodeRabbit inference engine (CLAUDE.md)
Always use @/ import aliases, even for sibling files (use @/app/fonts instead of ./fonts)
Files:
lib/data/questions.ts
🧠 Learnings (2)
📚 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 **/*.{ts,tsx,js,jsx,md} : Use British English throughout the codebase (comments, strings, documentation)
Applied to files:
lib/data/questions.ts
📚 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/data/questions.ts
🔇 Additional comments (2)
lib/data/questions.ts (2)
1-4: Well-structured type definition.The Question type is appropriately scoped for the right sidebar display, containing only the fields needed to render question links.
26-33: Excellent forward-compatible implementation.The async function signature is correctly designed for future database integration, even though the current mock implementation doesn't require await. The TODO comment clearly documents the migration path, and the default limit parameter provides sensible behaviour.
E2E Tests: - Add right-sidebar.desktop.spec.ts with navigation and responsive scroll tests - Verify question/tag link routing with non-brittle regex URL patterns - Test scrollbar presence at short viewport (650px) and absence at tall (1000px) - Confirm sidebar hidden below xl breakpoint (1279px) Unit Tests: - Add questions.test.ts and tags.test.ts for data functions - Test default limit, custom limit, and returned property structure - Remove demo formatPrice utility and its test Replaces placeholder tests with real coverage for right sidebar feature. Tests document expected behaviour and will remain valid when mock data is replaced with database. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
1 participant
Summary
QuestionLinkandTagLinkcomponents with hover microinteractionslib/data/) with mock data ready for MongoDB integration/question/[id]and/tags/[slug]routesChanges
right-sidebar/,ui/badge.tsxlib/data/questions.ts,lib/data/tags.tsquestion/[id]/page.tsx,tags/[slug]/page.tsxglobals.css(tag theme variables)app/(root)/layout.tsxBranch Summary
Test plan
npm run checkpasses (lint + typecheck)npm run testpasses (Vitest + Playwright)/question/{id}/tags/{slug}🤖 Generated with Claude Code