From 874ffdc94002b58f85abf2c8210f4cf24df3c6a2 Mon Sep 17 00:00:00 2001
From: Drew Fisher <drew.m.fisher@gmail.com>
Date: Fri, 10 Feb 2023 01:23:15 -0800
Subject: [PATCH] Reduce height of metadata section by conditionally showing
 tag row

Tags are not always the most useful piece of information to show, and
much of the time when working on a puzzle, you'd really rather have a
bit more vertical space for the spreadsheet.

To that end: this patchset makes the tag row of the puzzle metadata
section into a popover, and shows it only when the metadata section
already has the mouse over it or is focused.  This reduces the default
height of the metadata section for an unsolved puzzle from 76 pixels to
48 pixels.

We continue to show correct answers in the metadata section by default
because we consider it important to make it hard to miss that a puzzle
has already been solved and what the answer was, and very few puzzles
involve multiple answers (so the row is not a huge loss).

Fixes #1388.
---
 imports/client/components/PuzzlePage.tsx | 106 ++++++++++++++++++-----
 1 file changed, 85 insertions(+), 21 deletions(-)

diff --git a/imports/client/components/PuzzlePage.tsx b/imports/client/components/PuzzlePage.tsx
index 3cb503b7a..088e30bef 100644
--- a/imports/client/components/PuzzlePage.tsx
+++ b/imports/client/components/PuzzlePage.tsx
@@ -309,6 +309,13 @@ const PuzzleMetadataExternalLink = styled.a`
   white-space: nowrap;
 `;
 
+const SecondaryMetadataContainer = styled.div`
+  // To ensure this div covers the google doc when shown, we set a white background
+  background-color: #fff;
+  padding-left: 8px;
+  padding-right: 8px;
+`;
+
 const StyledTagList = styled(TagList)`
   display: contents;
 `;
@@ -1005,6 +1012,23 @@ const InsertImage = ({ documentId }: { documentId: string }) => {
   );
 };
 
+// A popper modifier that ensures that the width of the popover matches the
+// width of the reference element.
+const sameWidth = {
+  name: 'sameWidth',
+  enabled: true,
+  phase: 'beforeWrite' as const,
+  requires: ['computeStyles'],
+  fn: ({ state }: { state: any }) => {
+    state.styles.popper.width = `${state.rects.reference.width}px`;
+  },
+  effect: ({ state }: { state: any }) => {
+    state.elements.popper.style.width = `${
+      state.elements.reference.offsetWidth
+    }px`;
+  },
+};
+
 const PuzzlePageMetadata = ({
   puzzle, displayNames, document, isDesktop,
 }: {
@@ -1065,6 +1089,16 @@ const PuzzlePageMetadata = ({
     }
   }, []);
 
+  const mainMetadataRef = useRef(null);
+  const [showSecondaryMetadata, setShowSecondaryMetadata] = useState<boolean>(false);
+  const [mouseOverSecondaryMetadata, setMouseOverSecondaryMetadata] = useState<boolean>(false);
+  const secondaryMetadataMouseOver = useCallback(() => {
+    setMouseOverSecondaryMetadata(true);
+  }, [setMouseOverSecondaryMetadata]);
+  const secondaryMetadataMouseLeave = useCallback(() => {
+    setMouseOverSecondaryMetadata(false);
+  }, [setMouseOverSecondaryMetadata]);
+
   const tagsById = indexedById(allTags);
   const maybeTags: (TagType | undefined)[] = puzzle.tags.map((tagId) => { return tagsById.get(tagId); });
   const tags: TagType[] = maybeTags.filter<TagType>((t): t is TagType => t !== undefined);
@@ -1148,26 +1182,12 @@ const PuzzlePageMetadata = ({
     );
   }
 
-  return (
-    <PuzzleMetadata>
-      <PuzzleModalForm
-        key={puzzleId}
-        ref={editModalRef}
-        puzzle={puzzle}
-        huntId={huntId}
-        tags={allTags}
-        onSubmit={onEdit}
-      />
-      <PuzzleMetadataActionRow>
-        {puzzleLink}
-        {documentLink}
-        {editButton}
-        {imageInsert}
-        {guessButton}
-      </PuzzleMetadataActionRow>
-      <PuzzleMetadataRow>
-        {answersElement}
-      </PuzzleMetadataRow>
+  const secondaryMetadata = (
+    <SecondaryMetadataContainer
+      onFocus={secondaryMetadataMouseOver}
+      onMouseOver={secondaryMetadataMouseOver}
+      onMouseLeave={secondaryMetadataMouseLeave}
+    >
       <PuzzleMetadataRow>
         <StyledTagList
           puzzle={puzzle}
@@ -1182,7 +1202,51 @@ const PuzzlePageMetadata = ({
           emptyMessage="No tags yet"
         />
       </PuzzleMetadataRow>
-    </PuzzleMetadata>
+    </SecondaryMetadataContainer>
+  );
+
+  const modifiers = [
+    {
+      name: 'preventOverflow',
+      enabled: true,
+      options: {
+        boundary: mainMetadataRef.current,
+        padding: 0,
+      },
+    },
+    sameWidth,
+  ];
+
+  return (
+    <OverlayTrigger
+      trigger={['hover', 'click', 'focus']}
+      show={showSecondaryMetadata || mouseOverSecondaryMetadata}
+      onToggle={setShowSecondaryMetadata}
+      placement="bottom-end"
+      popperConfig={{ modifiers }}
+      overlay={secondaryMetadata}
+    >
+      <PuzzleMetadata ref={mainMetadataRef}>
+        <PuzzleModalForm
+          key={puzzleId}
+          ref={editModalRef}
+          puzzle={puzzle}
+          huntId={huntId}
+          tags={allTags}
+          onSubmit={onEdit}
+        />
+        <PuzzleMetadataActionRow>
+          {puzzleLink}
+          {documentLink}
+          {editButton}
+          {imageInsert}
+          {guessButton}
+        </PuzzleMetadataActionRow>
+        <PuzzleMetadataRow>
+          {answersElement}
+        </PuzzleMetadataRow>
+      </PuzzleMetadata>
+    </OverlayTrigger>
   );
 };