Embeds Redesign

front_end/src/app/(embed)/questions/components/embed_question_card.tsx

@@ -0,0 +1,97 @@
+import { useEffect, useMemo, useState } from "react";
+
+import { PostWithForecasts } from "@/types/post";
+
+import EmbedQuestionFooter from "./embed_question_footer";
+import EmbedQuestionHeader from "./embed_question_header";
+import EmbedQuestionPlot from "./embed_question_plot";
+import { QuestionViewModeProvider } from "./question_view_mode_context";
+import { EmbedTheme } from "../constants/embed_theme";
+import { EmbedSize, getEmbedChartHeight } from "../helpers/embed_chart_height";
+
+type Props = {
+  post: PostWithForecasts;
+  ogMode?: boolean;
+  size: EmbedSize;
+  theme?: EmbedTheme;
+  titleOverride?: string;
+  isDynamicMcHeight?: boolean;
+};
+
+const EmbedQuestionCard: React.FC<Props> = ({
+  post,
+  ogMode,
+  size,
+  theme,
+  titleOverride,
+  isDynamicMcHeight = false,
+}) => {
+  const [headerHeight, setHeaderHeight] = useState(0);
+  const [legendHeight, setLegendHeight] = useState(0);
+  const [ogReady, setOgReady] = useState(!ogMode);
+
+  const chartHeight = useMemo(() => {
+    if (ogMode) {
+      return getEmbedChartHeight({
+        post,
+        ogMode,
+        size,
+        headerHeight,
+        legendHeight,
+      });
+    }
+
+    if (isDynamicMcHeight) return undefined;
+    return getEmbedChartHeight({
+      post,
+      ogMode,
+      size,
+      headerHeight,
+      legendHeight,
+    });
+  }, [post, ogMode, size, headerHeight, legendHeight, isDynamicMcHeight]);
+
+  useEffect(() => {
+    if (!ogMode) return;
+
+    if (!headerHeight) {
+      setOgReady(false);
+      return;
+    }
+
+    let raf1 = 0;
+    let raf2 = 0;
+
+    raf1 = requestAnimationFrame(() => {
+      raf2 = requestAnimationFrame(() => {
+        setOgReady(true);
+      });
+    });
+
+    return () => {
+      cancelAnimationFrame(raf1);
+      cancelAnimationFrame(raf2);
+    };
+  }, [ogMode, headerHeight, legendHeight]);
+
+  return (
+    <QuestionViewModeProvider mode="embed">
+      <EmbedQuestionHeader
+        post={post}
+        onHeightChange={setHeaderHeight}
+        titleStyle={theme?.title}
+        titleOverride={titleOverride}
+        theme={theme}
+      />
+      <EmbedQuestionPlot
+        post={post}
+        chartHeight={chartHeight}
+        onLegendHeightChange={setLegendHeight}
+        theme={theme}
+      />
+      <EmbedQuestionFooter ogReady={ogReady} post={post} />
+    </QuestionViewModeProvider>
+  );
+};
+
+export default EmbedQuestionCard;

front_end/src/app/(embed)/questions/components/embed_question_footer.tsx

@@ -0,0 +1,54 @@
+import Image from "next/image";
+import React from "react";
+
+import ForecastersCounter from "@/app/(main)/questions/components/forecaster_counter";
+import CommentStatus from "@/components/post_card/basic_post_card/comment_status";
+import { PostWithForecasts } from "@/types/post";
+
+import metaculusDarkLogo from "../assets/metaculus-dark.png";
+import metaculusLightLogo from "../assets/metaculus-light.png";
+
+type Props = {
+  post: PostWithForecasts;
+  ogReady?: boolean;
+};
+
+const EmbedQuestionFooter: React.FC<Props> = ({ post, ogReady }) => {
+  return (
+    <div className="flex flex-wrap items-center justify-between gap-y-3">
+      <div className="flex items-center gap-2">
+        <ForecastersCounter
+          className="py-1 pl-0 pr-1.5 [&_strong]:font-normal"
+          forecasters={post.nr_forecasters}
+        />
+        <CommentStatus
+          className="!px-1.5 py-1 [&_strong]:font-normal [&_svg]:text-gray-400 [&_svg]:dark:text-gray-400-dark"
+          totalCount={post.comment_count ?? 0}
+          unreadCount={post.unread_comment_count ?? 0}
+          url={""}
+        />
+      </div>
+
+      {ogReady && (
+        <div id="id-logo-used-by-screenshot-donot-change">
+          <Image
+            className="dark:hidden"
+            src={metaculusDarkLogo}
+            alt="Metaculus Logo"
+            width={74}
+            height={15}
+          />
+          <Image
+            className="hidden dark:block"
+            src={metaculusLightLogo}
+            alt="Metaculus Logo"
+            width={74}
+            height={15}
+          />
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default EmbedQuestionFooter;

front_end/src/app/(embed)/questions/components/embed_question_header.tsx

@@ -0,0 +1,128 @@
+import { CSSProperties, useEffect, useMemo, useRef } from "react";
+
+import QuestionHeaderCPStatus from "@/app/(main)/questions/[id]/components/question_view/forecaster_question_view/question_header/question_header_cp_status";
+import { ContinuousQuestionTypes } from "@/constants/questions";
+import { PostWithForecasts } from "@/types/post";
+import { QuestionType, QuestionWithForecasts } from "@/types/question";
+import cn from "@/utils/core/cn";
+import {
+  isContinuousQuestion,
+  isGroupOfQuestionsPost,
+  isQuestionPost,
+} from "@/utils/questions/helpers";
+
+import { useIsEmbedMode } from "./question_view_mode_context";
+import TruncatableQuestionTitle from "./truncatable_question_title";
+import { EmbedTheme } from "../constants/embed_theme";
+import { getEmbedAccentColor } from "../helpers/embed_theme";
+
+type Props = {
+  post: PostWithForecasts;
+  onHeightChange?: (height: number) => void;
+  titleStyle?: CSSProperties;
+  titleOverride?: string;
+  theme?: EmbedTheme;
+};
+
+const EmbedQuestionHeader: React.FC<Props> = ({
+  post,
+  onHeightChange,
+  titleStyle,
+  titleOverride,
+  theme,
+}) => {
+  const containerRef = useRef<HTMLDivElement | null>(null);
+  const isEmbed = useIsEmbedMode();
+
+  useEffect(() => {
+    if (!onHeightChange) return;
+    const el = containerRef.current;
+    if (!el) return;
+
+    const update = () => {
+      onHeightChange(el.getBoundingClientRect().height);
+    };
+
+    update();
+
+    const observer = new ResizeObserver(() => {
+      update();
+    });
+    observer.observe(el);
+
+    return () => observer.disconnect();
+  }, [onHeightChange]);
+
+  const maxLines = useMemo(() => {
+    if (isGroupOfQuestionsPost(post)) {
+      const firstType = post.group_of_questions.questions[0]?.type;
+      const isBinaryGroup = firstType === QuestionType.Binary;
+      const isContinuousGroup = ContinuousQuestionTypes.some(
+        (t) => t === firstType
+      );
+
+      if (isBinaryGroup || isContinuousGroup) return 2;
+      return 3;
+    }
+
+    if (!isQuestionPost(post)) return 3;
+    const q = post.question;
+
+    if (q.type === QuestionType.MultipleChoice) return 2;
+    return q.type === QuestionType.Binary || isContinuousQuestion(q) ? 4 : 3;
+  }, [post]);
+
+  const titleMinHeightClass = useMemo(() => {
+    if (isGroupOfQuestionsPost(post)) {
+      const firstType = post.group_of_questions.questions[0]?.type;
+      const isBinaryGroup = firstType === QuestionType.Binary;
+      const isContinuousGroup = ContinuousQuestionTypes.some(
+        (t) => t === firstType
+      );
+
+      return isBinaryGroup || isContinuousGroup ? "min-h-[2.5em]" : "";
+    }
+
+    if (!isQuestionPost(post)) return "";
+    const q = post.question;
+
+    const needsMinHeight =
+      q.type === QuestionType.MultipleChoice ||
+      q.type === QuestionType.Binary ||
+      isContinuousQuestion(q);
+
+    return needsMinHeight ? "min-h-[2.5em]" : "";
+  }, [post]);
+
+  const predictionColor = getEmbedAccentColor(theme);
+
+  return (
+    <div
+      ref={containerRef}
+      className={cn("flex items-center gap-3", isEmbed && "items-start")}
+    >
+      <TruncatableQuestionTitle
+        className={cn(
+          "!text-[20px] !leading-[125%] [@container(max-width:375px)]:!text-[16px]",
+          titleMinHeightClass
+        )}
+        maxLines={maxLines}
+        revealOnHoverOrTap={true}
+        style={titleStyle}
+      >
+        {titleOverride ?? post.title}
+      </TruncatableQuestionTitle>
+      {isQuestionPost(post) && (
+        <QuestionHeaderCPStatus
+          question={post.question as QuestionWithForecasts}
+          size="md"
+          hideLabel={isContinuousQuestion(post.question)}
+          colorOverride={predictionColor}
+          chartTheme={theme?.chart}
+        />
+      )}
+    </div>
+  );
+};
+
+export default EmbedQuestionHeader;

front_end/src/app/(embed)/questions/components/embed_question_plot.tsx

@@ -0,0 +1,50 @@
+import DetailedGroupCard from "@/components/detailed_question_card/detailed_group_card";
+import DetailedQuestionCard from "@/components/detailed_question_card/detailed_question_card";
+import { PostWithForecasts } from "@/types/post";
+import {
+  isGroupOfQuestionsPost,
+  isQuestionPost,
+} from "@/utils/questions/helpers";
+
+import { EmbedTheme } from "../constants/embed_theme";
+import { getEmbedAccentColor } from "../helpers/embed_theme";
+
+type Props = {
+  post: PostWithForecasts;
+  chartHeight?: number;
+  onLegendHeightChange?: (height: number) => void;
+  theme?: EmbedTheme;
+};
+
+const EmbedQuestionPlot: React.FC<Props> = ({
+  post,
+  chartHeight,
+  onLegendHeightChange,
+  theme,
+}) => {
+  const isGroup = isGroupOfQuestionsPost(post);
+  const accent = getEmbedAccentColor(theme);
+  return (
+    <>
+      {isQuestionPost(post) && (
+        <DetailedQuestionCard
+          post={post}
+          embedChartHeight={chartHeight}
+          onLegendHeightChange={onLegendHeightChange}
+          chartTheme={theme?.chart}
+          colorOverride={accent}
+        />
+      )}
+      {isGroup && (
+        <DetailedGroupCard
+          post={post}
+          embedChartHeight={chartHeight}
+          onLegendHeightChange={onLegendHeightChange}
+          chartTheme={theme?.chart}
+        />
+      )}
+    </>
+  );
+};
+
+export default EmbedQuestionPlot;