✨ 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/subscriptions/components/dialogs/user-subscriptions-dialog.tsx

@@ -45,7 +45,13 @@ import {
   TableRow,
 } from '@/components/ui/table'
 import { ConfirmDialog } from '@/components/confirm-dialog'
+import {
+  sideDrawerContentClassName,
+  sideDrawerFormClassName,
+  sideDrawerHeaderClassName,
+} from '@/components/drawer-layout'
 import { StatusBadge } from '@/components/status-badge'
+import { TableId } from '@/components/table-id'
 import {
   getAdminPlans,
   getUserSubscriptions,
@@ -191,15 +197,15 @@ export function UserSubscriptionsDialog(props: Props) {
   return (
     <>
       <Sheet open={props.open} onOpenChange={props.onOpenChange}>
-        <SheetContent className='overflow-y-auto sm:max-w-2xl'>
-          <SheetHeader>
+        <SheetContent className={sideDrawerContentClassName('sm:max-w-2xl')}>
+          <SheetHeader className={sideDrawerHeaderClassName()}>
             <SheetTitle>{t('User Subscription Management')}</SheetTitle>
             <SheetDescription>
               {props.user?.username || '-'} (ID: {props.user?.id || '-'})
             </SheetDescription>
           </SheetHeader>
 
-          <div className='mt-4 space-y-4'>
+          <div className={sideDrawerFormClassName()}>
             <div className='flex gap-2'>
               <Select
                 items={[
@@ -279,14 +285,16 @@ export function UserSubscriptionsDialog(props: Props) {
 
                       return (
                         <TableRow key={sub.id}>
-                          <TableCell>#{sub.id}</TableCell>
+                          <TableCell>
+                            <TableId value={sub.id} />
+                          </TableCell>
                           <TableCell>
                             <div>
                               <div className='font-medium'>
                                 {planTitleMap.get(sub.plan_id) ||
                                   `#${sub.plan_id}`}
                               </div>
-                              <div className='text-muted-foreground text-xs'>
+                              <div className='text-muted-foreground text-sm'>
                                 {t('Source')}: {sub.source || '-'}
                               </div>
                             </div>
@@ -295,7 +303,7 @@ export function UserSubscriptionsDialog(props: Props) {
                             <SubscriptionStatusBadge sub={sub} t={t} />
                           </TableCell>
                           <TableCell>
-                            <div className='text-xs'>
+                            <div className='text-sm'>
                               <div>
                                 {t('Start')}: {formatTimestamp(sub.start_time)}
                               </div>

web/default/src/features/subscriptions/components/subscriptions-columns.tsx

@@ -23,6 +23,7 @@ import { formatQuota } from '@/lib/format'
 import { DataTableColumnHeader } from '@/components/data-table'
 import { GroupBadge } from '@/components/group-badge'
 import { StatusBadge } from '@/components/status-badge'
+import { TableId } from '@/components/table-id'
 import { formatDuration, formatResetPeriod } from '../lib'
 import type { PlanRecord } from '../types'
 import { DataTableRowActions } from './data-table-row-actions'
@@ -39,9 +40,7 @@ export function useSubscriptionsColumns(): ColumnDef<PlanRecord>[] {
         header: ({ column }) => (
           <DataTableColumnHeader column={column} title='ID' />
         ),
-        cell: ({ row }) => (
-          <span className='text-muted-foreground'>#{row.original.plan.id}</span>
-        ),
+        cell: ({ row }) => <TableId value={row.original.plan.id} />,
         size: 60,
       },
       {

web/default/src/features/subscriptions/components/subscriptions-mutate-drawer.tsx

@@ -51,6 +51,14 @@ import {
   SheetTitle,
 } from '@/components/ui/sheet'
 import { Switch } from '@/components/ui/switch'
+import {
+  SideDrawerSection,
+  sideDrawerContentClassName,
+  sideDrawerFooterClassName,
+  sideDrawerFormClassName,
+  sideDrawerHeaderClassName,
+  sideDrawerSwitchItemClassName,
+} from '@/components/drawer-layout'
 import {
   createPlan,
   updatePlan,
@@ -243,8 +251,8 @@ export function SubscriptionsMutateDrawer({
         }
       }}
     >
-      <SheetContent className='flex h-dvh w-full flex-col gap-0 overflow-hidden p-0 sm:max-w-[600px]'>
-        <SheetHeader className='border-b px-4 py-3 text-start sm:px-6 sm:py-4'>
+      <SheetContent className={sideDrawerContentClassName('sm:max-w-[600px]')}>
+        <SheetHeader className={sideDrawerHeaderClassName()}>
           <SheetTitle>
             {isEdit ? t('Update plan info') : t('Create new subscription plan')}
           </SheetTitle>
@@ -260,10 +268,10 @@ export function SubscriptionsMutateDrawer({
           <form
             id='subscription-form'
             onSubmit={form.handleSubmit(onSubmit)}
-            className='flex-1 space-y-4 overflow-y-auto px-3 py-3 pb-4 sm:space-y-6 sm:px-4'
+            className={sideDrawerFormClassName()}
           >
             {/* Basic Info */}
-            <div className='space-y-4'>
+            <SideDrawerSection>
               <h3 className='flex items-center gap-2 text-sm font-medium'>
                 <Settings2 className='h-4 w-4' />
                 {t('Basic Info')}
@@ -440,24 +448,24 @@ export function SubscriptionsMutateDrawer({
                   control={form.control}
                   name='enabled'
                   render={({ field }) => (
-                    <FormItem className='flex flex-row items-center gap-2 pt-8'>
+                    <FormItem className={sideDrawerSwitchItemClassName()}>
+                      <FormLabel className='!mt-0'>
+                        {t('Enabled Status')}
+                      </FormLabel>
                       <FormControl>
                         <Switch
                           checked={field.value}
                           onCheckedChange={field.onChange}
                         />
                       </FormControl>
-                      <FormLabel className='!mt-0'>
-                        {t('Enabled Status')}
-                      </FormLabel>
                     </FormItem>
                   )}
                 />
               </div>
-            </div>
+            </SideDrawerSection>
 
             {/* Duration Settings */}
-            <div className='space-y-4'>
+            <SideDrawerSection>
               <h3 className='flex items-center gap-2 text-sm font-medium'>
                 <CalendarClock className='h-4 w-4' />
                 {t('Duration Settings')}
@@ -544,10 +552,10 @@ export function SubscriptionsMutateDrawer({
                   />
                 )}
               </div>
-            </div>
+            </SideDrawerSection>
 
             {/* Quota Reset */}
-            <div className='space-y-4'>
+            <SideDrawerSection>
               <h3 className='flex items-center gap-2 text-sm font-medium'>
                 <RefreshCw className='h-4 w-4' />
                 {t('Quota Reset')}
@@ -612,10 +620,10 @@ export function SubscriptionsMutateDrawer({
                   )}
                 />
               </div>
-            </div>
+            </SideDrawerSection>
 
             {/* Payment Config */}
-            <div className='space-y-4'>
+            <SideDrawerSection>
               <h3 className='flex items-center gap-2 text-sm font-medium'>
                 <CreditCard className='h-4 w-4' />
                 {t('Third-party Payment Config')}
@@ -709,10 +717,10 @@ export function SubscriptionsMutateDrawer({
                   )
                 }}
               />
-            </div>
+            </SideDrawerSection>
           </form>
         </Form>
-        <SheetFooter className='grid grid-cols-2 gap-2 border-t px-4 py-3 sm:flex sm:px-6 sm:py-4'>
+        <SheetFooter className={sideDrawerFooterClassName()}>
           <SheetClose render={<Button variant='outline' />}>
             {t('Close')}
           </SheetClose>