refactor: update onboarding descriptions for clarity, adjust button styles in AutoLabelingSettings, and enhance ThreadDisplay with new action buttons

apps/mail/components/mail/mail.tsx

@@ -107,8 +107,8 @@ const AutoLabelingSettings = () => {
   return (
     <Dialog open={open} onOpenChange={setOpen}>
       <DialogTrigger asChild>
-        <Button variant="ghost" size={'sm'} className="text-muted-foreground h-fit p-1">
-          <Settings2Icon className="h-4 w-4" />
+        <Button variant="ghost" className="md:h-fit md:px-2">
+          <Settings2Icon className="text-muted-foreground h-4 w-4 cursor-pointer" />
         </Button>
       </DialogTrigger>
       <DialogContent showOverlay>
@@ -306,7 +306,7 @@ export function MailLayout() {
                     ) : null}
                   </div>
                   <div className="flex items-center gap-2">
-                    {brainState?.enabled ? <AutoLabelingSettings /> : null}
+                    {true ? <AutoLabelingSettings /> : null}
                     <Button
                       disabled={isEnablingBrain || isDisablingBrain}
                       onClick={handleToggleAutolabeling}

apps/mail/components/mail/thread-display.tsx

@@ -169,6 +169,7 @@ export function ThreadDisplay() {
   const [focusedIndex, setFocusedIndex] = useAtom(focusedIndexAtom);
   const trpc = useTRPC();
   const { mutateAsync: markAsRead } = useMutation(trpc.mail.markAsRead.mutationOptions());
+  const [, setIsComposeOpen] = useQueryState('isComposeOpen');
 
   const handlePrevious = useCallback(() => {
     if (!id || !items.length || focusedIndex === null) return;
@@ -348,7 +349,6 @@ export function ThreadDisplay() {
           isFullscreen ? 'fixed inset-0 z-50' : '',
         )}
       >
-        <div></div>
         {!id ? (
           <div className="flex h-full items-center justify-center">
             <div className="flex flex-col items-center justify-center gap-2 text-center">
@@ -361,8 +361,19 @@ export function ThreadDisplay() {
               <div className="mt-5">
                 <p className="text-lg">It's empty here</p>
                 <p className="text-md text-[#6D6D6D] dark:text-white/50">
-                  Choose an email to view details
+                  Choose an email to view details or
                 </p>
+                <div className="mt-4 flex gap-2">
+                  <Button onClick={toggleAISidebar} variant="outline">
+                    Chat with Zero
+                  </Button>
+                  <Button onClick={() => setIsComposeOpen('true')} variant="outline">
+                    Write an email
+                  </Button>
+                  <Button disabled variant="outline">
+                    Label last 50 emails
+                  </Button>
+                </div>
               </div>
             </div>
             {!isSidebarOpen && (

apps/mail/components/onboarding.tsx

@@ -16,17 +16,17 @@ const steps = [
   },
   {
     title: 'Chat with your inbox',
-    description: 'Zero allows you to chat with your inbox and do tasks on your behalf.',
+    description: 'Zero allows you to chat with your inbox, and take actions on your behalf.',
     video: 'https://assets.0.email/step2.gif',
   },
   {
     title: 'AI Compose & Reply',
-    description: 'Our AI assistant allows you to write emails with a single click.',
+    description: 'Our AI assistant allows you to write emails that sound like you.',
     video: 'https://assets.0.email/step1.gif',
   },
   {
     title: 'Label your emails',
-    description: 'Zero helps you label your emails and helps you focus on what matters.',
+    description: 'Zero helps you label your emails to focus on what matters.',
     video: 'https://assets.0.email/step3.gif',
   },
   {