fix: Double document highlight in sidebar (#2551)

* fix: Single highlighted doc when starred
closes #2544

* fix: Collection expand/collapse as navigating starred docs

app/components/Sidebar/components/CollectionLink.js

@@ -3,6 +3,7 @@ import fractionalIndex from "fractional-index";
 import { observer } from "mobx-react";
 import * as React from "react";
 import { useDrop, useDrag } from "react-dnd";
+import { useLocation } from "react-router-dom";
 import styled from "styled-components";
 import Collection from "models/Collection";
 import Document from "models/Document";
@@ -36,6 +37,7 @@ function CollectionLink({
   isDraggingAnyCollection,
   onChangeDragging,
 }: Props) {
+  const { search } = useLocation();
   const [menuOpen, handleMenuOpen, handleMenuClose] = useBoolean();
 
   const handleTitleChange = React.useCallback(
@@ -52,12 +54,17 @@ function CollectionLink({
   );
 
   React.useEffect(() => {
+    // If we're viewing a starred document through the starred menu then don't
+    // touch the expanded / collapsed state of the collections
+    if (search === "?starred") {
+      return;
+    }
     if (isDraggingAnyCollection) {
       setExpanded(false);
     } else {
       setExpanded(collection.id === ui.activeCollectionId);
     }
-  }, [isDraggingAnyCollection, collection.id, ui.activeCollectionId]);
+  }, [isDraggingAnyCollection, collection.id, ui.activeCollectionId, search]);
 
   const manualSort = collection.sort.field === "index";
   const can = policies.abilities(collection.id);

app/components/Sidebar/components/DocumentLink.js

@@ -240,6 +240,9 @@ function DocumentLink(
                     />
                   </>
                 }
+                isActive={(match, location) =>
+                  match && location.search !== "?starred"
+                }
                 isActiveDrop={isOverReparent && canDropToReparent}
                 depth={depth}
                 exact={false}

app/components/Sidebar/components/SidebarLink.js

@@ -8,7 +8,7 @@ import EventBoundary from "components/EventBoundary";
 import NavLink from "./NavLink";
 import { type Theme } from "types";
 
-type Props = {
+type Props = {|
   to?: string | Object,
   href?: string | Object,
   innerRef?: (?HTMLElement) => void,
@@ -29,7 +29,7 @@ type Props = {
   exact?: boolean,
   depth?: number,
   scrollIntoViewIfNeeded?: boolean,
-};
+|};
 
 function SidebarLink(
   {
@@ -51,6 +51,7 @@ function SidebarLink(
     match,
     className,
     scrollIntoViewIfNeeded,
+    ...rest
   }: Props,
   ref
 ) {
@@ -86,6 +87,7 @@ function SidebarLink(
         href={href}
         className={className}
         ref={ref}
+        {...rest}
       >
         {icon && <IconWrapper>{icon}</IconWrapper>}
         <Label>{label}</Label>

app/components/Sidebar/components/StarredLink.js

@@ -69,7 +69,10 @@ function StarredLink({ depth, title, to, documentId, collectionId }: Props) {
       <Relative>
         <SidebarLink
           depth={depth}
-          to={to}
+          to={`${to}?starred`}
+          isActive={(match, location) =>
+            match && location.search === "?starred"
+          }
           label={
             <>
               {hasChildDocuments && (