Canvas: Message type icons
Change-Id: I54f9f79869e593d95cb7dcadc6085951629600a9
diff --git a/apps/canvas/front/src/Messages.tsx b/apps/canvas/front/src/Messages.tsx
index e51cf44..8cd6652 100644
--- a/apps/canvas/front/src/Messages.tsx
+++ b/apps/canvas/front/src/Messages.tsx
@@ -1,27 +1,25 @@
import { Button } from "./components/ui/button";
-import { AppNode, AppState, Message, nodeLabel, useMessages, useStateStore } from "./lib/state";
+import { AppNode, AppState, Message, nodeLabel, useMessages } from "./lib/state";
import { useCallback, useEffect, useState } from "react";
import { useNodes } from "@xyflow/react";
import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "./components/ui/accordion";
import { Badge } from "./components/ui/badge";
+import { CircleAlert, CircleX } from "lucide-react";
export function Messages() {
- const store = useStateStore();
const nodes = useNodes<AppNode>();
const [nodeMap, setNodeMap] = useState<Map<string, AppNode>>(new Map());
useEffect(() => {
setNodeMap(new Map(nodes.map((n) => [n.id, n])));
}, [nodes, setNodeMap]);
- const onClick = useCallback(
- (fn?: (state: AppState) => void) => {
- return () => {
- if (fn) {
- fn(store);
- }
- };
- },
- [store],
- );
+ const onClick = useCallback((_?: (state: AppState) => void) => {
+ return () => {
+ // TODO(gio): visual hints
+ // if (fn) {
+ // fn(store);
+ // }
+ };
+ }, []);
const messages = useMessages();
const [grouped, setGrouped] = useState<Map<string, Message[]>>(new Map());
useEffect(() => {
@@ -47,21 +45,22 @@
<Badge>{messages.length}</Badge>
<div>{id === "global" ? "Global" : nodeLabel(nodeMap.get(id)!)}</div>
</AccordionTrigger>
- <AccordionContent>
- <div className="flex flex-col !px-4">
- {messages.map((m) => (
- <Button
- key={m.id}
- variant="ghost"
- className="justify-start !h-fit !py-0"
- onMouseOver={onClick(m.onHighlight)}
- onMouseLeave={onClick(m.onLooseHighlight)}
- onClick={onClick(m.onClick)}
- >
- {m.message}
- </Button>
- ))}
- </div>
+ <AccordionContent className="flex flex-col !px-1">
+ {messages.map((m) => (
+ <Button
+ key={m.id}
+ variant="ghost"
+ className="justify-start !h-fit !py-0 flex flex-row gap-1 items-center"
+ onMouseOver={onClick(m.onHighlight)}
+ onMouseLeave={onClick(m.onLooseHighlight)}
+ onClick={onClick(m.onClick)}
+ >
+ {m.type === "WARNING" && <CircleAlert className="w-4 h-4" color="brown" />}
+ {m.type === "FATAL" && <CircleX className="w-4 h-4" color="red" />}
+ {m.type === "INFO" && <div className="w-4 h-4" />}
+ <div>{m.message}</div>
+ </Button>
+ ))}
</AccordionContent>
</AccordionItem>
))}