feat: masks, properties refactor, shaders, storage migrations, and more

1 files changed, 57 insertions, 0 deletions

diff --git a/apps/web/src/components/editor/panels/assets/views/base-panel.tsx b/apps/web/src/components/editor/panels/assets/views/base-panel.tsx
new file mode 100644
index 00000000..0ece9b19
--- /dev/null
+++ b/apps/web/src/components/editor/panels/assets/views/base-panel.tsx
@@ -0,0 +1,57 @@
+import { cn } from "@/utils/ui";
+
+interface PanelViewProps extends React.HTMLAttributes<HTMLDivElement> {
+	title?: string;
+	actions?: React.ReactNode;
+	children: React.ReactNode;
+	contentClassName?: string;
+	scrollClassName?: string;
+	hideHeader?: boolean;
+	ref?: React.Ref<HTMLDivElement>;
+	onScroll?: React.UIEventHandler<HTMLDivElement>;
+	scrollRef?: React.Ref<HTMLDivElement>;
+}
+
+export function PanelView({
+	title,
+	actions,
+	children,
+	className,
+	contentClassName,
+	scrollClassName,
+	hideHeader = false,
+	ref,
+	onScroll,
+	scrollRef,
+	...rest
+}: PanelViewProps) {
+	return (
+		<div
+			className={cn("relative flex h-full flex-col", className)}
+			ref={ref}
+			{...rest}
+		>
+			{!hideHeader && (
+				<div className="bg-background h-11 shrink-0 pl-3 pr-2 flex items-center justify-between border-b">
+					{title && (
+						<span className="text-muted-foreground text-sm">{title}</span>
+					)}
+					{actions}
+				</div>
+			)}
+			<div
+				className={cn(
+					"scrollbar-hidden size-full overflow-y-auto",
+					hideHeader ? "pt-4" : "pt-2",
+					scrollClassName,
+				)}
+				ref={scrollRef}
+				onScroll={onScroll}
+			>
+				<div className={cn("w-full flex-1 px-2 pt-0", contentClassName)}>
+					{children}
+				</div>
+			</div>
+		</div>
+	);
+}