menu cleanup #1: tagging in tags column, metas in name column

hunts/src/EditPuzzleModal.tsx

@@ -1,8 +1,9 @@
 import React, { FormEvent } from "react";
 import { Button, Form, Modal } from "react-bootstrap";
-import { useDispatch } from "react-redux";
-import { updatePuzzle } from "./puzzlesSlice";
+import { useDispatch, useSelector } from "react-redux";
+import { selectPuzzleTags, updatePuzzle } from "./puzzlesSlice";
 import { showModal, hideModal } from "./modalSlice";
+import EditableTagList from "./EditableTagList";
 
 import type { Dispatch } from "./store";
 import type { HuntId, PuzzleId } from "./types";
@@ -29,6 +30,9 @@ function EditPuzzleModal({
   const [newIsMeta, setNewIsMeta] = React.useState(isMeta);
   const [createChannels, setCreateChannels] = React.useState(hasChannels);
   const dispatch = useDispatch<Dispatch>();
+
+  const tags = useSelector(selectPuzzleTags);
+
   const onSubmit = (e: FormEvent) => {
     e.preventDefault();
     dispatch(
@@ -80,6 +84,11 @@ function EditPuzzleModal({
             checked={newIsMeta}
             onChange={(e: ChangeEvent) => setNewIsMeta(e.target.checked)}
           />
+          <h5 style={{ textAlign: "center" }}>Parent Metas</h5>
+          <EditableTagList
+            puzzleId={puzzleId}
+            tags={tags.filter((tag) => tag.is_meta && tag.name != name)}
+          />
           <Form.Check
             type="checkbox"
             label="Create discord channels"

hunts/src/EditPuzzleTagsModal.tsx

@@ -38,12 +38,6 @@ function EditPuzzleTagsModal({
         <Modal.Title>Edit Tags for {puzzleName}</Modal.Title>
       </Modal.Header>
       <Modal.Body>
-        <h5 style={{ textAlign: "center" }}>Metas</h5>
-        <EditableTagList
-          puzzleId={puzzleId}
-          tags={allTags.filter((tag) => tag.is_meta)}
-        />
-        <br />
         <h5 style={{ textAlign: "center" }}>Locations</h5>
         <EditableTagList
           puzzleId={puzzleId}

hunts/src/NameCell.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import { Badge, Popover, OverlayTrigger } from "react-bootstrap";
 import { useSelector, useDispatch } from "react-redux";
-import { faWrench, faTag } from "@fortawesome/free-solid-svg-icons";
+import { faWrench } from "@fortawesome/free-solid-svg-icons";
 import { showModal } from "./modalSlice";
 import ClickableIcon from "./ClickableIcon";
 import { toggleCollapsed } from "./collapsedPuzzlesSlice";
@@ -170,21 +170,6 @@ export default function NameCell({
                 })
               )
             }
-          />{" "}
-          <ClickableIcon
-            icon={faTag}
-            onClick={() =>
-              dispatch(
-                showModal({
-                  type: "EDIT_TAGS",
-                  props: {
-                    huntId,
-                    puzzleId: row.values.id,
-                    puzzleName: row.values.name,
-                  },
-                })
-              )
-            }
           />
         </div>
       </div>

hunts/src/TagCell.tsx

@@ -1,13 +1,17 @@
 import React from "react";
 import { useDispatch, useSelector } from "react-redux";
 import { showModal } from "./modalSlice";
+import { faTag } from "@fortawesome/free-solid-svg-icons";
 import { toggleFilterTag } from "./filterSlice";
 import TagPill from "./TagPill";
+import ClickableIcon from "./ClickableIcon";
 
-import type { Puzzle, Row } from "./types";
+import type { RootState } from "./store";
+import type { Hunt, Puzzle, Row } from "./types";
 
 function TagCell({ row }: { row: Row<Puzzle> }) {
   const dispatch = useDispatch();
+  const { id: huntId } = useSelector<RootState, Hunt>((state) => state.hunt);
   const puzzleId = row.original.id;
 
   const shouldShowMetaTags =
@@ -20,12 +24,28 @@ function TagCell({ row }: { row: Row<Puzzle> }) {
     <>
       {tagsToShow.map(({ name, color, id }) => (
         <TagPill
-          name={name}
-          color={color}
-          key={name}
-          onClick={() => dispatch(toggleFilterTag({ name, color, id }))}
+        name={name}
+        color={color}
+        key={name}
+        onClick={() => dispatch(toggleFilterTag({ name, color, id }))}
         />
       ))}{" "}
+
+      <ClickableIcon
+      icon={faTag}
+      onClick={() =>
+        dispatch(
+          showModal({
+            type: "EDIT_TAGS",
+            props: {
+              huntId,
+              puzzleId: row.values.id,
+              puzzleName: row.values.name,
+            },
+          })
+        )
+      }
+      />{" "}
     </>
   );
 }