From 5e5da8c95b4ffcddede48fb939cef2e843ca8876 Mon Sep 17 00:00:00 2001
From: bflatastic <bombayapirat@gmail.com>
Date: Tue, 22 Apr 2025 02:14:57 +0700
Subject: [PATCH] added shared tooltip component + asset modal to use new
 shared components

---
 .../src/components/signaled/TopBar/TopBar.tsx |  15 +-
 .../PageEnigma/comps/AssetMenu/AssetModal.tsx |  18 ++-
 frontend/apps/editor3d/package.json           |   4 +-
 frontend/libs/components/tooltip/.babelrc     |  12 ++
 frontend/libs/components/tooltip/README.md    |   7 +
 frontend/libs/components/tooltip/package.json |  17 ++
 frontend/libs/components/tooltip/src/index.ts |   2 +
 .../tooltip/src/lib/tooltip.module.css        |   7 +
 .../tooltip/src/lib/tooltip.spec.tsx          |  12 ++
 .../components/tooltip/src/lib/tooltip.tsx    | 152 ++++++++++++++++++
 .../libs/components/tooltip/tsconfig.json     |  13 ++
 .../libs/components/tooltip/tsconfig.lib.json |  41 +++++
 .../components/tooltip/tsconfig.spec.json     |  34 ++++
 .../libs/components/tooltip/vite.config.ts    |  49 ++++++
 frontend/package-lock.json                    | 137 ++++++++--------
 frontend/tsconfig.json                        |   3 +
 16 files changed, 438 insertions(+), 85 deletions(-)
 create mode 100644 frontend/libs/components/tooltip/.babelrc
 create mode 100644 frontend/libs/components/tooltip/README.md
 create mode 100644 frontend/libs/components/tooltip/package.json
 create mode 100644 frontend/libs/components/tooltip/src/index.ts
 create mode 100644 frontend/libs/components/tooltip/src/lib/tooltip.module.css
 create mode 100644 frontend/libs/components/tooltip/src/lib/tooltip.spec.tsx
 create mode 100644 frontend/libs/components/tooltip/src/lib/tooltip.tsx
 create mode 100644 frontend/libs/components/tooltip/tsconfig.json
 create mode 100644 frontend/libs/components/tooltip/tsconfig.lib.json
 create mode 100644 frontend/libs/components/tooltip/tsconfig.spec.json
 create mode 100644 frontend/libs/components/tooltip/vite.config.ts

diff --git a/frontend/apps/editor3d/app/src/components/signaled/TopBar/TopBar.tsx b/frontend/apps/editor3d/app/src/components/signaled/TopBar/TopBar.tsx
index b1772ffe06..d691fa02ef 100644
--- a/frontend/apps/editor3d/app/src/components/signaled/TopBar/TopBar.tsx
+++ b/frontend/apps/editor3d/app/src/components/signaled/TopBar/TopBar.tsx
@@ -13,6 +13,7 @@ import { getCurrentLocationWithoutParams } from "~/utilities";
 import { Activity } from "~/pages/PageEnigma/comps/GenerateModals/Activity";
 import { LibraryModal } from "~/pages/PageEnigma/comps/LibraryModal/LibraryModal";
 import { SettingsModal } from "@storyteller/ui-settings-modal";
+import { Tooltip } from "@storyteller/ui-tooltip";
 
 function isEditorPath(path: string) {
   if (path === "/") return true;
@@ -75,12 +76,14 @@ export const TopBar = ({ pageName }: Props) => {
 
           <div className="flex justify-end gap-3.5">
             <div className="flex gap-2">
-              <Button
-                variant="secondary"
-                icon={faGear}
-                className="h-[38px] w-[38px]"
-                onClick={() => setIsSettingsModalOpen(true)}
-              />
+              <Tooltip content="Settings" position="bottom" delay={300}>
+                <Button
+                  variant="secondary"
+                  icon={faGear}
+                  className="h-[38px] w-[38px]"
+                  onClick={() => setIsSettingsModalOpen(true)}
+                />
+              </Tooltip>
               <Button
                 variant="secondary"
                 icon={faImages}
diff --git a/frontend/apps/editor3d/app/src/pages/PageEnigma/comps/AssetMenu/AssetModal.tsx b/frontend/apps/editor3d/app/src/pages/PageEnigma/comps/AssetMenu/AssetModal.tsx
index af9257177c..5d58f2a139 100644
--- a/frontend/apps/editor3d/app/src/pages/PageEnigma/comps/AssetMenu/AssetModal.tsx
+++ b/frontend/apps/editor3d/app/src/pages/PageEnigma/comps/AssetMenu/AssetModal.tsx
@@ -14,9 +14,18 @@ import {
   faImage,
 } from "@fortawesome/pro-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { Button, CloseButton, Input, Tooltip } from "~/components";
+import { Tooltip } from "@storyteller/ui-tooltip";
+import { Button } from "@storyteller/ui-button";
+import { CloseButton } from "@storyteller/ui-close-button";
+import { Input } from "@storyteller/ui-input";
 import { TabSelector } from "~/components/reusable/TabSelector";
-import { useState, useEffect, useMemo, useRef } from "react";
+import React, {
+  useState,
+  useEffect,
+  useMemo,
+  useRef,
+  ChangeEvent,
+} from "react";
 import { ItemElements } from "../SidePanelTabs/sharedComps/ItemElements";
 import {
   demoSkyboxItems,
@@ -412,6 +421,7 @@ export const AssetModal = () => {
         onClose={handleClose}
         className="h-[640px] max-w-4xl"
         childPadding={false}
+        showClose={false}
       >
         <div className="grid h-full grid-cols-12 gap-3">
           <div className="relative col-span-3 flex h-full flex-col p-3 pt-2 after:absolute after:right-0 after:top-0 after:h-full after:w-px after:bg-gray-200 after:dark:bg-white/10">
@@ -498,7 +508,9 @@ export const AssetModal = () => {
                       inputClassName="pr-2.5"
                       icon={faSearch}
                       value={searchTerm}
-                      onChange={(e) => setSearchTerm(e.target.value)}
+                      onChange={(e: ChangeEvent<HTMLInputElement>) =>
+                        setSearchTerm(e.target.value)
+                      }
                       iconClassName="text-white/60"
                     />
                     {searchTerm && (
diff --git a/frontend/apps/editor3d/package.json b/frontend/apps/editor3d/package.json
index 9abcead56e..13a115d6da 100644
--- a/frontend/apps/editor3d/package.json
+++ b/frontend/apps/editor3d/package.json
@@ -89,9 +89,9 @@
     "@storybook/test": "^8.1.10",
     "@types/deep-equal": "^1.0.4",
     "@types/jest": "^29.5.12",
-    "@types/react": "^18.2.20",
+    "@types/react": "^19.0.0",
     "@types/react-copy-to-clipboard": "^5.0.7",
-    "@types/react-dom": "^18.2.7",
+    "@types/react-dom": "^19.0.0",
     "@types/react-helmet": "^6.1.11",
     "@types/three": "^0.162.0",
     "@types/uuid": "^9.0.8",
diff --git a/frontend/libs/components/tooltip/.babelrc b/frontend/libs/components/tooltip/.babelrc
new file mode 100644
index 0000000000..1ea870ead4
--- /dev/null
+++ b/frontend/libs/components/tooltip/.babelrc
@@ -0,0 +1,12 @@
+{
+  "presets": [
+    [
+      "@nx/react/babel",
+      {
+        "runtime": "automatic",
+        "useBuiltIns": "usage"
+      }
+    ]
+  ],
+  "plugins": []
+}
diff --git a/frontend/libs/components/tooltip/README.md b/frontend/libs/components/tooltip/README.md
new file mode 100644
index 0000000000..212d476025
--- /dev/null
+++ b/frontend/libs/components/tooltip/README.md
@@ -0,0 +1,7 @@
+# @storyteller/ui-tooltip
+
+This library was generated with [Nx](https://nx.dev).
+
+## Running unit tests
+
+Run `nx test @storyteller/ui-tooltip` to execute the unit tests via [Vitest](https://vitest.dev/).
diff --git a/frontend/libs/components/tooltip/package.json b/frontend/libs/components/tooltip/package.json
new file mode 100644
index 0000000000..3fd43af6e1
--- /dev/null
+++ b/frontend/libs/components/tooltip/package.json
@@ -0,0 +1,17 @@
+{
+  "name": "@storyteller/ui-tooltip",
+  "version": "0.0.1",
+  "type": "module",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    "./package.json": "./package.json",
+    ".": {
+      "development": "./src/index.ts",
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "default": "./dist/index.js"
+    }
+  }
+}
diff --git a/frontend/libs/components/tooltip/src/index.ts b/frontend/libs/components/tooltip/src/index.ts
new file mode 100644
index 0000000000..0a6f3d0cbd
--- /dev/null
+++ b/frontend/libs/components/tooltip/src/index.ts
@@ -0,0 +1,2 @@
+
+export * from './lib/tooltip';
diff --git a/frontend/libs/components/tooltip/src/lib/tooltip.module.css b/frontend/libs/components/tooltip/src/lib/tooltip.module.css
new file mode 100644
index 0000000000..d0246c74b9
--- /dev/null
+++ b/frontend/libs/components/tooltip/src/lib/tooltip.module.css
@@ -0,0 +1,7 @@
+/*
+ * Replace this with your own classes
+ *
+ * e.g.
+ * .container {
+ * }
+*/
\ No newline at end of file
diff --git a/frontend/libs/components/tooltip/src/lib/tooltip.spec.tsx b/frontend/libs/components/tooltip/src/lib/tooltip.spec.tsx
new file mode 100644
index 0000000000..aeee5dc5f5
--- /dev/null
+++ b/frontend/libs/components/tooltip/src/lib/tooltip.spec.tsx
@@ -0,0 +1,12 @@
+import { render } from '@testing-library/react';
+
+import Tooltip from './tooltip';
+
+describe('Tooltip', () => {
+  
+  it('should render successfully', () => {
+    const { baseElement } = render(<Tooltip />);
+    expect(baseElement).toBeTruthy();
+  });
+  
+});
diff --git a/frontend/libs/components/tooltip/src/lib/tooltip.tsx b/frontend/libs/components/tooltip/src/lib/tooltip.tsx
new file mode 100644
index 0000000000..f069a00c92
--- /dev/null
+++ b/frontend/libs/components/tooltip/src/lib/tooltip.tsx
@@ -0,0 +1,152 @@
+import React, { useState, useRef, useEffect } from "react";
+import { Transition } from "@headlessui/react";
+import { twMerge } from "tailwind-merge";
+
+interface TooltipProps {
+  children: React.ReactElement;
+  content: React.ReactNode;
+  position: "top" | "bottom" | "left" | "right";
+  className?: string;
+  delay?: number;
+  closeOnClick?: boolean;
+}
+
+export const Tooltip = ({
+  children,
+  content,
+  position,
+  className,
+  delay = 300,
+  closeOnClick = false,
+}: TooltipProps) => {
+  const [isShowing, setIsShowing] = useState(false);
+  const triggerRef = useRef<HTMLDivElement>(null);
+  const tooltipRef = useRef<HTMLDivElement>(null);
+
+  const checkForOpenPopovers = () => {
+    if (!triggerRef.current) return false;
+    return (
+      triggerRef.current.querySelectorAll('[data-headlessui-state="open"]')
+        .length > 0
+    );
+  };
+
+  useEffect(() => {
+    const observer = new MutationObserver((mutations) => {
+      mutations.forEach((mutation) => {
+        if (
+          mutation.type === "attributes" &&
+          mutation.attributeName === "data-headlessui-state"
+        ) {
+          const target = mutation.target as HTMLElement;
+          if (target.getAttribute("data-headlessui-state") === "open") {
+            setIsShowing(false);
+          }
+        }
+      });
+    });
+
+    if (triggerRef.current) {
+      observer.observe(triggerRef.current, {
+        attributes: true,
+        subtree: true,
+        attributeFilter: ["data-headlessui-state"],
+      });
+    }
+
+    return () => {
+      observer.disconnect();
+    };
+  }, []);
+
+  const getStyleForPosition = () => {
+    if (triggerRef.current) {
+      const rect = triggerRef.current.getBoundingClientRect();
+      switch (position) {
+        case "top":
+          return {
+            bottom: rect.height + 10,
+            left: "50%",
+            transform: "translateX(-50%)",
+          };
+        case "bottom":
+          return {
+            top: rect.height + 10,
+            left: "50%",
+            transform: "translateX(-50%)",
+          };
+        case "left":
+          return {
+            right: rect.width + 10,
+            top: "50%",
+            transform: "translateY(-50%)",
+          };
+        case "right":
+          return {
+            left: rect.width + 10,
+            top: "50%",
+            transform: "translateY(-50%)",
+          };
+        default:
+          return {};
+      }
+    }
+    return {};
+  };
+
+  const handleClick = (e: React.MouseEvent) => {
+    if (closeOnClick) {
+      setIsShowing(false);
+      e.stopPropagation();
+    }
+  };
+
+  return (
+    <div
+      ref={triggerRef}
+      onMouseEnter={() => {
+        if (!checkForOpenPopovers()) {
+          setIsShowing(true);
+        }
+      }}
+      onMouseLeave={() => {
+        setIsShowing(false);
+      }}
+      onClick={handleClick}
+      className="relative"
+    >
+      {children}
+      <Transition
+        show={isShowing}
+        enter={twMerge(
+          "transition ease-out duration-200",
+          delay ? `delay-[${delay}ms]` : "delay-[300ms]"
+        )}
+        enterFrom="opacity-0"
+        enterTo="opacity-100"
+        leave="transition ease-in duration-150"
+        leaveFrom="opacity-100"
+        leaveTo="opacity-0"
+      >
+        <div
+          ref={tooltipRef}
+          style={{
+            ...getStyleForPosition(),
+            transitionDelay: `${delay}ms`,
+            transitionProperty: "opacity",
+            transitionDuration: "200ms",
+            transitionTimingFunction: "ease-out",
+          }}
+          className={twMerge(
+            "pointer-events-none absolute z-10 w-max rounded-lg bg-[#5F5F68] px-2.5 py-1.5 text-[13px] font-medium text-white shadow-xl",
+            className ? className : ""
+          )}
+        >
+          {content}
+        </div>
+      </Transition>
+    </div>
+  );
+};
+
+export default Tooltip;
diff --git a/frontend/libs/components/tooltip/tsconfig.json b/frontend/libs/components/tooltip/tsconfig.json
new file mode 100644
index 0000000000..b3d19d8f5e
--- /dev/null
+++ b/frontend/libs/components/tooltip/tsconfig.json
@@ -0,0 +1,13 @@
+{
+  "files": [],
+  "include": [],
+  "references": [
+    {
+      "path": "./tsconfig.lib.json"
+    },
+    {
+      "path": "./tsconfig.spec.json"
+    }
+  ],
+  "extends": "../../../tsconfig.base.json"
+}
diff --git a/frontend/libs/components/tooltip/tsconfig.lib.json b/frontend/libs/components/tooltip/tsconfig.lib.json
new file mode 100644
index 0000000000..f87bfe1691
--- /dev/null
+++ b/frontend/libs/components/tooltip/tsconfig.lib.json
@@ -0,0 +1,41 @@
+{
+  "extends": "../../../tsconfig.base.json",
+  "compilerOptions": {
+    "outDir": "dist",
+    "lib": ["dom", "esnext"],
+    "types": [
+      "node",
+      "@nx/react/typings/cssmodule.d.ts",
+      "@nx/react/typings/image.d.ts",
+      "vite/client"
+    ],
+    "rootDir": "src",
+    "jsx": "react-jsx",
+    "tsBuildInfoFile": "dist/tsconfig.lib.tsbuildinfo"
+  },
+  "exclude": [
+    "out-tsc",
+    "dist",
+    "**/*.spec.ts",
+    "**/*.test.ts",
+    "**/*.spec.tsx",
+    "**/*.test.tsx",
+    "**/*.spec.js",
+    "**/*.test.js",
+    "**/*.spec.jsx",
+    "**/*.test.jsx",
+    "vite.config.ts",
+    "vite.config.mts",
+    "vitest.config.ts",
+    "vitest.config.mts",
+    "src/**/*.test.ts",
+    "src/**/*.spec.ts",
+    "src/**/*.test.tsx",
+    "src/**/*.spec.tsx",
+    "src/**/*.test.js",
+    "src/**/*.spec.js",
+    "src/**/*.test.jsx",
+    "src/**/*.spec.jsx"
+  ],
+  "include": ["src/**/*.js", "src/**/*.jsx", "src/**/*.ts", "src/**/*.tsx"]
+}
diff --git a/frontend/libs/components/tooltip/tsconfig.spec.json b/frontend/libs/components/tooltip/tsconfig.spec.json
new file mode 100644
index 0000000000..18b7de51b8
--- /dev/null
+++ b/frontend/libs/components/tooltip/tsconfig.spec.json
@@ -0,0 +1,34 @@
+{
+  "extends": "../../../tsconfig.base.json",
+  "compilerOptions": {
+    "outDir": "./out-tsc/vitest",
+    "types": [
+      "vitest/globals",
+      "vitest/importMeta",
+      "vite/client",
+      "node",
+      "vitest"
+    ],
+    "jsx": "react-jsx"
+  },
+  "include": [
+    "vite.config.ts",
+    "vite.config.mts",
+    "vitest.config.ts",
+    "vitest.config.mts",
+    "src/**/*.test.ts",
+    "src/**/*.spec.ts",
+    "src/**/*.test.tsx",
+    "src/**/*.spec.tsx",
+    "src/**/*.test.js",
+    "src/**/*.spec.js",
+    "src/**/*.test.jsx",
+    "src/**/*.spec.jsx",
+    "src/**/*.d.ts"
+  ],
+  "references": [
+    {
+      "path": "./tsconfig.lib.json"
+    }
+  ]
+}
diff --git a/frontend/libs/components/tooltip/vite.config.ts b/frontend/libs/components/tooltip/vite.config.ts
new file mode 100644
index 0000000000..55c4cb3159
--- /dev/null
+++ b/frontend/libs/components/tooltip/vite.config.ts
@@ -0,0 +1,49 @@
+/// <reference types='vitest' />
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+import dts from 'vite-plugin-dts';
+import * as path from 'path';
+
+export default defineConfig(() => ({
+  root: __dirname,
+  cacheDir: '../../../node_modules/.vite/libs/components/tooltip',
+  plugins: [react(), dts({ entryRoot: 'src', tsconfigPath: path.join(__dirname, 'tsconfig.lib.json') })],
+  // Uncomment this if you are using workers.
+  // worker: {
+  //  plugins: [ nxViteTsPaths() ],
+  // },
+  // Configuration for building your library.
+  // See: https://vitejs.dev/guide/build.html#library-mode
+  build: {
+    outDir: './dist',
+    emptyOutDir: true,
+    reportCompressedSize: true,
+    commonjsOptions: {
+      transformMixedEsModules: true,
+    },
+    lib: {
+      // Could also be a dictionary or array of multiple entry points.
+      entry: 'src/index.ts',
+      name: '@storyteller/ui-tooltip',
+      fileName: 'index',
+      // Change this to the formats you want to support.
+      // Don't forget to update your package.json as well.
+      formats: ['es' as const]
+    },
+    rollupOptions: {
+      // External packages that should not be bundled into your library.
+      external: ['react','react-dom','react/jsx-runtime']
+    },
+  },
+  test: {
+    watch: false,
+    globals: true,
+    environment: 'jsdom',
+    include: ['{src,tests}/**/*.{test,spec}.{js,mjs,cjs,ts,mts,cts,jsx,tsx}'],
+    reporters: ['default'],
+    coverage: {
+      reportsDirectory: './test-output/vitest/coverage',
+      provider: 'v8' as const,
+    }
+  },
+}));
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 3f9bfbdb2f..77b7e7e223 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -603,6 +603,7 @@
       "version": "18.3.20",
       "resolved": "https://registry.npmjs.org/@types/react/-/react-18.3.20.tgz",
       "integrity": "sha512-IPaCZN7PShZK/3t6Q87pfTkRm6oLTd4vztyoj+cbHUF1g3FfVb2tFIL79uCRKEfv16AhqDMBywP2VW3KIZUvcg==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@types/prop-types": "*",
@@ -613,6 +614,7 @@
       "version": "18.3.6",
       "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.3.6.tgz",
       "integrity": "sha512-nf22//wEbKXusP6E9pfOCDwFdHAX4u172eaJI4YkDRQEZiorm6KfYnSC2SWLDMVWUOWPERmJnN0ujeAfTBLvrw==",
+      "dev": true,
       "license": "MIT",
       "peerDependencies": {
         "@types/react": "^18.0.0"
@@ -1206,9 +1208,9 @@
         "@storybook/test": "^8.1.10",
         "@types/deep-equal": "^1.0.4",
         "@types/jest": "^29.5.12",
-        "@types/react": "^18.2.20",
+        "@types/react": "^19.0.0",
         "@types/react-copy-to-clipboard": "^5.0.7",
-        "@types/react-dom": "^18.2.7",
+        "@types/react-dom": "^19.0.0",
         "@types/react-helmet": "^6.1.11",
         "@types/three": "^0.162.0",
         "@types/uuid": "^9.0.8",
@@ -1651,27 +1653,6 @@
         "react": "^16.14.0 || 17.x || 18.x || 19.x"
       }
     },
-    "apps/editor3d/node_modules/@types/react": {
-      "version": "18.3.20",
-      "resolved": "https://registry.npmjs.org/@types/react/-/react-18.3.20.tgz",
-      "integrity": "sha512-IPaCZN7PShZK/3t6Q87pfTkRm6oLTd4vztyoj+cbHUF1g3FfVb2tFIL79uCRKEfv16AhqDMBywP2VW3KIZUvcg==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@types/prop-types": "*",
-        "csstype": "^3.0.2"
-      }
-    },
-    "apps/editor3d/node_modules/@types/react-dom": {
-      "version": "18.3.6",
-      "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.3.6.tgz",
-      "integrity": "sha512-nf22//wEbKXusP6E9pfOCDwFdHAX4u172eaJI4YkDRQEZiorm6KfYnSC2SWLDMVWUOWPERmJnN0ujeAfTBLvrw==",
-      "dev": true,
-      "license": "MIT",
-      "peerDependencies": {
-        "@types/react": "^18.0.0"
-      }
-    },
     "apps/editor3d/node_modules/@typescript-eslint/eslint-plugin": {
       "version": "6.21.0",
       "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-6.21.0.tgz",
@@ -2054,6 +2035,10 @@
       "name": "@storyteller/ui-toaster",
       "version": "0.0.1"
     },
+    "libs/components/tooltip": {
+      "name": "@storyteller/ui-tooltip",
+      "version": "0.0.1"
+    },
     "libs/login": {
       "name": "@frontend/login",
       "version": "0.0.1"
@@ -5129,7 +5114,7 @@
       "version": "0.3.6",
       "resolved": "https://registry.npmjs.org/@jridgewell/source-map/-/source-map-0.3.6.tgz",
       "integrity": "sha512-1ZJTZebgqllO79ue2bm3rIGud/bOe0pP5BjSRCRxxYkEZS8STV7zN84UBbiYu7jy+eCKSnVIUgoWWE/tt+shMQ==",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@jridgewell/gen-mapping": "^0.3.5",
@@ -10096,6 +10081,10 @@
       "resolved": "libs/components/toaster",
       "link": true
     },
+    "node_modules/@storyteller/ui-tooltip": {
+      "resolved": "libs/components/tooltip",
+      "link": true
+    },
     "node_modules/@svgr/babel-plugin-add-jsx-attribute": {
       "version": "8.0.0",
       "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-add-jsx-attribute/-/babel-plugin-add-jsx-attribute-8.0.0.tgz",
@@ -11396,7 +11385,7 @@
       "version": "4.0.2",
       "resolved": "https://registry.npmjs.org/@types/parse-json/-/parse-json-4.0.2.tgz",
       "integrity": "sha512-dISoDXWWQwUquiKsyZ4Ng+HX2KsPL7LyHKHQwgGFEA3IaKac4Obd+h2a/a6waisAoepJlBcx9paWqjA8/HVjCw==",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT"
     },
     "node_modules/@types/prop-types": {
@@ -14045,7 +14034,7 @@
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/babel-plugin-macros/-/babel-plugin-macros-3.1.0.tgz",
       "integrity": "sha512-Cg7TFGpIr01vOQNODXOOaGz2NpCU5gl8x1qJFbb6hbZxR7XrcE2vtbAsTAbJ7/xwJtUuJEw8K8Zr/AE0LHlesg==",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@babel/runtime": "^7.12.5",
@@ -14061,7 +14050,7 @@
       "version": "7.1.0",
       "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-7.1.0.tgz",
       "integrity": "sha512-AdmX6xUzdNASswsFtmwSt7Vj8po9IuqXm0UXz7QKPuEUmPB4XyjGfaAr2PSuELMwkRMVH1EpIkX5bTZGRB3eCA==",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@types/parse-json": "^4.0.0",
@@ -14078,7 +14067,7 @@
       "version": "1.10.2",
       "resolved": "https://registry.npmjs.org/yaml/-/yaml-1.10.2.tgz",
       "integrity": "sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==",
-      "devOptional": true,
+      "dev": true,
       "license": "ISC",
       "engines": {
         "node": ">= 6"
@@ -14543,7 +14532,7 @@
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz",
       "integrity": "sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=6"
@@ -16170,7 +16159,7 @@
       "version": "0.1.13",
       "resolved": "https://registry.npmjs.org/encoding/-/encoding-0.1.13.tgz",
       "integrity": "sha512-ETBauow1T35Y/WZMkio9jiM0Z5xjHHmJ4XmjZOq1l/dXz3lr2sRn87nJy20RupqSh1F2m3HHPSp8ShIPQJrJ3A==",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "iconv-lite": "^0.6.2"
@@ -16257,7 +16246,7 @@
       "version": "1.3.2",
       "resolved": "https://registry.npmjs.org/error-ex/-/error-ex-1.3.2.tgz",
       "integrity": "sha512-7dFHNmqeFSEt2ZBsCriorKnn3Z2pj+fd9kmI6QoWw4//DL+icEBfc0U7qJCisqrTsKTjw4fNFy2pW9OqStD84g==",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "is-arrayish": "^0.2.1"
@@ -18753,7 +18742,7 @@
       "version": "4.10.0",
       "resolved": "https://registry.npmjs.org/get-tsconfig/-/get-tsconfig-4.10.0.tgz",
       "integrity": "sha512-kGzZ3LWWQcGIAmg6iWvXn0ei6WDtV26wzHRMwDSzmAbcXrTEXxHy6IehI6/4eT6VRKyMP1eF1VqwrVUmE/LR7A==",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "resolve-pkg-maps": "^1.0.0"
@@ -19360,7 +19349,7 @@
       "version": "0.6.3",
       "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.3.tgz",
       "integrity": "sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "safer-buffer": ">= 2.1.2 < 3.0.0"
@@ -19415,7 +19404,7 @@
       "version": "3.3.1",
       "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.1.tgz",
       "integrity": "sha512-TR3KfrTZTYLPB6jUjfx6MF9WcWrHL9su5TObK4ZkYgBdWKPOFoSoQIdEuTuR82pmtxH2spWG9h6etwfr1pLBqQ==",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "parent-module": "^1.0.0",
@@ -19570,7 +19559,7 @@
       "version": "0.2.1",
       "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.2.1.tgz",
       "integrity": "sha512-zz06S8t0ozoDXMG+ube26zeCTNXcKIPJZJi8hBrF4idCLms4CG9QtK7qBl1boi5ODzFpjswb5JPmHCbMpjaYzg==",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT"
     },
     "node_modules/is-async-function": {
@@ -20403,7 +20392,7 @@
       "version": "2.4.2",
       "resolved": "https://registry.npmjs.org/jiti/-/jiti-2.4.2.tgz",
       "integrity": "sha512-rg9zJN+G4n2nfJl5MW3BMygZX56zKPNVEYYqq7adpmMh4Jn2QNEwhvQlFy6jPVdcod7txZtKHWnyZiA3a0zP7A==",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT",
       "bin": {
         "jiti": "lib/jiti-cli.mjs"
@@ -20547,7 +20536,7 @@
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/json-parse-even-better-errors/-/json-parse-even-better-errors-2.3.1.tgz",
       "integrity": "sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w==",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT"
     },
     "node_modules/json-schema-traverse": {
@@ -26447,7 +26436,7 @@
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz",
       "integrity": "sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "callsites": "^3.0.0"
@@ -26484,7 +26473,7 @@
       "version": "5.2.0",
       "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-5.2.0.tgz",
       "integrity": "sha512-ayCKvm/phCGxOkYRSCM82iDwct8/EonSEgCSxWxD7ve6jHggsFl4fZVQBPRNgQoKiuV/odhFrGzQXZwbifC8Rg==",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@babel/code-frame": "^7.0.0",
@@ -26503,7 +26492,7 @@
       "version": "1.2.4",
       "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz",
       "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT"
     },
     "node_modules/parse-ms": {
@@ -26585,7 +26574,7 @@
       "version": "1.0.7",
       "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz",
       "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT"
     },
     "node_modules/path-scurry": {
@@ -26620,7 +26609,7 @@
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/path-type/-/path-type-4.0.0.tgz",
       "integrity": "sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=8"
@@ -28146,7 +28135,7 @@
       "version": "1.22.8",
       "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.8.tgz",
       "integrity": "sha512-oKWePCxqpd6FlLvGV1VU0x7bkPmmCNolxzjMf4NczoDnQcIWrAF+cPtZn5i6n+RfD2d9i0tzpKnG6Yk168yIyw==",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "is-core-module": "^2.13.0",
@@ -28178,7 +28167,7 @@
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz",
       "integrity": "sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=4"
@@ -28188,7 +28177,7 @@
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/resolve-pkg-maps/-/resolve-pkg-maps-1.0.0.tgz",
       "integrity": "sha512-seS2Tj26TBVOC2NIc2rOe2y2ZO7efxITtLZcGSOnHHNOQ7CkiUBfw0Iw2ck6xkIhPwLhKNLS8BO+hEpngQlqzw==",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT",
       "funding": {
         "url": "https://github.com/privatenumber/resolve-pkg-maps?sponsor=1"
@@ -29582,7 +29571,7 @@
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz",
       "integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">= 0.4"
@@ -29854,7 +29843,7 @@
       "version": "5.39.0",
       "resolved": "https://registry.npmjs.org/terser/-/terser-5.39.0.tgz",
       "integrity": "sha512-LBAhFyLho16harJoWMg/nZsQYgTrg5jXOn2nCYjRUcZZEdE3qa2zb8QEDRUGVZBW4rlazf2fxkg8tztybTaqWw==",
-      "devOptional": true,
+      "dev": true,
       "license": "BSD-2-Clause",
       "dependencies": {
         "@jridgewell/source-map": "^0.3.3",
@@ -29941,14 +29930,14 @@
       "version": "2.20.3",
       "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz",
       "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT"
     },
     "node_modules/terser/node_modules/source-map-support": {
       "version": "0.5.21",
       "resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.21.tgz",
       "integrity": "sha512-uBHU3L3czsIyYXKX88fdrGovxdSCoTGDRZ6SYXtSRxLZUzHg5P/66Ht6uoUlHu9EZod+inXhKo3qQgwXUT/y1w==",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "buffer-from": "^1.0.0",
@@ -30375,7 +30364,7 @@
       "version": "4.19.3",
       "resolved": "https://registry.npmjs.org/tsx/-/tsx-4.19.3.tgz",
       "integrity": "sha512-4H8vUNGNjQ4V2EOoGw005+c+dGuPSnhpPBPHBtsZdGZBk/iJb4kguGlPWaZTZ3q5nMtFOEsY0nRDlh9PJyd6SQ==",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "esbuild": "~0.25.0",
@@ -30398,12 +30387,12 @@
       "cpu": [
         "arm"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
         "android"
       ],
-      "peer": true,
       "engines": {
         "node": ">=18"
       }
@@ -30415,12 +30404,12 @@
       "cpu": [
         "arm64"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
         "android"
       ],
-      "peer": true,
       "engines": {
         "node": ">=18"
       }
@@ -30432,12 +30421,12 @@
       "cpu": [
         "x64"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
         "android"
       ],
-      "peer": true,
       "engines": {
         "node": ">=18"
       }
@@ -30449,12 +30438,12 @@
       "cpu": [
         "arm64"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
         "darwin"
       ],
-      "peer": true,
       "engines": {
         "node": ">=18"
       }
@@ -30466,12 +30455,12 @@
       "cpu": [
         "x64"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
         "darwin"
       ],
-      "peer": true,
       "engines": {
         "node": ">=18"
       }
@@ -30483,12 +30472,12 @@
       "cpu": [
         "arm64"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
         "freebsd"
       ],
-      "peer": true,
       "engines": {
         "node": ">=18"
       }
@@ -30500,12 +30489,12 @@
       "cpu": [
         "x64"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
         "freebsd"
       ],
-      "peer": true,
       "engines": {
         "node": ">=18"
       }
@@ -30517,12 +30506,12 @@
       "cpu": [
         "arm"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
         "linux"
       ],
-      "peer": true,
       "engines": {
         "node": ">=18"
       }
@@ -30534,12 +30523,12 @@
       "cpu": [
         "arm64"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
         "linux"
       ],
-      "peer": true,
       "engines": {
         "node": ">=18"
       }
@@ -30551,12 +30540,12 @@
       "cpu": [
         "ia32"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
         "linux"
       ],
-      "peer": true,
       "engines": {
         "node": ">=18"
       }
@@ -30568,12 +30557,12 @@
       "cpu": [
         "loong64"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
         "linux"
       ],
-      "peer": true,
       "engines": {
         "node": ">=18"
       }
@@ -30585,12 +30574,12 @@
       "cpu": [
         "mips64el"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
         "linux"
       ],
-      "peer": true,
       "engines": {
         "node": ">=18"
       }
@@ -30602,12 +30591,12 @@
       "cpu": [
         "ppc64"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
         "linux"
       ],
-      "peer": true,
       "engines": {
         "node": ">=18"
       }
@@ -30619,12 +30608,12 @@
       "cpu": [
         "riscv64"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
         "linux"
       ],
-      "peer": true,
       "engines": {
         "node": ">=18"
       }
@@ -30636,12 +30625,12 @@
       "cpu": [
         "s390x"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
         "linux"
       ],
-      "peer": true,
       "engines": {
         "node": ">=18"
       }
@@ -30653,12 +30642,12 @@
       "cpu": [
         "x64"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
         "linux"
       ],
-      "peer": true,
       "engines": {
         "node": ">=18"
       }
@@ -30670,12 +30659,12 @@
       "cpu": [
         "x64"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
         "netbsd"
       ],
-      "peer": true,
       "engines": {
         "node": ">=18"
       }
@@ -30687,12 +30676,12 @@
       "cpu": [
         "x64"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
         "openbsd"
       ],
-      "peer": true,
       "engines": {
         "node": ">=18"
       }
@@ -30704,12 +30693,12 @@
       "cpu": [
         "x64"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
         "sunos"
       ],
-      "peer": true,
       "engines": {
         "node": ">=18"
       }
@@ -30721,12 +30710,12 @@
       "cpu": [
         "arm64"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
         "win32"
       ],
-      "peer": true,
       "engines": {
         "node": ">=18"
       }
@@ -30738,12 +30727,12 @@
       "cpu": [
         "ia32"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
         "win32"
       ],
-      "peer": true,
       "engines": {
         "node": ">=18"
       }
@@ -30755,12 +30744,12 @@
       "cpu": [
         "x64"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
         "win32"
       ],
-      "peer": true,
       "engines": {
         "node": ">=18"
       }
@@ -30769,7 +30758,7 @@
       "version": "0.25.2",
       "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.25.2.tgz",
       "integrity": "sha512-16854zccKPnC+toMywC+uKNeYSv+/eXkevRAfwRD/G9Cleq66m8XFIrigkbvauLLlCfDL45Q2cWegSg53gGBnQ==",
-      "devOptional": true,
+      "dev": true,
       "hasInstallScript": true,
       "license": "MIT",
       "bin": {
@@ -30933,7 +30922,7 @@
       "version": "5.7.3",
       "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.7.3.tgz",
       "integrity": "sha512-84MVSjMEHP+FQRPy3pX9sTVV/INIex71s9TL2Gm5FG/WG1SqXeKyZ0k7/blY/4FdOzI12CBy1vGc4og/eus0fw==",
-      "devOptional": true,
+      "dev": true,
       "license": "Apache-2.0",
       "bin": {
         "tsc": "bin/tsc",
diff --git a/frontend/tsconfig.json b/frontend/tsconfig.json
index d44d8b0845..4b7cffca0a 100644
--- a/frontend/tsconfig.json
+++ b/frontend/tsconfig.json
@@ -38,6 +38,9 @@
     },
     {
       "path": "./libs/components/select"
+    },
+    {
+      "path": "./libs/components/tooltip"
     }
   ]
 }