draw attention to add 3d object with bouncing tooltip

frontend/apps/editor3d/app/src/pages/PageEnigma/comps/Controls3D/Controls3D.tsx

@@ -7,15 +7,37 @@ import {
 } from "@fortawesome/pro-solid-svg-icons";
 import { Button, ButtonIconSelect, Tooltip } from "~/components";
 import { EngineContext } from "../../contexts/EngineContext";
-import { useContext } from "react";
+import { useContext, useEffect, useState } from "react";
 import { assetModalVisibleDuringDrag, assetModalVisible } from "../../signals";
 import { AssetModal } from "../AssetMenu/AssetModal";
 import { selectedMode } from "../../signals/selectedMode";
 import { useSignals } from "@preact/signals-react/runtime";
+import { outlinerState } from "../../signals/outliner/outliner";
+import { twMerge } from "tailwind-merge";
 
 export const Controls3D = () => {
   useSignals();
   const editorEngine = useContext(EngineContext);
+  const [showEmptySceneTooltip, setShowEmptySceneTooltip] = useState(false);
+
+  useEffect(() => {
+    // Check if scene is empty and onboarding helper is not visible
+    const checkSceneEmpty = () => {
+      const isSceneEmpty = outlinerState.items.value.length === 0;
+
+      setShowEmptySceneTooltip(isSceneEmpty);
+    };
+
+    // Initial check
+    checkSceneEmpty();
+
+    // Subscribe to outliner state changes
+    const unsubscribe = outlinerState.items.subscribe(checkSceneEmpty);
+
+    return () => {
+      unsubscribe();
+    };
+  }, []);
 
   const handleModeChange = (value: string) => {
     selectedMode.value = value;
@@ -80,23 +102,40 @@ export const Controls3D = () => {
   };
 
   return (
-    <div>
+    <>
       <div className="flex justify-center">
         <div className="glass rounded-b-xl p-1.5 pr-2 text-white shadow-md">
           <div className="flex items-center justify-center gap-2.5">
             <div className="flex items-center gap-1">
-              <Tooltip
-                content="Add 3D asset to scene (B)"
-                position="bottom"
-                delay={100}
-                closeOnClick
-              >
-                <Button
-                  icon={faPlus}
-                  className="h-9 w-9 rounded-[10px] text-lg"
-                  onClick={handleOpenModal}
-                />
-              </Tooltip>
+              <div className="relative">
+                {showEmptySceneTooltip && (
+                  <div className="absolute -bottom-14 left-1/2 -translate-x-1/2 transform whitespace-nowrap">
+                    <div className="animate-bounce rounded-lg bg-brand-primary px-4 py-2 text-sm font-medium text-white shadow-lg">
+                      Click + to add your first 3D asset!
+                      <div className="absolute -top-1.5 left-1/2 h-3 w-3 -translate-x-1/2 rotate-45 transform bg-brand-primary" />
+                    </div>
+                  </div>
+                )}
+                <Tooltip
+                  content="Add 3D asset to scene (B)"
+                  position="bottom"
+                  delay={100}
+                  closeOnClick
+                  className={twMerge(
+                    showEmptySceneTooltip ? "hidden" : "block",
+                  )}
+                >
+                  <Button
+                    icon={faPlus}
+                    className={`h-9 w-9 rounded-[10px] text-lg ${
+                      showEmptySceneTooltip
+                        ? "border-white/80 bg-brand-primary/90"
+                        : ""
+                    }`}
+                    onClick={handleOpenModal}
+                  />
+                </Tooltip>
+              </div>
               <Tooltip
                 content="Create 3D model from image"
                 position="bottom"
@@ -124,6 +163,6 @@ export const Controls3D = () => {
       </div>
 
       <AssetModal />
-    </div>
+    </>
   );
 };