✨ 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/users/components/users-columns.tsx

@@ -30,7 +30,8 @@ import {
 import { DataTableColumnHeader } from '@/components/data-table'
 import { GroupBadge } from '@/components/group-badge'
 import { LongText } from '@/components/long-text'
-import { StatusBadge, dotColorMap } from '@/components/status-badge'
+import { StatusBadge } from '@/components/status-badge'
+import { TableId } from '@/components/table-id'
 import { USER_STATUSES, USER_ROLES, isUserDeleted } from '../constants'
 import { type User } from '../types'
 import { DataTableRowActions } from './data-table-row-actions'
@@ -73,7 +74,9 @@ export function useUsersColumns(): ColumnDef<User>[] {
         <DataTableColumnHeader column={column} title='ID' />
       ),
       cell: ({ row }) => {
-        return <div className='w-[60px]'>{row.getValue('id')}</div>
+        return (
+          <TableId value={row.getValue('id') as number} className='w-[60px]' />
+        )
       },
       meta: { label: t('ID'), mobileHidden: true },
     },
@@ -140,7 +143,6 @@ export function useUsersColumns(): ColumnDef<User>[] {
               <StatusBadge
                 label={t(statusConfig.labelKey)}
                 variant={statusConfig.variant}
-                showDot={statusConfig.showDot}
                 copyable={false}
               />
             </TooltipTrigger>
@@ -276,59 +278,62 @@ export function useUsersColumns(): ColumnDef<User>[] {
         const inviterId = user.inviter_id || 0
 
         return (
-          <div className='flex items-center gap-1.5 text-xs font-medium'>
-            <span
-              className={cn(
-                'size-1.5 shrink-0 rounded-full',
-                dotColorMap.neutral
-              )}
-              aria-hidden='true'
-            />
+          <div className='flex items-center gap-1'>
             <Tooltip>
               <TooltipTrigger
-                render={<span className='text-muted-foreground cursor-help' />}
-              >
-                {t('Invited')}: {affCount}
-              </TooltipTrigger>
+                render={
+                  <StatusBadge
+                    label={`${t('Invited')}: ${affCount}`}
+                    variant='neutral'
+                    copyable={false}
+                    className='cursor-help'
+                  />
+                }
+              />
               <TooltipContent>
                 <p className='text-xs'>{t('Number of users invited')}</p>
               </TooltipContent>
             </Tooltip>
-            <span className='text-muted-foreground/30'>·</span>
             <Tooltip>
               <TooltipTrigger
-                render={<span className='text-muted-foreground cursor-help' />}
-              >
-                {t('Revenue')}: {formatQuota(affHistoryQuota)}
-              </TooltipTrigger>
+                render={
+                  <StatusBadge
+                    label={`${t('Revenue')}: ${formatQuota(affHistoryQuota)}`}
+                    variant='neutral'
+                    copyable={false}
+                    className='cursor-help'
+                  />
+                }
+              />
               <TooltipContent>
                 <p className='text-xs'>{t('Total invitation revenue')}</p>
               </TooltipContent>
             </Tooltip>
             {inviterId > 0 && (
-              <>
-                <span className='text-muted-foreground/30'>·</span>
-                <Tooltip>
-                  <TooltipTrigger
-                    render={
-                      <span className='text-muted-foreground cursor-help' />
-                    }
-                  >
-                    {t('Inviter')}: {inviterId}
-                  </TooltipTrigger>
-                  <TooltipContent>
-                    <p className='text-xs'>
-                      {t('Invited by user ID')} {inviterId}
-                    </p>
-                  </TooltipContent>
-                </Tooltip>
-              </>
+              <Tooltip>
+                <TooltipTrigger
+                  render={
+                    <StatusBadge
+                      label={`${t('Inviter')}: ${inviterId}`}
+                      variant='neutral'
+                      copyable={false}
+                      className='cursor-help'
+                    />
+                  }
+                />
+                <TooltipContent>
+                  <p className='text-xs'>
+                    {t('Invited by user ID')} {inviterId}
+                  </p>
+                </TooltipContent>
+              </Tooltip>
             )}
             {inviterId === 0 && (
-              <>
-                <span className='text-muted-foreground/30'>·</span>
-                <span className='text-muted-foreground'>{t('No Inviter')}</span>
-              </>
+              <StatusBadge
+                label={t('No Inviter')}
+                variant='neutral'
+                copyable={false}
+              />
             )}
           </div>
         )