feat: TOC position for publicly shared docs (#7057)

* feat: TOC position for publicly shared docs

* remove preferences object

* comment

* fix: Allow sidebar position preference without public branding switch

---------

Co-authored-by: Tom Moor <tom.moor@gmail.com>

app/scenes/Document/Shared.tsx

@@ -7,7 +7,7 @@ import { RouteComponentProps, useLocation } from "react-router-dom";
 import styled, { ThemeProvider } from "styled-components";
 import { setCookie } from "tiny-cookie";
 import { s } from "@shared/styles";
-import { NavigationNode, PublicTeam } from "@shared/types";
+import { NavigationNode, PublicTeam, TOCPosition } from "@shared/types";
 import type { Theme } from "~/stores/UiStore";
 import DocumentModel from "~/models/Document";
 import Error404 from "~/scenes/Error404";
@@ -102,6 +102,7 @@ function SharedDocumentScene(props: Props) {
     ? (searchParams.get("theme") as Theme)
     : undefined;
   const theme = useBuildTheme(response?.team?.customTheme, themeOverride);
+  const tocPosition = response?.team?.tocPosition ?? TOCPosition.Left;
 
   React.useEffect(() => {
     if (!user) {
@@ -188,6 +189,7 @@ function SharedDocumentScene(props: Props) {
               document={response.document}
               sharedTree={response.sharedTree}
               shareId={shareId}
+              tocPosition={tocPosition}
               readOnly
             />
           </Layout>

app/scenes/Document/components/Document.tsx

@@ -83,6 +83,7 @@ type Props = WithTranslation &
     revision?: Revision;
     readOnly: boolean;
     shareId?: string;
+    tocPosition?: TOCPosition;
     onCreateLink?: (title: string, nested?: boolean) => Promise<string>;
     onSearchLink?: (term: string) => Promise<SearchResult[]>;
   };
@@ -394,8 +395,17 @@ class DocumentScene extends React.Component<Props> {
   };
 
   render() {
-    const { document, revision, readOnly, abilities, auth, ui, shareId, t } =
-      this.props;
+    const {
+      document,
+      revision,
+      readOnly,
+      abilities,
+      auth,
+      ui,
+      shareId,
+      tocPosition,
+      t,
+    } = this.props;
     const { team, user } = auth;
     const isShare = !!shareId;
     const embedsDisabled =
@@ -404,9 +414,10 @@ class DocumentScene extends React.Component<Props> {
     const hasHeadings = this.headings.length > 0;
     const showContents =
       ui.tocVisible && ((readOnly && hasHeadings) || !readOnly);
-    const tocPosition =
-      (team?.getPreference(TeamPreference.TocPosition) as TOCPosition) ||
-      TOCPosition.Left;
+    const tocPos =
+      tocPosition ??
+      ((team?.getPreference(TeamPreference.TocPosition) as TOCPosition) ||
+        TOCPosition.Left);
     const multiplayerEditor =
       !document.isArchived && !document.isDeleted && !revision && !isShare;
 
@@ -503,7 +514,7 @@ class DocumentScene extends React.Component<Props> {
                     {showContents && (
                       <ContentsContainer
                         docFullWidth={document.fullWidth}
-                        position={tocPosition}
+                        position={tocPos}
                       >
                         <Contents headings={this.headings} />
                       </ContentsContainer>
@@ -511,7 +522,7 @@ class DocumentScene extends React.Component<Props> {
                     <EditorContainer
                       docFullWidth={document.fullWidth}
                       showContents={showContents}
-                      tocPosition={tocPosition}
+                      tocPosition={tocPos}
                     >
                       <Editor
                         id={document.id}