@agent-native/core 0.85.6 → 0.86.0

package/corpus/templates/videos/app/components/Sidebar.tsx

@@ -1,609 +0,0 @@
-import {
-  DevDatabaseLink,
-  FeedbackButton,
-  useT,
-} from "@agent-native/core/client";
-import { ExtensionsSidebarSection } from "@agent-native/core/client/extensions";
-import { OrgSwitcher } from "@agent-native/core/client/org";
-import {
-  IconAdjustmentsHorizontal,
-  IconCamera,
-  IconMouse,
-  IconChevronRight,
-  IconSettings,
-  IconFileText,
-  IconClick,
-  IconVideo,
-  IconComponents,
-  IconPalette,
-  IconFolderPlus,
-} from "@tabler/icons-react";
-import { useState, useEffect, useRef } from "react";
-import { Link, useLocation } from "react-router";
-
-import { CameraControls } from "@/components/CameraControls";
-import { CompositionCard } from "@/components/CompositionCard";
-import { CompSettingsEditor } from "@/components/CompSettingsEditor";
-import { CurrentElementPanel } from "@/components/CurrentElementPanel";
-import { CursorControls } from "@/components/CursorControls";
-import { LibraryFolderRow } from "@/components/LibraryFolderRow";
-import { NewCompositionPopover } from "@/components/NewCompositionPopover";
-import { PropsEditor } from "@/components/PropsEditor";
-import { TrackPropertiesPanel } from "@/components/TrackPropertiesPanel";
-import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs";
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipTrigger,
-} from "@/components/ui/tooltip";
-import { useComposition } from "@/contexts/CompositionContext";
-import { usePlayback } from "@/contexts/PlaybackContext";
-import { useTimeline } from "@/contexts/TimelineContext";
-import { useFolders } from "@/hooks/use-folders";
-import { cn } from "@/lib/utils";
-import { compositions } from "@/remotion/registry";
-
-type SidebarProps = {
-  open: boolean;
-  cameraControlsTrigger?: number; // Increment this to open camera controls
-  cursorControlsTrigger?: number; // Increment this to open cursor controls
-  compSettingsTrigger?: number; // Increment this to open composition settings
-  onGeneratingChange?: (generating: boolean) => void;
-};
-
-export function Sidebar({
-  open,
-  cameraControlsTrigger,
-  cursorControlsTrigger,
-  compSettingsTrigger,
-  onGeneratingChange,
-}: SidebarProps) {
-  // Get state from contexts
-  const {
-    compositionId,
-    isNew,
-    selected,
-    currentProps,
-    compSettings,
-    onNavigate,
-    onDelete,
-    onPropsChange,
-    onCompSettingsChange,
-  } = useComposition();
-
-  const {
-    tracks: timelineTracks,
-    selectedTrackId,
-    updateTrack: onUpdateTrack,
-    addTrack: onAddTrack,
-  } = useTimeline();
-
-  const { currentFrame, fps, onSeek } = usePlayback();
-  const t = useT();
-
-  const {
-    folders,
-    createFolder,
-    renameFolder,
-    deleteFolder,
-    addToFolder,
-    removeFromFolder,
-    getFolderForComposition,
-    getCompositionsInFolder,
-  } = useFolders();
-
-  const [tab, setTab] = useState<"compositions" | "properties">("compositions");
-  const [isDragOverUncategorized, setIsDragOverUncategorized] = useState(false);
-  const cameraDetailsRef = useRef<HTMLDetailsElement>(null);
-  const cursorDetailsRef = useRef<HTMLDetailsElement>(null);
-  const trackDetailsRef = useRef<HTMLDetailsElement>(null);
-  const compSettingsDetailsRef = useRef<HTMLDetailsElement>(null);
-
-  const selectedTrack =
-    timelineTracks.find((t) => t.id === selectedTrackId) ?? null;
-  const cameraTrack = timelineTracks.find((t) => t.id === "camera");
-  const cursorTrack = timelineTracks.find((t) => t.id === "cursor");
-
-  // Compositions not assigned to any folder
-  const uncategorizedCompositions = compositions.filter(
-    (c) => !getFolderForComposition(c.id),
-  );
-
-  // Auto-switch to Properties tab when a track is selected from the timeline
-  useEffect(() => {
-    if (selectedTrackId) {
-      setTab("properties");
-
-      // Auto-open and scroll to track panel (skip camera and cursor tracks)
-      if (selectedTrackId !== "camera" && selectedTrackId !== "cursor") {
-        setTimeout(() => {
-          // Close camera and cursor panels
-          if (cameraDetailsRef.current) cameraDetailsRef.current.open = false;
-          if (cursorDetailsRef.current) cursorDetailsRef.current.open = false;
-          if (compSettingsDetailsRef.current)
-            compSettingsDetailsRef.current.open = false;
-
-          // Open track panel
-          if (trackDetailsRef.current) {
-            trackDetailsRef.current.open = true;
-
-            setTimeout(() => {
-              trackDetailsRef.current?.scrollIntoView({
-                behavior: "smooth",
-                block: "nearest",
-              });
-            }, 50);
-          }
-        }, 150);
-      }
-    }
-  }, [selectedTrackId]);
-
-  // Handle camera keyframe clicks - open camera panel and close others
-  useEffect(() => {
-    if (cameraControlsTrigger && cameraControlsTrigger > 0) {
-      // Switch to properties tab
-      setTab("properties");
-
-      // Wait for tab switch to complete, then close other panels and open camera
-      setTimeout(() => {
-        // Close other panels
-        if (cursorDetailsRef.current) cursorDetailsRef.current.open = false;
-        if (trackDetailsRef.current) trackDetailsRef.current.open = false;
-        if (compSettingsDetailsRef.current)
-          compSettingsDetailsRef.current.open = false;
-
-        // Open camera panel
-        if (cameraDetailsRef.current) {
-          cameraDetailsRef.current.open = true;
-
-          // Additional delay for smooth scroll after opening
-          setTimeout(() => {
-            cameraDetailsRef.current?.scrollIntoView({
-              behavior: "smooth",
-              block: "nearest",
-            });
-          }, 50);
-        }
-      }, 150);
-    }
-  }, [cameraControlsTrigger]);
-
-  // Handle cursor keyframe clicks - open cursor panel and close others
-  useEffect(() => {
-    if (cursorControlsTrigger && cursorControlsTrigger > 0) {
-      // Switch to properties tab
-      setTab("properties");
-
-      // Wait for tab switch to complete, then close other panels and open cursor
-      setTimeout(() => {
-        // Close other panels
-        if (cameraDetailsRef.current) cameraDetailsRef.current.open = false;
-        if (trackDetailsRef.current) trackDetailsRef.current.open = false;
-        if (compSettingsDetailsRef.current)
-          compSettingsDetailsRef.current.open = false;
-
-        // Open cursor panel
-        if (cursorDetailsRef.current) {
-          cursorDetailsRef.current.open = true;
-
-          // Additional delay for smooth scroll after opening
-          setTimeout(() => {
-            cursorDetailsRef.current?.scrollIntoView({
-              behavior: "smooth",
-              block: "nearest",
-            });
-          }, 50);
-        }
-      }, 150);
-    }
-  }, [cursorControlsTrigger]);
-
-  // Handle composition settings clicks - open comp settings panel and close others
-  useEffect(() => {
-    if (compSettingsTrigger && compSettingsTrigger > 0) {
-      // Switch to properties tab
-      setTab("properties");
-
-      // Wait for tab switch to complete, then close other panels and open comp settings
-      setTimeout(() => {
-        // Close other panels
-        if (cameraDetailsRef.current) cameraDetailsRef.current.open = false;
-        if (cursorDetailsRef.current) cursorDetailsRef.current.open = false;
-        if (trackDetailsRef.current) trackDetailsRef.current.open = false;
-
-        // Open comp settings panel
-        if (compSettingsDetailsRef.current) {
-          compSettingsDetailsRef.current.open = true;
-
-          // Additional delay for smooth scroll after opening
-          setTimeout(() => {
-            compSettingsDetailsRef.current?.scrollIntoView({
-              behavior: "smooth",
-              block: "nearest",
-            });
-          }, 50);
-        }
-      }, 150);
-    }
-  }, [compSettingsTrigger]);
-
-  const location = useLocation();
-
-  const navItems = [
-    {
-      icon: IconVideo,
-      labelKey: "navigation.animations",
-      href: "/",
-      active:
-        !location.pathname.startsWith("/components") &&
-        !location.pathname.startsWith("/design-systems"),
-    },
-    {
-      icon: IconComponents,
-      labelKey: "navigation.components",
-      href: "/components",
-      active: location.pathname.startsWith("/components"),
-    },
-    {
-      icon: IconPalette,
-      labelKey: "navigation.designSystems",
-      href: "/design-systems",
-      active: location.pathname.startsWith("/design-systems"),
-    },
-  ];
-
-  return (
-    <div
-      className={cn(
-        "flex-shrink-0 border-r border-border bg-card/40 overflow-hidden h-full",
-        "md:relative",
-        open
-          ? "absolute inset-y-0 left-0 z-30 w-64 lg:w-72 md:relative"
-          : "w-0",
-      )}
-    >
-      <div className="w-64 lg:w-72 h-full flex flex-col">
-        {/* App name */}
-        <div className="flex h-10 items-center px-3 border-b border-border shrink-0">
-          <span className="text-xs font-semibold tracking-tight">
-            {t("navigation.brand")}
-          </span>
-        </div>
-
-        {/* Navigation */}
-        <nav className="px-2 py-1.5 space-y-0.5 border-b border-border shrink-0">
-          {navItems.map((item) => {
-            const Icon = item.icon;
-            return (
-              <Link
-                key={item.href}
-                to={item.href}
-                className={cn(
-                  "flex items-center gap-2 rounded-md px-2.5 py-1.5 text-xs transition-colors",
-                  item.active
-                    ? "bg-secondary text-foreground"
-                    : "text-muted-foreground hover:text-foreground hover:bg-secondary/50",
-                )}
-              >
-                <Icon className="h-3.5 w-3.5 shrink-0" />
-                {t(item.labelKey)}
-              </Link>
-            );
-          })}
-        </nav>
-
-        <Tabs
-          value={tab}
-          onValueChange={(v) => setTab(v as "compositions" | "properties")}
-          className="flex flex-col flex-1 min-h-0"
-        >
-          <TabsList className="w-full bg-transparent h-auto p-1.5 gap-1 border-b border-border shrink-0">
-            <TabsTrigger
-              value="compositions"
-              className="flex-1 px-3 py-1.5 text-xs font-medium rounded-md text-muted-foreground data-[state=active]:bg-secondary data-[state=active]:text-foreground data-[state=active]:shadow-none"
-            >
-              {t("studio.compositions")}
-            </TabsTrigger>
-            <TabsTrigger
-              value="properties"
-              className="flex-1 px-3 py-1.5 text-xs font-medium rounded-md text-muted-foreground data-[state=active]:bg-secondary data-[state=active]:text-foreground data-[state=active]:shadow-none"
-            >
-              {t("studio.properties")}
-              {selectedTrackId && (
-                <span className="ml-1 w-1.5 h-1.5 rounded-full bg-primary animate-pulse" />
-              )}
-            </TabsTrigger>
-          </TabsList>
-
-          <TabsContent
-            value="compositions"
-            className="flex-1 overflow-y-auto p-2.5 scrollbar-thin mt-0"
-          >
-            <div className="space-y-1.5">
-              {/* Toolbar: new composition + new folder */}
-              <div className="flex gap-1.5">
-                <div className="flex-1 min-w-0">
-                  <NewCompositionPopover
-                    isNew={isNew}
-                    onNavigate={onNavigate}
-                    onGeneratingChange={onGeneratingChange}
-                  />
-                </div>
-                <Tooltip>
-                  <TooltipTrigger asChild>
-                    <button
-                      onClick={() => createFolder("New Folder")}
-                      className="flex-shrink-0 flex items-center justify-center w-8 h-8 rounded-md border border-dashed border-border text-muted-foreground hover:text-foreground hover:border-border/60 hover:bg-secondary/60 transition-colors"
-                    >
-                      <IconFolderPlus className="h-3.5 w-3.5" />
-                    </button>
-                  </TooltipTrigger>
-                  <TooltipContent>{t("raw.folders.newFolder")}</TooltipContent>
-                </Tooltip>
-              </div>
-
-              {/* Folders (always at the top) */}
-              {folders.map((folder) => {
-                const folderCompIds = getCompositionsInFolder(folder.id);
-                const folderComps = compositions.filter((c) =>
-                  folderCompIds.includes(c.id),
-                );
-                return (
-                  <LibraryFolderRow
-                    key={folder.id}
-                    folder={folder}
-                    compositions={folderComps}
-                    selectedCompositionId={compositionId ?? null}
-                    onSelectComposition={(id) => onNavigate(`/c/${id}`)}
-                    onDelete={onDelete}
-                    onRenameFolder={renameFolder}
-                    onDeleteFolder={deleteFolder}
-                    onDropComposition={addToFolder}
-                    onRemoveFromFolder={removeFromFolder}
-                  />
-                );
-              })}
-
-              {/* Divider when folders exist */}
-              {folders.length > 0 && (
-                <div className="flex items-center gap-2 px-1 py-0.5">
-                  <div className="flex-1 h-px bg-border/40" />
-                  <span className="text-[9px] uppercase tracking-wider text-muted-foreground/40 font-medium">
-                    Uncategorized
-                  </span>
-                  <div className="flex-1 h-px bg-border/40" />
-                </div>
-              )}
-
-              {/* Uncategorized compositions — also a drop target to remove from folder.
-                  Always rendered when folders exist so there's a reachable drop zone
-                  even when every composition has been placed in a folder. */}
-              {(folders.length > 0 || uncategorizedCompositions.length > 0) && (
-                <div
-                  className={cn(
-                    "rounded-lg space-y-0.5 transition-all",
-                    folders.length > 0 &&
-                      uncategorizedCompositions.length === 0 &&
-                      "min-h-[36px] flex items-center justify-center border border-dashed border-border/30 rounded-lg",
-                    isDragOverUncategorized &&
-                      "ring-2 ring-dashed ring-border bg-secondary/20 p-1",
-                  )}
-                  onDragOver={(e) => {
-                    e.preventDefault();
-                    setIsDragOverUncategorized(true);
-                  }}
-                  onDragLeave={(e) => {
-                    if (!e.currentTarget.contains(e.relatedTarget as Node)) {
-                      setIsDragOverUncategorized(false);
-                    }
-                  }}
-                  onDrop={(e) => {
-                    e.preventDefault();
-                    setIsDragOverUncategorized(false);
-                    const compId = e.dataTransfer.getData(
-                      "text/composition-id",
-                    );
-                    if (compId) removeFromFolder(compId);
-                  }}
-                >
-                  {uncategorizedCompositions.map((comp) => (
-                    <CompositionCard
-                      key={comp.id}
-                      composition={comp}
-                      isSelected={comp.id === compositionId}
-                      onClick={() => onNavigate(`/c/${comp.id}`)}
-                      onDelete={onDelete}
-                      draggable
-                    />
-                  ))}
-                  {folders.length > 0 &&
-                    uncategorizedCompositions.length === 0 && (
-                      <p className="text-[10px] text-center text-muted-foreground/40">
-                        {t("raw.folders.dropToRemove")}
-                      </p>
-                    )}
-                </div>
-              )}
-            </div>
-          </TabsContent>
-
-          <TabsContent
-            value="properties"
-            className="flex-1 overflow-y-auto p-2.5 space-y-1.5 scrollbar-thin mt-0"
-          >
-            {selected ? (
-              <div className="space-y-3">
-                {/* IconCamera controls */}
-                {cameraTrack && (
-                  <details ref={cameraDetailsRef} className="group">
-                    <summary className="cursor-pointer list-none">
-                      <div className="flex items-center gap-2 p-2 rounded hover:bg-secondary/50 transition-colors">
-                        <IconCamera className="w-3.5 h-3.5 text-blue-400 mr-1 ml-[3px]" />
-                        <span className="text-xs font-medium">Camera</span>
-                        <IconChevronRight className="w-3 h-3 ml-auto group-open:rotate-90 transition-transform text-muted-foreground" />
-                      </div>
-                    </summary>
-                    <div className="mt-1">
-                      <CameraControls
-                        currentFrame={currentFrame}
-                        fps={fps}
-                        tracks={timelineTracks}
-                        onUpdateTrack={onUpdateTrack}
-                        onAddTrack={onAddTrack}
-                        onSeek={onSeek}
-                        durationInFrames={compSettings?.durationInFrames}
-                      />
-                    </div>
-                  </details>
-                )}
-
-                {/* Cursor controls */}
-                <details ref={cursorDetailsRef} className="group">
-                  <summary className="cursor-pointer list-none">
-                    <div className="flex items-center gap-2 p-2 rounded hover:bg-secondary/50 transition-colors">
-                      <IconMouse className="w-3.5 h-3.5 text-sky-400" />
-                      <span className="text-xs font-medium">Cursor</span>
-                      <IconChevronRight className="w-3 h-3 ml-auto group-open:rotate-90 transition-transform text-muted-foreground" />
-                    </div>
-                  </summary>
-                  <div className="mt-1">
-                    <CursorControls
-                      currentFrame={currentFrame}
-                      fps={fps}
-                      tracks={timelineTracks}
-                      onUpdateTrack={onUpdateTrack}
-                      onAddTrack={onAddTrack}
-                      onSeek={onSeek}
-                      durationInFrames={
-                        compSettings?.durationInFrames ??
-                        selected?.durationInFrames
-                      }
-                      compositionWidth={compSettings?.width ?? selected?.width}
-                      compositionHeight={
-                        compSettings?.height ?? selected?.height
-                      }
-                      compositionId={compositionId}
-                    />
-                  </div>
-                </details>
-
-                {/* Cursor Interactions */}
-                {cursorTrack && (
-                  <details className="group">
-                    <summary className="cursor-pointer list-none">
-                      <div className="flex items-center gap-2 p-2 rounded hover:bg-secondary/50 transition-colors">
-                        <IconClick className="w-3.5 h-3.5 text-green-400" />
-                        <span className="text-xs font-medium">
-                          {t("raw.sidebar.cursorInteractions")}
-                        </span>
-                        <IconChevronRight className="w-3 h-3 ml-auto group-open:rotate-90 transition-transform text-muted-foreground" />
-                      </div>
-                    </summary>
-                    <div className="mt-1">
-                      <CurrentElementPanel />
-                    </div>
-                  </details>
-                )}
-
-                {/* Track properties */}
-                <details
-                  ref={trackDetailsRef}
-                  className="group"
-                  open={!!selectedTrack}
-                >
-                  <summary className="cursor-pointer list-none">
-                    <div className="flex items-center gap-2 p-2 rounded hover:bg-secondary/50 transition-colors">
-                      <IconAdjustmentsHorizontal className="w-3.5 h-3.5 text-amber-400" />
-                      <span className="text-xs font-medium">
-                        {t("raw.sidebar.animationTrack")}
-                      </span>
-                      {selectedTrack && (
-                        <span className="text-[9px] font-mono text-muted-foreground/60 ml-auto mr-2">
-                          {selectedTrack.label}
-                        </span>
-                      )}
-                      <IconChevronRight className="w-3 h-3 ml-auto group-open:rotate-90 transition-transform text-muted-foreground" />
-                    </div>
-                  </summary>
-                  <div className="mt-1">
-                    {selectedTrack &&
-                    selectedTrack.id !== "camera" &&
-                    selectedTrack.id !== "cursor" ? (
-                      <TrackPropertiesPanel
-                        track={selectedTrack}
-                        fps={selected.fps}
-                        durationInFrames={selected.durationInFrames}
-                        onUpdateTrack={onUpdateTrack}
-                      />
-                    ) : (
-                      <div className="text-center py-6 px-4 bg-muted/30 rounded-lg border border-dashed border-border">
-                        <p className="text-xs text-muted-foreground">
-                          {t("raw.sidebar.selectTrack")}
-                        </p>
-                        <p className="text-xs text-muted-foreground/60 mt-1">
-                          {t("raw.sidebar.clickAnyTrack")}
-                        </p>
-                      </div>
-                    )}
-                  </div>
-                </details>
-
-                {/* Composition properties */}
-                <details className="group" open>
-                  <summary className="cursor-pointer list-none">
-                    <div className="flex items-center gap-2 p-2 rounded hover:bg-secondary/50 transition-colors">
-                      <IconFileText className="w-3.5 h-3.5 text-blue-400" />
-                      <span className="text-xs font-medium">Properties</span>
-                      <IconChevronRight className="w-3 h-3 ml-auto group-open:rotate-90 transition-transform text-muted-foreground" />
-                    </div>
-                  </summary>
-                  <div className="mt-1">
-                    <PropsEditor
-                      composition={selected}
-                      props={currentProps}
-                      onPropsChange={onPropsChange}
-                    />
-                  </div>
-                </details>
-
-                {/* Composition settings */}
-                {compSettings && (
-                  <details ref={compSettingsDetailsRef} className="group" open>
-                    <summary className="cursor-pointer list-none">
-                      <div className="flex items-center gap-2 p-2 rounded hover:bg-secondary/50 transition-colors">
-                        <IconSettings className="w-3.5 h-3.5 text-red-400" />
-                        <span className="text-xs font-medium">Composition</span>
-                        <IconChevronRight className="w-3 h-3 ml-auto group-open:rotate-90 transition-transform text-muted-foreground" />
-                      </div>
-                    </summary>
-                    <div className="mt-1">
-                      <CompSettingsEditor
-                        settings={compSettings}
-                        onChange={onCompSettingsChange}
-                      />
-                    </div>
-                  </details>
-                )}
-              </div>
-            ) : (
-              <div className="text-xs text-muted-foreground text-center py-8">
-                {t("raw.sidebar.selectComposition")}
-              </div>
-            )}
-          </TabsContent>
-        </Tabs>
-
-        <div className="shrink-0 px-2 py-1.5">
-          <ExtensionsSidebarSection />
-        </div>
-
-        <div className="shrink-0 space-y-2 px-3 py-1.5">
-          <DevDatabaseLink />
-          <FeedbackButton />
-          <OrgSwitcher />
-        </div>
-      </div>
-    </div>
-  );
-}