feat: add mail sent or received viz (#238)

src/renderer/components/viewer/CirclePacking.tsx

@@ -9,6 +9,7 @@ import { useContextMenuEventAsClick } from "../../hooks/useContextMenuEventAsCli
 import { useDymViewerNavigation } from "../../hooks/useDymViewerNavigation";
 import { usePstContentCounterPerLevel } from "../../store/PstContentCounterPerLevelStore";
 import { usePstFMInfosStore } from "../../store/PstFMInfosStore";
+import { useSynthesisStore } from "../../store/SynthesisStore";
 import { tagManagerStore } from "../../store/TagManagerStore";
 import { COLORS, ROOT } from "../../utils/constants";
 import type { CirclePackingCommonProps } from "../../utils/dashboard-viewer";
@@ -49,11 +50,10 @@ export const CirclePacking: React.FC = () => {
         resetView,
         computePreviousView,
     } = useDymViewerNavigation();
-
     const { setMainInfos, startFocus, isInfoFocus, mainInfos, cancelFocus } =
         usePstFMInfosStore();
     const { setHoveredNode, keepIds, deleteIds } = tagManagerStore();
-
+    const { ownerId } = useSynthesisStore();
     useContextMenuEventAsClick(circlePackingRef.current);
 
     const [anchorX, setAnchorX] = useState(0);
@@ -142,7 +142,7 @@ export const CirclePacking: React.FC = () => {
     }, 200);
 
     const handleBorderColor: CirclePackingCommonProps["borderColor"] = (node) =>
-        handleFocusItemBorderColor(node, mainInfos, isInfoFocus);
+        handleFocusItemBorderColor(node, mainInfos, isInfoFocus, ownerId);
 
     const goToPreviousView = () => {
         computePreviousView();

src/renderer/store/SynthesisStore.tsx

@@ -38,7 +38,6 @@ export const synthesisIdHandler = (
 ): void => {
     const target = event.target as HTMLElement;
     const handler = type === "deleted" ? setDeletedFolderId : setMailBoxOwnerId;
-
     handler(target.id);
 };
 

src/renderer/utils/constants.ts

@@ -34,6 +34,7 @@ export const COLORS = {
     CARD_LABEL_PURPLE: "purple",
     DELETE_COLOR: "rgb(247, 94, 66)",
     KEEP_COLOR: "#62bc6f",
+    MAIL_FROM_ME: "rgb(255 188 68)",
     RED: "red",
     TRANSPARENT: "transparent",
 } as const;

src/renderer/utils/dashboard-viewer.ts

@@ -87,10 +87,16 @@ export const sanitizeMailDate = (date: Date): string =>
 export const handleFocusItemBorderColor = (
     node: ComputedDatum<DefaultViewerObject>,
     mainInfos: MainInfos | undefined,
-    isInfoFocus: boolean
+    isInfoFocus: boolean,
+    ownerId: string
 ): string => {
     if (mainInfos && isInfoFocus && node.data.id === mainInfos.id)
         return COLORS.BLACK;
+    else if (
+        isMailViewerObject(node.data) &&
+        ownerId === node.data.email.from.email
+    )
+        return COLORS.MAIL_FROM_ME;
     return COLORS.TRANSPARENT;
 };