wording to encourage use of Starred Messages

guardian · Nov 3, 2023 · c583a52 · c583a52
1 parent b47fde1
commit c583a52
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 12 deletions.
diff --git a/client/src/app.tsx b/client/src/app.tsx
@@ -364,7 +364,7 @@ export const PinBoardApp = ({
 
   const hasApolloAuthError = useReactiveVar(hasApolloAuthErrorVar);
 
-  const [starredMessages, setStarredMessages] = useState<Item[]>([]);
+  const [maybeStarredMessages, setMaybeStarredMessages] = useState<Item[]>();
   const [maybeScrollToItem, setMaybeScrollToItem] =
     useState<(itemId: string) => void>();
 
@@ -391,7 +391,7 @@ export const PinBoardApp = ({
           }
           hasEverUsedTour={me?.hasEverUsedTour}
           visitTourStep={visitTourStep}
-          setStarredMessages={setStarredMessages}
+          setStarredMessages={setMaybeStarredMessages}
           setMaybeScrollToItem={setMaybeScrollToItem}
         >
           <TourStateProvider>
@@ -451,7 +451,7 @@ export const PinBoardApp = ({
             {maybeStarredMessagesArea && (
               <StarredMessagesPortal
                 node={maybeStarredMessagesArea}
-                starredMessages={starredMessages}
+                maybeStarredMessages={maybeStarredMessages}
                 userLookup={userLookup}
                 maybeScrollToItem={maybeScrollToItem}
               />

diff --git a/client/src/starred/starredMessages.tsx b/client/src/starred/starredMessages.tsx
@@ -9,6 +9,7 @@ import { agateSans } from "../../fontNormaliser";
 import { neutral, space } from "@guardian/source-foundations";
 import { pinboard } from "../../colours";
 import { useGlobalStateContext } from "../globalState";
+import { SvgStar } from "@guardian/source-react-components";
 
 export const STARRED_MESSAGES_HTML_TAG = "pinboard-starred-messages";
 
@@ -21,15 +22,13 @@ const StarredItemDisplay = ({
   userLookup: UserLookup;
   maybeScrollToItem: ((itemId: string) => void) | undefined;
 }) => {
-  const { setIsExpanded, setActiveTab } = useGlobalStateContext();
   const user = userLookup?.[item.userEmail];
   const userDisplayName = user
     ? `${user.firstName} ${user.lastName}`
     : item.userEmail;
   return (
     <div
       css={css`
-        ${agateSans.xsmall()};
         display: flex;
         align-items: flex-end;
         gap: ${space[1]}px;
@@ -47,8 +46,6 @@ const StarredItemDisplay = ({
         ((event) => {
           event.stopPropagation();
           event.preventDefault();
-          setIsExpanded(true);
-          setActiveTab("chat");
           setTimeout(() => maybeScrollToItem(item.id), 250);
         })
       }
@@ -70,32 +67,59 @@ const StarredItemDisplay = ({
 };
 
 interface StarredMessagesProps {
-  starredMessages: Item[];
+  maybeStarredMessages: Item[] | undefined;
   userLookup: UserLookup;
   maybeScrollToItem: ((itemId: string) => void) | undefined;
 }
 
 const StarredMessages = ({
-  starredMessages,
+  maybeStarredMessages,
   userLookup,
   maybeScrollToItem,
 }: StarredMessagesProps) => {
-  return starredMessages.length === 0 ? null : (
+  const { setIsExpanded, setActiveTab } = useGlobalStateContext();
+  return !maybeStarredMessages ? null : (
     <root.div>
       <div
         css={css`
+          ${agateSans.xsmall()};
           outline: 15px solid ${pinboard[800]};
           border-radius: 6px;
           background-color: ${pinboard[800]};
           margin-bottom: 20px;
         `}
       >
-        {starredMessages.map((item) => (
+        {maybeStarredMessages.length === 0 && (
+          <span
+            css={css`
+              cursor: pointer;
+            `}
+            onClick={() => setIsExpanded(true)}
+          >
+            <strong>
+              If you need to leave an important message please use Pinboard
+              &apos;Starred Messages&apos; rather than notes.{" "}
+            </strong>
+            <br />
+            Click here to open Pinboard, then simply send a message and then
+            click the <SvgStar size="xsmall" /> to the left of your message. You
+            can also star other&apos;s messages if you think they&apos;re
+            important.
+          </span>
+        )}
+        {maybeStarredMessages.map((item) => (
           <StarredItemDisplay
             key={item.id}
             item={item}
             userLookup={userLookup}
-            maybeScrollToItem={maybeScrollToItem}
+            maybeScrollToItem={
+              maybeScrollToItem &&
+              ((itemId: string) => {
+                setIsExpanded(true);
+                setActiveTab("chat");
+                maybeScrollToItem(itemId);
+              })
+            }
           />
         ))}
       </div>