Upgrade Next.js + enable Turbo

.github/workflows/ci.yml

@@ -46,6 +46,8 @@ jobs:
 
       - uses: ./.github/actions/setup-js
 
+      - run: pnpm web exec next typegen
+
       - name: Typecheck
         run: pnpm typecheck
 
@@ -74,6 +76,8 @@ jobs:
         uses: actions/checkout@v4
 
       - uses: dtolnay/rust-toolchain@stable
+        with:
+          components: rustfmt
 
       - name: Check formatting
         run: cargo fmt --check

apps/desktop/package.json

@@ -54,7 +54,7 @@
 		"@ts-rest/core": "^3.52.1",
 		"@types/react-tooltip": "^4.2.4",
 		"cva": "npm:class-variance-authority@^0.7.0",
-		"effect": "^3.17.13",
+		"effect": "^3.17.14",
 		"mp4box": "^0.5.2",
 		"posthog-js": "^1.215.3",
 		"solid-js": "^1.9.3",

apps/web/actions/videos/password.ts

@@ -98,7 +98,7 @@ export async function verifyVideoPassword(
 
 		if (!valid) throw new Error("Invalid password");
 
-		cookies().set("x-cap-password", await encrypt(video.password));
+		(await cookies()).set("x-cap-password", await encrypt(video.password));
 
 		return { success: true, value: "Password verified" };
 	} catch (error) {

apps/web/app/(org)/dashboard/_components/Navbar/Items.tsx

@@ -31,7 +31,7 @@ import { Check, ChevronDown, Plus } from "lucide-react";
 import Image from "next/image";
 import Link from "next/link";
 import { usePathname, useRouter } from "next/navigation";
-import { cloneElement, useRef, useState } from "react";
+import { cloneElement, type RefObject, useRef, useState } from "react";
 import { NewOrganization } from "@/components/forms/NewOrganization";
 import { Tooltip } from "@/components/Tooltip";
 import { UsageButton } from "@/components/UsageButton";
@@ -453,7 +453,11 @@ const NavItem = ({
 }: {
 	name: string;
 	href: string;
-	icon: React.ReactElement;
+	icon: React.ReactElement<{
+		ref: RefObject<CogIconHandle | null>;
+		className: string;
+		size: number;
+	}>;
 	sidebarCollapsed: boolean;
 	toggleMobileNav?: () => void;
 	isPathActive: (path: string) => boolean;

apps/web/app/(org)/dashboard/_components/Navbar/SpaceDialog.tsx

@@ -109,7 +109,7 @@ const SpaceDialog = ({
 
 export interface NewSpaceFormProps {
 	onSpaceCreated: () => void;
-	formRef?: React.RefObject<HTMLFormElement>;
+	formRef?: React.RefObject<HTMLFormElement | null>;
 	setCreateLoading?: React.Dispatch<React.SetStateAction<boolean>>;
 	onNameChange?: (name: string) => void;
 	edit?: boolean;

apps/web/app/(org)/dashboard/_components/Navbar/Top.tsx

@@ -25,6 +25,7 @@ import {
 	cloneElement,
 	type MutableRefObject,
 	memo,
+	type RefObject,
 	useMemo,
 	useRef,
 	useState,
@@ -318,7 +319,11 @@ const User = () => {
 };
 
 interface Props {
-	icon: React.ReactElement;
+	icon: React.ReactElement<{
+		ref: RefObject<DownloadIconHandle | null>;
+		className: string;
+		size: number;
+	}>;
 	name: string;
 	href?: string;
 	onClick: () => void;

apps/web/app/(org)/dashboard/_components/actions.ts

@@ -2,6 +2,6 @@
 import { cookies } from "next/headers";
 
 export const setTheme = async (newTheme: "light" | "dark") => {
-	const cookieStore = cookies();
+	const cookieStore = await cookies();
 	cookieStore.set("theme", newTheme);
 };

apps/web/app/(org)/dashboard/caps/components/FoldersDropdown.tsx

@@ -16,7 +16,7 @@ interface FoldersDropdownProps {
 	id: string;
 	setIsRenaming: (isRenaming: boolean) => void;
 	setConfirmDeleteFolderOpen: (open: boolean) => void;
-	nameRef: RefObject<HTMLTextAreaElement>;
+	nameRef: RefObject<HTMLTextAreaElement | null>;
 	parentId?: string | null;
 }
 

apps/web/app/(org)/dashboard/caps/components/NewFolderDialog.tsx

@@ -96,7 +96,7 @@ export const NewFolderDialog: React.FC<Props> = ({
 			},
 			{} as Record<
 				(typeof FolderOptions)[number]["value"],
-				React.RefObject<FolderHandle>
+				React.RefObject<FolderHandle | null>
 			>,
 		),
 	);

apps/web/app/(org)/dashboard/caps/page.tsx

@@ -96,11 +96,10 @@ async function getSharedSpacesForVideos(videoIds: Video.VideoId[]) {
 	return sharedSpacesMap;
 }
 
-export default async function CapsPage({
-	searchParams,
-}: {
-	searchParams: { [key: string]: string | string[] | undefined };
+export default async function CapsPage(props: {
+	searchParams: Promise<{ [key: string]: string | string[] | undefined }>;
 }) {
+	const searchParams = await props.searchParams;
 	const user = await getCurrentUser();
 
 	if (!user || !user.id) {

apps/web/app/(org)/dashboard/folder/[id]/components/SubfolderDialog.tsx

@@ -102,7 +102,7 @@ export const SubfolderDialog: React.FC<Props> = ({
 			},
 			{} as Record<
 				(typeof FolderOptions)[number]["value"],
-				React.RefObject<FolderHandle>
+				React.RefObject<FolderHandle | null>
 			>,
 		),
 	);

apps/web/app/(org)/dashboard/folder/[id]/page.tsx

@@ -14,7 +14,10 @@ import {
 } from "./components";
 import FolderVideosSection from "./components/FolderVideosSection";
 
-const FolderPage = async ({ params }: { params: { id: Folder.FolderId } }) => {
+const FolderPage = async (props: {
+	params: Promise<{ id: Folder.FolderId }>;
+}) => {
+	const params = await props.params;
 	const [childFolders, breadcrumb, videosData] = await Promise.all([
 		getChildFolders(params.id),
 		getFolderBreadcrumb(params.id),

apps/web/app/(org)/dashboard/layout.tsx

@@ -63,9 +63,9 @@ export default async function DashboardLayout({
 			user.stripeSubscriptionStatus !== "cancelled") ||
 		!!user.thirdPartyStripeSubscriptionId;
 
-	const theme = cookies().get("theme")?.value ?? "light";
-	const sidebar = cookies().get("sidebarCollapsed")?.value ?? "false";
-	const referClicked = cookies().get("referClicked")?.value ?? "false";
+	const theme = (await cookies()).get("theme")?.value ?? "light";
+	const sidebar = (await cookies()).get("sidebarCollapsed")?.value ?? "false";
+	const referClicked = (await cookies()).get("referClicked")?.value ?? "false";
 
 	return (
 		<UploadingProvider>

apps/web/app/(org)/dashboard/settings/organization/components/CustomDomainDialog/CustomDomainDialog.tsx

@@ -139,7 +139,7 @@ const CustomDomainDialog = ({
 	const dialogRef = useRef<HTMLDivElement | null>(null);
 	const confettiRef = useRef<ConfettiRef>(null);
 
-	const pollInterval = useRef<NodeJS.Timeout>();
+	const pollInterval = useRef<NodeJS.Timeout | undefined>(undefined);
 
 	// Mutation for updating domain
 	const updateDomainMutation = useMutation({

apps/web/app/(org)/dashboard/settings/organization/page.tsx

@@ -1,4 +1,7 @@
+import { db } from "@cap/database";
 import { getCurrentUser } from "@cap/database/auth/session";
+import { organizationMembers, organizations } from "@cap/database/schema";
+import { and, eq } from "drizzle-orm";
 import type { Metadata } from "next";
 import { redirect } from "next/navigation";
 import { getDashboardData } from "../../dashboard-data";
@@ -15,12 +18,24 @@ export default async function OrganizationPage() {
 		redirect("/auth/signin");
 	}
 
-	const dashboardData = await getDashboardData(user);
-	const isOwner = dashboardData.organizationSelect.find(
-		(organization) => organization.organization.ownerId === user.id,
-	);
+	const [member] = await db()
+		.select({
+			role: organizationMembers.role,
+		})
+		.from(organizationMembers)
+		.limit(1)
+		.leftJoin(
+			organizations,
+			eq(organizationMembers.organizationId, organizations.id),
+		)
+		.where(
+			and(
+				eq(organizationMembers.userId, user.id),
+				eq(organizations.id, user.activeOrganizationId),
+			),
+		);
 
-	if (!isOwner) {
+	if (member?.role !== "owner") {
 		redirect("/dashboard/caps");
 	}
 

apps/web/app/(org)/dashboard/spaces/[spaceId]/components/VirtualizedVideoGrid.tsx

@@ -1,6 +1,6 @@
 import type { Video } from "@cap/web-domain";
 import { Grid, useGrid } from "@virtual-grid/react";
-import React, { useEffect, useRef, useState } from "react";
+import React, { type RefObject, useEffect, useRef, useState } from "react";
 import type { VideoData } from "./AddVideosDialogBase";
 import VideoCard from "./VideoCard";
 
@@ -50,7 +50,7 @@ const VirtualizedVideoGrid = ({
 
 	// Initialize the grid with responsive column count
 	const grid = useGrid({
-		scrollRef,
+		scrollRef: scrollRef as RefObject<HTMLDivElement>, // React typing version mismatch
 		count: videos.length,
 		columns: responsiveColumnCount,
 		gap: {

apps/web/app/(org)/dashboard/spaces/[spaceId]/folder/[folderId]/page.tsx

@@ -14,11 +14,10 @@ import {
 } from "../../../../folder/[id]/components";
 import FolderVideosSection from "../../../../folder/[id]/components/FolderVideosSection";
 
-const FolderPage = async ({
-	params,
-}: {
-	params: { spaceId: string; folderId: Folder.FolderId };
+const FolderPage = async (props: {
+	params: Promise<{ spaceId: string; folderId: Folder.FolderId }>;
 }) => {
+	const params = await props.params;
 	const user = await getCurrentUser();
 	if (!user) return;
 

apps/web/app/(org)/dashboard/spaces/[spaceId]/page.tsx

@@ -118,13 +118,12 @@ async function fetchOrganizationMembers(orgId: string) {
 		.where(eq(organizationMembers.organizationId, orgId));
 }
 
-export default async function SharedCapsPage({
-	params,
-	searchParams,
-}: {
-	params: { spaceId: string };
-	searchParams: { [key: string]: string | string[] | undefined };
+export default async function SharedCapsPage(props: {
+	params: Promise<{ spaceId: string }>;
+	searchParams: Promise<{ [key: string]: string | string[] | undefined }>;
 }) {
+	const searchParams = await props.searchParams;
+	const params = await props.params;
 	const page = Number(searchParams.page) || 1;
 	const limit = Number(searchParams.limit) || 15;
 	const user = await getCurrentUser();

apps/web/app/(org)/invite/[inviteId]/page.tsx

@@ -14,10 +14,11 @@ import { notFound } from "next/navigation";
 import { InviteAccept } from ".//InviteAccept";
 
 type Props = {
-	params: { inviteId: string };
+	params: Promise<{ inviteId: string }>;
 };
 
-export async function generateMetadata({ params }: Props): Promise<Metadata> {
+export async function generateMetadata(props: Props): Promise<Metadata> {
+	const params = await props.params;
 	const inviteId = params.inviteId;
 	const invite = await getInviteDetails(inviteId);
 
@@ -49,7 +50,8 @@ async function getInviteDetails(inviteId: string) {
 	return query[0];
 }
 
-export default async function InvitePage({ params }: Props) {
+export default async function InvitePage(props: Props) {
+	const params = await props.params;
 	const inviteId = params.inviteId;
 	const user = await getCurrentUser();
 	const inviteDetails = await getInviteDetails(inviteId);

apps/web/app/(org)/verify-otp/page.tsx

@@ -7,11 +7,10 @@ export const metadata = {
 	title: "Verify Code | Cap",
 };
 
-export default async function VerifyOTPPage({
-	searchParams,
-}: {
-	searchParams: { email?: string; next?: string; lastSent?: string };
+export default async function VerifyOTPPage(props: {
+	searchParams: Promise<{ email?: string; next?: string; lastSent?: string }>;
 }) {
+	const searchParams = await props.searchParams;
 	const session = await getSession();
 
 	if (session?.user) {

apps/web/app/(site)/[slug]/page.tsx

@@ -4,10 +4,11 @@ import { getMetadataBySlug } from "@/lib/seo-metadata";
 import { getPageBySlug } from "@/lib/seo-pages";
 
 type Props = {
-	params: { slug: string };
+	params: Promise<{ slug: string }>;
 };
 
-export async function generateMetadata({ params }: Props): Promise<Metadata> {
+export async function generateMetadata(props: Props): Promise<Metadata> {
+	const params = await props.params;
 	const metadata = getMetadataBySlug(params.slug);
 
 	if (!metadata) {
@@ -30,7 +31,8 @@ export async function generateMetadata({ params }: Props): Promise<Metadata> {
 	};
 }
 
-export default function SeoPage({ params }: Props) {
+export default async function SeoPage(props: Props) {
+	const params = await props.params;
 	const page = getPageBySlug(params.slug);
 
 	if (!page) {

apps/web/app/(site)/blog/[slug]/page.tsx

@@ -16,14 +16,15 @@ import { calculateReadingTime } from "@/utils/readTime";
 import { Share } from "../_components/Share";
 
 interface PostProps {
-	params: {
+	params: Promise<{
 		slug: string;
-	};
+	}>;
 }
 
-export async function generateMetadata({
-	params,
-}: PostProps): Promise<Metadata | undefined> {
+export async function generateMetadata(
+	props: PostProps,
+): Promise<Metadata | undefined> {
+	const params = await props.params;
 	const post = getBlogPosts().find((post) => post.slug === params.slug);
 	if (!post) {
 		return;
@@ -66,7 +67,8 @@ export async function generateMetadata({
 	};
 }
 
-export default async function PostPage({ params }: PostProps) {
+export default async function PostPage(props: PostProps) {
+	const params = await props.params;
 	const post = getBlogPosts().find((post) => post.slug === params.slug);
 
 	if (!post) {

apps/web/app/(site)/docs/[...slug]/page.tsx

@@ -14,15 +14,15 @@ type Doc = {
 };
 
 interface DocProps {
-	params: {
+	params: Promise<{
 		slug: string[];
-	};
+	}>;
 }
 
 export async function generateMetadata(
 	props: DocProps,
 ): Promise<Metadata | undefined> {
-	const { params } = props;
+	const params = await props.params;
 	if (!params?.slug) return;
 
 	const fullSlug = params.slug.join("/");
@@ -74,7 +74,7 @@ export async function generateMetadata(
 }
 
 export default async function DocPage(props: DocProps) {
-	const { params } = props;
+	const params = await props.params;
 	if (!params?.slug) notFound();
 
 	const fullSlug = params.slug.join("/");