update deps & user profile handling

apps/nextjs/package.json

@@ -22,14 +22,14 @@
     "@icons-pack/react-simple-icons": "9.3.0",
     "@t3-oss/env-nextjs": "0.7.3",
     "@tanstack/react-query": "5.17.15",
-    "@tanstack/react-query-devtools": "5.17.15",
+    "@tanstack/react-query-devtools": "5.17.18",
     "@tanstack/react-query-next-experimental": "5.17.15",
     "@trpc/client": "next",
     "@trpc/next": "next",
     "@trpc/react-query": "next",
     "@trpc/server": "next",
     "lucide-react": "^0.312.0",
-    "next": "14.0.4",
+    "next": "14.1.0",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "superjson": "2.2.1",

apps/nextjs/src/app/(authorized)/layout.tsx

@@ -1,10 +1,20 @@
+import { redirect } from "next/navigation"
+
+import { auth } from "@acme/auth"
+
 import { SiteHeader } from "@/components/site-header"
 
-export default function RootLayout({
+export default async function RootLayout({
   children,
 }: {
   children: React.ReactNode
 }) {
+  const session = await auth()
+
+  if (!session.user) {
+    redirect("/auth")
+  }
+
   return (
     <>
       <SiteHeader />

apps/nextjs/src/app/(authorized)/users/settings/page.tsx → apps/nextjs/src/app/(authorized)/users/settings/(profile)/page.tsx

@@ -2,9 +2,8 @@ import { Suspense } from "react"
 import { redirect } from "next/navigation"
 
 import { auth } from "@acme/auth"
-import { Skeleton } from "@acme/ui/skeleton"
 
-import { UpdateProfileForm } from "@/app/(authorized)/users/settings/components/update-profile"
+import { UpdateProfileForm } from "@/app/(authorized)/users/settings/components/update-profile-form"
 import { api } from "@/trpc/server"
 
 export default async function UsersSettingsPage() {
@@ -17,8 +16,8 @@ export default async function UsersSettingsPage() {
   const currentUser = await api.user.profile()
 
   return (
-    <>
+    <div className="flex w-full justify-center">
       <UpdateProfileForm user={currentUser} />
-    </>
+    </div>
   )
 }

apps/nextjs/src/app/(authorized)/users/settings/components/update-profile.tsx → apps/nextjs/src/app/(authorized)/users/settings/components/update-profile-form.tsx

@@ -3,16 +3,19 @@
 import { use } from "react"
 
 import type { RouterOutputs } from "@acme/api"
+import { auth, lucia } from "@acme/auth"
 import { Button } from "@acme/ui/button"
 import {
   Form,
   FormControl,
   FormField,
   FormItem,
+  FormLabel,
   FormMessage,
   useForm,
 } from "@acme/ui/form"
 import { Input } from "@acme/ui/input"
+import { Label } from "@acme/ui/label"
 import { toast } from "@acme/ui/toast"
 import { UpdateProfileSchema } from "@acme/validators"
 
@@ -21,29 +24,21 @@ import { api } from "@/trpc/react"
 export function UpdateProfileForm(props: {
   user: RouterOutputs["user"]["profile"]
 }) {
-  const { data: user } = api.user.profile.useQuery(undefined, {
-    initialData: props.user,
-  })
-
-  console.log({ user, props })
-
   const utils = api.useUtils()
   const form = useForm({
     schema: UpdateProfileSchema,
     defaultValues: {
-      name: user?.name ?? "",
+      name: props?.user?.name ?? "",
     },
   })
 
   const updateProfile = api.user.updateProfile.useMutation({
-    onSuccess: async (data, variables) => {
+    onSuccess: async () => {
       await utils.user.invalidate()
-      form.reset({ name: variables.name })
       toast.success("Profile updated.")
     },
 
     onError: (err) => {
-      console.log(err)
       toast.error(
         err?.data?.code === "UNAUTHORIZED"
           ? "You must be logged in to update your profile"
@@ -65,8 +60,9 @@ export function UpdateProfileForm(props: {
           name="name"
           render={({ field }) => (
             <FormItem>
+              <FormLabel>Username</FormLabel>
               <FormControl>
-                <Input {...field} placeholder="Name" />
+                <Input {...field} placeholder="Username" />
               </FormControl>
               <FormMessage />
             </FormItem>

apps/nextjs/src/app/(authorized)/users/settings/layout.tsx

@@ -27,14 +27,14 @@ interface SettingsLayoutProps {
 export default function SettingsLayout({ children }: SettingsLayoutProps) {
   return (
     <>
-      <div className="hidden space-y-6 p-10 pb-16 md:block">
+      <div className="hidden space-y-6 py-16 md:block">
         <div className="space-y-0.5">
           <h2 className="text-2xl font-bold tracking-tight">Settings</h2>
           <p className="text-muted-foreground">Manage your account settings</p>
         </div>
         <Separator className="my-6" />
         <div className="flex flex-col space-y-8 lg:flex-row lg:space-x-12 lg:space-y-0">
-          <aside className="-mx-4 lg:w-1/5">
+          <aside className="lg:w-1/5">
             <SettingsSidebar items={navItems} />
           </aside>
           <div className="flex-1">{children}</div>

apps/nextjs/src/app/(authorized)/users/settings/sessions/page.tsx

@@ -1,6 +1,6 @@
 import { redirect } from "next/navigation"
 import { userAgentFromString } from "next/server"
-import { BellRing, MonitorIcon, SmartphoneIcon, Trash2Icon } from "lucide-react"
+import { MonitorIcon, SmartphoneIcon, Trash2Icon } from "lucide-react"
 
 import { auth, lucia } from "@acme/auth"
 import { Button } from "@acme/ui/button"
@@ -45,13 +45,13 @@ export default async function SessionsPage() {
               {ele.id !== session.session.id && (
                 <Button
                   size="icon"
-                  variant="outline"
+                  variant="destructive"
                   onClick={async () => {
                     "use server"
                     await invalivateSessionAction(ele.id)
                   }}
                 >
-                  <Trash2Icon />
+                  <Trash2Icon className="h-4 w-4" />
                 </Button>
               )}
             </div>

apps/nextjs/src/app/globals.css

@@ -5,46 +5,80 @@
 @layer base {
   :root {
     --background: 0 0% 100%;
-    --foreground: 240 10% 3.9%;
-    --card: 0 0% 100%;
-    --card-foreground: 240 10% 3.9%;
+    --foreground: 222.2 47.4% 11.2%;
+
+    --muted: 210 40% 96.1%;
+    --muted-foreground: 215.4 16.3% 46.9%;
+
     --popover: 0 0% 100%;
-    --popover-foreground: 240 10% 3.9%;
-    --primary: 327 66% 69%;
-    --primary-foreground: 337 65.5% 17.1%;
-    --secondary: 240 4.8% 95.9%;
-    --secondary-foreground: 240 5.9% 10%;
-    --muted: 240 4.8% 95.9%;
-    --muted-foreground: 240 3.8% 46.1%;
-    --accent: 240 4.8% 95.9%;
-    --accent-foreground: 240 5.9% 10%;
-    --destructive: 0 72.22% 50.59%;
-    --destructive-foreground: 0 0% 98%;
-    --border: 240 5.9% 90%;
-    --input: 240 5.9% 90%;
-    --ring: 240 5% 64.9%;
+    --popover-foreground: 222.2 47.4% 11.2%;
+
+    --border: 214.3 31.8% 91.4%;
+    --input: 214.3 31.8% 91.4%;
+
+    --card: 0 0% 100%;
+    --card-foreground: 222.2 47.4% 11.2%;
+
+    --primary: 222.2 47.4% 11.2%;
+    --primary-foreground: 210 40% 98%;
+
+    --secondary: 210 40% 96.1%;
+    --secondary-foreground: 222.2 47.4% 11.2%;
+
+    --accent: 210 40% 96.1%;
+    --accent-foreground: 222.2 47.4% 11.2%;
+
+    --destructive: 0 100% 50%;
+    --destructive-foreground: 210 40% 98%;
+
+    --ring: 215 20.2% 65.1%;
+
     --radius: 0.5rem;
   }
 
   .dark {
-    --background: 240 10% 3.9%;
-    --foreground: 0 0% 98%;
-    --card: 240 10% 3.9%;
-    --card-foreground: 0 0% 98%;
-    --popover: 240 10% 3.9%;
-    --popover-foreground: 0 0% 98%;
-    --primary: 327 66% 69%;
-    --primary-foreground: 337 65.5% 17.1%;
-    --secondary: 240 3.7% 15.9%;
-    --secondary-foreground: 0 0% 98%;
-    --muted: 240 3.7% 15.9%;
-    --muted-foreground: 240 5% 64.9%;
-    --accent: 240 3.7% 15.9%;
-    --accent-foreground: 0 0% 98%;
-    --destructive: 0 62.8% 30.6%;
-    --destructive-foreground: 0 85.7% 97.3%;
-    --border: 240 3.7% 15.9%;
-    --input: 240 3.7% 15.9%;
-    --ring: 240 4.9% 83.9%;
+    --background: 224 71% 4%;
+    --foreground: 213 31% 91%;
+
+    --muted: 223 47% 11%;
+    --muted-foreground: 215.4 16.3% 56.9%;
+
+    --accent: 216 34% 17%;
+    --accent-foreground: 210 40% 98%;
+
+    --popover: 224 71% 4%;
+    --popover-foreground: 215 20.2% 65.1%;
+
+    --border: 216 34% 17%;
+    --input: 216 34% 17%;
+
+    --card: 224 71% 4%;
+    --card-foreground: 213 31% 91%;
+
+    --primary: 210 40% 98%;
+    --primary-foreground: 222.2 47.4% 1.2%;
+
+    --secondary: 222.2 47.4% 11.2%;
+    --secondary-foreground: 210 40% 98%;
+
+    //--destructive: 0 63% 31%;
+    --destructive: 0 100% 31%;
+    --destructive-foreground: 210 40% 98%;
+
+    --ring: 216 34% 17%;
+
+    --radius: 0.5rem;
+  }
+}
+
+@layer base {
+  * {
+    @apply border-border;
+  }
+  body {
+    @apply bg-background text-foreground;
+    font-feature-settings:
+      "rlig" 1,
+      "calt" 1;
   }
 }

apps/nextjs/src/components/user-menu.tsx

@@ -1,7 +1,8 @@
+"use client"
+
 import Link from "next/link"
 import { UserIcon } from "lucide-react"
 
-import { auth } from "@acme/auth"
 import { Button } from "@acme/ui/button"
 import {
   DropdownMenu,
@@ -14,9 +15,10 @@ import {
 } from "@acme/ui/dropdown-menu"
 
 import { logoutAction } from "@/actions/logout"
+import { api } from "@/trpc/react"
 
-export async function UserMenu() {
-  const session = await auth()
+export function UserMenu() {
+  const { data: user } = api.user.profile.useQuery()
 
   return (
     <DropdownMenu>
@@ -29,7 +31,7 @@ export async function UserMenu() {
         <DropdownMenuLabel className="font-normal">
           <div className="flex flex-col space-y-1">
             <p className="text-sm font-medium leading-none">
-              Hello {session.user?.name}
+              Hello {user?.name}
             </p>
           </div>
         </DropdownMenuLabel>

packages/auth/package.json

@@ -20,7 +20,7 @@
     "@t3-oss/env-nextjs": "0.7.3",
     "arctic": "0.10.5",
     "lucia": "beta",
-    "next": "14.0.4",
+    "next": "14.1.0",
     "oslo": "0.27.1",
     "react": "18.2.0",
     "react-dom": "18.2.0",

packages/db/package.json

@@ -17,7 +17,7 @@
   },
   "dependencies": {
     "drizzle-orm": "0.29.3",
-    "mysql2": "3.7.0"
+    "mysql2": "3.7.1"
   },
   "devDependencies": {
     "@acme/eslint-config": "workspace:*",

packages/ui/src/button.tsx

@@ -6,36 +6,35 @@ import { cva } from "class-variance-authority"
 import { cn } from "."
 
 const buttonVariants = cva(
-  "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50",
+  "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
   {
     variants: {
       variant: {
-        primary:
-          "bg-primary text-primary-foreground shadow hover:bg-primary/90",
+        default: "bg-primary text-primary-foreground hover:bg-primary/90",
         destructive:
-          "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
+          "bg-destructive text-destructive-foreground hover:bg-destructive/90",
         outline:
-          "border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
+          "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
         secondary:
-          "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
+          "bg-secondary text-secondary-foreground hover:bg-secondary/80",
         ghost: "hover:bg-accent hover:text-accent-foreground",
         link: "text-primary underline-offset-4 hover:underline",
       },
       size: {
-        sm: "h-8 rounded-md px-3 text-xs",
-        md: "h-9 px-4 py-2",
-        lg: "h-10 rounded-md px-8",
-        icon: "size-9",
+        default: "h-10 px-4 py-2",
+        sm: "h-9 rounded-md px-3",
+        lg: "h-11 rounded-md px-8",
+        icon: "h-10 w-10",
       },
     },
     defaultVariants: {
-      variant: "primary",
-      size: "md",
+      variant: "default",
+      size: "default",
     },
   },
 )
 
-interface ButtonProps
+export interface ButtonProps
   extends React.ButtonHTMLAttributes<HTMLButtonElement>,
     VariantProps<typeof buttonVariants> {
   asChild?: boolean

packages/validators/src/index.ts

@@ -6,5 +6,5 @@ export const CreatePostSchema = z.object({
 })
 
 export const UpdateProfileSchema = z.object({
-  name: z.string(),
+  name: z.string().min(1),
 })