feat: Optional branding on shared documents (#4450)

* feat: Optional branding on shared documents

* Refactor
Remove unneccessarily exposed team id
Remove top-level collapsible document on publicly shared urls

* fix: Branding disappears when revising document
fix: Clicking title should go back to main app when logged in

app/components/Avatar/Avatar.tsx

@@ -54,6 +54,7 @@ Avatar.defaultProps = {
 
 const Relative = styled.div`
   position: relative;
+  flex-shrink: 0;
 `;
 
 const IconWrapper = styled.div`
@@ -77,6 +78,7 @@ const CircleImg = styled.img<{ size: number; $showBorder?: boolean }>`
     ${(props) =>
       props.$showBorder === false ? "transparent" : props.theme.background};
   flex-shrink: 0;
+  overflow: hidden;
 `;
 
 export default Avatar;

app/components/Sidebar/App.tsx

@@ -24,9 +24,9 @@ import TeamLogo from "../TeamLogo";
 import Sidebar from "./Sidebar";
 import ArchiveLink from "./components/ArchiveLink";
 import Collections from "./components/Collections";
+import HeaderButton, { HeaderButtonProps } from "./components/HeaderButton";
 import Section from "./components/Section";
 import SidebarAction from "./components/SidebarAction";
-import SidebarButton, { SidebarButtonProps } from "./components/SidebarButton";
 import SidebarLink from "./components/SidebarLink";
 import Starred from "./components/Starred";
 import TrashLink from "./components/TrashLink";
@@ -59,8 +59,8 @@ function AppSidebar() {
       {dndArea && (
         <DndProvider backend={HTML5Backend} options={html5Options}>
           <OrganizationMenu>
-            {(props: SidebarButtonProps) => (
-              <SidebarButton
+            {(props: HeaderButtonProps) => (
+              <HeaderButton
                 {...props}
                 title={team.name}
                 image={<TeamLogo model={team} size={32} alt={t("Logo")} />}

app/components/Sidebar/Settings.tsx

@@ -11,8 +11,8 @@ import useAuthorizedSettingsConfig from "~/hooks/useAuthorizedSettingsConfig";
 import isCloudHosted from "~/utils/isCloudHosted";
 import Sidebar from "./Sidebar";
 import Header from "./components/Header";
+import HeaderButton from "./components/HeaderButton";
 import Section from "./components/Section";
-import SidebarButton from "./components/SidebarButton";
 import SidebarLink from "./components/SidebarLink";
 import Version from "./components/Version";
 
@@ -28,7 +28,7 @@ function SettingsSidebar() {
 
   return (
     <Sidebar>
-      <SidebarButton
+      <HeaderButton
         title={t("Return to App")}
         image={<StyledBackIcon color="currentColor" />}
         onClick={returnToApp}

app/components/Sidebar/Shared.tsx

@@ -1,33 +1,52 @@
 import { observer } from "mobx-react";
 import * as React from "react";
+import { useTranslation } from "react-i18next";
 import styled from "styled-components";
+import Team from "~/models/Team";
 import Scrollable from "~/components/Scrollable";
 import SearchPopover from "~/components/SearchPopover";
 import useStores from "~/hooks/useStores";
 import { NavigationNode } from "~/types";
+import history from "~/utils/history";
+import { homePath, sharedDocumentPath } from "~/utils/routeHelpers";
+import TeamLogo from "../TeamLogo";
 import Sidebar from "./Sidebar";
+import HeaderButton from "./components/HeaderButton";
 import Section from "./components/Section";
 import DocumentLink from "./components/SharedDocumentLink";
 
 type Props = {
+  team?: Team;
   rootNode: NavigationNode;
   shareId: string;
 };
 
-function SharedSidebar({ rootNode, shareId }: Props) {
-  const { ui, documents } = useStores();
+function SharedSidebar({ rootNode, team, shareId }: Props) {
+  const { ui, documents, auth } = useStores();
+  const { t } = useTranslation();
 
   return (
     <Sidebar>
-      <ScrollContainer flex>
+      {team && (
+        <HeaderButton
+          title={team.name}
+          image={<TeamLogo model={team} size={32} alt={t("Logo")} />}
+          onClick={() =>
+            history.push(
+              auth.user ? homePath() : sharedDocumentPath(shareId, rootNode.url)
+            )
+          }
+        />
+      )}
+      <ScrollContainer topShadow flex>
         <TopSection>
           <SearchPopover shareId={shareId} />
         </TopSection>
         <Section>
           <DocumentLink
             index={0}
+            depth={0}
             shareId={shareId}
-            depth={1}
             node={rootNode}
             activeDocumentId={ui.activeDocumentId}
             activeDocument={documents.active}
@@ -44,8 +63,11 @@ const ScrollContainer = styled(Scrollable)`
 
 const TopSection = styled(Section)`
   // this weird looking && increases the specificity of the style rule
-  && {
+  &&:first-child {
     margin-top: 16px;
+  }
+
+  && {
     margin-bottom: 16px;
   }
 `;

app/components/Sidebar/Sidebar.tsx

@@ -13,8 +13,8 @@ import useStores from "~/hooks/useStores";
 import AccountMenu from "~/menus/AccountMenu";
 import { fadeIn } from "~/styles/animations";
 import Avatar from "../Avatar";
+import HeaderButton, { HeaderButtonProps } from "./components/HeaderButton";
 import ResizeBorder from "./components/ResizeBorder";
-import SidebarButton, { SidebarButtonProps } from "./components/SidebarButton";
 import Toggle, { ToggleButton, Positioner } from "./components/Toggle";
 
 const ANIMATION_MS = 250;
@@ -170,8 +170,8 @@ const Sidebar = React.forwardRef<HTMLDivElement, Props>(
 
           {user && (
             <AccountMenu>
-              {(props: SidebarButtonProps) => (
-                <SidebarButton
+              {(props: HeaderButtonProps) => (
+                <HeaderButton
                   {...props}
                   showMoreMenu
                   title={user.name}

app/components/Sidebar/components/HeaderButton.tsx

@@ -3,7 +3,7 @@ import * as React from "react";
 import styled from "styled-components";
 import Flex from "~/components/Flex";
 
-export type SidebarButtonProps = {
+export type HeaderButtonProps = {
   title: React.ReactNode;
   image: React.ReactNode;
   minHeight?: number;
@@ -13,7 +13,7 @@ export type SidebarButtonProps = {
   onClick: React.MouseEventHandler<HTMLButtonElement>;
 };
 
-const SidebarButton = React.forwardRef<HTMLButtonElement, SidebarButtonProps>(
+const HeaderButton = React.forwardRef<HTMLButtonElement, HeaderButtonProps>(
   (
     {
       showDisclosure,
@@ -22,7 +22,7 @@ const SidebarButton = React.forwardRef<HTMLButtonElement, SidebarButtonProps>(
       title,
       minHeight = 0,
       ...rest
-    }: SidebarButtonProps,
+    }: HeaderButtonProps,
     ref
   ) => (
     <Wrapper
@@ -33,7 +33,7 @@ const SidebarButton = React.forwardRef<HTMLButtonElement, SidebarButtonProps>(
       {...rest}
       ref={ref}
     >
-      <Title gap={4} align="center">
+      <Title gap={6} align="center">
         {image}
         {title}
       </Title>
@@ -79,4 +79,4 @@ const Wrapper = styled(Flex)<{ minHeight: number }>`
   }
 `;
 
-export default SidebarButton;
+export default HeaderButton;

app/components/Sidebar/components/SharedDocumentLink.tsx

@@ -100,7 +100,7 @@ function DocumentLink(
         }}
         label={
           <>
-            {hasChildDocuments && (
+            {hasChildDocuments && depth !== 0 && (
               <Disclosure expanded={expanded} onClick={handleDisclosureClick} />
             )}
             {title}

app/components/TeamLogo.ts

@@ -4,8 +4,6 @@ import Avatar from "./Avatar";
 const TeamLogo = styled(Avatar)`
   border-radius: 4px;
   border: 1px solid ${(props) => props.theme.divider};
-  overflow: hidden;
-  flex-shrink: 0;
 `;
 
 export default TeamLogo;