chaos/chaos-api
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
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.
This commit is contained in:
t0ng7u
2026-05-25 05:35:44 +08:00
parent b302be30e3
commit 583da45296
79 changed files with 1879 additions and 1262 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/default/src/components/ui/drawer.tsx
Vendored
+1 -1
View File
@@ -73,7 +73,7 @@ function DrawerContent({
<DrawerPrimitive.Content
data-slot='drawer-content'
className={cn(
'group/drawer-content bg-popover text-popover-foreground fixed z-50 flex h-auto flex-col text-sm data-[vaul-drawer-direction=bottom]:inset-x-0 data-[vaul-drawer-direction=bottom]:bottom-0 data-[vaul-drawer-direction=bottom]:mt-24 data-[vaul-drawer-direction=bottom]:max-h-[80vh] data-[vaul-drawer-direction=bottom]:rounded-t-xl data-[vaul-drawer-direction=bottom]:border-t data-[vaul-drawer-direction=left]:inset-y-0 data-[vaul-drawer-direction=left]:left-0 data-[vaul-drawer-direction=left]:w-3/4 data-[vaul-drawer-direction=left]:rounded-r-xl data-[vaul-drawer-direction=left]:border-r data-[vaul-drawer-direction=right]:inset-y-0 data-[vaul-drawer-direction=right]:right-0 data-[vaul-drawer-direction=right]:w-3/4 data-[vaul-drawer-direction=right]:rounded-l-xl data-[vaul-drawer-direction=right]:border-l data-[vaul-drawer-direction=top]:inset-x-0 data-[vaul-drawer-direction=top]:top-0 data-[vaul-drawer-direction=top]:mb-24 data-[vaul-drawer-direction=top]:max-h-[80vh] data-[vaul-drawer-direction=top]:rounded-b-xl data-[vaul-drawer-direction=top]:border-b data-[vaul-drawer-direction=left]:sm:max-w-sm data-[vaul-drawer-direction=right]:sm:max-w-sm',
'group/drawer-content bg-background text-foreground fixed z-50 flex h-auto flex-col overflow-hidden text-sm shadow-none data-[vaul-drawer-direction=bottom]:inset-x-0 data-[vaul-drawer-direction=bottom]:bottom-0 data-[vaul-drawer-direction=bottom]:mt-24 data-[vaul-drawer-direction=bottom]:max-h-[80vh] data-[vaul-drawer-direction=bottom]:rounded-t-xl data-[vaul-drawer-direction=bottom]:border-t data-[vaul-drawer-direction=left]:inset-y-0 data-[vaul-drawer-direction=left]:left-0 data-[vaul-drawer-direction=left]:w-3/4 data-[vaul-drawer-direction=left]:rounded-r-xl data-[vaul-drawer-direction=left]:border-r data-[vaul-drawer-direction=right]:inset-y-0 data-[vaul-drawer-direction=right]:right-0 data-[vaul-drawer-direction=right]:w-3/4 data-[vaul-drawer-direction=right]:rounded-l-xl data-[vaul-drawer-direction=right]:border-l data-[vaul-drawer-direction=top]:inset-x-0 data-[vaul-drawer-direction=top]:top-0 data-[vaul-drawer-direction=top]:mb-24 data-[vaul-drawer-direction=top]:max-h-[80vh] data-[vaul-drawer-direction=top]:rounded-b-xl data-[vaul-drawer-direction=top]:border-b data-[vaul-drawer-direction=left]:sm:max-w-sm data-[vaul-drawer-direction=right]:sm:max-w-sm',
className
)}
{...props}
web/default/src/components/ui/sheet.tsx
Vendored
+1 -1
View File
@@ -76,7 +76,7 @@ function SheetContent({
data-slot='sheet-content'
data-side={side}
className={cn(
'bg-popover text-popover-foreground fixed z-50 flex flex-col gap-4 bg-clip-padding text-sm shadow-lg transition duration-200 ease-in-out data-ending-style:opacity-0 data-starting-style:opacity-0',
'bg-background text-foreground fixed z-50 flex flex-col gap-4 overflow-hidden bg-clip-padding text-sm shadow-none transition duration-200 ease-in-out data-ending-style:opacity-0 data-starting-style:opacity-0',
side === 'right' &&
'inset-y-0 right-0 h-full w-3/4 border-l data-ending-style:translate-x-[2.5rem] data-starting-style:translate-x-[2.5rem] sm:max-w-sm',
side === 'left' &&
web/default/src/components/ui/sonner.tsx
Vendored
+23 -9
View File
@@ -26,15 +26,15 @@ import {
Loading03Icon,
} from '@hugeicons/core-free-icons'
import { HugeiconsIcon } from '@hugeicons/react'
import { useTheme } from 'next-themes'
import { Toaster as Sonner, type ToasterProps } from 'sonner'
import { useTheme } from '@/context/theme-provider'
const Toaster = ({ ...props }: ToasterProps) => {
const { theme = 'system' } = useTheme()
const Toaster = (props: ToasterProps) => {
const { resolvedTheme } = useTheme()
return (
<Sonner
theme={theme as ToasterProps['theme']}
theme={resolvedTheme}
className='toaster group'
icons={{
success: (
@@ -78,14 +78,28 @@ const Toaster = ({ ...props }: ToasterProps) => {
'--normal-bg': 'var(--popover)',
'--normal-text': 'var(--popover-foreground)',
'--normal-border': 'var(--border)',
'--success-bg':
'color-mix(in oklch, var(--success) 16%, var(--popover))',
'--success-border':
'color-mix(in oklch, var(--success) 35%, var(--border))',
'--success-text': 'var(--success)',
'--info-bg': 'color-mix(in oklch, var(--info) 16%, var(--popover))',
'--info-border':
'color-mix(in oklch, var(--info) 35%, var(--border))',
'--info-text': 'var(--info)',
'--warning-bg':
'color-mix(in oklch, var(--warning) 18%, var(--popover))',
'--warning-border':
'color-mix(in oklch, var(--warning) 38%, var(--border))',
'--warning-text': 'var(--warning)',
'--error-bg':
'color-mix(in oklch, var(--destructive) 16%, var(--popover))',
'--error-border':
'color-mix(in oklch, var(--destructive) 35%, var(--border))',
'--error-text': 'var(--destructive)',
'--border-radius': 'var(--radius)',
} as React.CSSProperties
}
toastOptions={{
classNames: {
toast: 'cn-toast',
},
}}
{...props}
/>
)
web/default/src/components/ui/table.tsx
Vendored
+5 -2
View File
@@ -25,11 +25,14 @@ function Table({ className, ...props }: React.ComponentProps<'table'>) {
return (
<div
data-slot='table-container'
className='relative w-full overflow-x-auto'
className='relative w-full overflow-x-auto overflow-y-hidden'
>
<table
data-slot='table'
className={cn('w-full caption-bottom text-sm', className)}
className={cn(
'w-full caption-bottom text-sm tabular-nums [&_td]:text-sm [&_td_*]:text-sm [&_th]:text-sm [&_th_*]:text-sm',
className
)}
{...props}
/>
</div>