rename library button to gallery, object panel styling

frontend/editor3d/app/components/reusable/ButtonIconSelect/ButtonIconSelect.tsx

@@ -38,7 +38,7 @@ export function ButtonIconSelect({
             `flex h-8 items-center justify-center rounded-lg border text-sm transition-all duration-150`,
             text ? "h-auto w-auto gap-2 px-2.5 py-1" : "w-8",
             selectedOption === value
-              ? "border-brand-primary bg-ui-panel/[0.3]"
+              ? "border-brand-primary bg-brand-primary/20"
               : "border-transparent hover:bg-ui-panel/[0.4]",
           )}
           onClick={() => handleOptionChange(value)}

frontend/editor3d/app/components/reusable/InputVector/InputVector.tsx

@@ -39,7 +39,7 @@ export const InputVector = ({
   oldZ.current = z;
 
   const inputCommonClasses =
-    "relative h-6 rounded-r-lg bg-brand-secondary-900/35 p-2 text-sm text-white transition-all duration-100 ease-in-out outline-none -outline-offset-2 text-end w-full hover:cursor-e-resize hover:bg-brand-secondary-900";
+    "relative h-6 rounded-r-lg bg-black/25 p-2 text-sm text-white transition-all duration-100 ease-in-out outline-none -outline-offset-2 text-end w-full hover:cursor-e-resize hover:bg-black/40";
 
   const wrapperCommonClasses =
     "relative flex items-center before:inline-block before:h-6 before:bg-brand-primary before:text-white before:rounded-l-lg before:w-1.5 before:text-center before:justify-center before:items-center before:font-semibold before:flex before:align-middle before:leading-8 text-xs";

frontend/editor3d/app/components/signaled/TopBar/TopBar.tsx

@@ -59,7 +59,7 @@ export const TopBar = ({ pageName }: Props) => {
                 icon={faImages}
                 onClick={() => setIsLibraryModalOpen(true)}
               >
-                My Library
+                My Gallery
               </Button>
               <Activity />
             </div>

frontend/editor3d/app/pages/PageEnigma/PageEditor.tsx

@@ -120,10 +120,7 @@ export const PageEditor = () => {
             <div
               className="absolute bottom-0 left-0"
               style={{
-                width:
-                  pageWidth.value -
-                  (sidePanelVisible.value ? sidePanelWidth.value : 0) -
-                  84,
+                width: pageWidth.value,
               }}
               onClick={handleOverlayClick}
             >

frontend/editor3d/app/pages/PageEnigma/comps/ControlPanelSceneObject/ControlPanelSceneObject.tsx

@@ -15,11 +15,6 @@ import {
 } from "../../signals";
 import { EngineContext } from "~/pages/PageEnigma/contexts/EngineContext";
 import { Button, H5, InputVector } from "~/components";
-
-import { QueueNames } from "../../Queue/QueueNames";
-import Queue from "~/pages/PageEnigma/Queue/Queue";
-import { toTimelineActions } from "../../Queue/toTimelineActions";
-import { QueueKeyframe } from "~/pages/PageEnigma/models";
 import { editorState } from "~/pages/PageEnigma/signals/engine";
 import { twMerge } from "tailwind-merge";
 import { EditorStates } from "~/pages/PageEnigma/enums";
@@ -71,9 +66,6 @@ export const ControlPanelSceneObject = () => {
   };
 
   const currentSceneObject = currentObject.value;
-  const position = currentSceneObject?.objectVectors?.position;
-  const rotation = currentSceneObject?.objectVectors?.rotation;
-  const scale = currentSceneObject?.objectVectors?.scale;
 
   function localToEngine(xyz: Record<string, string>) {
     return {
@@ -167,42 +159,6 @@ export const ControlPanelSceneObject = () => {
     setLocalScale(xyz);
   };
 
-  const handleOnAddKeyFrame = () => {
-    if (currentSceneObject) {
-      if (
-        position == null ||
-        rotation == null ||
-        scale == null ||
-        currentSceneObject == null
-      ) {
-        return;
-      }
-
-      for (const key in editorEngine?.timeline.characters) {
-        const element = editorEngine?.timeline.characters[key];
-        if (key == currentSceneObject.object_uuid) {
-          currentSceneObject.group = element;
-          break;
-        }
-      }
-
-      Queue.publish({
-        queueName: QueueNames.TO_TIMELINE,
-        action: toTimelineActions.ADD_KEYFRAME,
-        data: {
-          group: currentSceneObject.group,
-          object_uuid: currentSceneObject.object_uuid,
-          object_name: currentSceneObject.object_name,
-          version: 1,
-
-          position: currentSceneObject.objectVectors.position,
-          rotation: currentSceneObject.objectVectors.rotation,
-          scale: currentSceneObject.objectVectors.scale,
-        } as QueueKeyframe,
-      });
-    }
-  };
-
   const handleDeleteObject = () => {
     editorEngine?.deleteObject(currentSceneObject.object_uuid);
   };
@@ -216,7 +172,7 @@ export const ControlPanelSceneObject = () => {
     <Transition
       show={isShowing.value}
       className={twMerge(
-        "absolute bottom-0 right-0 mb-2 mr-2 flex h-fit w-56 origin-bottom-right flex-col gap-2 rounded-lg border border-ui-panel-border bg-ui-panel/95 p-3.5 text-white shadow-lg",
+        "glass absolute bottom-0 right-0 mb-2 mr-2 flex h-fit w-56 origin-bottom-right flex-col gap-2 rounded-lg border border-ui-panel-border p-3.5 text-white shadow-lg",
       )}
       enter="transition-opacity duration-150"
       enterFrom="opacity-0"
@@ -311,14 +267,17 @@ export const ControlPanelSceneObject = () => {
       </Transition>
 
       <div className="mt-0.5 flex gap-1.5">
-        <Button variant="action" className="grow" onClick={handleOnAddKeyFrame}>
+        {/* <Button variant="action" className="grow" onClick={handleOnAddKeyFrame}>
           Add Keyframe (K)
-        </Button>
+        </Button> */}
         <Button
           variant="secondary"
           icon={faTrash}
           onClick={handleDeleteObject}
-        />
+          className="w-full"
+        >
+          Delete
+        </Button>
       </div>
     </Transition>
   );

frontend/editor3d/app/pages/PageEnigma/comps/LibraryModal/LibraryModal.tsx

@@ -159,7 +159,7 @@ export const LibraryModal = ({
           <div className="border-b border-white/10 p-4 py-3">
             <div className="grid grid-cols-3 items-center">
               <h2 className="text-xl font-semibold">
-                {mode === "select" ? "Select Images" : "My Library"}
+                {mode === "select" ? "Select Images" : "My Gallery"}
               </h2>
               <div className="flex items-center justify-center">
                 <TabSelector