From d750d7f41dfdb8e3c9a2b00206657ca0c4b99098 Mon Sep 17 00:00:00 2001
From: Maze Winther <mazewinther@gmail.com>
Date: Tue, 8 Jul 2025 00:07:22 +0200
Subject: [PATCH] shipping too hard

---
 apps/web/src/app/editor/[project_id]/page.tsx |  10 +-
 .../components/editor/timeline-element.tsx    |  19 +--
 apps/web/src/components/editor/timeline.tsx   |  20 +--
 apps/web/src/lib/timeline-constants.ts        | 123 +++++++++++-------
 4 files changed, 103 insertions(+), 69 deletions(-)

diff --git a/apps/web/src/app/editor/[project_id]/page.tsx b/apps/web/src/app/editor/[project_id]/page.tsx
index 011c0c6..7de30de 100644
--- a/apps/web/src/app/editor/[project_id]/page.tsx
+++ b/apps/web/src/app/editor/[project_id]/page.tsx
@@ -8,7 +8,7 @@ import {
   ResizableHandle,
 } from "../../../components/ui/resizable";
 import { MediaPanel } from "../../../components/editor/media-panel";
-// import { PropertiesPanel } from "../../components/editor/properties-panel";
+import { PropertiesPanel } from "../../../components/editor/properties-panel";
 import { Timeline } from "../../../components/editor/timeline";
 import { PreviewPanel } from "../../../components/editor/preview-panel";
 import { EditorHeader } from "@/components/editor-header";
@@ -27,6 +27,8 @@ export default function Editor() {
     setPreviewPanel,
     setMainContent,
     setTimeline,
+    propertiesPanel,
+    setPropertiesPanel,
   } = usePanelStore();
 
   const { activeProject, loadProject, createNewProject } = useProjectStore();
@@ -94,8 +96,8 @@ export default function Editor() {
 
                 <ResizableHandle withHandle />
 
-                {/* Properties Panel - Hidden for now but ready */}
-                {/* <ResizablePanel
+                
+                <ResizablePanel
                   defaultSize={propertiesPanel}
                   minSize={15}
                   maxSize={40}
@@ -103,7 +105,7 @@ export default function Editor() {
                   className="min-w-0"
                 >
                   <PropertiesPanel />
-                </ResizablePanel> */}
+                </ResizablePanel>
               </ResizablePanelGroup>
             </ResizablePanel>
 
diff --git a/apps/web/src/components/editor/timeline-element.tsx b/apps/web/src/components/editor/timeline-element.tsx
index 0d25860..6512637 100644
--- a/apps/web/src/components/editor/timeline-element.tsx
+++ b/apps/web/src/components/editor/timeline-element.tsx
@@ -173,8 +173,7 @@ export function TimelineElement({
   const renderElementContent = () => {
     if (element.type === "text") {
       return (
-        <div className="w-full h-full flex items-center justify-center px-2">
-          <Type className="h-4 w-4 mr-2 text-purple-400 flex-shrink-0" />
+        <div className="w-full h-full flex items-center justify-center">
           <span className="text-xs text-foreground/80 truncate">
             {element.content}
           </span>
@@ -195,12 +194,14 @@ export function TimelineElement({
     if (mediaItem.type === "image") {
       return (
         <div className="w-full h-full flex items-center justify-center">
-          <img
-            src={mediaItem.url}
-            alt={mediaItem.name}
-            className="w-full h-full object-cover"
-            draggable={false}
-          />
+          <div className="bg-[#004D52] py-3 w-full h-full">
+            <img
+              src={mediaItem.url}
+              alt={mediaItem.name}
+              className="w-full h-full object-cover"
+              draggable={false}
+            />
+          </div>
         </div>
       );
     }
@@ -276,7 +277,7 @@ export function TimelineElement({
           onElementMouseDown && onElementMouseDown(e, element)
         }
       >
-        <div className="absolute inset-1 flex items-center p-1">
+        <div className="absolute inset-0 flex items-center h-full">
           {renderElementContent()}
         </div>
 
diff --git a/apps/web/src/components/editor/timeline.tsx b/apps/web/src/components/editor/timeline.tsx
index 6a94ed6..f720822 100644
--- a/apps/web/src/components/editor/timeline.tsx
+++ b/apps/web/src/components/editor/timeline.tsx
@@ -46,6 +46,9 @@ import { TimelineTrackContent } from "./timeline-track";
 import type { DragData } from "@/types/timeline";
 import {
   getTrackLabelColor,
+  getTrackHeight,
+  getCumulativeHeightBefore,
+  getTotalTracksHeight,
   TIMELINE_CONSTANTS,
 } from "@/lib/timeline-constants";
 
@@ -242,9 +245,9 @@ export function Timeline() {
       track.elements.forEach((element) => {
         const clipLeft =
           element.startTime * TIMELINE_CONSTANTS.PIXELS_PER_SECOND * zoomLevel;
-        const clipTop = trackIdx * TIMELINE_CONSTANTS.TRACK_HEIGHT;
-        const clipBottom = clipTop + TIMELINE_CONSTANTS.TRACK_HEIGHT;
-        const clipRight = clipLeft + TIMELINE_CONSTANTS.TRACK_HEIGHT;
+        const clipTop = getCumulativeHeightBefore(tracks, trackIdx);
+        const clipBottom = clipTop + getTrackHeight(track.type);
+        const clipRight = clipLeft + getTrackHeight(track.type);
         if (
           bx1 < clipRight &&
           bx2 > clipLeft &&
@@ -1021,7 +1024,8 @@ export function Timeline() {
                 {tracks.map((track) => (
                   <div
                     key={track.id}
-                    className="h-[60px] flex items-center px-3 border-b border-muted/30 bg-background group"
+                    className="flex items-center px-3 border-b border-muted/30 bg-background group"
+                    style={{ height: `${getTrackHeight(track.type)}px` }}
                   >
                     <div className="flex items-center flex-1 min-w-0">
                       <div
@@ -1048,7 +1052,7 @@ export function Timeline() {
               <div
                 className="relative flex-1"
                 style={{
-                  height: `${Math.max(200, Math.min(800, tracks.length * TIMELINE_CONSTANTS.TRACK_HEIGHT))}px`,
+                  height: `${Math.max(200, Math.min(800, getTotalTracksHeight(tracks)))}px`,
                   width: `${dynamicTimelineWidth}px`,
                 }}
                 onClick={handleTimelineClick}
@@ -1064,8 +1068,8 @@ export function Timeline() {
                           <div
                             className="absolute left-0 right-0 border-b border-muted/30"
                             style={{
-                              top: `${index * TIMELINE_CONSTANTS.TRACK_HEIGHT}px`,
-                              height: `${TIMELINE_CONSTANTS.TRACK_HEIGHT}px`,
+                              top: `${getCumulativeHeightBefore(tracks, index)}px`,
+                              height: `${getTrackHeight(track.type)}px`,
                             }}
                             onClick={(e) => {
                               // If clicking empty area (not on a element), deselect all elements
@@ -1098,7 +1102,7 @@ export function Timeline() {
                         className="absolute top-0 w-0.5 bg-red-500 pointer-events-auto z-50 cursor-col"
                         style={{
                           left: `${playheadPosition * TIMELINE_CONSTANTS.PIXELS_PER_SECOND * zoomLevel}px`,
-                          height: `${tracks.length * TIMELINE_CONSTANTS.TRACK_HEIGHT}px`,
+                          height: `${getTotalTracksHeight(tracks)}px`,
                         }}
                         onMouseDown={handlePlayheadMouseDown}
                       />
diff --git a/apps/web/src/lib/timeline-constants.ts b/apps/web/src/lib/timeline-constants.ts
index fbbfe08..dd93cfd 100644
--- a/apps/web/src/lib/timeline-constants.ts
+++ b/apps/web/src/lib/timeline-constants.ts
@@ -1,48 +1,75 @@
-import type { TrackType } from "@/types/timeline";
-
-// Track color definitions
-export const TRACK_COLORS = {
-  media: {
-    solid: "bg-blue-500",
-    background: "bg-blue-500/20",
-    border: "border-blue-500/30",
-  },
-  text: {
-    solid: "bg-purple-500",
-    background: "bg-purple-500/20",
-    border: "border-purple-500/30",
-  },
-  audio: {
-    solid: "bg-green-500",
-    background: "bg-green-500/20",
-    border: "border-green-500/30",
-  },
-  default: {
-    solid: "bg-gray-500",
-    background: "bg-gray-500/20",
-    border: "border-gray-500/30",
-  },
-} as const;
-
-// Utility functions
-export function getTrackColors(type: TrackType) {
-  return TRACK_COLORS[type] || TRACK_COLORS.default;
-}
-
-export function getTrackElementClasses(type: TrackType) {
-  const colors = getTrackColors(type);
-  return `${colors.background} ${colors.border}`;
-}
-
-export function getTrackLabelColor(type: TrackType) {
-  return getTrackColors(type).solid;
-}
-
-// Other timeline constants
-export const TIMELINE_CONSTANTS = {
-  ELEMENT_MIN_WIDTH: 80,
-  PIXELS_PER_SECOND: 50,
-  TRACK_HEIGHT: 60,
-  DEFAULT_TEXT_DURATION: 5,
-  ZOOM_LEVELS: [0.25, 0.5, 1, 1.5, 2, 3, 4],
-} as const;
+import type { TrackType } from "@/types/timeline";
+
+// Track color definitions
+export const TRACK_COLORS: Record<
+  TrackType,
+  { solid: string; background: string; border: string }
+> = {
+  media: {
+    solid: "bg-blue-500",
+    background: "bg-blue-500/20",
+    border: "border-blue-500/30",
+  },
+  text: {
+    solid: "bg-[#9C4937]",
+    background: "bg-[#9C4937]",
+    border: "border-[#9C4937]/40",
+  },
+  audio: {
+    solid: "bg-green-500",
+    background: "bg-green-500/20",
+    border: "border-green-500/30",
+  },
+} as const;
+
+// Utility functions
+export function getTrackColors(type: TrackType) {
+  return TRACK_COLORS[type];
+}
+
+export function getTrackElementClasses(type: TrackType) {
+  const colors = getTrackColors(type);
+  return `${colors.background} ${colors.border}`;
+}
+
+export function getTrackLabelColor(type: TrackType) {
+  return getTrackColors(type).solid;
+}
+
+// Track height definitions
+export const TRACK_HEIGHTS: Record<TrackType, number> = {
+  media: 65,
+  text: 25,
+  audio: 50,
+} as const;
+
+// Utility function for track heights
+export function getTrackHeight(type: TrackType): number {
+  return TRACK_HEIGHTS[type];
+}
+
+// Calculate cumulative height up to (but not including) a track index
+export function getCumulativeHeightBefore(
+  tracks: Array<{ type: TrackType }>,
+  trackIndex: number
+): number {
+  return tracks
+    .slice(0, trackIndex)
+    .reduce((sum, track) => sum + getTrackHeight(track.type), 0);
+}
+
+// Calculate total height of all tracks
+export function getTotalTracksHeight(
+  tracks: Array<{ type: TrackType }>
+): number {
+  return tracks.reduce((sum, track) => sum + getTrackHeight(track.type), 0);
+}
+
+// Other timeline constants
+export const TIMELINE_CONSTANTS = {
+  ELEMENT_MIN_WIDTH: 80,
+  PIXELS_PER_SECOND: 50,
+  TRACK_HEIGHT: 60, // Default fallback
+  DEFAULT_TEXT_DURATION: 5,
+  ZOOM_LEVELS: [0.25, 0.5, 1, 1.5, 2, 3, 4],
+} as const;