Integrate the shell for desktop#4676
Merged
ncarazon merged 9 commits intofeat/question-page-redesign-1st-iterationfrom May 1, 2026
Merged
Conversation
Contributor
|
Important Review skippedAuto reviews are disabled on base/target branches other than the default branch. Please check the settings in the CodeRabbit UI or the ⚙️ Run configurationConfiguration used: Path: .coderabbit.yaml Review profile: CHILL Plan: Pro Run ID: You can disable this status message by setting the Use the checkbox below for a quick retry:
✨ Finishing Touches🧪 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. Comment |
Contributor
Cleanup: Preview Environment RemovedThe preview environment for this PR has been destroyed.
Cleanup triggered by PR close at 2026-05-01T10:41:01Z |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
Actionable comments posted: 7
🧹 Nitpick comments (1)
front_end/src/stories/question_page/binary_group/fan_chart.stories.tsx (1)
46-46: ⚡ Quick winAlign Storybook container width with the new shell width.
Line 46 still constrains the story to
703px, which no longer matches the desktop shell width update (59rem) described in this PR. Keeping this in sync avoids misleading Storybook visual baselines.Suggested change
- <div style={{ margin: "0 auto", maxWidth: "703px" }}> + <div style={{ margin: "0 auto", maxWidth: "59rem" }}>🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@front_end/src/stories/question_page/binary_group/fan_chart.stories.tsx` at line 46, Storybook wrapper div hard-codes maxWidth: "703px", which no longer matches the updated desktop shell width (59rem); update the inline style on the div (the JSX element with style {{ margin: "0 auto", maxWidth: "703px" }}) to use maxWidth: "59rem" (or a matching pixel value) so the story container matches the new shell width.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In
`@front_end/src/app/`(main)/questions/[id]/components/question_page_shell/index.tsx:
- Around line 58-64: The effect that shows the translated banner (useEffect
referencing postData.is_current_content_translated, setTimeout and
setBannerIsVisible) can leave a pending timeout or stale visible state across
navigation; update the effect to always reset the banner on dependency changes
by calling setBannerIsVisible(false) immediately, then if
postData.is_current_content_translated schedule a timeout to
setBannerIsVisible(true), store the timer id and clear it in the effect cleanup
(clearTimeout(timerId)) so no stale timer can show the banner on the next page.
- Around line 121-123: Consumer variant is not receiving the mobileSidebar prop
causing the sidebar to be dropped; thread the mobileSidebar prop from where
QuestionVariantComposer chooses the Consumer variant down into ConsumerShell and
then pass it into QuestionPageShell so it gets forwarded to ForecasterShell
(mirror how ForecasterShell receives mobileSidebar). Update the ConsumerShell
component signature (ConsumerShell: FC<{ postData: PostWithForecasts;
mobileSidebar?: ReactNode }>) and ensure the call sites in
QuestionVariantComposer (where the consumer branch is returned) pass the
mobileSidebar prop through to ConsumerShell and from ConsumerShell into
QuestionPageShell (same prop name mobileSidebar) so the sidebar is rendered for
consumer variant too.
In
`@front_end/src/app/`(main)/questions/[id]/components/question_page_shell/tab_bar.tsx:
- Line 17: The hash-based tab restoration is still checking for the old "scores"
key so links to the new TabKey "my-scores" fall back to "comments"; update the
whitelist/allowed-keys logic in question_layout_context (the code that validates
persisted hash/tab keys) to include "my-scores" (and replace any checks that
specifically look for "scores" to accept "my-scores"), and apply the same change
to the other related checks referenced (the occurrences around the 69-71 area)
so hash-based activation correctly restores the My Scores tab instead of falling
back.
In `@front_end/src/components/comment_feed/comment.tsx`:
- Line 1081: The menu button's aria-label is hardcoded as "menu"; update the JSX
in the Comment component to call useTranslations() (or reuse an existing t
variable from useTranslations()) and replace aria-label="menu" with
aria-label={t('commentFeed.menuLabel')} (or another descriptive i18n key), add
the new i18n key to the translations files, and ensure the t variable is
imported/available where the menu button is rendered.
In `@front_end/src/components/comment_feed/index.tsx`:
- Around line 432-434: The hardcoded fallback string "sort" should be replaced
with a localized translation key; update the component to import/use
useTranslations (e.g., call const t = useTranslations(...) in this component)
and replace the fallback with t('sort') or a namespaced key like
t('commentFeed.sort') so the expression becomes menuItems.find((item) => item.id
=== feedFilters.sort)?.name ?? t('commentFeed.sort'); ensure the chosen
translation key is added to the i18n resource files and that useTranslations is
imported where menuItems and feedFilters.sort are used.
In
`@front_end/src/stories/question_page/continuous_question/continuous_question.stories.tsx`:
- Around line 45-50: The story wrapper is still fixed to the legacy 703px max
width (the inline style on the div wrapping
MockCommentsFeedProvider/QuestionLayoutProvider/Story), preventing the migrated
story from rendering the new desktop shell; update that inline style to use the
new widened shell width (replace "703px" with the project's desktop shell max
width constant or CSS variable, or the new pixel value used across the app) so
the component tree (MockCommentsFeedProvider, QuestionLayoutProvider, Story)
renders at the correct width in Storybook.
In `@front_end/src/stories/question_page/date_question/date_question.stories.tsx`:
- Around line 45-50: The story wrapper currently constrains the preview with an
inline style maxWidth: "703px" so the story never exercises the new desktop
layout; remove or update that constraint around the Story (the div wrapping
MockCommentsFeedProvider / QuestionLayoutProvider / Story) so it no longer
clamps to 703px—either remove the inline style entirely or replace it with a
width class/config that allows the new w-[59rem] desktop layout to be rendered
and tested (target the div containing QuestionLayoutProvider and Story).
---
Nitpick comments:
In `@front_end/src/stories/question_page/binary_group/fan_chart.stories.tsx`:
- Line 46: Storybook wrapper div hard-codes maxWidth: "703px", which no longer
matches the updated desktop shell width (59rem); update the inline style on the
div (the JSX element with style {{ margin: "0 auto", maxWidth: "703px" }}) to
use maxWidth: "59rem" (or a matching pixel value) so the story container matches
the new shell width.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
Run ID: c096fbcb-cdaf-4150-bf17-6bcdc65b13b2
📒 Files selected for processing (41)
front_end/src/app/(main)/components/comments_feed_provider.tsxfront_end/src/app/(main)/questions/[id]/[[...slug]]/page_component.tsxfront_end/src/app/(main)/questions/[id]/components/key_factors/item_view/more_panel.tsxfront_end/src/app/(main)/questions/[id]/components/key_factors/key_factor_detail_overlay.tsxfront_end/src/app/(main)/questions/[id]/components/post_score_data/single_question_score_data.tsxfront_end/src/app/(main)/questions/[id]/components/post_score_data/utils.tsfront_end/src/app/(main)/questions/[id]/components/question_layout/consumer_question_layout/consumer_tabs.tsxfront_end/src/app/(main)/questions/[id]/components/question_layout/consumer_question_layout/index.tsxfront_end/src/app/(main)/questions/[id]/components/question_layout/forecaster_question_layout/index.tsxfront_end/src/app/(main)/questions/[id]/components/question_layout/index.tsxfront_end/src/app/(main)/questions/[id]/components/question_layout/question_info.tsxfront_end/src/app/(main)/questions/[id]/components/question_layout/question_layout_context.tsxfront_end/src/app/(main)/questions/[id]/components/question_layout/question_section.tsxfront_end/src/app/(main)/questions/[id]/components/question_page_shell/index.tsxfront_end/src/app/(main)/questions/[id]/components/question_page_shell/tab_bar.tsxfront_end/src/app/(main)/questions/[id]/components/question_page_shell/tabs.tsxfront_end/src/app/(main)/questions/[id]/components/question_page_shell/tabs/comments.tsxfront_end/src/app/(main)/questions/[id]/components/question_page_shell/tabs/my_scores.tsxfront_end/src/app/(main)/questions/[id]/components/question_view/consumer_question_view/index.tsxfront_end/src/app/(main)/questions/[id]/components/question_view/consumer_question_view/timeline/index.tsxfront_end/src/app/(main)/questions/[id]/components/question_view/forecaster_question_view/index.tsxfront_end/src/app/(main)/questions/[id]/components/question_view/forecaster_question_view/question_header/index.tsxfront_end/src/app/(main)/questions/[id]/components/question_view/index.tsxfront_end/src/components/comment_feed/comment.tsxfront_end/src/components/comment_feed/comment_card.tsxfront_end/src/components/comment_feed/comment_date.tsxfront_end/src/components/comment_feed/comment_voter.tsxfront_end/src/components/comment_feed/comment_wrapper.tsxfront_end/src/components/comment_feed/index.tsxfront_end/src/components/detailed_question_card/detailed_question_card/index.tsxfront_end/src/components/voter.tsxfront_end/src/stories/question_page/binary_group/binary_group_timeline.stories.tsxfront_end/src/stories/question_page/binary_group/fan_chart.stories.tsxfront_end/src/stories/question_page/binary_question/binary_question.stories.tsxfront_end/src/stories/question_page/continuous_question/continuous_question.stories.tsxfront_end/src/stories/question_page/date_group/date_group_timeline.stories.tsxfront_end/src/stories/question_page/date_group/fan_chart.stories.tsxfront_end/src/stories/question_page/date_question/date_question.stories.tsxfront_end/src/stories/question_page/mc_question/mc_question.stories.tsxfront_end/src/stories/question_page/numeric_group/numeric_fan_chart.stories.tsxfront_end/src/stories/question_page/numeric_group/numeric_group_timeline.stories.tsx
💤 Files with no reviewable changes (10)
- front_end/src/app/(main)/questions/[id]/components/question_view/forecaster_question_view/question_header/index.tsx
- front_end/src/app/(main)/questions/[id]/components/question_layout/consumer_question_layout/consumer_tabs.tsx
- front_end/src/app/(main)/questions/[id]/components/question_view/index.tsx
- front_end/src/app/(main)/questions/[id]/components/question_view/forecaster_question_view/index.tsx
- front_end/src/app/(main)/questions/[id]/components/question_layout/consumer_question_layout/index.tsx
- front_end/src/app/(main)/questions/[id]/components/question_view/consumer_question_view/index.tsx
- front_end/src/app/(main)/questions/[id]/components/question_layout/question_section.tsx
- front_end/src/app/(main)/questions/[id]/components/question_layout/index.tsx
- front_end/src/app/(main)/questions/[id]/components/question_layout/question_info.tsx
- front_end/src/app/(main)/questions/[id]/components/question_layout/forecaster_question_layout/index.tsx
cemreinanc
approved these changes
May 1, 2026
…ion, improve cross-tab comment access, and refine consumer shell layout handling for different question types
…date/vote typography to design spec
…ter shell with Resolution Criteria and Background Info, and fix duplicate comments on tab re-entry
…ondition into named vars, and deduplicate post score routing logic
…mer cleanup, update my-scores hash key, and widen Storybook story wrappers to 59rem
…d fan graph questions
ncarazon
force-pushed
the
feat/integrate-the-shell-widen-the-main-column-strip-old-layouts
branch
from
6285beb to
31e3be1
Compare
ncarazon
merged commit 282a591
into
feat/question-page-redesign-1st-iteration
7 checks passed
ncarazon
deleted the
feat/integrate-the-shell-widen-the-main-column-strip-old-layouts
branch
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
2 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.
This PR wires all previously built shell pieces into a single top-level
QuestionPageShellthat owns full page rendering for both variants, widensthe main column to the new design width, and removes all now-unreachable code.
Implemented features & fixes:
question_page_shell/index.tsxwithForecasterShellandConsumerShellas named exports - composing MetaRow, TitleRow, ActionRow,body content, TabBar, and active tab panel in one place
QuestionTimeline(chart) intoConsumerShellalongside theprediction block in a side-by-side flex row on desktop
ReactNodeprop to avoid a server/clientboundary issue with
next/headersw-[59rem]page_component.tsxto mountQuestionPageShelldirectly,removing the old
QuestionLayout/QuestionViewtreeQuestionLayout,QuestionSection,QuestionInfo,ForecasterQuestionLayout,ConsumerQuestionLayout,ConsumerTabs,QuestionView,ForecasterQuestionView,QuestionHeader,ConsumerQuestionViewConsumerShell/ForecasterShellfrom the new shellCommunityDisclaimer(mobile standalone variant) inside both shellsso it renders within the card section rather than outside it; added
relative z-10to the section so it correctly layers above the desktopinline disclaimer
My Scorestab to the consumer tab bar (conditionally when scores exist) - renders ParticipationSummarySection + Peer Score + Baseline Score cards via PostScoreDataMy Scorestab only appears when the user has personal scores, not just community onesDemo videos
consumer.view.mp4
forecaster.view.mp4
key.factors.mp4
my-scores.mp4
Summary by CodeRabbit
Release Notes
New Features
Bug Fixes
Style