feat: display forum post council note on proposal detail page

src/api/discourse/fetch.ts

@@ -17,6 +17,7 @@ export async function fetchDiscourseUsers(url: string, init: RequestInit = {}){
 export interface TopicSummary {
   postCount: number;
   recentAvatars: string[];
+  notice: string | null;
 }
 
 export async function fetchDiscourseTopic(url: string, init: RequestInit = {}, size: number = 48): Promise<TopicSummary | null> {
@@ -55,7 +56,8 @@ export async function fetchDiscourseTopic(url: string, init: RequestInit = {}, s
 
     return {
       postCount,
-      recentAvatars
+      recentAvatars,
+      notice: topic.post_stream.posts[0]?.notice?.cooked ?? null,
     }
   })
 }

src/api/discourse/topic.ts

@@ -172,6 +172,7 @@ export interface Post {
     topic_accepted_answer: null;
     can_vote?: boolean;
     reply_to_user?: CreatedBy;
+    notice?: { type: string; cooked: string };
 }
 
 export interface PostActionsSummary {

src/recipes/proposal/ProposalView.tsx

@@ -44,7 +44,7 @@ import XGovQuorumMetPill from "@/components/XGovQuorumMetPill/XGovQuorumMetPill"
 import VoteQuorumMetPill from "@/components/VoteQuorumMetPill/VoteQuorumMetPill";
 import MajorityApprovedPill from "@/components/MajorityApprovedPill/MajorityApprovedPill";
 import VoteBar from "@/components/VoteBar/VoteBar";
-import { useCommittee, useNFD, useProposal, useVotersInfo, useVotingState, useXGov, useXGovDelegates } from "@/hooks";
+import { useCommittee, useDiscourseTopic, useNFD, useProposal, useVotersInfo, useVotingState, useXGov, useXGovDelegates } from "@/hooks";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { useForm } from "react-hook-form";
 import { z } from "zod";
@@ -970,6 +970,16 @@ export function ProposalInfo({
 
   const phase = getProposalStatusPhase(proposal);
 
+  function colorizeVotes(html: string): string {
+    return html
+      .replace(/\b([0-9]|1[01])\s+yes\b/g, '<br/><span style="color:#22c55e">$1 yes</span>')
+      .replace(/\b([0-9]|1[01])\s+no\b/g, '<span style="color:#ef4444"> / $1 no</span>')
+      .replace(/\b([0-9]|1[01])\s+abstain\b/g, '<span style="color:#eab308"> / $1 abstain</span>');
+  }
+
+  const discourseTopic = useDiscourseTopic(proposal.forumLink);
+  const forumNotice = discourseTopic.data?.notice ?? null;
+
   const _pastProposals = (pastProposals || []).filter((p) =>
     ![
       ProposalStatus.ProposalStatusEmpty,
@@ -1043,6 +1053,11 @@ export function ProposalInfo({
         <div className="lg:col-span-2 lg:grid lg:w-full lg:max-w-7xl lg:grid-cols-2 lg:gap-x-8 pt-6">
           <div className="lg:pr-4">
             <div className="sm:max-w-lg md:max-w-[unset]">
+              {forumNotice && (
+                <p className="text-sm text-algo-black-70 dark:text-algo-black-30 mb-2">
+                  <span dangerouslySetInnerHTML={{ __html: colorizeVotes(forumNotice) }} />
+                </p>
+              )}
               <p className="text-base/7 text-algo-blue">
                 <BracketedPhaseDetail phase={phase} />
               </p>