Feature/upgrade dependencies (#14)

app/(auth)/auth-code-error/page.tsx

@@ -0,0 +1,19 @@
+import { Metadata } from "next";
+
+import { Heading3 } from "@/components/ui/typography/Heading3";
+
+export const metadata: Metadata = {
+  title: "Error",
+  description: "Failed to sign in",
+};
+
+export default async function AuthCodeError() {
+  return (
+    <>
+      <div className="flex flex-col space-y-2 text-center">
+        <Heading3>Error</Heading3>
+        <p className="text-sm text-muted-foreground">Failed to sign in</p>
+      </div>
+    </>
+  );
+}

app/(auth)/layout.tsx

@@ -8,7 +8,7 @@ export default function AuthLayout({ children }: AuthLayoutProps) {
   return (
     <div className="min-h-screen">
       <div className="container relative grid h-screen flex-col items-center justify-center lg:max-w-none lg:grid-cols-2 lg:px-0">
-        <div className="absolute hidden h-full w-full flex-col bg-muted p-4 text-white dark:block dark:border-r lg:relative lg:flex lg:p-10">
+        <div className="absolute hidden size-full flex-col bg-muted p-4 text-white dark:block dark:border-r lg:relative lg:flex lg:p-10">
           <div
             className="absolute inset-0 bg-ring bg-right-bottom brightness-50 lg:bg-center lg:brightness-100"
             style={{

app/api/auth/callback/route.ts

@@ -4,18 +4,21 @@ import { NextResponse } from "next/server";
 import { createClient } from "@/lib/supabase/server";
 
 export async function GET(request: Request) {
-  // The `/auth/callback` route is required for the server-side auth flow implemented
-  // by the Auth Helpers package. It exchanges an auth code for the user's session.
-  // https://supabase.com/docs/guides/auth/auth-helpers/nextjs#managing-sign-in-with-code-exchange
-  const requestUrl = new URL(request.url);
-  const code = requestUrl.searchParams.get("code");
+  const { searchParams, origin } = new URL(request.url);
+  const code = searchParams.get("code");
+  // if "next" is in param, use it as the redirect URL
+  const next = searchParams.get("next") ?? "/";
 
   if (code) {
     const cookieStore = cookies();
     const supabase = createClient(cookieStore);
-    await supabase.auth.exchangeCodeForSession(code);
+
+    const { error } = await supabase.auth.exchangeCodeForSession(code);
+    if (!error) {
+      return NextResponse.redirect(`${origin}${next}`);
+    }
   }
 
-  // URL to redirect to after sign in process completes
-  return NextResponse.redirect(requestUrl.origin);
+  // return the user to an error page with instructions
+  return NextResponse.redirect(`${origin}/auth-code-error`);
 }

app/apps/chat/loading.tsx

@@ -15,12 +15,12 @@ export default function Page() {
           <Separator />
           <div className="flex grow basis-0 justify-center pt-4 lg:overflow-y-auto lg:pb-0">
             <div className="flex w-full flex-col items-center justify-center">
-              <Loader className="h-8 w-8 animate-spin" />
+              <Loader className="size-8 animate-spin" />
             </div>
           </div>
         </div>
       </div>
-      <div className="h-0 w-0 lg:h-auto lg:max-h-[calc(100vh_-_60px)] lg:w-[450px] lg:border-x lg:p-4">
+      <div className="size-0 lg:h-auto lg:max-h-[calc(100vh_-_60px)] lg:w-[450px] lg:border-x lg:p-4">
         <Skeleton className="mt-2 h-4 w-[210px]" />
         <div className="mt-4 grid grid-cols-1 gap-2">
           <Skeleton className="h-2 w-[320px]" />

app/apps/layout.tsx

@@ -34,7 +34,7 @@ export default async function AppLayout({ children }: AppLayoutProps) {
         <div className="flex flex-1 flex-row">
           <div className="flex flex-1 flex-col overflow-y-auto">
             <div className="relative flex flex-1 bg-background">
-              <div className="flex h-0 w-0 flex-col justify-between overflow-x-hidden transition-[width] lg:h-auto lg:max-h-[calc(100vh_-_65px)] lg:w-[300px] lg:border-r">
+              <div className="flex size-0 flex-col justify-between overflow-x-hidden transition-[width] lg:h-auto lg:max-h-[calc(100vh_-_65px)] lg:w-[300px] lg:border-r">
                 <ChatHistory data={chats} />
               </div>
               {children}

app/layout.tsx

@@ -1,6 +1,7 @@
 import { AxiomWebVitals } from "next-axiom";
 
 import "./globals.css";
+
 import { Metadata, Viewport } from "next";
 import { Analytics } from "@vercel/analytics/react";
 import { GeistMono, GeistSans } from "geist/font";

components/modules/apps/app-side-bar/AppSideBarItem.tsx

@@ -25,7 +25,7 @@ export const AppSideBarItem = ({
                 <AvatarImage src={logoUrl} className="w-12" alt={name} />
               ) : null}
               <AvatarFallback>
-                <div className="h-12 w-12 bg-card-foreground" />
+                <div className="size-12 bg-card-foreground" />
               </AvatarFallback>
             </Avatar>
           </div>

components/modules/apps/chat/ChatHistoryItem.tsx

@@ -47,7 +47,7 @@ export const ChatHistoryItem = ({
         )}
       >
         <div className="flex h-full max-w-full flex-1 items-center">
-          <div className="flex h-full w-full justify-between">
+          <div className="flex size-full justify-between">
             <Link
               href={`/apps/chat/${chat.id}`}
               onClick={closeDrawer}

components/modules/apps/chat/ChatPanel.tsx

@@ -11,17 +11,17 @@ import { v4 as uuidv4 } from "uuid";
 import { Chat, Message as SupabaseMessage } from "@/lib/db";
 import { useEnterSubmit } from "@/hooks/useEnterSubmit";
 import { Button } from "@/components/ui/Button";
-import { Separator } from "@/components/ui/Separator";
-import { Sheet, SheetContent, SheetTrigger } from "@/components/ui/Sheet";
 import { ChatInput, ChatList } from "@/components/ui/chat";
 import { ChatScrollAnchor } from "@/components/ui/common/ChatScrollAnchor";
+import { Separator } from "@/components/ui/Separator";
+import { Sheet, SheetContent, SheetTrigger } from "@/components/ui/Sheet";
 import { toast } from "@/components/ui/use-toast";
 
-import { ChatHistoryDrawer } from "./ChatHistoryDrawer";
-import { Header } from "./Header";
 import { revalidateChatLayout } from "./action";
+import { ChatHistoryDrawer } from "./ChatHistoryDrawer";
 import { ControlSidebar } from "./control-side-bar";
 import { defaultSystemPrompt } from "./control-side-bar/data/models";
+import { Header } from "./Header";
 import { ChatParamSchema } from "./schema";
 import { ChatParams } from "./types";
 import { buildChatRequestParams } from "./utils";
@@ -234,7 +234,7 @@ export const ChatPanel = ({
             <SheetContent className="w-[400px] overflow-y-auto sm:w-[540px]">
               <div className="pt-4">{renderControlSidebar()}</div>
             </SheetContent>
-            <div className="h-0 w-0 overflow-x-hidden transition-[width] lg:h-auto lg:max-h-[calc(100vh_-_65px)] lg:w-[450px] lg:border-x">
+            <div className="size-0 overflow-x-hidden transition-[width] lg:h-auto lg:max-h-[calc(100vh_-_65px)] lg:w-[450px] lg:border-x">
               {renderControlSidebar()}
             </div>
           </FormProvider>

components/modules/apps/chat/control-side-bar/ControlSidebar.tsx

@@ -15,14 +15,14 @@ import { toast } from "@/components/ui/use-toast";
 
 import { SystemPromptControl } from "../SystemPromptControl";
 import { ChatParams } from "../types";
+import { updateChatSettings } from "./action";
+import { models, types } from "./data/models";
 import { FrequencyPenaltySelector } from "./FrequencyPenaltySelector";
 import { MaxLengthSelector } from "./MaxLengthSelector";
 import { ModelSelector } from "./ModelSelector";
 import { PresencePenaltySelector } from "./PresencePenaltySelector";
 import { TemperatureSelector } from "./TemperatureSelector";
 import { TopPSelector } from "./TopPSelector";
-import { updateChatSettings } from "./action";
-import { models, types } from "./data/models";
 
 type ControlSidebarProps = Pick<UseChatHelpers, "setMessages" | "messages"> & {
   closeSidebarSheet?: () => void;

components/modules/apps/chat/control-side-bar/FrequencyPenaltySelector.tsx

@@ -3,12 +3,12 @@
 import * as React from "react";
 import { useFormContext } from "react-hook-form";
 
+import { SliderField } from "@/components/ui/form/form-fields";
 import {
   HoverCard,
   HoverCardContent,
   HoverCardTrigger,
 } from "@/components/ui/HoverCard";
-import { SliderField } from "@/components/ui/form/form-fields";
 
 import { ChatParams } from "../types";
 
@@ -26,7 +26,7 @@ export function FrequencyPenaltySelector() {
             min={-2}
             max={2}
             step={0.1}
-            className="[&_[role=slider]]:h-4 [&_[role=slider]]:w-4"
+            className="[&_[role=slider]]:size-4"
             control={control}
             formState={formState}
             aria-label="Word Variation"

components/modules/apps/chat/control-side-bar/MaxLengthSelector.tsx

@@ -3,12 +3,12 @@
 import * as React from "react";
 import { useFormContext } from "react-hook-form";
 
+import { SliderField } from "@/components/ui/form/form-fields";
 import {
   HoverCard,
   HoverCardContent,
   HoverCardTrigger,
 } from "@/components/ui/HoverCard";
-import { SliderField } from "@/components/ui/form/form-fields";
 
 import { ChatParams } from "../types";
 
@@ -26,7 +26,7 @@ export function MaxLengthSelector() {
             min={0}
             max={1000}
             step={10}
-            className="[&_[role=slider]]:h-4 [&_[role=slider]]:w-4"
+            className="[&_[role=slider]]:size-4"
             control={control}
             formState={formState}
             aria-label="Length Limit"

components/modules/apps/chat/control-side-bar/ModelSelector.tsx

@@ -91,7 +91,7 @@ export function ModelSelector({ models, types, ...props }: ModelSelectorProps) {
             className="w-full justify-between"
           >
             {selectedModel ? selectedModel.name : "Select a model..."}
-            <CaretSortIcon className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+            <CaretSortIcon className="ml-2 size-4 shrink-0 opacity-50" />
           </Button>
         </PopoverTrigger>
         <PopoverContent align="end" className="w-[250px] p-0">
@@ -172,7 +172,7 @@ function ModelItem({ model, isSelected, onSelect, onPeek }: ModelItemProps) {
       {model.name}
       <CheckIcon
         className={cn(
-          "ml-auto h-4 w-4",
+          "ml-auto size-4",
           isSelected ? "opacity-100" : "opacity-0"
         )}
       />

components/modules/apps/chat/control-side-bar/PresencePenaltySelector.tsx

@@ -3,12 +3,12 @@
 import * as React from "react";
 import { useFormContext } from "react-hook-form";
 
+import { SliderField } from "@/components/ui/form/form-fields";
 import {
   HoverCard,
   HoverCardContent,
   HoverCardTrigger,
 } from "@/components/ui/HoverCard";
-import { SliderField } from "@/components/ui/form/form-fields";
 
 import { ChatParams } from "../types";
 
@@ -26,7 +26,7 @@ export function PresencePenaltySelector() {
             min={-2}
             max={2}
             step={0.1}
-            className="[&_[role=slider]]:h-4 [&_[role=slider]]:w-4"
+            className="[&_[role=slider]]:size-4"
             control={control}
             formState={formState}
             aria-label="Topic Relevance"

components/modules/apps/chat/control-side-bar/TemperatureSelector.tsx

@@ -3,12 +3,12 @@
 import * as React from "react";
 import { useFormContext } from "react-hook-form";
 
+import { SliderField } from "@/components/ui/form/form-fields/SliderField";
 import {
   HoverCard,
   HoverCardContent,
   HoverCardTrigger,
 } from "@/components/ui/HoverCard";
-import { SliderField } from "@/components/ui/form/form-fields/SliderField";
 
 import { ChatParams } from "../types";
 
@@ -26,7 +26,7 @@ export function TemperatureSelector() {
             min={0}
             max={2}
             step={0.1}
-            className="[&_[role=slider]]:h-4 [&_[role=slider]]:w-4"
+            className="[&_[role=slider]]:size-4"
             control={control}
             formState={formState}
             aria-label="Creativity"

components/modules/apps/chat/control-side-bar/TopPSelector.tsx

@@ -3,12 +3,12 @@
 import * as React from "react";
 import { useFormContext } from "react-hook-form";
 
+import { SliderField } from "@/components/ui/form/form-fields";
 import {
   HoverCard,
   HoverCardContent,
   HoverCardTrigger,
 } from "@/components/ui/HoverCard";
-import { SliderField } from "@/components/ui/form/form-fields";
 
 import { ChatParams } from "../types";
 
@@ -26,7 +26,7 @@ export function TopPSelector() {
             min={0}
             max={1}
             step={0.1}
-            className="[&_[role=slider]]:h-4 [&_[role=slider]]:w-4"
+            className="[&_[role=slider]]:size-4"
             control={control}
             formState={formState}
             aria-label="Focus"

components/modules/auth/LogoutButton.tsx

@@ -9,7 +9,7 @@ export default function LogoutButton() {
   return (
     <form action="/api/auth/logout" method="post">
       <Button size="sm" variant="ghost" className="w-full justify-start">
-        <LogOut className="mr-2 h-4 w-4" />
+        <LogOut className="mr-2 size-4" />
         <span>Log out</span>
       </Button>
     </form>

components/modules/auth/UserAuthForm.tsx

@@ -13,8 +13,8 @@ import { Button } from "@/components/ui/Button";
 import { InputField } from "@/components/ui/form/form-fields";
 import { useToast } from "@/components/ui/use-toast";
 
-import { SocialLoginOptions } from "./SocialLoginOptions";
 import { credentialAuthSchema } from "./schema";
+import { SocialLoginOptions } from "./SocialLoginOptions";
 
 type UserAuthFormProps = React.HTMLAttributes<HTMLDivElement>;
 
@@ -83,7 +83,7 @@ export function UserAuthForm({ className, ...props }: UserAuthFormProps) {
             {...fieldProps}
           />
           <Button disabled={isLoading} className="mt-2">
-            {isLoading && <Loader className="mr-2 h-4 w-4 animate-spin" />}
+            {isLoading && <Loader className="mr-2 size-4 animate-spin" />}
             Sign In
           </Button>
         </div>

components/modules/auth/UserSignupForm.tsx

@@ -116,7 +116,7 @@ export function UserSignupForm({ className, ...props }: UserSignupFormProps) {
             />
           </div>
           <Button disabled={isLoading}>
-            {isLoading && <Loader className="mr-2 h-4 w-4 animate-spin" />}
+            {isLoading && <Loader className="mr-2 size-4 animate-spin" />}
             Sign up
           </Button>
         </div>

components/modules/home/FeatureItems.tsx

@@ -35,7 +35,7 @@ export const FeatureItems = () => {
       <div className="mx-auto grid justify-center gap-4 sm:grid-cols-2 md:max-w-[64rem] md:grid-cols-3">
         <Card>
           <CardHeader>
-            <svg viewBox="0 0 24 24" className="mb-2 h-12 w-12 fill-current">
+            <svg viewBox="0 0 24 24" className="mb-2 size-12 fill-current">
               <path d="M11.572 0c-.176 0-.31.001-.358.007a19.76 19.76 0 0 1-.364.033C7.443.346 4.25 2.185 2.228 5.012a11.875 11.875 0 0 0-2.119 5.243c-.096.659-.108.854-.108 1.747s.012 1.089.108 1.748c.652 4.506 3.86 8.292 8.209 9.695.779.25 1.6.422 2.534.525.363.04 1.935.04 2.299 0 1.611-.178 2.977-.577 4.323-1.264.207-.106.247-.134.219-.158-.02-.013-.9-1.193-1.955-2.62l-1.919-2.592-2.404-3.558a338.739 338.739 0 0 0-2.422-3.556c-.009-.002-.018 1.579-.023 3.51-.007 3.38-.01 3.515-.052 3.595a.426.426 0 0 1-.206.214c-.075.037-.14.044-.495.044H7.81l-.108-.068a.438.438 0 0 1-.157-.171l-.05-.106.006-4.703.007-4.705.072-.092a.645.645 0 0 1 .174-.143c.096-.047.134-.051.54-.051.478 0 .558.018.682.154.035.038 1.337 1.999 2.895 4.361a10760.433 10760.433 0 0 0 4.735 7.17l1.9 2.879.096-.063a12.317 12.317 0 0 0 2.466-2.163 11.944 11.944 0 0 0 2.824-6.134c.096-.66.108-.854.108-1.748 0-.893-.012-1.088-.108-1.747-.652-4.506-3.859-8.292-8.208-9.695a12.597 12.597 0 0 0-2.499-.523A33.119 33.119 0 0 0 11.573 0zm4.069 7.217c.347 0 .408.005.486.047a.473.473 0 0 1 .237.277c.018.06.023 1.365.018 4.304l-.006 4.218-.744-1.14-.746-1.14v-3.066c0-1.982.01-3.097.023-3.15a.478.478 0 0 1 .233-.296c.096-.05.13-.054.5-.054z" />
             </svg>
             <CardTitle>Next.js 14</CardTitle>
@@ -46,7 +46,7 @@ export const FeatureItems = () => {
         </Card>
         <Card>
           <CardHeader>
-            <svg viewBox="0 0 24 24" className="mb-2 h-12 w-12 fill-[#0866FF]">
+            <svg viewBox="0 0 24 24" className="mb-2 size-12 fill-[#0866FF]">
               <path d="M14.23 12.004a2.236 2.236 0 0 1-2.235 2.236 2.236 2.236 0 0 1-2.236-2.236 2.236 2.236 0 0 1 2.235-2.236 2.236 2.236 0 0 1 2.236 2.236zm2.648-10.69c-1.346 0-3.107.96-4.888 2.622-1.78-1.653-3.542-2.602-4.887-2.602-.41 0-.783.093-1.106.278-1.375.793-1.683 3.264-.973 6.365C1.98 8.917 0 10.42 0 12.004c0 1.59 1.99 3.097 5.043 4.03-.704 3.113-.39 5.588.988 6.38.32.187.69.275 1.102.275 1.345 0 3.107-.96 4.888-2.624 1.78 1.654 3.542 2.603 4.887 2.603.41 0 .783-.09 1.106-.275 1.374-.792 1.683-3.263.973-6.365C22.02 15.096 24 13.59 24 12.004c0-1.59-1.99-3.097-5.043-4.032.704-3.11.39-5.587-.988-6.38a2.167 2.167 0 0 0-1.092-.278zm-.005 1.09v.006c.225 0 .406.044.558.127.666.382.955 1.835.73 3.704-.054.46-.142.945-.25 1.44a23.476 23.476 0 0 0-3.107-.534A23.892 23.892 0 0 0 12.769 4.7c1.592-1.48 3.087-2.292 4.105-2.295zm-9.77.02c1.012 0 2.514.808 4.11 2.28-.686.72-1.37 1.537-2.02 2.442a22.73 22.73 0 0 0-3.113.538 15.02 15.02 0 0 1-.254-1.42c-.23-1.868.054-3.32.714-3.707.19-.09.4-.127.563-.132zm4.882 3.05c.455.468.91.992 1.36 1.564-.44-.02-.89-.034-1.345-.034-.46 0-.915.01-1.36.034.44-.572.895-1.096 1.345-1.565zM12 8.1c.74 0 1.477.034 2.202.093.406.582.802 1.203 1.183 1.86.372.64.71 1.29 1.018 1.946-.308.655-.646 1.31-1.013 1.95-.38.66-.773 1.288-1.18 1.87a25.64 25.64 0 0 1-4.412.005 26.64 26.64 0 0 1-1.183-1.86c-.372-.64-.71-1.29-1.018-1.946a25.17 25.17 0 0 1 1.013-1.954c.38-.66.773-1.286 1.18-1.868A25.245 25.245 0 0 1 12 8.098zm-3.635.254c-.24.377-.48.763-.704 1.16-.225.39-.435.782-.635 1.174-.265-.656-.49-1.31-.676-1.947.64-.15 1.315-.283 2.015-.386zm7.26 0c.695.103 1.365.23 2.006.387-.18.632-.405 1.282-.66 1.933a25.952 25.952 0 0 0-1.345-2.32zm3.063.675c.484.15.944.317 1.375.498 1.732.74 2.852 1.708 2.852 2.476-.005.768-1.125 1.74-2.857 2.475-.42.18-.88.342-1.355.493a23.966 23.966 0 0 0-1.1-2.98c.45-1.017.81-2.01 1.085-2.964zm-13.395.004c.278.96.645 1.957 1.1 2.98a23.142 23.142 0 0 0-1.086 2.964c-.484-.15-.944-.318-1.37-.5-1.732-.737-2.852-1.706-2.852-2.474 0-.768 1.12-1.742 2.852-2.476.42-.18.88-.342 1.356-.494zm11.678 4.28c.265.657.49 1.312.676 1.948-.64.157-1.316.29-2.016.39a25.819 25.819 0 0 0 1.341-2.338zm-9.945.02c.2.392.41.783.64 1.175.23.39.465.772.705 1.143a22.005 22.005 0 0 1-2.006-.386c.18-.63.406-1.282.66-1.933zM17.92 16.32c.112.493.2.968.254 1.423.23 1.868-.054 3.32-.714 3.708-.147.09-.338.128-.563.128-1.012 0-2.514-.807-4.11-2.28.686-.72 1.37-1.536 2.02-2.44 1.107-.118 2.154-.3 3.113-.54zm-11.83.01c.96.234 2.006.415 3.107.532.66.905 1.345 1.727 2.035 2.446-1.595 1.483-3.092 2.295-4.11 2.295a1.185 1.185 0 0 1-.553-.132c-.666-.38-.955-1.834-.73-3.703.054-.46.142-.944.25-1.438zm4.56.64c.44.02.89.034 1.345.034.46 0 .915-.01 1.36-.034-.44.572-.895 1.095-1.345 1.565-.455-.47-.91-.993-1.36-1.565z" />
             </svg>
             <CardTitle>React 18</CardTitle>
@@ -58,7 +58,7 @@ export const FeatureItems = () => {
         <Card>
           <CardHeader>
             <svg
-              className="mb-2 h-12 w-12 fill-current"
+              className="mb-2 size-12 fill-current"
               width="109"
               height="113"
               viewBox="0 0 109 113"
@@ -111,7 +111,7 @@ export const FeatureItems = () => {
         </Card>
         <Card>
           <CardHeader>
-            <svg viewBox="0 0 24 24" className="mb-2 h-12 w-12 fill-[#38BDF8]">
+            <svg viewBox="0 0 24 24" className="mb-2 size-12 fill-[#38BDF8]">
               <path d="M12.001 4.8c-3.2 0-5.2 1.6-6 4.8 1.2-1.6 2.6-2.2 4.2-1.8.913.228 1.565.89 2.288 1.624C13.666 10.618 15.027 12 18.001 12c3.2 0 5.2-1.6 6-4.8-1.2 1.6-2.6 2.2-4.2 1.8-.913-.228-1.565-.89-2.288-1.624C16.337 6.182 14.976 4.8 12.001 4.8zm-6 7.2c-3.2 0-5.2 1.6-6 4.8 1.2-1.6 2.6-2.2 4.2-1.8.913.228 1.565.89 2.288 1.624 1.177 1.194 2.538 2.576 5.512 2.576 3.2 0 5.2-1.6 6-4.8-1.2 1.6-2.6 2.2-4.2 1.8-.913-.228-1.565-.89-2.288-1.624C10.337 13.382 8.976 12 6.001 12z" />
             </svg>
             <CardTitle className="font-bold">Components</CardTitle>
@@ -127,7 +127,7 @@ export const FeatureItems = () => {
               fill="none"
               stroke="#249361"
               strokeWidth="1"
-              className="mb-2 h-12 w-12 fill-[#3ECF8E]"
+              className="mb-2 size-12 fill-[#3ECF8E]"
             >
               <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"></path>
             </svg>
@@ -144,7 +144,7 @@ export const FeatureItems = () => {
               viewBox="0 0 24 24"
               role="img"
               xmlns="http://www.w3.org/2000/svg"
-              className="mb-2 h-12 w-12 fill-current"
+              className="mb-2 size-12 fill-current"
             >
               <g id="SVGRepo_bgCarrier" strokeWidth="0"></g>
               <g