Merge pull request #607 from amelioro/use-tabs-for-details-pane

Use tabs for details pane

src/web/comment/store/commentStore.ts

@@ -240,5 +240,5 @@ export const viewComment = (commentId: string) => {
   const commentParentGraphPartId =
     threadStarterComment.parentType === "topic" ? null : threadStarterComment.parentId;
   setSelected(commentParentGraphPartId);
-  emitter.emit("viewTopicDetails");
+  emitter.emit("viewComments");
 };

src/web/common/components/ContextMenu/ViewDetailsMenuItem.tsx

@@ -8,7 +8,7 @@ export const ViewDetailsMenuItem = ({ graphPart }: { graphPart: GraphPart }) =>
     <ContextMenuItem
       onClick={() => {
         setSelected(graphPart.id);
-        emitter.emit("viewTopicDetails");
+        emitter.emit("viewBasics");
       }}
     >
       View details

src/web/common/event.ts

@@ -10,7 +10,10 @@ interface Events {
   changedDiagramFilter: () => void;
   changedLayoutConfig: () => void;
   changedView: (newView: ViewState) => void;
-  viewTopicDetails: () => void;
+  viewBasics: () => void;
+  viewJustification: () => void;
+  viewResearch: () => void;
+  viewComments: () => void;
   partSelected: (partId: string | null) => void;
 }
 

src/web/topic/components/Indicator/CommentIndicator.tsx

@@ -21,7 +21,7 @@ export const CommentIndicator = ({ graphPartId, graphPartType, partColor }: Prop
 
   const onClick = useCallback(() => {
     setSelected(graphPartId);
-    emitter.emit("viewTopicDetails");
+    emitter.emit("viewComments");
   }, [graphPartId]);
 
   if (commentCount === 0) return <></>;

src/web/topic/components/Indicator/ContentIndicators.tsx

@@ -17,9 +17,9 @@ interface Props {
 const ContentIndicatorsBase = ({ graphPartId, graphPartType, color, className }: Props) => {
   return (
     <Stack direction="row" margin="2px" spacing="2px" className={className}>
+      <JustificationIndicator graphPartId={graphPartId} partColor={color} />
       <QuestionIndicator graphPartId={graphPartId} partColor={color} />
       <FoundResearchIndicator graphPartId={graphPartId} partColor={color} />
-      <JustificationIndicator graphPartId={graphPartId} partColor={color} />
       <CommentIndicator graphPartId={graphPartId} graphPartType={graphPartType} partColor={color} />
     </Stack>
   );

src/web/topic/components/Indicator/DetailsIndicator.tsx

@@ -15,7 +15,7 @@ export const DetailsIndicator = ({ graphPartId, notes }: Props) => {
 
   const onClick = useCallback(() => {
     setSelected(graphPartId);
-    emitter.emit("viewTopicDetails");
+    emitter.emit("viewBasics");
   }, [graphPartId]);
 
   return <Indicator Icon={Notes} title={"View details"} onClick={onClick} filled={hasDetails} />;

src/web/topic/components/Indicator/FoundResearchIndicator.tsx

@@ -22,7 +22,7 @@ export const FoundResearchIndicator = ({ graphPartId, partColor }: Props) => {
 
   const onClick = useCallback(() => {
     setSelected(graphPartId);
-    emitter.emit("viewTopicDetails");
+    emitter.emit("viewResearch");
   }, [graphPartId]);
 
   if (foundResearchNodes.length === 0) return <></>;

src/web/topic/components/Indicator/JustificationIndicator.tsx

@@ -22,7 +22,7 @@ export const JustificationIndicator = ({ graphPartId, partColor }: Props) => {
 
   const onClick = useCallback(() => {
     setSelected(graphPartId);
-    emitter.emit("viewTopicDetails");
+    emitter.emit("viewJustification");
   }, [graphPartId]);
 
   if (justificationNodes.length === 0) return <></>;

src/web/topic/components/Indicator/QuestionIndicator.tsx

@@ -21,7 +21,7 @@ export const QuestionIndicator = ({ graphPartId, partColor }: Props) => {
 
   const onClick = useCallback(() => {
     setSelected(graphPartId);
-    emitter.emit("viewTopicDetails");
+    emitter.emit("viewResearch");
   }, [graphPartId]);
 
   if (questions.length === 0) return <></>;

src/web/topic/components/TopicPane/CommentSection.tsx

@@ -1,5 +1,4 @@
-import { ChatBubble } from "@mui/icons-material";
-import { Link, ListItem, ListItemIcon, ListItemText } from "@mui/material";
+import { Link, ListItem } from "@mui/material";
 
 import { CommentParentType } from "@/common/comment";
 import { Draft } from "@/web/comment/components/Draft";
@@ -31,24 +30,22 @@ export const CommentSection = ({ parentId, parentType }: Props) => {
 
   return (
     <>
-      <ListItem disablePadding={false}>
-        <ListItemIcon>
-          <ChatBubble />
-        </ListItemIcon>
-        <ListItemText primary="Comments" />
-        {resolvedCount > 0 && (
+      {resolvedCount > 0 && (
+        // extra space to the left feels a little awkward, but this can't be on the same line as the header
+        // because the header can be within a list of tabs
+        <ListItem disablePadding={false} className="justify-end">
           <Link
             component="button"
             variant="body2"
             onClick={(e) => {
               toggleShowResolvedComments(!showResolved);
-              e.preventDefault(); // without this, page refreshes - not sure why, since component is as button, not an anchor
+              e.preventDefault(); // without this, page refreshes - not sure why, since component is a button, not an anchor
             }}
           >
             {showResolved ? "Hide resolved" : "Show resolved"}
           </Link>
-        )}
-      </ListItem>
+        </ListItem>
+      )}
 
       <ListItem disablePadding={false}>
         <div className="w-full space-y-2 text-wrap text-sm">

src/web/topic/components/TopicPane/DetailsBasicsSection.tsx

@@ -0,0 +1,82 @@
+import { zodResolver } from "@hookform/resolvers/zod";
+import { ListItem, TextField } from "@mui/material";
+import { useEffect } from "react";
+import { useForm } from "react-hook-form";
+import { z } from "zod";
+
+import { nodeSchema } from "@/common/node";
+import { useSessionUser } from "@/web/common/hooks";
+import { AnswerDetails } from "@/web/topic/components/TopicPane/AnswerDetails";
+import { FactDetails } from "@/web/topic/components/TopicPane/FactDetails";
+import { QuestionDetails } from "@/web/topic/components/TopicPane/QuestionDetails";
+import { SourceDetails } from "@/web/topic/components/TopicPane/SourceDetails";
+import { setGraphPartNotes } from "@/web/topic/store/actions";
+import { useUserCanEditTopicData } from "@/web/topic/store/userHooks";
+import { GraphPart, isNodeType } from "@/web/topic/utils/graph";
+
+const formSchema = z.object({
+  // same restrictions as edge, so we should be fine reusing node's schema
+  notes: nodeSchema.shape.notes,
+});
+type FormData = z.infer<typeof formSchema>;
+
+interface Props {
+  graphPart: GraphPart;
+}
+
+export const DetailsBasicsSection = ({ graphPart }: Props) => {
+  const { sessionUser } = useSessionUser();
+  const userCanEditTopicData = useUserCanEditTopicData(sessionUser?.username);
+
+  const {
+    register,
+    reset,
+    handleSubmit,
+    formState: { errors },
+  } = useForm<FormData>({
+    mode: "onBlur",
+    reValidateMode: "onBlur",
+    resolver: zodResolver(formSchema),
+    defaultValues: {
+      notes: graphPart.data.notes,
+    },
+  });
+
+  useEffect(() => {
+    // when notes changes from outside of form (e.g. undo/redo), make sure form is updated
+    reset({ notes: graphPart.data.notes });
+  }, [graphPart.data.notes, reset]);
+
+  return (
+    <form
+      onBlur={(event) => {
+        void handleSubmit((data) => {
+          if (graphPart.data.notes === data.notes) return;
+          setGraphPartNotes(graphPart, data.notes);
+        })(event);
+      }}
+    >
+      <ListItem disablePadding={false}>
+        <TextField
+          {...register("notes")}
+          label="Notes"
+          error={!!errors.notes}
+          helperText={errors.notes?.message}
+          multiline
+          fullWidth
+          size="small"
+          InputProps={{ className: "text-sm", readOnly: !userCanEditTopicData }}
+          InputLabelProps={{ className: "text-sm" }}
+          maxRows={10}
+        />
+      </ListItem>
+
+      {/* Potentially these could be in another tab like "specific for this node type"...? */}
+      {/* but these seem low-use anyway and more effort to organize optimally, so we'll just do this for now. */}
+      {isNodeType(graphPart, "question") && <QuestionDetails questionNode={graphPart} />}
+      {isNodeType(graphPart, "answer") && <AnswerDetails answerNode={graphPart} />}
+      {isNodeType(graphPart, "fact") && <FactDetails factNode={graphPart} />}
+      {isNodeType(graphPart, "source") && <SourceDetails sourceNode={graphPart} />}
+    </form>
+  );
+};

src/web/topic/components/TopicPane/DetailsJustificationSection.tsx

@@ -1,5 +1,4 @@
-import { ThumbsUpDown } from "@mui/icons-material";
-import { Box, ListItem, ListItemIcon, ListItemText, Stack, Typography } from "@mui/material";
+import { Box, Stack, Typography } from "@mui/material";
 
 import { justificationNodeTypes } from "@/common/node";
 import { JustificationTreeIndicator } from "@/web/topic/components/Indicator/JustificationTreeIndicator";
@@ -23,13 +22,6 @@ export const DetailsJustificationSection = ({ graphPart }: Props) => {
 
   return (
     <>
-      <ListItem disablePadding={false}>
-        <ListItemIcon>
-          <ThumbsUpDown />
-        </ListItemIcon>
-        <ListItemText primary="Justification" />
-      </ListItem>
-
       {/* spacing is the amount that centers the add buttons above the columns */}
       <Stack
         direction="row"

src/web/topic/components/TopicPane/DetailsResearchSection.tsx

@@ -1,5 +1,4 @@
-import { School } from "@mui/icons-material";
-import { ListItem, ListItemIcon, ListItemText, Stack, Typography } from "@mui/material";
+import { Stack, Typography } from "@mui/material";
 
 import { AddNodeButton } from "@/web/topic/components/Node/AddNodeButton";
 import { EditableNode } from "@/web/topic/components/Node/EditableNode";
@@ -21,13 +20,6 @@ export const DetailsResearchSection = ({ node }: Props) => {
 
   return (
     <>
-      <ListItem disablePadding={false}>
-        <ListItemIcon>
-          <School />
-        </ListItemIcon>
-        <ListItemText primary="Research" />
-      </ListItem>
-
       {/* spacing is the amount that centers the add buttons above the columns */}
       <Stack direction="row" justifyContent="center" alignItems="center" marginBottom="8px">
         <AddNodeButton