feat: qa updates

Author: ncarazon

front_end/messages/cs.json

@@ -2072,6 +2072,7 @@
   "switchBackToSlidersHint": "přepněte zpět na posuvníky pro plynulé přizpůsobení",
   "view": "Zobrazit",
   "viewComment": "Zobrazit komentář",
+  "viewArticle": "Zobrazit článek",
   "createdTimeAgoBy": "Vytvořeno {timeAgo} uživatelem @{author}",
   "createdTimeAgo": "Vytvořeno {timeAgo}",
   "direction": "Směr",

front_end/messages/en.json

@@ -2070,6 +2070,7 @@
   "redundant": "Redundant",
   "thanksForVoting": "Thanks for voting!",
   "viewComment": "View comment",
+  "viewArticle": "View Article",
   "createdTimeAgoBy": "Created {timeAgo} by @{author}",
   "createdTimeAgo": "Created {timeAgo}",
   "direction": "Direction",

front_end/messages/es.json

@@ -2072,6 +2072,7 @@
   "switchBackToSlidersHint": "vuelve a los deslizadores para un ajuste suave",
   "view": "Ver",
   "viewComment": "Ver comentario",
+  "viewArticle": "Ver artículo",
   "createdTimeAgoBy": "Creado {timeAgo} por @{author}",
   "createdTimeAgo": "Creado {timeAgo}",
   "direction": "Dirección",

front_end/messages/pt.json

@@ -2070,6 +2070,7 @@
   "switchBackToSlidersHint": "volte para os controles deslizantes para um ajuste suave",
   "view": "Visualizar",
   "viewComment": "Ver comentário",
+  "viewArticle": "Ver artigo",
   "createdTimeAgoBy": "Criado {timeAgo} por @{author}",
   "createdTimeAgo": "Criado {timeAgo}",
   "direction": "Direção",

front_end/messages/zh-TW.json

@@ -2069,6 +2069,7 @@
   "switchBackToSlidersHint": "切換回滑桿以平滑調整",
   "view": "檢視",
   "viewComment": "查看評論",
+  "viewArticle": "查看文章",
   "createdTimeAgoBy": "由 @{author} 建立於 {timeAgo}",
   "createdTimeAgo": "建立於 {timeAgo}",
   "direction": "方向",

front_end/messages/zh.json

@@ -2074,6 +2074,7 @@
   "switchBackToSlidersHint": "切回滑块以进行更精细的调整",
   "view": "查看",
   "viewComment": "查看评论",
+  "viewArticle": "查看文章",
   "createdTimeAgoBy": "由 @{author} 创建于 {timeAgo}",
   "createdTimeAgo": "创建于 {timeAgo}",
   "direction": "方向",

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

@@ -20,6 +20,7 @@ type Props = {
   comment: BECommentType | null;
   isLoading: boolean;
   onScrollToComment: () => void;
+  onReplyToComment: () => void;
   onSelectKeyFactor: (keyFactor: KeyFactor) => void;
   onVoteChange: (voteScore: number, userVote: VoteDirection | null) => void;
   onCmmToggle: (enabled: boolean) => void;
@@ -32,6 +33,7 @@ const CommentDetailPanel: FC<Props> = ({
   comment,
   isLoading,
   onScrollToComment,
+  onReplyToComment,
   onSelectKeyFactor,
   onVoteChange,
   onCmmToggle,
@@ -127,7 +129,7 @@ const CommentDetailPanel: FC<Props> = ({
           <CommentActionBar
             comment={comment}
             post={post}
-            onReply={onScrollToComment}
+            onReply={onReplyToComment}
             onScrollToLink={onScrollToComment}
             onVoteChange={onVoteChange}
             onCmmToggle={onCmmToggle}

front_end/src/app/(main)/questions/[id]/components/key_factors/hooks.ts

@@ -4,6 +4,7 @@ import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 
 import useCoherenceLinksContext from "@/app/(main)/components/coherence_links_provider";
 import { useCommentsFeed } from "@/app/(main)/components/comments_feed_provider";
+import { useQuestionLayoutSafe } from "@/app/(main)/questions/[id]/components/question_layout/question_layout_context";
 import {
   addKeyFactorsToComment,
   createComment,
@@ -485,6 +486,7 @@ export const useKeyFactorDelete = () => {
 export const useKeyFactorModeration = () => {
   const t = useTranslations();
   const { setCurrentModal } = useModal();
+  const questionLayout = useQuestionLayoutSafe();
   const { combinedKeyFactors, setCombinedKeyFactors } = useCommentsFeed();
   const [doReportKeyFactor] = useServerAction(reportKeyFactor);
 
@@ -535,11 +537,13 @@ export const useKeyFactorModeration = () => {
             optimisticallyAddReplyEnsuringParent(kf.comment_id, text),
           onFinalize: finalizeReply,
           onRemove: removeTempReply,
+          onSubmitted: () => questionLayout?.closeKeyFactorOverlay(),
         },
       });
     },
     [
       setCurrentModal,
+      questionLayout,
       optimisticallyAddReplyEnsuringParent,
       finalizeReply,
       removeTempReply,

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

@@ -5,7 +5,9 @@ import { useTranslations } from "next-intl";
 import { KeyFactor, KeyFactorVoteTypes } from "@/types/comment";
 import cn from "@/utils/core/cn";
 
-import KeyFactorStrengthItem from "../key_factor_strength_item";
+import KeyFactorStrengthItem, {
+  ImpactVoteHandler,
+} from "../key_factor_strength_item";
 import KeyFactorText from "../key_factor_text";
 import KeyFactorBaseRateFrequency from "./key_factor_base_rate_frequency";
 import KeyFactorBaseRateTrend from "./key_factor_base_rate_trend";
@@ -15,6 +17,7 @@ type Props = {
   mode?: "forecaster" | "consumer";
   isCompact?: boolean;
   isSuggested?: boolean;
+  impactVoteRef?: React.MutableRefObject<ImpactVoteHandler | null>;
   onVotePanelToggle?: (open: boolean) => void;
   onDownvotePanelToggle?: (open: boolean) => void;
   onMorePanelToggle?: (open: boolean) => void;
@@ -26,6 +29,7 @@ const KeyFactorBaseRate: React.FC<Props> = ({
   isCompact,
   mode,
   isSuggested,
+  impactVoteRef,
   onVotePanelToggle,
   onDownvotePanelToggle,
   onMorePanelToggle,
@@ -45,6 +49,7 @@ const KeyFactorBaseRate: React.FC<Props> = ({
       isCompact={isCompact}
       mode={mode}
       voteType={KeyFactorVoteTypes.DIRECTION}
+      impactVoteRef={impactVoteRef}
       onVotePanelToggle={onVotePanelToggle}
       onDownvotePanelToggle={onDownvotePanelToggle}
       onMorePanelToggle={onMorePanelToggle}

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

@@ -1,6 +1,6 @@
 "use client";
 
-import { FC } from "react";
+import { FC, useRef } from "react";
 
 import { useCommentsFeed } from "@/app/(main)/components/comments_feed_provider";
 import { ImpactMetadata, KeyFactor } from "@/types/comment";
@@ -10,6 +10,7 @@ import { getImpactDirectionFromMetadata } from "@/utils/key_factors";
 import KeyFactorBaseRate from "./base_rate/key_factor_base_rate";
 import KeyFactorDriver from "./driver/key_factor_driver";
 import KeyFactorCardContainer from "./key_factor_card_container";
+import { ImpactVoteHandler } from "./key_factor_strength_item";
 import KeyFactorVotePanels, {
   useKeyFactorVotePanels,
 } from "./key_factor_vote_panels";
@@ -62,8 +63,11 @@ export const KeyFactorItem: FC<Props> = ({
     handleUpvotePanelToggle,
     handleDownvotePanelToggle,
     handleMorePanelToggle,
+    closeAllPanels,
   } = useKeyFactorVotePanels();
 
+  const impactVoteRef = useRef<ImpactVoteHandler | null>(null);
+
   return (
     <div ref={impactPanel.anchorRef} className="self-start">
       <KeyFactorCardContainer
@@ -72,7 +76,10 @@ export const KeyFactorItem: FC<Props> = ({
         linkToComment={linkToComment}
         isCompact={isCompact}
         mode={mode}
-        onClick={onClick}
+        onClick={() => {
+          closeAllPanels();
+          onClick?.();
+        }}
         className={className}
         impactDirection={impactDirection}
         impactStrength={impactStrength}
@@ -82,6 +89,7 @@ export const KeyFactorItem: FC<Props> = ({
             keyFactor={liveKeyFactor}
             mode={mode}
             isCompact={isCompact}
+            impactVoteRef={impactVoteRef}
             onVotePanelToggle={handleUpvotePanelToggle}
             onDownvotePanelToggle={handleDownvotePanelToggle}
             onMorePanelToggle={handleMorePanelToggle}
@@ -94,6 +102,7 @@ export const KeyFactorItem: FC<Props> = ({
             isCompact={isCompact}
             mode={mode}
             isSuggested={isSuggested}
+            impactVoteRef={impactVoteRef}
             onVotePanelToggle={handleUpvotePanelToggle}
             onDownvotePanelToggle={handleDownvotePanelToggle}
             onMorePanelToggle={handleMorePanelToggle}
@@ -105,6 +114,7 @@ export const KeyFactorItem: FC<Props> = ({
             keyFactor={liveKeyFactor}
             mode={mode}
             isCompact={isCompact}
+            impactVoteRef={impactVoteRef}
             onVotePanelToggle={handleUpvotePanelToggle}
             onDownvotePanelToggle={handleDownvotePanelToggle}
             onMorePanelToggle={handleMorePanelToggle}
@@ -122,6 +132,7 @@ export const KeyFactorItem: FC<Props> = ({
         inline={inlineVotePanels}
         keyFactor={liveKeyFactor}
         projectPermission={projectPermission}
+        onImpactSelect={(option) => impactVoteRef.current?.(option)}
       />
     </div>
   );