refactor: remove development debug

1 files changed, 0 insertions, 109 deletions

diff --git a/apps/web/src/components/development-debug.tsx b/apps/web/src/components/development-debug.tsx
deleted file mode 100644
index 62e606ff..00000000
--- a/apps/web/src/components/development-debug.tsx
+++ /dev/null
@@ -1,109 +0,0 @@
-"use client";

-

-import { useTimelineStore } from "@/stores/timeline-store";

-import { useMediaStore, type MediaItem } from "@/stores/media-store";

-import { TimelineTrack } from "@/types/timeline";

-import { usePlaybackStore } from "@/stores/playback-store";

-import { Button } from "@/components/ui/button";

-import { useState } from "react";

-import type { TimelineElement } from "@/types/timeline";

-import { env } from "@/env";

-

-// Only show in development

-const SHOW_DEBUG_INFO = env.NODE_ENV === "development";

-

-interface ActiveElement {

-  element: TimelineElement;

-  track: TimelineTrack;

-  mediaItem: MediaItem | null;

-}

-

-export function DevelopmentDebug() {

-  const { tracks } = useTimelineStore();

-  const { mediaItems } = useMediaStore();

-  const { currentTime } = usePlaybackStore();

-  const [showDebug, setShowDebug] = useState(false);

-

-  // Don't render anything in production

-  if (!SHOW_DEBUG_INFO) return null;

-

-  // Get active elements at current time

-  const getActiveElements = (): ActiveElement[] => {

-    const activeElements: ActiveElement[] = [];

-

-    tracks.forEach((track) => {

-      track.elements.forEach((element) => {

-        const elementStart = element.startTime;

-        const elementEnd =

-          element.startTime +

-          (element.duration - element.trimStart - element.trimEnd);

-

-        if (currentTime >= elementStart && currentTime < elementEnd) {

-          const mediaItem =

-            element.type === "media"

-              ? mediaItems.find((item) => item.id === element.mediaId) || null

-              : null; // Text elements don't have media items

-

-          activeElements.push({ element, track, mediaItem });

-        }

-      });

-    });

-

-    return activeElements;

-  };

-

-  const activeElements = getActiveElements();

-

-  return (

-    <div className="fixed bottom-4 right-4 z-50">

-      <div className="flex flex-col items-end gap-2">

-        {/* Toggle Button */}

-        <Button

-          variant="outline"

-          size="sm"

-          onClick={() => setShowDebug(!showDebug)}

-          className="text-xs backdrop-blur-md bg-background/80 border-border/50"

-        >

-          Debug {showDebug ? "ON" : "OFF"}

-        </Button>

-

-        {/* Debug Info Panel */}

-        {showDebug && (

-          <div className="backdrop-blur-md bg-background/90 border border-border/50 rounded-lg p-3 max-w-sm">

-            <div className="text-xs font-medium mb-2 text-foreground">

-              Active Elements ({activeElements.length})

-            </div>

-            <div className="space-y-1 max-h-40 overflow-y-auto">

-              {activeElements.map((elementData, index) => (

-                <div

-                  key={elementData.element.id}

-                  className="flex items-center gap-2 px-2 py-1 bg-muted/60 rounded text-xs"

-                >

-                  <span className="w-4 h-4 bg-primary/20 rounded text-center text-xs leading-4 flex-shrink-0">

-                    {index + 1}

-                  </span>

-                  <div className="min-w-0 flex-1">

-                    <div className="truncate">{elementData.element.name}</div>

-                    <div className="text-muted-foreground text-[10px]">

-                      {elementData.element.type === "media"

-                        ? elementData.mediaItem?.type || "media"

-                        : "text"}

-                    </div>

-                  </div>

-                </div>

-              ))}

-              {activeElements.length === 0 && (

-                <div className="text-muted-foreground text-xs py-2 text-center">

-                  No active elements

-                </div>

-              )}

-            </div>

-            <div className="mt-2 pt-2 border-t border-border/30 text-[10px] text-muted-foreground">

-              Time: {currentTime.toFixed(2)}s

-            </div>

-          </div>

-        )}

-      </div>

-    </div>

-  );

-}