refactor: make details node lists consistent

also slightly increase gap to make it closer to the gap between justifcations in the justification details.
amelioro · Oct 24, 2024 · 737d85b · 737d85b
1 parent f99e6c6
commit 737d85b
Show file tree

Hide file tree

Showing 5 changed files with 30 additions and 57 deletions.
diff --git a/src/web/topic/components/TopicPane/DetailsResearchSection.tsx b/src/web/topic/components/TopicPane/DetailsResearchSection.tsx
@@ -3,6 +3,7 @@ import { ListItem, ListItemIcon, ListItemText, Stack, Typography } from "@mui/ma
 
 import { AddNodeButton } from "@/web/topic/components/Node/AddNodeButton";
 import { EditableNode } from "@/web/topic/components/Node/EditableNode";
+import { NodeList } from "@/web/topic/components/TopicPane/NodeList";
 import { useResearchNodes } from "@/web/topic/store/graphPartHooks";
 import { Node } from "@/web/topic/utils/graph";
 
@@ -70,22 +71,15 @@ export const DetailsResearchSection = ({ node }: Props) => {
         )}
       </Stack>
 
-      <Stack
-        direction="row"
-        justifyContent="center"
-        alignItems="stretch"
-        flexWrap="wrap"
-        useFlexGap
-        spacing="2px"
-      >
+      <NodeList>
         {researchNodes.length > 0 ? (
           researchNodes.map((researchNode) => (
             <EditableNode key={researchNode.id} node={researchNode} />
           ))
         ) : (
           <Typography variant="body2">No research nodes yet!</Typography>
         )}
-      </Stack>
+      </NodeList>
     </>
   );
 };
diff --git a/src/web/topic/components/TopicPane/FactDetails.tsx b/src/web/topic/components/TopicPane/FactDetails.tsx
@@ -4,6 +4,7 @@ import { ListItem, ListItemIcon, ListItemText, Stack, Typography } from "@mui/ma
 import { StandaloneEdge } from "@/web/topic/components/Edge/StandaloneEdge";
 import { AddNodeButton } from "@/web/topic/components/Node/AddNodeButton";
 import { EditableNode } from "@/web/topic/components/Node/EditableNode";
+import { NodeList } from "@/web/topic/components/TopicPane/NodeList";
 import { useFactDetails } from "@/web/topic/store/nodeTypeHooks";
 import { Node } from "@/web/topic/utils/graph";
 
@@ -23,22 +24,15 @@ export const FactDetails = ({ factNode }: Props) => {
         <ListItemText primary="Relevant For" />
       </ListItem>
 
-      <Stack
-        direction="row"
-        justifyContent="center"
-        alignItems="stretch"
-        flexWrap="wrap"
-        useFlexGap
-        spacing="2px"
-      >
+      <NodeList>
         {nodesRelevantFor.length === 0 && edgesRelevantFor.length === 0 && (
           <Typography variant="body2">No relevant parts yet!</Typography>
         )}
         {nodesRelevantFor.length > 0 &&
           nodesRelevantFor.map((node) => <EditableNode key={node.id} node={node} />)}
         {edgesRelevantFor.length > 0 &&
           edgesRelevantFor.map((edge) => <StandaloneEdge key={edge.id} edge={edge} />)}
-      </Stack>
+      </NodeList>
 
       <ListItem disablePadding={false}>
         <ListItemIcon>
@@ -61,21 +55,13 @@ export const FactDetails = ({ factNode }: Props) => {
         />
       </Stack>
 
-      <Stack
-        direction="row"
-        justifyContent="center"
-        alignItems="stretch"
-        flexWrap="wrap"
-        useFlexGap
-        spacing="2px"
-        marginBottom="8px"
-      >
+      <NodeList>
         {sources.length > 0 ? (
           sources.map((source) => <EditableNode key={source.id} node={source} />)
         ) : (
           <Typography variant="body2">No sources yet!</Typography>
         )}
-      </Stack>
+      </NodeList>
     </>
   );
 };
diff --git a/src/web/topic/components/TopicPane/NodeList.tsx b/src/web/topic/components/TopicPane/NodeList.tsx
@@ -0,0 +1,14 @@
+import { ReactNode } from "react";
+
+interface Props {
+  className?: string;
+  children: ReactNode;
+}
+
+export const NodeList = ({ className, children }: Props) => {
+  return (
+    <div className={`${className} flex flex-wrap items-stretch justify-center gap-0.5`}>
+      {children}
+    </div>
+  );
+};
diff --git a/src/web/topic/components/TopicPane/QuestionDetails.tsx b/src/web/topic/components/TopicPane/QuestionDetails.tsx
@@ -4,6 +4,7 @@ import { ListItem, ListItemIcon, ListItemText, Stack, Typography } from "@mui/ma
 import { StandaloneEdge } from "@/web/topic/components/Edge/StandaloneEdge";
 import { AddNodeButton } from "@/web/topic/components/Node/AddNodeButton";
 import { EditableNode } from "@/web/topic/components/Node/EditableNode";
+import { NodeList } from "@/web/topic/components/TopicPane/NodeList";
 import { useQuestionDetails } from "@/web/topic/store/nodeTypeHooks";
 import { Node, isNode } from "@/web/topic/utils/graph";
 
@@ -58,21 +59,13 @@ export const QuestionDetails = ({ questionNode }: Props) => {
         />
       </Stack>
 
-      <Stack
-        direction="row"
-        justifyContent="center"
-        alignItems="stretch"
-        flexWrap="wrap"
-        useFlexGap
-        spacing="2px"
-        marginBottom="8px"
-      >
+      <NodeList>
         {answers.length > 0 ? (
           answers.map((answer) => <EditableNode key={answer.id} node={answer} />)
         ) : (
           <Typography variant="body2">No answers yet!</Typography>
         )}
-      </Stack>
+      </NodeList>
     </>
   );
 };
diff --git a/src/web/topic/components/TopicPane/SourceDetails.tsx b/src/web/topic/components/TopicPane/SourceDetails.tsx
@@ -4,6 +4,7 @@ import { ListItem, ListItemIcon, ListItemText, Stack, Typography } from "@mui/ma
 import { StandaloneEdge } from "@/web/topic/components/Edge/StandaloneEdge";
 import { AddNodeButton } from "@/web/topic/components/Node/AddNodeButton";
 import { EditableNode } from "@/web/topic/components/Node/EditableNode";
+import { NodeList } from "@/web/topic/components/TopicPane/NodeList";
 import { useSourceDetails } from "@/web/topic/store/nodeTypeHooks";
 import { Node } from "@/web/topic/utils/graph";
 
@@ -24,22 +25,15 @@ export const SourceDetails = ({ sourceNode }: Props) => {
         <ListItemText primary="Relevant For" />
       </ListItem>
 
-      <Stack
-        direction="row"
-        justifyContent="center"
-        alignItems="stretch"
-        flexWrap="wrap"
-        useFlexGap
-        spacing="2px"
-      >
+      <NodeList>
         {nodesRelevantFor.length === 0 && edgesRelevantFor.length === 0 && (
           <Typography variant="body2">No relevant parts yet!</Typography>
         )}
         {nodesRelevantFor.length > 0 &&
           nodesRelevantFor.map((node) => <EditableNode key={node.id} node={node} />)}
         {edgesRelevantFor.length > 0 &&
           edgesRelevantFor.map((edge) => <StandaloneEdge key={edge.id} edge={edge} />)}
-      </Stack>
+      </NodeList>
 
       <ListItem disablePadding={false}>
         <ListItemIcon>
@@ -73,21 +67,13 @@ export const SourceDetails = ({ sourceNode }: Props) => {
         />
       </Stack>
 
-      <Stack
-        direction="row"
-        justifyContent="center"
-        alignItems="stretch"
-        flexWrap="wrap"
-        useFlexGap
-        spacing="2px"
-        marginBottom="8px"
-      >
+      <NodeList>
         {mentions.length > 0 ? (
           mentions.map((mentioned) => <EditableNode key={mentioned.id} node={mentioned} />)
         ) : (
           <Typography variant="body2">No mentioned facts or sources yet!</Typography>
         )}
-      </Stack>
+      </NodeList>
     </>
   );
 };