chore: format project automatically before starting dev server

components/auth/AuthModal.tsx

@@ -44,35 +44,81 @@ export default function AuthModal() {
                 await auth.loginPassword(currentPhone, values.password || '');
             }
         } catch (caught) {
-            setError(caught instanceof Error && caught.message === 'INVALID_PHONE' ? copy.invalidPhone : copy.invalidCredentials);
+            setError(
+                caught instanceof Error && caught.message === 'INVALID_PHONE'
+                    ? copy.invalidPhone
+                    : copy.invalidCredentials,
+            );
         } finally {
             setLoading(false);
         }
     };
 
     return (
-        <Modal open={auth.loginOpen} onCancel={auth.closeLogin} footer={null} centered title={copy.login} destroyOnClose>
-            <Segmented<LoginMode> block value={mode} onChange={value => {setMode(value); setStep('phone'); setError('');}}
-                options={[{label: copy.otpLogin, value: 'otp'}, {label: copy.passwordLogin, value: 'password'}]}/>
-            <Alert className="mt-5" type="info" showIcon message={copy.demoTitle}
-                description={<div><div>{copy.demoOtp}</div><div>{copy.demoPassword}</div></div>}/>
-            {error && <Alert className="mt-4" type="error" showIcon message={error}/>} 
-            <Form layout="vertical" className="mt-5" onFinish={submit} initialValues={{phone: '09123456789', code: '12345', password: '123456'}}>
+        <Modal
+            open={auth.loginOpen}
+            onCancel={auth.closeLogin}
+            footer={null}
+            centered
+            title={copy.login}
+            destroyOnClose
+        >
+            <Segmented<LoginMode>
+                block
+                value={mode}
+                onChange={value => {
+                    setMode(value);
+                    setStep('phone');
+                    setError('');
+                }}
+                options={[
+                    {label: copy.otpLogin, value: 'otp'},
+                    {
+                        label: copy.passwordLogin,
+                        value: 'password',
+                    },
+                ]}
+            />
+            <Alert
+                className="mt-5"
+                type="info"
+                showIcon
+                message={copy.demoTitle}
+                description={
+                    <div>
+                        <div>{copy.demoOtp}</div>
+                        <div>{copy.demoPassword}</div>
+                    </div>
+                }
+            />
+            {error && <Alert className="mt-4" type="error" showIcon message={error} />}
+            <Form
+                layout="vertical"
+                className="mt-5"
+                onFinish={submit}
+                initialValues={{phone: '09123456789', code: '12345', password: '123456'}}
+            >
                 {(mode === 'password' || step === 'phone') && (
-                    <Form.Item name="phone" label={copy.phone} rules={[{required: true, pattern: /^09\d{9}$/, message: copy.invalidPhone}]}>
-                        <Input dir="ltr" size="large" maxLength={11} prefix={<MobileOutlined/>}/>
+                    <Form.Item
+                        name="phone"
+                        label={copy.phone}
+                        rules={[{required: true, pattern: /^09\d{9}$/, message: copy.invalidPhone}]}
+                    >
+                        <Input dir="ltr" size="large" maxLength={11} prefix={<MobileOutlined />} />
                     </Form.Item>
                 )}
                 {mode === 'password' && (
                     <Form.Item name="password" label={copy.password} rules={[{required: true}]}>
-                        <Input.Password dir="ltr" size="large" prefix={<LockOutlined/>}/>
+                        <Input.Password dir="ltr" size="large" prefix={<LockOutlined />} />
                     </Form.Item>
                 )}
                 {mode === 'otp' && step === 'code' && (
                     <>
-                        <Typography.Paragraph type="secondary">{copy.phone}: <span dir="ltr">{phone}</span></Typography.Paragraph>
+                        <Typography.Paragraph type="secondary">
+                            {copy.phone}: <span dir="ltr">{phone}</span>
+                        </Typography.Paragraph>
                         <Form.Item name="code" label={copy.otp} rules={[{required: true}]}>
-                            <Input dir="ltr" size="large" maxLength={5} prefix={<SafetyCertificateOutlined/>}/>
+                            <Input dir="ltr" size="large" maxLength={5} prefix={<SafetyCertificateOutlined />} />
                         </Form.Item>
                     </>
                 )}

components/auth/ProtectedLink.tsx

@@ -5,7 +5,17 @@ import Link from 'next/link';
 import {useRouter} from 'next/navigation';
 import {useAuth} from '@/app/context/AuthContext';
 
-export default function ProtectedLink({href, children, className, onClick}: {href: string; children: ReactNode; className?: string; onClick?: () => void}) {
+export default function ProtectedLink({
+    href,
+    children,
+    className,
+    onClick,
+}: {
+    href: string;
+    children: ReactNode;
+    className?: string;
+    onClick?: () => void;
+}) {
     const auth = useAuth();
     const router = useRouter();
     const handleClick = (event: MouseEvent<HTMLAnchorElement>) => {
@@ -15,5 +25,9 @@ export default function ProtectedLink({href, children, className, onClick}: {hre
             auth.openLogin(() => router.push(href));
         }
     };
-    return <Link href={href} className={className} onClick={handleClick}>{children}</Link>;
+    return (
+        <Link href={href} className={className} onClick={handleClick}>
+            {children}
+        </Link>
+    );
 }

components/auth/ProtectedPage.tsx

@@ -21,16 +21,24 @@ export default function ProtectedPage({children}: {children: ReactNode}) {
         }
     }, [auth]);
 
-    if (!auth.ready) return <main className="max-w-5xl mx-auto min-h-[70vh] px-5 pt-32"><Skeleton active/></main>;
-    if (!auth.isAuthenticated) return (
-        <main className="max-w-3xl mx-auto min-h-[70vh] px-5 pt-32 pb-20 text-center">
-            <div className="rounded-3xl border border-subtle bg-surface p-10">
-                <LockOutlined className="text-4xl text-brand-400"/>
-                <h1 className="text-2xl font-extrabold text-primary mt-5">{copy.protectedTitle}</h1>
-                <p className="text-secondary mt-3 mb-7">{copy.protectedDescription}</p>
-                <Button type="primary" size="large" onClick={() => auth.openLogin()}>{copy.openLogin}</Button>
-            </div>
-        </main>
-    );
+    if (!auth.ready)
+        return (
+            <main className="max-w-5xl mx-auto min-h-[70vh] px-5 pt-32">
+                <Skeleton active />
+            </main>
+        );
+    if (!auth.isAuthenticated)
+        return (
+            <main className="max-w-3xl mx-auto min-h-[70vh] px-5 pt-32 pb-20 text-center">
+                <div className="rounded-3xl border border-subtle bg-surface p-10">
+                    <LockOutlined className="text-4xl text-brand-400" />
+                    <h1 className="text-2xl font-extrabold text-primary mt-5">{copy.protectedTitle}</h1>
+                    <p className="text-secondary mt-3 mb-7">{copy.protectedDescription}</p>
+                    <Button type="primary" size="large" onClick={() => auth.openLogin()}>
+                        {copy.openLogin}
+                    </Button>
+                </div>
+            </main>
+        );
     return children;
 }