feat: add subject to thread display

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

@@ -1,44 +1,44 @@
-import { LoginClient } from "./login-client";
 import { authProviders, customProviders, isProviderEnabled } from "@/lib/auth-providers";
+import { LoginClient } from "./login-client";
 
 export default function LoginPage() {
   const envNodeEnv = process.env.NODE_ENV;
-  const isProd = envNodeEnv === 'production';
-  
-  const authProviderStatus = authProviders.map(provider => {
-
-    const envVarStatus = provider.envVarInfo?.map(envVar => ({
-      name: envVar.name,
-      set: !!process.env[envVar.name],
-      source: envVar.source,
-      defaultValue: envVar.defaultValue
-    })) || [];
+  const isProd = envNodeEnv === "production";
+
+  const authProviderStatus = authProviders.map((provider) => {
+    const envVarStatus =
+      provider.envVarInfo?.map((envVar) => ({
+        name: envVar.name,
+        set: !!process.env[envVar.name],
+        source: envVar.source,
+        defaultValue: envVar.defaultValue,
+      })) || [];
 
     return {
       id: provider.id,
       name: provider.name,
       enabled: isProviderEnabled(provider),
       required: provider.required,
       envVarInfo: provider.envVarInfo,
-      envVarStatus
+      envVarStatus,
     };
   });
 
-  const customProviderStatus = customProviders.map(provider => {
+  const customProviderStatus = customProviders.map((provider) => {
     return {
       id: provider.id,
       name: provider.name,
       enabled: true,
       isCustom: provider.isCustom,
       customRedirectPath: provider.customRedirectPath,
-      envVarStatus: []
+      envVarStatus: [],
     };
   });
 
   const allProviders = [...customProviderStatus, ...authProviderStatus];
 
   return (
-    <div className="flex w-full flex-col bg-white dark:bg-black min-h-screen">
+    <div className="flex min-h-screen w-full flex-col bg-white dark:bg-black">
       <LoginClient providers={allProviders} isProd={isProd} />
     </div>
   );

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

@@ -34,10 +34,12 @@ export default function LoginZero() {
 
   return (
     <div className="flex h-full min-h-screen w-full items-center justify-center bg-black">
-      <div className="w-full max-w-md px-6 py-8 animate-in slide-in-from-bottom-4 duration-500">
+      <div className="animate-in slide-in-from-bottom-4 w-full max-w-md px-6 py-8 duration-500">
         <div className="mb-4 text-center">
           <h1 className="mb-2 text-4xl font-bold text-white">Login with Zero</h1>
-          <p className="text-muted-foreground">Enter your Zero email below to login to your account</p>
+          <p className="text-muted-foreground">
+            Enter your Zero email below to login to your account
+          </p>
         </div>
 
         <Form {...form}>
@@ -100,18 +102,18 @@ export default function LoginZero() {
           </form>
         </Form>
       </div>
-      
-      <footer className="absolute bottom-0 w-full py-4 px-6">
-        <div className="max-w-6xl mx-auto flex justify-center items-center gap-6">
-          <a 
-            href="/terms" 
-            className="text-[10px] text-gray-500 hover:text-gray-300 transition-colors"
+
+      <footer className="absolute bottom-0 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-500 transition-colors hover:text-gray-300"
           >
             Terms of Service
           </a>
-          <a 
-            href="/privacy" 
-            className="text-[10px] text-gray-500 hover:text-gray-300 transition-colors"
+          <a
+            href="/privacy"
+            className="text-[10px] text-gray-500 transition-colors hover:text-gray-300"
           >
             Privacy Policy
           </a>

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

@@ -27,7 +27,7 @@ export default function SignupZero() {
   function onSubmit(values: z.infer<typeof formSchema>) {
     // Append the @0.email suffix to the username
     const fullEmail = `${values.email}@0.email`;
-    
+
     // Use the correct sonner toast API
     toast.success(`Trying to signup with ${fullEmail}`, {
       description: "Signup attempt",
@@ -38,14 +38,14 @@ export default function SignupZero() {
 
   return (
     <div className="flex h-full min-h-screen w-full items-center justify-center bg-black">
-      <div className="w-full max-w-md px-6 py-8 animate-in slide-in-from-bottom-4 duration-500">
+      <div className="animate-in slide-in-from-bottom-4 w-full max-w-md px-6 py-8 duration-500">
         <div className="mb-4 text-center">
           <h1 className="mb-2 text-4xl font-bold text-white">Signup with Zero</h1>
           <p className="text-muted-foreground">Enter your email below to signup to your account</p>
         </div>
 
         <Form {...form}>
-          <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-3 mx-auto">
+          <form onSubmit={form.handleSubmit(onSubmit)} className="mx-auto space-y-3">
             <FormField
               control={form.control}
               name="name"
@@ -74,9 +74,11 @@ export default function SignupZero() {
                       <Input
                         placeholder="adam"
                         {...field}
-                        className="bg-black text-sm text-white placeholder:text-sm w-full pr-16"
+                        className="w-full bg-black pr-16 text-sm text-white placeholder:text-sm"
                       />
-                      <span className="absolute bg-popover px-3 py-2 right-0 top-0 bottom-0 flex items-center text-sm rounded-r-md text-muted-foreground border border-l-0 border-input">@0.email</span>
+                      <span className="bg-popover text-muted-foreground border-input absolute bottom-0 right-0 top-0 flex items-center rounded-r-md border border-l-0 px-3 py-2 text-sm">
+                        @0.email
+                      </span>
                     </div>
                   </FormControl>
                 </FormItem>
@@ -90,7 +92,6 @@ export default function SignupZero() {
                 <FormItem>
                   <div className="flex items-center justify-between">
                     <FormLabel className="text-muted-foreground">Password</FormLabel>
-
                   </div>
                   <FormControl>
                     <Input
@@ -119,18 +120,18 @@ export default function SignupZero() {
           </form>
         </Form>
       </div>
-      
-      <footer className="absolute bottom-0 w-full py-4 px-6">
-        <div className="max-w-6xl mx-auto flex justify-center items-center gap-6">
-          <a 
-            href="/terms" 
-            className="text-[10px] text-gray-500 hover:text-gray-300 transition-colors"
+
+      <footer className="absolute bottom-0 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-500 transition-colors hover:text-gray-300"
           >
             Terms of Service
           </a>
-          <a 
-            href="/privacy" 
-            className="text-[10px] text-gray-500 hover:text-gray-300 transition-colors"
+          <a
+            href="/privacy"
+            className="text-[10px] text-gray-500 transition-colors hover:text-gray-300"
           >
             Privacy Policy
           </a>

apps/mail/app/(full-width)/contributors/page.tsx

@@ -11,7 +11,6 @@ import {
   LayoutGrid,
   FileCode,
 } from "lucide-react";
-import { Discord, Twitter } from "@/components/icons/icons";
 import {
   Area,
   AreaChart,
@@ -24,12 +23,13 @@ import {
 } from "recharts";
 import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs";
 import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import { ThemeToggle } from "@/components/theme/theme-toggle";
+import { Discord, Twitter } from "@/components/icons/icons";
 import { Separator } from "@/components/ui/separator";
 import { useEffect, useState, useMemo } from "react";
 import { Button } from "@/components/ui/button";
 import { Card } from "@/components/ui/card";
 import { fetcher } from "@/lib/utils";
-import { ThemeToggle } from "@/components/theme/theme-toggle";
 import Image from "next/image";
 import Link from "next/link";
 import useSWR from "swr";
@@ -339,10 +339,10 @@ export default function OpenPage() {
   }
 
   return (
-    <div className="min-h-screen w-full bg-white dark:bg-neutral-950 text-black dark:text-white">
+    <div className="min-h-screen w-full bg-white text-black dark:bg-neutral-950 dark:text-white">
       <div className="container mx-auto max-w-6xl px-4 py-8">
         {/* Header with theme toggle */}
-        <div className="flex justify-end mb-6">
+        <div className="mb-6 flex justify-end">
           <ThemeToggle />
         </div>
 
@@ -714,7 +714,7 @@ export default function OpenPage() {
         </div>
 
         {/* Contributors Section */}
-        <div className="space-y-6 mb-16">
+        <div className="mb-16 space-y-6">
           <div className="text-center">
             <h1 className="text-3xl font-semibold tracking-tight text-neutral-900/80 dark:text-white">
               Contributors
@@ -818,7 +818,9 @@ export default function OpenPage() {
                         interval={0}
                         tick={(props) => {
                           const { x, y, payload } = props;
-                          const contributor = allContributors?.find((c) => c.login === payload.value);
+                          const contributor = allContributors?.find(
+                            (c) => c.login === payload.value,
+                          );
 
                           return (
                             <g transform={`translate(${x},${y})`}>
@@ -889,11 +891,10 @@ export default function OpenPage() {
 
         <div className="mb-8">
           <div className="relative overflow-hidden rounded-xl border bg-gradient-to-br from-neutral-50 to-white shadow-sm dark:border-neutral-800 dark:from-neutral-900/80 dark:to-neutral-900/30">
-            <div className="absolute inset-0 opacity-20 dark:opacity-20">
-            </div>
+            <div className="absolute inset-0 opacity-20 dark:opacity-20"></div>
 
             <div className="relative p-6">
-              <div className="flex flex-col md:flex-row items-center gap-8">
+              <div className="flex flex-col items-center gap-8 md:flex-row">
                 <div className="w-full md:w-2/3">
                   <div className="inline-flex items-center rounded-full bg-neutral-900 px-3 py-1 text-xs font-medium text-white dark:bg-white dark:text-neutral-900">
                     <Github className="mr-1.5 h-3.5 w-3.5" />
@@ -903,14 +904,18 @@ export default function OpenPage() {
                     Let&apos;s build the future of email together
                   </h2>
                   <p className="mt-3 text-neutral-600 dark:text-neutral-300">
-                    Whether you&apos;re fixing bugs, adding features, or improving documentation, every contribution matters.
+                    Whether you&apos;re fixing bugs, adding features, or improving documentation,
+                    every contribution matters.
                   </p>
                   <div className="mt-5 flex flex-wrap gap-3">
                     <Button
                       asChild
                       className="relative overflow-hidden bg-neutral-900 text-white transition-all hover:bg-neutral-800 dark:bg-white dark:text-neutral-900 dark:hover:bg-neutral-100"
                     >
-                      <Link href={`https://github.com/${REPOSITORY}/blob/main/.github/CONTRIBUTING.md`} target="_blank">
+                      <Link
+                        href={`https://github.com/${REPOSITORY}/blob/main/.github/CONTRIBUTING.md`}
+                        target="_blank"
+                      >
                         <span className="relative z-10 flex items-center">
                           <GitGraph className="mr-2 h-4 w-4" />
                           Start Contributing
@@ -986,25 +991,24 @@ export default function OpenPage() {
           </div>
         </div>
 
-        <div className="flex items-center justify-center gap-4 mb-6 mt-2">
+        <div className="mb-6 mt-2 flex items-center justify-center gap-4">
           <Link
             href="https://discord.gg/BCFr6FFt"
             target="_blank"
-            className="text-neutral-500 hover:text-neutral-700 dark:text-neutral-400 dark:hover:text-neutral-200 transition-colors"
+            className="text-neutral-500 transition-colors hover:text-neutral-700 dark:text-neutral-400 dark:hover:text-neutral-200"
             aria-label="Join our Discord"
           >
             <Discord className="h-4 w-4" />
           </Link>
           <Link
             href="https://x.com/zerodotemail"
             target="_blank"
-            className="text-neutral-500 hover:text-neutral-700 dark:text-neutral-400 dark:hover:text-neutral-200 transition-colors"
+            className="text-neutral-500 transition-colors hover:text-neutral-700 dark:text-neutral-400 dark:hover:text-neutral-200"
             aria-label="Follow us on X (Twitter)"
           >
             <Twitter className="h-4 w-4" />
           </Link>
         </div>
-
       </div>
     </div>
   );

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

@@ -4,7 +4,7 @@ export default function CreateLayout({ children }: { children: React.ReactNode }
   return (
     <>
       <AppSidebar />
-      <div className="w-full bg-white dark:bg-black md:p-3">{children}</div>
+      <div className="w-full bg-white md:p-3 dark:bg-black">{children}</div>
     </>
   );
 }

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

@@ -2,8 +2,8 @@ import { CreateEmail } from "@/components/create/create-email";
 
 export default function CreatePage() {
   return (
-    <div className="w-full h-full flex flex-col">
-      <div className="flex-1 h-full">
+    <div className="flex h-full w-full flex-col">
+      <div className="h-full flex-1">
         <CreateEmail />
       </div>
     </div>

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

@@ -73,23 +73,23 @@ export default function DeveloperPage() {
   const router = useRouter();
 
   return (
-    <div className="flex min-h-screen w-full flex-col bg-background">
+    <div className="bg-background flex min-h-screen w-full flex-col">
       <div className="flex-1 overflow-y-auto">
         <div className="mx-auto max-w-[1600px] p-4 md:p-6 lg:p-8">
-          <div className="sticky top-0 z-10 mb-8 bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
+          <div className="bg-background/95 supports-[backdrop-filter]:bg-background/60 sticky top-0 z-10 mb-8 backdrop-blur">
             <Button
               variant="ghost"
               size="sm"
               onClick={() => router.back()}
-              className="mb-6 gap-2 text-muted-foreground hover:text-foreground"
+              className="text-muted-foreground hover:text-foreground mb-6 gap-2"
             >
               <ArrowLeft className="h-4 w-4" />
               Back
             </Button>
 
             <div className="space-y-4">
               <h1 className="text-2xl font-bold sm:text-3xl">Developer Resources</h1>
-              <p className="text-base text-muted-foreground sm:text-lg">
+              <p className="text-muted-foreground text-base sm:text-lg">
                 Everything you need to build with 0.email&apos;s APIs and tools.
               </p>
             </div>
@@ -110,11 +110,11 @@ export default function DeveloperPage() {
                   </div>
                 </CardHeader>
                 <CardContent className="space-y-4 px-4 pb-4 sm:p-6">
-                  <p className="text-sm text-muted-foreground">{resource.details}</p>
+                  <p className="text-muted-foreground text-sm">{resource.details}</p>
                   <Button
                     asChild
                     variant="outline"
-                    className="w-full justify-between hover:bg-secondary"
+                    className="hover:bg-secondary w-full justify-between"
                   >
                     <Link href={resource.href}>
                       <span className="flex items-center justify-between">
@@ -128,11 +128,11 @@ export default function DeveloperPage() {
             ))}
           </div>
 
-          <div className="mt-8 rounded-lg border bg-card p-4 sm:mt-12 sm:p-6">
+          <div className="bg-card mt-8 rounded-lg border p-4 sm:mt-12 sm:p-6">
             <div className="flex flex-col items-center gap-4 text-center sm:flex-row sm:text-left">
               <div className="flex-1 space-y-1">
                 <h3 className="text-lg font-semibold sm:text-xl">Need Help?</h3>
-                <p className="text-sm text-muted-foreground">
+                <p className="text-muted-foreground text-sm">
                   Can&apos;t find what you&apos;re looking for? Get in touch with our developer
                   support team.
                 </p>

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

@@ -13,7 +13,7 @@ export default function Layout({ children }: { children: React.ReactNode }) {
             provider: typeof window !== "undefined" ? dexieStorageProvider : undefined,
             revalidateOnFocus: false,
             revalidateIfStale: false,
-            shouldRetryOnError: false
+            shouldRetryOnError: false,
           }}
         >
           {children}

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

@@ -15,7 +15,5 @@ export default async function MailPage({ params }: MailPageProps) {
     return <div>Invalid folder</div>;
   }
 
-  return (
-    <MailLayout />
-  );
+  return <MailLayout />;
 }