upgrade

.gitignore

@@ -1,9 +1,14 @@
+.DS_Store
+/node_modules/
+
+# React Router
+/.react-router/
+/build/
+
+# Env vars
 .env
 !.env.example
-.DS_Store
-.react-router
-build
-node_modules
 
+# Prisma
 prisma/dev.db-journal
-prisma/dev.db
+prisma/dev.db

.prettierignore

@@ -0,0 +1 @@
+pnpm-lock.yaml

app/components/empty-state.tsx

@@ -13,7 +13,7 @@ export function EmptyState({
     <div className="flex flex-col items-center gap-1 text-center">
       <h3 className="text-2xl font-bold tracking-tight">{title}</h3>
       {description ? (
-        <p className="text-sm text-muted-foreground">{description}</p>
+        <p className="text-muted-foreground text-sm">{description}</p>
       ) : null}
       {children ? <div className="mt-4">{children}</div> : null}
     </div>

app/components/forms.tsx

@@ -1,4 +1,4 @@
-import { cx } from "~/lib/utils";
+import { cn } from "~/lib/utils";
 
 export type ListOfErrors = Array<string | null | undefined> | null | undefined;
 
@@ -17,9 +17,9 @@ export function ErrorList({
   }
 
   return (
-    <ul id={id} className={cx("grid gap-1", className)}>
+    <ul id={id} className={cn("grid gap-1", className)}>
       {errorsToShow.map((error) => (
-        <li key={error} className="text-[0.8rem] text-destructive">
+        <li key={error} className="text-destructive text-[0.8rem]">
           {error}
         </li>
       ))}

app/components/logo.tsx

@@ -1,11 +1,11 @@
-import { cx } from "~/lib/utils";
+import { cn } from "~/lib/utils";
 
 export function Logo({ className }: { className?: string }) {
   return (
     <svg
       viewBox="0 0 200 200"
       fill="currentColor"
-      className={cx("text-primary", className)}
+      className={cn("text-primary", className)}
       aria-hidden
     >
       <path

app/components/note-form.tsx

@@ -89,7 +89,7 @@ export function NoteForm({
         disabled={isSavingEdits}
         className="relative disabled:pointer-events-none disabled:opacity-50"
       >
-        <div className="relative overflow-hidden rounded-lg border bg-background focus-within:ring-1 focus-within:ring-ring">
+        <div className="bg-background focus-within:ring-ring relative overflow-hidden rounded-lg border focus-within:ring-1">
           <Textarea
             ref={textareaRef}
             rows={3}

app/components/ui/alert.tsx

@@ -1,20 +1,23 @@
 import { Slot } from "@radix-ui/react-slot";
+import { cva, type VariantProps } from "class-variance-authority";
 import { forwardRef, type HTMLAttributes } from "react";
-import { cva, cx, type VariantProps } from "~/lib/utils";
+import { cn } from "~/lib/utils";
 
-export const alertVariants = cva({
-  base: "relative w-full rounded-lg border px-4 py-3 text-sm [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground [&>svg~*]:pl-7",
-  variants: {
-    variant: {
-      default: "bg-background text-foreground",
-      destructive:
-        "border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive",
+export const alertVariants = cva(
+  "relative w-full rounded-lg border px-4 py-3 text-sm [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground [&>svg~*]:pl-7",
+  {
+    variants: {
+      variant: {
+        default: "bg-background text-foreground",
+        destructive:
+          "border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
     },
   },
-  defaultVariants: {
-    variant: "default",
-  },
-});
+);
 
 export const Alert = forwardRef<
   HTMLDivElement,
@@ -23,7 +26,7 @@ export const Alert = forwardRef<
   <div
     ref={ref}
     role="alert"
-    className={cx(alertVariants({ variant }), className)}
+    className={cn(alertVariants({ variant }), className)}
     {...props}
   />
 ));
@@ -40,7 +43,7 @@ export const AlertTitle = forwardRef<
   return (
     <Comp
       ref={ref}
-      className={cx("mb-1 font-medium leading-none tracking-tight", className)}
+      className={cn("mb-1 leading-none font-medium tracking-tight", className)}
       {...props}
     />
   );
@@ -53,7 +56,7 @@ export const AlertDescription = forwardRef<
 >(({ className, ...props }, ref) => (
   <div
     ref={ref}
-    className={cx("text-sm [&_p]:leading-relaxed", className)}
+    className={cn("text-sm [&_p]:leading-relaxed", className)}
     {...props}
   />
 ));

app/components/ui/avatar.tsx

@@ -2,17 +2,17 @@ import * as AvatarPrimitive from "@radix-ui/react-avatar";
 import {
   forwardRef,
   type ComponentPropsWithoutRef,
-  type ElementRef,
+  type ComponentRef,
 } from "react";
-import { cx } from "~/lib/utils";
+import { cn } from "~/lib/utils";
 
 export const Avatar = forwardRef<
-  ElementRef<typeof AvatarPrimitive.Root>,
+  ComponentRef<typeof AvatarPrimitive.Root>,
   ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>
 >(({ className, ...props }, ref) => (
   <AvatarPrimitive.Root
     ref={ref}
-    className={cx(
+    className={cn(
       "relative flex size-10 shrink-0 overflow-hidden rounded-full",
       className,
     )}
@@ -22,25 +22,25 @@ export const Avatar = forwardRef<
 Avatar.displayName = AvatarPrimitive.Root.displayName;
 
 export const AvatarImage = forwardRef<
-  ElementRef<typeof AvatarPrimitive.Image>,
+  ComponentRef<typeof AvatarPrimitive.Image>,
   ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>
 >(({ className, ...props }, ref) => (
   <AvatarPrimitive.Image
     ref={ref}
-    className={cx("aspect-square size-full", className)}
+    className={cn("aspect-square size-full", className)}
     {...props}
   />
 ));
 AvatarImage.displayName = AvatarPrimitive.Image.displayName;
 
 export const AvatarFallback = forwardRef<
-  ElementRef<typeof AvatarPrimitive.Fallback>,
+  ComponentRef<typeof AvatarPrimitive.Fallback>,
   ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>
 >(({ className, ...props }, ref) => (
   <AvatarPrimitive.Fallback
     ref={ref}
-    className={cx(
-      "flex size-full items-center justify-center rounded-full bg-muted",
+    className={cn(
+      "bg-muted flex size-full items-center justify-center rounded-full",
       className,
     )}
     {...props}

app/components/ui/breadcrumb.tsx

@@ -6,7 +6,7 @@ import {
   type ComponentPropsWithoutRef,
   type ReactNode,
 } from "react";
-import { cx } from "~/lib/utils";
+import { cn } from "~/lib/utils";
 
 export const Breadcrumb = forwardRef<
   HTMLElement,
@@ -22,8 +22,8 @@ export const BreadcrumbList = forwardRef<
 >(({ className, ...props }, ref) => (
   <ol
     ref={ref}
-    className={cx(
-      "flex flex-wrap items-center gap-1.5 break-words text-sm text-muted-foreground sm:gap-2.5",
+    className={cn(
+      "text-muted-foreground flex flex-wrap items-center gap-1.5 text-sm break-words sm:gap-2.5",
       className,
     )}
     {...props}
@@ -37,7 +37,7 @@ export const BreadcrumbItem = forwardRef<
 >(({ className, ...props }, ref) => (
   <li
     ref={ref}
-    className={cx("inline-flex items-center gap-1.5", className)}
+    className={cn("inline-flex items-center gap-1.5", className)}
     {...props}
   />
 ));
@@ -54,7 +54,7 @@ export const BreadcrumbLink = forwardRef<
   return (
     <Comp
       ref={ref}
-      className={cx("transition-colors hover:text-foreground", className)}
+      className={cn("hover:text-foreground transition-colors", className)}
       {...props}
     />
   );
@@ -68,7 +68,7 @@ export const BreadcrumbPage = forwardRef<
   <span
     ref={ref}
     role="link"
-    className={cx("font-normal text-foreground", className)}
+    className={cn("text-foreground font-normal", className)}
     aria-disabled="true"
     aria-current="page"
     {...props}
@@ -83,7 +83,7 @@ export const BreadcrumbSeparator = ({
 }: ComponentProps<"li">) => (
   <li
     role="presentation"
-    className={cx("[&_svg]:size-4", className)}
+    className={cn("[&_svg]:size-4", className)}
     aria-hidden
     {...props}
   >
@@ -99,7 +99,7 @@ export const BreadcrumbEllipsis = ({
   <span
     role="presentation"
     aria-hidden="true"
-    className={cx(
+    className={cn(
       "flex size-9 items-center justify-center [&_svg]:size-4 [&_svg]:shrink-0",
       className,
     )}