Fix hydration issue and status progress bar timeframe

src/components/MdRenderer.tsx

@@ -1,6 +1,5 @@
 import { cx } from '@/utils/class-names'
 import { sanitizeHtmlPlugin } from '@osn/previewer'
-import Image from 'next/image'
 import { memo } from 'react'
 import ReactMarkdown from 'react-markdown'
 import rehypeRaw from 'rehype-raw'
@@ -32,14 +31,8 @@ function MdRendererRaw({
         img: (props) => {
           if (!props.src) return null
           return (
-            // @ts-expect-error - the props type is not correctly inferred
-            <Image
-              alt=''
-              className='bg-background-lighter'
-              {...props}
-              width={(props.width as number) ?? 1500}
-              height={(props.height as number) ?? 1500}
-            />
+            // eslint-disable-next-line @next/next/no-img-element
+            <img alt='' className='bg-background-lighter' {...props} />
           )
         },
         p: (props) => {

src/components/layouts/CreatorSidebar/CreatorSidebar.tsx

@@ -40,7 +40,7 @@ export default function CreatorSidebar({ className }: { className?: string }) {
 
 function SidebarContent({ className }: { className?: string }) {
   const ref = useRef<HTMLDivElement | null>(null)
-  const { position, top } = useStickyElement({ elRef: ref, top: 72 })
+  const { position, top } = useStickyElement({ elRef: ref, top: 56 })
   const myAddress = useMyMainAddress() ?? ''
   const { data: totalStake } = getTotalStakeQuery.useQuery(myAddress)
 

src/components/layouts/DefaultLayout.tsx

@@ -65,7 +65,7 @@ export default function DefaultLayout({
             <Sidebar />
           </div>
           <div className='flex-1'>{children}</div>
-          <CreatorSidebar className='hidden h-fit max-h-none w-[275px] pb-4 lg:flex' />
+          <CreatorSidebar className='hidden h-fit max-h-none w-[275px] py-4 lg:flex' />
         </div>
       ) : (
         children

src/modules/opengov/ProposalDetailPage/DesktopProposalDetail.tsx

@@ -34,6 +34,14 @@ export default function DesktopProposalDetail({
   const { chatId } = useProposalDetailContext()
   const { allIds, isOpen, isLoading, selectedTab, setIsOpen, setSelectedTab } =
     useCommentDrawer(proposal)
+  const { data: postMetadata } = getPostMetadataQuery.useQuery(chatId ?? '')
+  const lastThreeMessageIds = allIds.slice(0, 3)
+  const lastThreeMessages = getPostQuery.useQueries(lastThreeMessageIds)
+  const isLoadingMessages = useIsAnyQueriesLoading(lastThreeMessages)
+
+  const ref = useRef<HTMLDivElement | null>(null)
+
+  const hasGrillComments = !isLoading && allIds.length > 0
 
   useEffect(() => {
     if (isOpen) {
@@ -70,12 +78,44 @@ export default function DesktopProposalDetail({
               source={proposal.content}
             />
           </Card>
+
+          <Card className='flex flex-col gap-4 bg-background-light'>
+            <span className='text-lg font-bold'>Latest Comments</span>
+            {(() => {
+              if (isLoading || isLoadingMessages) {
+                return (
+                  <div className='flex flex-col gap-2'>
+                    <Skeleton className='w-full' />
+                    <Skeleton className='w-full' />
+                    <Skeleton className='w-full' />
+                  </div>
+                )
+              }
+              if (!hasGrillComments && proposal.comments.length) {
+                return (
+                  <LatestCommentFromExternalSources
+                    setIsOpenDrawer={setIsOpen}
+                    proposal={proposal}
+                  />
+                )
+              }
+              if (hasGrillComments && chatId) {
+                return (
+                  <GrillLatestMessages
+                    lastThreeMessages={lastThreeMessages}
+                    chatId={chatId}
+                    setIsOpenDrawer={setIsOpen}
+                    totalCommentsCount={postMetadata?.totalCommentsCount || 0}
+                  />
+                )
+              }
+              return <NoMessagesCard onClick={() => setIsOpen(true)} />
+            })()}
+          </Card>
         </div>
         <StickyRightPanel
           proposal={proposal}
           chatId={chatId}
-          allIds={allIds}
-          isLoading={isLoading}
           setIsOpen={setIsOpen}
         />
       </div>
@@ -95,66 +135,26 @@ export default function DesktopProposalDetail({
 function StickyRightPanel({
   proposal,
   chatId,
-  allIds,
-  isLoading,
   setIsOpen,
 }: {
   proposal: Proposal
   chatId: string
-  allIds: string[]
-  isLoading: boolean
   setIsOpen: (isOpen: boolean) => void
 }) {
-  const { data: postMetadata } = getPostMetadataQuery.useQuery(chatId ?? '')
-  const lastThreeMessageIds = allIds.slice(0, 3)
-  const lastThreeMessages = getPostQuery.useQueries(lastThreeMessageIds)
-  const isLoadingMessages = useIsAnyQueriesLoading(lastThreeMessages)
-
   const ref = useRef<HTMLDivElement | null>(null)
   const style = useStickyElement({ elRef: ref, top: 72 })
 
-  const hasGrillComments = !isLoading && allIds.length > 0
-
   return (
     <div
       className='flex flex-col gap-6 self-start pb-8'
       style={style}
       ref={ref}
     >
-      <ProposalStatusCard proposal={proposal} />
-      <Card className='flex flex-col gap-4 bg-background-light'>
-        <span className='text-lg font-bold'>Latest Comments</span>
-        {(() => {
-          if (isLoading || isLoadingMessages) {
-            return (
-              <div className='flex flex-col gap-2'>
-                <Skeleton className='w-full' />
-                <Skeleton className='w-full' />
-                <Skeleton className='w-full' />
-              </div>
-            )
-          }
-          if (!hasGrillComments && proposal.comments.length) {
-            return (
-              <LatestCommentFromExternalSources
-                setIsOpenDrawer={setIsOpen}
-                proposal={proposal}
-              />
-            )
-          }
-          if (hasGrillComments && chatId) {
-            return (
-              <GrillLatestMessages
-                lastThreeMessages={lastThreeMessages}
-                chatId={chatId}
-                setIsOpenDrawer={setIsOpen}
-                totalCommentsCount={postMetadata?.totalCommentsCount || 0}
-              />
-            )
-          }
-          return <NoMessagesCard onClick={() => setIsOpen(true)} />
-        })()}
-      </Card>
+      <ProposalStatusCard
+        proposal={proposal}
+        chatId={chatId}
+        onCommentButtonClick={() => setIsOpen(true)}
+      />
     </div>
   )
 }

src/modules/opengov/ProposalDetailPage/MobileProposalDetail.tsx

@@ -67,7 +67,7 @@ export default function MobileProposalDetailPage({
                 Read more
               </LinkText>
             </Card>
-            <ProposalStatusCard proposal={proposal} />
+            <ProposalStatusCard proposal={proposal} chatId={chatId} />
           </div>
         </div>
         <div className='container-page absolute bottom-0 h-20 w-full border-t border-border-gray bg-background-light py-4'>

src/modules/opengov/ProposalDetailPage/ProposalStatusCard.tsx

@@ -2,6 +2,7 @@ import IssuanceIcon from '@/assets/icons/issuance.svg'
 import SupportIcon from '@/assets/icons/support.svg'
 import VoteIcon from '@/assets/icons/vote.svg'
 import ActionCard from '@/components/ActionCard'
+import Button from '@/components/Button'
 import Card from '@/components/Card'
 import PopOver from '@/components/floating/PopOver'
 import ProposalStatus from '@/components/opengov/ProposalStatus'
@@ -11,6 +12,7 @@ import {
   ProposalConfirmationPeriod,
   ProposalDecisionPeriod,
 } from '@/server/opengov/mapper'
+import { getPostMetadataQuery } from '@/services/datahub/posts/query'
 import { cx } from '@/utils/class-names'
 import { formatBalanceWithDecimals } from '@/utils/formatBalance'
 import dayjs from 'dayjs'
@@ -22,12 +24,21 @@ import SupportBar, { getCurrentBillPercentage } from './SupportBar'
 
 export default function ProposalStatusCard({
   proposal,
+  onCommentButtonClick,
+  chatId,
 }: {
   proposal: Proposal
+  onCommentButtonClick?: () => void
+  chatId: string
 }) {
+  const { data: postMetadata, isLoading } = getPostMetadataQuery.useQuery(
+    chatId ?? ''
+  )
   const [isOpenModal, setIsOpenModal] = useState(false)
-
   const currentSupport = getCurrentBillPercentage(proposal)
+
+  const isLoadingMetadata = isLoading && !!chatId
+
   return (
     <Card className='flex flex-col gap-4 bg-background-light'>
       <div className='flex items-center justify-between gap-4'>
@@ -119,6 +130,20 @@ export default function ProposalStatusCard({
         ]}
         size='sm'
       />
+      {onCommentButtonClick && (
+        <Button
+          size='lg'
+          onClick={() => onCommentButtonClick()}
+          className='w-full'
+        >
+          {isLoadingMetadata
+            ? ''
+            : postMetadata?.totalCommentsCount ||
+              proposal.comments.length ||
+              ''}{' '}
+          Comments
+        </Button>
+      )}
       <ProposalMetadataModal
         proposal={proposal}
         isOpen={isOpenModal}
@@ -133,15 +158,29 @@ function getProposalPeriodStatus(period: {
   endTime: number
   duration: number
 }) {
-  const periodDuration = dayjs.duration(period.duration).asDays()
+  let periodDuration = dayjs.duration(period.duration).asDays()
+  let periodDurationType: 'd' | 'm' | 'h' = 'd'
   const periodPercentage =
     (dayjs().diff(period.startTime) / period.duration) * 100
-  const currentDay = dayjs().diff(period.startTime, 'days')
   const daysLeft = dayjs(period.endTime).diff(dayjs(), 'days')
   const hoursLeft = dayjs(period.endTime).diff(dayjs(), 'hours') % 24
 
+  if (periodDuration < 1) {
+    periodDuration = dayjs.duration(period.duration).asHours()
+    periodDurationType = 'h'
+    if (periodDuration < 1) {
+      periodDuration = dayjs.duration(period.duration).asMinutes()
+      periodDurationType = 'm'
+    }
+  }
+  const currentDay = Math.min(
+    dayjs().diff(period.startTime, periodDurationType),
+    periodDuration
+  )
+
   return {
     duration: periodDuration,
+    durationType: periodDurationType,
     percentage: periodPercentage,
     currentDayElapsed: currentDay,
     daysLeft,
@@ -156,8 +195,14 @@ function StatusProgressBar({
   periodData: ProposalDecisionPeriod | ProposalConfirmationPeriod | null
 }) {
   if (!periodData || !('startTime' in periodData)) return null
-  const { currentDayElapsed, duration, percentage, daysLeft, hoursLeft } =
-    getProposalPeriodStatus(periodData)
+  const {
+    currentDayElapsed,
+    duration,
+    durationType,
+    percentage,
+    daysLeft,
+    hoursLeft,
+  } = getProposalPeriodStatus(periodData)
   const percentageFixed = parseInt(percentage.toString())
 
   return (
@@ -166,7 +211,8 @@ function StatusProgressBar({
         <span className='text-text-muted'>{title}</span>
         <span>
           <span className='text-text-muted'>{currentDayElapsed} / </span>
-          {duration}d
+          {duration}
+          {durationType}
         </span>
       </div>
       <PopOver
@@ -178,7 +224,9 @@ function StatusProgressBar({
           <div
             className='grid h-1.5 w-full rounded-full bg-background-lightest'
             style={{
-              gridTemplateColumns: `${percentage}fr ${100 - percentageFixed}fr`,
+              gridTemplateColumns: `${percentageFixed}fr ${
+                100 - percentageFixed
+              }fr`,
             }}
           >
             <div className='h-full rounded-full bg-background-primary' />