Upgrade Next.js + enable Turbo (#1033)

Author: oscartbeaumont

.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) {