✨ refactor(ui): Improve usage log filter responsiveness and mobile UX

Refactor the usage log filter toolbar into a shared reusable component for common, drawing, and task logs. Optimize desktop filters with a responsive grid, move secondary filters into a mobile drawer, standardize filter typography, remove redundant filter icons, and add the missing i18n translations for the new drawer description.

web/default/src/features/usage-logs/components/columns/column-helpers.tsx

@@ -21,7 +21,6 @@ import { useState } from 'react'
 import type { ColumnDef } from '@tanstack/react-table'
 import { Zap } from 'lucide-react'
 import { formatTimestampToDate, formatTokens } from '@/lib/format'
-import { cn } from '@/lib/utils'
 import {
   Tooltip,
   TooltipContent,
@@ -97,36 +96,6 @@ export function createTimestampColumn<T>(config: {
   }
 }
 
-/**
- * Duration pill colors matching common logs timing column
- */
-const durationPillBg: Record<string, string> = {
-  green:
-    'border border-emerald-200/60 bg-emerald-50/70 dark:border-emerald-800/50 dark:bg-emerald-950/25',
-  red: 'border border-rose-200/70 bg-rose-50/70 dark:border-rose-800/50 dark:bg-rose-950/25',
-  success:
-    'border border-emerald-200/60 bg-emerald-50/50 dark:border-emerald-800/50 dark:bg-emerald-950/20',
-  info: 'border border-sky-200/60 bg-sky-50/50 dark:border-sky-800/50 dark:bg-sky-950/20',
-  warning:
-    'border border-amber-200/60 bg-amber-50/50 dark:border-amber-800/50 dark:bg-amber-950/20',
-}
-
-const durationTextColor: Record<string, string> = {
-  green: 'text-emerald-700 dark:text-emerald-400',
-  red: 'text-rose-700 dark:text-rose-400',
-  success: 'text-emerald-700 dark:text-emerald-400',
-  info: 'text-sky-700 dark:text-sky-400',
-  warning: 'text-amber-700 dark:text-amber-400',
-}
-
-const durationDotColor: Record<string, string> = {
-  green: 'bg-emerald-500',
-  red: 'bg-rose-500',
-  success: 'bg-emerald-500',
-  info: 'bg-sky-500',
-  warning: 'bg-amber-500',
-}
-
 /**
  * Create a duration column - pill style matching common logs timing
  */
@@ -163,25 +132,16 @@ export function createDurationColumn<T>(config: {
       }
 
       const variant =
-        duration.durationSec > warningThresholdSec ? 'red' : 'green'
+        duration.durationSec > warningThresholdSec ? 'danger' : 'success'
 
       return (
-        <span
-          className={cn(
-            'inline-flex w-fit items-center gap-1 rounded-md px-1.5 py-0.5 font-mono text-xs font-medium',
-            durationPillBg[variant],
-            durationTextColor[variant]
-          )}
-        >
-          <span
-            className={cn(
-              'size-1.5 shrink-0 rounded-full',
-              durationDotColor[variant]
-            )}
-            aria-hidden='true'
-          />
-          {duration.durationSec.toFixed(1)}s
-        </span>
+        <StatusBadge
+          label={`${duration.durationSec.toFixed(1)}s`}
+          variant={variant}
+          size='sm'
+          copyable={false}
+          className='font-mono'
+        />
       )
     },
     meta: { label: headerLabel },