feat: Pin to home (#2880)

2021-12-30 16:54:02 -08:00
parent 5be2eb75f3
commit eb0c324da8
57 changed files with 1884 additions and 819 deletions
--- a/app/components/CollectionIcon.tsx
+++ b/app/components/CollectionIcon.tsx
@@ -10,19 +10,26 @@ type Props = {
  collection: Collection;
  expanded?: boolean;
  size?: number;
+  color?: string;
 };

-function ResolvedCollectionIcon({ collection, expanded, size }: Props) {
+function ResolvedCollectionIcon({
+  collection,
+  color: inputColor,
+  expanded,
+  size,
+}: Props) {
  const { ui } = useStores();

  // If the chosen icon color is very dark then we invert it in dark mode
  // otherwise it will be impossible to see against the dark background.
  const color =
-    ui.resolvedTheme === "dark" && collection.color !== "currentColor"
+    inputColor ||
+    (ui.resolvedTheme === "dark" && collection.color !== "currentColor"
      ? getLuminance(collection.color) > 0.09
        ? collection.color
        : "currentColor"
-      : collection.color;
+      : collection.color);

  if (collection.icon && collection.icon !== "collection") {
    try {
--- a/app/components/ContextMenu/Template.tsx
+++ b/app/components/ContextMenu/Template.tsx
@@ -1,18 +1,17 @@
 import { ExpandedIcon } from "outline-icons";
 import * as React from "react";
 import { useTranslation } from "react-i18next";
-import { Link, useLocation } from "react-router-dom";
+import { Link } from "react-router-dom";
 import {
  useMenuState,
  MenuButton,
  MenuItem as BaseMenuItem,
 } from "reakit/Menu";
 import styled from "styled-components";
-import { $Shape } from "utility-types";
 import Flex from "~/components/Flex";
 import MenuIconWrapper from "~/components/MenuIconWrapper";
 import { actionToMenuItem } from "~/actions";
-import useStores from "~/hooks/useStores";
+import useActionContext from "~/hooks/useActionContext";
 import {
  Action,
  ActionContext,
@@ -27,7 +26,7 @@ import ContextMenu from ".";

 type Props = {
  actions?: (Action | MenuSeparator | MenuHeading)[];
-  context?: $Shape<ActionContext>;
+  context?: Partial<ActionContext>;
  items?: TMenuItem[];
 };

@@ -90,20 +89,9 @@ export function filterTemplateItems(items: TMenuItem[]): TMenuItem[] {
 }

 function Template({ items, actions, context, ...menu }: Props) {
-  const { t } = useTranslation();
-  const location = useLocation();
-  const stores = useStores();
-  const { ui } = stores;
-  const ctx = {
-    t,
-    isCommandBar: false,
+  const ctx = useActionContext({
    isContextMenu: true,
-    activeCollectionId: ui.activeCollectionId,
-    activeDocumentId: ui.activeDocumentId,
-    location,
-    stores,
-    ...context,
-  };
+  });

  const templateItems = actions
    ? actions.map((item) =>
--- a/app/components/DocumentCard.tsx
+++ b/app/components/DocumentCard.tsx
@@ -0,0 +1,253 @@
+import { useSortable } from "@dnd-kit/sortable";
+import { CSS } from "@dnd-kit/utilities";
+import { m } from "framer-motion";
+import { observer } from "mobx-react";
+import { CloseIcon, DocumentIcon } from "outline-icons";
+import { getLuminance, transparentize } from "polished";
+import * as React from "react";
+import { useTranslation } from "react-i18next";
+import { Link } from "react-router-dom";
+import styled, { css } from "styled-components";
+import Document from "~/models/Document";
+import Pin from "~/models/Pin";
+import DocumentMeta from "~/components/DocumentMeta";
+import Flex from "~/components/Flex";
+import NudeButton from "~/components/NudeButton";
+import useStores from "~/hooks/useStores";
+import CollectionIcon from "./CollectionIcon";
+import Tooltip from "./Tooltip";
+
+type Props = {
+  pin: Pin | undefined;
+  document: Document;
+  canUpdatePin?: boolean;
+};
+
+function DocumentCard(props: Props) {
+  const { t } = useTranslation();
+  const { collections } = useStores();
+  const { document, pin, canUpdatePin } = props;
+  const collection = collections.get(document.collectionId);
+  const {
+    attributes,
+    listeners,
+    setNodeRef,
+    transform,
+    transition,
+    isDragging,
+  } = useSortable({ id: props.document.id });
+
+  const style = {
+    transform: CSS.Transform.toString(transform),
+    transition,
+  };
+
+  const handleUnpin = React.useCallback(() => {
+    pin?.delete();
+  }, [pin]);
+
+  return (
+    <Reorderable
+      ref={setNodeRef}
+      style={style}
+      $isDragging={isDragging}
+      {...attributes}
+    >
+      <AnimatePresence
+        initial={{ opacity: 0, scale: 0.95 }}
+        animate={{
+          opacity: 1,
+          scale: 1,
+          transition: {
+            type: "spring",
+            bounce: 0.6,
+          },
+        }}
+        exit={{ opacity: 0, scale: 0.95 }}
+      >
+        <DocumentLink
+          dir={document.dir}
+          style={{
+            background:
+              collection?.color && getLuminance(collection.color) < 0.6
+                ? collection.color
+                : undefined,
+          }}
+          $isDragging={isDragging}
+          to={{
+            pathname: document.url,
+            state: {
+              title: document.titleWithDefault,
+            },
+          }}
+        >
+          <Content justify="space-between" column>
+            {collection?.icon &&
+            collection?.icon !== "collection" &&
+            !pin?.collectionId ? (
+              <CollectionIcon collection={collection} color="white" />
+            ) : (
+              <DocumentIcon color="white" />
+            )}
+            <div>
+              <Heading dir={document.dir}>{document.titleWithDefault}</Heading>
+
+              <StyledDocumentMeta document={document} />
+            </div>
+          </Content>
+        </DocumentLink>
+        {canUpdatePin && (
+          <Actions dir={document.dir} gap={4}>
+            {!isDragging && pin && (
+              <Tooltip tooltip={t("Unpin")}>
+                <PinButton onClick={handleUnpin}>
+                  <CloseIcon color="currentColor" />
+                </PinButton>
+              </Tooltip>
+            )}
+            <DragHandle $isDragging={isDragging} {...listeners}>
+              :::
+            </DragHandle>
+          </Actions>
+        )}
+      </AnimatePresence>
+    </Reorderable>
+  );
+}
+
+const PinButton = styled(NudeButton)`
+  color: ${(props) => props.theme.white75};
+
+  &:hover,
+  &:active {
+    color: ${(props) => props.theme.white};
+  }
+`;
+
+const Actions = styled(Flex)`
+  position: absolute;
+  top: 12px;
+  right: ${(props) => (props.dir === "rtl" ? "auto" : "12px")};
+  left: ${(props) => (props.dir === "rtl" ? "12px" : "auto")};
+  opacity: 0;
+  transition: opacity 100ms ease-in-out;
+
+  // move actions above content
+  z-index: 2;
+`;
+
+const DragHandle = styled.div<{ $isDragging: boolean }>`
+  cursor: ${(props) => (props.$isDragging ? "grabbing" : "grab")};
+  padding: 0 4px;
+  font-weight: bold;
+  color: ${(props) => props.theme.white75};
+  line-height: 1.35;
+
+  &:hover,
+  &:active {
+    color: ${(props) => props.theme.white};
+  }
+`;
+
+const AnimatePresence = m.div;
+
+const Reorderable = styled.div<{ $isDragging: boolean }>`
+  position: relative;
+  user-select: none;
+  border-radius: 8px;
+
+  // move above other cards when dragging
+  z-index: ${(props) => (props.$isDragging ? 1 : "inherit")};
+  transform: scale(${(props) => (props.$isDragging ? "1.025" : "1")});
+  box-shadow: ${(props) =>
+    props.$isDragging ? "0 0 20px rgba(0,0,0,0.3);" : "0 0 0 rgba(0,0,0,0)"};
+
+  &:hover ${Actions} {
+    opacity: 1;
+  }
+`;
+
+const Content = styled(Flex)`
+  min-width: 0;
+  height: 100%;
+
+  // move content above ::after
+  position: relative;
+  z-index: 1;
+`;
+
+const StyledDocumentMeta = styled(DocumentMeta)`
+  color: ${(props) => transparentize(0.25, props.theme.white)} !important;
+`;
+
+const DocumentLink = styled(Link)<{
+  $menuOpen?: boolean;
+  $isDragging?: boolean;
+}>`
+  position: relative;
+  display: block;
+  padding: 12px;
+  border-radius: 8px;
+  height: 160px;
+  background: ${(props) => props.theme.slate};
+  color: ${(props) => props.theme.white};
+  transition: transform 50ms ease-in-out;
+
+  &:after {
+    content: "";
+    display: block;
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: linear-gradient(transparent, rgba(0, 0, 0, 0.1));
+    border-radius: 8px;
+    pointer-events: none;
+  }
+
+  ${Actions} {
+    opacity: 0;
+  }
+
+  &:hover,
+  &:active,
+  &:focus,
+  &:focus-within {
+    ${Actions} {
+      opacity: 1;
+    }
+
+    ${(props) =>
+      !props.$isDragging &&
+      css`
+        &:after {
+          background: rgba(0, 0, 0, 0.1);
+        }
+      `}
+  }
+
+  ${(props) =>
+    props.$menuOpen &&
+    css`
+      background: ${(props) => props.theme.listItemHoverBackground};
+
+      ${Actions} {
+        opacity: 1;
+      }
+    `}
+`;
+
+const Heading = styled.h3`
+  margin-top: 0;
+  margin-bottom: 0.35em;
+  line-height: 22px;
+  max-height: 66px; // 3*line-height
+  overflow: hidden;
+
+  color: ${(props) => props.theme.white};
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
+    Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+`;
+
+export default observer(DocumentCard);
--- a/app/components/DocumentMeta.tsx
+++ b/app/components/DocumentMeta.tsx
@@ -26,7 +26,6 @@ const Viewed = styled.span`
 `;

 const Modified = styled.span<{ highlight?: boolean }>`
-  color: ${(props) => props.theme.textTertiary};
  font-weight: ${(props) => (props.highlight ? "600" : "400")};
 `;

--- a/app/components/PaginatedDocumentList.tsx
+++ b/app/components/PaginatedDocumentList.tsx
@@ -12,7 +12,6 @@ type Props = {
  showParentDocuments?: boolean;
  showCollection?: boolean;
  showPublished?: boolean;
-  showPin?: boolean;
  showDraft?: boolean;
  showTemplate?: boolean;
 };
@@ -33,7 +32,12 @@ const PaginatedDocumentList = React.memo<Props>(function PaginatedDocumentList({
      fetch={fetch}
      options={options}
      renderItem={(item) => (
-        <DocumentListItem key={item.id} document={item} {...rest} />
+        <DocumentListItem
+          key={item.id}
+          document={item}
+          showPin={!!options?.collectionId}
+          {...rest}
+        />
      )}
    />
  );
--- a/app/components/PinnedDocuments.tsx
+++ b/app/components/PinnedDocuments.tsx
@@ -0,0 +1,137 @@
+import {
+  DndContext,
+  closestCenter,
+  KeyboardSensor,
+  PointerSensor,
+  useSensor,
+  useSensors,
+  DragEndEvent,
+} from "@dnd-kit/core";
+import { restrictToParentElement } from "@dnd-kit/modifiers";
+import {
+  arrayMove,
+  SortableContext,
+  sortableKeyboardCoordinates,
+  rectSortingStrategy,
+} from "@dnd-kit/sortable";
+import fractionalIndex from "fractional-index";
+import { AnimatePresence } from "framer-motion";
+import { observer } from "mobx-react";
+import * as React from "react";
+import styled from "styled-components";
+import breakpoint from "styled-components-breakpoint";
+import Pin from "~/models/Pin";
+import DocumentCard from "~/components/DocumentCard";
+import useStores from "~/hooks/useStores";
+
+type Props = {
+  /** Pins to display */
+  pins: Pin[];
+  /** Maximum number of pins to display */
+  limit?: number;
+  /** Whether the user has permission to update pins */
+  canUpdate?: boolean;
+};
+
+function PinnedDocuments({ limit, pins, canUpdate, ...rest }: Props) {
+  const { documents } = useStores();
+  const [items, setItems] = React.useState(pins.map((pin) => pin.documentId));
+
+  React.useEffect(() => {
+    setItems(pins.map((pin) => pin.documentId));
+  }, [pins]);
+
+  const sensors = useSensors(
+    useSensor(PointerSensor),
+    useSensor(KeyboardSensor, {
+      coordinateGetter: sortableKeyboardCoordinates,
+    })
+  );
+
+  const handleDragEnd = React.useCallback(
+    (event: DragEndEvent) => {
+      const { active, over } = event;
+
+      if (over && active.id !== over.id) {
+        setItems((items) => {
+          const activePos = items.indexOf(active.id);
+          const overPos = items.indexOf(over.id);
+
+          const overIndex = pins[overPos]?.index || null;
+          const nextIndex = pins[overPos + 1]?.index || null;
+          const prevIndex = pins[overPos - 1]?.index || null;
+          const pin = pins[activePos];
+
+          // Update the order on the backend, revert if the call fails
+          pin
+            .save({
+              index:
+                overPos === 0
+                  ? fractionalIndex(null, overIndex)
+                  : activePos > overPos
+                  ? fractionalIndex(prevIndex, overIndex)
+                  : fractionalIndex(overIndex, nextIndex),
+            })
+            .catch(() => setItems(items));
+
+          // Update the order in state immediately
+          return arrayMove(items, activePos, overPos);
+        });
+      }
+    },
+    [pins]
+  );
+
+  return (
+    <DndContext
+      sensors={sensors}
+      modifiers={[restrictToParentElement]}
+      collisionDetection={closestCenter}
+      onDragEnd={handleDragEnd}
+    >
+      <SortableContext items={items} strategy={rectSortingStrategy}>
+        <List>
+          <AnimatePresence initial={false}>
+            {items.map((documentId) => {
+              const document = documents.get(documentId);
+              const pin = pins.find((pin) => pin.documentId === documentId);
+
+              return document ? (
+                <DocumentCard
+                  key={documentId}
+                  document={document}
+                  canUpdatePin={canUpdate}
+                  pin={pin}
+                  {...rest}
+                />
+              ) : null;
+            })}
+          </AnimatePresence>
+        </List>
+      </SortableContext>
+    </DndContext>
+  );
+}
+
+const List = styled.div`
+  display: grid;
+  column-gap: 8px;
+  row-gap: 8px;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  padding: 0;
+  list-style: none;
+
+  &:not(:empty) {
+    margin: 16px 0 32px;
+  }
+
+  ${breakpoint("tablet")`
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  `};
+
+  ${breakpoint("desktop")`
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+  `};
+`;
+
+export default observer(PinnedDocuments);
--- a/app/components/Sidebar/components/SidebarAction.tsx
+++ b/app/components/Sidebar/components/SidebarAction.tsx
@@ -1,10 +1,8 @@
 import invariant from "invariant";
 import { observer } from "mobx-react";
 import * as React from "react";
-import { useTranslation } from "react-i18next";
-import { useLocation } from "react-router";
 import { actionToMenuItem } from "~/actions";
-import useStores from "~/hooks/useStores";
+import useActionContext from "~/hooks/useActionContext";
 import { Action } from "~/types";
 import SidebarLink from "./SidebarLink";

@@ -14,18 +12,12 @@ type Props = {
 };

 function SidebarAction({ action, ...rest }: Props) {
-  const stores = useStores();
-  const { t } = useTranslation();
-  const location = useLocation();
-  const context = {
+  const context = useActionContext({
    isContextMenu: false,
    isCommandBar: false,
    activeCollectionId: undefined,
    activeDocumentId: undefined,
-    location,
-    stores,
-    t,
-  };
+  });
  const menuItem = actionToMenuItem(action, context);
  invariant(menuItem.type === "button", "passed action must be a button");

--- a/app/components/SocketProvider.tsx
+++ b/app/components/SocketProvider.tsx
@@ -71,6 +71,7 @@ class SocketProvider extends React.Component<Props> {
      documents,
      collections,
      groups,
+      pins,
      memberships,
      policies,
      presence,
@@ -260,6 +261,18 @@ class SocketProvider extends React.Component<Props> {
      }
    });

+    this.socket.on("pins.create", (event: any) => {
+      pins.add(event);
+    });
+
+    this.socket.on("pins.update", (event: any) => {
+      pins.add(event);
+    });
+
+    this.socket.on("pins.delete", (event: any) => {
+      pins.remove(event.modelId);
+    });
+
    this.socket.on("documents.star", (event: any) => {
      documents.starredIds.set(event.documentId, true);
    });