Updates for mobile

src/components/activity/ActivityLog.tsx

@@ -1,6 +1,6 @@
 import { useCallback, useEffect, useState, useRef } from 'react';
 import { Button } from '@/components/ui/button';
-import { ChevronDown, Download, RefreshCw, Search, Trash2 } from 'lucide-react';
+import { ChevronDown, Download, RefreshCw, Search, Trash2, Filter } from 'lucide-react';
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -36,6 +36,16 @@ import { toast } from 'sonner';
 import { useLiveRefresh } from '@/hooks/useLiveRefresh';
 import { useConfigStatus } from '@/hooks/useConfigStatus';
 import { useNavigation } from '@/components/layout/MainLayout';
+import {
+  Drawer,
+  DrawerClose,
+  DrawerContent,
+  DrawerDescription,
+  DrawerFooter,
+  DrawerHeader,
+  DrawerTitle,
+  DrawerTrigger,
+} from '@/components/ui/drawer';
 
 type MirrorJobWithKey = MirrorJob & { _rowKey: string };
 
@@ -343,18 +353,225 @@ export function ActivityLog() {
     setShowCleanupDialog(false);
   };
 
+  // Check if any filters are active
+  const hasActiveFilters = !!(filter.status || filter.type || filter.name);
+  const activeFilterCount = [filter.status, filter.type, filter.name].filter(Boolean).length;
+
+  // Clear all filters
+  const clearFilters = () => {
+    setFilter({
+      searchTerm: filter.searchTerm,
+      status: '',
+      type: '',
+      name: '',
+    });
+  };
+
   /* ------------------------------ UI ------------------------------ */
 
   return (
     <div className='flex flex-col gap-y-4 sm:gap-y-8'>
-      <div className='flex w-full flex-col sm:flex-row items-start sm:items-center gap-2 sm:gap-4'>
+      {/* Mobile: Search bar with filter and action buttons */}
+      <div className="flex flex-col gap-2 sm:hidden">
+        <div className="flex items-center gap-2 w-full">
+          <div className="relative flex-grow">
+            <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
+            <input
+              type="text"
+              placeholder="Search activities..."
+              className="pl-10 pr-3 h-10 w-full rounded-md border border-input bg-background text-sm shadow-sm transition-colors placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+              value={filter.searchTerm}
+              onChange={(e) =>
+                setFilter((prev) => ({ ...prev, searchTerm: e.target.value }))
+              }
+            />
+          </div>
+          
+          {/* Mobile Filter Drawer */}
+          <Drawer>
+            <DrawerTrigger asChild>
+              <Button 
+                variant="outline" 
+                size="icon" 
+                className="relative h-10 w-10 shrink-0"
+              >
+                <Filter className="h-4 w-4" />
+                {activeFilterCount > 0 && (
+                  <span className="absolute -top-1 -right-1 flex h-5 w-5 items-center justify-center rounded-full bg-primary text-[10px] font-medium text-primary-foreground">
+                    {activeFilterCount}
+                  </span>
+                )}
+              </Button>
+            </DrawerTrigger>
+            <DrawerContent className="max-h-[85vh]">
+              <DrawerHeader className="text-left">
+                <DrawerTitle className="text-lg font-semibold">Filter Activities</DrawerTitle>
+                <DrawerDescription className="text-sm text-muted-foreground">
+                  Narrow down your activity log
+                </DrawerDescription>
+              </DrawerHeader>
+              
+              <div className="px-4 py-6 space-y-6 overflow-y-auto">
+                {/* Active filters summary */}
+                {hasActiveFilters && (
+                  <div className="flex items-center justify-between p-3 bg-muted/50 rounded-lg">
+                    <span className="text-sm font-medium">
+                      {activeFilterCount} filter{activeFilterCount > 1 ? 's' : ''} active
+                    </span>
+                    <Button
+                      variant="ghost"
+                      size="sm"
+                      onClick={clearFilters}
+                      className="h-7 px-2 text-xs"
+                    >
+                      Clear all
+                    </Button>
+                  </div>
+                )}
+
+                {/* Status Filter */}
+                <div className="space-y-2">
+                  <label className="text-sm font-medium flex items-center gap-2">
+                    <span className="text-muted-foreground">By</span> Status
+                    {filter.status && (
+                      <span className="ml-auto text-xs text-muted-foreground">
+                        {filter.status.charAt(0).toUpperCase() + filter.status.slice(1)}
+                      </span>
+                    )}
+                  </label>
+                  <Select
+                    value={filter.status || 'all'}
+                    onValueChange={(v) =>
+                      setFilter((p) => ({
+                        ...p,
+                        status: v === 'all' ? '' : (v as RepoStatus),
+                      }))
+                    }
+                  >
+                    <SelectTrigger className="w-full h-10">
+                      <SelectValue placeholder="All statuses" />
+                    </SelectTrigger>
+                    <SelectContent>
+                      {['all', ...repoStatusEnum.options].map((s) => (
+                        <SelectItem key={s} value={s}>
+                          <span className="flex items-center gap-2">
+                            {s !== 'all' && (
+                              <span className={`h-2 w-2 rounded-full ${
+                                s === 'synced' ? 'bg-green-500' :
+                                s === 'failed' ? 'bg-red-500' :
+                                s === 'syncing' ? 'bg-blue-500' :
+                                'bg-yellow-500'
+                              }`} />
+                            )}
+                            {s === 'all' ? 'All statuses' : s[0].toUpperCase() + s.slice(1)}
+                          </span>
+                        </SelectItem>
+                      ))}
+                    </SelectContent>
+                  </Select>
+                </div>
+
+                {/* Type Filter */}
+                <div className="space-y-2">
+                  <label className="text-sm font-medium flex items-center gap-2">
+                    <span className="text-muted-foreground">By</span> Type
+                    {filter.type && (
+                      <span className="ml-auto text-xs text-muted-foreground">
+                        {filter.type.charAt(0).toUpperCase() + filter.type.slice(1)}
+                      </span>
+                    )}
+                  </label>
+                  <Select
+                    value={filter.type || 'all'}
+                    onValueChange={(v) =>
+                      setFilter((p) => ({ ...p, type: v === 'all' ? '' : v }))
+                    }
+                  >
+                    <SelectTrigger className="w-full h-10">
+                      <SelectValue placeholder="All types" />
+                    </SelectTrigger>
+                    <SelectContent>
+                      {['all', 'repository', 'organization'].map((t) => (
+                        <SelectItem key={t} value={t}>
+                          <span className="flex items-center gap-2">
+                            {t !== 'all' && (
+                              <span className={`h-2 w-2 rounded-full ${
+                                t === 'repository' ? 'bg-blue-500' : 'bg-purple-500'
+                              }`} />
+                            )}
+                            {t === 'all' ? 'All types' : t[0].toUpperCase() + t.slice(1)}
+                          </span>
+                        </SelectItem>
+                      ))}
+                    </SelectContent>
+                  </Select>
+                </div>
+
+                {/* Name Filter */}
+                <div className="space-y-2">
+                  <label className="text-sm font-medium flex items-center gap-2">
+                    <span className="text-muted-foreground">By</span> Name
+                    {filter.name && (
+                      <span className="ml-auto text-xs text-muted-foreground">
+                        Selected
+                      </span>
+                    )}
+                  </label>
+                  <ActivityNameCombobox
+                    activities={activities}
+                    value={filter.name || ''}
+                    onChange={(name) => setFilter((p) => ({ ...p, name }))}
+                  />
+                </div>
+              </div>
+              
+              <DrawerFooter className="gap-2 px-4 pt-2 pb-4 border-t">
+                <DrawerClose asChild>
+                  <Button className="w-full" size="sm">
+                    Apply Filters
+                  </Button>
+                </DrawerClose>
+                <DrawerClose asChild>
+                  <Button variant="outline" className="w-full" size="sm">
+                    Cancel
+                  </Button>
+                </DrawerClose>
+              </DrawerFooter>
+            </DrawerContent>
+          </Drawer>
+          
+          
+          <Button
+            variant="outline"
+            size="icon"
+            onClick={() => fetchActivities(false)}
+            title="Refresh activity log"
+            className="h-10 w-10 shrink-0"
+          >
+            <RefreshCw className="h-4 w-4" />
+          </Button>
+          
+          <Button
+            variant="outline"
+            size="icon"
+            onClick={handleCleanupClick}
+            title="Delete all activities"
+            className="text-destructive hover:text-destructive h-10 w-10 shrink-0"
+          >
+            <Trash2 className="h-4 w-4" />
+          </Button>
+        </div>
+      </div>
+
+      {/* Desktop: Original layout */}
+      <div className="hidden sm:flex sm:flex-row sm:items-center sm:gap-4 sm:w-full">
         {/* search input */}
-        <div className='relative w-full sm:flex-1'>
-          <Search className='absolute left-2 top-2.5 h-4 w-4 text-muted-foreground' />
+        <div className="relative flex-1">
+          <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
           <input
-            type='text'
-            placeholder='Search activities...'
-            className='h-9 w-full rounded-md border border-input bg-background px-3 py-1 pl-8 text-sm shadow-sm transition-colors placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring'
+            type="text"
+            placeholder="Search activities..."
+            className="pl-10 pr-3 h-10 w-full rounded-md border border-input bg-background text-sm shadow-sm transition-colors placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
             value={filter.searchTerm}
             onChange={(e) =>
               setFilter((prev) => ({
@@ -365,8 +582,8 @@ export function ActivityLog() {
           />
         </div>
 
-        {/* Filter controls row */}
-        <div className='flex flex-row items-center gap-2 w-full sm:w-auto'>
+        {/* Filter controls */}
+        <div className="flex items-center gap-2">
           {/* status select */}
           <Select
             value={filter.status || 'all'}
@@ -377,59 +594,74 @@ export function ActivityLog() {
               }))
             }
           >
-            <SelectTrigger className='h-9 w-full sm:w-[140px] max-h-9'>
-              <SelectValue placeholder='All Status' />
+            <SelectTrigger className="w-[140px] h-10">
+              <SelectValue placeholder="All statuses" />
             </SelectTrigger>
             <SelectContent>
               {['all', ...repoStatusEnum.options].map((s) => (
                 <SelectItem key={s} value={s}>
-                  {s === 'all' ? 'All Status' : s[0].toUpperCase() + s.slice(1)}
+                  <span className="flex items-center gap-2">
+                    {s !== 'all' && (
+                      <span className={`h-2 w-2 rounded-full ${
+                        s === 'synced' ? 'bg-green-500' :
+                        s === 'failed' ? 'bg-red-500' :
+                        s === 'syncing' ? 'bg-blue-500' :
+                        'bg-yellow-500'
+                      }`} />
+                    )}
+                    {s === 'all' ? 'All statuses' : s[0].toUpperCase() + s.slice(1)}
+                  </span>
                 </SelectItem>
               ))}
             </SelectContent>
           </Select>
 
-          {/* type select - hidden on mobile */}
+          {/* type select */}
           <Select
             value={filter.type || 'all'}
             onValueChange={(v) =>
               setFilter((p) => ({ ...p, type: v === 'all' ? '' : v }))
             }
           >
-            <SelectTrigger className='h-9 w-[140px] max-h-9 hidden sm:flex'>
-              <SelectValue placeholder='All Types' />
+            <SelectTrigger className="w-[140px] h-10">
+              <SelectValue placeholder="All types" />
             </SelectTrigger>
             <SelectContent>
               {['all', 'repository', 'organization'].map((t) => (
                 <SelectItem key={t} value={t}>
-                  {t === 'all' ? 'All Types' : t[0].toUpperCase() + t.slice(1)}
+                  <span className="flex items-center gap-2">
+                    {t !== 'all' && (
+                      <span className={`h-2 w-2 rounded-full ${
+                        t === 'repository' ? 'bg-blue-500' : 'bg-purple-500'
+                      }`} />
+                    )}
+                    {t === 'all' ? 'All types' : t[0].toUpperCase() + t.slice(1)}
+                  </span>
                 </SelectItem>
               ))}
             </SelectContent>
           </Select>
         </div>
 
-        {/* repo/org name combobox - hidden on mobile */}
-        <div className='hidden sm:block'>
-          <ActivityNameCombobox
-            activities={activities}
-            value={filter.name || ''}
-            onChange={(name) => setFilter((p) => ({ ...p, name }))}
-          />
-        </div>
+        {/* repo/org name combobox */}
+        <ActivityNameCombobox
+          activities={activities}
+          value={filter.name || ''}
+          onChange={(name) => setFilter((p) => ({ ...p, name }))}
+        />
 
-        {/* Action buttons row */}
-        <div className='flex items-center gap-2 ml-auto'>
-          {/* export dropdown - text hidden on mobile */}
+        {/* Action buttons */}
+        <div className="flex items-center gap-2 ml-auto">
+          {/* export dropdown */}
           <DropdownMenu>
             <DropdownMenuTrigger asChild>
-              <Button variant='outline' size='sm' className='flex items-center gap-1'>
-                <Download className='h-4 w-4' />
-                <span className='hidden sm:inline'>Export</span>
-                <ChevronDown className='h-4 w-4 hidden sm:inline' />
+              <Button variant="outline" size="sm" className="h-10">
+                <Download className="h-4 w-4 mr-2" />
+                Export
+                <ChevronDown className="h-4 w-4 ml-1" />
               </Button>
             </DropdownMenuTrigger>
-            <DropdownMenuContent>
+            <DropdownMenuContent align="end">
               <DropdownMenuItem onClick={exportAsCSV}>
                 Export as CSV
               </DropdownMenuItem>
@@ -443,11 +675,11 @@ export function ActivityLog() {
           <Button
             variant="outline"
             size="icon"
-            onClick={() => fetchActivities(false)} // Manual refresh, show loading skeleton
+            onClick={() => fetchActivities(false)}
             title="Refresh activity log"
-            className='h-8 w-8 sm:h-9 sm:w-9'
+            className="h-10 w-10"
           >
-            <RefreshCw className='h-4 w-4' />
+            <RefreshCw className="h-4 w-4" />
           </Button>
 
           {/* cleanup all activities */}
@@ -456,9 +688,9 @@ export function ActivityLog() {
             size="icon"
             onClick={handleCleanupClick}
             title="Delete all activities"
-            className="text-destructive hover:text-destructive h-8 w-8 sm:h-9 sm:w-9"
+            className="text-destructive hover:text-destructive h-10 w-10"
           >
-            <Trash2 className='h-4 w-4' />
+            <Trash2 className="h-4 w-4" />
           </Button>
         </div>
       </div>
@@ -495,6 +727,26 @@ export function ActivityLog() {
           </DialogFooter>
         </DialogContent>
       </Dialog>
+
+      {/* Mobile FAB for Export - only visible on mobile */}
+      <DropdownMenu>
+        <DropdownMenuTrigger asChild>
+          <Button 
+            className="fixed bottom-4 right-4 rounded-full h-12 w-12 shadow-lg p-0 z-10 sm:hidden"
+            variant="default"
+          >
+            <Download className="h-6 w-6" />
+          </Button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent align="end" side="top" className="mb-2">
+          <DropdownMenuItem onClick={exportAsCSV}>
+            Export as CSV
+          </DropdownMenuItem>
+          <DropdownMenuItem onClick={exportAsJSON}>
+            Export as JSON
+          </DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>
     </div>
   );
 }

src/components/activity/ActivityNameCombobox.tsx

@@ -41,9 +41,14 @@ export function ActivityNameCombobox({ activities, value, onChange }: ActivityNa
           variant="outline"
           role="combobox"
           aria-expanded={open}
-          className="w-[180px] justify-between"
+          className="w-full sm:w-[180px] justify-between h-10"
         >
-          {value ? value : "All Names"}
+          <span className={cn(
+            "truncate",
+            !value && "text-muted-foreground"
+          )}>
+            {value || "All names"}
+          </span>
           <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
         </Button>
       </PopoverTrigger>
@@ -62,7 +67,7 @@ export function ActivityNameCombobox({ activities, value, onChange }: ActivityNa
                 }}
               >
                 <Check className={cn("mr-2 h-4 w-4", value === "" ? "opacity-100" : "opacity-0")} />
-                All Names
+                All names
               </CommandItem>
               {names.map((name) => (
                 <CommandItem