Question Page Redesign – Page shell

front_end/messages/cs.json

@@ -700,6 +700,7 @@
   "resolutionCriteriaExplanation": "Dobrá otázka se téměř vždy vyřeší jednoznačně. Jaká je konkrétní událost, která by mohla nastat? Do jakého data by musela nastat, aby se otázka vyřešila jako Ano? Pokud máte zdroj dat, podle kterého se otázka vyřeší, přidejte jej sem.",
   "choicesSeparatedBy": "Možnosti (oddělené čárkou)",
   "projects": "projekty",
+  "projectsTags": "Projekty / Štítky",
   "FABPrizePool": "CENOVÝ FOND",
   "FABPrizeValue": "$30,000",
   "FABStartDate": "STARTOVACÍ DATUM",
@@ -1819,6 +1820,7 @@
   "loadMore": "Načíst více",
   "noPrivateNotes": "Žádné soukromé poznámky",
   "privateNotes": "Soukromé poznámky",
+  "questionLinks": "Odkazy na otázku",
   "justNow": "právě teď",
   "cmmButtonShort": "Mysl",
   "FABRegisterBot": "Zaregistrujte se, abyste přihlásili svého robota do turnaje",
@@ -2166,5 +2168,6 @@
   "whyTrustMetaculusLessNoiseTitle": "Méně šumu, více pravdy",
   "whyTrustMetaculusLessNoise": "Předpovědi Metaculus, poháněné davem, prořezávají šum tím, že zakládají každou předpověď na transparentních důkazech, odpovědném skóre a desetiletí doložené přesnosti. Metaculus vybavuje politiky, výzkumníky, novináře a korporátní organizace předpověďmi založenými na důkazech, které poskytují jasný, kvantifikovatelný vhled do nejkritičtějších nejistot světa. Prozkoumejte naši nabídku <servicesLink>Business řešení</servicesLink> a zjistěte, jak může Metaculus zlepšit rozhodování vaší organizace.",
   "publishTimeLockedDescription": "Čas publikace nelze po vytvoření změnit.",
+  "nMore": "{count} více...",
   "thousandsOfOpenQuestions": "20 000+ otevřených otázek"
 }

front_end/messages/en.json

@@ -767,6 +767,7 @@
   "aboutMetaculusTitle": "<blue>About</blue> Metaculus",
   "aboutMetaculusDescription": "Metaculus is an online forecasting platform and aggregation engine working to improve human reasoning and coordination on topics of global importance.",
   "more": "More",
+  "nMore": "{count} more...",
   "moreLikely": "percentage points higher",
   "afterElection": "under {winner}",
   "ifCandidateElected": "if {candidate} elected",
@@ -1066,6 +1067,7 @@
   "choicesSeparatedBy": "Choices (separated by ,)",
   "choicesLockedHelp": "Options can only be changed through the admin panel once forecasting has started.",
   "projects": "projects",
+  "projectsTags": "Projects / Tags",
   "FABPrizePool": "PRIZE POOL",
   "FABPrizeValue": "$30,000",
   "FABStartDate": "START DATE",
@@ -1942,6 +1944,7 @@
   "loadMore": "Load More",
   "noPrivateNotes": "No private notes yet",
   "privateNotes": "Private Notes",
+  "questionLinks": "Question Links",
   "justNow": "just now",
   "cmmButtonShort": "Mind",
   "myForecastingBots": "My Forecasting Bots",

front_end/messages/es.json

@@ -702,6 +702,7 @@
   "resolutionCriteriaExplanation": "Una buena pregunta casi siempre se resolverá de manera inequívoca. ¿Cuál es el evento específico que podría ocurrir? ¿Antes de qué fecha tendría que ocurrir para que la pregunta se resuelva como Sí? Si tienes una fuente de datos con la que se resolverá la pregunta, enlázala aquí.",
   "choicesSeparatedBy": "Opciones (separadas por ,)",
   "projects": "proyectos",
+  "projectsTags": "Proyectos / Etiquetas",
   "FABPrizePool": "FONDO DE PREMIOS",
   "FABPrizeValue": "$30,000",
   "FABStartDate": "FECHA DE INICIO",
@@ -1818,6 +1819,7 @@
   "loadMore": "Cargar más",
   "noPrivateNotes": "Aún no hay notas privadas",
   "privateNotes": "Notas privadas",
+  "questionLinks": "Enlaces de preguntas",
   "justNow": "justo ahora",
   "cmmButtonShort": "Mente",
   "FABRegisterBot": "Regístrate para inscribir tu bot en el torneo",
@@ -2166,5 +2168,6 @@
   "whyTrustMetaculusLessNoiseTitle": "Menos ruido, más verdad",
   "whyTrustMetaculusLessNoise": "Los pronósticos impulsados por la multitud de Metaculus cortan el ruido al basar cada predicción en evidencia transparente, puntuaciones responsables y una década de precisión demostrada. Metaculus equipa a los responsables de políticas, investigadores, periodistas y organizaciones corporativas con pronósticos basados en evidencia que ofrecen una visión clara y cuantificable de las incertidumbres más críticas del mundo. Explora nuestra suite de <servicesLink>Soluciones Empresariales</servicesLink> para aprender cómo Metaculus puede mejorar la toma de decisiones de tu organización.",
   "publishTimeLockedDescription": "La hora de publicación no puede cambiarse después de la creación.",
+  "nMore": "{count} más...",
   "thousandsOfOpenQuestions": "20,000+ preguntas abiertas"
 }

front_end/messages/pt.json

@@ -791,6 +791,7 @@
   "choices": "Escolhas",
   "choicesSeparatedBy": "Escolhas (separadas por ,)",
   "projects": "projetos",
+  "projectsTags": "Projetos / Tags",
   "FABPrizePool": "PRÊMIO TOTAL",
   "FABPrizeValue": "$30,000",
   "FABStartDate": "DATA DE INÍCIO",
@@ -1816,6 +1817,7 @@
   "loadMore": "Carregar Mais",
   "noPrivateNotes": "Ainda não há notas privadas",
   "privateNotes": "Notas Privadas",
+  "questionLinks": "Links da pergunta",
   "justNow": "agora mesmo",
   "cmmButtonShort": "Mente",
   "FABRegisterBot": "Inscreva-se para registrar seu bot no torneio",
@@ -2164,5 +2166,6 @@
   "whyTrustMetaculusLessNoiseTitle": "Menos ruído, mais verdade",
   "whyTrustMetaculusLessNoise": "As previsões baseadas na multidão do Metaculus cortam o ruído ao basear cada previsão em evidências transparentes, pontuações responsáveis e uma década de precisão demonstrada. O Metaculus equipa formuladores de políticas, pesquisadores, jornalistas e organizações corporativas com previsões baseadas em evidências que oferecem insights claros e quantificáveis sobre as incertezas mais críticas do mundo. Explore nosso conjunto de <servicesLink>Soluções Empresariais</servicesLink> para saber mais sobre como o Metaculus pode melhorar a tomada de decisões da sua organização.",
   "publishTimeLockedDescription": "O horário de publicação não pode ser alterado após a criação.",
+  "nMore": "{count} a mais...",
   "thousandsOfOpenQuestions": "20.000+ perguntas abertas"
 }

front_end/messages/zh-TW.json

@@ -853,6 +853,7 @@
   "choices": "選擇",
   "choicesSeparatedBy": "選擇（以,分隔）",
   "projects": "專案",
+  "projectsTags": "專案 / 標籤",
   "FABPrizePool": "獎金池",
   "FABPrizeValue": "$30,000",
   "FABStartDate": "開始日期",
@@ -1815,6 +1816,7 @@
   "loadMore": "載入更多",
   "noPrivateNotes": "尚無私人筆記",
   "privateNotes": "私人筆記",
+  "questionLinks": "問題連結",
   "justNow": "剛剛",
   "cmmButtonShort": "心智",
   "FABRegisterBot": "註冊以參加賽事",
@@ -2163,5 +2165,6 @@
   "whyTrustMetaculusLessNoiseTitle": "更少的噪音，更多的真相",
   "whyTrustMetaculusLessNoise": "Metaculus 的群眾驅動預測通過將每一個預測植根於透明的證據、負責的計分和十年的已證準確性，抑制了噪音。Metaculus 為政策制定者、研究人員、記者和企業組織提供基於證據的預測，為全球最重要的不確定性提供清晰、可量化的洞察。探索我們的 <servicesLink>企業解決方案</servicesLink>，了解 Metaculus 如何改善貴組織的決策。",
   "publishTimeLockedDescription": "建立後將無法更改發佈時間。",
+  "nMore": "還有 {count} 個...",
   "thousandsOfOpenQuestions": "20,000+ 開放問題"
 }

front_end/messages/zh.json

@@ -691,6 +691,7 @@
   "resolutionCriteriaExplanation": "一個好的問題幾乎總是能夠明確解決。可能發生的具體事件是什麼？在什麼日期之前需要發生才能使問題解決為「是」？如果你有用於解決問題的數據源，請在此處連結。",
   "choicesSeparatedBy": "選項（以逗號分隔）",
   "projects": "專案",
+  "projectsTags": "项目 / 标签",
   "FABPrizePool": "獎金池",
   "FABPrizeValue": "30,000美元",
   "FABStartDate": "開始日期",
@@ -1820,6 +1821,7 @@
   "loadMore": "加載更多",
   "noPrivateNotes": "尚無私人筆記",
   "privateNotes": "私人筆記",
+  "questionLinks": "问题链接",
   "justNow": "刚刚",
   "cmmButtonShort": "心情",
   "FABRegisterBot": "注册您的机器人以参加锦标赛",
@@ -2168,5 +2170,6 @@
   "whyTrustMetaculusLessNoiseTitle": "少噪音，多真相",
   "whyTrustMetaculusLessNoise": "Metaculus 的众包预测通过以透明证据、可追溯的评分以及十年证明的准确性为基础来削减预测中的噪音。Metaculus 为政策制定者、研究人员、记者和企业组织提供基于证据的预测，为世界上最重要的不确定性提供清晰、可量化的洞察。了解我们的<servicesLink>企业解决方案</servicesLink>，了解 Metaculus 如何改善贵组织的决策。",
   "publishTimeLockedDescription": "创建后将无法更改发布时间。",
+  "nMore": "{count} 更多...",
   "thousandsOfOpenQuestions": "20,000+ 开放问题"
 }

front_end/src/app/(main)/components/comments_feed_provider.tsx

@@ -199,6 +199,9 @@ const CommentsFeedProvider: FC<
     try {
       setIsLoading(true);
       setError(undefined);
+      if (!keepComments) {
+        setOffset(0);
+      }
       const response = await ClientCommentsApi.getComments({
         post: postData?.id,
         author: profileId,

front_end/src/app/(main)/questions/[id]/[[...slug]]/page_component.tsx

@@ -13,15 +13,12 @@ import { SearchParams } from "@/types/navigation";
 import { GroupOfQuestionsGraphType } from "@/types/post";
 import { TournamentType } from "@/types/projects";
 import cn from "@/utils/core/cn";
-import {
-  getPostTitle,
-  isGroupOfQuestionsPost,
-} from "@/utils/questions/helpers";
+import { isGroupOfQuestionsPost } from "@/utils/questions/helpers";
 
 import NotebookRedirect from "../components/notebook_redirect";
 import QuestionEmbedModal from "../components/question_embed_modal";
-import QuestionLayout from "../components/question_layout";
-import QuestionView from "../components/question_view";
+import QuestionPageShell from "../components/question_page_shell";
+import { QuestionVariantComposer } from "../components/question_variant_composer";
 import Sidebar from "../components/sidebar";
 import { SLUG_POST_SUB_QUESTION_ID } from "../search_params";
 import { cachedGetPost } from "./utils/get_post";
@@ -53,7 +50,6 @@ const IndividualQuestionPage: FC<{
   const preselectedGroupQuestionId =
     extractPreselectedGroupQuestionId(searchParams);
 
-  const questionTitle = getPostTitle(postData);
   const isFanChart =
     isGroupOfQuestionsPost(postData) &&
     postData.group_of_questions?.graph_type ===
@@ -88,24 +84,22 @@ const IndividualQuestionPage: FC<{
                         />
                       </div>
                     )}
-                    <QuestionLayout
+                    <QuestionPageShell
                       postData={postData}
                       preselectedGroupQuestionId={preselectedGroupQuestionId}
-                    >
-                      {isCommunityQuestion && defaultProject && (
-                        <CommunityDisclaimer
-                          project={defaultProject}
-                          variant="standalone"
-                          className="block sm:hidden"
-                        />
-                      )}
-                      <QuestionView
-                        postData={postData}
-                        preselectedGroupQuestionId={preselectedGroupQuestionId}
-                      />
-                    </QuestionLayout>
+                      mobileSidebar={
+                        <Sidebar postData={postData} layout="mobile" />
+                      }
+                    />
                   </div>
-                  <Sidebar postData={postData} questionTitle={questionTitle} />
+                  <QuestionVariantComposer
+                    forecaster={
+                      <Sidebar postData={postData} variant="forecaster" />
+                    }
+                    consumer={
+                      <Sidebar postData={postData} variant="consumer" />
+                    }
+                  />
                 </div>
               </main>
 

front_end/src/app/(main)/questions/[id]/components/key_factors/item_view/key_factor_header.tsx

@@ -18,7 +18,7 @@ const KeyFactorHeader: FC<Props> = ({ label, username, linkAnchor }) => {
   const questionLayout = useQuestionLayoutSafe();
 
   const handleActivate = () => {
-    questionLayout?.setMobileActiveTab("comments");
+    questionLayout?.setActiveTab("comments");
 
     const target = document.getElementById(linkAnchor.replace("#", ""));
     if (target) {

front_end/src/app/(main)/questions/[id]/components/key_factors/item_view/more_panel.tsx

@@ -123,12 +123,10 @@ const MorePanel: FC<MorePanelProps> = ({
   const handleViewComment = () => {
     onClose();
     questionLayout?.closeKeyFactorOverlay();
+    questionLayout?.setActiveTab("comments");
     setTimeout(() => {
-      const el = document.getElementById(`comment-${keyFactor.comment_id}`);
-      if (el) {
-        el.scrollIntoView({ behavior: "smooth", block: "center" });
-      }
-    }, 100);
+      questionLayout?.requestScrollToComment(keyFactor.comment_id);
+    }, 50);
   };
 
   const actions: ActionItem[] = [

front_end/src/app/(main)/questions/[id]/components/key_factors/key_factor_detail_overlay.tsx

@@ -121,19 +121,20 @@ const KeyFactorDetailOverlay: FC<Props> = (props) => {
     if (!keyFactor) return;
     await ensureCommentLoaded(keyFactor.comment_id);
     onClose();
+    questionLayout?.setActiveTab("comments");
     setTimeout(() => {
-      const el = document.getElementById(`comment-${keyFactor.comment_id}`);
-      el?.scrollIntoView({ behavior: "smooth", block: "center" });
-    }, 200);
+      questionLayout?.requestScrollToComment(keyFactor.comment_id);
+    }, 50);
   };
 
   const handleReplyToComment = async () => {
     if (!keyFactor) return;
     await ensureCommentLoaded(keyFactor.comment_id);
     onClose();
+    questionLayout?.setActiveTab("comments");
     setTimeout(() => {
       questionLayout?.requestReplyToComment(keyFactor.comment_id);
-    }, 500);
+    }, 50);
   };
 
   const hasComment = !!(keyFactor && (comment?.text?.trim() || !comment));

front_end/src/app/(main)/questions/[id]/components/key_factors/key_factors_question_consumer_section.tsx

@@ -8,14 +8,14 @@ import { openKeyFactorsSectionAndScrollTo } from "@/app/(main)/questions/[id]/co
 import { PostStatus, PostWithForecasts } from "@/types/post";
 import { sendAnalyticsEvent } from "@/utils/analytics";
 
-import KeyFactorDetailOverlay from "./key_factor_detail_overlay";
-import KeyFactorsConsumerCarousel from "./key_factors_consumer_carousel";
-import { useShouldHideKeyFactors } from "./use_should_hide_key_factors";
-import { useQuestionLayout } from "../question_layout/question_layout_context";
 import {
   MAX_TOP_KEY_FACTORS,
   useTopKeyFactorsCarouselItems,
 } from "./hooks/use_top_key_factors_carousel_items";
+import KeyFactorDetailOverlay from "./key_factor_detail_overlay";
+import KeyFactorsConsumerCarousel from "./key_factors_consumer_carousel";
+import { useShouldHideKeyFactors } from "./use_should_hide_key_factors";
+import { useQuestionLayout } from "../question_layout/question_layout_context";
 
 type Props = {
   post: PostWithForecasts;
@@ -51,7 +51,7 @@ const KeyFactorsQuestionConsumerSection: FC<Props> = ({ post }) => {
 
   return (
     <div
-      className="-ml-4 mt-8 flex w-[calc(100%+32px)] flex-col pb-4 sm:ml-0 sm:w-full"
+      className="-ml-4 flex w-[calc(100%+32px)] flex-col pb-4 sm:ml-0 sm:mt-8 sm:w-full"
       id="top-key-factors"
     >
       <div className="mb-4 flex items-center justify-between px-4 sm:px-0">
@@ -63,7 +63,7 @@ const KeyFactorsQuestionConsumerSection: FC<Props> = ({ post }) => {
             openKeyFactorsElement("[id='key-factors']");
             sendAnalyticsEvent("KeyFactorViewAllClick");
           }}
-          className="text-sm text-blue-700 hover:text-blue-800 dark:text-blue-700-dark dark:hover:text-blue-600-dark"
+          className="text-center text-sm font-normal leading-5 text-blue-600 hover:text-blue-700 dark:text-blue-600-dark dark:hover:text-blue-700-dark"
         >
           {t("viewAll", { count: totalCount })}
         </button>

front_end/src/app/(main)/questions/[id]/components/post_score_data/single_question_score_data.tsx

@@ -1,6 +1,8 @@
 import React, { FC } from "react";
 
 import ForecastMaker from "@/components/forecast_maker";
+import BackgroundInfo from "@/components/question/background_info";
+import ResolutionCriteria from "@/components/question/resolution_criteria";
 import { PostWithForecasts } from "@/types/post";
 import { QuestionType } from "@/types/question";
 import { isContinuousQuestion } from "@/utils/questions/helpers";
@@ -27,11 +29,20 @@ const SingleQuestionScoreData: FC<Props> = ({
 
   if (isConsumerView) {
     return (
-      <ResolutionScoreCards
-        post={post}
-        isConsumerView={isConsumerView}
-        noSectionWrapper={noSectionWrapper}
-      />
+      <div className="flex flex-col gap-4">
+        {question.type !== QuestionType.MultipleChoice && (
+          <ParticipationSummarySection
+            question={question}
+            forecastsCount={post.forecasts_count ?? 0}
+            forecastersCount={nr_forecasters}
+          />
+        )}
+        <ResolutionScoreCards
+          post={post}
+          isConsumerView={isConsumerView}
+          noSectionWrapper={noSectionWrapper}
+        />
+      </div>
     );
   }
 
@@ -46,6 +57,8 @@ const SingleQuestionScoreData: FC<Props> = ({
       )}
       <ResolutionScoreCards post={post} />
       {isContinuousQuestion(question) && <ForecastMaker post={post} />}
+      <ResolutionCriteria post={post} defaultOpen />
+      <BackgroundInfo post={post} defaultOpen />
     </div>
   );
 };

front_end/src/app/(main)/questions/[id]/components/post_score_data/utils.ts

@@ -20,22 +20,38 @@ export const shouldQuestionShowScores = (question: QuestionWithForecasts) => {
   );
 };
 
-export function shouldPostShowScores(post: PostWithForecasts): boolean {
+export const shouldQuestionShowUserScores = (
+  question: QuestionWithForecasts
+) => {
+  const userScores = question.my_forecasts?.score_data;
+  return (
+    !isNil(userScores) &&
+    Object.keys(userScores).length > 0 &&
+    !isUnsuccessfullyResolved(question.resolution)
+  );
+};
+
+function someQuestionIn(
+  post: PostWithForecasts,
+  predicate: (q: QuestionWithForecasts) => boolean
+): boolean {
   if (isGroupOfQuestionsPost(post)) {
-    return post.group_of_questions.questions.some(shouldQuestionShowScores);
+    return post.group_of_questions.questions.some(predicate);
   }
 
   if (isConditionalPost(post)) {
     const { condition, question_yes, question_no } = post.conditional;
-
-    if (condition.resolution === "yes") {
-      return shouldQuestionShowScores(question_yes);
-    } else if (condition.resolution === "no") {
-      return shouldQuestionShowScores(question_no);
-    }
+    if (condition.resolution === "yes") return predicate(question_yes);
+    if (condition.resolution === "no") return predicate(question_no);
   }
 
-  if (isQuestionPost(post)) return shouldQuestionShowScores(post.question);
+  if (isQuestionPost(post)) return predicate(post.question);
 
   return false;
 }
+
+export const shouldPostShowScores = (post: PostWithForecasts) =>
+  someQuestionIn(post, shouldQuestionShowScores);
+
+export const shouldPostShowUserScores = (post: PostWithForecasts) =>
+  someQuestionIn(post, shouldQuestionShowUserScores);