- upgrade react-resizable-panels to latest version

- update translations
- remove cypress
- add await to all return blocks

apps/client/src/pages/auth/backup-otp/page.tsx

@@ -13,6 +13,7 @@ import {
   Input,
 } from "@reactive-resume/ui";
 import { useRef } from "react";
+import { Helmet } from "react-helmet-async";
 import { useForm } from "react-hook-form";
 import { useNavigate } from "react-router-dom";
 import { z } from "zod";
@@ -45,6 +46,12 @@ export const BackupOtpPage = () => {
 
   return (
     <div className="space-y-8">
+      <Helmet>
+        <title>
+          {t`Use your backup code`} - {t`Reactive Resume`}
+        </title>
+      </Helmet>
+
       <div className="space-y-1.5">
         <h2 className="text-2xl font-semibold tracking-tight">{t`Use your backup code`}</h2>
         <h6 className="leading-relaxed opacity-60">

apps/client/src/pages/auth/forgot-password/page.tsx

@@ -14,6 +14,7 @@ import {
   Input,
 } from "@reactive-resume/ui";
 import { useState } from "react";
+import { Helmet } from "react-helmet-async";
 import { useForm } from "react-hook-form";
 import { z } from "zod";
 
@@ -40,6 +41,12 @@ export const ForgotPasswordPage = () => {
   if (submitted) {
     return (
       <div className="space-y-8">
+        <Helmet>
+          <title>
+            {t`You've got mail!`} - {t`Reactive Resume`}
+          </title>
+        </Helmet>
+
         <div className="space-y-4">
           <h2 className="text-2xl font-semibold tracking-tight">{t`You've got mail!`}</h2>
           <Alert variant="success">

apps/client/src/pages/auth/login/page.tsx

@@ -15,6 +15,7 @@ import {
   Input,
 } from "@reactive-resume/ui";
 import { useRef } from "react";
+import { Helmet } from "react-helmet-async";
 import { useForm } from "react-hook-form";
 import { Link } from "react-router-dom";
 import { z } from "zod";
@@ -44,6 +45,12 @@ export const LoginPage = () => {
 
   return (
     <div className="space-y-8">
+      <Helmet>
+        <title>
+          {t`Sign in to your account`} - {t`Reactive Resume`}
+        </title>
+      </Helmet>
+
       <div className="space-y-1.5">
         <h2 className="text-2xl font-semibold tracking-tight">{t`Sign in to your account`}</h2>
         <h6>

apps/client/src/pages/auth/register/page.tsx

@@ -15,6 +15,7 @@ import {
   Input,
 } from "@reactive-resume/ui";
 import { useRef } from "react";
+import { Helmet } from "react-helmet-async";
 import { useForm } from "react-hook-form";
 import { Link, useNavigate } from "react-router-dom";
 import { z } from "zod";
@@ -53,6 +54,12 @@ export const RegisterPage = () => {
 
   return (
     <div className="space-y-8">
+      <Helmet>
+        <title>
+          {t`Create a new account`} - {t`Reactive Resume`}
+        </title>
+      </Helmet>
+
       <div className="space-y-1.5">
         <h2 className="text-2xl font-semibold tracking-tight">{t`Create a new account`}</h2>
         <h6>

apps/client/src/pages/auth/reset-password/page.tsx

@@ -14,6 +14,7 @@ import {
   Input,
 } from "@reactive-resume/ui";
 import { useEffect, useRef } from "react";
+import { Helmet } from "react-helmet-async";
 import { useForm } from "react-hook-form";
 import { useNavigate, useSearchParams } from "react-router-dom";
 import { z } from "zod";
@@ -54,6 +55,12 @@ export const ResetPasswordPage = () => {
 
   return (
     <div className="space-y-8">
+      <Helmet>
+        <title>
+          {t`Reset your Password`} - {t`Reactive Resume`}
+        </title>
+      </Helmet>
+
       <div className="space-y-1.5">
         <h2 className="text-2xl font-semibold tracking-tight">{t`Reset your password`}</h2>
         <h6 className="leading-relaxed opacity-75">

apps/client/src/pages/auth/verify-email/page.tsx

@@ -2,6 +2,7 @@ import { t, Trans } from "@lingui/macro";
 import { ArrowRight, Info, SealCheck } from "@phosphor-icons/react";
 import { Alert, AlertDescription, AlertTitle, Button } from "@reactive-resume/ui";
 import { useEffect } from "react";
+import { Helmet } from "react-helmet-async";
 import { Link, useNavigate, useSearchParams } from "react-router-dom";
 
 import { useToast } from "@/client/hooks/use-toast";
@@ -37,6 +38,12 @@ export const VerifyEmailPage = () => {
 
   return (
     <div className="space-y-6">
+      <Helmet>
+        <title>
+          {t`Verify your email address`} - {t`Reactive Resume`}
+        </title>
+      </Helmet>
+
       <div className="space-y-2">
         <h2 className="text-2xl font-semibold tracking-tight">{t`Verify your email address`}</h2>
         <p className="leading-relaxed opacity-75">

apps/client/src/pages/auth/verify-otp/page.tsx

@@ -14,6 +14,7 @@ import {
   Input,
 } from "@reactive-resume/ui";
 import { useRef } from "react";
+import { Helmet } from "react-helmet-async";
 import { useForm } from "react-hook-form";
 import { Link, useNavigate } from "react-router-dom";
 import { z } from "zod";
@@ -46,6 +47,12 @@ export const VerifyOtpPage = () => {
 
   return (
     <div className="space-y-8">
+      <Helmet>
+        <title>
+          {t`Two-Factor Authentication`} - {t`Reactive Resume`}
+        </title>
+      </Helmet>
+
       <div className="space-y-1.5">
         <h2 className="text-2xl font-semibold tracking-tight">{t`Two-Factor Authentication`}</h2>
         <h6>

apps/client/src/pages/builder/_components/header.tsx

@@ -1,6 +1,5 @@
 import { t } from "@lingui/macro";
 import { HouseSimple, Lock, SidebarSimple } from "@phosphor-icons/react";
-import { useBreakpoint } from "@reactive-resume/hooks";
 import { Button, Tooltip } from "@reactive-resume/ui";
 import { cn } from "@reactive-resume/utils";
 import { Link } from "react-router-dom";
@@ -9,22 +8,15 @@ import { useBuilderStore } from "@/client/stores/builder";
 import { useResumeStore } from "@/client/stores/resume";
 
 export const BuilderHeader = () => {
-  const { isDesktop } = useBreakpoint();
-  const defaultPanelSize = isDesktop ? 25 : 0;
-
   const title = useResumeStore((state) => state.resume.title);
   const locked = useResumeStore((state) => state.resume.locked);
 
   const toggle = useBuilderStore((state) => state.toggle);
   const isDragging = useBuilderStore(
-    (state) => state.panel.left.isDragging || state.panel.right.isDragging,
-  );
-  const leftPanelSize = useBuilderStore(
-    (state) => state.panel.left.ref?.getSize() ?? defaultPanelSize,
-  );
-  const rightPanelSize = useBuilderStore(
-    (state) => state.panel.right.ref?.getSize() ?? defaultPanelSize,
+    (state) => state.panel.left.handle.isDragging || state.panel.right.handle.isDragging,
   );
+  const leftPanelSize = useBuilderStore((state) => state.panel.left.size);
+  const rightPanelSize = useBuilderStore((state) => state.panel.right.size);
 
   const onToggle = (side: "left" | "right") => toggle(side);
 
@@ -37,11 +29,16 @@ export const BuilderHeader = () => {
       )}
     >
       <div className="flex h-full items-center justify-between px-4">
-        <Button size="icon" variant="ghost" onClick={() => onToggle("left")}>
+        <Button
+          size="icon"
+          variant="ghost"
+          className="flex lg:hidden"
+          onClick={() => onToggle("left")}
+        >
           <SidebarSimple />
         </Button>
 
-        <div className="flex items-center justify-center gap-x-1">
+        <div className="flex items-center justify-center gap-x-1 lg:mx-auto">
           <Button asChild size="icon" variant="ghost">
             <Link to="/dashboard/resumes">
               <HouseSimple />
@@ -59,7 +56,12 @@ export const BuilderHeader = () => {
           )}
         </div>
 
-        <Button size="icon" variant="ghost" onClick={() => onToggle("right")}>
+        <Button
+          size="icon"
+          variant="ghost"
+          className="flex lg:hidden"
+          onClick={() => onToggle("right")}
+        >
           <SidebarSimple className="-scale-x-100" />
         </Button>
       </div>

apps/client/src/pages/builder/layout.tsx

@@ -25,9 +25,14 @@ const OutletSlot = () => (
 export const BuilderLayout = () => {
   const { isDesktop } = useBreakpoint();
 
-  const panel = useBuilderStore((state) => state.panel);
   const sheet = useBuilderStore((state) => state.sheet);
 
+  const leftSetSize = useBuilderStore((state) => state.panel.left.setSize);
+  const rightSetSize = useBuilderStore((state) => state.panel.right.setSize);
+
+  const leftHandle = useBuilderStore((state) => state.panel.left.handle);
+  const rightHandle = useBuilderStore((state) => state.panel.right.handle);
+
   const onOpenAutoFocus = (event: Event) => event.preventDefault();
 
   if (isDesktop) {
@@ -35,33 +40,31 @@ export const BuilderLayout = () => {
       <div className="relative h-full w-full overflow-hidden">
         <PanelGroup direction="horizontal">
           <Panel
-            collapsible
-            minSize={20}
-            maxSize={35}
-            defaultSize={28}
-            ref={panel.left.setRef}
-            className={cn("z-10 bg-background", !panel.left.isDragging && "transition-[flex]")}
+            minSizePixels={48}
+            maxSizePercentage={35}
+            defaultSizePercentage={28}
+            onResize={({ sizePercentage }) => leftSetSize(sizePercentage)}
+            className={cn("z-10 bg-background", !leftHandle.isDragging && "transition-[flex]")}
           >
             <LeftSidebar />
           </Panel>
           <PanelResizeHandle
-            isDragging={panel.left.isDragging}
-            onDragging={panel.left.setDragging}
+            isDragging={leftHandle.isDragging}
+            onDragging={leftHandle.setDragging}
           />
           <Panel>
             <OutletSlot />
           </Panel>
           <PanelResizeHandle
-            isDragging={panel.right.isDragging}
-            onDragging={panel.right.setDragging}
+            isDragging={rightHandle.isDragging}
+            onDragging={rightHandle.setDragging}
           />
           <Panel
-            collapsible
-            minSize={20}
-            maxSize={35}
-            defaultSize={28}
-            ref={panel.right.setRef}
-            className={cn("z-10 bg-background", !panel.right.isDragging && "transition-[flex]")}
+            minSizePixels={48}
+            maxSizePercentage={35}
+            defaultSizePercentage={28}
+            onResize={({ sizePercentage }) => rightSetSize(sizePercentage)}
+            className={cn("z-10 bg-background", !rightHandle.isDragging && "transition-[flex]")}
           >
             <RightSidebar />
           </Panel>
@@ -75,9 +78,9 @@ export const BuilderLayout = () => {
       <Sheet open={sheet.left.open} onOpenChange={sheet.left.setOpen}>
         <SheetContent
           side="left"
-          className="top-16 p-0 sm:max-w-xl"
           showClose={false}
           onOpenAutoFocus={onOpenAutoFocus}
+          className="top-16 p-0 sm:max-w-xl"
         >
           <LeftSidebar />
         </SheetContent>
@@ -88,9 +91,9 @@ export const BuilderLayout = () => {
       <Sheet open={sheet.right.open} onOpenChange={sheet.right.setOpen}>
         <SheetContent
           side="right"
-          className="p-0 sm:max-w-xl"
           showClose={false}
           onOpenAutoFocus={onOpenAutoFocus}
+          className="top-16 p-0 sm:max-w-xl"
         >
           <RightSidebar />
         </SheetContent>

apps/client/src/pages/builder/sidebars/left/index.tsx

@@ -93,7 +93,7 @@ export const LeftSidebar = () => {
         </UserOptions>
       </div>
 
-      <ScrollArea orientation="vertical" className="h-screen flex-1">
+      <ScrollArea orientation="vertical" className="h-screen flex-1 pb-16 lg:pb-0">
         <div ref={containterRef} className="grid gap-y-6 p-6 @container/left">
           <BasicsSection />
           <Separator />

apps/client/src/pages/builder/sidebars/right/index.tsx

@@ -26,8 +26,8 @@ export const RightSidebar = () => {
   };
 
   return (
-    <div className="flex bg-secondary-accent/30 pt-16 lg:pt-0">
-      <ScrollArea orientation="vertical" className="h-screen flex-1">
+    <div className="flex bg-secondary-accent/30">
+      <ScrollArea orientation="vertical" className="h-screen flex-1 pb-16 lg:pb-0">
         <div ref={containterRef} className="grid gap-y-6 p-6 @container/right">
           <TemplateSection />
           <Separator />

apps/client/src/pages/builder/sidebars/right/sections/template.tsx

@@ -22,10 +22,10 @@ export const TemplateSection = () => {
 
       <main className="grid grid-cols-2 gap-5 @lg/right:grid-cols-3 @2xl/right:grid-cols-4">
         {templatesList.map((template, index) => (
-          <AspectRatio ratio={1 / 1.4142}>
+          <AspectRatio key={template} ratio={1 / 1.4142}>
             <motion.div
-              initial={{ opacity: 0, x: -50 }}
-              animate={{ opacity: 1, x: 0, transition: { delay: index * 0.1 } }}
+              initial={{ opacity: 0 }}
+              animate={{ opacity: 1, transition: { delay: index * 0.1 } }}
               whileTap={{ scale: 0.98, transition: { duration: 0.1 } }}
               onClick={() => setValue("metadata.template", template)}
               className={cn(

apps/client/src/pages/dashboard/settings/_sections/account.tsx

@@ -153,6 +153,7 @@ export const AccountSettings = () => {
                 <FormControl>
                   <Input {...field} />
                 </FormControl>
+                <FormMessage />
               </FormItem>
             )}
           />
@@ -160,17 +161,13 @@ export const AccountSettings = () => {
           <FormField
             name="username"
             control={form.control}
-            render={({ field, fieldState }) => (
+            render={({ field }) => (
               <FormItem>
                 <FormLabel>{t`Username`}</FormLabel>
                 <FormControl>
                   <Input {...field} />
                 </FormControl>
-                {fieldState.error && (
-                  <FormDescription className="text-error">
-                    {fieldState.error.message}
-                  </FormDescription>
-                )}
+                <FormMessage />
               </FormItem>
             )}
           />