From 8b3a5f9c29956e99d1f647f626ec507ced3eb078 Mon Sep 17 00:00:00 2001
From: wil <wil@storyteller.ai>
Date: Tue, 26 Mar 2024 11:48:34 -0400
Subject: [PATCH 01/16] take over loading screen

---
 app/components/LoadingDots.tsx              |  11 ++
 app/components/index.tsx                    |   3 +
 app/modules/LoadingScreen/LoadingScreen.tsx |  21 ++++
 app/modules/LoadingScreen/index.tsx         |   1 +
 app/root.tsx                                |  43 +++++++-
 app/styles/base.css                         | 112 ++++++++++++++++++++
 6 files changed, 189 insertions(+), 2 deletions(-)
 create mode 100644 app/components/LoadingDots.tsx
 create mode 100644 app/modules/LoadingScreen/LoadingScreen.tsx
 create mode 100644 app/modules/LoadingScreen/index.tsx

diff --git a/app/components/LoadingDots.tsx b/app/components/LoadingDots.tsx
new file mode 100644
index 0000000000..b12b84e869
--- /dev/null
+++ b/app/components/LoadingDots.tsx
@@ -0,0 +1,11 @@
+export const LoadingDotsTyping = ()=>{
+  return(
+    <div className="dot-typing"></div>
+  );
+}
+
+export const LoadingDotsBricks = ()=>{
+  return(
+    <div className="dot-bricks"></div>
+  );
+}
\ No newline at end of file
diff --git a/app/components/index.tsx b/app/components/index.tsx
index b4fb1526c5..28c7eb3efc 100644
--- a/app/components/index.tsx
+++ b/app/components/index.tsx
@@ -6,6 +6,7 @@ import { Input } from "./Input";
 import { H4 } from "./H4";
 import { ItemPicker } from "./ItemPicker";
 import { Textarea } from "./Textarea";
+import { LoadingDotsBricks, LoadingDotsTyping } from "./LoadingDots";
 
 export {
   Button,
@@ -16,4 +17,6 @@ export {
   ItemPicker,
   Textarea,
   Input,
+  LoadingDotsBricks,
+  LoadingDotsTyping,
 };
diff --git a/app/modules/LoadingScreen/LoadingScreen.tsx b/app/modules/LoadingScreen/LoadingScreen.tsx
new file mode 100644
index 0000000000..0ccfe83a1f
--- /dev/null
+++ b/app/modules/LoadingScreen/LoadingScreen.tsx
@@ -0,0 +1,21 @@
+import { LoadingDotsBricks } from "~/components";
+
+export const LoadingScreen = ()=>{
+  return(
+    <div
+      id='loading-screen'
+      style={{
+        position: 'fixed',
+        top: 0,
+        left: 0,
+        width: '100vw',
+        height: '100vh',
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+      }}
+    >
+        <LoadingDotsBricks />
+    </div>
+  );
+};
\ No newline at end of file
diff --git a/app/modules/LoadingScreen/index.tsx b/app/modules/LoadingScreen/index.tsx
new file mode 100644
index 0000000000..edb7c50caf
--- /dev/null
+++ b/app/modules/LoadingScreen/index.tsx
@@ -0,0 +1 @@
+export { LoadingScreen } from './LoadingScreen';
\ No newline at end of file
diff --git a/app/root.tsx b/app/root.tsx
index 024b82cecc..a62b912903 100644
--- a/app/root.tsx
+++ b/app/root.tsx
@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { useState, useEffect } from "react";
 import { LinksFunction } from "@remix-run/deno";
 import {
   Links,
@@ -12,6 +12,7 @@ import normalizeCss from "./styles/normalize.css?url";
 import tailwindCss from "./styles/tailwind.css?url";
 import baseCss from "./styles/base.css?url";
 
+import { LoadingDotsBricks } from "~/components";
 import { TopBar } from "./modules/TopBar";
 import { TopBarInnerContext } from "~/contexts/TopBarInner";
 
@@ -45,7 +46,13 @@ export const links: LinksFunction = () => [
 
 export default function App() {
   const [topBarInnerComponent, setTopBarInnerComponent] =
-    useState<JSX.Element | null>(null);
+  useState<JSX.Element | null>(null);
+  const [isLoaded, setIsLoaded] = useState<'loading'|'loaded'|'completed'>('loading');
+  useEffect(()=>{
+    setIsLoaded('loaded');
+    setTimeout(()=>setIsLoaded('completed'), 2000);
+  },[]);
+
 
   return (
     <html lang="en">
@@ -56,6 +63,15 @@ export default function App() {
         <Links />
       </head>
       <body className="overflow-hidden bg-ui-background">
+        {isLoaded !== 'completed' && 
+          <CompleteTakeoverLoadingScreen 
+            className={
+              isLoaded === 'loading'
+                ? "transition-opacity duration-1000 opacity-100"
+                : "transition-opacity duration-1000 opacity-0"
+            }
+          />
+        }
         <TopBarInnerContext.Provider
           value={{
             TopBarInner: topBarInnerComponent,
@@ -72,3 +88,26 @@ export default function App() {
     </html>
   );
 }
+
+function CompleteTakeoverLoadingScreen({className}:{className:string}){
+  return(
+    <div
+      id='complete-takeover-loading-screen'
+      className={className}
+      style={{
+        backgroundColor: '#1a1a27',
+        position: 'fixed',
+        top: 0,
+        left: 0,
+        width: '100vw',
+        height: '100vh',
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+        zIndex: 9999,
+      }}
+    >
+        <LoadingDotsBricks />
+    </div>
+  );
+};
\ No newline at end of file
diff --git a/app/styles/base.css b/app/styles/base.css
index 289c01a903..129268f61d 100644
--- a/app/styles/base.css
+++ b/app/styles/base.css
@@ -35,3 +35,115 @@ body {
   user-select: none; /* Standard syntax */
   pointer-events: none;
 }
+
+
+/*!
+ * three-dots - v0.3.2
+ * CSS loading animations made with single element
+ * https://nzbin.github.io/three-dots/
+ *
+ * Copyright (c) 2018 nzbin
+ * Released under MIT License
+ */
+ 
+/**
+ * ==============================================
+ * Dot Typing
+ * ==============================================
+ */
+.dot-typing {
+  position: relative;
+  left: -9999px;
+  width: 10px;
+  height: 10px;
+  border-radius: 5px;
+  background-color: #393948;
+  color: #393948;
+  box-shadow: 9984px 0 0 0 #393948, 9999px 0 0 0 #393948, 10014px 0 0 0 #393948;
+  animation: dot-typing 1.5s infinite linear;
+}
+
+@keyframes dot-typing {
+  0% {
+    box-shadow: 9984px 0 0 0 #393948, 9999px 0 0 0 #393948, 10014px 0 0 0 #393948;
+  }
+  16.667% {
+    box-shadow: 9984px -10px 0 0 #393948, 9999px 0 0 0 #393948, 10014px 0 0 0 #393948;
+  }
+  33.333% {
+    box-shadow: 9984px 0 0 0 #393948, 9999px 0 0 0 #393948, 10014px 0 0 0 #393948;
+  }
+  50% {
+    box-shadow: 9984px 0 0 0 #393948, 9999px -10px 0 0 #393948, 10014px 0 0 0 #393948;
+  }
+  66.667% {
+    box-shadow: 9984px 0 0 0 #393948, 9999px 0 0 0 #393948, 10014px 0 0 0 #393948;
+  }
+  83.333% {
+    box-shadow: 9984px 0 0 0 #393948, 9999px 0 0 0 #393948, 10014px -10px 0 0 #393948;
+  }
+  100% {
+    box-shadow: 9984px 0 0 0 #393948, 9999px 0 0 0 #393948, 10014px 0 0 0 #393948;
+  }
+}
+
+ /**
+  * ==============================================
+  * Dot Bricks
+  * ==============================================
+  */
+.dot-bricks {
+  position: relative;
+  top: 8px;
+  left: -9999px;
+  width: 10px;
+  height: 10px;
+  border-radius: 5px;
+  background-color: #393948;
+  color: #393948;
+  box-shadow: 9991px -16px 0 0 #393948, 9991px 0 0 0 #393948, 10007px 0 0 0 #393948;
+  animation: dot-bricks 2s infinite ease;
+}
+ 
+ @keyframes dot-bricks {
+  0% {
+    box-shadow: 9991px -16px 0 0 #393948, 9991px 0 0 0 #393948, 10007px 0 0 0 #393948;
+  }
+  8.333% {
+    box-shadow: 10007px -16px 0 0 #393948, 9991px 0 0 0 #393948, 10007px 0 0 0 #393948;
+  }
+  16.667% {
+    box-shadow: 10007px -16px 0 0 #393948, 9991px -16px 0 0 #393948, 10007px 0 0 0 #393948;
+  }
+  25% {
+    box-shadow: 10007px -16px 0 0 #393948, 9991px -16px 0 0 #393948, 9991px 0 0 0 #393948;
+  }
+  33.333% {
+    box-shadow: 10007px 0 0 0 #393948, 9991px -16px 0 0 #393948, 9991px 0 0 0 #393948;
+  }
+  41.667% {
+    box-shadow: 10007px 0 0 0 #393948, 10007px -16px 0 0 #393948, 9991px 0 0 0 #393948;
+  }
+  50% {
+    box-shadow: 10007px 0 0 0 #393948, 10007px -16px 0 0 #393948, 9991px -16px 0 0 #393948;
+  }
+  58.333% {
+    box-shadow: 9991px 0 0 0 #393948, 10007px -16px 0 0 #393948, 9991px -16px 0 0 #393948;
+  }
+  66.666% {
+    box-shadow: 9991px 0 0 0 #393948, 10007px 0 0 0 #393948, 9991px -16px 0 0 #393948;
+  }
+  75% {
+    box-shadow: 9991px 0 0 0 #393948, 10007px 0 0 0 #393948, 10007px -16px 0 0 #393948;
+  }
+  83.333% {
+    box-shadow: 9991px -16px 0 0 #393948, 10007px 0 0 0 #393948, 10007px -16px 0 0 #393948;
+  }
+  91.667% {
+    box-shadow: 9991px -16px 0 0 #393948, 9991px 0 0 0 #393948, 10007px -16px 0 0 #393948;
+  }
+  100% {
+    box-shadow: 9991px -16px 0 0 #393948, 9991px 0 0 0 #393948, 10007px 0 0 0 #393948;
+  }
+}
+

From f89d9dedd4c1a8f32266c2df8c3f35143efea407 Mon Sep 17 00:00:00 2001
From: wil <wil@storyteller.ai>
Date: Tue, 26 Mar 2024 13:08:22 -0400
Subject: [PATCH 02/16] loading dots done

---
 app/components/LoadingDots.tsx                | 74 ++++++++++++++++---
 app/modules/LoadingScreen/LoadingScreen.tsx   | 21 ------
 app/modules/LoadingScreen/index.tsx           |  1 -
 .../PageEnigma/comps/PreviewWindow/index.tsx  | 13 +++-
 4 files changed, 76 insertions(+), 33 deletions(-)
 delete mode 100644 app/modules/LoadingScreen/LoadingScreen.tsx
 delete mode 100644 app/modules/LoadingScreen/index.tsx

diff --git a/app/components/LoadingDots.tsx b/app/components/LoadingDots.tsx
index b12b84e869..b4aa233350 100644
--- a/app/components/LoadingDots.tsx
+++ b/app/components/LoadingDots.tsx
@@ -1,11 +1,67 @@
-export const LoadingDotsTyping = ()=>{
-  return(
-    <div className="dot-typing"></div>
-  );
+import { useState, useEffect } from 'react';
+
+interface LoadingDotsProps {
+  show?: boolean;
+  transition?: boolean;
+  transitionDuration?: number;
+};
+
+interface LoadingDotsInnerProps {
+  show?: boolean;
+  transition?: boolean;
+  transitionDuration?: number;
+  children: React.ReactNode;
+};
+
+export const LoadingDotsTyping = (props: LoadingDotsProps)=>{
+  return (
+    <LoadingDots {...props}>
+      <div className="dot-typing"></div>
+    </LoadingDots>
+  )
+}
+export const LoadingDotsBricks = (props: LoadingDotsProps)=>{
+  return (
+    <LoadingDots {...props}>
+      <div className="dot-bricks"></div>
+    </LoadingDots>
+  )
 }
 
-export const LoadingDotsBricks = ()=>{
-  return(
-    <div className="dot-bricks"></div>
-  );
-}
\ No newline at end of file
+function LoadingDots({
+  show=true,
+  transition = false,
+  transitionDuration = 1000,
+  children,
+}: LoadingDotsInnerProps){
+  const [state, setState] = useState<'loading'|'loaded'|'completed'>('loading');
+  const transitionClasses =
+    (transition ? `transition-opacity duration-${transitionDuration} `: "")
+    + (state === 'loading' ? 'opacity-100' : 'opacity-0');
+
+  const classNames = "w-full h-full flex justify-center items-center bg-ui-background " + transitionClasses;
+  useEffect(()=>{
+    if(!show){
+      if(transition){
+        setState((curr)=>{
+          if (curr === 'loading') return 'loaded'
+          else return curr;
+        });
+        setTimeout(()=>setState('completed'), 2000);
+      } else {
+        setState('completed');
+      }
+    }
+  }, [show, transition]);
+
+  if(state!== 'completed'){
+    return(
+      <div className={classNames}>
+        {children}
+      </div>
+    );
+  }else{
+    return null;
+  }
+};
+
diff --git a/app/modules/LoadingScreen/LoadingScreen.tsx b/app/modules/LoadingScreen/LoadingScreen.tsx
deleted file mode 100644
index 0ccfe83a1f..0000000000
--- a/app/modules/LoadingScreen/LoadingScreen.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import { LoadingDotsBricks } from "~/components";
-
-export const LoadingScreen = ()=>{
-  return(
-    <div
-      id='loading-screen'
-      style={{
-        position: 'fixed',
-        top: 0,
-        left: 0,
-        width: '100vw',
-        height: '100vh',
-        display: 'flex',
-        justifyContent: 'center',
-        alignItems: 'center',
-      }}
-    >
-        <LoadingDotsBricks />
-    </div>
-  );
-};
\ No newline at end of file
diff --git a/app/modules/LoadingScreen/index.tsx b/app/modules/LoadingScreen/index.tsx
deleted file mode 100644
index edb7c50caf..0000000000
--- a/app/modules/LoadingScreen/index.tsx
+++ /dev/null
@@ -1 +0,0 @@
-export { LoadingScreen } from './LoadingScreen';
\ No newline at end of file
diff --git a/app/pages/PageEnigma/comps/PreviewWindow/index.tsx b/app/pages/PageEnigma/comps/PreviewWindow/index.tsx
index 92accbd2d2..7704c68ecd 100644
--- a/app/pages/PageEnigma/comps/PreviewWindow/index.tsx
+++ b/app/pages/PageEnigma/comps/PreviewWindow/index.tsx
@@ -1,10 +1,15 @@
-import { useContext } from "react"
+import { useContext, useEffect, useState } from "react"
 import { EngineContext } from "~/contexts/EngineContext"
 
+import { LoadingDotsTyping } from "~/components";
 export const PreviewWindow = ()=>{
   const editorEngine = useContext(EngineContext);
   //take data from egine context
 
+  const [showLoader, setShowLoader] = useState<boolean>(true);
+  useEffect(()=>{
+    setTimeout(()=>setShowLoader(false), 5000);
+  },[]);
   return (
     <div
       id="preview-window"
@@ -17,12 +22,16 @@ export const PreviewWindow = ()=>{
         >
           <p>Camera View</p>
         </div>
-        <div className="rounded-lg border border-white box overflow-hidden">
+        <div className="relative rounded-lg border border-white box overflow-hidden">
+          
           <img
             //shoot that datat from engine context to this image
             className="aspect-video max-h-40" 
             src="/resources/uiAssets/video_player_placeholder.gif"
           />
+          <div className="absolute w-full h-full top-0 left-0">
+            <LoadingDotsTyping show={showLoader} transition/>
+          </div>
         </div>
       </div>
     </div>

From da8bee2be99a3b0f9c1ab167e9f22f304b78e923 Mon Sep 17 00:00:00 2001
From: wil <wil@storyteller.ai>
Date: Tue, 26 Mar 2024 14:31:00 -0400
Subject: [PATCH 03/16] styling update

---
 app/components/ItemPicker.tsx                 | 17 +++++++++++++-
 app/components/Textarea.tsx                   |  9 +++++++-
 .../comps/SidePanelTabs/TabStyling.tsx        | 23 ++++++++++++++-----
 3 files changed, 41 insertions(+), 8 deletions(-)

diff --git a/app/components/ItemPicker.tsx b/app/components/ItemPicker.tsx
index 90eae68411..a0949916ec 100644
--- a/app/components/ItemPicker.tsx
+++ b/app/components/ItemPicker.tsx
@@ -1,16 +1,31 @@
+import { twMerge } from "tailwind-merge";
 import { H4 } from ".";
 
+
 interface ItemPickerProps extends React.ImgHTMLAttributes<HTMLImageElement> {
   label: string
+  selected: boolean;
+  onSelected : (val:string)=>void;
 }
 
 export const ItemPicker = ({
   label,
+  selected = false,
+  onSelected,
   ...imgProps
 }:ItemPickerProps) => {
+
+  const handleSelected = ()=>{
+    onSelected(label);
+  };
+
   return (
-    <div className="relative border border-ui-border rounded-lg overflow-hidden">
+    <div
+      className={twMerge("relative border-2 rounded-lg overflow-hidden cursor-pointer transition-colors ease-in-out", selected ? "border-brand-primary" : "border-ui-border")}
+      onClick={handleSelected}
+    >
       <img className="aspect-square min-w-20" {...imgProps} />
+      <div className="bg-gradient-to-t from-gray-700 to-transparent absolute top-0 left-0 w-full h-full"/>
       <H4 className="absolute bottom-0 left-2 drop-shadow-md">{label}</H4>
     </div>
   )
diff --git a/app/components/Textarea.tsx b/app/components/Textarea.tsx
index f9ca528ab9..3b069b39ee 100644
--- a/app/components/Textarea.tsx
+++ b/app/components/Textarea.tsx
@@ -7,11 +7,18 @@ export const Textarea = ({
 }:TextareaHTMLAttributes<HTMLTextAreaElement>) => {
   return(
     <textarea
-      {...rest}
+      
       className={twMerge(
         "rounded-lg bg-ui-controls border border-ui-panel-border py-2 px-4"
         ,className
       )}
+      style={{
+        outline: "2px solid transparent",
+        transition: "outline-color 0.15s ease-in-out",
+      }}
+      onFocus={(e) => (e.currentTarget.style.outlineColor = "#e66462")}
+      onBlur={(e) => (e.currentTarget.style.outlineColor = "transparent")}
+      {...rest}
     />
   );
 }
\ No newline at end of file
diff --git a/app/pages/PageEnigma/comps/SidePanelTabs/TabStyling.tsx b/app/pages/PageEnigma/comps/SidePanelTabs/TabStyling.tsx
index 8e124041cf..4f289471b8 100644
--- a/app/pages/PageEnigma/comps/SidePanelTabs/TabStyling.tsx
+++ b/app/pages/PageEnigma/comps/SidePanelTabs/TabStyling.tsx
@@ -1,5 +1,7 @@
+import { useState } from 'react';
 
 import {
+  Button,
   H4,
   ItemPicker,
   Textarea
@@ -7,8 +9,10 @@ import {
 
 
 export const TabStyling = ()=>{
+  const [ selection, setSelection ] = useState<string>("Anime");
   const handlePickingStyle = (picked:string)=>{
     console.log(`Picked style: ${picked}`);
+    setSelection(picked);
   }
 
   return(
@@ -17,36 +21,43 @@ export const TabStyling = ()=>{
       <div className="flex gap-2 my-2">
         <ItemPicker
           label="Anime"
-          onClick={()=>handlePickingStyle("anime")}
+          selected={(selection === "Anime")}
+          onSelected={handlePickingStyle}
           src="/resources/avatars/0.webp"
         />
         <ItemPicker
           label="Pixel"
-          onClick={()=>handlePickingStyle("pixel")}
+          selected={selection === "Pixel"}
+          onSelected={handlePickingStyle}
           src="/resources/avatars/1.webp"
         />
         <ItemPicker
           label="Pixar"
-          onClick={()=>handlePickingStyle("pixar")}
+          selected={selection === "Pixar"}
+          onSelected={handlePickingStyle}
           src="/resources/avatars/2.webp"
         />
         <ItemPicker
           label="Stylized"
-          onClick={()=>handlePickingStyle("stylized")}
+          selected={selection === "Stylized"}
+          onSelected={handlePickingStyle}
           src="/resources/avatars/3.webp"
         />
       </div>
       <H4>Enter a Prompt</H4>
       <div className="flex gap-2 my-2">
-        <Textarea className="w-full" />
+        <Textarea className="w-full h-32"/>
       </div>
       <H4>Negative Prompt</H4>
       <div className="flex gap-2 my-2">
         <Textarea
-          className="w-full"
+          className="w-full h-32"
           placeholder="Type here to filter out the things you don't want in the scene
         "/>
       </div>
+      <div className="flex gap-2 mt-6 justify-center">
+        <Button>Preview Side by Side</Button>
+      </div>
     </>
   );
 

From 047ef25d250b37d024742fc62491287f7a9d7ccf Mon Sep 17 00:00:00 2001
From: Quicksticks-oss <chongobongotoday@gmail.com>
Date: Tue, 26 Mar 2024 16:51:44 -0400
Subject: [PATCH 04/16] fixed 3d control.

---
 app/pages/PageEnigma/comps/Controls3D/Controls3D.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/pages/PageEnigma/comps/Controls3D/Controls3D.tsx b/app/pages/PageEnigma/comps/Controls3D/Controls3D.tsx
index c36187a072..1c072efdae 100644
--- a/app/pages/PageEnigma/comps/Controls3D/Controls3D.tsx
+++ b/app/pages/PageEnigma/comps/Controls3D/Controls3D.tsx
@@ -48,7 +48,7 @@ export const Controls3D = () => {
     if (!editorEngine) {
       return;
     }
-    editorEngine.change_mode("transform");
+    editorEngine.change_mode("translate");
   };
   const handleRotateArrows = () => {
     if (!editorEngine) {

From 1826eeb9bfc745c382a8831e620a3cf85b3e1402 Mon Sep 17 00:00:00 2001
From: wil <wil@storyteller.ai>
Date: Tue, 26 Mar 2024 16:54:03 -0400
Subject: [PATCH 05/16] reducer context works

---
 app/pages/PageEnigma/PageEnigmaComponent.tsx  | 99 +++++++++++--------
 .../comps/Controls3D/Controls3D.tsx           |  2 +-
 .../ControlsTopButtons/ControlsTopButtons.tsx |  2 +-
 .../index.tsx                                 |  7 +-
 .../comps/PreviewStylized/index.tsx           | 42 ++++++++
 .../comps/SidePanelTabs/TabStyling.tsx        | 25 ++++-
 .../PageEnigma/contexts/AppUiContext.tsx      | 16 +++
 .../PageEnigma}/contexts/EngineContext.tsx    |  0
 .../PageEnigma}/contexts/EngineProvider.tsx   |  0
 app/pages/PageEnigma/reducer/index.tsx        | 14 +++
 app/pages/PageEnigma/reducer/reducer.tsx      | 22 +++++
 app/pages/PageEnigma/reducer/types.tsx        | 31 ++++++
 12 files changed, 210 insertions(+), 50 deletions(-)
 rename app/pages/PageEnigma/comps/{PreviewWindow => PreviewEngineCamera}/index.tsx (87%)
 create mode 100644 app/pages/PageEnigma/comps/PreviewStylized/index.tsx
 create mode 100644 app/pages/PageEnigma/contexts/AppUiContext.tsx
 rename app/{ => pages/PageEnigma}/contexts/EngineContext.tsx (100%)
 rename app/{ => pages/PageEnigma}/contexts/EngineProvider.tsx (100%)
 create mode 100644 app/pages/PageEnigma/reducer/index.tsx
 create mode 100644 app/pages/PageEnigma/reducer/reducer.tsx
 create mode 100644 app/pages/PageEnigma/reducer/types.tsx

diff --git a/app/pages/PageEnigma/PageEnigmaComponent.tsx b/app/pages/PageEnigma/PageEnigmaComponent.tsx
index 18c343a35f..defd5bc886 100644
--- a/app/pages/PageEnigma/PageEnigmaComponent.tsx
+++ b/app/pages/PageEnigma/PageEnigmaComponent.tsx
@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useRef, useState } from "react";
+import { useCallback, useEffect, useRef, useReducer } from "react";
 
 import { faSparkles } from "@fortawesome/pro-solid-svg-icons";
 
@@ -8,21 +8,31 @@ import { SidePanel } from "~/modules/SidePanel";
 import { Controls3D } from "./comps/Controls3D";
 import { ControlsTopButtons } from "./comps/ControlsTopButtons";
 import { ControlsVideo } from "./comps/ControlsVideo";
-import { PreviewWindow } from "./comps/PreviewWindow";
+import { PreviewEngineCamera } from "./comps/PreviewEngineCamera";
 import { Timeline } from "./comps/Timeline";
 import { SidePanelTabs } from "./comps/SidePanelTabs";
 
-import { EngineProvider } from "~/contexts/EngineProvider";
+import { EngineProvider } from "./contexts/EngineProvider";
+import { AppUIProvider } from "./contexts/AppUiContext";
+import { reducer, initialState, ACTION_TYPES } from "./reducer";
+import { VIEW_MODES } from "./reducer/types";
 
 export const PageEnigmaComponent = () => {
+  const [pageState, dispatchPageState] = useReducer(reducer, initialState);
+
   const canvasRef = useRef<HTMLCanvasElement | null>(null);
 
-  const [timelineHeight, setTimelineHeight] = useState(260);
+  // const [timelineHeight, setTimelineHeight] = useState(260);
   const timelineRef = useRef<HTMLDivElement | null>(null);
 
   const updateTimelineHeight = useCallback(() => {
     if (timelineRef.current) {
-      setTimelineHeight(timelineRef.current.offsetHeight);
+      dispatchPageState({
+        type: ACTION_TYPES.ON_TIMELINE_RESIZE,
+        payload: {
+          timelineHeight: timelineRef.current.offsetHeight
+        }
+      })
     }
   }, []);
 
@@ -43,50 +53,57 @@ export const PageEnigmaComponent = () => {
 
   return (
     <div>
+      <TopBarHelmet>
+        <Button icon={faSparkles}>Generate Movie</Button>
+      </TopBarHelmet>
+      
       <EngineProvider>
-        <TopBarHelmet>
-          <Button icon={faSparkles}>Generate Movie</Button>
-        </TopBarHelmet>
-        <div style={{ height: "calc(100vh - 68px)" }}>
-          {/* Engine section/side panel */}
-          <div
-            id="CanvasUiWrapper"
-            className="flex"
-            // style={{ height: `calc(100% - ${timelineHeight}px)` }}
-            style={{ height: `calc(100% - 260px` }}
-          >
-            <div className="relative w-full overflow-hidden bg-gray-400">
-              <canvas
-                ref={canvasRef}
-                id="video-scene"
-                width="1280px"
-                height="720px"
-              />
+        <AppUIProvider value={[pageState, dispatchPageState]} >
+          <div style={{ height: "calc(100vh - 68px)" }}>
+            {/* Engine section/side panel */}
+            <div
+              id="CanvasUiWrapper"
+              className="flex"
+              style={{ height: `calc(100% - ${pageState.timelineHeight}px)` }}
+              // style={{ height: `calc(100% - 260px` }}
+            >
+              <div className="relative w-full overflow-hidden bg-gray-400">
+                <canvas
+                  ref={canvasRef}
+                  id="video-scene"
+                  width="1280px"
+                  height="720px"
+                  className={(
+                    pageState.viewMode !== VIEW_MODES.EDITOR)
+                    ? 'invisible' : ''
+                  }
+                />
 
-              {/* Top controls */}
-              <div className="absolute left-0 top-0 w-full">
-                <div className="grid grid-cols-3 gap-4">
-                  <ControlsTopButtons />
-                  <Controls3D />
+                {/* Top controls */}
+                <div className="absolute left-0 top-0 w-full">
+                  <div className="grid grid-cols-3 gap-4">
+                    <ControlsTopButtons />
+                    <Controls3D />
+                  </div>
+                </div>
+
+                {/* Bottom controls */}
+                <div className="absolute bottom-0 left-0 w-full">
+                  <PreviewEngineCamera />
+                  <ControlsVideo />
                 </div>
               </div>
 
-              {/* Bottom controls */}
-              <div className="absolute bottom-0 left-0 w-full">
-                <PreviewWindow />
-                <ControlsVideo />
-              </div>
+              {/* Side panel */}
+              <SidePanel>
+                <SidePanelTabs />
+              </SidePanel>
             </div>
 
-            {/* Side panel */}
-            <SidePanel>
-              <SidePanelTabs />
-            </SidePanel>
+            {/* Timeline */}
+            <Timeline timelineHeight={pageState.timelineHeight} />
           </div>
-
-          {/* Timeline */}
-          <Timeline timelineHeight={timelineHeight} />
-        </div>
+        </AppUIProvider>
       </EngineProvider>
     </div>
   );
diff --git a/app/pages/PageEnigma/comps/Controls3D/Controls3D.tsx b/app/pages/PageEnigma/comps/Controls3D/Controls3D.tsx
index c36187a072..02d858ef1c 100644
--- a/app/pages/PageEnigma/comps/Controls3D/Controls3D.tsx
+++ b/app/pages/PageEnigma/comps/Controls3D/Controls3D.tsx
@@ -11,7 +11,7 @@ import {
   fa3dSphere,
 } from "@awesome.me/kit-fde2be5eb0/icons/kit/custom";
 import { ButtonIcon, ButtonIconSelect } from "~/components";
-import { EngineContext } from "~/contexts/EngineContext";
+import { EngineContext } from "../../contexts/EngineContext";
 import { useContext } from "react";
 
 export const Controls3D = () => {
diff --git a/app/pages/PageEnigma/comps/ControlsTopButtons/ControlsTopButtons.tsx b/app/pages/PageEnigma/comps/ControlsTopButtons/ControlsTopButtons.tsx
index 75a5ecd93c..65af5650f3 100644
--- a/app/pages/PageEnigma/comps/ControlsTopButtons/ControlsTopButtons.tsx
+++ b/app/pages/PageEnigma/comps/ControlsTopButtons/ControlsTopButtons.tsx
@@ -1,7 +1,7 @@
 import { useContext, useState } from "react";
 import { Button, H4, Input } from "~/components";
 import { ButtonDialogue } from "~/modules/ButtonDialogue";
-import { EngineContext } from "~/contexts/EngineContext";
+import { EngineContext } from "../../contexts/EngineContext";
 
 export const ControlsTopButtons = () => {
   const editorEngine = useContext(EngineContext);
diff --git a/app/pages/PageEnigma/comps/PreviewWindow/index.tsx b/app/pages/PageEnigma/comps/PreviewEngineCamera/index.tsx
similarity index 87%
rename from app/pages/PageEnigma/comps/PreviewWindow/index.tsx
rename to app/pages/PageEnigma/comps/PreviewEngineCamera/index.tsx
index 7704c68ecd..324a2bcad9 100644
--- a/app/pages/PageEnigma/comps/PreviewWindow/index.tsx
+++ b/app/pages/PageEnigma/comps/PreviewEngineCamera/index.tsx
@@ -1,8 +1,8 @@
 import { useContext, useEffect, useState } from "react"
-import { EngineContext } from "~/contexts/EngineContext"
+import { EngineContext } from "../../contexts/EngineContext"
 
 import { LoadingDotsTyping } from "~/components";
-export const PreviewWindow = ()=>{
+export const PreviewEngineCamera = ()=>{
   const editorEngine = useContext(EngineContext);
   //take data from egine context
 
@@ -12,12 +12,11 @@ export const PreviewWindow = ()=>{
   },[]);
   return (
     <div
-      id="preview-window"
+      id="preview-engine-camera"
       className="absolute bottom-0 w-30 m-4"
     >
       <div className="relative">
         <div
-          id="preview-window-label"
           className="text-white bg-ui-panel pt-1 px-2 pb-3 -z-10 rounded-t-lg -mb-2 w-fit"
         >
           <p>Camera View</p>
diff --git a/app/pages/PageEnigma/comps/PreviewStylized/index.tsx b/app/pages/PageEnigma/comps/PreviewStylized/index.tsx
new file mode 100644
index 0000000000..8d852844fd
--- /dev/null
+++ b/app/pages/PageEnigma/comps/PreviewStylized/index.tsx
@@ -0,0 +1,42 @@
+import {
+  // useContext,
+  useEffect,
+  useState,
+} from "react"
+// import { EngineContext } from "~/contexts/EngineContext"
+
+import { LoadingDotsTyping } from "~/components";
+export const PreviewStylized = ()=>{
+  // const editorEngine = useContext(EngineContext);
+  //take data from egine context
+
+  const [showLoader, setShowLoader] = useState<boolean>(true);
+  useEffect(()=>{
+    setTimeout(()=>setShowLoader(false), 5000);
+  },[]);
+  return (
+    <div
+      id="preview-stylized"
+      className="absolute bottom-0 w-30 m-4"
+    >
+      <div className="relative">
+        <div
+          className="text-white bg-ui-panel pt-1 px-2 pb-3 -z-10 rounded-t-lg -mb-2 w-fit"
+        >
+          <label>Stylized Preview</label>
+        </div>
+        <div className="relative rounded-lg border border-white box overflow-hidden">
+          
+          <img
+            //shoot that datat from engine context to this image
+            className="aspect-video max-h-40" 
+            src="/resources/uiAssets/video_player_placeholder.gif"
+          />
+          <div className="absolute w-full h-full top-0 left-0">
+            <LoadingDotsTyping show={showLoader} transition/>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
\ No newline at end of file
diff --git a/app/pages/PageEnigma/comps/SidePanelTabs/TabStyling.tsx b/app/pages/PageEnigma/comps/SidePanelTabs/TabStyling.tsx
index 4f289471b8..b114bb545f 100644
--- a/app/pages/PageEnigma/comps/SidePanelTabs/TabStyling.tsx
+++ b/app/pages/PageEnigma/comps/SidePanelTabs/TabStyling.tsx
@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { useContext, useState } from 'react';
 
 import {
   Button,
@@ -7,14 +7,29 @@ import {
   Textarea
 } from "~/components"
 
+import { AppUiContext } from '../../contexts/AppUiContext';
+import { ACTION_TYPES } from '../../reducer';
+import { VIEW_MODES } from '../../reducer/types';
 
 export const TabStyling = ()=>{
+  const [pageState, dispatchPageState] = useContext(AppUiContext);
   const [ selection, setSelection ] = useState<string>("Anime");
   const handlePickingStyle = (picked:string)=>{
     console.log(`Picked style: ${picked}`);
     setSelection(picked);
   }
 
+
+  const handleChangeViewMode = ()=>{
+    if(dispatchPageState!==null)
+      dispatchPageState({
+        type: ACTION_TYPES.ON_CHANGE_VIEW_MODE,
+        payload: {
+          viewMode: pageState?.viewMode === VIEW_MODES.SIDE_BY_SIDE
+            ? VIEW_MODES.EDITOR : VIEW_MODES.SIDE_BY_SIDE,
+        }
+      })
+  }
   return(
     <>
       <H4>Select Base Style</H4>
@@ -56,9 +71,13 @@ export const TabStyling = ()=>{
         "/>
       </div>
       <div className="flex gap-2 mt-6 justify-center">
-        <Button>Preview Side by Side</Button>
+        <Button onClick={handleChangeViewMode}>
+          { 
+            pageState?.viewMode ===  VIEW_MODES.SIDE_BY_SIDE 
+            ? "Back to Scene" : "Preview Side by Side"
+          }
+        </Button>
       </div>
     </>
   );
-
 }
\ No newline at end of file
diff --git a/app/pages/PageEnigma/contexts/AppUiContext.tsx b/app/pages/PageEnigma/contexts/AppUiContext.tsx
new file mode 100644
index 0000000000..0544b3e844
--- /dev/null
+++ b/app/pages/PageEnigma/contexts/AppUiContext.tsx
@@ -0,0 +1,16 @@
+import { createContext, Dispatch, ReactNode } from "react";
+import { State, Action } from "../reducer";
+
+export const AppUiContext = createContext<[State|null, Dispatch<Action>|null]>([null,null]);
+
+export const AppUIProvider = ({
+  value,
+  children,
+}:{
+  value:[State, Dispatch<Action>],
+  children: ReactNode
+})=>{
+  return (
+    <AppUiContext.Provider value={value}>{children}</AppUiContext.Provider>
+  );
+}
\ No newline at end of file
diff --git a/app/contexts/EngineContext.tsx b/app/pages/PageEnigma/contexts/EngineContext.tsx
similarity index 100%
rename from app/contexts/EngineContext.tsx
rename to app/pages/PageEnigma/contexts/EngineContext.tsx
diff --git a/app/contexts/EngineProvider.tsx b/app/pages/PageEnigma/contexts/EngineProvider.tsx
similarity index 100%
rename from app/contexts/EngineProvider.tsx
rename to app/pages/PageEnigma/contexts/EngineProvider.tsx
diff --git a/app/pages/PageEnigma/reducer/index.tsx b/app/pages/PageEnigma/reducer/index.tsx
new file mode 100644
index 0000000000..8fe4585c96
--- /dev/null
+++ b/app/pages/PageEnigma/reducer/index.tsx
@@ -0,0 +1,14 @@
+import {State, Action, ACTION_TYPES, VIEW_MODES} from './types';
+import {reducer} from './reducer';
+
+const initialState:State = {
+  timelineHeight: 260,
+  viewMode: VIEW_MODES.EDITOR
+}
+
+export type {State, Action};
+export {
+  ACTION_TYPES,
+  initialState,
+  reducer,
+}
\ No newline at end of file
diff --git a/app/pages/PageEnigma/reducer/reducer.tsx b/app/pages/PageEnigma/reducer/reducer.tsx
new file mode 100644
index 0000000000..570646835b
--- /dev/null
+++ b/app/pages/PageEnigma/reducer/reducer.tsx
@@ -0,0 +1,22 @@
+import { State, Action, ACTION_TYPES} from './types';
+
+export function reducer(state: State, action: Action): State {
+  switch(action.type){
+    case ACTION_TYPES.ON_TIMELINE_RESIZE:{
+      return{
+        ...state,
+        timelineHeight: action.payload.timelineHeight,
+      }
+    }
+    case ACTION_TYPES.ON_CHANGE_VIEW_MODE:{
+      console.log(action);
+      return{
+        ...state,
+        viewMode: action.payload.viewMode
+      }
+    }
+    default:{
+      return state; //no change
+    }
+  }// end switch
+}
diff --git a/app/pages/PageEnigma/reducer/types.tsx b/app/pages/PageEnigma/reducer/types.tsx
new file mode 100644
index 0000000000..ca40f25406
--- /dev/null
+++ b/app/pages/PageEnigma/reducer/types.tsx
@@ -0,0 +1,31 @@
+export enum VIEW_MODES {
+  EDITOR = 'editor',
+  SIDE_BY_SIDE = 'side-by-side'
+};
+
+type ViewModes = VIEW_MODES.EDITOR | VIEW_MODES.SIDE_BY_SIDE;
+
+export type State = {
+  viewMode: ViewModes;
+  timelineHeight: number
+};
+
+
+export enum ACTION_TYPES {
+  ON_TIMELINE_RESIZE = "on_timeline_resize",
+  ON_CHANGE_VIEW_MODE = "on_change_view_mode"
+};
+
+export type Action = 
+  | {
+      type: ACTION_TYPES.ON_TIMELINE_RESIZE, 
+      payload: {
+        timelineHeight: number
+      }
+    }
+  | {
+    type: ACTION_TYPES.ON_CHANGE_VIEW_MODE, 
+    payload: {
+      viewMode: ViewModes
+    }
+  };
\ No newline at end of file

From 3ee5b6ee8b98265033c4f39001a6b2c373833a8f Mon Sep 17 00:00:00 2001
From: wil <wil@storyteller.ai>
Date: Tue, 26 Mar 2024 17:25:07 -0400
Subject: [PATCH 06/16] side by side view done

---
 app/pages/PageEnigma/PageEnigmaComponent.tsx  | 49 ++++++++++---------
 .../comps/PreviewStylized/index.tsx           | 42 ----------------
 .../PageEnigma/comps/ViewSideBySide/index.tsx | 40 +++++++++++++++
 3 files changed, 66 insertions(+), 65 deletions(-)
 delete mode 100644 app/pages/PageEnigma/comps/PreviewStylized/index.tsx
 create mode 100644 app/pages/PageEnigma/comps/ViewSideBySide/index.tsx

diff --git a/app/pages/PageEnigma/PageEnigmaComponent.tsx b/app/pages/PageEnigma/PageEnigmaComponent.tsx
index defd5bc886..a90c5515c1 100644
--- a/app/pages/PageEnigma/PageEnigmaComponent.tsx
+++ b/app/pages/PageEnigma/PageEnigmaComponent.tsx
@@ -16,6 +16,7 @@ import { EngineProvider } from "./contexts/EngineProvider";
 import { AppUIProvider } from "./contexts/AppUiContext";
 import { reducer, initialState, ACTION_TYPES } from "./reducer";
 import { VIEW_MODES } from "./reducer/types";
+import { ViewSideBySide } from "./comps/ViewSideBySide";
 
 export const PageEnigmaComponent = () => {
   const [pageState, dispatchPageState] = useReducer(reducer, initialState);
@@ -67,33 +68,35 @@ export const PageEnigmaComponent = () => {
               style={{ height: `calc(100% - ${pageState.timelineHeight}px)` }}
               // style={{ height: `calc(100% - 260px` }}
             >
-              <div className="relative w-full overflow-hidden bg-gray-400">
-                <canvas
-                  ref={canvasRef}
-                  id="video-scene"
-                  width="1280px"
-                  height="720px"
-                  className={(
-                    pageState.viewMode !== VIEW_MODES.EDITOR)
-                    ? 'invisible' : ''
-                  }
-                />
+              <div className="relative w-full overflow-hidden bg-transparent">
+                <div className={(pageState.viewMode === VIEW_MODES.SIDE_BY_SIDE) ? 'invisible' : ''}>
+                  <canvas
+                    ref={canvasRef}
+                    id="video-scene"
+                    width="1280px"
+                    height="720px"
+                  />
 
-                {/* Top controls */}
-                <div className="absolute left-0 top-0 w-full">
-                  <div className="grid grid-cols-3 gap-4">
-                    <ControlsTopButtons />
-                    <Controls3D />
+                  {/* Top controls */}
+                  <div className="absolute left-0 top-0 w-full">
+                    <div className="grid grid-cols-3 gap-4">
+                      <ControlsTopButtons />
+                      <Controls3D />
+                    </div>
+                  </div>
+
+                  {/* Bottom controls */}
+                  <div className="absolute bottom-0 left-0 w-full">
+                    <PreviewEngineCamera />
+                    <ControlsVideo />
                   </div>
                 </div>
-
-                {/* Bottom controls */}
-                <div className="absolute bottom-0 left-0 w-full">
-                  <PreviewEngineCamera />
-                  <ControlsVideo />
-                </div>
+                {
+                  pageState.viewMode === VIEW_MODES.SIDE_BY_SIDE &&
+                  <ViewSideBySide />
+                }
               </div>
-
+              
               {/* Side panel */}
               <SidePanel>
                 <SidePanelTabs />
diff --git a/app/pages/PageEnigma/comps/PreviewStylized/index.tsx b/app/pages/PageEnigma/comps/PreviewStylized/index.tsx
deleted file mode 100644
index 8d852844fd..0000000000
--- a/app/pages/PageEnigma/comps/PreviewStylized/index.tsx
+++ /dev/null
@@ -1,42 +0,0 @@
-import {
-  // useContext,
-  useEffect,
-  useState,
-} from "react"
-// import { EngineContext } from "~/contexts/EngineContext"
-
-import { LoadingDotsTyping } from "~/components";
-export const PreviewStylized = ()=>{
-  // const editorEngine = useContext(EngineContext);
-  //take data from egine context
-
-  const [showLoader, setShowLoader] = useState<boolean>(true);
-  useEffect(()=>{
-    setTimeout(()=>setShowLoader(false), 5000);
-  },[]);
-  return (
-    <div
-      id="preview-stylized"
-      className="absolute bottom-0 w-30 m-4"
-    >
-      <div className="relative">
-        <div
-          className="text-white bg-ui-panel pt-1 px-2 pb-3 -z-10 rounded-t-lg -mb-2 w-fit"
-        >
-          <label>Stylized Preview</label>
-        </div>
-        <div className="relative rounded-lg border border-white box overflow-hidden">
-          
-          <img
-            //shoot that datat from engine context to this image
-            className="aspect-video max-h-40" 
-            src="/resources/uiAssets/video_player_placeholder.gif"
-          />
-          <div className="absolute w-full h-full top-0 left-0">
-            <LoadingDotsTyping show={showLoader} transition/>
-          </div>
-        </div>
-      </div>
-    </div>
-  )
-}
\ No newline at end of file
diff --git a/app/pages/PageEnigma/comps/ViewSideBySide/index.tsx b/app/pages/PageEnigma/comps/ViewSideBySide/index.tsx
new file mode 100644
index 0000000000..d515fe5d62
--- /dev/null
+++ b/app/pages/PageEnigma/comps/ViewSideBySide/index.tsx
@@ -0,0 +1,40 @@
+import {
+  useEffect,
+  useState,
+} from "react"
+
+export const ViewSideBySide = ()=>{
+
+  return (
+    <div
+      id="view-side-by-side"
+      className="absolute top-0 left-0 w-full h-full flex justify-center items-center gap-2 p-2"
+    >
+      <div className="flex flex-col justify-center items-center">
+        <div className="text-white">
+          <label>Raw Preview</label>
+        </div>
+        <div className="relative">
+          <img
+            //shoot that datat from engine context to this image
+            className="aspect-video max-h-150" 
+            src="/resources/uiAssets/video_player_placeholder.gif"
+          />
+        </div>
+      </div>
+
+      <div className="flex flex-col justify-center items-center">
+        <div className="text-white">
+          <label>Stylized Preview</label>
+        </div>
+        <div className="relative">
+          <img
+            //shoot that datat from engine context to this image
+            className="aspect-video max-h-150" 
+            src="/resources/uiAssets/video_player_placeholder.gif"
+          />
+        </div>
+      </div>
+    </div>
+  )
+}
\ No newline at end of file

From d73fda9c08c2df200c22d1a3191eda6883389ff6 Mon Sep 17 00:00:00 2001
From: wil <wil@storyteller.ai>
Date: Tue, 26 Mar 2024 18:04:04 -0400
Subject: [PATCH 07/16] some housekeeping stuff

---
 app/pages/PageEnigma/PageEnigmaComponent.tsx  | 18 +++++------
 .../{TabStyling.tsx => TabStylization.tsx}    | 30 +++++++++++--------
 .../PageEnigma/comps/SidePanelTabs/index.tsx  |  6 ++--
 .../PageEnigma/comps/ViewSideBySide/index.tsx | 11 ++++++-
 4 files changed, 38 insertions(+), 27 deletions(-)
 rename app/pages/PageEnigma/comps/SidePanelTabs/{TabStyling.tsx => TabStylization.tsx} (72%)

diff --git a/app/pages/PageEnigma/PageEnigmaComponent.tsx b/app/pages/PageEnigma/PageEnigmaComponent.tsx
index a90c5515c1..9789be5f42 100644
--- a/app/pages/PageEnigma/PageEnigmaComponent.tsx
+++ b/app/pages/PageEnigma/PageEnigmaComponent.tsx
@@ -2,7 +2,7 @@ import { useCallback, useEffect, useRef, useReducer } from "react";
 
 import { faSparkles } from "@fortawesome/pro-solid-svg-icons";
 
-import { Button } from "~/components";
+import { Button, LoadingDotsBricks } from "~/components";
 import { TopBarHelmet } from "~/modules/TopBarHelmet/TopBarHelmet";
 import { SidePanel } from "~/modules/SidePanel";
 import { Controls3D } from "./comps/Controls3D";
@@ -19,16 +19,14 @@ import { VIEW_MODES } from "./reducer/types";
 import { ViewSideBySide } from "./comps/ViewSideBySide";
 
 export const PageEnigmaComponent = () => {
-  const [pageState, dispatchPageState] = useReducer(reducer, initialState);
+  const [appUiState, dispatchAppUiState] = useReducer(reducer, initialState);
 
   const canvasRef = useRef<HTMLCanvasElement | null>(null);
-
-  // const [timelineHeight, setTimelineHeight] = useState(260);
   const timelineRef = useRef<HTMLDivElement | null>(null);
 
   const updateTimelineHeight = useCallback(() => {
     if (timelineRef.current) {
-      dispatchPageState({
+      dispatchAppUiState({
         type: ACTION_TYPES.ON_TIMELINE_RESIZE,
         payload: {
           timelineHeight: timelineRef.current.offsetHeight
@@ -59,17 +57,17 @@ export const PageEnigmaComponent = () => {
       </TopBarHelmet>
       
       <EngineProvider>
-        <AppUIProvider value={[pageState, dispatchPageState]} >
+        <AppUIProvider value={[appUiState, dispatchAppUiState]} >
           <div style={{ height: "calc(100vh - 68px)" }}>
             {/* Engine section/side panel */}
             <div
               id="CanvasUiWrapper"
               className="flex"
-              style={{ height: `calc(100% - ${pageState.timelineHeight}px)` }}
+              style={{ height: `calc(100% - ${appUiState.timelineHeight}px)` }}
               // style={{ height: `calc(100% - 260px` }}
             >
               <div className="relative w-full overflow-hidden bg-transparent">
-                <div className={(pageState.viewMode === VIEW_MODES.SIDE_BY_SIDE) ? 'invisible' : ''}>
+                <div className={(appUiState.viewMode === VIEW_MODES.SIDE_BY_SIDE) ? 'invisible' : ''}>
                   <canvas
                     ref={canvasRef}
                     id="video-scene"
@@ -92,7 +90,7 @@ export const PageEnigmaComponent = () => {
                   </div>
                 </div>
                 {
-                  pageState.viewMode === VIEW_MODES.SIDE_BY_SIDE &&
+                  appUiState.viewMode === VIEW_MODES.SIDE_BY_SIDE &&
                   <ViewSideBySide />
                 }
               </div>
@@ -104,7 +102,7 @@ export const PageEnigmaComponent = () => {
             </div>
 
             {/* Timeline */}
-            <Timeline timelineHeight={pageState.timelineHeight} />
+            <Timeline timelineHeight={appUiState.timelineHeight} />
           </div>
         </AppUIProvider>
       </EngineProvider>
diff --git a/app/pages/PageEnigma/comps/SidePanelTabs/TabStyling.tsx b/app/pages/PageEnigma/comps/SidePanelTabs/TabStylization.tsx
similarity index 72%
rename from app/pages/PageEnigma/comps/SidePanelTabs/TabStyling.tsx
rename to app/pages/PageEnigma/comps/SidePanelTabs/TabStylization.tsx
index b114bb545f..a356416e55 100644
--- a/app/pages/PageEnigma/comps/SidePanelTabs/TabStyling.tsx
+++ b/app/pages/PageEnigma/comps/SidePanelTabs/TabStylization.tsx
@@ -11,57 +11,61 @@ import { AppUiContext } from '../../contexts/AppUiContext';
 import { ACTION_TYPES } from '../../reducer';
 import { VIEW_MODES } from '../../reducer/types';
 
-export const TabStyling = ()=>{
-  const [pageState, dispatchPageState] = useContext(AppUiContext);
+export const TabStylization = ()=>{
+  const [appUiState, dispatchAppUiState] = useContext(AppUiContext);
   const [ selection, setSelection ] = useState<string>("Anime");
-  const handlePickingStyle = (picked:string)=>{
+  const handlePickingStylizer = (picked:string)=>{
     console.log(`Picked style: ${picked}`);
     setSelection(picked);
   }
 
 
   const handleChangeViewMode = ()=>{
-    if(dispatchPageState!==null)
-      dispatchPageState({
+    if(dispatchAppUiState!==null){
+      dispatchAppUiState({
         type: ACTION_TYPES.ON_CHANGE_VIEW_MODE,
         payload: {
-          viewMode: pageState?.viewMode === VIEW_MODES.SIDE_BY_SIDE
+          viewMode: appUiState?.viewMode === VIEW_MODES.SIDE_BY_SIDE
             ? VIEW_MODES.EDITOR : VIEW_MODES.SIDE_BY_SIDE,
         }
       })
+    }
   }
   return(
     <>
-      <H4>Select Base Style</H4>
+      <H4>Select Base Stylizer</H4>
       <div className="flex gap-2 my-2">
         <ItemPicker
           label="Anime"
           selected={(selection === "Anime")}
-          onSelected={handlePickingStyle}
+          onSelected={handlePickingStylizer}
           src="/resources/avatars/0.webp"
         />
         <ItemPicker
           label="Pixel"
           selected={selection === "Pixel"}
-          onSelected={handlePickingStyle}
+          onSelected={handlePickingStylizer}
           src="/resources/avatars/1.webp"
         />
         <ItemPicker
           label="Pixar"
           selected={selection === "Pixar"}
-          onSelected={handlePickingStyle}
+          onSelected={handlePickingStylizer}
           src="/resources/avatars/2.webp"
         />
         <ItemPicker
           label="Stylized"
           selected={selection === "Stylized"}
-          onSelected={handlePickingStyle}
+          onSelected={handlePickingStylizer}
           src="/resources/avatars/3.webp"
         />
       </div>
       <H4>Enter a Prompt</H4>
       <div className="flex gap-2 my-2">
-        <Textarea className="w-full h-32"/>
+        <Textarea
+          className="w-full h-32"
+          placeholder="Type here to describe your scene"
+        />
       </div>
       <H4>Negative Prompt</H4>
       <div className="flex gap-2 my-2">
@@ -73,7 +77,7 @@ export const TabStyling = ()=>{
       <div className="flex gap-2 mt-6 justify-center">
         <Button onClick={handleChangeViewMode}>
           { 
-            pageState?.viewMode ===  VIEW_MODES.SIDE_BY_SIDE 
+            appUiState?.viewMode ===  VIEW_MODES.SIDE_BY_SIDE 
             ? "Back to Scene" : "Preview Side by Side"
           }
         </Button>
diff --git a/app/pages/PageEnigma/comps/SidePanelTabs/index.tsx b/app/pages/PageEnigma/comps/SidePanelTabs/index.tsx
index 7cf8647172..7ea7f8d701 100644
--- a/app/pages/PageEnigma/comps/SidePanelTabs/index.tsx
+++ b/app/pages/PageEnigma/comps/SidePanelTabs/index.tsx
@@ -1,5 +1,5 @@
 import { Tabs } from "~/modules/Tabs";
-import { TabStyling } from "./TabStyling";
+import { TabStylization} from "./TabStylization";
 import { ClipElements } from "./ClipElements";
 
 export const SidePanelTabs = () => {
@@ -19,8 +19,8 @@ export const SidePanelTabs = () => {
           children: <p>Audio Tab</p>,
         },
         {
-          header: "Styling",
-          children: <TabStyling />,
+          header: "Stylization",
+          children: <TabStylization />,
         },
       ]}
     />
diff --git a/app/pages/PageEnigma/comps/ViewSideBySide/index.tsx b/app/pages/PageEnigma/comps/ViewSideBySide/index.tsx
index d515fe5d62..788f31d297 100644
--- a/app/pages/PageEnigma/comps/ViewSideBySide/index.tsx
+++ b/app/pages/PageEnigma/comps/ViewSideBySide/index.tsx
@@ -1,9 +1,15 @@
 import {
   useEffect,
   useState,
-} from "react"
+} from "react";
+
+import { LoadingDotsBricks } from "~/components";
 
 export const ViewSideBySide = ()=>{
+  const [showLoader, setShowLoader] = useState(true);
+  useEffect(()=>{
+    setTimeout(()=>setShowLoader(false), 1000);
+  },[ ]);
 
   return (
     <div
@@ -35,6 +41,9 @@ export const ViewSideBySide = ()=>{
           />
         </div>
       </div>
+      <div className="absolute top-0 left-0 w-full h-full">
+        <LoadingDotsBricks show={showLoader} transition/>
+      </div>
     </div>
   )
 }
\ No newline at end of file

From 3cb58293ce18566458cd26094fec7d51b853bf3d Mon Sep 17 00:00:00 2001
From: wil <wil@storyteller.ai>
Date: Tue, 26 Mar 2024 20:18:10 -0400
Subject: [PATCH 08/16] engine editor loading screen

---
 app/components/LoadingDots.tsx               |  6 ++-
 app/pages/PageEnigma/PageEnigmaComponent.tsx | 40 ++++++--------------
 app/pages/PageEnigma/reducer/index.tsx       |  3 +-
 app/pages/PageEnigma/reducer/reducer.tsx     | 12 ++++++
 app/pages/PageEnigma/reducer/types.tsx       | 12 ++++--
 5 files changed, 39 insertions(+), 34 deletions(-)

diff --git a/app/components/LoadingDots.tsx b/app/components/LoadingDots.tsx
index b4aa233350..4d622587ba 100644
--- a/app/components/LoadingDots.tsx
+++ b/app/components/LoadingDots.tsx
@@ -1,12 +1,15 @@
 import { useState, useEffect } from 'react';
+import { twMerge } from 'tailwind-merge';
 
 interface LoadingDotsProps {
+  className?: string;
   show?: boolean;
   transition?: boolean;
   transitionDuration?: number;
 };
 
 interface LoadingDotsInnerProps {
+  className?: string;
   show?: boolean;
   transition?: boolean;
   transitionDuration?: number;
@@ -29,6 +32,7 @@ export const LoadingDotsBricks = (props: LoadingDotsProps)=>{
 }
 
 function LoadingDots({
+  className,
   show=true,
   transition = false,
   transitionDuration = 1000,
@@ -39,7 +43,7 @@ function LoadingDots({
     (transition ? `transition-opacity duration-${transitionDuration} `: "")
     + (state === 'loading' ? 'opacity-100' : 'opacity-0');
 
-  const classNames = "w-full h-full flex justify-center items-center bg-ui-background " + transitionClasses;
+  const classNames = twMerge("w-full h-full flex justify-center items-center bg-ui-background ",transitionClasses, className);
   useEffect(()=>{
     if(!show){
       if(transition){
diff --git a/app/pages/PageEnigma/PageEnigmaComponent.tsx b/app/pages/PageEnigma/PageEnigmaComponent.tsx
index 9789be5f42..0f8db07a61 100644
--- a/app/pages/PageEnigma/PageEnigmaComponent.tsx
+++ b/app/pages/PageEnigma/PageEnigmaComponent.tsx
@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useRef, useReducer } from "react";
+import { useEffect, useRef, useReducer } from "react";
 
 import { faSparkles } from "@fortawesome/pro-solid-svg-icons";
 
@@ -22,34 +22,11 @@ export const PageEnigmaComponent = () => {
   const [appUiState, dispatchAppUiState] = useReducer(reducer, initialState);
 
   const canvasRef = useRef<HTMLCanvasElement | null>(null);
-  const timelineRef = useRef<HTMLDivElement | null>(null);
-
-  const updateTimelineHeight = useCallback(() => {
-    if (timelineRef.current) {
-      dispatchAppUiState({
-        type: ACTION_TYPES.ON_TIMELINE_RESIZE,
-        payload: {
-          timelineHeight: timelineRef.current.offsetHeight
-        }
-      })
-    }
-  }, []);
-
-  //for updating timeline/engine div height (for resizing)
-  useEffect(() => {
-    const observer = new ResizeObserver((entries) => {
-      for (let entry of entries) {
-        updateTimelineHeight();
-      }
-    });
-
-    if (timelineRef.current) {
-      observer.observe(timelineRef.current);
-    }
-
-    return () => observer.disconnect();
-  }, [updateTimelineHeight]);
-
+  useEffect(()=>{
+    setTimeout(()=>dispatchAppUiState({
+      type: ACTION_TYPES.HIDE_EDITOR_LOADER
+    }), 3000);
+  },[]);
   return (
     <div>
       <TopBarHelmet>
@@ -93,6 +70,11 @@ export const PageEnigmaComponent = () => {
                   appUiState.viewMode === VIEW_MODES.SIDE_BY_SIDE &&
                   <ViewSideBySide />
                 }
+                <LoadingDotsBricks
+                  className="absolute top-0 left-0"
+                  show={appUiState.showEditorLoader}
+                  transition
+                />
               </div>
               
               {/* Side panel */}
diff --git a/app/pages/PageEnigma/reducer/index.tsx b/app/pages/PageEnigma/reducer/index.tsx
index 8fe4585c96..937a46902e 100644
--- a/app/pages/PageEnigma/reducer/index.tsx
+++ b/app/pages/PageEnigma/reducer/index.tsx
@@ -3,7 +3,8 @@ import {reducer} from './reducer';
 
 const initialState:State = {
   timelineHeight: 260,
-  viewMode: VIEW_MODES.EDITOR
+  viewMode: VIEW_MODES.EDITOR,
+  showEditorLoader: true
 }
 
 export type {State, Action};
diff --git a/app/pages/PageEnigma/reducer/reducer.tsx b/app/pages/PageEnigma/reducer/reducer.tsx
index 570646835b..be23529158 100644
--- a/app/pages/PageEnigma/reducer/reducer.tsx
+++ b/app/pages/PageEnigma/reducer/reducer.tsx
@@ -2,6 +2,18 @@ import { State, Action, ACTION_TYPES} from './types';
 
 export function reducer(state: State, action: Action): State {
   switch(action.type){
+    case ACTION_TYPES.SHOW_EDITOR_LOADER:{
+      return{
+        ...state,
+        showEditorLoader: true,
+      }
+    }
+    case ACTION_TYPES.HIDE_EDITOR_LOADER:{
+      return{
+        ...state,
+        showEditorLoader: false,
+      }
+    }
     case ACTION_TYPES.ON_TIMELINE_RESIZE:{
       return{
         ...state,
diff --git a/app/pages/PageEnigma/reducer/types.tsx b/app/pages/PageEnigma/reducer/types.tsx
index ca40f25406..0dd64b234d 100644
--- a/app/pages/PageEnigma/reducer/types.tsx
+++ b/app/pages/PageEnigma/reducer/types.tsx
@@ -7,16 +7,21 @@ type ViewModes = VIEW_MODES.EDITOR | VIEW_MODES.SIDE_BY_SIDE;
 
 export type State = {
   viewMode: ViewModes;
-  timelineHeight: number
+  timelineHeight: number;
+  showEditorLoader: boolean;
 };
 
 
 export enum ACTION_TYPES {
   ON_TIMELINE_RESIZE = "on_timeline_resize",
-  ON_CHANGE_VIEW_MODE = "on_change_view_mode"
+  ON_CHANGE_VIEW_MODE = "on_change_view_mode",
+  SHOW_EDITOR_LOADER = "show_editor_loader",
+  HIDE_EDITOR_LOADER = "hide_editor_loader",
 };
 
 export type Action = 
+  | {type: ACTION_TYPES.SHOW_EDITOR_LOADER,}
+  | {type: ACTION_TYPES.HIDE_EDITOR_LOADER,}
   | {
       type: ACTION_TYPES.ON_TIMELINE_RESIZE, 
       payload: {
@@ -28,4 +33,5 @@ export type Action =
     payload: {
       viewMode: ViewModes
     }
-  };
\ No newline at end of file
+  }
+  ;
\ No newline at end of file

From ef517289775d3cc5668c507ebc93b40da5c6f4be Mon Sep 17 00:00:00 2001
From: FromTheLOLAshes <from.the.lol.ashes@gmail.com>
Date: Wed, 27 Mar 2024 07:30:11 +0700
Subject: [PATCH 09/16] Move TrackContext

---
 app/pages/PageEnigma/PageEnigma.tsx                    |  2 +-
 .../PageEnigma/comps/SidePanelTabs/ClipElement.tsx     |  2 +-
 .../PageEnigma/comps/SidePanelTabs/ClipElements.tsx    |  2 +-
 app/pages/PageEnigma/comps/Timeline/Audio.tsx          |  4 ++--
 app/pages/PageEnigma/comps/Timeline/Camera.tsx         |  4 ++--
 app/pages/PageEnigma/comps/Timeline/Character.tsx      |  2 +-
 app/pages/PageEnigma/comps/Timeline/Objects.tsx        |  4 ++--
 app/pages/PageEnigma/comps/Timeline/Timeline.tsx       |  6 +++---
 app/pages/PageEnigma/comps/Timeline/Track.tsx          |  2 +-
 app/pages/PageEnigma/comps/Timeline/TrackClip.tsx      |  2 +-
 .../comps/Timeline/utils/useMouseEventsAnimation.ts    |  2 +-
 .../comps/Timeline/utils/useMouseEventsClip.ts         |  2 +-
 .../PageEnigma}/contexts/TrackContext/TrackContext.tsx |  0
 .../contexts/TrackContext/TrackProvider.tsx            | 10 +++++-----
 .../contexts/TrackContext/utils/useUpdateAudio.ts      |  0
 .../contexts/TrackContext/utils/useUpdateCamera.ts     |  0
 .../contexts/TrackContext/utils/useUpdateCharacters.ts |  0
 .../contexts/TrackContext/utils/useUpdateObject.ts     |  0
 18 files changed, 22 insertions(+), 22 deletions(-)
 rename app/{ => pages/PageEnigma}/contexts/TrackContext/TrackContext.tsx (100%)
 rename app/{ => pages/PageEnigma}/contexts/TrackContext/TrackProvider.tsx (86%)
 rename app/{ => pages/PageEnigma}/contexts/TrackContext/utils/useUpdateAudio.ts (100%)
 rename app/{ => pages/PageEnigma}/contexts/TrackContext/utils/useUpdateCamera.ts (100%)
 rename app/{ => pages/PageEnigma}/contexts/TrackContext/utils/useUpdateCharacters.ts (100%)
 rename app/{ => pages/PageEnigma}/contexts/TrackContext/utils/useUpdateObject.ts (100%)

diff --git a/app/pages/PageEnigma/PageEnigma.tsx b/app/pages/PageEnigma/PageEnigma.tsx
index 66417a7408..6507fd86fe 100644
--- a/app/pages/PageEnigma/PageEnigma.tsx
+++ b/app/pages/PageEnigma/PageEnigma.tsx
@@ -1,5 +1,5 @@
 import { PageEnigmaComponent } from "./PageEnigmaComponent";
-import { TrackProvider } from "~/contexts/TrackContext/TrackProvider";
+import { TrackProvider } from "~/pages/PageEnigma/contexts/TrackContext/TrackProvider";
 
 export const PageEnigma = () => {
   return (
diff --git a/app/pages/PageEnigma/comps/SidePanelTabs/ClipElement.tsx b/app/pages/PageEnigma/comps/SidePanelTabs/ClipElement.tsx
index f578affb13..747d64434d 100644
--- a/app/pages/PageEnigma/comps/SidePanelTabs/ClipElement.tsx
+++ b/app/pages/PageEnigma/comps/SidePanelTabs/ClipElement.tsx
@@ -1,6 +1,6 @@
 import { useCallback, useContext, useEffect, useState } from "react";
 import { BaseClip } from "~/models/track";
-import { TrackContext } from "~/contexts/TrackContext/TrackContext";
+import { TrackContext } from "~/pages/PageEnigma/contexts/TrackContext/TrackContext";
 
 interface Props {
   clip: BaseClip;
diff --git a/app/pages/PageEnigma/comps/SidePanelTabs/ClipElements.tsx b/app/pages/PageEnigma/comps/SidePanelTabs/ClipElements.tsx
index e53f54744e..defcb65ac3 100644
--- a/app/pages/PageEnigma/comps/SidePanelTabs/ClipElements.tsx
+++ b/app/pages/PageEnigma/comps/SidePanelTabs/ClipElements.tsx
@@ -1,6 +1,6 @@
 import { useContext } from "react";
 import { ClipElement } from "./ClipElement";
-import { TrackContext } from "~/contexts/TrackContext/TrackContext";
+import { TrackContext } from "~/pages/PageEnigma/contexts/TrackContext/TrackContext";
 
 export const ClipElements = () => {
   const { animationClips } = useContext(TrackContext);
diff --git a/app/pages/PageEnigma/comps/Timeline/Audio.tsx b/app/pages/PageEnigma/comps/Timeline/Audio.tsx
index f747e19046..2b7550edd6 100644
--- a/app/pages/PageEnigma/comps/Timeline/Audio.tsx
+++ b/app/pages/PageEnigma/comps/Timeline/Audio.tsx
@@ -1,5 +1,5 @@
 import { useContext } from "react";
-import { TrackContext } from "~/contexts/TrackContext/TrackContext";
+import { TrackContext } from "~/pages/PageEnigma/contexts/TrackContext/TrackContext";
 import { Track } from "~/pages/PageEnigma/comps/Timeline/Track";
 
 export const Audio = () => {
@@ -9,7 +9,7 @@ export const Audio = () => {
 
   return (
     <div
-      className="bg-audio-groupBg block rounded-lg pb-5 pl-2 pr-4"
+      className="block rounded-lg bg-audio-groupBg pb-5 pl-2 pr-4"
       style={{ width: fullWidth + 90 }}
     >
       <div className="prevent-select mb-5 pt-2 text-xs font-medium text-white">
diff --git a/app/pages/PageEnigma/comps/Timeline/Camera.tsx b/app/pages/PageEnigma/comps/Timeline/Camera.tsx
index aa947fb3a6..65f7fc59f9 100644
--- a/app/pages/PageEnigma/comps/Timeline/Camera.tsx
+++ b/app/pages/PageEnigma/comps/Timeline/Camera.tsx
@@ -1,5 +1,5 @@
 import { useContext } from "react";
-import { TrackContext } from "~/contexts/TrackContext/TrackContext";
+import { TrackContext } from "~/pages/PageEnigma/contexts/TrackContext/TrackContext";
 import { Track } from "~/pages/PageEnigma/comps/Timeline/Track";
 
 export const Camera = () => {
@@ -8,7 +8,7 @@ export const Camera = () => {
 
   return (
     <div
-      className="bg-camera-groupBg block rounded-lg pb-5 pl-2 pr-4"
+      className="block rounded-lg bg-camera-groupBg pb-5 pl-2 pr-4"
       style={{ width: fullWidth + 90 }}
     >
       <div className="mb-5 pt-2 text-xs font-medium text-white">Camera</div>
diff --git a/app/pages/PageEnigma/comps/Timeline/Character.tsx b/app/pages/PageEnigma/comps/Timeline/Character.tsx
index 97c9864122..9956e22b25 100644
--- a/app/pages/PageEnigma/comps/Timeline/Character.tsx
+++ b/app/pages/PageEnigma/comps/Timeline/Character.tsx
@@ -1,5 +1,5 @@
 import { useCallback, useContext, useMemo } from "react";
-import { TrackContext } from "~/contexts/TrackContext/TrackContext";
+import { TrackContext } from "~/pages/PageEnigma/contexts/TrackContext/TrackContext";
 import { Track } from "~/pages/PageEnigma/comps/Timeline/Track";
 
 function buildUpdaters(
diff --git a/app/pages/PageEnigma/comps/Timeline/Objects.tsx b/app/pages/PageEnigma/comps/Timeline/Objects.tsx
index 4daa784041..39304866ce 100644
--- a/app/pages/PageEnigma/comps/Timeline/Objects.tsx
+++ b/app/pages/PageEnigma/comps/Timeline/Objects.tsx
@@ -1,5 +1,5 @@
 import { useContext } from "react";
-import { TrackContext } from "~/contexts/TrackContext/TrackContext";
+import { TrackContext } from "~/pages/PageEnigma/contexts/TrackContext/TrackContext";
 import { Track } from "~/pages/PageEnigma/comps/Timeline/Track";
 
 export const Objects = () => {
@@ -7,7 +7,7 @@ export const Objects = () => {
 
   return (
     <div
-      className="bg-objects-groupBg block rounded-lg pb-5 pl-2 pr-4"
+      className="block rounded-lg bg-objects-groupBg pb-5 pl-2 pr-4"
       style={{ width: fullWidth + 90 }}
     >
       <div className="prevent-select mb-5 pt-2 text-xs font-medium text-white">
diff --git a/app/pages/PageEnigma/comps/Timeline/Timeline.tsx b/app/pages/PageEnigma/comps/Timeline/Timeline.tsx
index 84bf292199..c310970174 100644
--- a/app/pages/PageEnigma/comps/Timeline/Timeline.tsx
+++ b/app/pages/PageEnigma/comps/Timeline/Timeline.tsx
@@ -1,5 +1,5 @@
 import { Fragment, useContext } from "react";
-import { TrackContext } from "~/contexts/TrackContext/TrackContext";
+import { TrackContext } from "~/pages/PageEnigma/contexts/TrackContext/TrackContext";
 import { LowerPanel } from "~/modules/LowerPanel";
 import { Character } from "./Character";
 
@@ -44,7 +44,7 @@ export const Timeline = ({ timelineHeight }: Props) => {
                   00:{index < 10 ? "0" + index.toString() : index.toString()}
                 </div>
                 <div
-                  className="bg-ui-divider absolute block h-full"
+                  className="absolute block h-full bg-ui-divider"
                   style={{
                     width: 1,
                     left: index * sectionWidth + 88,
@@ -60,7 +60,7 @@ export const Timeline = ({ timelineHeight }: Props) => {
             00:{length < 10 ? "0" + length.toString() : length.toString()}
           </div>
           <div
-            className="bg-ui-divider absolute block h-full"
+            className="absolute block h-full bg-ui-divider"
             style={{
               width: 1,
               left: length * sectionWidth + 88,
diff --git a/app/pages/PageEnigma/comps/Timeline/Track.tsx b/app/pages/PageEnigma/comps/Timeline/Track.tsx
index eea8a20506..00f117d1a8 100644
--- a/app/pages/PageEnigma/comps/Timeline/Track.tsx
+++ b/app/pages/PageEnigma/comps/Timeline/Track.tsx
@@ -3,7 +3,7 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faVolume, faVolumeSlash } from "@fortawesome/pro-solid-svg-icons";
 import { BaseClip } from "~/models/track";
 import { useContext } from "react";
-import { TrackContext } from "~/contexts/TrackContext/TrackContext";
+import { TrackContext } from "~/pages/PageEnigma/contexts/TrackContext/TrackContext";
 
 interface Props {
   clips: BaseClip[];
diff --git a/app/pages/PageEnigma/comps/Timeline/TrackClip.tsx b/app/pages/PageEnigma/comps/Timeline/TrackClip.tsx
index 1f123bc70b..ddee7ec65c 100644
--- a/app/pages/PageEnigma/comps/Timeline/TrackClip.tsx
+++ b/app/pages/PageEnigma/comps/Timeline/TrackClip.tsx
@@ -1,6 +1,6 @@
 import { useMouseEventsClip } from "./utils/useMouseEventsClip";
 import { BaseClip } from "~/models/track";
-import { TrackContext } from "~/contexts/TrackContext/TrackContext";
+import { TrackContext } from "~/pages/PageEnigma/contexts/TrackContext/TrackContext";
 import { useContext, useState } from "react";
 
 interface Props {
diff --git a/app/pages/PageEnigma/comps/Timeline/utils/useMouseEventsAnimation.ts b/app/pages/PageEnigma/comps/Timeline/utils/useMouseEventsAnimation.ts
index 29ac2aa478..131cd4740a 100644
--- a/app/pages/PageEnigma/comps/Timeline/utils/useMouseEventsAnimation.ts
+++ b/app/pages/PageEnigma/comps/Timeline/utils/useMouseEventsAnimation.ts
@@ -1,5 +1,5 @@
 import React, { useContext, useEffect, useState } from "react";
-import { TrackContext } from "~/contexts/TrackContext/TrackContext";
+import { TrackContext } from "~/pages/PageEnigma/contexts/TrackContext/TrackContext";
 
 export const useMouseEventsAnimation = () => {
   const { currentTime, updateCurrentTime, length, scale } =
diff --git a/app/pages/PageEnigma/comps/Timeline/utils/useMouseEventsClip.ts b/app/pages/PageEnigma/comps/Timeline/utils/useMouseEventsClip.ts
index 7f39d23f82..cad387f83b 100644
--- a/app/pages/PageEnigma/comps/Timeline/utils/useMouseEventsClip.ts
+++ b/app/pages/PageEnigma/comps/Timeline/utils/useMouseEventsClip.ts
@@ -6,7 +6,7 @@ import React, {
   useRef,
 } from "react";
 import { BaseClip } from "~/models/track";
-import { TrackContext } from "~/contexts/TrackContext/TrackContext";
+import { TrackContext } from "~/pages/PageEnigma/contexts/TrackContext/TrackContext";
 
 export const useMouseEventsClip = (
   clip: BaseClip,
diff --git a/app/contexts/TrackContext/TrackContext.tsx b/app/pages/PageEnigma/contexts/TrackContext/TrackContext.tsx
similarity index 100%
rename from app/contexts/TrackContext/TrackContext.tsx
rename to app/pages/PageEnigma/contexts/TrackContext/TrackContext.tsx
diff --git a/app/contexts/TrackContext/TrackProvider.tsx b/app/pages/PageEnigma/contexts/TrackContext/TrackProvider.tsx
similarity index 86%
rename from app/contexts/TrackContext/TrackProvider.tsx
rename to app/pages/PageEnigma/contexts/TrackContext/TrackProvider.tsx
index af05181e2c..ecdcd15063 100644
--- a/app/contexts/TrackContext/TrackProvider.tsx
+++ b/app/pages/PageEnigma/contexts/TrackContext/TrackProvider.tsx
@@ -1,9 +1,9 @@
-import { TrackContext } from "~/contexts/TrackContext/TrackContext";
+import { TrackContext } from "~/pages/PageEnigma/contexts/TrackContext/TrackContext";
 import { ReactNode, useCallback, useEffect, useMemo, useState } from "react";
-import useUpdateCharacters from "~/contexts/TrackContext/utils/useUpdateCharacters";
-import useUpdateCamera from "~/contexts/TrackContext/utils/useUpdateCamera";
-import useUpdateAudio from "~/contexts/TrackContext/utils/useUpdateAudio";
-import useUpdateObject from "~/contexts/TrackContext/utils/useUpdateObject";
+import useUpdateCharacters from "~/pages/PageEnigma/contexts/TrackContext/utils/useUpdateCharacters";
+import useUpdateCamera from "~/pages/PageEnigma/contexts/TrackContext/utils/useUpdateCamera";
+import useUpdateAudio from "~/pages/PageEnigma/contexts/TrackContext/utils/useUpdateAudio";
+import useUpdateObject from "~/pages/PageEnigma/contexts/TrackContext/utils/useUpdateObject";
 import { AnimationClip, AudioClip } from "~/models/track";
 
 interface Props {
diff --git a/app/contexts/TrackContext/utils/useUpdateAudio.ts b/app/pages/PageEnigma/contexts/TrackContext/utils/useUpdateAudio.ts
similarity index 100%
rename from app/contexts/TrackContext/utils/useUpdateAudio.ts
rename to app/pages/PageEnigma/contexts/TrackContext/utils/useUpdateAudio.ts
diff --git a/app/contexts/TrackContext/utils/useUpdateCamera.ts b/app/pages/PageEnigma/contexts/TrackContext/utils/useUpdateCamera.ts
similarity index 100%
rename from app/contexts/TrackContext/utils/useUpdateCamera.ts
rename to app/pages/PageEnigma/contexts/TrackContext/utils/useUpdateCamera.ts
diff --git a/app/contexts/TrackContext/utils/useUpdateCharacters.ts b/app/pages/PageEnigma/contexts/TrackContext/utils/useUpdateCharacters.ts
similarity index 100%
rename from app/contexts/TrackContext/utils/useUpdateCharacters.ts
rename to app/pages/PageEnigma/contexts/TrackContext/utils/useUpdateCharacters.ts
diff --git a/app/contexts/TrackContext/utils/useUpdateObject.ts b/app/pages/PageEnigma/contexts/TrackContext/utils/useUpdateObject.ts
similarity index 100%
rename from app/contexts/TrackContext/utils/useUpdateObject.ts
rename to app/pages/PageEnigma/contexts/TrackContext/utils/useUpdateObject.ts

From 26d5cc7ef3f3cb27e7c26435cfba4e294c692a48 Mon Sep 17 00:00:00 2001
From: BFlat <bombayapirat@gmail.com>
Date: Wed, 27 Mar 2024 10:17:58 +0700
Subject: [PATCH 10/16] track gap fix and mute button icon size change

---
 app/pages/PageEnigma/comps/Timeline/Audio.tsx     | 2 +-
 app/pages/PageEnigma/comps/Timeline/Camera.tsx    | 2 +-
 app/pages/PageEnigma/comps/Timeline/Character.tsx | 2 +-
 app/pages/PageEnigma/comps/Timeline/Objects.tsx   | 2 +-
 app/pages/PageEnigma/comps/Timeline/Track.tsx     | 8 ++++----
 5 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/app/pages/PageEnigma/comps/Timeline/Audio.tsx b/app/pages/PageEnigma/comps/Timeline/Audio.tsx
index 2b7550edd6..140cd051de 100644
--- a/app/pages/PageEnigma/comps/Timeline/Audio.tsx
+++ b/app/pages/PageEnigma/comps/Timeline/Audio.tsx
@@ -15,7 +15,7 @@ export const Audio = () => {
       <div className="prevent-select mb-5 pt-2 text-xs font-medium text-white">
         Global Audio
       </div>
-      <div className="flex flex-col gap-2">
+      <div className="flex flex-col gap-4">
         <Track
           clips={clips}
           title="Global Audio Track"
diff --git a/app/pages/PageEnigma/comps/Timeline/Camera.tsx b/app/pages/PageEnigma/comps/Timeline/Camera.tsx
index 65f7fc59f9..164097b445 100644
--- a/app/pages/PageEnigma/comps/Timeline/Camera.tsx
+++ b/app/pages/PageEnigma/comps/Timeline/Camera.tsx
@@ -12,7 +12,7 @@ export const Camera = () => {
       style={{ width: fullWidth + 90 }}
     >
       <div className="mb-5 pt-2 text-xs font-medium text-white">Camera</div>
-      <div className="flex flex-col gap-2">
+      <div className="flex flex-col gap-4">
         <Track
           clips={clips}
           title="Camera Position/Rotation"
diff --git a/app/pages/PageEnigma/comps/Timeline/Character.tsx b/app/pages/PageEnigma/comps/Timeline/Character.tsx
index 9956e22b25..2de436eb3d 100644
--- a/app/pages/PageEnigma/comps/Timeline/Character.tsx
+++ b/app/pages/PageEnigma/comps/Timeline/Character.tsx
@@ -61,7 +61,7 @@ export const Character = ({ characterId }: Props) => {
       <div className="prevent-select mb-5 pt-2 text-xs font-medium text-white">
         Character
       </div>
-      <div className="flex flex-col gap-2">
+      <div className="flex flex-col gap-4">
         <Track
           clips={animationClips}
           title="Animation"
diff --git a/app/pages/PageEnigma/comps/Timeline/Objects.tsx b/app/pages/PageEnigma/comps/Timeline/Objects.tsx
index 39304866ce..ff3bbcf835 100644
--- a/app/pages/PageEnigma/comps/Timeline/Objects.tsx
+++ b/app/pages/PageEnigma/comps/Timeline/Objects.tsx
@@ -14,7 +14,7 @@ export const Objects = () => {
         Objects
       </div>
       {objects.objects.map((object) => (
-        <div key={object.id} className="flex flex-col gap-2">
+        <div key={object.id} className="flex flex-col gap-4">
           <Track
             clips={object.clips}
             title="Mask Position/Rotation"
diff --git a/app/pages/PageEnigma/comps/Timeline/Track.tsx b/app/pages/PageEnigma/comps/Timeline/Track.tsx
index 00f117d1a8..22070fd1d4 100644
--- a/app/pages/PageEnigma/comps/Timeline/Track.tsx
+++ b/app/pages/PageEnigma/comps/Timeline/Track.tsx
@@ -43,7 +43,7 @@ export const Track = ({
   return (
     <div className="pl-16">
       <div
-        className={`rounded=lg relative mt-4 block h-9 w-full bg-${style}-unselected`}
+        className={`relative mt-4 block h-9 w-full rounded-lg bg-${style}-unselected`}
         onPointerOver={onPointerOver}
         onPointerLeave={onPointerLeave}
       >
@@ -66,14 +66,14 @@ export const Track = ({
         </div>
         {!!toggleMute && (
           <button
-            className="absolute text-xs text-white"
-            style={{ top: 6, left: -20 }}
+            className="text-md absolute text-white transition-colors duration-100 hover:text-white/80"
+            style={{ top: 6, left: -28 }}
             onClick={toggleMute}
           >
             {muted ? (
               <FontAwesomeIcon
                 icon={faVolumeSlash}
-                className="text-brand-primary"
+                className="text-brand-primary transition-colors duration-100 hover:text-brand-primary/80"
               />
             ) : (
               <FontAwesomeIcon icon={faVolume} />

From e36ec9317f32d8d180e6ec493ce58d1fbc17e540 Mon Sep 17 00:00:00 2001
From: FromTheLOLAshes <from.the.lol.ashes@gmail.com>
Date: Wed, 27 Mar 2024 12:42:12 +0700
Subject: [PATCH 11/16] Refactor TrackContext, add drop of animation clip

---
 app/modules/LowerPanel/LowerPanel.tsx         |   9 +-
 .../comps/SidePanelTabs/ClipElement.tsx       |  39 ++++--
 app/pages/PageEnigma/comps/Timeline/Audio.tsx |   3 +-
 .../PageEnigma/comps/Timeline/Camera.tsx      |   1 +
 .../PageEnigma/comps/Timeline/Character.tsx   |   3 +
 .../PageEnigma/comps/Timeline/Objects.tsx     |   1 +
 app/pages/PageEnigma/comps/Timeline/Track.tsx |  24 +++-
 .../PageEnigma/comps/Timeline/TrackClip.tsx   |   2 +-
 .../Timeline/utils/useMouseEventsAnimation.ts |   2 +
 .../Timeline/utils/useMouseEventsClip.ts      |   2 +-
 .../contexts/TrackContext/TrackContext.tsx    | 111 ++++++++++++++----
 .../contexts/TrackContext/TrackProvider.tsx   | 101 +++++++---------
 .../TrackContext/utils/useUpdateAudio.ts      |  37 +++++-
 .../TrackContext/utils/useUpdateCamera.ts     |  19 ++-
 .../TrackContext/utils/useUpdateCharacters.ts | 106 ++++++++++++++---
 .../TrackContext/utils/useUpdateDragDrop.ts   |  38 ++++++
 .../TrackContext/utils/useUpdateObject.ts     |  18 ++-
 app/{ => pages/PageEnigma}/models/track.ts    |   1 +
 18 files changed, 401 insertions(+), 116 deletions(-)
 create mode 100644 app/pages/PageEnigma/contexts/TrackContext/utils/useUpdateDragDrop.ts
 rename app/{ => pages/PageEnigma}/models/track.ts (97%)

diff --git a/app/modules/LowerPanel/LowerPanel.tsx b/app/modules/LowerPanel/LowerPanel.tsx
index 680a097953..2fb21e12b1 100644
--- a/app/modules/LowerPanel/LowerPanel.tsx
+++ b/app/modules/LowerPanel/LowerPanel.tsx
@@ -1,4 +1,5 @@
-import { useState } from "react";
+import { useContext, useState } from "react";
+import { TrackContext } from "~/pages/PageEnigma/contexts/TrackContext/TrackContext";
 
 interface LowerPanelPropsI {
   timelineHeight: number;
@@ -7,6 +8,7 @@ interface LowerPanelPropsI {
 
 export const LowerPanel = ({ children, timelineHeight }: LowerPanelPropsI) => {
   const [open, setOpen] = useState(false);
+  const { setOverTimeline } = useContext(TrackContext);
   const handleOpen = () => {
     setOpen(true);
   };
@@ -20,6 +22,11 @@ export const LowerPanel = ({ children, timelineHeight }: LowerPanelPropsI) => {
         "bg-ui-panel",
       ].join(" ")}
       style={{ height: timelineHeight }}
+      onPointerOver={() => {
+        console.log("over");
+        setOverTimeline(true);
+      }}
+      onPointerLeave={() => setOverTimeline(false)}
     >
       {children}
     </div>
diff --git a/app/pages/PageEnigma/comps/SidePanelTabs/ClipElement.tsx b/app/pages/PageEnigma/comps/SidePanelTabs/ClipElement.tsx
index 747d64434d..c8f6e6fba5 100644
--- a/app/pages/PageEnigma/comps/SidePanelTabs/ClipElement.tsx
+++ b/app/pages/PageEnigma/comps/SidePanelTabs/ClipElement.tsx
@@ -1,5 +1,5 @@
 import { useCallback, useContext, useEffect, useState } from "react";
-import { BaseClip } from "~/models/track";
+import { BaseClip } from "~/pages/PageEnigma/models/track";
 import { TrackContext } from "~/pages/PageEnigma/contexts/TrackContext/TrackContext";
 
 interface Props {
@@ -8,8 +8,16 @@ interface Props {
 }
 
 export const ClipElement = ({ clip, type }: Props) => {
-  const { startDrag, dragId, endDrag, scale, canDrop, setCanDrop } =
-    useContext(TrackContext);
+  const {
+    startDrag,
+    dragId,
+    endDrag,
+    scale,
+    canDrop,
+    setCanDrop,
+    overTimeline,
+    dropId,
+  } = useContext(TrackContext);
   const [initPosition, setInitPosition] = useState<{
     initX: number;
     initY: number;
@@ -36,6 +44,8 @@ export const ClipElement = ({ clip, type }: Props) => {
 
     const onMouseMove = (event: MouseEvent) => {
       if (dragId) {
+        event.stopPropagation();
+        event.preventDefault();
         const deltaX = event.clientX - initX;
         const deltaY = event.clientY - initY;
         setCurrPosition({ x: deltaX, y: deltaY });
@@ -55,20 +65,24 @@ export const ClipElement = ({ clip, type }: Props) => {
   const onPointerDown = useCallback(
     (event: React.PointerEvent<HTMLDivElement>) => {
       if (event.button === 0) {
+        const box = document.getElementById(`ani-clip-${clip.id}`);
+        const position = box!.getBoundingClientRect();
+
         startDrag(type, clip.id);
         setCurrPosition({
-          x: 0,
-          y: 0,
+          x: position.x,
+          y: position.y + position.height + 1,
+        });
+        setInitPosition({
+          initX: position.x,
+          initY: position.y + position.height + 1,
         });
-        setInitPosition({ initY: event.clientY, initX: event.clientX });
         setCanDrop(false);
       }
     },
     [type, clip.id, startDrag, setCanDrop],
   );
 
-  // console.log("clip", canDrop);
-
   return (
     <div key={clip.id} className="relative h-16 w-16">
       <div
@@ -82,16 +96,17 @@ export const ClipElement = ({ clip, type }: Props) => {
       <div
         id={`ani-dnd-${clip.id}`}
         className={[
-          "absolute h-8 p-2",
+          "absolute p-2",
           "rounded-lg",
           !canDrop ? "bg-brand-primary" : "bg-brand-secondary-700",
           dragId ? "block" : "hidden",
         ].join(" ")}
         style={{
-          top: y,
-          left: x,
+          top: overTimeline ? y + 24 : y,
+          left: overTimeline ? x : x,
           zIndex: 5000,
-          width: clip.length * 4 * scale,
+          width: overTimeline ? clip.length * 4 * scale : 64,
+          height: overTimeline ? 32 : 64,
         }}
         onPointerDown={onPointerDown}
       >
diff --git a/app/pages/PageEnigma/comps/Timeline/Audio.tsx b/app/pages/PageEnigma/comps/Timeline/Audio.tsx
index 2b7550edd6..e0ceaf066a 100644
--- a/app/pages/PageEnigma/comps/Timeline/Audio.tsx
+++ b/app/pages/PageEnigma/comps/Timeline/Audio.tsx
@@ -17,11 +17,12 @@ export const Audio = () => {
       </div>
       <div className="flex flex-col gap-2">
         <Track
+          id={audio!.id}
           clips={clips}
           title="Global Audio Track"
           updateClip={updateAudio}
           style="audio"
-          muted={audio?.muted}
+          muted={audio!.muted}
           toggleMute={toggleAudioMute}
         />
       </div>
diff --git a/app/pages/PageEnigma/comps/Timeline/Camera.tsx b/app/pages/PageEnigma/comps/Timeline/Camera.tsx
index 65f7fc59f9..ab0a4fb1bb 100644
--- a/app/pages/PageEnigma/comps/Timeline/Camera.tsx
+++ b/app/pages/PageEnigma/comps/Timeline/Camera.tsx
@@ -14,6 +14,7 @@ export const Camera = () => {
       <div className="mb-5 pt-2 text-xs font-medium text-white">Camera</div>
       <div className="flex flex-col gap-2">
         <Track
+          id={camera!.id}
           clips={clips}
           title="Camera Position/Rotation"
           style="camera"
diff --git a/app/pages/PageEnigma/comps/Timeline/Character.tsx b/app/pages/PageEnigma/comps/Timeline/Character.tsx
index 9956e22b25..977b25f8e7 100644
--- a/app/pages/PageEnigma/comps/Timeline/Character.tsx
+++ b/app/pages/PageEnigma/comps/Timeline/Character.tsx
@@ -63,6 +63,7 @@ export const Character = ({ characterId }: Props) => {
       </div>
       <div className="flex flex-col gap-2">
         <Track
+          id={character.id}
           clips={animationClips}
           title="Animation"
           updateClip={updateClipAnimations}
@@ -70,6 +71,7 @@ export const Character = ({ characterId }: Props) => {
           type="animations"
         />
         <Track
+          id={character.id}
           clips={positionClips}
           title="Character Position/Rotation"
           updateClip={updateClipPosition}
@@ -77,6 +79,7 @@ export const Character = ({ characterId }: Props) => {
           type="positions"
         />
         <Track
+          id={character.id}
           clips={lipSyncClips}
           title="Lipsync Audio Track"
           updateClip={updateClipLipSync}
diff --git a/app/pages/PageEnigma/comps/Timeline/Objects.tsx b/app/pages/PageEnigma/comps/Timeline/Objects.tsx
index 39304866ce..583dc2ca48 100644
--- a/app/pages/PageEnigma/comps/Timeline/Objects.tsx
+++ b/app/pages/PageEnigma/comps/Timeline/Objects.tsx
@@ -16,6 +16,7 @@ export const Objects = () => {
       {objects.objects.map((object) => (
         <div key={object.id} className="flex flex-col gap-2">
           <Track
+            id={object.id}
             clips={object.clips}
             title="Mask Position/Rotation"
             updateClip={updateObject}
diff --git a/app/pages/PageEnigma/comps/Timeline/Track.tsx b/app/pages/PageEnigma/comps/Timeline/Track.tsx
index 00f117d1a8..8547d5559c 100644
--- a/app/pages/PageEnigma/comps/Timeline/Track.tsx
+++ b/app/pages/PageEnigma/comps/Timeline/Track.tsx
@@ -1,11 +1,12 @@
 import { TrackClip } from "~/pages/PageEnigma/comps/Timeline/TrackClip";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faVolume, faVolumeSlash } from "@fortawesome/pro-solid-svg-icons";
-import { BaseClip } from "~/models/track";
-import { useContext } from "react";
+import { BaseClip } from "~/pages/PageEnigma/models/track";
+import { PointerEvent, useContext } from "react";
 import { TrackContext } from "~/pages/PageEnigma/contexts/TrackContext/TrackContext";
 
 interface Props {
+  id: string;
   clips: BaseClip[];
   title: string;
   style: "character" | "audio" | "camera" | "objects";
@@ -16,6 +17,7 @@ interface Props {
 }
 
 export const Track = ({
+  id,
   clips,
   toggleMute,
   updateClip,
@@ -24,7 +26,8 @@ export const Track = ({
   style,
   type,
 }: Props) => {
-  const { length, setCanDrop, dragType } = useContext(TrackContext);
+  const { length, scale, setCanDrop, dragType, setDropId, setDropOffset } =
+    useContext(TrackContext);
   const trackType = type ?? style;
 
   function onPointerOver() {
@@ -32,6 +35,19 @@ export const Track = ({
       return;
     }
     setCanDrop(true);
+    setDropId(id);
+  }
+
+  function onPointerMove(event: PointerEvent<HTMLDivElement>) {
+    if (dragType !== trackType) {
+      return;
+    }
+    const track = document.getElementById(`track-${trackType}-${id}`);
+    if (!track) {
+      return;
+    }
+    const position = track.getBoundingClientRect();
+    setDropOffset((event.clientX - position.x) / 4 / scale);
   }
   function onPointerLeave() {
     if (dragType !== trackType) {
@@ -43,9 +59,11 @@ export const Track = ({
   return (
     <div className="pl-16">
       <div
+        id={`track-${trackType}-${id}`}
         className={`rounded=lg relative mt-4 block h-9 w-full bg-${style}-unselected`}
         onPointerOver={onPointerOver}
         onPointerLeave={onPointerLeave}
+        onPointerMove={onPointerMove}
       >
         {clips.map((clip, index) => (
           <TrackClip
diff --git a/app/pages/PageEnigma/comps/Timeline/TrackClip.tsx b/app/pages/PageEnigma/comps/Timeline/TrackClip.tsx
index ddee7ec65c..92665f6af3 100644
--- a/app/pages/PageEnigma/comps/Timeline/TrackClip.tsx
+++ b/app/pages/PageEnigma/comps/Timeline/TrackClip.tsx
@@ -1,5 +1,5 @@
 import { useMouseEventsClip } from "./utils/useMouseEventsClip";
-import { BaseClip } from "~/models/track";
+import { BaseClip } from "~/pages/PageEnigma/models/track";
 import { TrackContext } from "~/pages/PageEnigma/contexts/TrackContext/TrackContext";
 import { useContext, useState } from "react";
 
diff --git a/app/pages/PageEnigma/comps/Timeline/utils/useMouseEventsAnimation.ts b/app/pages/PageEnigma/comps/Timeline/utils/useMouseEventsAnimation.ts
index 131cd4740a..d492d0e81d 100644
--- a/app/pages/PageEnigma/comps/Timeline/utils/useMouseEventsAnimation.ts
+++ b/app/pages/PageEnigma/comps/Timeline/utils/useMouseEventsAnimation.ts
@@ -22,6 +22,8 @@ export const useMouseEventsAnimation = () => {
     const onMouseMove = (event: MouseEvent) => {
       const delta = (event.clientX - clientX) / 4 / scale + currentTime;
       if (isActive === "drag") {
+        event.stopPropagation();
+        event.preventDefault();
         if (delta < 0 || delta > max) {
           return;
         }
diff --git a/app/pages/PageEnigma/comps/Timeline/utils/useMouseEventsClip.ts b/app/pages/PageEnigma/comps/Timeline/utils/useMouseEventsClip.ts
index cad387f83b..b92f68bfb0 100644
--- a/app/pages/PageEnigma/comps/Timeline/utils/useMouseEventsClip.ts
+++ b/app/pages/PageEnigma/comps/Timeline/utils/useMouseEventsClip.ts
@@ -5,7 +5,7 @@ import React, {
   useEffect,
   useRef,
 } from "react";
-import { BaseClip } from "~/models/track";
+import { BaseClip } from "~/pages/PageEnigma/models/track";
 import { TrackContext } from "~/pages/PageEnigma/contexts/TrackContext/TrackContext";
 
 export const useMouseEventsClip = (
diff --git a/app/pages/PageEnigma/contexts/TrackContext/TrackContext.tsx b/app/pages/PageEnigma/contexts/TrackContext/TrackContext.tsx
index aa744a0f7b..5ce6ff89c9 100644
--- a/app/pages/PageEnigma/contexts/TrackContext/TrackContext.tsx
+++ b/app/pages/PageEnigma/contexts/TrackContext/TrackContext.tsx
@@ -3,78 +3,143 @@ import {
   AnimationClip,
   AudioClip,
   AudioGroup,
+  BaseClip,
   CameraGroup,
   CharacterGroup,
   ObjectGroup,
-} from "~/models/track";
+} from "~/pages/PageEnigma/models/track";
 
 export const TrackContext = createContext<{
+  // timeline characters and it's functions
   characters: CharacterGroup[];
-  camera: CameraGroup | null;
-  audio: AudioGroup | null;
-  objects: ObjectGroup;
-  selectedClip: string | null;
   updateCharacters: (options: {
     type: "animations" | "positions" | "lipSync";
     id: string;
     length: number;
     offset: number;
   }) => void;
+  toggleLipSyncMute: (characterId: string) => void;
+  addCharacterAnimation: (options: {
+    clipId: string;
+    characterId: string;
+    animationClips: BaseClip[];
+    offset: number;
+  }) => void;
+  addCharacterAudio: (options: {
+    clipId: string;
+    characterId: string;
+    audioClips: BaseClip[];
+    offset: number;
+  }) => void;
+  selectCharacterClip: (clipId: string) => void;
+
+  // timeline camera group
+  camera: CameraGroup | null;
   updateCamera: (options: {
     id: string;
     length: number;
     offset: number;
   }) => void;
+  selectCameraClip: (clipId: string) => void;
+
+  // timeline global audio group
+  audio: AudioGroup | null;
   updateAudio: (options: {
     id: string;
     length: number;
     offset: number;
   }) => void;
+  toggleAudioMute: () => void;
+  addGlobalAudio: (clipId: string, animationClips: BaseClip[]) => void;
+  selectAudioClip: (clipId: string) => void;
+
+  // timeline objects group
+  objects: ObjectGroup;
   updateObject: (options: {
     id: string;
     length: number;
     offset: number;
   }) => void;
+  selectObjectClip: (clipId: string) => void;
+
+  // current - only select one item - will be replaced
+  selectedClip: string | null;
   selectClip: (clipId: string) => void;
-  toggleLipSyncMute: (characterId: string) => void;
-  toggleAudioMute: () => void;
+
+  // sidebar clips
   animationClips: AnimationClip[];
   audioClips: AudioClip[];
+
+  // drag and drop
   dragType: "animations" | "lipSync" | null;
   dragId: string | null;
   startDrag: (type: "animations" | "lipSync", id: string) => void;
   endDrag: () => void;
-  scale: number;
-  currentTime: number;
-  length: number;
-  updateCurrentTime: (time: number) => void;
   canDrop: boolean;
   setCanDrop: (can: boolean) => void;
+  overTimeline: boolean;
+  setOverTimeline: (over: boolean) => void;
+  dropId: string;
+  setDropId: (id: string) => void;
+  dropOffset: number;
+  setDropOffset: (offset: number) => void;
+
+  // scale of timeline displa
+  scale: number;
+
+  // current time position
+  currentTime: number;
+  updateCurrentTime: (time: number) => void;
+
+  // total length of the film clip
+  length: number;
+
+  // computed width length * 60 * 4 * scale
   fullWidth: number;
 }>({
   characters: [],
-  camera: null,
-  audio: null,
-  objects: { id: "", objects: [] },
-  selectedClip: null,
   updateCharacters: () => {},
-  updateCamera: () => {},
-  updateAudio: () => {},
-  updateObject: () => {},
-  selectClip: () => {},
   toggleLipSyncMute: () => {},
+  addCharacterAnimation: () => {},
+  addCharacterAudio: () => {},
+  selectCharacterClip: () => {},
+
+  camera: null,
+  updateCamera: () => {},
+  selectCameraClip: () => {},
+
+  audio: null,
+  updateAudio: () => {},
   toggleAudioMute: () => {},
+  selectAudioClip: () => {},
+  addGlobalAudio: () => {},
+
+  objects: { id: "", objects: [] },
+  updateObject: () => {},
+  selectObjectClip: () => {},
+
+  selectedClip: null,
+  selectClip: () => {},
+
   animationClips: [],
   audioClips: [],
+
   dragType: null,
   dragId: null,
   startDrag: () => {},
   endDrag: () => {},
-  scale: 1,
-  currentTime: 0,
-  length: 12,
-  updateCurrentTime: () => {},
+  dropId: "",
+  setDropId: () => {},
   canDrop: false,
   setCanDrop: () => {},
+  overTimeline: false,
+  setOverTimeline: () => {},
+  dropOffset: 0,
+  setDropOffset: () => {},
+
+  scale: 1,
+  currentTime: 0,
+  updateCurrentTime: () => {},
+  length: 12,
   fullWidth: 0,
 });
diff --git a/app/pages/PageEnigma/contexts/TrackContext/TrackProvider.tsx b/app/pages/PageEnigma/contexts/TrackContext/TrackProvider.tsx
index ecdcd15063..a6a9acadd7 100644
--- a/app/pages/PageEnigma/contexts/TrackContext/TrackProvider.tsx
+++ b/app/pages/PageEnigma/contexts/TrackContext/TrackProvider.tsx
@@ -4,50 +4,51 @@ import useUpdateCharacters from "~/pages/PageEnigma/contexts/TrackContext/utils/
 import useUpdateCamera from "~/pages/PageEnigma/contexts/TrackContext/utils/useUpdateCamera";
 import useUpdateAudio from "~/pages/PageEnigma/contexts/TrackContext/utils/useUpdateAudio";
 import useUpdateObject from "~/pages/PageEnigma/contexts/TrackContext/utils/useUpdateObject";
-import { AnimationClip, AudioClip } from "~/models/track";
+import { AnimationClip, AudioClip } from "~/pages/PageEnigma/models/track";
+import useUpdateDragDrop from "~/pages/PageEnigma/contexts/TrackContext/utils/useUpdateDragDrop";
 
 interface Props {
   children: ReactNode;
 }
 
 export const TrackProvider = ({ children }: Props) => {
-  const { characters, updateCharacters, toggleLipSyncMute } =
-    useUpdateCharacters();
-  const { camera, updateCamera } = useUpdateCamera();
-  const { audio, updateAudio, toggleAudioMute } = useUpdateAudio();
-  const { objects, updateObject } = useUpdateObject();
-  const [selectedClip, setSelectedClip] = useState<string | null>(null);
+  const characters = useUpdateCharacters();
+  const camera = useUpdateCamera();
+  const audio = useUpdateAudio();
+  const objects = useUpdateObject();
 
+  const { endDrag, ...dragDrop } = useUpdateDragDrop();
+
+  const [selectedClip, setSelectedClip] = useState<string | null>(null);
   const selectClip = useCallback((clipId: string | null) => {
     setSelectedClip(clipId);
   }, []);
 
-  const [state, setState] = useState<{
-    dragType: "animations" | "lipSync" | null;
-    dragId: string | null;
-  }>({ dragType: null, dragId: null });
   const [animationClips, setAnimationClips] = useState<AnimationClip[]>([]);
   const [audioClips, setAudioClips] = useState<AudioClip[]>([]);
 
-  const startDrag = useCallback(
-    (type: "animations" | "lipSync", id: string) => {
-      setState({ dragId: id, dragType: type });
-    },
-    [],
-  );
-
-  const endDrag = useCallback(() => {
-    setState({ dragId: null, dragType: null });
-  }, []);
-
+  const [scale, setScale] = useState(1);
+  const [length, setLength] = useState(1);
   const [time, setTime] = useState(0);
   const updateCurrentTime = useCallback((newTime: number) => {
     setTime(newTime);
   }, []);
 
-  const [canDrop, setCanDrop] = useState(false);
-  const [scale, setScale] = useState(1);
-  const [length, setLength] = useState(1);
+  // cross group functions
+  const dropClip = useCallback(() => {
+    const { canDrop, dragType, dropId, dragId, dropOffset } = dragDrop;
+    if (canDrop) {
+      if (dragType === "animations") {
+        characters.addCharacterAnimation({
+          clipId: dragId!,
+          characterId: dropId,
+          animationClips,
+          offset: dropOffset,
+        });
+      }
+    }
+    endDrag();
+  }, [dragDrop, animationClips, characters, endDrag]);
 
   const fullWidth = useMemo(() => {
     return length * 60 * 4 * scale;
@@ -69,54 +70,42 @@ export const TrackProvider = ({ children }: Props) => {
 
   const values = useMemo(() => {
     return {
-      characters,
-      camera,
-      audio,
-      objects,
-      updateCharacters,
-      updateCamera,
-      updateAudio,
-      updateObject,
+      ...characters,
+      ...camera,
+      ...audio,
+      ...objects,
+
       selectClip,
       selectedClip,
-      toggleLipSyncMute,
-      toggleAudioMute,
-      dragType: state.dragType,
-      dragId: state.dragId,
+
+      ...dragDrop,
+      endDrag: dropClip,
+
       animationClips,
       audioClips,
-      startDrag,
-      endDrag,
+
       scale,
       currentTime: time,
       length,
       updateCurrentTime,
-      canDrop,
-      setCanDrop,
       fullWidth,
     };
   }, [
     characters,
-    updateCharacters,
+    camera,
+    audio,
+    objects,
+
     selectClip,
     selectedClip,
-    camera,
-    updateCamera,
-    audio,
-    updateAudio,
-    objects,
-    updateObject,
-    toggleLipSyncMute,
-    toggleAudioMute,
-    state.dragId,
-    state.dragType,
+
+    dragDrop,
+    dropClip,
+
     animationClips,
     audioClips,
-    startDrag,
-    endDrag,
-    canDrop,
+
     updateCurrentTime,
-    setCanDrop,
     time,
     fullWidth,
     length,
diff --git a/app/pages/PageEnigma/contexts/TrackContext/utils/useUpdateAudio.ts b/app/pages/PageEnigma/contexts/TrackContext/utils/useUpdateAudio.ts
index e366ba419a..8b7e95300b 100644
--- a/app/pages/PageEnigma/contexts/TrackContext/utils/useUpdateAudio.ts
+++ b/app/pages/PageEnigma/contexts/TrackContext/utils/useUpdateAudio.ts
@@ -1,5 +1,5 @@
 import { useCallback, useState } from "react";
-import { AudioGroup } from "~/models/track";
+import { AudioGroup, BaseClip } from "~/pages/PageEnigma/models/track";
 
 export default function useUpdateAudio() {
   const [audio, setAudio] = useState<AudioGroup>({
@@ -49,6 +49,23 @@ export default function useUpdateAudio() {
     [],
   );
 
+  const addGlobalAudio = useCallback(
+    (dragId: string, audioClips: BaseClip[]) => {
+      const clip = audioClips.find((row) => row.id === dragId);
+      if (!clip) {
+        return;
+      }
+
+      setAudio((oldAudio) => {
+        return {
+          ...oldAudio,
+          clips: [...oldAudio.clips, clip],
+        };
+      });
+    },
+    [],
+  );
+
   const toggleAudioMute = useCallback(() => {
     setAudio((oldAudio) => {
       return {
@@ -58,9 +75,27 @@ export default function useUpdateAudio() {
     });
   }, []);
 
+  const selectAudioClip = useCallback((clipId: string) => {
+    setAudio((oldAudio) => {
+      return {
+        ...oldAudio,
+        clips: [
+          ...oldAudio.clips.map((clip) => {
+            return {
+              ...clip,
+              selected: clip.id === clipId ? !clip.selected : clip.selected,
+            };
+          }),
+        ],
+      };
+    });
+  }, []);
+
   return {
     audio,
     updateAudio,
     toggleAudioMute,
+    selectAudioClip,
+    addGlobalAudio,
   };
 }
diff --git a/app/pages/PageEnigma/contexts/TrackContext/utils/useUpdateCamera.ts b/app/pages/PageEnigma/contexts/TrackContext/utils/useUpdateCamera.ts
index f0d3f59c9f..b0a0912157 100644
--- a/app/pages/PageEnigma/contexts/TrackContext/utils/useUpdateCamera.ts
+++ b/app/pages/PageEnigma/contexts/TrackContext/utils/useUpdateCamera.ts
@@ -1,5 +1,5 @@
 import { useCallback, useState } from "react";
-import { CameraGroup } from "~/models/track";
+import { CameraGroup } from "~/pages/PageEnigma/models/track";
 
 export default function useUpdateCamera() {
   const [camera, setCamera] = useState<CameraGroup>({
@@ -48,8 +48,25 @@ export default function useUpdateCamera() {
     [],
   );
 
+  const selectCameraClip = useCallback((clipId: string) => {
+    setCamera((oldCamera) => {
+      return {
+        ...oldCamera,
+        clips: [
+          ...oldCamera.clips.map((clip) => {
+            return {
+              ...clip,
+              selected: clip.id === clipId ? !clip.selected : clip.selected,
+            };
+          }),
+        ],
+      };
+    });
+  }, []);
+
   return {
     camera,
     updateCamera,
+    selectCameraClip,
   };
 }
diff --git a/app/pages/PageEnigma/contexts/TrackContext/utils/useUpdateCharacters.ts b/app/pages/PageEnigma/contexts/TrackContext/utils/useUpdateCharacters.ts
index 60f013df55..ddbbab21da 100644
--- a/app/pages/PageEnigma/contexts/TrackContext/utils/useUpdateCharacters.ts
+++ b/app/pages/PageEnigma/contexts/TrackContext/utils/useUpdateCharacters.ts
@@ -1,25 +1,12 @@
 import { useCallback, useRef, useState } from "react";
-import { CharacterGroup } from "~/models/track";
+import { BaseClip, CharacterGroup } from "~/pages/PageEnigma/models/track";
 
 export default function useUpdateCharacters() {
   const [characters, setCharacters] = useState<CharacterGroup[]>([
     {
       id: "CH1",
       muted: false,
-      animationClips: [
-        {
-          id: "CH1-A1",
-          length: 200,
-          offset: 0,
-          name: "ani 1",
-        },
-        {
-          id: "CH1-A2",
-          length: 180,
-          offset: 300,
-          name: "ani 2",
-        },
-      ],
+      animationClips: [],
       positionClips: [
         {
           id: "CH1-P1",
@@ -120,6 +107,70 @@ export default function useUpdateCharacters() {
     [],
   );
 
+  const addCharacterAnimation = useCallback(
+    ({
+      clipId,
+      characterId,
+      animationClips,
+      offset,
+    }: {
+      clipId: string;
+      characterId: string;
+      animationClips: BaseClip[];
+      offset: number;
+    }) => {
+      const clip = animationClips.find((row) => row.id === clipId);
+      if (!clip) {
+        return;
+      }
+
+      setCharacters((oldCharacters) => {
+        return oldCharacters.map((character) => {
+          if (character.id !== characterId) {
+            return { ...character };
+          }
+          return {
+            ...character,
+            animationClips: [...character.animationClips, { ...clip, offset }],
+          };
+        });
+      });
+    },
+    [],
+  );
+
+  const addCharacterAudio = useCallback(
+    ({
+      clipId,
+      characterId,
+      audioClips,
+      offset,
+    }: {
+      clipId: string;
+      characterId: string;
+      audioClips: BaseClip[];
+      offset: number;
+    }) => {
+      const clip = audioClips.find((row) => row.id === clipId);
+      if (!clip) {
+        return;
+      }
+
+      setCharacters((oldCharacters) => {
+        return oldCharacters.map((character) => {
+          if (character.id !== characterId) {
+            return { ...character };
+          }
+          return {
+            ...character,
+            lipSyncClips: [...character.lipSyncClips, { ...clip, offset }],
+          };
+        });
+      });
+    },
+    [],
+  );
+
   const toggleLipSyncMute = useCallback((characterId: string) => {
     setCharacters((oldCharacters) => {
       return oldCharacters.map((character) => ({
@@ -130,9 +181,34 @@ export default function useUpdateCharacters() {
     });
   }, []);
 
+  const selectCharacterClip = useCallback((clipId: string) => {
+    setCharacters((oldCharacters) => {
+      return [
+        ...oldCharacters.map((character) => ({
+          ...character,
+          animationClips: character.animationClips.map((clip) => ({
+            ...clip,
+            selected: clip.id === clipId ? !clip.selected : clip.selected,
+          })),
+          positionClips: character.positionClips.map((clip) => ({
+            ...clip,
+            selected: clip.id === clipId ? !clip.selected : clip.selected,
+          })),
+          lipSyncClips: character.lipSyncClips.map((clip) => ({
+            ...clip,
+            selected: clip.id === clipId ? !clip.selected : clip.selected,
+          })),
+        })),
+      ];
+    });
+  }, []);
+
   return {
     characters,
     updateCharacters,
     toggleLipSyncMute,
+    addCharacterAnimation,
+    addCharacterAudio,
+    selectCharacterClip,
   };
 }
diff --git a/app/pages/PageEnigma/contexts/TrackContext/utils/useUpdateDragDrop.ts b/app/pages/PageEnigma/contexts/TrackContext/utils/useUpdateDragDrop.ts
new file mode 100644
index 0000000000..35bf92ccb8
--- /dev/null
+++ b/app/pages/PageEnigma/contexts/TrackContext/utils/useUpdateDragDrop.ts
@@ -0,0 +1,38 @@
+import { useCallback, useState } from "react";
+
+export default function useUpdateDragDrop() {
+  const [state, setState] = useState<{
+    dragType: "animations" | "lipSync" | null;
+    dragId: string | null;
+  }>({ dragType: null, dragId: null });
+  const startDrag = useCallback(
+    (type: "animations" | "lipSync", id: string) => {
+      setState({ dragId: id, dragType: type });
+    },
+    [],
+  );
+  const [canDrop, setCanDrop] = useState(false);
+  const [overTimeline, setOverTimeline] = useState(false);
+
+  const endDrag = useCallback(() => {
+    setState({ dragId: null, dragType: null });
+  }, []);
+
+  const [dropId, setDropId] = useState("");
+  const [dropOffset, setDropOffset] = useState(0);
+
+  return {
+    dragId: state.dragId,
+    dragType: state.dragType,
+    startDrag,
+    endDrag,
+    canDrop,
+    setCanDrop,
+    overTimeline,
+    setOverTimeline,
+    dropId,
+    setDropId,
+    dropOffset,
+    setDropOffset,
+  };
+}
diff --git a/app/pages/PageEnigma/contexts/TrackContext/utils/useUpdateObject.ts b/app/pages/PageEnigma/contexts/TrackContext/utils/useUpdateObject.ts
index 5fbad191e7..2866aa9faa 100644
--- a/app/pages/PageEnigma/contexts/TrackContext/utils/useUpdateObject.ts
+++ b/app/pages/PageEnigma/contexts/TrackContext/utils/useUpdateObject.ts
@@ -1,5 +1,5 @@
 import { useCallback, useState } from "react";
-import { ObjectGroup } from "~/models/track";
+import { ObjectGroup } from "~/pages/PageEnigma/models/track";
 
 export default function useUpdateObject() {
   const [objects, setObjects] = useState<ObjectGroup>({
@@ -46,8 +46,24 @@ export default function useUpdateObject() {
     [],
   );
 
+  const selectObjectClip = useCallback((clipId: string) => {
+    setObjects((oldObjectGroup) => {
+      return {
+        ...oldObjectGroup,
+        objects: oldObjectGroup.objects.map((object) => ({
+          ...object,
+          clips: object.clips.map((clip) => ({
+            ...clip,
+            selected: clip.id === clipId ? !clip.selected : clip.selected,
+          })),
+        })),
+      };
+    });
+  }, []);
+
   return {
     objects,
     updateObject,
+    selectObjectClip,
   };
 }
diff --git a/app/models/track.ts b/app/pages/PageEnigma/models/track.ts
similarity index 97%
rename from app/models/track.ts
rename to app/pages/PageEnigma/models/track.ts
index 29d570891d..50c0723e17 100644
--- a/app/models/track.ts
+++ b/app/pages/PageEnigma/models/track.ts
@@ -3,6 +3,7 @@ export interface BaseClip {
   name: string;
   offset: number;
   length: number;
+  selected?: boolean;
 }
 
 export interface AnimationClip extends BaseClip {}

From 985de175a515ec462ce14df197b8b902add2ade7 Mon Sep 17 00:00:00 2001
From: FromTheLOLAshes <from.the.lol.ashes@gmail.com>
Date: Wed, 27 Mar 2024 14:17:42 +0700
Subject: [PATCH 12/16] Add delete clip with modal

---
 app/components/ConfirmationModal.tsx          | 54 +++++++++++++++++
 app/modules/LowerPanel/LowerPanel.tsx         |  1 -
 .../PageEnigma/comps/Timeline/Timeline.tsx    | 59 ++++++++++++++++++-
 .../contexts/TrackContext/TrackContext.tsx    |  8 +++
 .../TrackContext/utils/useUpdateAudio.ts      | 10 ++++
 .../TrackContext/utils/useUpdateCamera.ts     | 10 ++++
 .../TrackContext/utils/useUpdateCharacters.ts | 20 +++++++
 .../TrackContext/utils/useUpdateObject.ts     | 13 ++++
 8 files changed, 172 insertions(+), 3 deletions(-)
 create mode 100644 app/components/ConfirmationModal.tsx

diff --git a/app/components/ConfirmationModal.tsx b/app/components/ConfirmationModal.tsx
new file mode 100644
index 0000000000..0efd8fc2d8
--- /dev/null
+++ b/app/components/ConfirmationModal.tsx
@@ -0,0 +1,54 @@
+import { Dialog } from "@headlessui/react";
+
+interface Props {
+  text: string;
+  title: string;
+  open: boolean;
+  onClose: () => void;
+  onOk?: () => void;
+  okText?: string;
+  okColor?: string;
+  onCancel?: () => void;
+  cancelText?: string;
+}
+
+export const ConfirmationModal = ({
+  text,
+  title,
+  open,
+  onClose,
+  onOk,
+  okText = "OK",
+  okColor = "bg-brand-success",
+  onCancel,
+  cancelText = "Cancel",
+}: Props) => {
+  return (
+    <Dialog open={open} onClose={onClose}>
+      <div className="fixed inset-0 flex w-screen items-center justify-center bg-white p-4 opacity-35" />
+      <div className="fixed inset-0 flex w-screen items-center justify-center p-4">
+        <Dialog.Panel className="bg-black p-4">
+          <Dialog.Title>{title}</Dialog.Title>
+
+          <p className="my-6">{text}</p>
+
+          <div className="flex justify-end gap-4">
+            {!!onCancel && (
+              <button onClick={onCancel} className="rounded-lg px-3 py-2">
+                {cancelText}
+              </button>
+            )}
+            {!!onOk && (
+              <button
+                onClick={onOk}
+                className={[okColor, "rounded-lg px-3 py-2"].join(" ")}
+              >
+                {okText}
+              </button>
+            )}
+          </div>
+        </Dialog.Panel>
+      </div>
+    </Dialog>
+  );
+};
diff --git a/app/modules/LowerPanel/LowerPanel.tsx b/app/modules/LowerPanel/LowerPanel.tsx
index 2fb21e12b1..ba6a4762d0 100644
--- a/app/modules/LowerPanel/LowerPanel.tsx
+++ b/app/modules/LowerPanel/LowerPanel.tsx
@@ -23,7 +23,6 @@ export const LowerPanel = ({ children, timelineHeight }: LowerPanelPropsI) => {
       ].join(" ")}
       style={{ height: timelineHeight }}
       onPointerOver={() => {
-        console.log("over");
         setOverTimeline(true);
       }}
       onPointerLeave={() => setOverTimeline(false)}
diff --git a/app/pages/PageEnigma/comps/Timeline/Timeline.tsx b/app/pages/PageEnigma/comps/Timeline/Timeline.tsx
index c310970174..2ae8022803 100644
--- a/app/pages/PageEnigma/comps/Timeline/Timeline.tsx
+++ b/app/pages/PageEnigma/comps/Timeline/Timeline.tsx
@@ -1,4 +1,4 @@
-import { Fragment, useContext } from "react";
+import { Fragment, useCallback, useContext, useEffect, useState } from "react";
 import { TrackContext } from "~/pages/PageEnigma/contexts/TrackContext/TrackContext";
 import { LowerPanel } from "~/modules/LowerPanel";
 import { Character } from "./Character";
@@ -9,19 +9,61 @@ import { Objects } from "./Objects";
 import { useMouseEventsAnimation } from "./utils/useMouseEventsAnimation";
 import { faSortDown } from "@fortawesome/pro-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { ConfirmationModal } from "~/components/ConfirmationModal";
 
 interface Props {
   timelineHeight: number;
 }
 
 export const Timeline = ({ timelineHeight }: Props) => {
-  const { characters, objects, scale, length } = useContext(TrackContext);
+  const {
+    characters,
+    objects,
+    scale,
+    length,
+    selectedClip,
+    deleteCharacterClip,
+    deleteAudioClip,
+    deleteCameraClip,
+    deleteObjectClip,
+  } = useContext(TrackContext);
   const { onPointerDown, time } = useMouseEventsAnimation();
+  const [dialogOpen, setDialogOpen] = useState(false);
 
   const sectionWidth = 60 * 4 * scale;
   const fullHeight =
     characters.length * 200 + objects.objects.length * 80 + 248 + 96;
 
+  const onDeleteAsk = useCallback(
+    (event: KeyboardEvent) => {
+      if (["Backspace", "Delete"].indexOf(event.key) > -1 && selectedClip) {
+        setDialogOpen(true);
+      }
+    },
+    [selectedClip],
+  );
+
+  const onDelete = useCallback(() => {
+    deleteCharacterClip(selectedClip!);
+    deleteCameraClip(selectedClip!);
+    deleteAudioClip(selectedClip!);
+    deleteObjectClip(selectedClip!);
+  }, [
+    selectedClip,
+    deleteAudioClip,
+    deleteCharacterClip,
+    deleteCameraClip,
+    deleteObjectClip,
+  ]);
+
+  useEffect(() => {
+    document.addEventListener("keydown", onDeleteAsk);
+
+    return () => {
+      document.addEventListener("keydown", onDeleteAsk);
+    };
+  }, [onDeleteAsk]);
+
   return (
     <>
       <LowerPanel timelineHeight={timelineHeight}>
@@ -102,6 +144,19 @@ export const Timeline = ({ timelineHeight }: Props) => {
           />
         </div>
       </LowerPanel>
+      <ConfirmationModal
+        title="Delete Clip"
+        text="Are you sure you want to delete the selected clip?"
+        open={dialogOpen}
+        onClose={() => setDialogOpen(false)}
+        onOk={() => {
+          onDelete();
+          setDialogOpen(false);
+        }}
+        okText="Delete"
+        okColor="bg-brand-primary"
+        onCancel={() => setDialogOpen(false)}
+      />
     </>
   );
 };
diff --git a/app/pages/PageEnigma/contexts/TrackContext/TrackContext.tsx b/app/pages/PageEnigma/contexts/TrackContext/TrackContext.tsx
index 5ce6ff89c9..b9edb3d1e6 100644
--- a/app/pages/PageEnigma/contexts/TrackContext/TrackContext.tsx
+++ b/app/pages/PageEnigma/contexts/TrackContext/TrackContext.tsx
@@ -32,6 +32,7 @@ export const TrackContext = createContext<{
     offset: number;
   }) => void;
   selectCharacterClip: (clipId: string) => void;
+  deleteCharacterClip: (clipId: string) => void;
 
   // timeline camera group
   camera: CameraGroup | null;
@@ -41,6 +42,7 @@ export const TrackContext = createContext<{
     offset: number;
   }) => void;
   selectCameraClip: (clipId: string) => void;
+  deleteCameraClip: (clipId: string) => void;
 
   // timeline global audio group
   audio: AudioGroup | null;
@@ -52,6 +54,7 @@ export const TrackContext = createContext<{
   toggleAudioMute: () => void;
   addGlobalAudio: (clipId: string, animationClips: BaseClip[]) => void;
   selectAudioClip: (clipId: string) => void;
+  deleteAudioClip: (clipId: string) => void;
 
   // timeline objects group
   objects: ObjectGroup;
@@ -61,6 +64,7 @@ export const TrackContext = createContext<{
     offset: number;
   }) => void;
   selectObjectClip: (clipId: string) => void;
+  deleteObjectClip: (clipId: string) => void;
 
   // current - only select one item - will be replaced
   selectedClip: string | null;
@@ -103,20 +107,24 @@ export const TrackContext = createContext<{
   addCharacterAnimation: () => {},
   addCharacterAudio: () => {},
   selectCharacterClip: () => {},
+  deleteCharacterClip: () => {},
 
   camera: null,
   updateCamera: () => {},
   selectCameraClip: () => {},
+  deleteCameraClip: () => {},
 
   audio: null,
   updateAudio: () => {},
   toggleAudioMute: () => {},
   selectAudioClip: () => {},
   addGlobalAudio: () => {},
+  deleteAudioClip: () => {},
 
   objects: { id: "", objects: [] },
   updateObject: () => {},
   selectObjectClip: () => {},
+  deleteObjectClip: () => {},
 
   selectedClip: null,
   selectClip: () => {},
diff --git a/app/pages/PageEnigma/contexts/TrackContext/utils/useUpdateAudio.ts b/app/pages/PageEnigma/contexts/TrackContext/utils/useUpdateAudio.ts
index 8b7e95300b..8daab4f93c 100644
--- a/app/pages/PageEnigma/contexts/TrackContext/utils/useUpdateAudio.ts
+++ b/app/pages/PageEnigma/contexts/TrackContext/utils/useUpdateAudio.ts
@@ -91,11 +91,21 @@ export default function useUpdateAudio() {
     });
   }, []);
 
+  const deleteAudioClip = useCallback((clipId: string) => {
+    setAudio((oldAudio) => {
+      return {
+        ...oldAudio,
+        clips: [...oldAudio.clips.filter((clip) => clip.id !== clipId)],
+      };
+    });
+  }, []);
+
   return {
     audio,
     updateAudio,
     toggleAudioMute,
     selectAudioClip,
     addGlobalAudio,
+    deleteAudioClip,
   };
 }
diff --git a/app/pages/PageEnigma/contexts/TrackContext/utils/useUpdateCamera.ts b/app/pages/PageEnigma/contexts/TrackContext/utils/useUpdateCamera.ts
index b0a0912157..b5b7d21da6 100644
--- a/app/pages/PageEnigma/contexts/TrackContext/utils/useUpdateCamera.ts
+++ b/app/pages/PageEnigma/contexts/TrackContext/utils/useUpdateCamera.ts
@@ -64,9 +64,19 @@ export default function useUpdateCamera() {
     });
   }, []);
 
+  const deleteCameraClip = useCallback((clipId: string) => {
+    setCamera((oldCamera) => {
+      return {
+        ...oldCamera,
+        clips: [...oldCamera.clips.filter((clip) => clip.id !== clipId)],
+      };
+    });
+  }, []);
+
   return {
     camera,
     updateCamera,
     selectCameraClip,
+    deleteCameraClip,
   };
 }
diff --git a/app/pages/PageEnigma/contexts/TrackContext/utils/useUpdateCharacters.ts b/app/pages/PageEnigma/contexts/TrackContext/utils/useUpdateCharacters.ts
index ddbbab21da..88dc0ca4e5 100644
--- a/app/pages/PageEnigma/contexts/TrackContext/utils/useUpdateCharacters.ts
+++ b/app/pages/PageEnigma/contexts/TrackContext/utils/useUpdateCharacters.ts
@@ -203,6 +203,25 @@ export default function useUpdateCharacters() {
     });
   }, []);
 
+  const deleteCharacterClip = useCallback((clipId: string) => {
+    setCharacters((oldCharacters) => {
+      return [
+        ...oldCharacters.map((character) => ({
+          ...character,
+          animationClips: character.animationClips.filter(
+            (clip) => clip.id !== clipId,
+          ),
+          positionClips: character.positionClips.filter(
+            (clip) => clip.id !== clipId,
+          ),
+          lipSyncClips: character.lipSyncClips.filter(
+            (clip) => clip.id !== clipId,
+          ),
+        })),
+      ];
+    });
+  }, []);
+
   return {
     characters,
     updateCharacters,
@@ -210,5 +229,6 @@ export default function useUpdateCharacters() {
     addCharacterAnimation,
     addCharacterAudio,
     selectCharacterClip,
+    deleteCharacterClip,
   };
 }
diff --git a/app/pages/PageEnigma/contexts/TrackContext/utils/useUpdateObject.ts b/app/pages/PageEnigma/contexts/TrackContext/utils/useUpdateObject.ts
index 2866aa9faa..b23b738816 100644
--- a/app/pages/PageEnigma/contexts/TrackContext/utils/useUpdateObject.ts
+++ b/app/pages/PageEnigma/contexts/TrackContext/utils/useUpdateObject.ts
@@ -61,9 +61,22 @@ export default function useUpdateObject() {
     });
   }, []);
 
+  const deleteObjectClip = useCallback((clipId: string) => {
+    setObjects((oldObjectGroup) => {
+      return {
+        ...oldObjectGroup,
+        objects: oldObjectGroup.objects.map((object) => ({
+          ...object,
+          clips: object.clips.filter((clip) => clip.id !== clipId),
+        })),
+      };
+    });
+  }, []);
+
   return {
     objects,
     updateObject,
     selectObjectClip,
+    deleteObjectClip,
   };
 }

From 16de02eb488630dd8fab71d881b0d58bada2ba67 Mon Sep 17 00:00:00 2001
From: FromTheLOLAshes <from.the.lol.ashes@gmail.com>
Date: Wed, 27 Mar 2024 15:33:23 +0700
Subject: [PATCH 13/16] Remove button outline for clips

---
 app/pages/PageEnigma/comps/Timeline/TrackClip.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/app/pages/PageEnigma/comps/Timeline/TrackClip.tsx b/app/pages/PageEnigma/comps/Timeline/TrackClip.tsx
index 92665f6af3..d99b8b5011 100644
--- a/app/pages/PageEnigma/comps/Timeline/TrackClip.tsx
+++ b/app/pages/PageEnigma/comps/Timeline/TrackClip.tsx
@@ -51,7 +51,7 @@ export const TrackClip = ({ clip, min, max, style, updateClip }: Props) => {
           "rounded-l-lg",
           "block h-full",
           clip.id === selectedClip
-            ? "border border-b-2 border-l-2 border-r-0 border-t-2 border-white"
+            ? "border border-b-2 border-l-2 border-r-0 border-t-2 border-white focus-visible:outline-0"
             : "",
         ].join(" ")}
         style={{ width: 15, left: offset * 4 * scale, cursor: "w-resize" }}
@@ -63,7 +63,7 @@ export const TrackClip = ({ clip, min, max, style, updateClip }: Props) => {
           ...classes,
           "block h-full",
           clip.id === selectedClip
-            ? "border border-b-2 border-l-0 border-r-0 border-t-2 border-white"
+            ? "border border-b-2 border-l-0 border-r-0 border-t-2 border-white focus-visible:outline-0"
             : "",
         ].join(" ")}
         style={{
@@ -80,7 +80,7 @@ export const TrackClip = ({ clip, min, max, style, updateClip }: Props) => {
           "rounded-r-lg",
           "block h-full",
           clip.id === selectedClip
-            ? "border border-b-2 border-l-0 border-r-2 border-t-2 border-white"
+            ? "border border-b-2 border-l-0 border-r-2 border-t-2 border-white focus-visible:outline-0"
             : "",
         ].join(" ")}
         style={{

From 9b27408c670c98084258225d9479e3c0598664cf Mon Sep 17 00:00:00 2001
From: FromTheLOLAshes <from.the.lol.ashes@gmail.com>
Date: Wed, 27 Mar 2024 21:04:21 +0700
Subject: [PATCH 14/16] Add click to move timer

---
 app/modules/LowerPanel/LowerPanel.tsx         | 24 ++++++++++++++-----
 .../PageEnigma/comps/Timeline/Timeline.tsx    |  7 ++++--
 .../Timeline/utils/useMouseEventsAnimation.ts | 12 ++++++----
 .../Timeline/utils/useMouseEventsClip.ts      |  2 ++
 4 files changed, 32 insertions(+), 13 deletions(-)

diff --git a/app/modules/LowerPanel/LowerPanel.tsx b/app/modules/LowerPanel/LowerPanel.tsx
index ba6a4762d0..669cf4b086 100644
--- a/app/modules/LowerPanel/LowerPanel.tsx
+++ b/app/modules/LowerPanel/LowerPanel.tsx
@@ -1,4 +1,4 @@
-import { useContext, useState } from "react";
+import React, { useCallback, useContext } from "react";
 import { TrackContext } from "~/pages/PageEnigma/contexts/TrackContext/TrackContext";
 
 interface LowerPanelPropsI {
@@ -7,11 +7,22 @@ interface LowerPanelPropsI {
 }
 
 export const LowerPanel = ({ children, timelineHeight }: LowerPanelPropsI) => {
-  const [open, setOpen] = useState(false);
-  const { setOverTimeline } = useContext(TrackContext);
-  const handleOpen = () => {
-    setOpen(true);
-  };
+  // const [open, setOpen] = useState(false);
+  const { setOverTimeline, updateCurrentTime, scale } =
+    useContext(TrackContext);
+
+  const onTimelineClick = useCallback(
+    (event: React.PointerEvent<HTMLDivElement>) => {
+      if (event.button === 0) {
+        updateCurrentTime((Math.round(event.clientX) - 92) / 4 / scale);
+      }
+    },
+    [updateCurrentTime, scale],
+  );
+
+  // const handleOpen = () => {
+  //   setOpen(true);
+  // };
 
   return (
     <div
@@ -26,6 +37,7 @@ export const LowerPanel = ({ children, timelineHeight }: LowerPanelPropsI) => {
         setOverTimeline(true);
       }}
       onPointerLeave={() => setOverTimeline(false)}
+      onPointerDown={onTimelineClick}
     >
       {children}
     </div>
diff --git a/app/pages/PageEnigma/comps/Timeline/Timeline.tsx b/app/pages/PageEnigma/comps/Timeline/Timeline.tsx
index 2ae8022803..2d9cef4408 100644
--- a/app/pages/PageEnigma/comps/Timeline/Timeline.tsx
+++ b/app/pages/PageEnigma/comps/Timeline/Timeline.tsx
@@ -22,6 +22,7 @@ export const Timeline = ({ timelineHeight }: Props) => {
     scale,
     length,
     selectedClip,
+    currentTime,
     deleteCharacterClip,
     deleteAudioClip,
     deleteCameraClip,
@@ -32,7 +33,7 @@ export const Timeline = ({ timelineHeight }: Props) => {
 
   const sectionWidth = 60 * 4 * scale;
   const fullHeight =
-    characters.length * 200 + objects.objects.length * 80 + 248 + 96;
+    characters.length * 268 + objects.objects.length * 60 + 300 + 96;
 
   const onDeleteAsk = useCallback(
     (event: KeyboardEvent) => {
@@ -43,6 +44,8 @@ export const Timeline = ({ timelineHeight }: Props) => {
     [selectedClip],
   );
 
+  const displayTime = time === -1 ? currentTime : time;
+
   const onDelete = useCallback(() => {
     deleteCharacterClip(selectedClip!);
     deleteCameraClip(selectedClip!);
@@ -126,7 +129,7 @@ export const Timeline = ({ timelineHeight }: Props) => {
         </div>
         <div
           className="absolute text-brand-primary"
-          style={{ top: 8, left: time * 4 * scale + 88 }}
+          style={{ top: 8, left: displayTime * 4 * scale + 88 }}
           onPointerDown={onPointerDown}
         >
           <FontAwesomeIcon
diff --git a/app/pages/PageEnigma/comps/Timeline/utils/useMouseEventsAnimation.ts b/app/pages/PageEnigma/comps/Timeline/utils/useMouseEventsAnimation.ts
index d492d0e81d..f525bd2a0a 100644
--- a/app/pages/PageEnigma/comps/Timeline/utils/useMouseEventsAnimation.ts
+++ b/app/pages/PageEnigma/comps/Timeline/utils/useMouseEventsAnimation.ts
@@ -1,4 +1,4 @@
-import React, { useContext, useEffect, useState } from "react";
+import React, { useCallback, useContext, useEffect, useState } from "react";
 import { TrackContext } from "~/pages/PageEnigma/contexts/TrackContext/TrackContext";
 
 export const useMouseEventsAnimation = () => {
@@ -7,7 +7,7 @@ export const useMouseEventsAnimation = () => {
   const [isActive, setIsActive] = useState("");
   const [clientX, setClientX] = useState(0);
 
-  const [time, setTime] = useState(currentTime);
+  const [time, setTime] = useState(-1);
 
   useEffect(() => {
     const max = length * 60 * 4 * scale;
@@ -16,6 +16,7 @@ export const useMouseEventsAnimation = () => {
       if (isActive) {
         updateCurrentTime(Math.round(time));
         setIsActive("");
+        setTime(-1);
       }
     };
 
@@ -39,15 +40,16 @@ export const useMouseEventsAnimation = () => {
       window.removeEventListener("pointerup", onPointerUp);
       window.removeEventListener("pointermove", onMouseMove);
     };
-  }, [clientX, isActive, length, updateCurrentTime, scale, time]);
+  }, [clientX, isActive, length, updateCurrentTime, scale, time, currentTime]);
 
   return {
-    onPointerDown: (event: React.PointerEvent<HTMLDivElement>) => {
+    onPointerDown: useCallback((event: React.PointerEvent<HTMLDivElement>) => {
       if (event.button === 0) {
         setClientX(event.clientX);
         setIsActive("drag");
+        setTime(currentTime);
       }
-    },
+    }, []),
     time,
   };
 };
diff --git a/app/pages/PageEnigma/comps/Timeline/utils/useMouseEventsClip.ts b/app/pages/PageEnigma/comps/Timeline/utils/useMouseEventsClip.ts
index b92f68bfb0..35c82d795d 100644
--- a/app/pages/PageEnigma/comps/Timeline/utils/useMouseEventsClip.ts
+++ b/app/pages/PageEnigma/comps/Timeline/utils/useMouseEventsClip.ts
@@ -89,6 +89,8 @@ export const useMouseEventsClip = (
       type: string,
     ) => {
       if (event.button === 0) {
+        event.stopPropagation();
+        event.preventDefault();
         clientX.current = event.clientX;
         isActive.current = type;
       }

From 63d623ba3b65268d564a838963b15113e9f84eec Mon Sep 17 00:00:00 2001
From: FromTheLOLAshes <from.the.lol.ashes@gmail.com>
Date: Wed, 27 Mar 2024 21:25:22 +0700
Subject: [PATCH 15/16] Some updates

---
 app/components/ConfirmationModal.tsx          | 15 +++++--
 .../contexts/TrackContext/TrackContext.tsx    |  6 ++-
 .../contexts/TrackContext/TrackProvider.tsx   |  7 ++-
 .../TrackContext/utils/useUpdateAudio.ts      | 22 +++++++++-
 .../TrackContext/utils/useUpdateCharacters.ts | 43 +++++++++++++------
 5 files changed, 71 insertions(+), 22 deletions(-)

diff --git a/app/components/ConfirmationModal.tsx b/app/components/ConfirmationModal.tsx
index 0efd8fc2d8..81b76722cd 100644
--- a/app/components/ConfirmationModal.tsx
+++ b/app/components/ConfirmationModal.tsx
@@ -1,4 +1,5 @@
 import { Dialog } from "@headlessui/react";
+import { Button } from "~/components/Button";
 
 interface Props {
   text: string;
@@ -34,17 +35,23 @@ export const ConfirmationModal = ({
 
           <div className="flex justify-end gap-4">
             {!!onCancel && (
-              <button onClick={onCancel} className="rounded-lg px-3 py-2">
+              <Button
+                type="button"
+                onClick={onCancel}
+                className="rounded-lg px-3 py-2"
+                variant="secondary"
+              >
                 {cancelText}
-              </button>
+              </Button>
             )}
             {!!onOk && (
-              <button
+              <Button
+                type="button"
                 onClick={onOk}
                 className={[okColor, "rounded-lg px-3 py-2"].join(" ")}
               >
                 {okText}
-              </button>
+              </Button>
             )}
           </div>
         </Dialog.Panel>
diff --git a/app/pages/PageEnigma/contexts/TrackContext/TrackContext.tsx b/app/pages/PageEnigma/contexts/TrackContext/TrackContext.tsx
index b9edb3d1e6..9fddae7aa2 100644
--- a/app/pages/PageEnigma/contexts/TrackContext/TrackContext.tsx
+++ b/app/pages/PageEnigma/contexts/TrackContext/TrackContext.tsx
@@ -52,7 +52,11 @@ export const TrackContext = createContext<{
     offset: number;
   }) => void;
   toggleAudioMute: () => void;
-  addGlobalAudio: (clipId: string, animationClips: BaseClip[]) => void;
+  addGlobalAudio: (
+    clipId: string,
+    animationClips: BaseClip[],
+    offset: number,
+  ) => void;
   selectAudioClip: (clipId: string) => void;
   deleteAudioClip: (clipId: string) => void;
 
diff --git a/app/pages/PageEnigma/contexts/TrackContext/TrackProvider.tsx b/app/pages/PageEnigma/contexts/TrackContext/TrackProvider.tsx
index a6a9acadd7..4ef71835e5 100644
--- a/app/pages/PageEnigma/contexts/TrackContext/TrackProvider.tsx
+++ b/app/pages/PageEnigma/contexts/TrackContext/TrackProvider.tsx
@@ -32,6 +32,11 @@ export const TrackProvider = ({ children }: Props) => {
   const [time, setTime] = useState(0);
   const updateCurrentTime = useCallback((newTime: number) => {
     setTime(newTime);
+    console.log("message", {
+      action: "UpdateCurrentTime",
+      id: "",
+      data: { currentTime: newTime },
+    });
   }, []);
 
   // cross group functions
@@ -86,8 +91,8 @@ export const TrackProvider = ({ children }: Props) => {
 
       scale,
       currentTime: time,
-      length,
       updateCurrentTime,
+      length,
       fullWidth,
     };
   }, [
diff --git a/app/pages/PageEnigma/contexts/TrackContext/utils/useUpdateAudio.ts b/app/pages/PageEnigma/contexts/TrackContext/utils/useUpdateAudio.ts
index 8daab4f93c..2052926c16 100644
--- a/app/pages/PageEnigma/contexts/TrackContext/utils/useUpdateAudio.ts
+++ b/app/pages/PageEnigma/contexts/TrackContext/utils/useUpdateAudio.ts
@@ -45,12 +45,17 @@ export default function useUpdateAudio() {
           clips: newClips,
         };
       });
+      console.log("message", {
+        action: "UpdateGlobalAudio",
+        id,
+        data: { offset, length },
+      });
     },
     [],
   );
 
   const addGlobalAudio = useCallback(
-    (dragId: string, audioClips: BaseClip[]) => {
+    (dragId: string, audioClips: BaseClip[], offset: number) => {
       const clip = audioClips.find((row) => row.id === dragId);
       if (!clip) {
         return;
@@ -59,9 +64,14 @@ export default function useUpdateAudio() {
       setAudio((oldAudio) => {
         return {
           ...oldAudio,
-          clips: [...oldAudio.clips, clip],
+          clips: [...oldAudio.clips, { ...clip, offset }],
         };
       });
+      console.log("message", {
+        action: "UpdateGlobalAudio",
+        id: dragId,
+        data: { offset },
+      });
     },
     [],
   );
@@ -73,6 +83,10 @@ export default function useUpdateAudio() {
         muted: !oldAudio.muted,
       };
     });
+    console.log("message", {
+      action: "ToggleGlobalAudioMute",
+      id: "",
+    });
   }, []);
 
   const selectAudioClip = useCallback((clipId: string) => {
@@ -98,6 +112,10 @@ export default function useUpdateAudio() {
         clips: [...oldAudio.clips.filter((clip) => clip.id !== clipId)],
       };
     });
+    console.log("message", {
+      action: "UpdateGlobalAudio",
+      id: clipId,
+    });
   }, []);
 
   return {
diff --git a/app/pages/PageEnigma/contexts/TrackContext/utils/useUpdateCharacters.ts b/app/pages/PageEnigma/contexts/TrackContext/utils/useUpdateCharacters.ts
index 88dc0ca4e5..546e3664cc 100644
--- a/app/pages/PageEnigma/contexts/TrackContext/utils/useUpdateCharacters.ts
+++ b/app/pages/PageEnigma/contexts/TrackContext/utils/useUpdateCharacters.ts
@@ -7,20 +7,7 @@ export default function useUpdateCharacters() {
       id: "CH1",
       muted: false,
       animationClips: [],
-      positionClips: [
-        {
-          id: "CH1-P1",
-          length: 200,
-          offset: 100,
-          name: "pos 1",
-        },
-        {
-          id: "CH1-P2",
-          length: 180,
-          offset: 500,
-          name: "pos 2",
-        },
-      ],
+      positionClips: [],
       lipSyncClips: [
         {
           id: "CH1-L1",
@@ -62,6 +49,11 @@ export default function useUpdateCharacters() {
             };
           });
         });
+        console.log("message", {
+          action: "UpdateAnimation",
+          id,
+          data: { offset, length },
+        });
         return;
       }
       if (type === "positions") {
@@ -102,6 +94,11 @@ export default function useUpdateCharacters() {
             };
           });
         });
+        console.log("message", {
+          action: "UpdateLipSync",
+          id,
+          data: { offset, length },
+        });
       }
     },
     [],
@@ -135,6 +132,11 @@ export default function useUpdateCharacters() {
           };
         });
       });
+      console.log("message", {
+        action: "AddAnimation",
+        id: clipId,
+        data: { offset },
+      });
     },
     [],
   );
@@ -167,6 +169,11 @@ export default function useUpdateCharacters() {
           };
         });
       });
+      console.log("message", {
+        action: "AddLipSync",
+        id: clipId,
+        data: { offset },
+      });
     },
     [],
   );
@@ -179,6 +186,10 @@ export default function useUpdateCharacters() {
           character.id === characterId ? !character.muted : character.muted,
       }));
     });
+    console.log("message", {
+      action: "ToggleLipSync",
+      id: characterId,
+    });
   }, []);
 
   const selectCharacterClip = useCallback((clipId: string) => {
@@ -220,6 +231,10 @@ export default function useUpdateCharacters() {
         })),
       ];
     });
+    console.log("message", {
+      action: "DeleteCharacterClip",
+      id: clipId,
+    });
   }, []);
 
   return {

From 3b59bafee444ab91329e32f6761cac8c169ff611 Mon Sep 17 00:00:00 2001
From: bflatastic <bombayapirat@gmail.com>
Date: Wed, 27 Mar 2024 21:44:05 +0700
Subject: [PATCH 16/16] confirmation modal styling update

---
 app/components/ConfirmationModal.tsx | 92 ++++++++++++++++++----------
 1 file changed, 60 insertions(+), 32 deletions(-)

diff --git a/app/components/ConfirmationModal.tsx b/app/components/ConfirmationModal.tsx
index 81b76722cd..abcdd1040a 100644
--- a/app/components/ConfirmationModal.tsx
+++ b/app/components/ConfirmationModal.tsx
@@ -1,5 +1,6 @@
-import { Dialog } from "@headlessui/react";
+import { Dialog, Transition } from "@headlessui/react";
 import { Button } from "~/components/Button";
+import { Fragment } from "react";
 
 interface Props {
   text: string;
@@ -25,37 +26,64 @@ export const ConfirmationModal = ({
   cancelText = "Cancel",
 }: Props) => {
   return (
-    <Dialog open={open} onClose={onClose}>
-      <div className="fixed inset-0 flex w-screen items-center justify-center bg-white p-4 opacity-35" />
-      <div className="fixed inset-0 flex w-screen items-center justify-center p-4">
-        <Dialog.Panel className="bg-black p-4">
-          <Dialog.Title>{title}</Dialog.Title>
-
-          <p className="my-6">{text}</p>
-
-          <div className="flex justify-end gap-4">
-            {!!onCancel && (
-              <Button
-                type="button"
-                onClick={onCancel}
-                className="rounded-lg px-3 py-2"
-                variant="secondary"
+    <Transition appear show={open} as={Fragment}>
+      <Dialog open={open} onClose={onClose}>
+        <Transition.Child
+          as={Fragment}
+          enter="ease-out duration-300"
+          enterFrom="opacity-0"
+          enterTo="opacity-100"
+          leave="ease-in duration-200"
+          leaveFrom="opacity-100"
+          leaveTo="opacity-0"
+        >
+          <div className="fixed inset-0 bg-black/40" />
+        </Transition.Child>
+        <div className="fixed inset-0 flex w-screen items-center justify-center p-4">
+          <Transition.Child
+            as={Fragment}
+            enter="ease-out duration-300"
+            enterFrom="opacity-0 scale-95"
+            enterTo="opacity-100 scale-100"
+            leave="ease-in duration-200"
+            leaveFrom="opacity-100 scale-100"
+            leaveTo="opacity-0 scale-95"
+          >
+            <Dialog.Panel className="w-full max-w-md transform overflow-hidden rounded-xl border border-ui-panel-border bg-ui-panel p-5 text-left align-middle shadow-xl transition-all">
+              <Dialog.Title
+                as="h4"
+                className="mb-4 text-xl font-bold text-white"
               >
-                {cancelText}
-              </Button>
-            )}
-            {!!onOk && (
-              <Button
-                type="button"
-                onClick={onOk}
-                className={[okColor, "rounded-lg px-3 py-2"].join(" ")}
-              >
-                {okText}
-              </Button>
-            )}
-          </div>
-        </Dialog.Panel>
-      </div>
-    </Dialog>
+                {title}
+              </Dialog.Title>
+
+              <div className="mt-2">{text}</div>
+
+              <div className="mt-6 flex justify-end gap-2">
+                {!!onCancel && (
+                  <Button
+                    type="button"
+                    onClick={onCancel}
+                    className="rounded-lg px-3 py-2"
+                    variant="secondary"
+                  >
+                    {cancelText}
+                  </Button>
+                )}
+                {!!onOk && (
+                  <Button
+                    type="button"
+                    onClick={onOk}
+                    className={[okColor, "rounded-lg px-3 py-2"].join(" ")}
+                  >
+                    {okText}
+                  </Button>
+                )}
+              </div>
+            </Dialog.Panel>
+          </Transition.Child>
+        </div>
+      </Dialog>
+    </Transition>
   );
 };