refactor components structure

apps/web/src/app/editor/[project_id]/page.tsx

@@ -6,10 +6,10 @@ import {
 	ResizablePanel,
 	ResizableHandle,
 } from "@/components/ui/resizable";
-import { AssetsPanel } from "@/components/editor/assets-panel";
+import { AssetsPanel } from "@/components/editor/panels/assets";
-import { PropertiesPanel } from "@/components/editor/properties-panel";
+import { PropertiesPanel } from "@/components/editor/panels/properties";
 import { Timeline } from "@/components/editor/timeline";
-import { PreviewPanel } from "@/components/editor/preview-panel";
+import { PreviewPanel } from "@/components/editor/panels/preview";
 import { EditorHeader } from "@/components/editor/editor-header";
 import { EditorProvider } from "@/components/providers/editor-provider";
 import { Onboarding } from "@/components/editor/onboarding";

apps/web/src/components/editor/export-button.tsx

@@ -3,12 +3,16 @@
 import { useState, useRef } from "react";
 import { TransitionTopIcon } from "@hugeicons/core-free-icons";
 import { HugeiconsIcon } from "@hugeicons/react";
-import { Popover, PopoverContent, PopoverTrigger } from "../ui/popover";
+import {
-import { Button } from "../ui/button";
+	Popover,
-import { Label } from "../ui/label";
+	PopoverContent,
-import { RadioGroup, RadioGroupItem } from "../ui/radio-group";
+	PopoverTrigger,
-import { Progress } from "../ui/progress";
+} from "@/components/ui/popover";
-import { Checkbox } from "../ui/checkbox";
+import { Button } from "@/components/ui/button";
+import { Label } from "@/components/ui/label";
+import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
+import { Progress } from "@/components/ui/progress";
+import { Checkbox } from "@/components/ui/checkbox";
 import { cn } from "@/utils/ui";
 import { getExportMimeType, getExportFileExtension } from "@/lib/export";
 import { Check, Copy, Download, RotateCcw, X } from "lucide-react";
@@ -19,7 +23,7 @@ import {
 	type ExportQuality,
 	type ExportResult,
 } from "@/types/export";
-import { PropertyGroup } from "./properties-panel/property-item";
+import { PropertyGroup } from "@/components/editor/panels/properties/property-item";
 import { useEditor } from "@/hooks/use-editor";
 import { DEFAULT_EXPORT_OPTIONS } from "@/constants/export-constants";
 

apps/web/src/components/editor/onboarding.tsx

@@ -6,7 +6,7 @@ import ReactMarkdown from "react-markdown";
 import { SOCIAL_LINKS } from "@/constants/site-constants";
 import { useLocalStorage } from "@/hooks/storage/use-local-storage";
 import { Button } from "../ui/button";
-import { Dialog, DialogContent, DialogTitle } from "../ui/dialog";
+import { Dialog, DialogBody, DialogContent, DialogTitle } from "../ui/dialog";
 
 export function Onboarding() {
 	const [step, setStep] = useState(0);
@@ -81,11 +81,13 @@ export function Onboarding() {
 
 	return (
 		<Dialog open={isOpen} onOpenChange={handleClose}>
-			<DialogContent className="pt-2 !outline-none sm:max-w-[425px]">
+			<DialogContent className="sm:max-w-[425px]">
 				<DialogTitle>
 					<span className="sr-only">{getStepTitle()}</span>
 				</DialogTitle>
+				<DialogBody>
 					{renderStepContent()}
+				</DialogBody>
 			</DialogContent>
 		</Dialog>
 	);

apps/web/src/components/editor/panels/assets/index.tsx

@@ -1,10 +1,7 @@
 "use client";
 
 import { Separator } from "@/components/ui/separator";
-import {
+import { type Tab, useAssetsPanelStore } from "@/stores/assets-panel-store";
-	type Tab,
-	useAssetsPanelStore,
-} from "../../../stores/assets-panel-store";
 import { TabBar } from "./tabbar";
 import { Captions } from "./views/captions";
 import { MediaView } from "./views/media";

apps/web/src/components/editor/panels/assets/tabbar.tsx

@@ -11,7 +11,7 @@ import {
 	TAB_KEYS,
 	tabs,
 	useAssetsPanelStore,
-} from "../../../stores/assets-panel-store";
+} from "@/stores/assets-panel-store";
 
 export function TabBar() {
 	const { activeTab, setActiveTab } = useAssetsPanelStore();

apps/web/src/components/editor/panels/assets/views/captions.tsx

@@ -1,6 +1,6 @@
 import { Button } from "@/components/ui/button";
-import { PropertyGroup } from "../../properties-panel/property-item";
+import { PropertyGroup } from "@/components/editor/panels/properties/property-item";
-import { PanelBaseView as BaseView } from "@/components/editor/panel-base-view";
+import { PanelBaseView as BaseView } from "@/components/editor/panels/panel-base-view";
 import {
 	Select,
 	SelectContent,

apps/web/src/components/editor/panels/assets/views/media.tsx

@@ -3,8 +3,8 @@
 import Image from "next/image";
 import { useMemo, useState } from "react";
 import { toast } from "sonner";
-import { MediaDragOverlay } from "@/components/editor/assets-panel/drag-overlay";
+import { MediaDragOverlay } from "@/components/editor/panels/assets/drag-overlay";
-import { DraggableItem } from "@/components/editor/draggable-item";
+import { DraggableItem } from "@/components/editor/panels/assets/draggable-item";
 import { Button } from "@/components/ui/button";
 import {
 	ContextMenu,

apps/web/src/components/editor/panels/assets/views/settings.tsx

@@ -2,7 +2,7 @@
 
 import Image from "next/image";
 import { memo, useCallback, useMemo } from "react";
-import { PanelBaseView as BaseView } from "@/components/editor/panel-base-view";
+import { PanelBaseView as BaseView } from "@/components/editor/panels/panel-base-view";
 import {
 	Select,
 	SelectContent,
@@ -29,7 +29,7 @@ import {
 	PropertyItem,
 	PropertyItemLabel,
 	PropertyItemValue,
-} from "../../properties-panel/property-item";
+} from "@/components/editor/panels/properties/property-item";
 import { HugeiconsIcon } from "@hugeicons/react";
 import { DropperIcon } from "@hugeicons/core-free-icons";
 

apps/web/src/components/editor/panels/assets/views/stickers.tsx

@@ -4,8 +4,8 @@ import Image from "next/image";
 import type { CSSProperties } from "react";
 import { useEffect, useMemo, useState } from "react";
 import { toast } from "sonner";
-import { DraggableItem } from "@/components/editor/draggable-item";
+import { DraggableItem } from "@/components/editor/panels/assets/draggable-item";
-import { PanelBaseView as BaseView } from "@/components/editor/panel-base-view";
+import { PanelBaseView as BaseView } from "@/components/editor/panels/panel-base-view";
 import { Button } from "@/components/ui/button";
 import { InputWithBack } from "@/components/ui/input-with-back";
 import { ScrollArea } from "@/components/ui/scroll-area";

apps/web/src/components/editor/panels/assets/views/text.tsx

@@ -1,5 +1,5 @@
-import { DraggableItem } from "@/components/editor/draggable-item";
+import { DraggableItem } from "@/components/editor/panels/assets/draggable-item";
-import { PanelBaseView as BaseView } from "@/components/editor/panel-base-view";
+import { PanelBaseView as BaseView } from "@/components/editor/panels/panel-base-view";
 import { useEditor } from "@/hooks/use-editor";
 import { DEFAULT_TEXT_ELEMENT } from "@/constants/text-constants";
 import { buildTextElement } from "@/lib/timeline/element-utils";

apps/web/src/components/editor/panels/properties/index.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { ScrollArea } from "../../ui/scroll-area";
+import { ScrollArea } from "@/components/ui/scroll-area";
 import { AudioProperties } from "./audio-properties";
 import { VideoProperties } from "./video-properties";
 import { TextProperties } from "./text-properties";

apps/web/src/components/editor/panels/properties/text-properties.tsx

@@ -6,7 +6,7 @@ import { Slider } from "@/components/ui/slider";
 import { Input } from "@/components/ui/input";
 import { Button } from "@/components/ui/button";
 import { useState, useRef } from "react";
-import { PanelBaseView } from "@/components/editor/panel-base-view";
+import { PanelBaseView } from "@/components/editor/panels/panel-base-view";
 import {
 	TEXT_PROPERTIES_TABS,
 	isTextPropertiesTab,

apps/web/src/components/editor/timeline/timeline-toolbar.tsx

@@ -16,7 +16,7 @@ import {
 import { Slider } from "@/components/ui/slider";
 import { formatTimeCode } from "@/lib/time";
 import { TIMELINE_CONSTANTS } from "@/constants/timeline-constants";
-import { EditableTimecode } from "@/components/editor/editable-timecode";
+import { EditableTimecode } from "@/components/editable-timecode";
 import { ScenesView } from "../scenes-view";
 import { type TAction, invokeAction } from "@/lib/actions";
 import { cn } from "@/utils/ui";