Sidebar reflow#4660
Merged
ncarazon merged 8 commits intofeat/question-page-redesign-1st-iterationfrom May 1, 2026
Merged
Conversation
Contributor
📝 WalkthroughWalkthroughThe PR introduces variant-based conditional rendering throughout the sidebar and related components, allowing forecaster and consumer UI variants to be displayed based on user type. The backend is updated to conditionally include user forecasts in post serialization based on a new flag. Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~30 minutes Possibly related PRs
Suggested reviewers
Poem
🚥 Pre-merge checks | ✅ 3 | ❌ 1❌ Failed checks (1 inconclusive)
✅ Passed checks (3 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
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. Review rate limit: 0/1 reviews remaining, refill in 60 minutes.Comment |
Contributor
Cleanup: Preview Environment RemovedThe preview environment for this PR has been destroyed.
Cleanup triggered by PR close at 2026-05-01T09:46:42Z |
…r and consumer views
…lar questions consumer sidebar
…user vote state is returned correctly
…r questions sidebar and remove hideResolutionIcon prop
ncarazon
force-pushed
the
feat/sidebar-reflow
branch
from
160e699 to
643caef
Compare
ncarazon
commented
Apr 28, 2026
| { | ||
| next: { revalidate: 3600 }, | ||
| } | ||
| `/posts/${postId}/similar-posts/` |
Contributor
Author
There was a problem hiding this comment.
To BE engineer that reviews it. Similar questions will now have post voter element in forecaster mode. I this FE tweak to allow getting the updated votes on page reload, but BE logic still needs adjustment, since right now it won't return "voted" state to render highlights on FE. Potential reason for that is described in PR description. I would appreciate a proper fix (either to this PR or as a separate branch).
Contributor
Contributor
|
A quick question: should we adjust comments section width as well? |
Contributor
Author
Yeah, but not in this PR. I'm gonna put 2 more PRs on the first iteration for this feature, which will wrap up the desktop UI and mobile UI using all building blocks that were implemented in previous PRs. Thanks for notice though. |
Contributor
|
@coderabbitai review |
Contributor
✅ Actions performedReview triggered.
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
🧹 Nitpick comments (1)
front_end/src/app/(main)/questions/[id]/components/sidebar/similar_questions/similar_question_card.tsx (1)
23-136: Defer resolution extraction to the forecaster branch.
extractPostResolution(post)is only used in the footer that renders forvariant === "forecaster", so the consumer path is doing extra work for no visible benefit.♻️ Suggested tweak
- const resolutionData = extractPostResolution(post); - return ( @@ {isForecaster && ( <div className="flex items-center gap-1.5"> <PostVoter post={post} compact className="h-6" /> @@ <PostStatusIcon status={post.status} published_at={post.published_at} open_time={post.open_time} scheduled_close_time={post.scheduled_close_time} - resolution={resolutionData} + resolution={extractPostResolution(post)} />🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@front_end/src/app/`(main)/questions/[id]/components/sidebar/similar_questions/similar_question_card.tsx around lines 23 - 136, The call to extractPostResolution(post) is done unconditionally in SimilarQuestionCard even though resolutionData is only passed into PostStatusIcon when variant === "forecaster"; move the extraction into the forecaster branch so you only compute resolutionData when needed: remove the top-level const resolutionData = extractPostResolution(post) and instead call extractPostResolution(post) (assigning to resolutionData) inside the isForecaster conditional before rendering PostStatusIcon (used in the footer), ensuring you pass that local resolutionData into PostStatusIcon.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Nitpick comments:
In
`@front_end/src/app/`(main)/questions/[id]/components/sidebar/similar_questions/similar_question_card.tsx:
- Around line 23-136: The call to extractPostResolution(post) is done
unconditionally in SimilarQuestionCard even though resolutionData is only passed
into PostStatusIcon when variant === "forecaster"; move the extraction into the
forecaster branch so you only compute resolutionData when needed: remove the
top-level const resolutionData = extractPostResolution(post) and instead call
extractPostResolution(post) (assigning to resolutionData) inside the
isForecaster conditional before rendering PostStatusIcon (used in the footer),
ensuring you pass that local resolutionData into PostStatusIcon.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
Run ID: 2853671c-5b44-42a3-be3e-877fa1988759
📒 Files selected for processing (15)
front_end/src/app/(main)/questions/[id]/[[...slug]]/page_component.tsxfront_end/src/app/(main)/questions/[id]/components/question_layout/question_info.tsxfront_end/src/app/(main)/questions/[id]/components/sidebar/index.tsxfront_end/src/app/(main)/questions/[id]/components/sidebar/sidebar_container.tsxfront_end/src/app/(main)/questions/[id]/components/sidebar/similar_questions/index.tsxfront_end/src/app/(main)/questions/[id]/components/sidebar/similar_questions/similar_question_card.tsxfront_end/src/app/(main)/questions/[id]/components/sidebar/similar_questions/similar_question_prediction_chip.tsxfront_end/src/app/(main)/questions/[id]/components/sidebar/similar_questions/similar_questions_drawer.tsxfront_end/src/app/(main)/questions/[id]/components/sidebar/similar_questions/similar_questions_list.tsxfront_end/src/components/consumer_post_card/group_forecast_card/index.tsxfront_end/src/components/post_card/basic_post_card/post_voter.tsxfront_end/src/components/post_card/question_tile/question_continuous_tile.tsxfront_end/src/services/api/posts/posts.shared.tsposts/serializers.pyposts/views.py
💤 Files with no reviewable changes (1)
- front_end/src/app/(main)/questions/[id]/components/sidebar/similar_questions/similar_questions_drawer.tsx
cemreinanc
approved these changes
May 1, 2026
ncarazon
merged commit f118806
into
feat/question-page-redesign-1st-iteration
13 checks passed
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
3 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Related to #4640
This PR delivers the question page sidebar reflow and redesigns of the Similar Questions section.
Sidebar reflow (forecaster vs consumer):
SidebarQuestionInfo+SimilarQuestionsSimilarQuestionsonlyPostSubscribeButton,SharePostMenu,QuestionEmbedButton,PostDropdownMenu,SidebarQuestionProjectsSimilar Questions redesign:
QuestionTileandGroupOfQuestionsTileGroupForecastCard(the same charts from consumer post cards). FanGraph groups render TimeSeriesChart, numeric groups render NumericForecastCard, date groups render NumericForecastCard compact (horizontal bars)Consumer
consumer.mp4
Forecaster
forecaster.mp4
Summary by CodeRabbit
New Features
Style