Committing because I really need to restart my laptop or something :(

.env.example

@@ -9,7 +9,6 @@
 # Next Variables        # Default Values:
 #NODE_ENV=              # development
 #SKIP_ENV_VALIDATION=   # false
-#NEXT_RUNTIME=          # nodejs
 # Sentry Variables      # Default Values:
 SENTRY_AUTH_TOKEN=
 #CI=                    # true

eslint.config.js

@@ -1,5 +1,6 @@
 import { FlatCompat } from '@eslint/eslintrc';
 import tseslint from 'typescript-eslint';
+import eslintPluginPrettierRecommended from 'eslint-plugin-prettier/recommended';
 
 const compat = new FlatCompat({
   baseDirectory: import.meta.dirname,
@@ -16,6 +17,7 @@ export default tseslint.config(
       ...tseslint.configs.recommended,
       ...tseslint.configs.recommendedTypeChecked,
       ...tseslint.configs.stylisticTypeChecked,
+      eslintPluginPrettierRecommended,
     ],
     rules: {
       '@typescript-eslint/array-type': 'off',
@@ -33,6 +35,9 @@ export default tseslint.config(
         'error',
         { checksVoidReturn: { attributes: false } },
       ],
+      '@typescript-eslint/no-explicit-any': 'warn',
+      '@typescript-eslint/no-floating-promises': 'warn',
+      '@typescript-eslint/no-unsafe-argument': 'warn',
     },
   },
   {

next.config.js

@@ -1,6 +1,5 @@
-/**
+/* Run `build` or `dev` with `SKIP_ENV_VALIDATION` to skip env validation.
- * Run `build` or `dev` with `SKIP_ENV_VALIDATION` to skip env validation. This is especially useful
+ * This is especially useful for Docker builds.
- * for Docker builds.
  */
 import './src/env.js';
 import { withSentryConfig } from '@sentry/nextjs';
@@ -22,14 +21,21 @@ const config = {
       bodySizeLimit: '10mb',
     },
   },
-  //turbopack: {
+  turbopack: {
-  //rules: {
+    rules: {
-  //'*.svg': {
+      '*.svg': {
-  //loaders: ['@svgr/webpack'],
+        loaders: [
-  //as: '*.js',
+          {
-  //},
+            loader: '@svgr/webpack',
-  //},
+            options: {
-  //},
+              icon: true,
+            },
+          },
+        ],
+        as: '*.js',
+      },
+    },
+  },
 };
 
 const sentryConfig = {

package.json

@@ -50,6 +50,9 @@
     "@types/react-dom": "^19.1.6",
     "eslint": "^9.28.0",
     "eslint-config-next": "^15.3.3",
+    "eslint-config-prettier": "^10.1.5",
+    "eslint-plugin-prettier": "^5.4.1",
+    "import-in-the-middle": "^1.14.0",
     "postcss": "^8.5.4",
     "prettier": "^3.5.3",
     "prettier-plugin-tailwindcss": "^0.6.12",
@@ -63,5 +66,5 @@
   "ct3aMetadata": {
     "initVersion": "7.39.3"
   },
-  "packageManager": "pnpm@10.11.1+sha512.e519b9f7639869dc8d5c3c5dfef73b3f091094b0a006d7317353c72b124e80e1afd429732e28705ad6bfa1ee879c1fce46c128ccebd3192101f43dd67c667912"
+  "packageManager": "pnpm@10.12.1+sha512.f0dda8580f0ee9481c5c79a1d927b9164f2c478e90992ad268bbb2465a736984391d6333d2c327913578b2804af33474ca554ba29c04a8b13060a717675ae3ac"
 }

sentry.edge.config.ts

@@ -1,16 +0,0 @@
-// This file configures the initialization of Sentry for edge features (middleware, edge routes, and so on).
-// The config you add here will be used whenever one of the edge features is loaded.
-// Note that this config is unrelated to the Vercel Edge Runtime and is also required when running locally.
-// https://docs.sentry.io/platforms/javascript/guides/nextjs/
-
-import * as Sentry from '@sentry/nextjs';
-
-Sentry.init({
-  dsn: 'https://0468176d5291bc2b914261147bfef117@sentry.gbrown.org/6',
-
-  // Define how likely traces are sampled. Adjust this value in production, or use tracesSampler for greater control.
-  tracesSampleRate: 1,
-
-  // Setting this option to true will print useful information to the console while you're setting up Sentry.
-  debug: false,
-});

src/app/(auth-pages)/sign-in/page.tsx

@@ -155,7 +155,12 @@ const Login = () => {
             </SubmitButton>
           </form>
         </Form>
-        <Separator className='my-4' />
+
+        <div className='flex items-center w-full gap-4'>
+          <Separator className='flex-1 bg-accent py-0.5' />
+          <span className='text-sm text-muted-foreground'>or</span>
+          <Separator className='flex-1 bg-accent py-0.5' />
+        </div>
         <SignInWithMicrosoft />
         <SignInWithApple />
       </CardContent>

src/app/(auth-pages)/sign-up/page.tsx

@@ -21,8 +21,13 @@ import {
   FormLabel,
   FormMessage,
   Input,
+  Separator,
 } from '@/components/ui';
 import { useEffect, useState } from 'react';
+import {
+  SignInWithApple,
+  SignInWithMicrosoft
+} from '@/components/default/auth';
 
 const formSchema = z
   .object({
@@ -108,7 +113,7 @@ const SignUp = () => {
         <Form {...form}>
           <form
             onSubmit={form.handleSubmit(handleSignUp)}
-            className='flex flex-col mx-auto space-y-4'
+            className='flex flex-col mx-auto space-y-4 mb-4'
           >
             <FormField
               control={form.control}
@@ -191,6 +196,13 @@ const SignUp = () => {
             </SubmitButton>
           </form>
         </Form>
+        <div className='flex items-center w-full gap-4'>
+          <Separator className='flex-1 bg-accent py-0.5' />
+          <span className='text-sm text-muted-foreground'>or</span>
+          <Separator className='flex-1 bg-accent py-0.5' />
+        </div>
+        <SignInWithMicrosoft />
+        <SignInWithApple />
       </CardContent>
     </Card>
   );

src/app/page.tsx

@@ -4,10 +4,8 @@ import { FetchDataSteps } from '@/components/default/tutorial';
 import { InfoIcon } from 'lucide-react';
 import { getUser } from '@/lib/actions';
 import type { User } from '@/utils/supabase';
-import Link from 'next/link';
 import { TestSentryCard } from '@/components/default/sentry';
 import {
-  Button,
   Card,
   CardContent,
   CardDescription,
@@ -15,6 +13,11 @@ import {
   CardTitle,
   Separator,
 } from '@/components/ui';
+import {
+  SignInSignUp,
+  SignInWithApple,
+  SignInWithMicrosoft
+} from '@/components/default/auth';
 
 const HomePage = async () => {
   const response = await getUser();
@@ -29,16 +32,23 @@ const HomePage = async () => {
               </CardTitle>
               <CardDescription className='text-[1.0rem] mb-2'>
                 A great place to start is by creating a new user account &
-                ensuring you can sign in!
+                ensuring you can sign up! If you already have an account, go
+                ahead and sign in!
               </CardDescription>
-              <Button
+              <SignInSignUp
-                asChild
+                className='flex gap-4 w-full justify-center'
-                size='sm'
+                signInSize='xl'
-                variant={'default'}
+                signUpSize='xl'
-                className='w-1/3 items-center'
+              />
-              >
+              <div className='flex items-center w-full gap-4'>
-                <Link href='/sign-up'>Sign up</Link>
+                <Separator className='flex-1 bg-accent py-0.5' />
-              </Button>
+                <span className='text-sm text-muted-foreground'>or</span>
+                <Separator className='flex-1 bg-accent py-0.5' />
+              </div>
+              <div className='flex gap-4'>
+                <SignInWithMicrosoft buttonSize='lg' />
+                <SignInWithApple buttonSize='lg' />
+              </div>
             </CardHeader>
             <Separator className='bg-accent' />
             <CardContent className='flex flex-col px-5 py-2 items-center justify-center'>

src/components/default/auth/SignInSignUp.tsx

@@ -0,0 +1,33 @@
+'use server';
+
+import Link from 'next/link';
+import { Button, type buttonVariants } from '@/components/ui';
+import { type ComponentProps } from 'react';
+import { type VariantProps } from 'class-variance-authority';
+
+type SignInSignUpProps = {
+  className?: ComponentProps<'div'>['className'];
+  signInSize?: VariantProps<typeof buttonVariants>['size'];
+  signUpSize?: VariantProps<typeof buttonVariants>['size'];
+  signInVariant?: VariantProps<typeof buttonVariants>['variant'];
+  signUpVariant?: VariantProps<typeof buttonVariants>['variant'];
+};
+
+export const SignInSignUp = async ({
+  className = 'flex gap-2',
+  signInSize = 'default',
+  signUpSize = 'sm',
+  signInVariant = 'outline',
+  signUpVariant = 'default',
+}: SignInSignUpProps) => {
+  return (
+    <div className={className}>
+      <Button asChild size={signInSize} variant={signInVariant}>
+        <Link href='/sign-in'>Sign In</Link>
+      </Button>
+      <Button asChild size={signUpSize} variant={signUpVariant}>
+        <Link href='/sign-up'>Sign Up</Link>
+      </Button>
+    </div>
+  );
+};

src/components/default/auth/SignInWithApple.tsx

@@ -5,8 +5,21 @@ import { useAuth } from '@/components/context/auth';
 import { useRouter } from 'next/navigation';
 import { useState } from 'react';
 import Image from 'next/image';
+import { Button, type buttonVariants } from '@/components/ui';
+import { type ComponentProps } from 'react';
+import { type VariantProps } from 'class-variance-authority';
 
-export const SignInWithApple = () => {
+type SignInWithAppleProps = {
+  className?: ComponentProps<'div'>['className'];
+  buttonSize?: VariantProps<typeof buttonVariants>['size'];
+  buttonVariant?: VariantProps<typeof buttonVariants>['variant'];
+};
+
+export const SignInWithApple = ({
+  className = 'my-4',
+  buttonSize = 'default',
+  buttonVariant = 'default',
+}: SignInWithAppleProps) => {
   const router = useRouter();
   const { isLoading, refreshUserData } = useAuth();
   const [statusMessage, setStatusMessage] = useState('');
@@ -38,8 +51,10 @@ export const SignInWithApple = () => {
   };
 
   return (
-    <form onSubmit={handleSignInWithApple} className='my-4'>
+    <form onSubmit={handleSignInWithApple} className={className}>
       <SubmitButton
+        size={buttonSize}
+        variant={buttonVariant}
         className='w-full cursor-pointer'
         disabled={isLoading || isSigningIn}
         pendingText='Redirecting...'

src/components/default/auth/SignInWithMicrosoft.tsx

@@ -4,8 +4,21 @@ import { StatusMessage, SubmitButton } from '@/components/default';
 import { useAuth } from '@/components/context/auth';
 import { useState } from 'react';
 import Image from 'next/image';
+import { Button, type buttonVariants } from '@/components/ui';
+import { type ComponentProps } from 'react';
+import { type VariantProps } from 'class-variance-authority';
 
-export const SignInWithMicrosoft = () => {
+type SignInWithMicrosoftProps = {
+  className?: ComponentProps<'div'>['className'];
+  buttonSize?: VariantProps<typeof buttonVariants>['size'];
+  buttonVariant?: VariantProps<typeof buttonVariants>['variant'];
+};
+
+export const SignInWithMicrosoft = ({
+  className = 'my-4',
+  buttonSize = 'default',
+  buttonVariant = 'default',
+}: SignInWithMicrosoftProps) => {
   const { isLoading } = useAuth();
   const [statusMessage, setStatusMessage] = useState('');
   const [isSigningIn, setIsSigningIn] = useState(false);
@@ -32,8 +45,10 @@ export const SignInWithMicrosoft = () => {
   };
 
   return (
-    <form onSubmit={handleSignInWithMicrosoft} className='my-4'>
+    <form onSubmit={handleSignInWithMicrosoft} className={className}>
       <SubmitButton
+        size={buttonSize}
+        variant={buttonVariant}
         className='w-full cursor-pointer'
         disabled={isLoading || isSigningIn}
         pendingText='Redirecting...'

src/components/default/auth/index.ts

@@ -0,0 +1,3 @@
+export * from './SignInSignUp';
+export * from './SignInWithApple';
+export * from './SignInWithMicrosoft';

src/components/default/navigation/auth/AvatarDropdown.tsx

@@ -77,7 +77,7 @@ const AvatarDropdown = () => {
             onClick={handleSignOut}
             className='w-full justify-center cursor-pointer'
           >
-            Log out
+            Sign Out
           </button>
         </DropdownMenuItem>
       </DropdownMenuContent>

src/components/default/navigation/auth/index.tsx

@@ -1,9 +1,8 @@
 'use server';
 
-import Link from 'next/link';
-import { Button } from '@/components/ui';
 import { getProfile } from '@/lib/actions';
 import AvatarDropdown from './AvatarDropdown';
+import { SignInSignUp } from '@/components/default/auth';
 
 const NavigationAuth = async () => {
   try {
@@ -13,17 +12,11 @@ const NavigationAuth = async () => {
         <AvatarDropdown />
       </div>
     ) : (
-      <div className='flex gap-2'>
+      <SignInSignUp />
-        <Button asChild size='default' variant={'outline'}>
-          <Link href='/sign-in'>Sign in</Link>
-        </Button>
-        <Button asChild size='sm' variant={'default'}>
-          <Link href='/sign-up'>Sign up</Link>
-        </Button>
-      </div>
     );
   } catch (error) {
-    console.error('Error getting profile:', error);
+    console.error(`Error getting profile: ${error as string}`);
+    return <SignInSignUp />;
   }
 };
 export default NavigationAuth;

src/components/default/sentry/TestSentry.tsx

@@ -27,6 +27,7 @@ export const TestSentryCard = () => {
 
   useEffect(() => {
     const checkConnectivity = async () => {
+      console.log('Checking Sentry SDK connectivity...');
       const result = await Sentry.diagnoseSdkConnectivity();
       setIsConnected(result !== 'sentry-unreachable');
     };

src/components/ui/button.tsx

@@ -25,6 +25,8 @@ const buttonVariants = cva(
         default: 'h-9 px-4 py-2 has-[>svg]:px-3',
         sm: 'h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5',
         lg: 'h-10 rounded-md px-6 has-[>svg]:px-4',
+        xl: 'h-12 rounded-md px-8 has-[>svg]:px-6',
+        xxl: 'h-14 rounded-md px-10 has-[>svg]:px-8',
         icon: 'size-9',
         smicon: 'size-6',
       },

src/env.js

@@ -10,7 +10,6 @@ export const env = createEnv({
     NODE_ENV: z
       .enum(['development', 'test', 'production'])
       .default('development'),
-    NEXT_RUNTIME: z.enum(['nodejs', 'edge']).default('nodejs'),
     SENTRY_AUTH_TOKEN: z.string().min(1),
     CI: z.enum(['true', 'false']).default('false'),
   },
@@ -37,7 +36,6 @@ export const env = createEnv({
    */
   runtimeEnv: {
     NODE_ENV: process.env.NODE_ENV,
-    NEXT_RUNTIME: process.env.NEXT_RUNTIME,
     SENTRY_AUTH_TOKEN: process.env.SENTRY_AUTH_TOKEN,
     CI: process.env.CI,
 

src/instrumentation.ts

@@ -2,9 +2,7 @@ import * as Sentry from '@sentry/nextjs';
 import type { Instrumentation } from 'next';
 
 export const register = async () => {
-  if (process.env.NEXT_RUNTIME === 'edge') {
+  await import('../sentry.server.config');
-    await import('../sentry.edge.config');
-  } else await import('../sentry.server.config');
 };
 
 export const onRequestError: Instrumentation.onRequestError = (...args) => {