chore: formatting

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

@@ -254,9 +254,7 @@ export function Captions() {
 											<HugeiconsIcon icon={AlertCircleIcon} size={16} />
 										</Button>
 									</TooltipTrigger>
-									<TooltipContent>
-										{diagnostic.message}
-									</TooltipContent>
+									<TooltipContent>{diagnostic.message}</TooltipContent>
 								</Tooltip>
 							))}
 						<Button

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

@@ -49,7 +49,9 @@ const BlurPreview = memo(
 			};
 
 			renderPreview();
-			return effectPreviewService.onPreviewImageReady({ callback: renderPreview });
+			return effectPreviewService.onPreviewImageReady({
+				callback: renderPreview,
+			});
 		}, [blur.value]);
 
 		return (
@@ -186,7 +188,12 @@ export function BackgroundContent() {
 
 	return (
 		<div className="flex flex-col">
-			<Section collapsible defaultOpen={true} sectionKey="background-blur" showTopBorder={false}>
+			<Section
+				collapsible
+				defaultOpen={true}
+				sectionKey="background-blur"
+				showTopBorder={false}
+			>
 				<SectionHeader>
 					<SectionTitle>Blur</SectionTitle>
 				</SectionHeader>

apps/web/src/lib/blog/query.ts

@@ -47,7 +47,12 @@ const EMPTY_AUTHORS: MarbleAuthorList = {
 };
 
 function isMarbleConfigured() {
-	return !["", "placeholder", "build-placeholder", "your_workspace_key_here"].includes(key);
+	return ![
+		"",
+		"placeholder",
+		"build-placeholder",
+		"your_workspace_key_here",
+	].includes(key);
 }
 
 async function fetchFromMarble<T>({

apps/web/src/lib/feedback/components/feedback-popover.tsx

@@ -166,18 +166,17 @@ function FeedbackPopoverContent({ onClose }: { onClose: () => void }) {
 			</Form>
 
 			{entries.length > 0 && (
-				<div className="border-t">
-					<div className="px-3 py-2">
-						<span className="text-xs font-medium text-muted-foreground">
-							Previous feedback
-						</span>
-					</div>
-					<div className="max-h-48 overflow-y-auto px-3 pb-3">
-						<div className="flex flex-col gap-2">
-							{entries.map((entry) => (
-								<FeedbackEntryItem key={entry.id} entry={entry} />
-							))}
-						</div>
+				<div className="border-t overflow-hidden">
+					<div
+						className="max-h-52 overflow-y-auto divide-y"
+						style={{
+							maskImage:
+								"linear-gradient(to bottom, black 70%, transparent 100%)",
+						}}
+					>
+						{entries.map((entry) => (
+							<FeedbackEntryItem key={entry.id} entry={entry} />
+						))}
 					</div>
 				</div>
 			)}
@@ -185,17 +184,29 @@ function FeedbackPopoverContent({ onClose }: { onClose: () => void }) {
 	);
 }
 
-function FeedbackEntryItem({ entry }: { entry: FeedbackEntry }) {
-	const formatted = new Date(entry.createdAt).toLocaleDateString(undefined, {
+function relativeDate(iso: string): string {
+	const diff = Date.now() - new Date(iso).getTime();
+	const mins = Math.floor(diff / 60_000);
+	if (mins < 1) return "just now";
+	if (mins < 60) return `${mins}m ago`;
+	const hrs = Math.floor(mins / 60);
+	if (hrs < 24) return `${hrs}h ago`;
+	const days = Math.floor(hrs / 24);
+	if (days < 7) return `${days}d ago`;
+	return new Date(iso).toLocaleDateString(undefined, {
 		month: "short",
 		day: "numeric",
 	});
+}
 
+function FeedbackEntryItem({ entry }: { entry: FeedbackEntry }) {
 	return (
-		<div className="rounded-md border px-2.5 py-2">
-			<p className="text-sm whitespace-pre-wrap break-words">{entry.message}</p>
-			<span className="mt-1 block text-xs text-muted-foreground">
-				{formatted}
+		<div className="px-3 py-2.5">
+			<p className="text-sm text-muted-foreground leading-snug whitespace-pre-wrap break-words">
+				{entry.message}
+			</p>
+			<span className="mt-1 block text-[11px] text-muted-foreground/50">
+				{relativeDate(entry.createdAt)}
 			</span>
 		</div>
 	);

apps/web/src/services/storage/migrations/__tests__/v1-to-v2.test.ts

@@ -1,7 +1,5 @@
 import { describe, expect, test } from "bun:test";
-import {
-	DEFAULT_BACKGROUND_BLUR_INTENSITY,
-} from "@/lib/background/blur";
+import { DEFAULT_BACKGROUND_BLUR_INTENSITY } from "@/lib/background/blur";
 import { DEFAULT_BACKGROUND_COLOR } from "@/lib/background/color";
 import { DEFAULT_CANVAS_SIZE } from "@/lib/canvas/sizes";
 const DEFAULT_FPS = 30;
@@ -135,9 +133,7 @@ describe("V1 to V2 Migration", () => {
 
 			const settings = result.project.settings as Record<string, unknown>;
 			const background = settings.background as Record<string, unknown>;
-			expect(background.blurIntensity).toBe(
-				DEFAULT_BACKGROUND_BLUR_INTENSITY,
-			);
+			expect(background.blurIntensity).toBe(DEFAULT_BACKGROUND_BLUR_INTENSITY);
 		});
 
 		test("preserves currentSceneId", async () => {

apps/web/src/services/storage/migrations/transformers/v1-to-v2.ts

@@ -1,6 +1,4 @@
-import {
-	DEFAULT_BACKGROUND_BLUR_INTENSITY,
-} from "@/lib/background/blur";
+import { DEFAULT_BACKGROUND_BLUR_INTENSITY } from "@/lib/background/blur";
 import { DEFAULT_BACKGROUND_COLOR } from "@/lib/background/color";
 import { DEFAULT_CANVAS_SIZE } from "@/lib/canvas/sizes";
 const DEFAULT_FPS = 30;