feat(react): pinned message state

packages/status-react/src/icons/unpin-icon.tsx

@@ -0,0 +1,29 @@
+import React from 'react'
+
+export const UnpinIcon = (props: React.SVGProps<SVGSVGElement>) => {
+  return (
+    <svg
+      width="22"
+      height="22"
+      viewBox="0 0 22 22"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M3.08929 1.80598C2.8206 1.5377 2.3853 1.53802 2.11701 1.80671C1.84873 2.0754 1.84906 2.5107 2.11774 2.77898L5.43135 6.08761C5.53962 6.19572 5.58546 6.35054 5.56251 6.50182C5.52137 6.77305 5.50004 7.05078 5.50004 7.33348C5.50004 9.99887 7.39603 12.2214 9.91289 12.7261C10.1396 12.7715 10.3125 12.9645 10.3125 13.1957V19.2502C10.3125 19.6298 10.6203 19.9377 11 19.9377C11.3797 19.9377 11.6875 19.6298 11.6875 19.2502V13.1957C11.6875 13.0519 11.7544 12.923 11.8595 12.835C11.9785 12.7355 12.1473 12.7935 12.2571 12.9031L18.6209 19.2574C18.8896 19.5256 19.3249 19.5253 19.5932 19.2566C19.8614 18.9879 19.8611 18.5526 19.5924 18.2844L13.5231 12.2241C13.5224 12.2234 13.5226 12.2222 13.5235 12.2217C13.5244 12.2213 13.5246 12.22 13.5238 12.2193L12.4873 11.1843C12.4864 11.1834 12.485 11.1831 12.4838 11.1836C12.4826 11.1841 12.4812 11.1838 12.4802 11.1828L7.14846 5.85906C7.14754 5.85814 7.14724 5.85676 7.14771 5.85553C7.14818 5.85431 7.14789 5.85293 7.14696 5.852L6.11042 4.81702C6.1097 4.8163 6.10848 4.81649 6.10801 4.81739C6.10754 4.8183 6.10633 4.81849 6.1056 4.81777L3.08929 1.80598ZM9.9675 10.617C10.2639 10.9129 10.042 11.3686 9.64632 11.2312C8.45906 10.8189 7.51835 9.87948 7.10433 8.69303C6.96635 8.2976 7.42173 8.075 7.71809 8.37092L9.9675 10.617Z"
+        fill="currentColor"
+      />
+      <path
+        d="M15.125 7.33348C15.125 8.31438 14.7827 9.21532 14.2109 9.9233C14.0512 10.121 14.0483 10.4113 14.2282 10.5909L14.552 10.9143C14.7306 11.0926 15.0214 11.0941 15.1852 10.9022C16.0051 9.94163 16.5 8.69536 16.5 7.33348C16.5 4.29592 14.0376 1.83348 11 1.83348C9.6352 1.83348 8.38646 2.33063 7.42505 3.15371C7.23335 3.31782 7.23537 3.60857 7.41394 3.78688L7.73781 4.11026C7.91767 4.28985 8.20791 4.28651 8.40541 4.12652C9.11412 3.55241 10.0169 3.20848 11 3.20848C13.2782 3.20848 15.125 5.05531 15.125 7.33348Z"
+        fill="currentColor"
+      />
+      <path
+        d="M13.6543 6.67765C13.6543 5.91826 13.0602 5.14166 12.3272 4.94307C11.5942 4.74448 11 5.19909 11 5.95848C11 6.71788 11.5942 7.49447 12.3272 7.69307C13.0602 7.89166 13.6543 7.43704 13.6543 6.67765Z"
+        fill="currentColor"
+      />
+    </svg>
+  )
+}

packages/status-react/src/routes/chat/chat-message.tsx

@@ -22,6 +22,7 @@ interface Props {
   reply?: 'text' | 'image' | 'image-text'
   image?: boolean
   mention?: boolean
+  pinned?: boolean
 }
 
 const MessageLink = (props: React.AnchorHTMLAttributes<HTMLAnchorElement>) => {
@@ -42,7 +43,7 @@ const MessageLink = (props: React.AnchorHTMLAttributes<HTMLAnchorElement>) => {
 }
 
 export const ChatMessage = (props: Props) => {
-  const { reply, image, mention } = props
+  const { reply, image, mention, pinned } = props
 
   const { dispatch } = useChatState()
 
@@ -50,7 +51,7 @@ export const ChatMessage = (props: Props) => {
     <>
       {reply && <MessageReply reply={reply} />}
       <ContextMenuTrigger>
-        <Wrapper mention={mention}>
+        <Wrapper mention={mention} pinned={pinned}>
           <div>
             <DropdownMenuTrigger>
               <button type="button">
@@ -150,11 +151,19 @@ export const ChatMessage = (props: Props) => {
                 <PencilIcon />
               </IconButton>
             </Tooltip>
+            {pinned ? (
+              <Tooltip label="Unpin">
+                <IconButton label="Unpin message" intent="info" color="gray">
+                  <UnpinIcon />
+                </IconButton>
+              </Tooltip>
+            ) : (
               <Tooltip label="Pin">
                 <IconButton label="Pin message" intent="info" color="gray">
                   <PinIcon />
                 </IconButton>
               </Tooltip>
+            )}
             <Tooltip label="Delete">
               <IconButton label="Delete message" intent="danger" color="gray">
                 <TrashIcon />
@@ -268,6 +277,25 @@ const Wrapper = styled('div', {
         },
       },
     },
+    pinned: {
+      true: {
+        background: '$pin-3',
+
+        '&:hover, &[data-open="true"]': {
+          background: '$pin-2',
+        },
+
+        '&::before': {
+          content: '""',
+          position: 'absolute',
+          top: 0,
+          left: 0,
+          bottom: 0,
+          width: 3,
+          background: '$pin-1',
+        },
+      },
+    },
   },
 })