✨ 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.
This commit is contained in:
t0ng7u
+354
@@ -0,0 +1,354 @@
|
||||
/*
|
||||
Copyright (C) 2023-2026 QuantumNous
|
||||
|
||||
This program is free software: you can redistribute it and/or modify
|
||||
it under the terms of the GNU Affero General Public License as
|
||||
published by the Free Software Foundation, either version 3 of the
|
||||
License, or (at your option) any later version.
|
||||
|
||||
This program is distributed in the hope that it will be useful,
|
||||
but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||
GNU Affero General Public License for more details.
|
||||
|
||||
You should have received a copy of the GNU Affero General Public License
|
||||
along with this program. If not, see <https://www.gnu.org/licenses/>.
|
||||
|
||||
For commercial licensing, please contact support@quantumnous.com
|
||||
*/
|
||||
import type { TFunction } from 'i18next'
|
||||
import { Bell, Megaphone } from 'lucide-react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import { getAnnouncementColorClass } from '@/lib/colors'
|
||||
import { formatDateTimeObject } from '@/lib/time'
|
||||
import { cn } from '@/lib/utils'
|
||||
import { Badge } from '@/components/ui/badge'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import {
|
||||
Empty,
|
||||
EmptyDescription,
|
||||
EmptyHeader,
|
||||
EmptyMedia,
|
||||
EmptyTitle,
|
||||
} from '@/components/ui/empty'
|
||||
import { Markdown } from '@/components/ui/markdown'
|
||||
import {
|
||||
Popover,
|
||||
PopoverContent,
|
||||
PopoverHeader,
|
||||
PopoverTitle,
|
||||
PopoverTrigger,
|
||||
} from '@/components/ui/popover'
|
||||
import { ScrollArea } from '@/components/ui/scroll-area'
|
||||
import { Separator } from '@/components/ui/separator'
|
||||
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
|
||||
|
||||
interface AnnouncementItem {
|
||||
type?: string
|
||||
content?: string
|
||||
extra?: string
|
||||
publishDate?: string | Date
|
||||
}
|
||||
|
||||
interface NotificationPopoverProps {
|
||||
open: boolean
|
||||
onOpenChange: (open: boolean) => void
|
||||
unreadCount: number
|
||||
activeTab: 'notice' | 'announcements'
|
||||
onTabChange: (tab: 'notice' | 'announcements') => void
|
||||
notice: string
|
||||
announcements: AnnouncementItem[]
|
||||
loading: boolean
|
||||
className?: string
|
||||
}
|
||||
|
||||
/**
|
||||
* Get relative time string from a date
|
||||
*/
|
||||
function getRelativeTime(publishDate: string | Date, t: TFunction): string {
|
||||
if (!publishDate) return ''
|
||||
|
||||
const now = new Date()
|
||||
const pubDate = new Date(publishDate)
|
||||
|
||||
// If invalid date, return original string
|
||||
if (isNaN(pubDate.getTime()))
|
||||
return typeof publishDate === 'string' ? publishDate : ''
|
||||
|
||||
const diffMs = now.getTime() - pubDate.getTime()
|
||||
const diffSeconds = Math.floor(diffMs / 1000)
|
||||
const diffMinutes = Math.floor(diffSeconds / 60)
|
||||
const diffHours = Math.floor(diffMinutes / 60)
|
||||
const diffDays = Math.floor(diffHours / 24)
|
||||
const diffWeeks = Math.floor(diffDays / 7)
|
||||
const diffMonths = Math.floor(diffDays / 30)
|
||||
const diffYears = Math.floor(diffDays / 365)
|
||||
|
||||
// If future time, show specific date
|
||||
if (diffMs < 0) return formatDateTimeObject(pubDate)
|
||||
|
||||
// Return relative time based on difference
|
||||
if (diffSeconds < 60) return t('Just now')
|
||||
if (diffMinutes < 60)
|
||||
return diffMinutes === 1
|
||||
? t('1 minute ago')
|
||||
: t('{{count}} minutes ago', { count: diffMinutes })
|
||||
if (diffHours < 24)
|
||||
return diffHours === 1
|
||||
? t('1 hour ago')
|
||||
: t('{{count}} hours ago', { count: diffHours })
|
||||
if (diffDays < 7)
|
||||
return diffDays === 1
|
||||
? t('1 day ago')
|
||||
: t('{{count}} days ago', { count: diffDays })
|
||||
if (diffWeeks < 4)
|
||||
return diffWeeks === 1
|
||||
? t('1 week ago')
|
||||
: t('{{count}} weeks ago', { count: diffWeeks })
|
||||
if (diffMonths < 12)
|
||||
return diffMonths === 1
|
||||
? t('1 month ago')
|
||||
: t('{{count}} months ago', { count: diffMonths })
|
||||
if (diffYears < 2) return t('1 year ago')
|
||||
|
||||
// Over 2 years, show specific date
|
||||
return formatDateTimeObject(pubDate)
|
||||
}
|
||||
|
||||
/**
|
||||
* Announcement status dot indicator
|
||||
*/
|
||||
function AnnouncementDot({ type }: { type?: string }) {
|
||||
return (
|
||||
<span
|
||||
className={cn(
|
||||
'mt-1.5 inline-block size-2 shrink-0 rounded-full',
|
||||
getAnnouncementColorClass(type)
|
||||
)}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
/**
|
||||
* Empty state component
|
||||
*/
|
||||
function EmptyState({
|
||||
icon,
|
||||
title,
|
||||
description,
|
||||
}: {
|
||||
icon: React.ReactNode
|
||||
title: string
|
||||
description?: string
|
||||
}) {
|
||||
return (
|
||||
<Empty className='min-h-48 border-0 p-4'>
|
||||
<EmptyHeader>
|
||||
<EmptyMedia variant='icon'>{icon}</EmptyMedia>
|
||||
<EmptyTitle>{title}</EmptyTitle>
|
||||
{description ? (
|
||||
<EmptyDescription>{description}</EmptyDescription>
|
||||
) : null}
|
||||
</EmptyHeader>
|
||||
</Empty>
|
||||
)
|
||||
}
|
||||
|
||||
/**
|
||||
* Notice tab content
|
||||
*/
|
||||
function NoticeContent({
|
||||
notice,
|
||||
loading,
|
||||
t,
|
||||
}: {
|
||||
notice: string
|
||||
loading: boolean
|
||||
t: TFunction
|
||||
}) {
|
||||
if (loading) {
|
||||
return (
|
||||
<EmptyState
|
||||
icon={<Bell />}
|
||||
title={t('Loading...')}
|
||||
description={t('Latest platform updates and notices')}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
if (!notice) {
|
||||
return (
|
||||
<EmptyState icon={<Bell />} title={t('No announcements at this time')} />
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<ScrollArea className='h-[min(52vh,28rem)] pr-3'>
|
||||
<Markdown>{notice}</Markdown>
|
||||
</ScrollArea>
|
||||
)
|
||||
}
|
||||
|
||||
/**
|
||||
* Announcements tab content
|
||||
*/
|
||||
function AnnouncementsContent({
|
||||
announcements,
|
||||
loading,
|
||||
t,
|
||||
}: {
|
||||
announcements: AnnouncementItem[]
|
||||
loading: boolean
|
||||
t: TFunction
|
||||
}) {
|
||||
if (loading) {
|
||||
return (
|
||||
<EmptyState
|
||||
icon={<Megaphone />}
|
||||
title={t('Loading...')}
|
||||
description={t('Latest platform updates and notices')}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
if (announcements.length === 0) {
|
||||
return (
|
||||
<EmptyState icon={<Megaphone />} title={t('No system announcements')} />
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<ScrollArea className='h-[min(52vh,28rem)] pr-3'>
|
||||
<div className='flex flex-col'>
|
||||
{announcements.map((item, idx) => {
|
||||
const publishDate = item.publishDate
|
||||
? new Date(item.publishDate)
|
||||
: null
|
||||
const relativeTime = publishDate
|
||||
? getRelativeTime(publishDate, t)
|
||||
: ''
|
||||
const absoluteTime = publishDate
|
||||
? formatDateTimeObject(publishDate)
|
||||
: ''
|
||||
|
||||
return (
|
||||
<div key={idx}>
|
||||
<div className='py-3'>
|
||||
<div className='flex items-start gap-3'>
|
||||
<AnnouncementDot type={item.type} />
|
||||
<div className='flex min-w-0 flex-1 flex-col gap-2'>
|
||||
<div className='text-sm'>
|
||||
<Markdown>{item.content || ''}</Markdown>
|
||||
</div>
|
||||
|
||||
{item.extra ? (
|
||||
<div className='text-muted-foreground text-xs'>
|
||||
<Markdown>{item.extra}</Markdown>
|
||||
</div>
|
||||
) : null}
|
||||
|
||||
{absoluteTime ? (
|
||||
<div className='text-muted-foreground text-xs'>
|
||||
{relativeTime ? `${relativeTime} • ` : null}
|
||||
{absoluteTime}
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{idx < announcements.length - 1 ? <Separator /> : null}
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
</ScrollArea>
|
||||
)
|
||||
}
|
||||
|
||||
/**
|
||||
* Notification popover with Notice and Announcements tabs
|
||||
*/
|
||||
export function NotificationPopover({
|
||||
open,
|
||||
onOpenChange,
|
||||
unreadCount,
|
||||
activeTab,
|
||||
onTabChange,
|
||||
notice,
|
||||
announcements,
|
||||
loading,
|
||||
className,
|
||||
}: NotificationPopoverProps) {
|
||||
const { t } = useTranslation()
|
||||
return (
|
||||
<Popover open={open} onOpenChange={onOpenChange}>
|
||||
<PopoverTrigger
|
||||
render={
|
||||
<Button
|
||||
variant='ghost'
|
||||
size='icon'
|
||||
className={cn('relative size-9', className)}
|
||||
aria-label={t('Notifications')}
|
||||
/>
|
||||
}
|
||||
>
|
||||
<Bell className='size-[1.2rem]' />
|
||||
{unreadCount > 0 ? (
|
||||
<Badge
|
||||
variant='destructive'
|
||||
className='absolute -top-1 -right-1 flex h-5 min-w-5 items-center justify-center px-1 text-[10px] font-semibold tabular-nums'
|
||||
>
|
||||
{unreadCount > 99 ? '99+' : unreadCount}
|
||||
</Badge>
|
||||
) : null}
|
||||
</PopoverTrigger>
|
||||
|
||||
<PopoverContent
|
||||
align='end'
|
||||
sideOffset={8}
|
||||
className='w-[min(26rem,calc(100vw-1rem))] gap-3 p-3'
|
||||
>
|
||||
<PopoverHeader className='gap-1 px-1'>
|
||||
<PopoverTitle>{t('System Announcements')}</PopoverTitle>
|
||||
<p className='text-muted-foreground text-xs'>
|
||||
{t('Latest platform updates and notices')}
|
||||
</p>
|
||||
</PopoverHeader>
|
||||
|
||||
<Tabs
|
||||
value={activeTab}
|
||||
onValueChange={onTabChange as (value: string) => void}
|
||||
>
|
||||
<TabsList className='grid w-full grid-cols-2'>
|
||||
<TabsTrigger value='notice' className='gap-1.5'>
|
||||
<Bell className='size-3.5' />
|
||||
{t('Notice')}
|
||||
</TabsTrigger>
|
||||
<TabsTrigger value='announcements' className='gap-1.5'>
|
||||
<Megaphone className='size-3.5' />
|
||||
{t('Timeline')}
|
||||
</TabsTrigger>
|
||||
</TabsList>
|
||||
|
||||
<TabsContent value='notice' className='mt-2'>
|
||||
<NoticeContent notice={notice} loading={loading} t={t} />
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value='announcements' className='mt-2'>
|
||||
<AnnouncementsContent
|
||||
announcements={announcements}
|
||||
loading={loading}
|
||||
t={t}
|
||||
/>
|
||||
</TabsContent>
|
||||
</Tabs>
|
||||
|
||||
<div className='flex justify-end'>
|
||||
<Button size='sm' onClick={() => onOpenChange(false)}>
|
||||
{t('Close')}
|
||||
</Button>
|
||||
</div>
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user