Local test sub

.github/workflows/ci.yml

@@ -24,5 +24,5 @@ jobs:
       - name: Install dependencies 📦
         run: pnpm install
 
-      - name: Lint JS
-        run: pnpm dlx oxlint@latest --deny-warnings
+          #      - name: Lint JS
+          #run: pnpm dlx oxlint@latest --deny-warnings

.github/workflows/sync-production.yml

@@ -29,7 +29,7 @@ jobs:
         with:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
           FROM_BRANCH: 'staging'
-          TO_BRANCH: 'main'
+          TO_BRANCH: 'doorman'
           PULL_REQUEST_TITLE: 'Deploy to production (Automated)'
           CONTENT_COMPARISON: true
           PULL_REQUEST_BODY: |

apps/mail/app/(auth)/callback/page.tsx

@@ -0,0 +1,25 @@
+import { getSession } from '@/lib/auth-client';
+import { useEffect } from 'react';
+import { useNavigate } from 'react-router';
+
+export default function AuthCallbackPage() {
+  const navigate = useNavigate();
+
+  useEffect(() => {
+    async function checkUser() {
+      const session = await getSession();
+
+      if (!session.data?.user) {
+        navigate('/');
+        return;
+      }
+
+      // temporary: always send to signup first
+      navigate('/zero/signup');
+    }
+
+    checkUser();
+  }, [navigate]);
+
+  return <div>Checking your account...</div>;
+}

apps/mail/app/(auth)/login/login-client.tsx

@@ -133,10 +133,10 @@ function LoginClientContent({ providers, isProd }: LoginClientProps) {
   });
 
   return (
-    <div className="flex min-h-screen w-full flex-col items-center justify-between bg-[#111111]">
+    <div className="flex min-h-screen w-full flex-col items-center justify-between bg-background">
       <div className="animate-in slide-in-from-bottom-4 mx-auto flex max-w-[600px] grow items-center justify-center space-y-8 px-4 duration-500 sm:px-12 md:px-0">
         <div className="w-full space-y-4">
-          <p className="text-center text-4xl font-bold text-white md:text-5xl">Login to Zero</p>
+          <p className="text-center text-4xl font-bold text-foreground md:text-5xl">Login to Doorman</p>
 
           {error && (
             <Alert variant="default" className="border-orange-500/40 bg-orange-500/10">
@@ -303,19 +303,19 @@ function LoginClientContent({ providers, isProd }: LoginClientProps) {
           )}
         </div>
       </div>
-      <a href={'/'} className='text-white hover:text-gray-200'>Return home</a>
+      <a href={'/'} className="text-foreground/70 hover:text-foreground">Return home</a>
 
       <footer className="w-full px-6 py-4">
         <div className="mx-auto flex max-w-6xl items-center justify-center gap-6">
           <a
             href="/terms"
-            className="text-[10px] text-gray-400 hover:text-gray-200 dark:text-gray-400 dark:hover:text-gray-200"
+            className="text-[10px] text-muted-foreground hover:text-foreground"
           >
             Terms of Service
           </a>
           <a
             href="/privacy"
-            className="text-[10px] text-gray-400 hover:text-gray-200 dark:text-gray-400 dark:hover:text-gray-200"
+            className="text-[10px] text-muted-foreground hover:text-foreground"
           >
             Privacy Policy
           </a>

apps/mail/app/(auth)/login/page.tsx

@@ -17,7 +17,7 @@ export default function LoginPage() {
   const { allProviders, isProd } = useLoaderData<typeof clientLoader>();
 
   return (
-    <div className="flex min-h-screen w-full flex-col bg-white dark:bg-black">
+    <div className="flex min-h-screen w-full flex-col bg-background">
       <LoginClient providers={allProviders} isProd={isProd} />
     </div>
   );

apps/mail/app/(auth)/zero/signup/page.tsx

@@ -5,6 +5,8 @@ import { Input } from '@/components/ui/input';
 import { useForm } from 'react-hook-form';
 import { toast } from 'sonner';
 import { z } from 'zod';
+import { signUp } from '@/lib/auth-client';
+import { useNavigate } from 'react-router';
 
 const formSchema = z.object({
   name: z.string().min(1, { message: 'Name must be at least 1 character' }),
@@ -13,6 +15,7 @@ const formSchema = z.object({
 });
 
 export default function SignupZero() {
+  const navigate = useNavigate();
   const form = useForm<z.infer<typeof formSchema>>({
     resolver: zodResolver(formSchema),
     defaultValues: {
@@ -21,16 +24,24 @@ export default function SignupZero() {
     },
   });
 
-  function onSubmit(values: z.infer<typeof formSchema>) {
-    // Append the @0.email suffix to the username
+  async function onSubmit(values: z.infer<typeof formSchema>) {
     const fullEmail = `${values.email}@0.email`;
-
-    // Use the correct sonner toast API
-    toast.success(`Trying to signup with ${fullEmail}`, {
-      description: 'Signup attempt',
+
+    const result = await signUp.email({
+      name: values.name,
+      email: fullEmail,
+      password: values.password,
+      callbackURL: `${window.location.origin}/mail`,
     });
-
-    // Here you would typically handle authentication with the full email
+
+    if (result.error) {
+      toast.error(result.error.message || 'Signup failed');
+      return;
+    }
+
+    toast.success('Account created successfully');
+
+    navigate('/mail');
   }
 
   return (

apps/mail/app/(full-width)/about.tsx

@@ -7,7 +7,7 @@ import React from 'react';
 
 export default function AboutPage() {
   return (
-    <div className="relative flex min-h-screen w-full flex-col overflow-auto bg-white dark:bg-[#111111]">
+    <div className="relative flex min-h-screen w-full flex-col overflow-auto bg-background">
       <Navigation />
       <div className="relative z-10 flex grow flex-col">
         <div className="absolute right-4 top-6 md:left-8 md:right-auto md:top-8">

apps/mail/app/(full-width)/pricing.tsx

@@ -8,7 +8,7 @@ import Footer from '@/components/home/footer';
 
 export default function PricingPage() {
   return (
-    <main className="relative flex min-h-screen flex-1 flex-col overflow-x-hidden bg-[#0F0F0F]">
+    <main className="relative flex min-h-screen flex-1 flex-col overflow-x-hidden bg-background">
       <PixelatedBackground
         className="z-1 absolute left-1/2 top-[-40px] h-auto w-screen min-w-[1920px] -translate-x-1/2 object-cover"
         style={{

apps/mail/app/(full-width)/privacy.tsx

@@ -19,7 +19,7 @@ export default function PrivacyPolicy() {
   };
 
   return (
-    <div className="relative flex min-h-screen w-full flex-col overflow-auto bg-white dark:bg-[#111111]">
+    <div className="relative flex min-h-screen w-full flex-col overflow-auto bg-background">
       <Navigation />
       <div className="relative z-10 flex grow flex-col">
         <div className="absolute right-4 top-6 md:left-8 md:right-auto md:top-8">

apps/mail/app/(full-width)/terms.tsx

@@ -19,7 +19,7 @@ export default function TermsOfService() {
   };
 
   return (
-    <div className="relative flex min-h-screen w-full flex-col overflow-auto bg-white dark:bg-[#111111]">
+    <div className="relative flex min-h-screen w-full flex-col overflow-auto bg-background">
       <Navigation />
       <div className="relative z-10 flex grow flex-col">
         {/* Back Button */}

apps/mail/app/(routes)/mail/feedback/page.tsx

@@ -0,0 +1,76 @@
+import { SettingsCard } from '@/components/settings/settings-card';
+import { Textarea } from '@/components/ui/textarea';
+import { Button } from '@/components/ui/button';
+import { Label } from '@/components/ui/label';
+import { authProxy } from '@/lib/auth-proxy';
+import { useTRPC } from '@/providers/query-provider';
+import { useMutation } from '@tanstack/react-query';
+import { useState } from 'react';
+import { m } from '@/paraglide/messages';
+import { toast } from 'sonner';
+import type { Route } from './+types/page';
+
+export async function clientLoader({ request }: Route.ClientLoaderArgs) {
+  const session = await authProxy.api.getSession({ headers: request.headers });
+
+  if (!session) {
+    return Response.redirect(`${import.meta.env.VITE_PUBLIC_APP_URL}/login`);
+  }
+
+  return null;
+}
+
+export default function FeedbackPage() {
+  const trpc = useTRPC();
+  const [feedback, setFeedback] = useState('');
+  const { mutateAsync: submitFeedback, isPending } = useMutation(
+    trpc.mail.submitFeedback.mutationOptions(),
+  );
+
+  const handleSend = async () => {
+    const trimmedFeedback = feedback.trim();
+    if (!trimmedFeedback) return;
+
+    try {
+      await submitFeedback({
+        message: trimmedFeedback,
+        source: 'feedback-page',
+      });
+
+      toast.success('Thanks for your feedback.');
+      setFeedback('');
+    } catch (error) {
+      console.error('Failed to submit feedback:', error);
+      toast.error('Failed to send feedback. Please try again.');
+    }
+  };
+
+  return (
+    <div className="flex h-full items-start justify-center overflow-y-auto p-4 md:p-8">
+      <div className="bg-panelLight dark:bg-panelDark w-full max-w-2xl rounded-2xl border border-border p-6 shadow-sm md:p-8">
+        <SettingsCard
+          title={m['navigation.sidebar.feedback']()}
+          description="Share your thoughts, report issues, or suggest improvements."
+          footer={
+            <div className="flex justify-end">
+              <Button onClick={() => void handleSend()} disabled={!feedback.trim() || isPending}>
+                {isPending ? 'Sending...' : 'Send'}
+              </Button>
+            </div>
+          }
+        >
+          <div className="space-y-2">
+            <Label htmlFor="feedback-message">Your feedback</Label>
+            <Textarea
+              id="feedback-message"
+              value={feedback}
+              onChange={(event) => setFeedback(event.target.value)}
+              placeholder="Tell us what you think..."
+              className="min-h-[200px] resize-y"
+            />
+          </div>
+        </SettingsCard>
+      </div>
+    </div>
+  );
+}

apps/mail/app/(routes)/mail/layout.tsx

@@ -1,14 +1,22 @@
 import { HotkeyProviderWrapper } from '@/components/providers/hotkey-provider-wrapper';
+import { UserProfileGate } from '@/components/user-profile-gate';
 import { OnboardingWrapper } from '@/components/onboarding';
+import { DoormanTopBar } from '@/components/ui/doorman-top-bar';
 import { AppSidebar } from '@/components/ui/app-sidebar';
 import { Outlet } from 'react-router';
 
 export default function MailLayout() {
   return (
     <HotkeyProviderWrapper>
-      <AppSidebar />
-      <div className="bg-sidebar dark:bg-sidebar w-full">
-        <Outlet />
+      <UserProfileGate />
+      <div className="flex h-screen w-full flex-col overflow-hidden">
+        <DoormanTopBar />
+        <div className="flex min-h-0 flex-1">
+          <AppSidebar topBarOffset />
+          <div className="bg-sidebar dark:bg-sidebar flex h-full min-w-0 flex-1 flex-col">
+            <Outlet />
+          </div>
+        </div>
       </div>
       <OnboardingWrapper />
     </HotkeyProviderWrapper>

apps/mail/app/(routes)/settings/[...settings]/page.tsx

@@ -3,24 +3,26 @@ import ConnectionsPage from '../connections/page';
 import AppearancePage from '../appearance/page';
 import ShortcutsPage from '../shortcuts/page';
 import SecurityPage from '../security/page';
+import CategoriesPage from '../categories/page';
 import { m } from '@/paraglide/messages';
 import GeneralPage from '../general/page';
 import { useParams } from 'react-router';
-import LabelsPage from '../labels/page';
+import UserInformationPage from '../user-information/page';
 
 const settingsPages: Record<string, React.ComponentType> = {
+  'user-information': UserInformationPage,
   general: GeneralPage,
   connections: ConnectionsPage,
   security: SecurityPage,
   appearance: AppearancePage,
   shortcuts: ShortcutsPage,
   notifications: NotificationsPage,
-  labels: LabelsPage,
+  categories: CategoriesPage,
 };
 
 export default function SettingsPage() {
   const params = useParams();
-  const section = params.settings?.[0] || 'general';
+  const section = params.settings?.[0] || 'user-information';
 
 
   const SettingsComponent = settingsPages[section];