feat: Projects update view

src/components/Banner/Banner.css

@@ -13,6 +13,10 @@
   background-color: var(--blue-200);
 }
 
+.Banner--red {
+  background-color: var(--red-200);
+}
+
 .Banner--purple {
   background: var(--alpha-purple-200);
 }
@@ -49,6 +53,10 @@
   background-color: var(--blue-800) !important;
 }
 
+.Banner__Button--red {
+  background-color: var(--red-800) !important;
+}
+
 .Banner__Button--purple {
   background-color: var(--iris-100) !important;
 }

src/components/Banner/Banner.tsx

@@ -9,18 +9,19 @@ import Text from '../Common/Typography/Text'
 
 import './Banner.css'
 
-type BannerColor = 'blue' | 'purple'
+type BannerColor = 'blue' | 'purple' | 'red'
 
 export type BannerProps = {
   isVisible: boolean
   title: string
   description: string
   bannerHideKey: string
-  icon: React.ReactNode
+  icon?: React.ReactNode
   buttonLabel: string
   onButtonClick?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void
   buttonHref?: string
   color?: BannerColor
+  isClosable?: boolean
 }
 
 function Banner({
@@ -33,6 +34,7 @@ function Banner({
   onButtonClick,
   buttonHref,
   color = 'blue',
+  isClosable = true,
 }: BannerProps) {
   const [show, setShow] = useState(isVisible)
 
@@ -54,7 +56,7 @@ function Banner({
     <>
       {show && (
         <div className={classNames('Banner', `Banner--${color}`)}>
-          <div className="Banner__Icon">{icon}</div>
+          {icon && <div className="Banner__Icon">{icon}</div>}
           <div className="Banner__Content">
             <div className="Banner__Description">
               <Text className="Banner__Text" weight="medium" size="lg">
@@ -76,7 +78,7 @@ function Banner({
               </Button>
             </div>
           </div>
-          <Close small onClick={handleClose} />
+          {isClosable && <Close small onClick={handleClose} />}
         </div>
       )}
     </>

src/components/Icon/LateClock.tsx

@@ -0,0 +1,27 @@
+function LateClock({ className, size = '12' }: { size?: string; className?: string }) {
+  return (
+    <svg
+      className={className}
+      width={size}
+      height={size}
+      viewBox="0 0 12 12"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <circle cx="6" cy="6" r="6" fill="white" />
+      <g clipPath="url(#clip0_16349_2225)">
+        <path
+          d="M6 0C7.5913 0 9.11742 0.632141 10.2426 1.75736C11.3679 2.88258 12 4.4087 12 6C12 7.5913 11.3679 9.11742 10.2426 10.2426C9.11742 11.3679 7.5913 12 6 12C4.4087 12 2.88258 11.3679 1.75736 10.2426C0.632141 9.11742 0 7.5913 0 6C0 4.4087 0.632141 2.88258 1.75736 1.75736C2.88258 0.632141 4.4087 0 6 0ZM5.4375 2.8125V6C5.4375 6.1875 5.53125 6.36328 5.68828 6.46875L7.93828 7.96875C8.19609 8.14219 8.54531 8.07187 8.71875 7.81172C8.89219 7.55156 8.82187 7.20469 8.56172 7.03125L6.5625 5.7V2.8125C6.5625 2.50078 6.31172 2.25 6 2.25C5.68828 2.25 5.4375 2.50078 5.4375 2.8125Z"
+          fill="#736E7D"
+        />
+      </g>
+      <defs>
+        <clipPath id="clip0_16349_2225">
+          <rect width={size} height={size} fill="white" />
+        </clipPath>
+      </defs>
+    </svg>
+  )
+}
+
+export default LateClock

src/components/Icon/ThumbDownCircle.tsx

@@ -0,0 +1,20 @@
+function ThumbDownCircle({ className, size = '32' }: { size?: string; className?: string }) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+      width={size}
+      height={size}
+      viewBox="0 0 40 40"
+      fill="none"
+    >
+      <circle cx="20" cy="20" r="20" fill="#D80027" fillOpacity="0.16" />
+      <path
+        d="M22.6484 30.6492C21.1562 31.0749 19.5977 30.2117 19.1719 28.7195L18.9492 27.9382C18.8047 27.4304 18.543 26.9617 18.1875 26.571L16.1836 24.3679C15.8359 23.9851 15.8633 23.3913 16.2461 23.0437C16.6289 22.696 17.2227 22.7234 17.5703 23.1062L19.5742 25.3093C20.125 25.9148 20.5273 26.6374 20.75 27.4226L20.9727 28.2038C21.1133 28.6999 21.6328 28.989 22.1328 28.8484C22.6328 28.7077 22.918 28.1882 22.7773 27.6882L22.5547 26.907C22.332 26.1296 21.9805 25.3952 21.5156 24.739C21.3125 24.4538 21.2891 24.0788 21.4492 23.7663C21.6094 23.4538 21.9297 23.2585 22.2812 23.2585H27.5C27.8438 23.2585 28.125 22.9773 28.125 22.6335C28.125 22.3679 27.957 22.1374 27.7188 22.0476C27.4297 21.9382 27.2109 21.696 27.1367 21.3952C27.0625 21.0945 27.1406 20.7781 27.3438 20.5476C27.4414 20.4382 27.5 20.2937 27.5 20.1335C27.5 19.8288 27.2812 19.5749 26.9922 19.5202C26.6719 19.4577 26.4023 19.2351 26.2891 18.9265C26.1758 18.6179 26.2266 18.2742 26.4297 18.0163C26.5117 17.9109 26.5625 17.7781 26.5625 17.6296C26.5625 17.3679 26.3984 17.1374 26.1641 17.0476C25.7148 16.8718 25.4727 16.3874 25.6016 15.9226C25.6172 15.8718 25.625 15.8132 25.625 15.7546C25.625 15.4109 25.3438 15.1296 25 15.1296H21.1914C20.6992 15.1296 20.2148 15.2742 19.8047 15.5476L17.3945 17.1531C16.9648 17.4421 16.3828 17.3249 16.0938 16.8913C15.8047 16.4577 15.9219 15.8796 16.3555 15.5906L18.7656 13.9851C19.4844 13.5046 20.3281 13.2507 21.1914 13.2507H25C26.3555 13.2507 27.457 14.3288 27.5 15.6726C28.0703 16.1296 28.4375 16.8327 28.4375 17.6257C28.4375 17.8015 28.418 17.9695 28.3867 18.1335C28.9883 18.5906 29.375 19.3132 29.375 20.1257C29.375 20.3796 29.3359 20.6257 29.2656 20.8562C29.7188 21.3171 30 21.9421 30 22.6335C30 24.0124 28.8828 25.1335 27.5 25.1335H23.8945C24.0781 25.5398 24.2344 25.9617 24.3555 26.3913L24.5781 27.1726C25.0039 28.6648 24.1406 30.2234 22.6484 30.6492ZM11.25 24.5085C10.5586 24.5085 10 23.9499 10 23.2585V14.5085C10 13.8171 10.5586 13.2585 11.25 13.2585H13.75C14.4414 13.2585 15 13.8171 15 14.5085V23.2585C15 23.9499 14.4414 24.5085 13.75 24.5085H11.25Z"
+        fill="#D80027"
+      />
+    </svg>
+  )
+}
+
+export default ThumbDownCircle

src/components/Icon/ThumbUpCircle.tsx

@@ -0,0 +1,20 @@
+function ThumbUpCircle({ className, size = '32' }: { size?: string; className?: string }) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+      width={size}
+      height={size}
+      viewBox="0 0 40 40"
+      fill="none"
+    >
+      <circle cx="20" cy="20" r="20" fill="#E1F3D6" />
+      <path
+        d="M22.6484 11.3594C21.1562 10.9336 19.5977 11.7969 19.1719 13.2891L18.9492 14.0703C18.8047 14.5781 18.543 15.0469 18.1875 15.4375L16.1836 17.6406C15.8359 18.0234 15.8633 18.6172 16.2461 18.9648C16.6289 19.3125 17.2227 19.2852 17.5703 18.9023L19.5742 16.6992C20.125 16.0938 20.5273 15.3711 20.75 14.5859L20.9727 13.8047C21.1133 13.3086 21.6328 13.0195 22.1328 13.1602C22.6328 13.3008 22.918 13.8203 22.7773 14.3203L22.5547 15.1016C22.332 15.8789 21.9805 16.6133 21.5156 17.2695C21.3125 17.5547 21.2891 17.9297 21.4492 18.2422C21.6094 18.5547 21.9297 18.75 22.2812 18.75H27.5C27.8438 18.75 28.125 19.0312 28.125 19.375C28.125 19.6406 27.957 19.8711 27.7188 19.9609C27.4297 20.0703 27.2109 20.3125 27.1367 20.6133C27.0625 20.9141 27.1406 21.2305 27.3438 21.4609C27.4414 21.5703 27.5 21.7148 27.5 21.875C27.5 22.1797 27.2812 22.4336 26.9922 22.4883C26.6719 22.5508 26.4023 22.7734 26.2891 23.082C26.1758 23.3906 26.2266 23.7344 26.4297 23.9922C26.5117 24.0977 26.5625 24.2305 26.5625 24.3789C26.5625 24.6406 26.3984 24.8711 26.1641 24.9609C25.7148 25.1367 25.4727 25.6211 25.6016 26.0859C25.6172 26.1367 25.625 26.1953 25.625 26.2539C25.625 26.5977 25.3438 26.8789 25 26.8789H21.1914C20.6992 26.8789 20.2148 26.7344 19.8047 26.4609L17.3945 24.8555C16.9648 24.5664 16.3828 24.6836 16.0938 25.1172C15.8047 25.5508 15.9219 26.1289 16.3555 26.418L18.7656 28.0234C19.4844 28.5039 20.3281 28.7578 21.1914 28.7578H25C26.3555 28.7578 27.457 27.6797 27.5 26.3359C28.0703 25.8789 28.4375 25.1758 28.4375 24.3828C28.4375 24.207 28.418 24.0391 28.3867 23.875C28.9883 23.418 29.375 22.6953 29.375 21.8828C29.375 21.6289 29.3359 21.3828 29.2656 21.1523C29.7188 20.6914 30 20.0664 30 19.375C30 17.9961 28.8828 16.875 27.5 16.875H23.8945C24.0781 16.4688 24.2344 16.0469 24.3555 15.6172L24.5781 14.8359C25.0039 13.3438 24.1406 11.7852 22.6484 11.3594ZM11.25 17.5C10.5586 17.5 10 18.0586 10 18.75V27.5C10 28.1914 10.5586 28.75 11.25 28.75H13.75C14.4414 28.75 15 28.1914 15 27.5V18.75C15 18.0586 14.4414 17.5 13.75 17.5H11.25Z"
+        fill="#44B600"
+      />
+    </svg>
+  )
+}
+
+export default ThumbUpCircle

src/components/Icon/Warning.tsx

@@ -1,21 +1,18 @@
 function Warning({ className, size = '32' }: { size?: string; className?: string }) {
   return (
     <svg
-      xmlns="http://www.w3.org/2000/svg"
+      className={className}
       width={size}
       height={size}
+      viewBox="0 0 40 40"
       fill="none"
-      viewBox="0 0 32 32"
-      aria-hidden="true"
-      className={className}
+      xmlns="http://www.w3.org/2000/svg"
     >
-      <circle cx="16" cy="16" r="16" fill="#FFBC5B"></circle>
+      <circle cx="20" cy="20" r="20" fill="#FFE9DF" />
       <path
-        fill="#fff"
-        fillRule="evenodd"
-        d="M18 9a2 2 0 10-4 0v8a2 2 0 104 0V9zm-2 16a2 2 0 100-4 2 2 0 000 4z"
-        clipRule="evenodd"
-      ></path>
+        d="M21.75 12.5C21.75 11.8086 21.1914 11.25 20.5 11.25C19.8086 11.25 19.25 11.8086 19.25 12.5V22.5C19.25 23.1914 19.8086 23.75 20.5 23.75C21.1914 23.75 21.75 23.1914 21.75 22.5V12.5ZM20.5 28.75C20.9144 28.75 21.3118 28.5854 21.6049 28.2924C21.8979 27.9993 22.0625 27.6019 22.0625 27.1875C22.0625 26.7731 21.8979 26.3757 21.6049 26.0826C21.3118 25.7896 20.9144 25.625 20.5 25.625C20.0856 25.625 19.6882 25.7896 19.3951 26.0826C19.1021 26.3757 18.9375 26.7731 18.9375 27.1875C18.9375 27.6019 19.1021 27.9993 19.3951 28.2924C19.6882 28.5854 20.0856 28.75 20.5 28.75Z"
+        fill="#FF7439"
+      />
     </svg>
   )
 }

src/components/Projects/ProjectCard/ProjectCard.tsx

@@ -6,7 +6,7 @@ import { ProposalProjectWithUpdate } from '../../../types/proposals'
 import locations from '../../../utils/locations'
 import { isProposalInCliffPeriod } from '../../../utils/proposal'
 import Link from '../../Common/Typography/Link'
-import ProposalUpdate from '../../Proposal/Update/ProposalUpdate'
+import ProjectUpdateCard from '../../Proposal/Update/ProjectUpdateCard'
 
 import CliffProgress from './CliffProgress'
 import './ProjectCard.css'
@@ -37,7 +37,7 @@ const ProjectCard = ({ project, hoverable = false }: Props) => {
         {proposalInCliffPeriod ? <CliffProgress enactedAt={enacted_at} /> : <VestingProgress project={project} />}
       </div>
       <div className="ProjectCard__UpdateContainer">
-        <ProposalUpdate proposal={project} update={update} expanded={false} index={update?.index} isLinkable={false} />
+        <ProjectUpdateCard isAllowedToPostUpdate={false} update={update} index={update?.index} isLinkable={false} />
       </div>
     </Link>
   )

src/components/Projects/ProjectSidebar.tsx

@@ -1,8 +1,12 @@
+import React, { useMemo, useState } from 'react'
+
 import useFormatMessage from '../../hooks/useFormatMessage.ts'
 import useProject from '../../hooks/useProject.ts'
 import BoxTabs from '../Common/BoxTabs'
 import GovernanceSidebar from '../Sidebar/GovernanceSidebar'
 
+import UpdatesTabView from './Updates/UpdatesTabView.tsx'
+
 import ProjectGeneralInfo from './ProjectGeneralInfo.tsx'
 import ProjectSheetTitle from './ProjectSheetTitle.tsx'
 import './ProjectSidebar.css'
@@ -17,6 +21,29 @@ function ProjectSidebar({ projectId, isSidebarVisible, onClose }: Props) {
   const { project, isLoadingProject } = useProject(projectId)
   const t = useFormatMessage()
 
+  const [viewIdx, setViewIdx] = useState(0)
+
+  const MENU_ITEMS: { labelKey: string; view: React.ReactNode }[] = useMemo(
+    () => [
+      {
+        labelKey: 'page.project_sidebar.general_info.title',
+        view: project && <ProjectGeneralInfo project={project} />,
+      },
+      { labelKey: 'page.project_sidebar.milestones.title', view: <></> },
+      {
+        labelKey: 'page.project_sidebar.updates.title',
+        view: (
+          <UpdatesTabView
+            proposalId={project?.proposal_id || ''}
+            allowedAddresses={new Set([project?.author || '', ...(project?.coauthors || [])])}
+          />
+        ),
+      },
+      { labelKey: 'page.project_sidebar.activity.title', view: <></> },
+    ],
+    [project]
+  )
+
   return (
     <GovernanceSidebar
       className="ProjectSidebar"
@@ -30,13 +57,14 @@ function ProjectSidebar({ projectId, isSidebarVisible, onClose }: Props) {
 
       <BoxTabs className="ProjectSidebar__Tabs">
         <BoxTabs.Left>
-          <BoxTabs.Tab active={true}>{t('project_sheet.general_info.title')}</BoxTabs.Tab>
-          <BoxTabs.Tab active={false}>{t('project_sheet.milestones.title')}</BoxTabs.Tab>
-          <BoxTabs.Tab active={false}>{t('project_sheet.updates.title')}</BoxTabs.Tab>
-          <BoxTabs.Tab active={false}>{t('project_sheet.activity.title')}</BoxTabs.Tab>
+          {MENU_ITEMS.map((item, idx) => (
+            <BoxTabs.Tab key={idx} active={idx === viewIdx} onClick={() => setViewIdx(idx)}>
+              {t(item.labelKey)}
+            </BoxTabs.Tab>
+          ))}
         </BoxTabs.Left>
       </BoxTabs>
-      {project && <ProjectGeneralInfo project={project} />}
+      <div className="ProjectSidebar__ContentContainer">{MENU_ITEMS[viewIdx].view}</div>
     </GovernanceSidebar>
   )
 }

src/components/Projects/Updates/PostUpdateBanner.tsx

@@ -0,0 +1,27 @@
+import useFormatMessage from '../../../hooks/useFormatMessage'
+import Banner from '../../Banner/Banner'
+
+interface Props {
+  updateNumber: number
+  dueDays: number
+  onClick: () => void
+}
+
+function PostUpdateBanner({ updateNumber, dueDays, onClick }: Props) {
+  const t = useFormatMessage()
+
+  return (
+    <Banner
+      isVisible
+      title={t('page.project_sidebar.updates.banner.title', { number: updateNumber, days: dueDays })}
+      description={t('page.project_sidebar.updates.banner.description')}
+      buttonLabel={t('page.project_sidebar.updates.banner.button')}
+      bannerHideKey=""
+      isClosable={false}
+      color="red"
+      onButtonClick={onClick}
+    />
+  )
+}
+
+export default PostUpdateBanner