✨ 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/components/group-badge.tsx

@@ -31,12 +31,12 @@ type GroupBadgeProps = Omit<
 
 function getGroupRatioClassName(ratio: number): string {
   if (ratio > 1) {
-    return 'border-warning/25 bg-warning/10 text-warning'
+    return 'bg-warning/10 text-warning'
   }
   if (ratio < 1) {
-    return 'border-info/25 bg-info/10 text-info'
+    return 'bg-info/10 text-info'
   }
-  return 'border-border bg-muted text-muted-foreground'
+  return 'bg-muted text-muted-foreground'
 }
 
 function getGroupLabel(params: {
@@ -94,11 +94,10 @@ export function GroupBadge(props: GroupBadgeProps) {
       {badge}
       <span
         className={cn(
-          'inline-flex items-center gap-1 rounded-md border px-1.5 py-0.5 font-mono text-[11px] leading-none tabular-nums',
+          'inline-flex h-6 items-center rounded-full px-2 font-mono text-sm leading-none font-medium tabular-nums',
           getGroupRatioClassName(ratio)
         )}
       >
-        <span className='size-1 rounded-full bg-current opacity-60' />
         <span>{ratio}x</span>
       </span>
     </span>