feat: Implement Cap Analytics

.gitignore

@@ -35,6 +35,9 @@ pnpm-lock.yaml
 .vinxi
 native-deps*
 apps/storybook/storybook-static
+.tinyb
+
+**/.tinyb
 
 *.tsbuildinfo
 .cargo/config.toml

README.md

@@ -60,3 +60,12 @@ Portions of this software are licensed as follows:
 # Contributing
 
 See [CONTRIBUTING.md](CONTRIBUTING.md) for more information. This guide is a work in progress, and is updated regularly as the app matures.
+
+## Analytics (Tinybird)
+
+Cap uses [Tinybird](https://www.tinybird.co) to ingest viewer telemetry for dashboards. The Tinybird admin token (`TINYBIRD_ADMIN_TOKEN` or `TINYBIRD_TOKEN`) must be available in your environment. Once the token is present you can:
+
+- Provision the required data sources and materialized views via `pnpm analytics:setup`. This command installs the Tinybird CLI (if needed), runs `tb login` when a `.tinyb` credential file is missing, copies that credential into `scripts/analytics/tinybird`, and finally executes `tb deploy --allow-destructive-operations --wait` from that directory. **It synchronizes the Tinybird workspace to the resources defined in `scripts/analytics/tinybird`, removing any other datasources/pipes in that workspace.**
+- Validate that the schema and materialized views match what the app expects via `pnpm analytics:check`.
+
+Both commands target the workspace pointed to by `TINYBIRD_HOST` (defaults to `https://api.tinybird.co`). Make sure you are comfortable with the destructive nature of the deploy step before running `analytics:setup`.

apps/web/actions/videos/get-analytics.ts

@@ -1,28 +1,96 @@
 "use server";
 
-import { dub } from "@cap/utils";
-
-export async function getVideoAnalytics(videoId: string) {
-	if (!videoId) {
-		throw new Error("Video ID is required");
-	}
-
-	try {
-		const response = await dub().analytics.retrieve({
-			domain: "cap.link",
-			key: videoId,
-		});
-		const { clicks } = response as { clicks: number };
-
-		if (typeof clicks !== "number" || clicks === null) {
-			return { count: 0 };
-		}
-
-		return { count: clicks };
-	} catch (error: any) {
-		if (error.code === "not_found") {
-			return { count: 0 };
-		}
-		return { count: 0 };
-	}
+import { db } from "@cap/database";
+import { videos } from "@cap/database/schema";
+import { Tinybird } from "@cap/web-backend";
+import { Video } from "@cap/web-domain";
+import { eq } from "drizzle-orm";
+import { Effect } from "effect";
+import { runPromise } from "@/lib/server";
+
+const DAY_IN_MS = 24 * 60 * 60 * 1000;
+const MIN_RANGE_DAYS = 1;
+const MAX_RANGE_DAYS = 90;
+const DEFAULT_RANGE_DAYS = MAX_RANGE_DAYS;
+
+const escapeLiteral = (value: string) => value.replace(/'/g, "''");
+const formatDate = (date: Date) => date.toISOString().slice(0, 10);
+const formatDateTime = (date: Date) =>
+	date.toISOString().slice(0, 19).replace("T", " ");
+const buildConditions = (clauses: Array<string | undefined>) =>
+	clauses.filter((clause): clause is string => Boolean(clause)).join(" AND ");
+
+const normalizeRangeDays = (rangeDays?: number) => {
+	if (!Number.isFinite(rangeDays)) return DEFAULT_RANGE_DAYS;
+	const normalized = Math.floor(rangeDays as number);
+	if (normalized <= 0) return DEFAULT_RANGE_DAYS;
+	return Math.max(MIN_RANGE_DAYS, Math.min(normalized, MAX_RANGE_DAYS));
+};
+
+interface GetVideoAnalyticsOptions {
+	rangeDays?: number;
+}
+
+export async function getVideoAnalytics(
+	videoId: string,
+	options?: GetVideoAnalyticsOptions,
+) {
+	if (!videoId) throw new Error("Video ID is required");
+
+	const [{ orgId } = { orgId: null }] = await db()
+		.select({ orgId: videos.orgId })
+		.from(videos)
+		.where(eq(videos.id, Video.VideoId.make(videoId)))
+		.limit(1);
+
+	return runPromise(
+		Effect.gen(function* () {
+			const tinybird = yield* Tinybird;
+
+			const rangeDays = normalizeRangeDays(options?.rangeDays);
+			const now = new Date();
+			const from = new Date(now.getTime() - rangeDays * DAY_IN_MS);
+			const pathname = `/s/${videoId}`;
+			const aggregateConditions = [
+				orgId ? `tenant_id = '${escapeLiteral(orgId)}'` : undefined,
+				`pathname = '${escapeLiteral(pathname)}'`,
+				`date BETWEEN toDate('${formatDate(from)}') AND toDate('${formatDate(now)}')`,
+			];
+			const aggregateSql = `SELECT coalesce(uniqMerge(visits), 0) AS views FROM analytics_pages_mv WHERE ${buildConditions(aggregateConditions)}`;
+
+			const rawConditions = [
+				"action = 'page_hit'",
+				orgId ? `tenant_id = '${escapeLiteral(orgId)}'` : undefined,
+				`pathname = '${escapeLiteral(pathname)}'`,
+				`timestamp BETWEEN toDateTime('${formatDateTime(from)}') AND toDateTime('${formatDateTime(now)}')`,
+			];
+			const rawSql = `SELECT coalesce(uniq(session_id), 0) AS views FROM analytics_events WHERE ${buildConditions(rawConditions)}`;
+
+			const querySql = (sql: string) =>
+				tinybird.querySql<{ views: number }>(sql).pipe(
+					Effect.catchAll((e) => {
+						console.error("tinybird sql error", e);
+						return Effect.succeed({ data: [] });
+					}),
+				);
+
+			const aggregateResult = yield* querySql(aggregateSql);
+
+			const fallbackResult = aggregateResult.data?.length
+				? aggregateResult
+				: yield* querySql(rawSql);
+
+			const data = fallbackResult?.data ?? [];
+			const firstItem = data[0];
+			const count =
+				typeof firstItem === "number"
+					? firstItem
+					: typeof firstItem === "object" &&
+							firstItem !== null &&
+							"views" in firstItem
+						? Number(firstItem.views ?? 0)
+						: 0;
+			return { count: Number.isFinite(count) ? count : 0 };
+		}),
+	);
 }

apps/web/app/(org)/dashboard/_components/AnimatedIcons/ChartLine.tsx

@@ -0,0 +1,102 @@
+"use client";
+
+import type { Variants } from "motion/react";
+import { motion, useAnimation } from "motion/react";
+import type { HTMLAttributes } from "react";
+import { forwardRef, useCallback, useImperativeHandle, useRef } from "react";
+import { cn } from "@/lib/utils";
+
+export interface ChartLineIconHandle {
+	startAnimation: () => void;
+	stopAnimation: () => void;
+}
+
+interface ChartLineIconProps extends HTMLAttributes<HTMLDivElement> {
+	size?: number;
+}
+
+const variants: Variants = {
+	normal: {
+		pathLength: 1,
+		opacity: 1,
+	},
+	animate: {
+		pathLength: [0, 1],
+		opacity: [0, 1],
+		transition: {
+			delay: 0.15,
+			duration: 0.3,
+			opacity: { delay: 0.1 },
+		},
+	},
+};
+
+const ChartLineIcon = forwardRef<ChartLineIconHandle, ChartLineIconProps>(
+	({ onMouseEnter, onMouseLeave, className, size = 28, ...props }, ref) => {
+		const controls = useAnimation();
+		const isControlledRef = useRef(false);
+
+		useImperativeHandle(ref, () => {
+			isControlledRef.current = true;
+
+			return {
+				startAnimation: () => controls.start("animate"),
+				stopAnimation: () => controls.start("normal"),
+			};
+		});
+
+		const handleMouseEnter = useCallback(
+			(e: React.MouseEvent<HTMLDivElement>) => {
+				if (!isControlledRef.current) {
+					controls.start("animate");
+				} else {
+					onMouseEnter?.(e);
+				}
+			},
+			[controls, onMouseEnter],
+		);
+
+		const handleMouseLeave = useCallback(
+			(e: React.MouseEvent<HTMLDivElement>) => {
+				if (!isControlledRef.current) {
+					controls.start("normal");
+				} else {
+					onMouseLeave?.(e);
+				}
+			},
+			[controls, onMouseLeave],
+		);
+
+		return (
+			<div
+				className={cn(className)}
+				onMouseEnter={handleMouseEnter}
+				onMouseLeave={handleMouseLeave}
+				{...props}
+			>
+				<svg
+					xmlns="http://www.w3.org/2000/svg"
+					width={size}
+					height={size}
+					viewBox="0 0 24 24"
+					fill="none"
+					stroke="currentColor"
+					strokeWidth="2"
+					strokeLinecap="round"
+					strokeLinejoin="round"
+				>
+					<path d="M3 3v16a2 2 0 0 0 2 2h16" />
+					<motion.path
+						d="m7 13 3-3 4 4 5-5"
+						variants={variants}
+						animate={controls}
+					/>
+				</svg>
+			</div>
+		);
+	},
+);
+
+ChartLineIcon.displayName = "ChartLineIcon";
+
+export default ChartLineIcon;

apps/web/app/(org)/dashboard/_components/AnimatedIcons/Clap.tsx

@@ -0,0 +1,120 @@
+"use client";
+
+import type { Variants } from "motion/react";
+import { motion, useAnimation } from "motion/react";
+import type { HTMLAttributes } from "react";
+import { forwardRef, useCallback, useImperativeHandle, useRef } from "react";
+import { cn } from "@/lib/utils";
+
+export interface ClapIconHandle {
+	startAnimation: () => void;
+	stopAnimation: () => void;
+}
+
+interface ClapIconProps extends HTMLAttributes<HTMLDivElement> {
+	size?: number;
+}
+
+const variants: Variants = {
+	normal: {
+		rotate: 0,
+		originX: "4px",
+		originY: "20px",
+	},
+	animate: {
+		rotate: [-10, -10, 0],
+		transition: {
+			duration: 0.8,
+			times: [0, 0.5, 1],
+			ease: "easeInOut",
+		},
+	},
+};
+
+const clapVariants: Variants = {
+	normal: {
+		rotate: 0,
+		originX: "3px",
+		originY: "11px",
+	},
+	animate: {
+		rotate: [0, -10, 16, 0],
+		transition: {
+			duration: 0.4,
+			times: [0, 0.3, 0.6, 1],
+			ease: "easeInOut",
+		},
+	},
+};
+
+const ClapIcon = forwardRef<ClapIconHandle, ClapIconProps>(
+	({ onMouseEnter, onMouseLeave, className, size = 28, ...props }, ref) => {
+		const controls = useAnimation();
+		const isControlledRef = useRef(false);
+
+		useImperativeHandle(ref, () => {
+			isControlledRef.current = true;
+
+			return {
+				startAnimation: () => controls.start("animate"),
+				stopAnimation: () => controls.start("normal"),
+			};
+		});
+
+		const handleMouseEnter = useCallback(
+			(e: React.MouseEvent<HTMLDivElement>) => {
+				if (!isControlledRef.current) {
+					controls.start("animate");
+				} else {
+					onMouseEnter?.(e);
+				}
+			},
+			[controls, onMouseEnter],
+		);
+
+		const handleMouseLeave = useCallback(
+			(e: React.MouseEvent<HTMLDivElement>) => {
+				if (!isControlledRef.current) {
+					controls.start("normal");
+				} else {
+					onMouseLeave?.(e);
+				}
+			},
+			[controls, onMouseLeave],
+		);
+		return (
+			<div
+				className={cn(className)}
+				onMouseEnter={handleMouseEnter}
+				onMouseLeave={handleMouseLeave}
+				{...props}
+			>
+				<svg
+					xmlns="http://www.w3.org/2000/svg"
+					width={size}
+					height={size}
+					viewBox="0 0 24 24"
+					fill="none"
+					stroke="currentColor"
+					strokeWidth="2"
+					strokeLinecap="round"
+					strokeLinejoin="round"
+					style={{ overflow: "visible" }}
+				>
+					<motion.g animate={controls} variants={variants}>
+						<motion.g animate={controls} variants={clapVariants}>
+							<path d="M20.2 6 3 11l-.9-2.4c-.3-1.1.3-2.2 1.3-2.5l13.5-4c1.1-.3 2.2.3 2.5 1.3Z" />
+							<path d="m6.2 5.3 3.1 3.9" />
+							<path d="m12.4 3.4 3.1 4" />
+						</motion.g>
+						<path d="M3 11h18v8a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2Z" />
+					</motion.g>
+				</svg>
+			</div>
+		);
+	},
+);
+
+ClapIcon.displayName = "ClapIcon";
+
+export default ClapIcon;