feat(ui): refine default frontend layouts

web/default/src/features/usage-logs/index.tsx

@@ -1,6 +1,10 @@
-import { getRouteApi } from '@tanstack/react-router'
+import { useCallback, useMemo } from 'react'
+import { getRouteApi, useNavigate } from '@tanstack/react-router'
 import { useTranslation } from 'react-i18next'
+import { useSidebarConfig } from '@/hooks/use-sidebar-config'
+import { Tabs, TabsList, TabsTrigger } from '@/components/ui/tabs'
 import { SectionPageLayout } from '@/components/layout'
+import type { NavGroup } from '@/components/layout/types'
 import { CacheStatsDialog } from '@/features/system-settings/general/channel-affinity/cache-stats-dialog'
 import { UserInfoDialog } from './components/dialogs/user-info-dialog'
 import { UsageLogsPrimaryButtons } from './components/usage-logs-primary-buttons'
@@ -16,9 +20,29 @@ import {
 } from './section-registry'
 
 const route = getRouteApi('/_authenticated/usage-logs/$section')
+const TASK_LOG_SECTIONS = ['drawing', 'task'] as const
+
+const SECTION_META: Record<
+  UsageLogsSectionId,
+  { titleKey: string; descriptionKey: string }
+> = {
+  common: {
+    titleKey: 'Common Logs',
+    descriptionKey: 'View and manage your API usage logs',
+  },
+  drawing: {
+    titleKey: 'Drawing Logs',
+    descriptionKey: 'View and manage your drawing logs',
+  },
+  task: {
+    titleKey: 'Task Logs',
+    descriptionKey: 'View and manage your task logs',
+  },
+}
 
 function UsageLogsContent() {
   const { t } = useTranslation()
+  const navigate = useNavigate()
   const params = route.useParams()
   const activeCategory: UsageLogsSectionId =
     params.section && isUsageLogsSectionId(params.section)
@@ -32,31 +56,54 @@ function UsageLogsContent() {
     affinityDialogOpen,
     setAffinityDialogOpen,
   } = useUsageLogsContext()
+  const tabNavGroups = useMemo<NavGroup[]>(
+    () => [
+      {
+        title: 'Task Logs',
+        items: TASK_LOG_SECTIONS.map((section) => ({
+          title: SECTION_META[section].titleKey,
+          url: `/usage-logs/${section}`,
+        })),
+      },
+    ],
+    []
+  )
+  const filteredTabGroups = useSidebarConfig(tabNavGroups)
+  const visibleSections = useMemo(
+    () =>
+      (filteredTabGroups[0]?.items ?? [])
+        .map((item) => {
+          if (!('url' in item) || typeof item.url !== 'string') return null
+          return item.url.split('/').pop() ?? null
+        })
+        .filter(
+          (section): section is UsageLogsSectionId =>
+            Boolean(section && isUsageLogsSectionId(section))
+        ),
+    [filteredTabGroups]
+  )
 
-  const title =
-    activeCategory === 'common'
-      ? t('Common Logs')
-      : activeCategory === 'drawing'
-        ? t('Drawing Logs')
-        : activeCategory === 'task'
-          ? t('Task Logs')
-          : t('Usage Logs')
+  const handleSectionChange = useCallback(
+    (section: string) => {
+      void navigate({
+        to: '/usage-logs/$section',
+        params: { section: section as UsageLogsSectionId },
+      })
+    },
+    [navigate]
+  )
 
-  const description =
-    activeCategory === 'common'
-      ? t('View and manage your API usage logs')
-      : activeCategory === 'drawing'
-        ? t('View and manage your drawing logs')
-        : activeCategory === 'task'
-          ? t('View and manage your task logs')
-          : t('View and manage your API usage logs')
+  const pageMeta =
+    activeCategory === 'common' ? SECTION_META.common : SECTION_META.task
+  const showTaskSwitcher =
+    activeCategory !== 'common' && visibleSections.length > 1
 
   return (
     <>
       <SectionPageLayout>
-        <SectionPageLayout.Title>{title}</SectionPageLayout.Title>
+        <SectionPageLayout.Title>{t(pageMeta.titleKey)}</SectionPageLayout.Title>
         <SectionPageLayout.Description>
-          {description}
+          {t(pageMeta.descriptionKey)}
         </SectionPageLayout.Description>
         <SectionPageLayout.Actions>
           {activeCategory !== 'common' && (
@@ -64,7 +111,20 @@ function UsageLogsContent() {
           )}
         </SectionPageLayout.Actions>
         <SectionPageLayout.Content>
-          <UsageLogsTable logCategory={activeCategory} />
+          <div className='space-y-4'>
+            {showTaskSwitcher && (
+              <Tabs value={activeCategory} onValueChange={handleSectionChange}>
+                <TabsList className='h-auto max-w-full flex-wrap justify-start'>
+                  {visibleSections.map((section) => (
+                    <TabsTrigger key={section} value={section}>
+                      {t(SECTION_META[section].titleKey)}
+                    </TabsTrigger>
+                  ))}
+                </TabsList>
+              </Tabs>
+            )}
+            <UsageLogsTable logCategory={activeCategory} />
+          </div>
         </SectionPageLayout.Content>
       </SectionPageLayout>