diff --git a/src/components/image-editor/ImageCanvasSidebarView.tsx b/src/components/image-editor/ImageCanvasSidebarView.tsx
new file mode 100644
index 00000000..a17a55ea
--- /dev/null
+++ b/src/components/image-editor/ImageCanvasSidebarView.tsx
@@ -0,0 +1,828 @@
+import {
+ Check,
+ CheckSquare,
+ ChevronDown,
+ ChevronRight,
+ Folder,
+ FolderPlus,
+ ImagePlus,
+ Pencil,
+ PencilLine,
+ Square,
+ Trash2,
+ X,
+} from 'lucide-react';
+import type {
+ Dispatch,
+ PointerEvent as ReactPointerEvent,
+ RefObject,
+ SetStateAction,
+} from 'react';
+
+import { PlatformActionButton } from '../common/PlatformActionButton';
+import { PlatformBatchActionToolbar } from '../common/PlatformBatchActionToolbar';
+import { PlatformTextField } from '../common/PlatformTextField';
+import {
+ EditorIconButton,
+ SidebarMediaItem,
+} from './ImageCanvasEditorPrimitives';
+import {
+ ASSET_DRAG_MIME_TYPE,
+ clamp,
+ getDraggedAssetId,
+ hasDataTransferType,
+} from './ImageCanvasEditorModel';
+import type {
+ AssetMarqueeState,
+ AssetPointerDragState,
+ CanvasContextMenuState,
+ CanvasLayer,
+ EditorAsset,
+ EditorAssetFolder,
+ ImageContextMenuState,
+ SidebarPanel,
+ UploadTarget,
+} from './ImageCanvasEditorTypes';
+
+export type GroupedEditorAssetFolder = EditorAssetFolder & {
+ assets: EditorAsset[];
+};
+
+type UploadFilesOptions = {
+ folderId?: string;
+ canvasPoint?: { x: number; y: number };
+ addToCanvas?: boolean;
+};
+
+type ImageCanvasSidebarViewProps = {
+ activeSidebarPanel: SidebarPanel | null;
+ assetListRef: RefObject
;
+ uploadInputRef: RefObject;
+ assetPointerDragRef: { current: AssetPointerDragState | null };
+ suppressAssetClickRef: { current: boolean };
+ assets: EditorAsset[];
+ groupedAssets: GroupedEditorAssetFolder[];
+ assetFolders: EditorAssetFolder[];
+ layers: CanvasLayer[];
+ selectedLayerId: string | null;
+ selectedLayerIds: string[];
+ isAssetSelectionMode: boolean;
+ selectedAssetIds: Set;
+ assetMoveDropFolderId: string | null;
+ pinnedAssetMoveFolderId: string | null;
+ creatingFolder: boolean;
+ newFolderName: string;
+ renamingFolder: { folderId: string; value: string } | null;
+ renamingAsset: { assetId: string; value: string } | null;
+ allSelectableAssetsSelected: boolean;
+ assetMarquee: AssetMarqueeState | null;
+ setIsAssetSelectionMode: Dispatch>;
+ setCreatingFolder: Dispatch>;
+ setNewFolderName: Dispatch>;
+ setRenamingFolder: Dispatch<
+ SetStateAction<{ folderId: string; value: string } | null>
+ >;
+ setRenamingAsset: Dispatch<
+ SetStateAction<{ assetId: string; value: string } | null>
+ >;
+ setActiveUploadFolderId: Dispatch>;
+ setUploadTarget: Dispatch>;
+ setUploadDropTarget: Dispatch>;
+ setAssetPointerDrag: Dispatch>;
+ setSelectedAssetIds: Dispatch>>;
+ setImageContextMenu: Dispatch>;
+ setContextMenu: Dispatch>;
+ onAssetMarqueePointerDown: (
+ event: ReactPointerEvent,
+ ) => void;
+ onAssetMarqueePointerMove: (
+ event: ReactPointerEvent,
+ ) => void;
+ onAssetMarqueePointerUp: (
+ event: ReactPointerEvent,
+ ) => void;
+ updateAssetMoveDropFolder: (folderId: string | null) => void;
+ addUploadedFiles: (files: FileList | File[], options?: UploadFilesOptions) => void;
+ moveAssetToFolder: (assetId: string, folderId: string) => void;
+ commitNewAssetFolder: () => void | Promise;
+ toggleAssetFolder: (folderId: string) => void;
+ startRenamingFolder: (folder: EditorAssetFolder) => void;
+ commitFolderRename: (folder: EditorAssetFolder) => void;
+ deleteAssetFolder: (folder: EditorAssetFolder) => void;
+ startRenamingAsset: (asset: EditorAsset) => void;
+ commitAssetRename: (asset: EditorAsset) => void;
+ deleteUploadedAsset: (asset: EditorAsset) => void;
+ toggleAssetSelected: (assetId: string) => void;
+ addAssetLayer: (asset: EditorAsset) => void;
+ toggleAllAssetsSelected: () => void;
+ deleteSelectedAssets: () => void;
+ closeAssetSelectionMode: () => void;
+ groupSelectedLayers: () => void;
+ selectSingleLayer: (layerId: string | null) => void;
+ resolveContextMenuPosition: (
+ clientX: number,
+ clientY: number,
+ menuKind: 'blank' | 'layer',
+ ) => Omit;
+ getCanvasPointFromClient: (
+ clientX: number,
+ clientY: number,
+ ) => { x: number; y: number };
+};
+
+export function ImageCanvasSidebarView({
+ activeSidebarPanel,
+ assetListRef,
+ uploadInputRef,
+ assetPointerDragRef,
+ suppressAssetClickRef,
+ assets,
+ groupedAssets,
+ assetFolders,
+ layers,
+ selectedLayerId,
+ selectedLayerIds,
+ isAssetSelectionMode,
+ selectedAssetIds,
+ assetMoveDropFolderId,
+ pinnedAssetMoveFolderId,
+ creatingFolder,
+ newFolderName,
+ renamingFolder,
+ renamingAsset,
+ allSelectableAssetsSelected,
+ assetMarquee,
+ setIsAssetSelectionMode,
+ setCreatingFolder,
+ setNewFolderName,
+ setRenamingFolder,
+ setRenamingAsset,
+ setActiveUploadFolderId,
+ setUploadTarget,
+ setUploadDropTarget,
+ setAssetPointerDrag,
+ setSelectedAssetIds,
+ setImageContextMenu,
+ setContextMenu,
+ onAssetMarqueePointerDown,
+ onAssetMarqueePointerMove,
+ onAssetMarqueePointerUp,
+ updateAssetMoveDropFolder,
+ addUploadedFiles,
+ moveAssetToFolder,
+ commitNewAssetFolder,
+ toggleAssetFolder,
+ startRenamingFolder,
+ commitFolderRename,
+ deleteAssetFolder,
+ startRenamingAsset,
+ commitAssetRename,
+ deleteUploadedAsset,
+ toggleAssetSelected,
+ addAssetLayer,
+ toggleAllAssetsSelected,
+ deleteSelectedAssets,
+ closeAssetSelectionMode,
+ groupSelectedLayers,
+ selectSingleLayer,
+ resolveContextMenuPosition,
+ getCanvasPointFromClient,
+}: ImageCanvasSidebarViewProps) {
+ if (!activeSidebarPanel) {
+ return null;
+ }
+
+ return (
+
+ );
+}