better checbox in mail list (#1677)

# Enhanced Select All Checkbox UI in Mail Component

## Description

This PR enhances the "Select All" checkbox in the mail component with a more user-friendly design. The changes include:

<!-- This is an auto-generated comment: release notes by coderabbit.ai -->
## Summary by CodeRabbit

* **Style**
  * Improved layout and spacing for sidebar toggle and select-all checkbox elements.
  * Updated the visual appearance of the select-all checkbox with a custom-styled label and icon, enhancing clarity and accessibility.
  * Adjusted icon rendering to ensure consistent coloring with the rest of the interface.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

apps/mail/components/icons/icons.tsx

@@ -1641,6 +1641,7 @@ export const Check = ({ className }: { className?: string }) => (
     <path
       id="Union"
       d="M6.40907 0.569119C6.58341 0.30762 6.93661 0.236654 7.19813 0.410916C7.45962 0.585241 7.53057 0.938456 7.35634 1.19998L3.56239 6.89138C3.46781 7.03326 3.31411 7.12556 3.14442 7.14236C2.97475 7.15915 2.806 7.09886 2.68544 6.9783L0.409072 4.70193C0.18694 4.47978 0.187156 4.11953 0.409072 3.89724C0.63133 3.67499 0.991493 3.675 1.21376 3.89724L2.99989 5.6824L6.40907 0.569119Z"
+      fill="currentColor"
     />
   </svg>
 );

apps/mail/components/mail/mail.tsx

@@ -486,9 +486,9 @@ export function MailLayout() {
                 )}
               >
                 <div className="flex w-full items-center justify-between gap-2">
-                  <div>
+                  <div className="flex items-center gap-2">
                     <SidebarToggle className="h-fit px-2" />
-                    <SelectAllCheckbox className="ml-2" />
+                    <SelectAllCheckbox />
                   </div>
 
                   <div className="flex items-center gap-2">

apps/mail/components/mail/select-all-checkbox.tsx

@@ -1,12 +1,13 @@
-import { Checkbox } from '@/components/ui/checkbox';
-import { useMail } from '@/components/mail/use-mail';
-import { useThreads } from '@/hooks/use-threads';
+import React, { useCallback, useMemo, useRef, useState, useEffect } from 'react';
 import { useSearchValue } from '@/hooks/use-search-value';
 import { trpcClient } from '@/providers/query-provider';
-import { cn } from '@/lib/utils';
+import { useMail } from '@/components/mail/use-mail';
+import { Checkbox } from '@/components/ui/checkbox';
+import { useThreads } from '@/hooks/use-threads';
 import { useParams } from 'react-router';
+import { Check } from '../icons/icons';
+import { cn } from '@/lib/utils';
 import { toast } from 'sonner';
-import React, { useCallback, useMemo, useRef, useState, useEffect } from 'react';
 
 export default function SelectAllCheckbox({ className }: { className?: string }) {
   const [mail, setMail] = useMail();
@@ -97,12 +98,38 @@ export default function SelectAllCheckbox({ className }: { className?: string })
   }, [folder, query]);
 
   return (
-    <Checkbox
-      ref={checkboxRef}
-      disabled={isFetchingIds}
-      checked={isIndeterminate ? 'indeterminate' : isAllLoadedSelected}
-      onCheckedChange={handleToggle}
-      className={cn('h-4 w-4', className)}
-    />
+    <div className="flex items-center gap-2">
+      <Checkbox
+        ref={checkboxRef}
+        disabled={isFetchingIds}
+        checked={isIndeterminate ? 'indeterminate' : isAllLoadedSelected}
+        onCheckedChange={handleToggle}
+        className={cn('hidden', className)}
+        id="select-all"
+      />
+      <label
+        htmlFor="select-all"
+        className={cn(
+          'text-muted-foreground flex items-center gap-1 text-xs font-medium transition-colors',
+          isIndeterminate && 'text-primary',
+        )}
+      >
+        <span
+          className={cn(
+            'border-muted-foreground flex items-center justify-center rounded border p-0.5 transition-colors',
+            {
+              'border-primary bg-primary': isAllLoadedSelected,
+            },
+          )}
+        >
+          <Check
+            className={cn('text-muted-foreground/30 h-2 w-2 transition-colors', {
+              'text-black': isAllLoadedSelected,
+            })}
+          />
+        </span>
+        Select all
+      </label>
+    </div>
   );
-}
+}