From be1ae20d9089e81cb84a8294be76fe680a24b60f Mon Sep 17 00:00:00 2001
From: Hyteq <DerpsDer.es@gmail.com>
Date: Sun, 20 Jul 2025 11:00:22 +0300
Subject: format

---
 .../editor/properties-panel/audio-properties.tsx   |  10 +-
 .../components/editor/properties-panel/index.tsx   | 166 ++++++++++-----------
 .../editor/properties-panel/media-properties.tsx   |  10 +-
 .../editor/properties-panel/property-item.tsx      |  94 ++++++------
 .../editor/properties-panel/text-properties.tsx    | 152 +++++++++----------
 5 files changed, 216 insertions(+), 216 deletions(-)

(limited to 'apps/web/src/components/editor/properties-panel')

diff --git a/apps/web/src/components/editor/properties-panel/audio-properties.tsx b/apps/web/src/components/editor/properties-panel/audio-properties.tsx
index 384f0c5e..5e2a781f 100644
--- a/apps/web/src/components/editor/properties-panel/audio-properties.tsx
+++ b/apps/web/src/components/editor/properties-panel/audio-properties.tsx
@@ -1,5 +1,5 @@
-import { MediaElement } from "@/types/timeline";
-
-export function AudioProperties({ element }: { element: MediaElement }) {
-  return <div className="space-y-4 p-5">Audio properties</div>;
-}
\ No newline at end of file
+import { MediaElement } from "@/types/timeline";
+
+export function AudioProperties({ element }: { element: MediaElement }) {
+	return <div className="space-y-4 p-5">Audio properties</div>;
+}
diff --git a/apps/web/src/components/editor/properties-panel/index.tsx b/apps/web/src/components/editor/properties-panel/index.tsx
index 9e28850f..7d2845be 100644
--- a/apps/web/src/components/editor/properties-panel/index.tsx
+++ b/apps/web/src/components/editor/properties-panel/index.tsx
@@ -10,100 +10,100 @@ import { AudioProperties } from "./audio-properties";
 import { MediaProperties } from "./media-properties";
 import { TextProperties } from "./text-properties";
 import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
+	Select,
+	SelectContent,
+	SelectItem,
+	SelectTrigger,
+	SelectValue,
 } from "../../ui/select";
 import { FPS_PRESETS } from "@/constants/timeline-constants";
 
 export function PropertiesPanel() {
-  const { activeProject, updateProjectFps } = useProjectStore();
-  const { getDisplayName, canvasSize } = useAspectRatio();
-  const { selectedElements, tracks } = useTimelineStore();
-  const { mediaItems } = useMediaStore();
+	const { activeProject, updateProjectFps } = useProjectStore();
+	const { getDisplayName, canvasSize } = useAspectRatio();
+	const { selectedElements, tracks } = useTimelineStore();
+	const { mediaItems } = useMediaStore();
 
-  const handleFpsChange = (value: string) => {
-    const fps = parseFloat(value);
-    if (!isNaN(fps) && fps > 0) {
-      updateProjectFps(fps);
-    }
-  };
+	const handleFpsChange = (value: string) => {
+		const fps = parseFloat(value);
+		if (!isNaN(fps) && fps > 0) {
+			updateProjectFps(fps);
+		}
+	};
 
-  const emptyView = (
-    <div className="space-y-4 p-5">
-      {/* Media Properties */}
-      <div className="flex flex-col gap-3">
-        <PropertyItem label="Name:" value={activeProject?.name || ""} />
-        <PropertyItem label="Aspect ratio:" value={getDisplayName()} />
-        <PropertyItem
-          label="Resolution:"
-          value={`${canvasSize.width} × ${canvasSize.height}`}
-        />
-        <div className="flex justify-between items-center">
-          <Label className="text-xs text-muted-foreground">Frame rate:</Label>
-          <Select
-            value={(activeProject?.fps || 30).toString()}
-            onValueChange={handleFpsChange}
-          >
-            <SelectTrigger className="w-32 h-6 text-xs">
-              <SelectValue />
-            </SelectTrigger>
-            <SelectContent>
-              {FPS_PRESETS.map(({ value, label }) => (
-                <SelectItem key={value} value={value} className="text-xs">
-                  {label}
-                </SelectItem>
-              ))}
-            </SelectContent>
-          </Select>
-        </div>
-      </div>
-    </div>
-  );
+	const emptyView = (
+		<div className="space-y-4 p-5">
+			{/* Media Properties */}
+			<div className="flex flex-col gap-3">
+				<PropertyItem label="Name:" value={activeProject?.name || ""} />
+				<PropertyItem label="Aspect ratio:" value={getDisplayName()} />
+				<PropertyItem
+					label="Resolution:"
+					value={`${canvasSize.width} × ${canvasSize.height}`}
+				/>
+				<div className="flex justify-between items-center">
+					<Label className="text-xs text-muted-foreground">Frame rate:</Label>
+					<Select
+						value={(activeProject?.fps || 30).toString()}
+						onValueChange={handleFpsChange}
+					>
+						<SelectTrigger className="w-32 h-6 text-xs">
+							<SelectValue />
+						</SelectTrigger>
+						<SelectContent>
+							{FPS_PRESETS.map(({ value, label }) => (
+								<SelectItem key={value} value={value} className="text-xs">
+									{label}
+								</SelectItem>
+							))}
+						</SelectContent>
+					</Select>
+				</div>
+			</div>
+		</div>
+	);
 
-  return (
-    <ScrollArea className="h-full bg-panel rounded-sm">
-      {selectedElements.length > 0
-        ? selectedElements.map(({ trackId, elementId }) => {
-            const track = tracks.find((t) => t.id === trackId);
-            const element = track?.elements.find((e) => e.id === elementId);
+	return (
+		<ScrollArea className="h-full bg-panel rounded-sm">
+			{selectedElements.length > 0
+				? selectedElements.map(({ trackId, elementId }) => {
+						const track = tracks.find((t) => t.id === trackId);
+						const element = track?.elements.find((e) => e.id === elementId);
 
-            if (element?.type === "text") {
-              return (
-                <div key={elementId}>
-                  <TextProperties element={element} trackId={trackId} />
-                </div>
-              );
-            }
-            if (element?.type === "media") {
-              const mediaItem = mediaItems.find(
-                (item) => item.id === element.mediaId
-              );
+						if (element?.type === "text") {
+							return (
+								<div key={elementId}>
+									<TextProperties element={element} trackId={trackId} />
+								</div>
+							);
+						}
+						if (element?.type === "media") {
+							const mediaItem = mediaItems.find(
+								(item) => item.id === element.mediaId,
+							);
 
-              if (mediaItem?.type === "audio") {
-                return <AudioProperties element={element} />;
-              }
+							if (mediaItem?.type === "audio") {
+								return <AudioProperties element={element} />;
+							}
 
-              return (
-                <div key={elementId}>
-                  <MediaProperties element={element} />
-                </div>
-              );
-            }
-            return null;
-          })
-        : emptyView}
-    </ScrollArea>
-  );
+							return (
+								<div key={elementId}>
+									<MediaProperties element={element} />
+								</div>
+							);
+						}
+						return null;
+					})
+				: emptyView}
+		</ScrollArea>
+	);
 }
 
 function PropertyItem({ label, value }: { label: string; value: string }) {
-  return (
-    <div className="flex justify-between">
-      <Label className="text-xs text-muted-foreground">{label}</Label>
-      <span className="text-xs text-right">{value}</span>
-    </div>
-  );
+	return (
+		<div className="flex justify-between">
+			<Label className="text-xs text-muted-foreground">{label}</Label>
+			<span className="text-xs text-right">{value}</span>
+		</div>
+	);
 }
diff --git a/apps/web/src/components/editor/properties-panel/media-properties.tsx b/apps/web/src/components/editor/properties-panel/media-properties.tsx
index c2c514cf..fe2d448e 100644
--- a/apps/web/src/components/editor/properties-panel/media-properties.tsx
+++ b/apps/web/src/components/editor/properties-panel/media-properties.tsx
@@ -1,5 +1,5 @@
-import { MediaElement } from "@/types/timeline";
-
-export function MediaProperties({ element }: { element: MediaElement }) {
-  return <div className="space-y-4 p-5">Media properties</div>;
-}
+import { MediaElement } from "@/types/timeline";
+
+export function MediaProperties({ element }: { element: MediaElement }) {
+	return <div className="space-y-4 p-5">Media properties</div>;
+}
diff --git a/apps/web/src/components/editor/properties-panel/property-item.tsx b/apps/web/src/components/editor/properties-panel/property-item.tsx
index beb8c799..30f1b40c 100644
--- a/apps/web/src/components/editor/properties-panel/property-item.tsx
+++ b/apps/web/src/components/editor/properties-panel/property-item.tsx
@@ -1,47 +1,47 @@
-import { cn } from "@/lib/utils";
-
-interface PropertyItemProps {
-  direction?: "row" | "column";
-  children: React.ReactNode;
-  className?: string;
-}
-
-export function PropertyItem({
-  direction = "row",
-  children,
-  className,
-}: PropertyItemProps) {
-  return (
-    <div
-      className={cn(
-        "flex gap-2",
-        direction === "row"
-          ? "items-center justify-between gap-6"
-          : "flex-col gap-1",
-        className
-      )}
-    >
-      {children}
-    </div>
-  );
-}
-
-export function PropertyItemLabel({
-  children,
-  className,
-}: {
-  children: React.ReactNode;
-  className?: string;
-}) {
-  return <label className={cn("text-xs", className)}>{children}</label>;
-}
-
-export function PropertyItemValue({
-  children,
-  className,
-}: {
-  children: React.ReactNode;
-  className?: string;
-}) {
-  return <div className={cn("flex-1", className)}>{children}</div>;
-}
+import { cn } from "@/lib/utils";
+
+interface PropertyItemProps {
+	direction?: "row" | "column";
+	children: React.ReactNode;
+	className?: string;
+}
+
+export function PropertyItem({
+	direction = "row",
+	children,
+	className,
+}: PropertyItemProps) {
+	return (
+		<div
+			className={cn(
+				"flex gap-2",
+				direction === "row"
+					? "items-center justify-between gap-6"
+					: "flex-col gap-1",
+				className,
+			)}
+		>
+			{children}
+		</div>
+	);
+}
+
+export function PropertyItemLabel({
+	children,
+	className,
+}: {
+	children: React.ReactNode;
+	className?: string;
+}) {
+	return <label className={cn("text-xs", className)}>{children}</label>;
+}
+
+export function PropertyItemValue({
+	children,
+	className,
+}: {
+	children: React.ReactNode;
+	className?: string;
+}) {
+	return <div className={cn("flex-1", className)}>{children}</div>;
+}
diff --git a/apps/web/src/components/editor/properties-panel/text-properties.tsx b/apps/web/src/components/editor/properties-panel/text-properties.tsx
index e13dabc8..4d58752b 100644
--- a/apps/web/src/components/editor/properties-panel/text-properties.tsx
+++ b/apps/web/src/components/editor/properties-panel/text-properties.tsx
@@ -1,76 +1,76 @@
-import { Textarea } from "@/components/ui/textarea";
-import { FontPicker } from "@/components/ui/font-picker";
-import { FontFamily } from "@/constants/font-constants";
-import { TextElement } from "@/types/timeline";
-import { useTimelineStore } from "@/stores/timeline-store";
-import { Slider } from "@/components/ui/slider";
-import { Input } from "@/components/ui/input";
-import {
-  PropertyItem,
-  PropertyItemLabel,
-  PropertyItemValue,
-} from "./property-item";
-
-export function TextProperties({
-  element,
-  trackId,
-}: {
-  element: TextElement;
-  trackId: string;
-}) {
-  const { updateTextElement } = useTimelineStore();
-
-  return (
-    <div className="space-y-6 p-5">
-      <Textarea
-        placeholder="Name"
-        defaultValue={element.content}
-        className="min-h-[4.5rem] resize-none bg-background/50"
-        onChange={(e) =>
-          updateTextElement(trackId, element.id, { content: e.target.value })
-        }
-      />
-      <PropertyItem direction="row">
-        <PropertyItemLabel>Font</PropertyItemLabel>
-        <PropertyItemValue>
-          <FontPicker
-            defaultValue={element.fontFamily}
-            onValueChange={(value: FontFamily) =>
-              updateTextElement(trackId, element.id, { fontFamily: value })
-            }
-          />
-        </PropertyItemValue>
-      </PropertyItem>
-      <PropertyItem direction="column">
-        <PropertyItemLabel>Font size</PropertyItemLabel>
-        <PropertyItemValue>
-          <div className="flex items-center gap-2">
-            <Slider
-              defaultValue={[element.fontSize]}
-              min={8}
-              max={300}
-              step={1}
-              onValueChange={([value]) =>
-                updateTextElement(trackId, element.id, { fontSize: value })
-              }
-              className="w-full"
-            />
-            <Input
-              type="number"
-              value={element.fontSize}
-              onChange={(e) =>
-                updateTextElement(trackId, element.id, {
-                  fontSize: parseInt(e.target.value),
-                })
-              }
-              className="w-12 !text-xs h-7 rounded-sm text-center
-               [appearance:textfield]
-               [&::-webkit-outer-spin-button]:appearance-none
-               [&::-webkit-inner-spin-button]:appearance-none"
-            />
-          </div>
-        </PropertyItemValue>
-      </PropertyItem>
-    </div>
-  );
-}
+import { Textarea } from "@/components/ui/textarea";
+import { FontPicker } from "@/components/ui/font-picker";
+import { FontFamily } from "@/constants/font-constants";
+import { TextElement } from "@/types/timeline";
+import { useTimelineStore } from "@/stores/timeline-store";
+import { Slider } from "@/components/ui/slider";
+import { Input } from "@/components/ui/input";
+import {
+	PropertyItem,
+	PropertyItemLabel,
+	PropertyItemValue,
+} from "./property-item";
+
+export function TextProperties({
+	element,
+	trackId,
+}: {
+	element: TextElement;
+	trackId: string;
+}) {
+	const { updateTextElement } = useTimelineStore();
+
+	return (
+		<div className="space-y-6 p-5">
+			<Textarea
+				placeholder="Name"
+				defaultValue={element.content}
+				className="min-h-[4.5rem] resize-none bg-background/50"
+				onChange={(e) =>
+					updateTextElement(trackId, element.id, { content: e.target.value })
+				}
+			/>
+			<PropertyItem direction="row">
+				<PropertyItemLabel>Font</PropertyItemLabel>
+				<PropertyItemValue>
+					<FontPicker
+						defaultValue={element.fontFamily}
+						onValueChange={(value: FontFamily) =>
+							updateTextElement(trackId, element.id, { fontFamily: value })
+						}
+					/>
+				</PropertyItemValue>
+			</PropertyItem>
+			<PropertyItem direction="column">
+				<PropertyItemLabel>Font size</PropertyItemLabel>
+				<PropertyItemValue>
+					<div className="flex items-center gap-2">
+						<Slider
+							defaultValue={[element.fontSize]}
+							min={8}
+							max={300}
+							step={1}
+							onValueChange={([value]) =>
+								updateTextElement(trackId, element.id, { fontSize: value })
+							}
+							className="w-full"
+						/>
+						<Input
+							type="number"
+							value={element.fontSize}
+							onChange={(e) =>
+								updateTextElement(trackId, element.id, {
+									fontSize: parseInt(e.target.value),
+								})
+							}
+							className="w-12 !text-xs h-7 rounded-sm text-center
+               [appearance:textfield]
+               [&::-webkit-outer-spin-button]:appearance-none
+               [&::-webkit-inner-spin-button]:appearance-none"
+						/>
+					</div>
+				</PropertyItemValue>
+			</PropertyItem>
+		</div>
+	);
+}
-- 
cgit v1.3.1