chore(react):start porting note map

apps/client/src/widgets/note_map/NoteMap.css

@@ -0,0 +1,62 @@
+.note-detail-note-map {
+            height: 100%;
+    overflow: hidden;
+}
+
+/* Style Ui Element to Drag Nodes */
+.fixnodes-type-switcher {
+    display: flex;
+    align-items: center;
+    z-index: 10; /* should be below dropdown (note actions) */
+    border-radius: .2rem;
+}
+
+.fixnodes-type-switcher button.toggled {
+    background: var(--active-item-background-color);
+    color: var(--active-item-text-color);
+}
+
+/* Start of styling the slider */
+.fixnodes-type-switcher input[type="range"] {
+
+    /* removing default appearance */
+    -webkit-appearance: none;
+    appearance: none;
+    margin-left: 15px;
+    width: 150px;
+}
+
+/* Changing slider tracker */
+.fixnodes-type-switcher input[type="range"]::-webkit-slider-runnable-track {
+    height: 4px;
+    background-color: var(--main-border-color);
+    border-radius: 4px;
+}
+
+/* Changing Slider Thumb */
+.fixnodes-type-switcher input[type="range"]::-webkit-slider-thumb {
+    /* removing default appearance */
+    -webkit-appearance: none;
+    appearance: none;
+    /* creating a custom design */
+    height: 15px;
+    width: 15px;
+    margin-top:-5px;
+    background-color: var(--accented-background-color);
+    border: 1px solid var(--main-text-color);
+    border-radius: 50%;
+}
+
+.fixnodes-type-switcher input[type="range"]::-moz-range-track {
+    background-color: var(--main-border-color);
+    border-radius: 4px;
+}
+
+.fixnodes-type-switcher input[type="range"]::-moz-range-thumb {
+    background-color: var(--accented-background-color);
+    border-color: var(--main-text-color);
+    height: 10px;
+    width: 10px;
+}
+
+/* End of styling the slider */

apps/client/src/widgets/note_map/NoteMap.tsx

@@ -0,0 +1,42 @@
+import { useEffect, useRef, useState } from "preact/hooks";
+import "./NoteMap.css";
+import { rgb2hex } from "./utils";
+
+interface CssData {
+    fontFamily: string;
+    textColor: string;
+    mutedTextColor: string;
+}
+
+export default function NoteMap() {
+    const containerRef = useRef<HTMLDivElement>(null);
+    const styleResolverRef = useRef<HTMLDivElement>(null);
+    const [ cssData, setCssData ] = useState<CssData>();
+    console.log("Got CSS ", cssData);
+
+    useEffect(() => {
+        if (!containerRef.current || !styleResolverRef.current) return;
+        setCssData(getCssData(containerRef.current, styleResolverRef.current));
+    }, []);
+
+    return (
+        <div className="note-map-widget">
+            <div ref={styleResolverRef} class="style-resolver" />
+
+            <div ref={containerRef} className="note-map-container">
+                Container goes here.
+            </div>
+        </div>
+    )
+}
+
+function getCssData(container: HTMLElement, styleResolver: HTMLElement): CssData {
+    const containerStyle = window.getComputedStyle(container);
+    const styleResolverStyle = window.getComputedStyle(styleResolver);
+
+    return {
+        fontFamily: containerStyle.fontFamily,
+        textColor: rgb2hex(containerStyle.color),
+        mutedTextColor: rgb2hex(styleResolverStyle.color)
+    }
+}

apps/client/src/widgets/note_map/utils.ts

@@ -0,0 +1,6 @@
+export function rgb2hex(rgb: string) {
+    return `#${(rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/) || [])
+        .slice(1)
+        .map((n) => parseInt(n, 10).toString(16).padStart(2, "0"))
+        .join("")}`;
+}