Add starred controls to UI

Co-Authored-By: Tom Richards <19289579+twrichards@users.noreply.github.com>

Author: frederickobrien

client/src/app.tsx

@@ -45,10 +45,7 @@ import { getAgateFontFaceIfApplicable } from "../fontNormaliser";
 import { Global } from "@emotion/react";
 import { TourStateProvider } from "./tour/tourState";
 import { demoMentionableUsers, demoUser } from "./tour/tourConstants";
-import {
-  STARRED_MESSAGES_HTML_TAG,
-  StarredMessagesPortal,
-} from "./starred/starredMessages";
+import { STARRED_MESSAGES_HTML_TAG } from "./starred/starredMessages";
 
 const PRESELECT_PINBOARD_HTML_TAG = "pinboard-preselect";
 const PRESET_UNREAD_NOTIFICATIONS_COUNT_HTML_TAG = "pinboard-bubble-preset";

client/src/itemDisplay.tsx

@@ -24,6 +24,10 @@ import Pencil from "../icons/pencil.svg";
 import { ITEM_HOVER_MENU_CLASS_NAME, ItemHoverMenu } from "./itemHoverMenu";
 import { EditItem } from "./editItem";
 import { Reply } from "./reply";
+import {
+  StarredControl,
+  STARRED_CONTROL_CLASS_NAME,
+} from "./starred/starredControl";
 
 interface ItemDisplayProps {
   item: Item | PendingItem;
@@ -107,10 +111,16 @@ export const ItemDisplay = ({
         ${agateSans.small({ lineHeight: "tight" })};
         color: ${palette.neutral[7]};
         overflow-wrap: anywhere;
+        .${STARRED_CONTROL_CLASS_NAME} {
+          display: ${item.isStarred ? "block" : "none"};
+        }
         &:hover {
           .${ITEM_HOVER_MENU_CLASS_NAME} {
             display: flex;
           }
+          .${STARRED_CONTROL_CLASS_NAME} {
+            display: block;
+          }
         }
       `}
     >
@@ -140,6 +150,15 @@ export const ItemDisplay = ({
           </React.Fragment>
         )}
       </div>
+      <div
+        css={css`
+          position: absolute;
+          margin-top: 5px;
+          margin-left: 2px;
+        `}
+      >
+        <StarredControl itemId={item.id} isStarred={item.isStarred} />
+      </div>
       <div
         css={css`
           margin-left: ${space[9] - 4}px;

client/src/itemHoverMenu.tsx

@@ -1,15 +1,14 @@
 import { css } from "@emotion/react";
 import React, { useContext, useEffect } from "react";
 import { palette, space } from "@guardian/source-foundations";
-import { SvgStar, SvgStarOutline } from "@guardian/source-react-components";
 import ReplyIcon from "../icons/reply.svg";
 import PencilIcon from "../icons/pencil.svg";
 import BinIcon from "../icons/bin.svg";
 import { useConfirmModal } from "./modal";
 import { scrollbarsCss } from "./styling";
 import { composer } from "../colours";
 import { useMutation } from "@apollo/client";
-import { gqlDeleteItem, gqlSetIsStarred } from "../gql";
+import { gqlDeleteItem } from "../gql";
 import { Item } from "shared/graphql/graphql";
 import { PINBOARD_TELEMETRY_TYPE, TelemetryContext } from "./types/Telemetry";
 import { useTourProgress } from "./tour/tourState";
@@ -56,12 +55,6 @@ export const ItemHoverMenu = ({
     </React.Fragment>
   );
 
-  const isStarred = item.isStarred;
-  const [setIsStarred] = useMutation(gqlSetIsStarred);
-  const toggleIsStarred = () => {
-    setIsStarred({ variables: { itemId: item.id, isStarred: !isStarred } });
-  };
-
   useEffect(
     () => setMaybeDeleteItemModalElement(deleteConfirmModalElement),
     [deleteConfirmModalElement]
@@ -145,12 +138,6 @@ export const ItemHoverMenu = ({
         }
       `}
     >
-      <button
-        onClick={toggleIsStarred}
-        title={isStarred ? "Unstar" : "Star"}
-      >
-        {isStarred ? <SvgStar /> : <SvgStarOutline />}
-      </button>
       <button onClick={() => setMaybeReplyingToItemId(item.id)} title="Reply">
         <ReplyIcon />
       </button>

client/src/scrollableItems.tsx

@@ -301,6 +301,7 @@ export const ScrollableItems = ({
               item.claimedByEmail,
               item.editHistory,
               item.deletedAt,
+              item.isStarred,
               "pending" in item,
               userLookup,
               lastItemSeenByUsersForItemIDLookup,

client/src/starred/starredControl.tsx

@@ -0,0 +1,41 @@
+import { useMutation } from "@apollo/client";
+import { css } from "@emotion/react";
+import { neutral } from "@guardian/source-foundations";
+import { SvgStar, SvgStarOutline } from "@guardian/source-react-components";
+import React from "react";
+import { gqlSetIsStarred } from "../../gql";
+
+export const STARRED_CONTROL_CLASS_NAME = "starred-control";
+
+interface StarredControlProps {
+  itemId: string;
+  isStarred: boolean;
+}
+
+export const StarredControl = ({ itemId, isStarred }: StarredControlProps) => {
+  const [setIsStarred] = useMutation(gqlSetIsStarred);
+  const toggleIsStarred = () => {
+    setIsStarred({ variables: { itemId, isStarred: !isStarred } });
+  };
+  return (
+    <button
+      onClick={toggleIsStarred}
+      title={isStarred ? "Unstar" : "Star"}
+      className={STARRED_CONTROL_CLASS_NAME}
+      css={css`
+        // :hover in ItemDisplay controls display
+        border-radius: 50%;
+        border: none;
+        width: 24px;
+        height: 24px;
+        padding: 2px;
+        cursor: pointer;
+        &:hover {
+          background-color: ${neutral[86]};
+        }
+      `}
+    >
+      {isStarred ? <SvgStar /> : <SvgStarOutline />}
+    </button>
+  );
+};