Updating dependencies and fixing mobile issues.

package.json

@@ -30,11 +30,11 @@
 		"@sveltejs/kit": "^2.5.4",
 		"@sveltejs/vite-plugin-svelte": "^3.0.2",
 		"@types/cookie": "^0.6.0",
-		"@types/node": "^20.11.27",
+		"@types/node": "^20.11.30",
-		"@types/pg": "^8.11.2",
+		"@types/pg": "^8.11.4",
 		"@typescript-eslint/eslint-plugin": "^6.21.0",
 		"@typescript-eslint/parser": "^6.21.0",
-		"autoprefixer": "^10.4.18",
+		"autoprefixer": "^10.4.19",
 		"dotenv": "^16.4.5",
 		"drizzle-kit": "^0.20.14",
 		"eslint": "^8.57.0",
@@ -42,31 +42,31 @@
 		"eslint-plugin-svelte": "^2.35.1",
 		"just-clone": "^6.2.0",
 		"just-debounce-it": "^3.2.0",
-		"postcss": "^8.4.35",
+		"postcss": "^8.4.38",
-		"postcss-import": "^16.0.1",
+		"postcss-import": "^16.1.0",
 		"postcss-load-config": "^5.0.3",
-		"postcss-preset-env": "^9.5.1",
+		"postcss-preset-env": "^9.5.2",
 		"prettier": "^3.2.5",
 		"prettier-plugin-svelte": "^3.2.2",
 		"sass": "^1.72.0",
 		"satori": "^0.10.13",
 		"satori-html": "^0.3.2",
 		"svelte": "^4.2.12",
-		"svelte-check": "^3.6.7",
+		"svelte-check": "^3.6.8",
 		"svelte-headless-table": "^0.18.2",
 		"svelte-meta-tags": "^3.1.1",
 		"svelte-preprocess": "^5.1.3",
 		"svelte-sequential-preprocessor": "^2.0.1",
 		"sveltekit-flash-message": "^2.4.4",
 		"sveltekit-rate-limiter": "^0.4.3",
-		"sveltekit-superforms": "^2.9.0",
+		"sveltekit-superforms": "^2.10.6",
 		"tailwindcss": "^3.4.1",
 		"ts-node": "^10.9.2",
 		"tslib": "^2.6.1",
 		"tsx": "^4.7.1",
-		"typescript": "^5.4.2",
+		"typescript": "^5.4.3",
-		"vite": "^5.1.6",
+		"vite": "^5.2.2",
-		"vitest": "^1.3.1",
+		"vitest": "^1.4.0",
 		"zod": "^3.22.4"
 	},
 	"type": "module",
@@ -78,13 +78,13 @@
 		"@fontsource/fira-mono": "^5.0.12",
 		"@iconify-icons/line-md": "^1.2.26",
 		"@iconify-icons/mdi": "^1.2.47",
-		"@lucia-auth/adapter-drizzle": "^1.0.3",
+		"@lucia-auth/adapter-drizzle": "^1.0.7",
 		"@lukeed/uuid": "^2.0.1",
 		"@neondatabase/serverless": "^0.9.0",
 		"@paralleldrive/cuid2": "^2.2.2",
 		"@planetscale/database": "^1.16.0",
 		"@sentry/sveltekit": "^7.100.1",
-		"@sveltejs/adapter-vercel": "^5.1.1",
+		"@sveltejs/adapter-vercel": "^5.2.0",
 		"@types/feather-icons": "^4.29.4",
 		"@vercel/og": "^0.5.20",
 		"bits-ui": "^0.19.7",
@@ -92,7 +92,7 @@
 		"class-variance-authority": "^0.7.0",
 		"clsx": "^2.1.0",
 		"cookie": "^0.6.0",
-		"drizzle-orm": "^0.30.2",
+		"drizzle-orm": "^0.30.4",
 		"feather-icons": "^4.29.1",
 		"formsnap": "^0.5.1",
 		"html-entities": "^2.5.2",
@@ -109,8 +109,8 @@
 		"radix-svelte": "^0.9.0",
 		"svelte-french-toast": "^1.2.0",
 		"svelte-lazy-loader": "^1.0.0",
-		"tailwind-merge": "^2.2.1",
+		"tailwind-merge": "^2.2.2",
-		"tailwind-variants": "^0.2.0",
+		"tailwind-variants": "^0.2.1",
 		"tailwindcss-animate": "^1.0.6",
 		"zod-to-json-schema": "^3.22.4"
 	}

src/lib/components/Footer.svelte

@@ -1,25 +1,28 @@
 <script>
-	import { PUBLIC_SITE_URL } from "$env/static/public";
+	import { PUBLIC_SITE_URL } from '$env/static/public';
 </script>
 
 <footer>
-	<p>Bored Game &copy; {new Date().getFullYear()} | Built by <a target="__blank" href="https://bradleyshellnut.com">Bradley Shellnut</a> | {PUBLIC_SITE_URL}</p>
+	<p>Bored Game &copy; {new Date().getFullYear()}</p>
+	<p>Built by <a target="__blank" href="https://bradleyshellnut.com">Bradley Shellnut</a>
+	</p>
+	<p>{PUBLIC_SITE_URL}</p>
 </footer>
 
 <style lang="postcss">
-  footer {
+	footer {
 		display: flex;
 		flex-direction: column;
 		justify-content: center;
 		align-items: center;
-		padding: 40px;
+		gap: 0.25rem;
 	}
 
 	footer a {
 		font-weight: bold;
 	}
 
-	@media (min-width: 480px) {
+	@media (width < 640px) {
 		footer {
 			padding: 40px 0;
 		}

src/lib/components/Header.svelte

@@ -13,11 +13,9 @@
 	console.log('header user', user);
 
 	let avatar: string;
-	let loggedIn = false;
 
 	$: if (user) {
-		avatar = user.username?.slice(0, 1).toUpperCase() || '?';
+		avatar = user.username?.slice(0, 1).toUpperCase() || ':)';
-		loggedIn = true;
 	}
 </script>
 
@@ -27,14 +25,12 @@
 			<div class="logo-image">
 				<Logo />
 			</div>
-			Bored Game
+			<span class="logo-text">Bored Game</span>
 		</a>
 	</div>
 	<!-- <TextSearch /> -->
 	<nav>
 		{#if user}
-			<a href="/collection" title="Go to your collection" data-sveltekit-preload-data>Collection</a>
-			<a href="/wishlist" title="Go to your wishlist" data-sveltekit-preload-data>Wishlist</a>
 			<DropdownMenu.Root>
 				<DropdownMenu.Trigger>
 					<Avatar.Root asChild>
@@ -139,6 +135,17 @@
 	.logo-image {
 		width: 2rem;
 		height: 2rem;
+
+		@media (width < 640px) {
+			width: 3rem;
+			height: 3rem;
+		}
+	}
+
+	.logo-text {
+		@media (width < 640px) {
+			display: none;
+		}
 	}
 
 	nav {

src/routes/(app)/(protected)/password/change/+page.svelte

@@ -55,6 +55,6 @@
 
 <style lang="postcss">
 	form {
-		width: 20rem;
+		max-width: 20rem;
 	}
 </style>

src/routes/(app)/(protected)/profile/+page.svelte

@@ -99,6 +99,6 @@
 
 <style lang="postcss">
 	form {
-		width: 20rem;
+		max-width: 20rem;
 	}
 </style>

src/server/actions.ts

@@ -1,65 +1,59 @@
 function isNumber(str: string): boolean {
-  if (typeof str !== 'string') {
+	if (str.trim() === '') {
-    return false;
+		return false;
-  }
+	}
 
-  if (str.trim() === '') {
+	return !Number.isNaN(Number(str));
-    return false;
-  }
-
-  return !Number.isNaN(Number(str));
 }
 
 function convertToBoolean(input: string): boolean | undefined {
-  try {
+	try {
-    return JSON.parse(input.toLowerCase());
+		return JSON.parse(input.toLowerCase());
-  } catch (e) {
+	} catch (e) {
-    return undefined;
+		return undefined;
-  }
+	}
 }
 
 export async function getFormDataObject(request: Request): Promise<{ [key: string]: string }> {
-  const formData = await request.formData();
+	const formData = await request.formData();
-  let data = formData.entries();
+	let data = formData.entries();
-  var obj = data.next();
+	var obj = data.next();
-  var retrieved: any = {};
+	var retrieved: any = {};
-  while (undefined !== obj.value) {
+	while (undefined !== obj.value) {
-    retrieved[obj.value[0]] = obj.value[1];
+		retrieved[obj.value[0]] = obj.value[1];
-    obj = data.next();
+		obj = data.next();
-  }
+	}
-  return retrieved;
+	return retrieved;
 }
 
 export async function getFormData<T>(request: Request, schema: any): T {
-  const data = await getFormDataObject(request);
+	const data = await getFormDataObject(request);
-  return transformFormDataTypes<T>(data, schema);
+	return transformFormDataTypes<T>(data, schema);
 }
 
 // TODO: Modify this as schema refers to a JSON schema helper
 
 export function transformFormDataTypes<T>(data, schema): T {
-  for (const property in data) {
+	for (const property in data) {
-    if (isNumber(schema[property])) {
+		if (isNumber(schema[property])) {
-      data[property] = parseInt(data[property]);
+			data[property] = parseInt(data[property]);
-    } else if (typeof convertToBoolean(schema[property]) === boolean) {
+		} else if (typeof convertToBoolean(schema[property]) === boolean) {
-      data[property] = convertToBoolean(schema[property]); // data[property] === 'true';
+			data[property] = convertToBoolean(schema[property]); // data[property] === 'true';
-    } else if (Array.isArray(JSON.parse(schema[property]))) {
+		} else if (Array.isArray(JSON.parse(schema[property]))) {
-      data[property] = JSON.parse(schema[property]);
+			data[property] = JSON.parse(schema[property]);
-    }
+		}
-  }
+	}
-  return data;
+	return data;
 }
 
 interface Actions {
-  [key: string]: any // Action
+	[key: string]: any; // Action
 }
 
 export const Games: Actions = {
-  search: async function search({ request, locals }): Promise<any> {
+	search: async function search({ request, locals }): Promise<any> {}
-
+	// create: async function create({ request, locals }): Promise<any> {
-  }
+	//   const data = await getFormDataObject<any>(request);
-  // create: async function create({ request, locals }): Promise<any> {
+	//   return data;
-  //   const data = await getFormDataObject<any>(request);
+	// }
-  //   return data;
+};
-  // }
-}

src/server/roles.ts

@@ -1,5 +1,5 @@
-import db from '$lib/drizzle';
 import { eq } from 'drizzle-orm';
+import db from '$lib/drizzle';
 import { roles, user_roles } from '../schema';
 
 export async function add_user_to_role(user_id: string, role_name: string, primary = false) {
@@ -13,7 +13,7 @@ export async function add_user_to_role(user_id: string, role_name: string, prima
 	}
 
 	// Create a UserRole entry linking the user and the role
-	return await db.insert(user_roles).values({
+	return db.insert(user_roles).values({
 		user_id,
 		role_id: role.id,
 		primary

src/server/users.ts

@@ -28,7 +28,7 @@ export async function find_user_with_roles(user_id: string) {
 		with: {
 			user_roles: {
 				with: {
-					roles: {
+					role: {
 						select: {
 							name: true
 						}
@@ -41,10 +41,8 @@ export async function find_user_with_roles(user_id: string) {
 		throw new Error('User not found');
 	}
 
-	const user = {
+	return {
 		...user_with_roles,
-		roles: user_with_roles.roles.map((user_role) => user_role.role.name)
+		roles: user_with_roles.role.map((user_role) => user_role.role.name)
 	};
-
-	return user;
 }