fix: Add indicator of starred status when viewing a document (#1785)

* fix: Add indicator of starred status when viewing a document
closes #461

* fix: Account for shared document

app/components/DocumentListItem.js

@@ -1,10 +1,10 @@
 // @flow
 import { observer } from "mobx-react";
-import { StarredIcon, PlusIcon } from "outline-icons";
+import { PlusIcon } from "outline-icons";
 import * as React from "react";
 import { useTranslation } from "react-i18next";
 import { Link, useHistory } from "react-router-dom";
-import styled, { css, withTheme } from "styled-components";
+import styled, { css } from "styled-components";
 import Document from "models/Document";
 import Badge from "components/Badge";
 import Button from "components/Button";
@@ -12,6 +12,7 @@ import DocumentMeta from "components/DocumentMeta";
 import EventBoundary from "components/EventBoundary";
 import Flex from "components/Flex";
 import Highlight from "components/Highlight";
+import StarButton, { AnimatedStar } from "components/Star";
 import Tooltip from "components/Tooltip";
 import useCurrentUser from "hooks/useCurrentUser";
 import DocumentMenu from "menus/DocumentMenu";
@@ -52,24 +53,6 @@ function DocumentListItem(props: Props) {
     context,
   } = props;
 
-  const handleStar = React.useCallback(
-    (ev: SyntheticEvent<>) => {
-      ev.preventDefault();
-      ev.stopPropagation();
-      document.star();
-    },
-    [document]
-  );
-
-  const handleUnstar = React.useCallback(
-    (ev: SyntheticEvent<>) => {
-      ev.preventDefault();
-      ev.stopPropagation();
-      document.unstar();
-    },
-    [document]
-  );
-
   const handleNewFromTemplate = React.useCallback(
     (ev: SyntheticEvent<>) => {
       ev.preventDefault();
@@ -90,7 +73,8 @@ function DocumentListItem(props: Props) {
 
   return (
     <DocumentLink
-      menuOpen={menuOpen}
+      $isStarred={document.isStarred}
+      $menuOpen={menuOpen}
       to={{
         pathname: document.url,
         state: { title: document.titleWithDefault },
@@ -103,11 +87,7 @@ function DocumentListItem(props: Props) {
         )}
         {!document.isDraft && !document.isArchived && !document.isTemplate && (
           <Actions>
-            {document.isStarred ? (
-              <StyledStar onClick={handleUnstar} solid />
-            ) : (
-              <StyledStar onClick={handleStar} />
-            )}
+            <StarButton document={document} />
           </Actions>
         )}
         {document.isDraft && showDraft && (
@@ -157,21 +137,6 @@ function DocumentListItem(props: Props) {
   );
 }
 
-const StyledStar = withTheme(styled(({ solid, theme, ...props }) => (
-  <StarredIcon color={theme.text} {...props} />
-))`
-  flex-shrink: 0;
-  opacity: ${(props) => (props.solid ? "1 !important" : 0)};
-  transition: all 100ms ease-in-out;
-
-  &:hover {
-    transform: scale(1.1);
-  }
-  &:active {
-    transform: scale(0.95);
-  }
-`);
-
 const SecondaryActions = styled(Flex)`
   align-items: center;
   position: absolute;
@@ -195,6 +160,10 @@ const DocumentLink = styled(Link)`
     opacity: 0;
   }
 
+  ${AnimatedStar} {
+    opacity: ${(props) => (props.$isStarred ? "1 !important" : 0)};
+  }
+
   &:hover,
   &:active,
   &:focus {
@@ -204,7 +173,7 @@ const DocumentLink = styled(Link)`
       opacity: 1;
     }
 
-    ${StyledStar} {
+    ${AnimatedStar} {
       opacity: 0.5;
 
       &:hover {
@@ -214,7 +183,7 @@ const DocumentLink = styled(Link)`
   }
 
   ${(props) =>
-    props.menuOpen &&
+    props.$menuOpen &&
     css`
       background: ${(props) => props.theme.listItemHoverBackground};
 
@@ -222,7 +191,7 @@ const DocumentLink = styled(Link)`
         opacity: 1;
       }
 
-      ${StyledStar} {
+      ${AnimatedStar} {
         opacity: 0.5;
       }
     `}

app/components/NudeButton.js

@@ -3,8 +3,8 @@ import * as React from "react";
 import styled from "styled-components";
 
 const Button = styled.button`
-  width: 24px;
-  height: 24px;
+  width: ${(props) => props.size}px;
+  height: ${(props) => props.size}px;
   background: none;
   border-radius: 4px;
   line-height: 0;
@@ -14,6 +14,6 @@ const Button = styled.button`
   user-select: none;
 `;
 
-export default React.forwardRef<any, typeof Button>((props, ref) => (
-  <Button {...props} ref={ref} />
-));
+export default React.forwardRef<any, typeof Button>(
+  ({ size = 24, ...props }, ref) => <Button size={size} {...props} ref={ref} />
+);

app/components/Star.js

@@ -0,0 +1,59 @@
+// @flow
+import { StarredIcon } from "outline-icons";
+import * as React from "react";
+import styled from "styled-components";
+import Document from "models/Document";
+import NudeButton from "./NudeButton";
+
+type Props = {|
+  document: Document,
+  size?: number,
+|};
+
+function Star({ size, document, ...rest }: Props) {
+  const handleClick = React.useCallback(
+    (ev: SyntheticEvent<>) => {
+      ev.preventDefault();
+      ev.stopPropagation();
+
+      if (document.isStarred) {
+        document.unstar();
+      } else {
+        document.star();
+      }
+    },
+    [document]
+  );
+
+  if (!document) {
+    return null;
+  }
+
+  return (
+    <Button onClick={handleClick} size={size} {...rest}>
+      <AnimatedStar
+        solid={document.isStarred}
+        size={size}
+        color="currentColor"
+      />
+    </Button>
+  );
+}
+
+const Button = styled(NudeButton)`
+  color: ${(props) => props.theme.text};
+`;
+
+export const AnimatedStar = styled(StarredIcon)`
+  flex-shrink: 0;
+  transition: all 100ms ease-in-out;
+
+  &:hover {
+    transform: scale(1.1);
+  }
+  &:active {
+    transform: scale(0.95);
+  }
+`;
+
+export default Star;