feat: Add ability to star collection (#3327)

* Migrations, models, commands

* ui

* Move starred hint to location state

* lint

* tsc

* refactor

* Add collection empty state in expanded sidebar

* Add empty placeholder within starred collections

* Drag and drop improves, Relative refactor

* fix: Starring untitled draft leaves empty space

* fix: Creating draft in starred collection shouldnt open main

* fix: Dupe drop cursor

* Final fixes

* fix: Canonical redirect replaces starred location state

* fix: Don't show reorder cursor at the top of collection with no permission to edit when dragging

app/scenes/Collection.tsx

@@ -23,6 +23,7 @@ import PaginatedDocumentList from "~/components/PaginatedDocumentList";
 import PinnedDocuments from "~/components/PinnedDocuments";
 import PlaceholderText from "~/components/PlaceholderText";
 import Scene from "~/components/Scene";
+import Star, { AnimatedStar } from "~/components/Star";
 import Tab from "~/components/Tab";
 import Tabs from "~/components/Tabs";
 import Tooltip from "~/components/Tooltip";
@@ -127,7 +128,7 @@ function CollectionScene() {
             <Empty collection={collection} />
           ) : (
             <>
-              <HeadingWithIcon>
+              <HeadingWithIcon $isStarred={collection.isStarred}>
                 <HeadingIcon collection={collection} size={40} expanded />
                 {collection.name}
                 {!collection.permission && (
@@ -140,6 +141,7 @@ function CollectionScene() {
                     <Badge>{t("Private")}</Badge>
                   </Tooltip>
                 )}
+                <StarButton collection={collection} size={32} />
               </HeadingWithIcon>
               <CollectionDescription collection={collection} />
 
@@ -247,10 +249,37 @@ function CollectionScene() {
   );
 }
 
-const HeadingWithIcon = styled(Heading)`
+const StarButton = styled(Star)`
+  position: relative;
+  top: 0;
+  left: 10px;
+  overflow: hidden;
+  width: 24px;
+
+  svg {
+    position: relative;
+    left: -4px;
+  }
+`;
+
+const HeadingWithIcon = styled(Heading)<{ $isStarred: boolean }>`
   display: flex;
   align-items: center;
 
+  ${AnimatedStar} {
+    opacity: ${(props) => (props.$isStarred ? "1 !important" : 0)};
+  }
+
+  &:hover {
+    ${AnimatedStar} {
+      opacity: 0.5;
+
+      &:hover {
+        opacity: 1;
+      }
+    }
+  }
+
   ${breakpoint("tablet")`
     margin-left: -40px;
   `};

app/scenes/Document/components/Document.tsx

@@ -397,6 +397,7 @@ class DocumentScene extends React.Component<Props> {
   };
 
   onChangeTitle = action((value: string) => {
+    this.title = value;
     this.props.document.title = value;
     this.updateIsDirty();
     this.autosave();
@@ -448,7 +449,12 @@ class DocumentScene extends React.Component<Props> {
     return (
       <ErrorBoundary>
         {this.props.location.pathname !== canonicalUrl && (
-          <Redirect to={canonicalUrl} />
+          <Redirect
+            to={{
+              pathname: canonicalUrl,
+              state: this.props.location.state,
+            }}
+          />
         )}
         <RegisterKeyDown trigger="m" handler={this.goToMove} />
         <RegisterKeyDown trigger="e" handler={this.goToEdit} />

app/scenes/Document/components/EditableTitle.tsx

@@ -13,7 +13,6 @@ import Document from "~/models/Document";
 import ContentEditable, { RefHandle } from "~/components/ContentEditable";
 import Star, { AnimatedStar } from "~/components/Star";
 import useEmojiWidth from "~/hooks/useEmojiWidth";
-import usePolicy from "~/hooks/usePolicy";
 import { isModKey } from "~/utils/keyboard";
 
 type Props = {
@@ -49,7 +48,6 @@ const EditableTitle = React.forwardRef(
     }: Props,
     ref: React.RefObject<RefHandle>
   ) => {
-    const can = usePolicy(document.id);
     const normalizedTitle =
       !value && readOnly ? document.titleWithDefault : value;
 
@@ -135,9 +133,7 @@ const EditableTitle = React.forwardRef(
         dir="auto"
         ref={ref}
       >
-        {(can.star || can.unstar) && starrable !== false && (
-          <StarButton document={document} size={32} />
-        )}
+        {starrable !== false && <StarButton document={document} size={32} />}
       </Title>
     );
   }

app/scenes/DocumentNew.tsx

@@ -34,7 +34,7 @@ function DocumentNew() {
           title: "",
           text: "",
         });
-        history.replace(editDocumentUrl(document));
+        history.replace(editDocumentUrl(document), location.state);
       } catch (err) {
         showToast(t("Couldn’t create the document, try again?"), {
           type: "error",