feat: allow user to set TOC display preference

app/scenes/Document/components/Contents.tsx

@@ -18,9 +18,10 @@ type Props = {
     level: number;
     id: string;
   }[];
+  onLeftSide: boolean;
 };
 
-export default function Contents({ headings, isFullWidth }: Props) {
+export default function Contents({ headings, isFullWidth, onLeftSide }: Props) {
   const [activeSlug, setActiveSlug] = React.useState<string>();
   const position = useWindowScrollPosition({
     throttle: 100,
@@ -56,7 +57,7 @@ export default function Contents({ headings, isFullWidth }: Props) {
   const { t } = useTranslation();
 
   return (
-    <Wrapper isFullWidth={isFullWidth}>
+    <Wrapper isFullWidth={isFullWidth} onLeftSide={onLeftSide}>
       <Sticky>
         <Heading>{t("Contents")}</Heading>
         {headings.length ? (
@@ -83,7 +84,7 @@ export default function Contents({ headings, isFullWidth }: Props) {
   );
 }
 
-const Wrapper = styled.div<{ isFullWidth: boolean }>`
+const Wrapper = styled.div<{ isFullWidth: boolean; onLeftSide: boolean }>`
   width: 256px;
   display: none;
 
@@ -94,7 +95,7 @@ const Wrapper = styled.div<{ isFullWidth: boolean }>`
   ${(props) =>
     !props.isFullWidth &&
     breakpoint("desktopLarge")`
-    transform: translateX(-256px);
+    transform: ${props.onLeftSide && "translateX(-256px)"};
     width: 0;
     `}
 `;

app/scenes/Document/components/Document.tsx

@@ -15,7 +15,7 @@ import { toast } from "sonner";
 import styled from "styled-components";
 import breakpoint from "styled-components-breakpoint";
 import { s } from "@shared/styles";
-import { NavigationNode } from "@shared/types";
+import { NavigationNode, TOCPosition, TeamPreference } from "@shared/types";
 import { Heading } from "@shared/utils/ProsemirrorHelper";
 import { parseDomain } from "@shared/utils/domains";
 import getTasks from "@shared/utils/getTasks";
@@ -401,6 +401,8 @@ class DocumentScene extends React.Component<Props> {
     const hasHeadings = this.headings.length > 0;
     const showContents =
       ui.tocVisible && ((readOnly && hasHeadings) || !readOnly);
+    const tocOnLeftSide =
+      team?.getPreference(TeamPreference.TocPosition) === TOCPosition.Left;
     const multiplayerEditor =
       !document.isArchived && !document.isDeleted && !revision && !isShare;
 
@@ -480,7 +482,7 @@ class DocumentScene extends React.Component<Props> {
             >
               <Notices document={document} readOnly={readOnly} />
               <React.Suspense fallback={<PlaceholderDocument />}>
-                <Flex auto={!readOnly} reverse>
+                <Flex auto={!readOnly} reverse={tocOnLeftSide}>
                   {revision ? (
                     <RevisionViewer
                       document={document}
@@ -540,6 +542,7 @@ class DocumentScene extends React.Component<Props> {
                         <Contents
                           headings={this.headings}
                           isFullWidth={document.fullWidth}
+                          onLeftSide={tocOnLeftSide}
                         />
                       )}
                     </>

app/scenes/Settings/Details.tsx

@@ -8,14 +8,15 @@ import { useTranslation, Trans } from "react-i18next";
 import { toast } from "sonner";
 import { ThemeProvider, useTheme } from "styled-components";
 import { buildDarkTheme, buildLightTheme } from "@shared/styles/theme";
-import { CustomTheme, TeamPreference } from "@shared/types";
+import { CustomTheme, TOCPosition, TeamPreference } from "@shared/types";
 import { getBaseDomain } from "@shared/utils/domains";
 import Button from "~/components/Button";
 import ButtonLink from "~/components/ButtonLink";
 import DefaultCollectionInputSelect from "~/components/DefaultCollectionInputSelect";
 import Heading from "~/components/Heading";
 import Input from "~/components/Input";
 import InputColor from "~/components/InputColor";
+import InputSelect from "~/components/InputSelect";
 import Scene from "~/components/Scene";
 import Switch from "~/components/Switch";
 import Text from "~/components/Text";
@@ -58,6 +59,10 @@ function Details() {
     isHexColor
   );
 
+  const [tocPosition, setTocPosition] = useState(
+    team.getPreference(TeamPreference.TocPosition) as TOCPosition
+  );
+
   const handleSubmit = React.useCallback(
     async (event?: React.SyntheticEvent) => {
       if (event) {
@@ -73,6 +78,7 @@ function Details() {
             ...team.preferences,
             publicBranding,
             customTheme,
+            tocPosition,
           },
         });
         toast.success(t("Settings saved"));
@@ -276,6 +282,31 @@ function Details() {
             />
           </SettingRow>
 
+          <SettingRow
+            border={false}
+            label={t("Table of Contents Position")}
+            name="tocPosition"
+            description={t(
+              "The side to display the table of contents in relation to the main content."
+            )}
+          >
+            <InputSelect
+              ariaLabel={t("TOC position")}
+              options={[
+                {
+                  label: "Left",
+                  value: TOCPosition.Left,
+                },
+                {
+                  label: "Right",
+                  value: TOCPosition.Right,
+                },
+              ]}
+              value={tocPosition}
+              onChange={(p: TOCPosition) => setTocPosition(p)}
+            />
+          </SettingRow>
+
           <Button type="submit" disabled={team.isSaving || !isValid}>
             {team.isSaving ? `${t("Saving")}…` : t("Save")}
           </Button>

server/routes/api/teams/schema.ts

@@ -1,5 +1,5 @@
 import { z } from "zod";
-import { UserRole } from "@shared/types";
+import { TOCPosition, UserRole } from "@shared/types";
 import { BaseSchema } from "@server/routes/api/schema";
 
 export const TeamsUpdateSchema = BaseSchema.extend({
@@ -46,6 +46,8 @@ export const TeamsUpdateSchema = BaseSchema.extend({
             accentText: z.string().min(4).max(7).regex(/^#/).optional(),
           })
           .optional(),
+        /** Side to display the document's table of contents in relation to the main content. */
+        tocPosition: z.nativeEnum(TOCPosition).optional(),
       })
       .optional(),
   }),

shared/constants.ts

@@ -1,4 +1,5 @@
 import {
+  TOCPosition,
   TeamPreference,
   TeamPreferences,
   UserPreference,
@@ -21,6 +22,7 @@ export const TeamPreferenceDefaults: TeamPreferences = {
   [TeamPreference.PublicBranding]: false,
   [TeamPreference.Commenting]: true,
   [TeamPreference.CustomTheme]: undefined,
+  [TeamPreference.TocPosition]: TOCPosition.Left,
 };
 
 export const UserPreferenceDefaults: UserPreferences = {

shared/i18n/locales/en_US/translation.json

@@ -834,6 +834,9 @@
   "Choose a subdomain to enable a login page just for your team.": "Choose a subdomain to enable a login page just for your team.",
   "Start view": "Start view",
   "This is the screen that workspace members will first see when they sign in.": "This is the screen that workspace members will first see when they sign in.",
+  "Table of Contents Position": "Table of Contents Position",
+  "The side to display the table of contents in relation to the main content.": "The side to display the table of contents in relation to the main content.",
+  "TOC position": "TOC position",
   "Danger": "Danger",
   "You can delete this entire workspace including collections, documents, and users.": "You can delete this entire workspace including collections, documents, and users.",
   "Export data": "Export data",

shared/types.ts

@@ -180,6 +180,11 @@ export type PublicTeam = {
   customTheme: Partial<CustomTheme>;
 };
 
+export enum TOCPosition {
+  Left = "left",
+  Right = "right",
+}
+
 export enum TeamPreference {
   /** Whether documents have a separate edit mode instead of always editing. */
   SeamlessEdit = "seamlessEdit",
@@ -193,6 +198,8 @@ export enum TeamPreference {
   Commenting = "commenting",
   /** The custom theme for the team. */
   CustomTheme = "customTheme",
+  /** Side to display the document's table of contents in relation to the main content. */
+  TocPosition = "tocPosition",
 }
 
 export type TeamPreferences = {
@@ -202,6 +209,7 @@ export type TeamPreferences = {
   [TeamPreference.MembersCanInvite]?: boolean;
   [TeamPreference.Commenting]?: boolean;
   [TeamPreference.CustomTheme]?: Partial<CustomTheme>;
+  [TeamPreference.TocPosition]?: TOCPosition;
 };
 
 export enum NavigationNodeType {