From e38901fd6616556d0ea1fd3287d0c1e75c3582d2 Mon Sep 17 00:00:00 2001 From: Maze Winther Date: Tue, 27 Jan 2026 17:26:53 +0100 Subject: [PATCH] refactor components structure --- apps/web/src/app/editor/[project_id]/page.tsx | 6 +++--- .../{editor => }/editable-timecode.tsx | 0 .../src/components/editor/export-button.tsx | 18 +++++++++++------- apps/web/src/components/editor/onboarding.tsx | 8 +++++--- .../assets}/drag-overlay.tsx | 0 .../{ => panels/assets}/draggable-item.tsx | 0 .../{assets-panel => panels/assets}/index.tsx | 5 +---- .../{assets-panel => panels/assets}/tabbar.tsx | 2 +- .../assets}/views/captions.tsx | 4 ++-- .../assets}/views/media.tsx | 4 ++-- .../assets}/views/settings.tsx | 4 ++-- .../assets}/views/sounds.tsx | 0 .../assets}/views/stickers.tsx | 4 ++-- .../assets}/views/text.tsx | 4 ++-- .../editor/{ => panels}/panel-base-view.tsx | 0 .../preview/index.tsx} | 0 .../properties}/audio-properties.tsx | 0 .../properties}/index.tsx | 2 +- .../properties}/property-item.tsx | 0 .../properties}/text-properties.tsx | 2 +- .../properties}/video-properties.tsx | 0 .../editor/timeline/timeline-toolbar.tsx | 2 +- 22 files changed, 34 insertions(+), 31 deletions(-) rename apps/web/src/components/{editor => }/editable-timecode.tsx (100%) rename apps/web/src/components/editor/{assets-panel => panels/assets}/drag-overlay.tsx (100%) rename apps/web/src/components/editor/{ => panels/assets}/draggable-item.tsx (100%) rename apps/web/src/components/editor/{assets-panel => panels/assets}/index.tsx (93%) rename apps/web/src/components/editor/{assets-panel => panels/assets}/tabbar.tsx (98%) rename apps/web/src/components/editor/{assets-panel => panels/assets}/views/captions.tsx (97%) rename apps/web/src/components/editor/{assets-panel => panels/assets}/views/media.tsx (99%) rename apps/web/src/components/editor/{assets-panel => panels/assets}/views/settings.tsx (99%) rename apps/web/src/components/editor/{assets-panel => panels/assets}/views/sounds.tsx (100%) rename apps/web/src/components/editor/{assets-panel => panels/assets}/views/stickers.tsx (99%) rename apps/web/src/components/editor/{assets-panel => panels/assets}/views/text.tsx (91%) rename apps/web/src/components/editor/{ => panels}/panel-base-view.tsx (100%) rename apps/web/src/components/editor/{preview-panel.tsx => panels/preview/index.tsx} (100%) rename apps/web/src/components/editor/{properties-panel => panels/properties}/audio-properties.tsx (100%) rename apps/web/src/components/editor/{properties-panel => panels/properties}/index.tsx (97%) rename apps/web/src/components/editor/{properties-panel => panels/properties}/property-item.tsx (100%) rename apps/web/src/components/editor/{properties-panel => panels/properties}/text-properties.tsx (99%) rename apps/web/src/components/editor/{properties-panel => panels/properties}/video-properties.tsx (100%) diff --git a/apps/web/src/app/editor/[project_id]/page.tsx b/apps/web/src/app/editor/[project_id]/page.tsx index dbc10e8d..e652e928 100644 --- a/apps/web/src/app/editor/[project_id]/page.tsx +++ b/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 { PropertiesPanel } from "@/components/editor/properties-panel"; +import { AssetsPanel } from "@/components/editor/panels/assets"; +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"; diff --git a/apps/web/src/components/editor/editable-timecode.tsx b/apps/web/src/components/editable-timecode.tsx similarity index 100% rename from apps/web/src/components/editor/editable-timecode.tsx rename to apps/web/src/components/editable-timecode.tsx diff --git a/apps/web/src/components/editor/export-button.tsx b/apps/web/src/components/editor/export-button.tsx index 141bebc5..008a7bf5 100644 --- a/apps/web/src/components/editor/export-button.tsx +++ b/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 { Button } from "../ui/button"; -import { Label } from "../ui/label"; -import { RadioGroup, RadioGroupItem } from "../ui/radio-group"; -import { Progress } from "../ui/progress"; -import { Checkbox } from "../ui/checkbox"; +import { + Popover, + PopoverContent, + PopoverTrigger, +} from "@/components/ui/popover"; +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"; diff --git a/apps/web/src/components/editor/onboarding.tsx b/apps/web/src/components/editor/onboarding.tsx index 7220f84c..c60c2de5 100644 --- a/apps/web/src/components/editor/onboarding.tsx +++ b/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 ( - + {getStepTitle()} - {renderStepContent()} + + {renderStepContent()} + ); diff --git a/apps/web/src/components/editor/assets-panel/drag-overlay.tsx b/apps/web/src/components/editor/panels/assets/drag-overlay.tsx similarity index 100% rename from apps/web/src/components/editor/assets-panel/drag-overlay.tsx rename to apps/web/src/components/editor/panels/assets/drag-overlay.tsx diff --git a/apps/web/src/components/editor/draggable-item.tsx b/apps/web/src/components/editor/panels/assets/draggable-item.tsx similarity index 100% rename from apps/web/src/components/editor/draggable-item.tsx rename to apps/web/src/components/editor/panels/assets/draggable-item.tsx diff --git a/apps/web/src/components/editor/assets-panel/index.tsx b/apps/web/src/components/editor/panels/assets/index.tsx similarity index 93% rename from apps/web/src/components/editor/assets-panel/index.tsx rename to apps/web/src/components/editor/panels/assets/index.tsx index d4bb7d23..9161cb1d 100644 --- a/apps/web/src/components/editor/assets-panel/index.tsx +++ b/apps/web/src/components/editor/panels/assets/index.tsx @@ -1,10 +1,7 @@ "use client"; import { Separator } from "@/components/ui/separator"; -import { - type Tab, - useAssetsPanelStore, -} from "../../../stores/assets-panel-store"; +import { type Tab, useAssetsPanelStore } from "@/stores/assets-panel-store"; import { TabBar } from "./tabbar"; import { Captions } from "./views/captions"; import { MediaView } from "./views/media"; diff --git a/apps/web/src/components/editor/assets-panel/tabbar.tsx b/apps/web/src/components/editor/panels/assets/tabbar.tsx similarity index 98% rename from apps/web/src/components/editor/assets-panel/tabbar.tsx rename to apps/web/src/components/editor/panels/assets/tabbar.tsx index 93e64569..2c950fdc 100644 --- a/apps/web/src/components/editor/assets-panel/tabbar.tsx +++ b/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(); diff --git a/apps/web/src/components/editor/assets-panel/views/captions.tsx b/apps/web/src/components/editor/panels/assets/views/captions.tsx similarity index 97% rename from apps/web/src/components/editor/assets-panel/views/captions.tsx rename to apps/web/src/components/editor/panels/assets/views/captions.tsx index c8ed8d9c..306bad2a 100644 --- a/apps/web/src/components/editor/assets-panel/views/captions.tsx +++ b/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 { PanelBaseView as BaseView } from "@/components/editor/panel-base-view"; +import { PropertyGroup } from "@/components/editor/panels/properties/property-item"; +import { PanelBaseView as BaseView } from "@/components/editor/panels/panel-base-view"; import { Select, SelectContent, diff --git a/apps/web/src/components/editor/assets-panel/views/media.tsx b/apps/web/src/components/editor/panels/assets/views/media.tsx similarity index 99% rename from apps/web/src/components/editor/assets-panel/views/media.tsx rename to apps/web/src/components/editor/panels/assets/views/media.tsx index 15dc778c..b8c9e548 100644 --- a/apps/web/src/components/editor/assets-panel/views/media.tsx +++ b/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 { DraggableItem } from "@/components/editor/draggable-item"; +import { MediaDragOverlay } from "@/components/editor/panels/assets/drag-overlay"; +import { DraggableItem } from "@/components/editor/panels/assets/draggable-item"; import { Button } from "@/components/ui/button"; import { ContextMenu, diff --git a/apps/web/src/components/editor/assets-panel/views/settings.tsx b/apps/web/src/components/editor/panels/assets/views/settings.tsx similarity index 99% rename from apps/web/src/components/editor/assets-panel/views/settings.tsx rename to apps/web/src/components/editor/panels/assets/views/settings.tsx index ff72b0e6..b8c54510 100644 --- a/apps/web/src/components/editor/assets-panel/views/settings.tsx +++ b/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"; diff --git a/apps/web/src/components/editor/assets-panel/views/sounds.tsx b/apps/web/src/components/editor/panels/assets/views/sounds.tsx similarity index 100% rename from apps/web/src/components/editor/assets-panel/views/sounds.tsx rename to apps/web/src/components/editor/panels/assets/views/sounds.tsx diff --git a/apps/web/src/components/editor/assets-panel/views/stickers.tsx b/apps/web/src/components/editor/panels/assets/views/stickers.tsx similarity index 99% rename from apps/web/src/components/editor/assets-panel/views/stickers.tsx rename to apps/web/src/components/editor/panels/assets/views/stickers.tsx index d630a78f..6b48e775 100644 --- a/apps/web/src/components/editor/assets-panel/views/stickers.tsx +++ b/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 { PanelBaseView as BaseView } from "@/components/editor/panel-base-view"; +import { DraggableItem } from "@/components/editor/panels/assets/draggable-item"; +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"; diff --git a/apps/web/src/components/editor/assets-panel/views/text.tsx b/apps/web/src/components/editor/panels/assets/views/text.tsx similarity index 91% rename from apps/web/src/components/editor/assets-panel/views/text.tsx rename to apps/web/src/components/editor/panels/assets/views/text.tsx index d65b63dd..6ccf5d98 100644 --- a/apps/web/src/components/editor/assets-panel/views/text.tsx +++ b/apps/web/src/components/editor/panels/assets/views/text.tsx @@ -1,5 +1,5 @@ -import { DraggableItem } from "@/components/editor/draggable-item"; -import { PanelBaseView as BaseView } from "@/components/editor/panel-base-view"; +import { DraggableItem } from "@/components/editor/panels/assets/draggable-item"; +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"; diff --git a/apps/web/src/components/editor/panel-base-view.tsx b/apps/web/src/components/editor/panels/panel-base-view.tsx similarity index 100% rename from apps/web/src/components/editor/panel-base-view.tsx rename to apps/web/src/components/editor/panels/panel-base-view.tsx diff --git a/apps/web/src/components/editor/preview-panel.tsx b/apps/web/src/components/editor/panels/preview/index.tsx similarity index 100% rename from apps/web/src/components/editor/preview-panel.tsx rename to apps/web/src/components/editor/panels/preview/index.tsx diff --git a/apps/web/src/components/editor/properties-panel/audio-properties.tsx b/apps/web/src/components/editor/panels/properties/audio-properties.tsx similarity index 100% rename from apps/web/src/components/editor/properties-panel/audio-properties.tsx rename to apps/web/src/components/editor/panels/properties/audio-properties.tsx diff --git a/apps/web/src/components/editor/properties-panel/index.tsx b/apps/web/src/components/editor/panels/properties/index.tsx similarity index 97% rename from apps/web/src/components/editor/properties-panel/index.tsx rename to apps/web/src/components/editor/panels/properties/index.tsx index 74a2cd14..3a552b93 100644 --- a/apps/web/src/components/editor/properties-panel/index.tsx +++ b/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"; diff --git a/apps/web/src/components/editor/properties-panel/property-item.tsx b/apps/web/src/components/editor/panels/properties/property-item.tsx similarity index 100% rename from apps/web/src/components/editor/properties-panel/property-item.tsx rename to apps/web/src/components/editor/panels/properties/property-item.tsx diff --git a/apps/web/src/components/editor/properties-panel/text-properties.tsx b/apps/web/src/components/editor/panels/properties/text-properties.tsx similarity index 99% rename from apps/web/src/components/editor/properties-panel/text-properties.tsx rename to apps/web/src/components/editor/panels/properties/text-properties.tsx index a5b39cd5..f8c9bf87 100644 --- a/apps/web/src/components/editor/properties-panel/text-properties.tsx +++ b/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, diff --git a/apps/web/src/components/editor/properties-panel/video-properties.tsx b/apps/web/src/components/editor/panels/properties/video-properties.tsx similarity index 100% rename from apps/web/src/components/editor/properties-panel/video-properties.tsx rename to apps/web/src/components/editor/panels/properties/video-properties.tsx diff --git a/apps/web/src/components/editor/timeline/timeline-toolbar.tsx b/apps/web/src/components/editor/timeline/timeline-toolbar.tsx index 60ac9520..822bb438 100644 --- a/apps/web/src/components/editor/timeline/timeline-toolbar.tsx +++ b/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";