From 5cd4dbd9d7297c9c13329d8e8b9f6be234918fa2 Mon Sep 17 00:00:00 2001
From: Tom Moor <tom.moor@gmail.com>
Date: Sun, 11 Jul 2021 13:09:10 -0400
Subject: [PATCH] fix: Mispositioned TOC control on mobile due to merge
 conflict fix: Show message in mobile TOC when no headings in document fix:
 MenuItem with level should still have background edge-to-edge fix: Show
 developer warning when creating incorrect menu item type

---
 app/components/ContextMenu/MenuItem.js     |  2 +-
 app/components/ContextMenu/Template.js     | 43 +--------------------
 app/components/Header.js                   |  2 -
 app/menus/TableOfContentsMenu.js           | 44 +++++++++++++---------
 app/types/index.js                         | 41 ++++++++++++++++++++
 shared/i18n/locales/en_US/translation.json |  3 +-
 6 files changed, 73 insertions(+), 62 deletions(-)

diff --git a/app/components/ContextMenu/MenuItem.js b/app/components/ContextMenu/MenuItem.js
index 7ebc4bc9..3448103e 100644
--- a/app/components/ContextMenu/MenuItem.js
+++ b/app/components/ContextMenu/MenuItem.js
@@ -87,9 +87,9 @@ const Spacer = styled.svg`
 export const MenuAnchor = styled.a`
   display: flex;
   margin: 0;
-  margin-left: ${(props) => props.level * 10}px;
   border: 0;
   padding: 12px;
+  padding-left: ${(props) => 12 + props.level * 10}px;
   width: 100%;
   min-height: 32px;
   background: none;
diff --git a/app/components/ContextMenu/Template.js b/app/components/ContextMenu/Template.js
index f8a2507c..a1f8c511 100644
--- a/app/components/ContextMenu/Template.js
+++ b/app/components/ContextMenu/Template.js
@@ -13,47 +13,7 @@ import Header from "./Header";
 import MenuItem, { MenuAnchor } from "./MenuItem";
 import Separator from "./Separator";
 import ContextMenu from ".";
-
-type TMenuItem =
-  | {|
-      title: React.Node,
-      to: string,
-      visible?: boolean,
-      selected?: boolean,
-      disabled?: boolean,
-    |}
-  | {|
-      title: React.Node,
-      onClick: (event: SyntheticEvent<>) => void | Promise<void>,
-      visible?: boolean,
-      selected?: boolean,
-      disabled?: boolean,
-    |}
-  | {|
-      title: React.Node,
-      href: string,
-      visible?: boolean,
-      selected?: boolean,
-      disabled?: boolean,
-      level?: number,
-    |}
-  | {|
-      title: React.Node,
-      visible?: boolean,
-      disabled?: boolean,
-      style?: Object,
-      hover?: boolean,
-      items: TMenuItem[],
-    |}
-  | {|
-      type: "separator",
-      visible?: boolean,
-    |}
-  | {|
-      type: "heading",
-      visible?: boolean,
-      title: React.Node,
-    |};
+import { type MenuItem as TMenuItem } from "types";
 
 type Props = {|
   items: TMenuItem[],
@@ -174,6 +134,7 @@ function Template({ items, ...menu }: Props): React.Node {
       return <Header>{item.title}</Header>;
     }
 
+    console.warn("Unrecognized menu item", item);
     return null;
   });
 }
diff --git a/app/components/Header.js b/app/components/Header.js
index ecba8fbd..828fb431 100644
--- a/app/components/Header.js
+++ b/app/components/Header.js
@@ -72,8 +72,6 @@ const Actions = styled(Flex)`
   flex-basis: 0;
   min-width: auto;
   padding-left: 8px;
-  position: fixed;
-  right: 12px;
 
   ${breakpoint("tablet")`
     position: unset;
diff --git a/app/menus/TableOfContentsMenu.js b/app/menus/TableOfContentsMenu.js
index abe1f978..6dbc6c96 100644
--- a/app/menus/TableOfContentsMenu.js
+++ b/app/menus/TableOfContentsMenu.js
@@ -7,6 +7,7 @@ import { MenuButton, useMenuState } from "reakit/Menu";
 import Button from "components/Button";
 import ContextMenu from "components/ContextMenu";
 import Template from "components/ContextMenu/Template";
+import { type MenuItem } from "types";
 
 type Props = {|
   headings: { title: string, level: number, id: string }[],
@@ -27,6 +28,31 @@ function TableOfContentsMenu({ headings }: Props) {
     Infinity
   );
 
+  const items: MenuItem[] = React.useMemo(() => {
+    let i = [
+      {
+        type: "heading",
+        visible: true,
+        title: t("Contents"),
+      },
+      ...headings.map((heading) => ({
+        href: `#${heading.id}`,
+        title: t(heading.title),
+        level: heading.level - minHeading,
+      })),
+    ];
+
+    if (i.length === 1) {
+      i.push({
+        href: "#",
+        title: t("Headings you add to the document will appear here"),
+        disabled: true,
+      });
+    }
+
+    return i;
+  }, [t, headings, minHeading]);
+
   return (
     <>
       <MenuButton {...menu}>
@@ -41,23 +67,7 @@ function TableOfContentsMenu({ headings }: Props) {
         )}
       </MenuButton>
       <ContextMenu {...menu} aria-label={t("Table of contents")}>
-        <Template
-          {...menu}
-          items={[
-            {
-              type: "heading",
-              visible: true,
-              title: t("Contents"),
-            },
-            ...headings.map((heading) => {
-              return {
-                href: `#${heading.id}`,
-                title: t(heading.title),
-                level: heading.level - minHeading,
-              };
-            }),
-          ]}
-        />
+        <Template {...menu} items={items} />
       </ContextMenu>
     </>
   );
diff --git a/app/types/index.js b/app/types/index.js
index db040656..b6f31049 100644
--- a/app/types/index.js
+++ b/app/types/index.js
@@ -58,3 +58,44 @@ export type SearchResult = {
   context: string,
   document: Document,
 };
+
+export type MenuItem =
+  | {|
+      title: React.Node,
+      to: string,
+      visible?: boolean,
+      selected?: boolean,
+      disabled?: boolean,
+    |}
+  | {|
+      title: React.Node,
+      onClick: (event: SyntheticEvent<>) => void | Promise<void>,
+      visible?: boolean,
+      selected?: boolean,
+      disabled?: boolean,
+    |}
+  | {|
+      title: React.Node,
+      href: string,
+      visible?: boolean,
+      selected?: boolean,
+      disabled?: boolean,
+      level?: number,
+    |}
+  | {|
+      title: React.Node,
+      visible?: boolean,
+      disabled?: boolean,
+      style?: Object,
+      hover?: boolean,
+      items: MenuItem[],
+    |}
+  | {|
+      type: "separator",
+      visible?: boolean,
+    |}
+  | {|
+      type: "heading",
+      visible?: boolean,
+      title: React.Node,
+    |};
diff --git a/shared/i18n/locales/en_US/translation.json b/shared/i18n/locales/en_US/translation.json
index 240b3592..d934b8aa 100644
--- a/shared/i18n/locales/en_US/translation.json
+++ b/shared/i18n/locales/en_US/translation.json
@@ -206,8 +206,9 @@
   "Share options": "Share options",
   "Go to document": "Go to document",
   "Revoke link": "Revoke link",
-  "Table of contents": "Table of contents",
   "Contents": "Contents",
+  "Headings you add to the document will appear here": "Headings you add to the document will appear here",
+  "Table of contents": "Table of contents",
   "By {{ author }}": "By {{ author }}",
   "Are you sure you want to make {{ userName }} an admin? Admins can modify team and billing information.": "Are you sure you want to make {{ userName }} an admin? Admins can modify team and billing information.",
   "Are you sure you want to make {{ userName }} a member?": "Are you sure you want to make {{ userName }} a member?",