Homepage Improvements #4123
Homepage Improvements #4123
Conversation
|
Important Review skippedReview was skipped as selected files did not have any reviewable changes. 💤 Files selected but had no reviewable changes (1)
You can disable this status message by setting the
📝 WalkthroughWalkthroughAdds new localization keys across multiple locales and shortens metaculusDescription; reworks homepage to default to "news" with a Tabs-based UI, introduces HomepagePostCard, reorganizes homepage layout/WhyMetaculus, and adds a Changes
Sequence Diagram(s)sequenceDiagram
participant Page as Page (page.tsx)
participant API as ServerPostsApi
participant HF as HomePageForecasts
participant Tabs as Tabs Component
participant HPC as HomepagePostCard
Page->>API: getPostsWithCP(FILTERS.news)
API-->>Page: initialNewsPosts
Page->>HF: render(initialPosts = initialNewsPosts.results)
HF->>Tabs: render(defaultValue="news")
Tabs-->>HF: tabChange(tabId)
HF->>HF: handleTabChange(tabId)
alt cache hit
HF-->>HF: use cached posts[tabId]
else cache miss
HF->>API: getPostsWithCP(FILTERS[tabId])
API-->>HF: posts
HF-->>HF: cache posts under tabId
end
HF->>HPC: render HomepagePostCard for each post
HPC-->>HF: conditional render (question/group/etc.)
Estimated code review effort🎯 4 (Complex) | ⏱️ ~45 minutes Suggested reviewers
Poem
🚥 Pre-merge checks | ✅ 1 | ❌ 1❌ Failed checks (1 inconclusive)
✅ Passed checks (1 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing touches🧪 Generate unit tests (beta)
Important Action Needed: IP Allowlist UpdateIf your organization protects your Git platform with IP whitelisting, please add the new CodeRabbit IP address to your allowlist:
Failure to add the new IP will result in interrupted reviews. 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: 2
🤖 Fix all issues with AI agents
In `@front_end/messages/es.json`:
- Around line 1850-1853: Update the translation value for the key
yearsOfPrediction to match the capitalization and idiomatic phrasing of
neighboring stat labels: change the string to "Años de predicción" (capitalized
first letter and singular "predicción") so it reads consistently with "Preguntas
abiertas" and "Pronósticos enviados" in the es.json file.
In `@front_end/src/app/`(main)/(home)/components/homepage_forecasts.tsx:
- Around line 38-56: handleTabChange can apply stale async responses to the
wrong tab: capture the requested tab id at request start and validate it against
a persisted ref that always reflects the current active tab before mutating
state. Add a useRef (e.g., activeTabRef) updated whenever setActiveTab is called
(or on effect when activeTab changes), then inside the startTransition async
block compare activeTabRef.current === id before calling setCachedPosts and
setPosts (and skip updating if it no longer matches); keep the existing
cachedPosts fast-return logic but ensure the async branch performs this check to
avoid overwriting the active tab's posts with stale responses.
🧹 Nitpick comments (1)
front_end/src/components/ui/tabs/index.tsx (1)
80-101: Contained variant may clip tabs on narrow viewports.Since contained removes horizontal overflow, tabs can become inaccessible when the list is wider than the container. Please verify on small screens; consider adding overflow or wrapping for contained mode.
♻️ Optional: keep contained tabs scrollable
- contained - ? "" // no negative margins, overflow, or background for contained variant + contained + ? "overflow-x-auto" // keep tabs accessible on narrow widths
📜 Review details
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (13)
front_end/messages/cs.jsonfront_end/messages/en.jsonfront_end/messages/es.jsonfront_end/messages/pt.jsonfront_end/messages/zh-TW.jsonfront_end/messages/zh.jsonfront_end/src/app/(main)/(home)/components/homepage_filters.tsfront_end/src/app/(main)/(home)/components/homepage_forecasts.tsxfront_end/src/app/(main)/(home)/components/homepage_post_card.tsxfront_end/src/app/(main)/(home)/components/why_metaculus.tsxfront_end/src/app/(main)/(home)/page.tsxfront_end/src/components/consumer_post_card/basic_consumer_post_card.tsxfront_end/src/components/ui/tabs/index.tsx
🧰 Additional context used
🧬 Code graph analysis (4)
front_end/src/app/(main)/(home)/components/homepage_post_card.tsx (3)
front_end/src/types/post.ts (1)
PostWithForecasts(214-218)front_end/src/utils/navigation.ts (1)
getPostLink(48-74)front_end/src/utils/questions/helpers.ts (3)
isQuestionPost(28-30)isMultipleChoicePost(22-26)isGroupOfQuestionsPost(32-38)
front_end/src/app/(main)/(home)/components/why_metaculus.tsx (2)
front_end/src/app/(main)/(home)/components/featured-in-logos.tsx (6)
NasdaqLogo(40-79)ForbesLogo(139-151)TheAtlanticLogo(81-137)AeiLogo(3-38)TheEconomistLogo(153-180)BloombergLogo(182-230)front_end/src/utils/formatters/number.ts (1)
abbreviatedNumber(48-98)
front_end/src/app/(main)/(home)/components/homepage_forecasts.tsx (3)
front_end/src/types/post.ts (1)
PostWithForecasts(214-218)front_end/src/app/(main)/(home)/components/homepage_filters.ts (3)
TabId(5-5)FILTERS(22-48)TABS(7-11)front_end/src/components/ui/tabs/index.tsx (3)
Tabs(37-78)TabsList(80-107)TabsTab(120-204)
front_end/src/app/(main)/(home)/page.tsx (1)
front_end/src/app/(main)/(home)/components/homepage_filters.ts (1)
FILTERS(22-48)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (5)
- GitHub Check: Build Docker Image
- GitHub Check: Frontend Checks
- GitHub Check: Backend Checks
- GitHub Check: integration-tests
- GitHub Check: Analyze (javascript-typescript)
🔇 Additional comments (17)
front_end/messages/zh-TW.json (1)
1847-1850: LGTM — concise, consistent wording.The updated phrasing is clear and aligns with the simplified homepage copy direction.
front_end/messages/zh.json (1)
1852-1855: LGTM — concise copy update.The simplified description and label read well and match the intended messaging.
front_end/messages/cs.json (1)
1850-1853: LGTM — clean Czech localization update.The shortened description and updated label look good and stay consistent with the cross‑locale wording.
front_end/messages/en.json (1)
7-10: Copy updates look consistent with the new homepage messaging.No issues spotted; the shorter description and lowercase labels align with the refreshed tone.
front_end/messages/pt.json (1)
1848-1851: PT translation adjustments look good.Concise wording aligns with the updated English copy and keeps the same meaning.
front_end/src/components/consumer_post_card/basic_consumer_post_card.tsx (1)
74-79: No behavior change in notebook title styling.Removal of inline comments preserves the same classes; looks good.
front_end/src/app/(main)/(home)/components/why_metaculus.tsx (3)
19-58: Featured‑in logo styling updates look consistent.No issues with the revised sizing/colors.
95-152: Stats layout + abbreviated numbers look good.Compact formatting and the two‑column structure read well.
157-163: Consider allowing label wrapping for international locales.The
text-nowrapclass prevents wrapping and can cause overflow with longer translated text. Allow the label to wrap naturally by usingwhitespace-normalinstead.♻️ Suggested tweak
- <span className="text-nowrap">{label}</span> + <span className="whitespace-normal">{label}</span>front_end/src/app/(main)/(home)/components/homepage_filters.ts (1)
5-10: Tab order update aligns with news‑first navigation.Looks consistent and low risk.
front_end/src/app/(main)/(home)/page.tsx (1)
30-67: News‑first data source wiring looks consistent.Renaming to
initialNewsPostsand passinginitialPostslines up with the new tab order.front_end/src/app/(main)/(home)/components/homepage_post_card.tsx (1)
62-65: Add an accessible label to the full‑card Link overlay.The overlay link is focusable but has no name; screen readers will announce an unlabeled link. Add an
aria-label(e.g., the post title).🐛 Proposed fix
- <Link - href={getPostLink(post)} - className="absolute top-0 z-100 h-full w-full `@container`" - /> + <Link + href={getPostLink(post)} + aria-label={title} + className="absolute top-0 z-100 h-full w-full `@container`" + />front_end/src/app/(main)/(home)/components/homepage_forecasts.tsx (5)
7-15: LGTM on Tabs + HomepagePostCard integration.Imports are consistent with the new tab system and card component usage.
16-31: State and cache initialization look solid.Initializing
newsas the default and preloading the cache withinitialPostsmatches the new data flow.
64-87: Tabs UI wiring looks good.The contained TabsList and styling tweaks align well with the new layout.
89-100: Grid-to-columns rendering is clean and consistent.HomepagePostCard usage and the responsive column layout look well aligned with the new design.
108-118: ExploreAllCard styling update looks good.Spacing and borders align with the new card layout.
✏️ Tip: You can disable this entire section by setting review_details to false in your review settings.
🧹 Preview Environment Cleaned UpThe preview environment for this PR has been destroyed.
Cleanup triggered by PR close at 2026-02-03T11:01:21Z |
There was a problem hiding this comment.
Actionable comments posted: 5
🤖 Fix all issues with AI agents
In `@front_end/messages/cs.json`:
- Around line 1861-1869: The "feed" string is left in English; update the value
for the "feed" key in front_end/messages/cs.json to a Czech equivalent (e.g.,
"Kanál" or the same term used by "feedHome") to keep UI language
consistent—locate the "feed" key in the JSON alongside "questionFeed" and
"feedHome" and replace the English token with the chosen Czech translation.
In `@front_end/messages/pt.json`:
- Around line 1854-1862: The "feed" key currently uses the English term and the
topic list in "followImportantTopicsDescription" uses inconsistent
capitalization; update the "feed" value to a Portuguese localization consistent
with "questionFeed" (e.g., make "feed" match "Feed de Perguntas" or another
agreed PT‑BR string) and normalize the topic list in
"followImportantTopicsDescription" to sentence case (change "Geopolítica" and
"Biossegurança" to "geopolítica" and "biossegurança") so casing and language are
consistent across keys.
In `@front_end/messages/zh.json`:
- Around line 1868-1871: The translation for the key "yearsOfPrediction" is
awkward; update its value from "年预测历史" to a more natural phrasing such as "预测年数"
(or "预测年限") in the JSON so the label reads fluently in Chinese; locate the
"yearsOfPrediction" entry in front_end/messages/zh.json and replace the current
value with the chosen alternative.
- Around line 1858-1866: The translation for the "questionFeed" key is
inconsistent with the existing phrasing ("查看问题流"); update the value for the
"questionFeed" JSON key from "问题动态" to "问题流" so terminology is harmonized across
the UI (locate the "questionFeed" entry in the JSON alongside "feed",
"followImportantTopics", etc., and replace its string value).
In `@front_end/src/app/`(main)/(home)/components/homepage_post_card.tsx:
- Around line 52-60: The homepage_post_card currently renders forecast tiles
only for QuestionPost (non-MC), GroupOfQuestionsPost, and MultipleChoicePost,
leaving ConditionalPost and NotebookPost unhandled; update the component to
either (A) import and use the provided type guards isConditionalPost and
isNotebookPost and add conditional branches inside the HideCPProvider to render
appropriate visualizations for ConditionalPost and NotebookPost (or reuse an
existing component like GroupForecastCard/ConsumerQuestionTile if applicable),
or (B) filter out ConditionalPost and NotebookPost upstream so they never reach
this component; use the existing symbols (HideCPProvider, isQuestionPost,
isMultipleChoicePost, isGroupOfQuestionsPost, ConsumerQuestionTile,
GroupForecastCard, PostWithForecasts, isConditionalPost, isNotebookPost) to
locate where to add the logic.
🧹 Nitpick comments (2)
front_end/src/components/ui/tabs/index.tsx (1)
94-100: Consider simplifying the conditional class logic.Both branches of the ternary at lines 98-100 result in
"gap-2". The only difference is thesticky top-12whenvariant === "separated" && !contained. This could be slightly cleaner:♻️ Suggested simplification
className={cn( "scrollbar-none z-10 flex", contained ? "" // no negative margins, overflow, or background for contained variant : "-mx-3 overflow-x-auto bg-blue-200 px-3 py-3 dark:bg-blue-200-dark sm:-mx-4 sm:px-4", - ctx.variant === "separated" && !contained - ? "sticky top-12 gap-2" - : "gap-2", + "gap-2", + ctx.variant === "separated" && !contained && "sticky top-12", className )}front_end/src/app/(main)/(home)/components/hero_ctas.tsx (1)
123-148: Consider extracting the repeated grid item structure.The grid items in both cards follow an identical pattern (title + description). A small helper component could reduce duplication:
♻️ Optional extraction
const FeatureItem: FC<{ title: string; description: string; variant: HeroCTACardVariant }> = ({ title, description, variant }) => { const { text, textLight } = variantStyles[variant]; return ( <div className="flex flex-col gap-1"> <p className={cn("m-0 text-xs font-bold leading-4 md:text-sm", text)}>{title}</p> <p className={cn("m-0 text-xs font-medium leading-4", textLight)}>{description}</p> </div> ); };This could then be reused across both cards, reducing the ~60 lines of repeated markup.
📜 Review details
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
front_end/package-lock.jsonis excluded by!**/package-lock.json
📒 Files selected for processing (15)
front_end/messages/cs.jsonfront_end/messages/en.jsonfront_end/messages/es.jsonfront_end/messages/pt.jsonfront_end/messages/zh-TW.jsonfront_end/messages/zh.jsonfront_end/src/app/(main)/(home)/components/hero_ctas.tsxfront_end/src/app/(main)/(home)/components/homepage_filters.tsfront_end/src/app/(main)/(home)/components/homepage_forecasts.tsxfront_end/src/app/(main)/(home)/components/homepage_post_card.tsxfront_end/src/app/(main)/(home)/components/staff_picks.tsxfront_end/src/app/(main)/(home)/components/why_metaculus.tsxfront_end/src/app/(main)/(home)/page.tsxfront_end/src/components/consumer_post_card/basic_consumer_post_card.tsxfront_end/src/components/ui/tabs/index.tsx
🧰 Additional context used
🧬 Code graph analysis (3)
front_end/src/app/(main)/(home)/components/homepage_post_card.tsx (3)
front_end/src/types/post.ts (1)
PostWithForecasts(214-218)front_end/src/utils/navigation.ts (1)
getPostLink(48-74)front_end/src/utils/questions/helpers.ts (3)
isQuestionPost(28-30)isMultipleChoicePost(22-26)isGroupOfQuestionsPost(32-38)
front_end/src/app/(main)/(home)/page.tsx (1)
front_end/src/app/(main)/(home)/components/homepage_filters.ts (1)
FILTERS(22-48)
front_end/src/app/(main)/(home)/components/homepage_forecasts.tsx (2)
front_end/src/types/post.ts (1)
PostWithForecasts(214-218)front_end/src/app/(main)/(home)/components/homepage_filters.ts (3)
TabId(5-5)FILTERS(22-48)TABS(7-11)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (2)
- GitHub Check: Backend Checks
- GitHub Check: Frontend Checks
🔇 Additional comments (23)
front_end/src/components/consumer_post_card/basic_consumer_post_card.tsx (1)
77-78: LGTM!The cleanup of inline comments from the className strings improves readability without changing any styling behavior.
front_end/src/app/(main)/(home)/components/homepage_filters.ts (2)
5-11: LGTM!The reordering of
TabIdandTABSto prioritize "news" first is consistent and aligns with the PR's objective to prioritize news tabs on the homepage.
28-44: Limit increased from 7 to 12 items per tab.This increases the initial data fetch by ~71%. Ensure this aligns with performance expectations and that pagination or lazy loading handles additional items gracefully if users scroll.
front_end/src/components/ui/tabs/index.tsx (1)
83-87: LGTM!The new
containedprop is well-designed with a sensible default that maintains backward compatibility.front_end/src/app/(main)/(home)/components/why_metaculus.tsx (3)
62-69: LGTM!The typo fix ("silenty" → "silently") and the silent fail pattern are appropriate for non-critical stats data.
117-130: LGTM!Good use of
abbreviatedNumberfor formatting large stats values. The+suffix appropriately indicates "more than" semantics.
133-151: LGTM!The "Featured In" grid layout is well-structured with good responsive breakpoints and proper accessibility attributes (
aria-label,rel="noopener noreferrer").front_end/src/app/(main)/(home)/components/homepage_post_card.tsx (1)
62-65: Verify the overlay Link interaction with nested interactive elements.The full-area
Linkoverlay at z-100 should work correctly sinceCommentStatushasz-[101]. Ensure that any other interactive elements (if added later) within the card maintain proper z-index stacking to remain clickable.front_end/src/app/(main)/(home)/components/hero_ctas.tsx (2)
54-89: LGTM!Wrapping the entire card in a
Linkimproves UX by making the whole card clickable. The arrow icon provides a clear visual affordance. The transition-colors class ensures smooth hover feedback.
93-101: LGTM!The prop rename from
individualsHref/businessesHreftoplatformHref/servicesHrefbetter reflects the actual navigation targets. Sensible defaults are provided.front_end/src/app/(main)/(home)/components/staff_picks.tsx (1)
20-20: LGTM!The responsive margin adjustment (
mb-4 md:mb-6) appropriately reduces vertical spacing on mobile while preserving the original margin on medium screens and above.front_end/src/app/(main)/(home)/page.tsx (2)
30-36: LGTM!The data source switch from
FILTERS.populartoFILTERS.newsaligns with the PR objective to prioritize news content. The prop is correctly passed asinitialPoststo match the updatedHomePageForecastscomponent signature.
57-64: LGTM!The gradient wrapper (
bg-gradient-to-b from-gray-0 to-blue-200/50) provides a nice visual transition for the forecasts section with appropriate dark mode support.front_end/src/app/(main)/(home)/components/homepage_forecasts.tsx (2)
66-102: LGTM!Good use of the controlled Tabs pattern with
valueandonChange. Thecontainedprop correctly removes the default background styling, and thedynamicClassNamecallback appropriately adds hover effects only for inactive tabs.
104-113: LGTM!The CSS columns-based layout (
columns-1 md:columns-2 lg:columns-3 xl:columns-4) provides clean responsive behavior for the post cards with appropriate masonry-style distribution.front_end/messages/es.json (2)
1856-1864: LGTM!The new translation keys are well-translated and grammatically correct. The Spanish translations maintain consistency with the existing localization style and are idiomatic.
1866-1866: LGTM!The updated
metaculusDescriptionis concise and accurately describes the platform's focus on globally significant topics.front_end/messages/zh-TW.json (2)
1850-1858: LGTM!The new Traditional Chinese translations are well-localized and appropriate for the target audience. The translations maintain natural phrasing while accurately conveying the original meaning.
1860-1863: LGTM!The updated
metaculusDescriptionis concise and accurately describes the platform. TheyearsOfPredictiontranslation ("年預測歷史") is idiomatic for Traditional Chinese and appropriately conveys the meaning of the metric.front_end/messages/cs.json (1)
1871-1874: Updated homepage strings look consistent.The refreshed description and “yearsOfPrediction” label read cleanly and match the concise homepage copy.
front_end/messages/pt.json (1)
1864-1867: Homepage copy updates read well.The revised description and “yearsOfPrediction” label are concise and consistent with the new messaging.
front_end/messages/en.json (2)
7-10: Copy updates look good.
22-30: New homepage bullet strings read well.
✏️ Tip: You can disable this entire section by setting review_details to false in your review settings.
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Fix all issues with AI agents
In `@front_end/src/app/`(main)/(home)/components/why_metaculus.tsx:
- Around line 102-115: The paragraph contains hardcoded English fragments;
replace them with a translation key (e.g. "metaculusDescription") and call the
i18n hook t() to render the full sentence so localization works; add the
"metaculusDescription" entry in all locale JSON files with markup placeholders
for the branded and highlighted parts, and render it via
t('metaculusDescription', { /* provide component placeholders that map to the
existing span elements and CSS classes used in the JSX */ }) so the existing
span classes (the brand span and highlight spans) are preserved while removing
the hardcoded strings.
🧹 Nitpick comments (1)
front_end/src/app/(main)/(home)/components/why_metaculus.tsx (1)
138-138: Consider simplifying responsive classes.The breakpoint logic cycles through
grid → flex → grid → flexacross screen sizes:
- Default:
grid-cols-3min-[400px]:flexmd:grid-cols-3lg:flexThis pattern may cause unexpected layout shifts. Verify this matches the intended design.
📜 Review details
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
front_end/package-lock.jsonis excluded by!**/package-lock.json
📒 Files selected for processing (13)
front_end/messages/cs.jsonfront_end/messages/en.jsonfront_end/messages/es.jsonfront_end/messages/pt.jsonfront_end/messages/zh-TW.jsonfront_end/messages/zh.jsonfront_end/src/app/(main)/(home)/components/hero_ctas.tsxfront_end/src/app/(main)/(home)/components/homepage_filters.tsfront_end/src/app/(main)/(home)/components/homepage_forecasts.tsxfront_end/src/app/(main)/(home)/components/homepage_post_card.tsxfront_end/src/app/(main)/(home)/components/staff_picks.tsxfront_end/src/app/(main)/(home)/components/why_metaculus.tsxfront_end/src/app/(main)/(home)/page.tsx
🚧 Files skipped from review as they are similar to previous changes (4)
- front_end/messages/pt.json
- front_end/src/app/(main)/(home)/components/homepage_post_card.tsx
- front_end/src/app/(main)/(home)/components/homepage_filters.ts
- front_end/messages/cs.json
🧰 Additional context used
🧬 Code graph analysis (2)
front_end/src/app/(main)/(home)/page.tsx (1)
front_end/src/app/(main)/(home)/components/homepage_filters.ts (1)
FILTERS(22-48)
front_end/src/app/(main)/(home)/components/homepage_forecasts.tsx (2)
front_end/src/types/post.ts (1)
PostWithForecasts(214-218)front_end/src/app/(main)/(home)/components/homepage_filters.ts (3)
TabId(5-5)FILTERS(22-48)TABS(7-11)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (2)
- GitHub Check: Build Docker Image / Build Docker Image
- GitHub Check: integration-tests
🔇 Additional comments (18)
front_end/src/app/(main)/(home)/components/staff_picks.tsx (1)
20-20: Spacing tweak looks good.Responsive margin adjustment is clear and maintains layout consistency across breakpoints.
front_end/messages/en.json (2)
7-10: LGTM - Updated translation strings.The updates to
metaculusDescription(shortened and refocused) andyearsOfPrediction(lowercase with plural form) are consistent style refinements.
22-30: LGTM - New homepage translation keys.The new localization keys for the homepage improvements are well-structured and follow the existing naming conventions. The descriptions are clear and user-friendly.
front_end/messages/zh-TW.json (1)
1850-1863: LGTM - Traditional Chinese translations for homepage improvements.The new translation keys align with the English locale additions. The Chinese translations are appropriate and natural-sounding:
- Key naming consistency maintained across locales
- Translations convey the intended meaning effectively
front_end/messages/es.json (1)
1856-1866: LGTM for the new homepage strings and the updated description.
The new keys read well and the shortened description is clear.front_end/messages/zh.json (1)
1868-1868: LGTM for the updated Metaculus description.front_end/src/app/(main)/(home)/components/why_metaculus.tsx (4)
8-8: LGTM!Good addition of
abbreviatedNumberutility for consistent number formatting across the stats display.
62-69: LGTM!Typo fix and appropriate silent-fail behavior with fallback values in state.
157-164: LGTM!Clean, focused presentational component with proper dark mode support.
51-51: Remove: TheEconomistLogo does not usecurrentColor.TheEconomistLogo uses hardcoded fill colors in its SVG paths (e.g.,
fill="#E3120B"for the red background), notcurrentColor. The omission of text color classes is intentional and correct—adding them would have no effect on this logo's appearance.Likely an incorrect or invalid review comment.
front_end/src/app/(main)/(home)/components/homepage_forecasts.tsx (3)
18-38: News-first initialization and cache seeding look consistent.
State and cache bootstrap align with the new default tab and keep the initial render fast.
66-102: Tabs header integration is clean and cohesive.
Contained tabs plus the question-feed link fit well with the new layout.
106-112: HomepagePostCard swap and layout spacing look good.
The card replacement and spacing read cleanly across breakpoints.front_end/src/app/(main)/(home)/components/hero_ctas.tsx (3)
15-31: Variant style extension reads well.
The additional textLight/hover tokens make the theme intent clearer.
33-90: HeroCTACard refactor is clean and cohesive.
The Link-wrapped card structure and new subtitle layout are consistent.
93-185: Prop rename and richer CTA content look good.
The new platform/services props and grid content align with the updated UX.front_end/src/app/(main)/(home)/page.tsx (2)
30-36: News-first initial fetch wiring is consistent.
Fetching viaFILTERS.newsand passing intoHomePageForecastsmatches the new default tab.
46-69: Layout and gradient section updates look consistent.
The wrapper and spacing changes align with the refreshed homepage structure.
✏️ Tip: You can disable this entire section by setting review_details to false in your review settings.
There was a problem hiding this comment.
Actionable comments posted: 0
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
front_end/src/app/(main)/(home)/components/all_categories_section.tsx (1)
63-79:⚠️ Potential issue | 🟡 MinorFix Tailwind variant ordering from
hover:dark:todark:hover:.The correct variant stacking order in Tailwind is responsive → dark → state. Use
dark:hover:instead ofhover:dark:on both lines to ensure proper CSS generation.🔧 Proposed change
- <span className="text-base font-bold leading-5 text-blue-800 no-underline underline-offset-2 hover:underline hover:decoration-blue-400/80 dark:text-blue-800-dark hover:dark:decoration-blue-400-dark/80"> + <span className="text-base font-bold leading-5 text-blue-800 no-underline underline-offset-2 hover:underline hover:decoration-blue-400/80 dark:text-blue-800-dark dark:hover:decoration-blue-400-dark/80"> ... - className="no-underline underline-offset-2 hover:underline hover:decoration-blue-400/80 hover:dark:decoration-blue-400-dark/80" + className="no-underline underline-offset-2 hover:underline hover:decoration-blue-400/80 dark:hover:decoration-blue-400-dark/80"
📜 Review details
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (8)
front_end/messages/en.jsonfront_end/messages/es.jsonfront_end/messages/zh-TW.jsonfront_end/messages/zh.jsonfront_end/src/app/(main)/(home)/components/all_categories_section.tsxfront_end/src/app/(main)/(home)/components/hero_ctas.tsxfront_end/src/app/(main)/(home)/components/homepage_forecasts.tsxfront_end/src/app/(main)/(home)/components/staff_picks.tsx
🚧 Files skipped from review as they are similar to previous changes (2)
- front_end/src/app/(main)/(home)/components/staff_picks.tsx
- front_end/messages/zh-TW.json
🧰 Additional context used
🧬 Code graph analysis (1)
front_end/src/app/(main)/(home)/components/homepage_forecasts.tsx (4)
front_end/src/types/post.ts (1)
PostWithForecasts(214-218)front_end/src/utils/questions/helpers.ts (2)
isConditionalPost(40-46)isNotebookPost(48-50)front_end/src/app/(main)/(home)/components/homepage_filters.ts (3)
TabId(5-5)FILTERS(22-48)TABS(7-11)front_end/src/components/ui/tabs/index.tsx (3)
Tabs(37-78)TabsList(80-107)TabsTab(120-204)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (4)
- GitHub Check: Build Docker Image / Build Docker Image
- GitHub Check: Frontend Checks
- GitHub Check: Backend Checks
- GitHub Check: integration-tests
🔇 Additional comments (14)
front_end/src/app/(main)/(home)/components/all_categories_section.tsx (1)
84-84: Divider styling looks good.front_end/messages/en.json (2)
7-10: Copy updates look consistent and intentional.
22-30: New homepage strings are clean and consistent with existing style.front_end/messages/es.json (2)
1856-1864: Spanish translations for new keys look good.
1866-1866: Updated description is clear and aligned with the new English copy.front_end/messages/zh.json (1)
1868-1868: Shortened Metaculus description reads well.front_end/src/app/(main)/(home)/components/homepage_forecasts.tsx (5)
27-41: Filtering + initial cache seeding look solid.
Centralizing the filter and priming the “news” cache prevents unsupported post types from rendering on first load.
52-77: Tab switch handling is robust against stale updates.
The active-tab check plus per-tab caching keeps async responses from clobbering the current view.
80-88: Mobile “load more” flow is clear.
Incremental reveal on small screens plus the conditional button feels straightforward.Also applies to: 141-147
92-127: Tabs header layout and responsive feed label look good.
130-138: HomepagePostCard integration looks good.front_end/src/app/(main)/(home)/components/hero_ctas.tsx (3)
15-30: Variant style split is tidy and reusable.
Separating base, light, and hover colors keeps the CTA styles easy to tune.
40-89: CTA card structure reads cleanly.
The top-title + subtitle hierarchy with a trailing icon feels balanced and scan-friendly.
99-185: Updated CTA content grids are well-structured.
The three-column summaries make the value props easy to parse at a glance.
✏️ Tip: You can disable this entire section by setting review_details to false in your review settings.
elisescu
left a comment
elisescu
left a comment
There was a problem hiding this comment.
LGTM. Had one inline comment, pls remove the ExploreImagesGrid file too
| </div> | ||
|
|
||
| <div className="relative mt-10 hidden flex-1 overflow-hidden md:block"> | ||
| <ExploreImagesGrid className="absolute bottom-0 left-0 h-full w-auto" /> |
There was a problem hiding this comment.
@aseckin can you remove the file with the ExploreImagesGrid component too?
Summary by CodeRabbit
New Features
Style
✏️ Tip: You can customize this high-level summary in your review settings.