refactor(validation): restucture api input and output validation

When testing api endpoints make sure to login with a real user (not with the dev hardcoded user) by either registering one with a password other than "password" or setting DISABLE_AUTH_TEST_USER to "true" (`DISABLE_AUTH_TEST_USER=true yarn dev`)

src/app/home/page.tsx

@@ -1,7 +1,7 @@
 'use client';
 
-import { RedirectButton } from '@/components/user/redirect-button';
-import { ThemePicker } from '@/components/user/theme-picker';
+import { RedirectButton } from '@/components/buttons/redirect-button';
+import { ThemePicker } from '@/components/misc/theme-picker';
 import { useGetApiUserMe } from '@/generated/api/user/user';
 
 export default function Home() {

src/app/layout.tsx

@@ -1,4 +1,4 @@
-import { ThemeProvider } from '@/components/theme-provider';
+import { ThemeProvider } from '@/components/wrappers/theme-provider';
 
 import type { Metadata } from 'next';
 import './globals.css';

src/app/login/page.tsx

@@ -1,17 +1,17 @@
 import { auth, providerMap } from '@/auth';
-import SSOLogin from '@/components/user/sso-login-button';
-import LoginForm from '@/components/user/login-form';
+import SSOLogin from '@/components/buttons/sso-login-button';
+import LoginForm from '@/components/forms/login-form';
 import { redirect } from 'next/navigation';
-import { Button } from '@/components/custom-ui/button';
+import { Button } from '@/components/ui/button';
 import Image from 'next/image';
-import { Separator } from '@/components/custom-ui/separator';
-import Logo from '@/components/logo';
+import { Separator } from '@/components/ui/separator';
+import Logo from '@/components/misc/logo';
 import {
   Card,
   CardContent,
   CardHeader,
 } from '@/components/custom-ui/login-card';
-import { ThemePicker } from '@/components/user/theme-picker';
+import { ThemePicker } from '@/components/misc/theme-picker';
 import {
   HoverCard,
   HoverCardTrigger,
@@ -26,7 +26,7 @@ export default async function LoginPage() {
   }
 
   return (
-    <div className='flex flex-col items-center min-h-screen'>
+    <div className='flex flex-col items-center max-h-screen overflow-y-auto'>
       <div className='flex flex-col items-center min-h-screen'>
         <div className='fixed top-4 right-4'>
           <ThemePicker />
@@ -51,20 +51,20 @@ export default async function LoginPage() {
             </CardContent>
           </Card>
         </div>
+        <HoverCard>
+          <HoverCardTrigger>
+            <Button variant='link'>made with love</Button>
+          </HoverCardTrigger>
+          <HoverCardContent className='flex items-center justify-center'>
+            <Image
+              src='https://img1.wikia.nocookie.net/__cb20140808110649/clubpenguin/images/a/a1/Action_Dance_Light_Blue.gif'
+              width='150'
+              height='150'
+              alt='dancing penguin'
+            ></Image>
+          </HoverCardContent>
+        </HoverCard>
       </div>
-      <HoverCard>
-        <HoverCardTrigger>
-          <Button variant='link'>made with love</Button>
-        </HoverCardTrigger>
-        <HoverCardContent className='flex items-center justify-center'>
-          <Image
-            src='https://img1.wikia.nocookie.net/__cb20140808110649/clubpenguin/images/a/a1/Action_Dance_Light_Blue.gif'
-            width='150'
-            height='150'
-            alt='dancing penguin'
-          ></Image>
-        </HoverCardContent>
-      </HoverCard>
     </div>
   );
 }

src/app/logout/page.tsx

@@ -1,5 +1,5 @@
 import { signOut } from '@/auth';
-import { Button } from '@/components/custom-ui/button';
+import { Button } from '@/components/ui/button';
 import {
   Card,
   CardContent,

src/app/settings/page.tsx

@@ -1,4 +1,4 @@
-import { Button } from '@/components/custom-ui/button';
+import { Button } from '@/components/ui/button';
 import {
   Card,
   CardContent,

src/components/buttons/icon-button.tsx

@@ -1,4 +1,4 @@
-import { Button } from '@/components/custom-ui/button';
+import { Button } from '@/components/ui/button';
 
 import { IconProp } from '@fortawesome/fontawesome-svg-core';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';

src/components/buttons/redirect-button.tsx

@@ -1,4 +1,4 @@
-import { Button } from '../custom-ui/button';
+import { Button } from '../ui/button';
 import Link from 'next/link';
 
 export function RedirectButton({

src/components/buttons/sso-login-button.tsx

@@ -1,5 +1,5 @@
 import { signIn } from '@/auth';
-import { IconButton } from '@/components/icon-button';
+import { IconButton } from '@/components/buttons/icon-button';
 import { faOpenid } from '@fortawesome/free-brands-svg-icons';
 
 export default function SSOLogin({

src/components/forms/login-form.tsx

@@ -3,8 +3,8 @@
 import React, { useState, useRef } from 'react';
 import { useRouter } from 'next/navigation';
 
-import LabeledInput from '@/components/labeled-input';
-import { Button } from '@/components/custom-ui/button';
+import LabeledInput from '@/components/custom-ui/labeled-input';
+import { Button } from '@/components/ui/button';
 import useZodForm from '@/lib/hooks/useZodForm';
 import { loginSchema, registerSchema } from '@/lib/auth/validation';
 import { loginAction } from '@/lib/auth/login';

src/components/misc/theme-picker.tsx

@@ -4,7 +4,7 @@ import * as React from 'react';
 import { Moon, Sun } from 'lucide-react';
 import { useTheme } from 'next-themes';
 
-import { Button } from '@/components/custom-ui/button';
+import { Button } from '@/components/ui/button';
 import {
   DropdownMenu,
   DropdownMenuContent,