start work on settings sync

src/convex/_generated/api.d.ts

@@ -14,6 +14,9 @@ import type {
   FunctionReference,
 } from "convex/server";
 import type * as backups from "../backups.js";
+import type * as sync from "../sync.js";
+import type * as types from "../types.js";
+import type * as utils from "../utils.js";
 
 /**
  * A utility for referencing Convex functions in your app's API.
@@ -25,6 +28,9 @@ import type * as backups from "../backups.js";
  */
 declare const fullApi: ApiFromModules<{
   backups: typeof backups;
+  sync: typeof sync;
+  types: typeof types;
+  utils: typeof utils;
 }>;
 export declare const api: FilterApi<
   typeof fullApi,

src/convex/backups.ts

@@ -1,34 +1,22 @@
 import { v } from 'convex/values';
 import { mutation, query } from './_generated/server';
-import * as jose from 'jose';
-
-// Shared helper function to verify JWT and return payload
-async function verifyJwtAndGetPayload(jwt: string) {
-	if (!process.env.CLERK_JWT_KEY) {
-		throw new Error('Missing CLERK_JWT_KEY environment variable');
-	}
-	const publicKey = await jose.importSPKI(process.env.CLERK_JWT_KEY, 'RS256');
-	if (jwt.length === 0) {
-		throw new Error('Missing JWT');
-	}
-	const { payload } = await jose.jwtVerify(jwt, publicKey, {});
-	if (!payload.sub) {
-		throw new Error('Invalid JWT');
-	}
-	return payload;
-}
+import { getAndUpdateUser, getUser, verifyJwtAndGetPayload } from './utils';
 
 export const get = query({
 	args: {
 		jwt: v.string()
 	},
 	handler: async (ctx, args) => {
 		const payload = await verifyJwtAndGetPayload(args.jwt);
+		const userInfo = await getUser(ctx, payload);
+		if (!userInfo) {
+			return [];
+		}
 		const backups = await ctx.db
 			.query('backup')
 			.order('desc')
-			.filter((q) => q.eq(q.field('user'), payload.sub))
-			.take(100);
+			.filter((q) => q.eq(q.field('user'), userInfo._id))
+			.collect();
 		return backups.map((backup) => ({
 			name: backup.name,
 			data: backup.data,
@@ -49,8 +37,12 @@ export const create = mutation({
 		if (!payload.sub) {
 			throw new Error('Invalid JWT: missing subject');
 		}
+		const userInfo = await getAndUpdateUser(ctx, payload);
+		if (!userInfo?._id) {
+			throw new Error('Something went wrong');
+		}
 		await ctx.db.insert('backup', {
-			user: payload.sub,
+			user: userInfo?._id,
 			name: args.name,
 			data: args.data
 		});
@@ -65,9 +57,12 @@ export const remove = mutation({
 	handler: async (ctx, args) => {
 		const payload = await verifyJwtAndGetPayload(args.jwt);
 		const backup = await ctx.db.get(args.id);
-		if (backup?.user !== payload.sub) {
+		const userInfo = await getAndUpdateUser(ctx, payload);
+
+		if (backup?.user !== userInfo?._id) {
 			throw new Error('Unauthorized');
 		}
+		await getAndUpdateUser(ctx, payload);
 		await ctx.db.delete(args.id);
 	}
 });

src/convex/schema.ts

@@ -5,11 +5,41 @@ export default defineSchema({
 	comments: defineTable({
 		body: v.string(),
 		gmaeid: v.string(),
-		user: v.string()
+		user: v.id('users')
 	}),
 	backup: defineTable({
 		name: v.string(),
 		data: v.string(),
-		user: v.string()
-	})
+		user: v.id('users')
+	}),
+	users: defineTable({
+		email: v.string(),
+		firstName: v.optional(v.string()),
+		lastName: v.optional(v.string()),
+		avatar: v.optional(v.string()),
+		username: v.string(),
+		verified: v.boolean(),
+		clerkId: v.string(),
+		settings: v.optional(
+			v.object({
+				experimentalFeatures: v.boolean(),
+				open: v.string(),
+				theme: v.string(),
+				panic: v.object({
+					enabled: v.boolean(),
+					key: v.string(),
+					url: v.string(),
+					disableExperimentalMode: v.boolean()
+				}),
+				cloak: v.object({
+					mode: v.string(),
+					name: v.string(),
+					icon: v.string()
+				}),
+				history: v.boolean()
+			})
+		),
+		favourites: v.optional(v.array(v.string())),
+		history: v.optional(v.array(v.string()))
+	}).index('clerkid', ['clerkId'])
 });

src/convex/sync.ts

@@ -0,0 +1,74 @@
+import { v } from 'convex/values';
+import { mutation, query } from './_generated/server';
+import { getAndUpdateUser, getUser, verifyJwtAndGetPayload } from './utils';
+
+export const get = query({
+	args: {
+		jwt: v.string()
+	},
+	handler: async (ctx, args) => {
+		const payload = await verifyJwtAndGetPayload(args.jwt);
+		const userInfo = await getUser(ctx, payload);
+		if (!userInfo) {
+			return null;
+		}
+		return {
+			settings: userInfo.settings,
+			favourites: userInfo.favourites,
+			history: userInfo.history
+		};
+	}
+});
+
+export const update = mutation({
+	args: {
+		jwt: v.string(),
+		settings: v.optional(
+			v.object({
+				experimentalFeatures: v.boolean(),
+				open: v.string(),
+				theme: v.string(),
+				panic: v.object({
+					enabled: v.boolean(),
+					key: v.string(),
+					url: v.string(),
+					disableExperimentalMode: v.boolean()
+				}),
+				cloak: v.object({
+					mode: v.string(),
+					name: v.string(),
+					icon: v.string()
+				}),
+				history: v.boolean()
+			})
+		),
+		favourites: v.optional(v.array(v.string())),
+		history: v.optional(v.array(v.string()))
+	},
+	handler: async (ctx, args) => {
+		const payload = await verifyJwtAndGetPayload(args.jwt);
+		if (!payload.sub) {
+			throw new Error('Invalid JWT: missing subject');
+		}
+		const userInfo = await getAndUpdateUser(ctx, payload);
+		if (!userInfo?._id) {
+			throw new Error('Something went wrong');
+		}
+
+		if (args.favourites) {
+			await ctx.db.patch(userInfo._id, {
+				favourites: args.favourites
+			});
+		}
+		if (args.history) {
+			await ctx.db.patch(userInfo._id, {
+				history: args.history
+			});
+		}
+		if (args.settings) {
+			await ctx.db.patch(userInfo._id, {
+				settings: args.settings
+			});
+		}
+	}
+});

src/convex/types.ts

@@ -0,0 +1,18 @@
+export interface JWTPayload {
+	email: string;
+	avatar: string;
+	lastname: string;
+	username: string;
+	verified: boolean;
+	firstname: string;
+	azp: string;
+	exp: number;
+	fva: number[];
+	iat: number;
+	iss: string;
+	nbf: number;
+	sid: string;
+	sub: string;
+	v: string;
+	fea: string;
+}

src/convex/utils.ts

@@ -0,0 +1,69 @@
+import * as jose from 'jose';
+import type { MutationCtx, QueryCtx } from './_generated/server';
+import type { JwtPayload } from 'jsonwebtoken';
+
+// Shared helper function to verify JWT and return payload
+export async function verifyJwtAndGetPayload(jwt: string) {
+	if (!process.env.CLERK_JWT_KEY) {
+		throw new Error('Missing CLERK_JWT_KEY environment variable');
+	}
+	const publicKey = await jose.importSPKI(process.env.CLERK_JWT_KEY, 'RS256');
+	if (jwt.length === 0) {
+		throw new Error('Missing JWT');
+	}
+	const { payload } = await jose.jwtVerify(jwt, publicKey, {});
+	if (!payload.sub) {
+		throw new Error('Invalid JWT');
+	}
+	return payload;
+}
+
+export async function getUser(ctx: QueryCtx, payload: JwtPayload) {
+	if (!payload.sub) {
+		throw new Error('Invalid JWT');
+	}
+	let user = await ctx.db
+		.query('users')
+		.withIndex('clerkid', (q) => q.eq('clerkId', payload.sub || ''))
+		.first();
+
+	if (!user) {
+		return null;
+	}
+
+	return user;
+}
+
+export async function getAndUpdateUser(ctx: MutationCtx, payload: JwtPayload) {
+	if (!payload.sub) {
+		throw new Error('Invalid JWT');
+	}
+	let user = await ctx.db
+		.query('users')
+		.withIndex('clerkid', (q) => q.eq('clerkId', payload.sub || ''))
+		.first();
+	if (user) {
+		await ctx.db.patch(user._id, {
+			avatar: payload.avatar,
+			email: payload.email,
+			firstName: payload.firstname,
+			lastName: payload.lastname,
+			username: payload.username,
+			verified: payload.verified,
+			clerkId: payload.sub
+		});
+		user = await ctx.db.get(user._id);
+	} else {
+		const userId = await ctx.db.insert('users', {
+			avatar: payload.avatar,
+			email: payload.email,
+			firstName: payload.firstname,
+			lastName: payload.firstname,
+			username: payload.username,
+			verified: payload.verified,
+			clerkId: payload.sub
+		});
+		user = await ctx.db.get(userId);
+	}
+	return user;
+}

src/lib/components/app-sidebar.svelte

@@ -253,12 +253,14 @@
 							{...props}
 						>
 							<Code />
-							EducationalTools/src
+							<div class="truncate">EducationalTools/src</div>
 							<div class="grow"></div>
-							<Badge>
-								<GitBranch />
-								{process.env.BRANCH_NAME}</Badge
+							<div
+								class="bg-muted text-muted-foreground pointer-events-none inline-flex h-5 items-center gap-1 truncate rounded border px-1.5 font-mono text-[10px] font-medium opacity-100 select-none"
 							>
+								<GitBranch class="size-2" />
+								{process.env.BRANCH_NAME}
+							</div>
 						</a>
 					{/snippet}
 				</Sidebar.MenuButton>

src/lib/components/providers.svelte

@@ -2,6 +2,8 @@
 	import { ClerkProvider, GoogleOneTap } from 'svelte-clerk/client';
 	import { ModeWatcher } from 'mode-watcher';
 	import { setupConvex } from 'convex-svelte';
+	import { dark } from '@clerk/themes';
+	import { mode } from 'mode-watcher';
 
 	// Props
 	let { children } = $props();
@@ -19,7 +21,10 @@
 	}
 </script>
 
-<ClerkProvider publishableKey={process.env.PUBLIC_CLERK_PUBLISHABLE_KEY || ''}>
+<ClerkProvider
+	publishableKey={process.env.PUBLIC_CLERK_PUBLISHABLE_KEY || ''}
+	appearance={{ cssLayerName: 'clerk', ...(mode.current == 'dark' ? { baseTheme: dark } : {}) }}
+>
 	<GoogleOneTap />
 	<ModeWatcher disableTransitions={false} defaultMode={'dark'} />
 	{@render children()}