Move the test buttons

app/models/track.ts

@@ -1,3 +1,5 @@
+import {Base} from "postcss-selector-parser";
+
 export interface BaseClip {
   id: string;
   name: string;
@@ -18,3 +20,10 @@ export interface CharacterTrack {
   positionClips: PositionClip[];
   lipSyncClips: LipSyncClip[];
 }
+
+export interface CameraTrack {
+  id: string;
+  clips: CameraClip[];
+}
+
+export interface CameraClip extends BaseClip {}

app/pages/PageEnigma/comps/Timeline/Camera.tsx

@@ -0,0 +1,44 @@
+import { TrackClip } from "./TrackClip";
+import {CameraTrack, CharacterTrack} from "~/models/track";
+
+interface Props {
+  scale: number;
+  time: number;
+  camera: CameraTrack;
+  updateClip: (id: string, offset: number, length: number) => void;
+}
+
+export const Character = ({
+  camera: { clips },
+  updateClip,
+}: Props) => {
+  return (
+    <div className="bg-charcter-groupBg block h-48 w-full rounded-lg p-2">
+      <div className="mb-2 text-sm text-white">Character</div>
+      <div className="flex flex-col gap-2">
+        <div className="px-4">
+          <div className="bg-character-clip relative mt-4 block h-8 w-full rounded">
+            {clips.map((clip, index) => (
+              <TrackClip
+                key={clip.id}
+                min={
+                  index > 0
+                    ? clips[index - 1].offset +
+                      clips[index - 1].length
+                    : 0
+                }
+                max={
+                  index < clips.length - 1
+                    ? clips[index + 1].offset
+                    : 1000
+                }
+                updateClip={updateClip}
+                clip={clip}
+              />
+            ))}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};

app/pages/PageEnigma/comps/Timeline/Timeline.tsx

@@ -33,10 +33,10 @@ export const Timeline = ({
   const width = 1500;
   return (
     <LowerPanel>
-      <div className="fixed" style={{top: 72, left: 1000}}>
-      <Button onClick={handleButtonLoad}>Load</Button>
-      <Button onClick={handleButtonRender}>Render</Button>
-      <Button onClick={handleButtonPlay}>Play</Button>
+      <div className="fixed" style={{ top: 72, left: "calc(100% - 600px)" }}>
+        <Button onClick={handleButtonLoad}>Load</Button>
+        <Button onClick={handleButtonRender}>Render</Button>
+        <Button onClick={handleButtonPlay}>Play</Button>
       </div>
       <div className="h-10 border-b border-ui-panel-border"></div>
       <input
@@ -70,7 +70,10 @@ export const Timeline = ({
             />
           ))}
         </div>
-          <div className="h-full absolute bg-brand-primary block" style={{left: time + 40, top: 0, width: 1}} />
+        <div
+          className="absolute block h-full bg-brand-primary"
+          style={{ left: time + 40, top: 0, width: 1 }}
+        />
       </div>
     </LowerPanel>
   );