select ui fix and make important label the default

apps/mail/components/mail/mail-list.tsx

@@ -10,6 +10,8 @@ import {
   Tag,
   User,
   Users,
+  Inbox,
+  Mail,
 } from 'lucide-react';
 import type { ConditionalThreadProps, InitialThread, MailListProps, MailSelectMode } from '@/types';
 import { type ComponentProps, memo, useCallback, useEffect, useMemo, useRef } from 'react';
@@ -35,6 +37,7 @@ import { useQueryState } from 'nuqs';
 import items from './demo.json';
 import { toast } from 'sonner';
 import { ThreadContextMenu } from '@/components/context/thread-context';
+import { Categories } from './mail';
 const HOVER_DELAY = 1000; // ms before prefetching
 
 const ThreadWrapper = ({
@@ -384,6 +387,10 @@ export const MailList = memo(({ isCompact }: MailListProps) => {
   const searchParams = useSearchParams();
   const router = useRouter();
   const [threadId, setThreadId] = useQueryState('threadId');
+  const [category, setCategory] = useQueryState('category');
+  const [searchValue, setSearchValue] = useSearchValue();
+
+  const allCategories = Categories();
 
   const sessionData = useMemo(
     () => ({
@@ -393,7 +400,19 @@ export const MailList = memo(({ isCompact }: MailListProps) => {
     [session],
   );
 
-  const [searchValue, setSearchValue] = useSearchValue();
+  // Set initial category search value
+  useEffect(() => {
+    const currentCategory = category ? allCategories.find(cat => cat.id === category) :
+                                     allCategories.find(cat => cat.id === 'Important');
+    
+    if (currentCategory && searchValue.value === '') {
+      setSearchValue({
+        value: currentCategory.searchValue || '',
+        highlight: '',
+        folder: '',
+      });
+    }
+  }, []); // Run only once on mount
 
   const {
     data: { threads: items, nextPageToken },

apps/mail/components/mail/mail.tsx

@@ -171,7 +171,7 @@ export function DemoMailLayout() {
               </div>
             </div>
           </ResizablePanel>
-          
+
           {isDesktop && mail.selected && (
             <>
               <ResizableHandle className="opacity-0" />
@@ -390,7 +390,7 @@ export function MailLayout() {
             </div>
           </ResizablePanel>
 
-          <ResizableHandle className='opacity-0'/>
+          <ResizableHandle className="opacity-0" />
 
           {isDesktop ? (
             <>
@@ -595,17 +595,17 @@ function BulkSelectActions() {
   );
 }
 
-const Categories = () => {
+export const Categories = () => {
   const t = useTranslations();
 
   return [
     {
-      id: 'Primary',
-      name: t('common.mailCategories.primary'),
-      searchValue: 'in:inbox category:primary',
-      icon: <Inbox className="h-4 w-4" />,
+      id: 'Important',
+      name: t('common.mailCategories.important'),
+      searchValue: 'is:important',
+      icon: <AlertTriangle className="h-4 w-4" />,
       colors:
-        'border-0 bg-gray-200 text-gray-700 dark:bg-gray-800/50 dark:text-gray-400 dark:hover:bg-gray-800/70',
+        'border-0 text-amber-800 bg-amber-100 dark:bg-amber-900/20 dark:text-amber-500 dark:hover:bg-amber-900/30',
     },
     {
       id: 'All Mail',
@@ -616,12 +616,12 @@ const Categories = () => {
         'border-0 bg-blue-100 text-blue-700 dark:bg-blue-900/20 dark:text-blue-400 dark:hover:bg-blue-900/30',
     },
     {
-      id: 'Important',
-      name: t('common.mailCategories.important'),
-      searchValue: 'is:important',
-      icon: <AlertTriangle className="h-4 w-4" />,
+      id: 'Primary',
+      name: t('common.mailCategories.primary'),
+      searchValue: 'in:inbox category:primary',
+      icon: <Inbox className="h-4 w-4" />,
       colors:
-        'border-0 text-amber-800 bg-amber-100 dark:bg-amber-900/20 dark:text-amber-500 dark:hover:bg-amber-900/30',
+        'border-0 bg-gray-200 text-gray-700 dark:bg-gray-800/50 dark:text-gray-400 dark:hover:bg-gray-800/70',
     },
     {
       id: 'Personal',
@@ -655,32 +655,43 @@ function CategorySelect() {
   const categories = Categories();
   const router = useRouter();
   const [category, setCategory] = useQueryState('category', {
-    defaultValue: 'Primary',
+    defaultValue: 'Important',
   });
 
   return (
     <Select
       onValueChange={(value: string) => {
-        // Find the category and trigger its selection
-        const category = categories.find((cat) => cat.id === value);
+        const selectedCategory = categories.find((cat) => cat.id === value);
 
-        if (category) {
-          // Update search value based on category
-          const searchValueState = {
-            value: category.searchValue || '',
+        if (selectedCategory) {
+          setSearchValue({
+            value: selectedCategory.searchValue || '',
             highlight: '',
             folder: '',
-          };
-          setSearchValue(searchValueState);
+          });
 
-          // Update category in URL - nuqs will preserve other params automatically
-          setCategory(value);
+          if (value === 'Important') {
+            setCategory(null);
+          } else {
+            setCategory(value);
+          }
         }
       }}
-      value={category}
+      value={category || 'Important'}
     >
-      <SelectTrigger className="bg-popover h-9 w-36">
-        <SelectValue placeholder="Select category" />
+      <SelectTrigger className="bg-popover h-9 w-fit">
+        {category ? (
+          <div className="flex items-center gap-2">
+            <span className="block md:hidden">
+              {categories.find((cat) => cat.id === category)?.icon}
+            </span>
+            <span className="hidden w-full md:block">
+              <SelectValue placeholder="Select category" />
+            </span>
+          </div>
+        ) : (
+          <SelectValue placeholder="Select category" />
+        )}
       </SelectTrigger>
       <SelectContent>
         {categories.map((category) => (

apps/mail/components/ui/select.tsx

@@ -26,7 +26,7 @@ const SelectTrigger = React.forwardRef<
   >
     {children}
     <SelectPrimitive.Icon asChild>
-      <ChevronDown className="h-4 w-4 opacity-50" />
+      <ChevronDown className="h-4 w-4 opacity-50 hidden md:block ml-2" />
     </SelectPrimitive.Icon>
   </SelectPrimitive.Trigger>
 ));