@allbluecn/web-app 0.4.17 → 0.4.18

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@allbluecn/web-app",
-  "version": "0.4.17",
+  "version": "0.4.18",
   "license": "AGPL-3.0-or-later",
   "type": "module",
   "files": [
@@ -27,7 +27,7 @@
     "@fontsource-variable/geist": "^5.3.0",
     "@fontsource-variable/geist-mono": "^5.3.0",
     "@iconify/react": "^6.0.2",
-    "@lobehub/icons": "^5.10.0",
+    "@lobehub/icons": "^5.16.0",
     "@prisma/client": "^7.8.0",
     "@radix-ui/react-dialog": "^1.1.23",
     "@radix-ui/react-dropdown-menu": "^2.1.16",
@@ -135,14 +135,14 @@
     "three": "^0.180.0",
     "tw-animate-css": "^1.4.0",
     "zod": "^4.4.3",
-    "@allbluecn/ai-gateway": "0.4.12",
     "@allbluecn/kernel": "0.3.0",
-    "@allbluecn/database": "0.4.12",
-    "@allbluecn/plugins-core": "0.4.12",
+    "@allbluecn/database": "0.4.13",
+    "@allbluecn/ui": "0.4.13",
+    "@allbluecn/shared": "0.4.13",
+    "@allbluecn/ai-gateway": "0.4.13",
     "@allbluecn/prototype": "0.1.1",
-    "@allbluecn/ui": "0.4.12",
-    "@allbluecn/shared": "0.4.12",
-    "@allbluecn/tiptap": "0.4.12"
+    "@allbluecn/tiptap": "0.4.12",
+    "@allbluecn/plugins-core": "0.4.12"
   },
   "devDependencies": {
     "@babel/parser": "^8.0.4",
@@ -197,8 +197,8 @@
     "setup": "pnpm --filter @allbluecn/database generate && pnpm --filter @allbluecn/database migrate:dev",
     "check:features": "tsx scripts/check-feature-keys.ts",
     "assemble": "pnpm -w exec tsx packages/kernel/src/bin.ts --profile oss --assemble --app-dir apps/web",
-    "predev": "pnpm assemble",
-    "prebuild": "pnpm assemble",
+    "predev": "pnpm assemble && node scripts/check-sdk-versions.mjs",
+    "prebuild": "pnpm assemble && node scripts/check-sdk-versions.mjs",
     "pretest": "pnpm assemble",
     "pretest:run": "pnpm assemble"
   }

package/src/components/billing/checkout-redirect.ts

@@ -38,7 +38,7 @@ export async function redirectToPortal(): Promise<void> {
   }
 
   try {
-    const { url } = await createCustomerPortalSessionFn()
+    const { url } = await createCustomerPortalSessionFn({ data: {} })
     window.location.href = url
   } catch (error) {
     toast.error(

package/src/components/changelog/changelog-page.tsx

@@ -378,7 +378,7 @@ function SdkGroupSection({
                 className="flex items-center justify-between gap-2 py-1.5 group"
               >
                 <span className="text-xs font-medium text-muted-foreground group-hover:text-primary transition-colors truncate">
-                  {sdk.name}
+                  {sdk.displayName || sdk.name}
                 </span>
                 <code className="text-[10px] font-mono text-muted-foreground bg-muted/50 px-1.5 py-0.5 rounded shrink-0 group-hover:text-primary transition-colors">
                   {sdk.version}

package/src/components/layout/sidebar-03/app-sidebar.tsx

@@ -37,7 +37,6 @@ import { ThemeToggle } from "@/components/shared/theme-toggle";
 import { AnimatedThemeToggler } from '@/components/magicui/animated-theme-toggler'
 import { Badge } from "@/components/ui/badge"
 import { workspaceRoutes } from "@/config/sidebar-routes";
-import { notifications } from "@/config/sidebar-notifications";
 import type { Route } from "@/config/sidebar-routes";
 import { SidebarSearchTrigger } from "@/components/layout/sidebar-03/nav-search-trigger"
 import { NavSecondary } from "@/components/layout/sidebar-03/nav-secondary"
@@ -65,7 +64,7 @@ export function DashboardSidebar() {
               animate={{ opacity: 1 }}
               transition={{ duration: 0.8 }}
             >
-              <NotificationsPopover notifications={notifications} />
+              <NotificationsPopover />
               <SidebarTrigger />
             </m.div>
           </div>
@@ -86,7 +85,7 @@ export function DashboardSidebar() {
               animate={{ opacity: 1 }}
               transition={{ duration: 0.8 }}
             >
-              <NotificationsPopover notifications={notifications} />
+              <NotificationsPopover />
               <AnimatedThemeToggler />
 
               <SidebarTrigger />

package/src/components/layout/sidebar-03/nav-notifications.tsx

@@ -16,8 +16,12 @@
 // along with this program. If not, see <https://www.gnu.org/licenses/>.
 
 
-import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
-import { Button } from "@/components/ui/button";
+import { useNavigate } from '@tanstack/react-router'
+import { useQuery, useQueryClient } from '@tanstack/react-query'
+import { useTranslation } from 'react-i18next'
+import { BellIcon, CheckCheck } from 'lucide-react'
+import { Avatar, AvatarFallback } from '@/components/ui/avatar'
+import { Button } from '@/components/ui/button'
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -25,54 +29,130 @@ import {
   DropdownMenuLabel,
   DropdownMenuSeparator,
   DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu";
-import { BellIcon } from "lucide-react";
+} from '@/components/ui/dropdown-menu'
+import {
+  listNotificationsFn,
+  markAllNotificationsReadFn,
+  markNotificationReadFn,
+} from '@/server/serverFns/notifications'
+import { NOTIFICATION_LIST_KEY, NOTIFICATION_UNREAD_KEY, useNotifications } from '@/hooks/use-notifications'
+import { CATEGORY_ICONS } from '@/components/notifications/notification-list'
+
+export function NotificationsPopover() {
+  const { t } = useTranslation('notifications')
+  const navigate = useNavigate()
+  const queryClient = useQueryClient()
+  const { unreadCount, setUnreadCount } = useNotifications()
+
+  const { data } = useQuery({
+    queryKey: NOTIFICATION_LIST_KEY,
+    queryFn: () => listNotificationsFn({ data: {} }),
+  })
 
-type Notification = {
-  id: string;
-  avatar: string;
-  fallback: string;
-  text: string;
-  time: string;
-};
+  const recent = (data?.items ?? []).slice(0, 5)
+
+  const handleClickItem = async (
+    id: string,
+    link: string | null,
+    isUnread: boolean,
+  ) => {
+    if (isUnread) {
+      await markNotificationReadFn({ data: { id } })
+      setUnreadCount((c) => Math.max(0, c - 1))
+      queryClient.invalidateQueries({ queryKey: NOTIFICATION_LIST_KEY })
+      queryClient.invalidateQueries({ queryKey: NOTIFICATION_UNREAD_KEY })
+    }
+    if (link) {
+      navigate({ to: link as never })
+    }
+  }
+
+  const handleMarkAll = async () => {
+    await markAllNotificationsReadFn({ data: {} })
+    setUnreadCount(0)
+    queryClient.invalidateQueries({ queryKey: NOTIFICATION_LIST_KEY })
+    queryClient.invalidateQueries({ queryKey: NOTIFICATION_UNREAD_KEY })
+  }
 
-export function NotificationsPopover({
-  notifications,
-}: {
-  notifications: Notification[];
-}) {
   return (
     <DropdownMenu>
       <DropdownMenuTrigger asChild>
         <Button
           variant="ghost"
           size="icon"
-          className="rounded-full"
-          aria-label="Open notifications"
+          className="relative rounded-full"
+          aria-label={t('bell.label')}
         >
           <BellIcon className="size-5" />
+          {unreadCount > 0 && (
+            <span className="absolute -right-0.5 -top-0.5 flex h-4 min-w-4 items-center justify-center rounded-full bg-destructive px-1 text-[10px] font-medium text-destructive-foreground">
+              {unreadCount > 99 ? '99+' : unreadCount}
+            </span>
+          )}
         </Button>
       </DropdownMenuTrigger>
       <DropdownMenuContent side="right" className="w-80 my-6">
-        <DropdownMenuLabel>Notifications</DropdownMenuLabel>
+        <div className="flex items-center justify-between px-2 py-1.5">
+          <DropdownMenuLabel className="p-0">{t('bell.recentTitle')}</DropdownMenuLabel>
+          {unreadCount > 0 && (
+            <Button
+              variant="ghost"
+              size="sm"
+              className="h-7 gap-1 px-2 text-xs"
+              onClick={handleMarkAll}
+            >
+              <CheckCheck className="size-3.5" />
+              {t('actions.markAllRead')}
+            </Button>
+          )}
+        </div>
         <DropdownMenuSeparator />
-        {notifications.map(({ id, avatar, fallback, text, time }) => (
-          <DropdownMenuItem key={id} className="flex items-start gap-3">
-            <Avatar className="size-8">
-              <AvatarImage src={avatar} alt="Avatar" />
-              <AvatarFallback>{fallback}</AvatarFallback>
-            </Avatar>
-            <div className="flex flex-col">
-              <span className="text-sm font-medium">{text}</span>
-              <span className="text-xs text-muted-foreground">{time}</span>
-            </div>
-          </DropdownMenuItem>
-        ))}
+        {recent.length === 0 && (
+          <div className="px-2 py-6 text-center text-sm text-muted-foreground">
+            {t('empty')}
+          </div>
+        )}
+        {recent.map((item) => {
+          const Icon = CATEGORY_ICONS[item.category]
+          const isUnread = !item.readAt
+          return (
+            <DropdownMenuItem
+              key={item.id}
+              className="flex items-start gap-3"
+              onClick={() => handleClickItem(item.id, item.link, isUnread)}
+            >
+              <Avatar className="size-8">
+                <AvatarFallback className="bg-primary/10 text-primary">
+                  <Icon className="size-4" />
+                </AvatarFallback>
+              </Avatar>
+              <div className="flex min-w-0 flex-col">
+                <span
+                  className={
+                    isUnread
+                      ? 'text-sm font-medium'
+                      : 'text-sm font-medium opacity-60'
+                  }
+                >
+                  {item.title}
+                </span>
+                {item.body && (
+                  <span className="line-clamp-1 text-xs text-muted-foreground">
+                    {item.body}
+                  </span>
+                )}
+              </div>
+            </DropdownMenuItem>
+          )
+        })}
         <DropdownMenuSeparator />
-        <DropdownMenuItem className="justify-center text-sm text-muted-foreground hover:text-primary">
-          View all notifications
+        <DropdownMenuItem
+          className="justify-center text-sm text-muted-foreground hover:text-primary"
+          onClick={() => navigate({ to: '/notifications' })}
+        >
+          {t('actions.viewAll')}
         </DropdownMenuItem>
       </DropdownMenuContent>
     </DropdownMenu>
-  );
-}
+  )
+}

package/src/components/layout/sidebar-03/user-menu.tsx

@@ -77,7 +77,7 @@ export function UserMenu() {
 
   const handleSignOut = async () => {
     if (isLocalGuest) {
-      await logoutRemoteFn();
+      await logoutRemoteFn({ data: {} });
       toast.success(t('sidebar.userMenu.logoutToGuest'));
       queryClient.resetQueries({ queryKey: ['session'] });
       queryClient.resetQueries({ queryKey: ['effective-plan'] });

package/src/components/notifications/notification-list.tsx

@@ -0,0 +1,232 @@
+// SPDX-License-Identifier: AGPL-3.0-or-later
+import { useCallback, useState } from 'react'
+import { useInfiniteQuery, useQueryClient } from '@tanstack/react-query'
+import { useNavigate } from '@tanstack/react-router'
+import { useTranslation } from 'react-i18next'
+import { format } from 'date-fns'
+import { zhCN } from 'date-fns/locale'
+import { Bell, CreditCard, MessageSquare, Megaphone, ShieldCheck, Trash2, Users } from 'lucide-react'
+import type { LucideIcon } from 'lucide-react'
+import { Avatar, AvatarFallback } from '@/components/ui/avatar'
+import { Button } from '@/components/ui/button'
+import { Skeleton } from '@/components/ui/skeleton'
+import { cn } from '@/lib/utils'
+import type { NotificationCategory } from '@allbluecn/shared'
+import {
+  deleteNotificationFn,
+  listNotificationsFn,
+  markAllNotificationsReadFn,
+  markNotificationReadFn,
+} from '@/server/serverFns/notifications'
+import {
+  NOTIFICATION_LIST_KEY,
+  NOTIFICATION_UNREAD_KEY,
+} from '@/hooks/use-notifications'
+
+export const CATEGORY_ICONS: Record<NotificationCategory, LucideIcon> & { all: LucideIcon } = {
+  all: Bell,
+  team: Users,
+  collaboration: MessageSquare,
+  system: Megaphone,
+  billing: CreditCard,
+  security: ShieldCheck,
+}
+
+const TABS: { key: 'all' | NotificationCategory; labelKey: string }[] = [
+  { key: 'all', labelKey: 'tabs.all' },
+  { key: 'team', labelKey: 'tabs.team' },
+  { key: 'collaboration', labelKey: 'tabs.collaboration' },
+  { key: 'system', labelKey: 'tabs.system' },
+  { key: 'billing', labelKey: 'tabs.billing' },
+  { key: 'security', labelKey: 'tabs.security' },
+]
+
+export interface NotificationListProps {
+  category?: NotificationCategory
+}
+
+export function NotificationList({ category }: NotificationListProps) {
+  const { t } = useTranslation('notifications')
+  const navigate = useNavigate()
+  const queryClient = useQueryClient()
+  const [activeTab, setActiveTab] = useState<'all' | NotificationCategory>(category ?? 'all')
+
+  const { data, isLoading, fetchNextPage, isFetchingNextPage, hasNextPage } = useInfiniteQuery({
+    queryKey: [...NOTIFICATION_LIST_KEY, activeTab === 'all' ? undefined : activeTab],
+    queryFn: async ({ pageParam }) => {
+      const base = activeTab === 'all' ? {} : { category: activeTab }
+      return listNotificationsFn({
+        data: pageParam ? { ...base, cursor: pageParam } : base,
+      })
+    },
+    initialPageParam: undefined as string | undefined,
+    getNextPageParam: (lastPage) =>
+      lastPage.hasMore ? lastPage.items[lastPage.items.length - 1].id : undefined,
+  })
+
+  const handleMarkRead = useCallback(
+    async (id: string) => {
+      await markNotificationReadFn({ data: { id } })
+      queryClient.invalidateQueries({ queryKey: NOTIFICATION_LIST_KEY })
+      queryClient.invalidateQueries({ queryKey: NOTIFICATION_UNREAD_KEY })
+    },
+    [queryClient]
+  )
+
+  const handleDelete = useCallback(
+    async (id: string, e: React.MouseEvent) => {
+      e.stopPropagation()
+      await deleteNotificationFn({ data: { id } })
+      queryClient.invalidateQueries({ queryKey: NOTIFICATION_LIST_KEY })
+      queryClient.invalidateQueries({ queryKey: NOTIFICATION_UNREAD_KEY })
+    },
+    [queryClient]
+  )
+
+  const handleMarkAll = useCallback(async () => {
+    await markAllNotificationsReadFn({ data: {} })
+    queryClient.invalidateQueries({ queryKey: NOTIFICATION_LIST_KEY })
+    queryClient.invalidateQueries({ queryKey: NOTIFICATION_UNREAD_KEY })
+  }, [queryClient])
+
+  const handleClickItem = useCallback(
+    (item: { id: string; link: string | null; readAt: string | null }) => {
+      if (!item.readAt) {
+        void handleMarkRead(item.id)
+      }
+      if (item.link) {
+        navigate({ to: item.link as never })
+      }
+    },
+    [handleMarkRead, navigate]
+  )
+
+  const formatRelativeTime = (createdAt: string) => {
+    const date = new Date(createdAt)
+    const now = new Date()
+    const diffMs = now.getTime() - date.getTime()
+    const diffMin = Math.floor(diffMs / 60000)
+    const diffHour = Math.floor(diffMs / 3600000)
+    const diffDay = Math.floor(diffMs / 86400000)
+
+    if (diffMin < 1) return t('relativeTime.justNow')
+    if (diffMin < 60) return t('relativeTime.minutesAgo', { count: diffMin })
+    if (diffHour < 24) return t('relativeTime.hoursAgo', { count: diffHour })
+    if (diffDay < 30) return t('relativeTime.daysAgo', { count: diffDay })
+    return format(date, 'MM/dd/yyyy HH:mm', { locale: zhCN })
+  }
+
+  if (isLoading) {
+    return (
+      <div className="flex flex-col gap-3">
+        {Array.from({ length: 5 }).map((_, i) => (
+          <div key={i} className="flex items-center gap-3 rounded-lg border p-3">
+            <Skeleton className="size-9 shrink-0 rounded-full" />
+            <div className="flex-1 space-y-2">
+              <Skeleton className="h-4 w-3/4" />
+              <Skeleton className="h-3 w-1/2" />
+            </div>
+          </div>
+        ))}
+      </div>
+    )
+  }
+
+  const items = data?.pages.flatMap((page) => page.items) ?? []
+  const hasMore = hasNextPage ?? false
+
+  return (
+    <div className="flex flex-col gap-4">
+      <div className="flex items-center justify-between">
+        <div className="flex gap-1">
+          {TABS.map((tab) => {
+            const Icon = CATEGORY_ICONS[tab.key]
+            return (
+              <Button
+                key={tab.key}
+                variant={activeTab === tab.key ? 'secondary' : 'ghost'}
+                size="sm"
+                className="gap-1.5"
+                onClick={() => setActiveTab(tab.key)}
+              >
+                <Icon className="size-4" />
+                {t(tab.labelKey)}
+              </Button>
+            )
+          })}
+        </div>
+        {items.some((item) => !item.readAt) && (
+          <Button variant="ghost" size="sm" onClick={handleMarkAll}>
+            {t('actions.markAllRead')}
+          </Button>
+        )}
+      </div>
+
+      {items.length === 0 ? (
+        <div className="flex flex-col items-center justify-center py-12 text-center">
+          <Bell className="size-12 text-muted-foreground/40" />
+          <p className="mt-2 text-sm text-muted-foreground">
+            {activeTab === 'all' ? t('empty') : t('emptyFiltered')}
+          </p>
+        </div>
+      ) : (
+        <div className="flex flex-col gap-1">
+          {items.map((item) => {
+            const Icon = CATEGORY_ICONS[item.category]
+            const isUnread = !item.readAt
+            return (
+              <div
+                key={item.id}
+                className={cn(
+                  'group flex items-start gap-3 rounded-lg border p-3 transition-colors',
+                  isUnread ? 'bg-muted/30' : 'opacity-70',
+                  'hover:bg-muted/50 cursor-pointer'
+                )}
+                onClick={() => handleClickItem(item)}
+              >
+                <Avatar className="size-9 shrink-0">
+                  <AvatarFallback className="bg-primary/10 text-primary">
+                    <Icon className="size-4" />
+                  </AvatarFallback>
+                </Avatar>
+                <div className="flex min-w-0 flex-1 flex-col gap-0.5">
+                  <div className="flex items-center gap-2">
+                    {isUnread && <span className="size-2 shrink-0 rounded-full bg-primary" />}
+                    <span className={cn('text-sm font-medium', isUnread ? '' : 'text-muted-foreground')}>
+                      {item.title}
+                    </span>
+                    <span className="ml-auto shrink-0 text-xs text-muted-foreground">
+                      {formatRelativeTime(item.createdAt)}
+                    </span>
+                  </div>
+                  {item.body && (
+                    <span className="line-clamp-2 text-xs text-muted-foreground">{item.body}</span>
+                  )}
+                </div>
+                <Button
+                  variant="ghost"
+                  size="icon"
+                  className="size-7 shrink-0 opacity-0 group-hover:opacity-100"
+                  onClick={(e) => handleDelete(item.id, e)}
+                >
+                  <Trash2 className="size-3.5" />
+                </Button>
+              </div>
+            )
+          })}
+          {hasMore && (
+            <Button
+              variant="ghost"
+              size="sm"
+              className="mt-1 mx-auto"
+              onClick={() => void fetchNextPage()}
+              disabled={isFetchingNextPage}
+            >
+              {t('actions.loadMore')}
+            </Button>
+          )}
+        </div>
+      )}
+    </div>
+  )
+}

package/src/components/notifications/notification-preferences.tsx

@@ -0,0 +1,156 @@
+// SPDX-License-Identifier: AGPL-3.0-or-later
+import { useEffect, useState } from 'react'
+import { useQuery, useQueryClient } from '@tanstack/react-query'
+import { useTranslation } from 'react-i18next'
+import { toast } from 'sonner'
+import { useNotifications } from '@/hooks/use-notifications'
+import { getNotificationPreferencesFn, updateNotificationPreferencesFn } from '@/server/serverFns/notifications'
+import type { CategoryPreferences, NotificationCategory, NotificationPreferences } from '@allbluecn/shared'
+
+const CATEGORY_META: { key: NotificationCategory; labelKey: string; descKey: string }[] = [
+  { key: 'team', labelKey: 'preferences.categories.team', descKey: 'preferences.categories.teamDesc' },
+  { key: 'collaboration', labelKey: 'preferences.categories.collaboration', descKey: 'preferences.categories.collaborationDesc' },
+  { key: 'system', labelKey: 'preferences.categories.system', descKey: 'preferences.categories.systemDesc' },
+  { key: 'billing', labelKey: 'preferences.categories.billing', descKey: 'preferences.categories.billingDesc' },
+  { key: 'security', labelKey: 'preferences.categories.security', descKey: 'preferences.categories.securityDesc' },
+]
+
+export function NotificationPreferences() {
+  const { t } = useTranslation('notifications')
+  const queryClient = useQueryClient()
+  const { setUnreadCount } = useNotifications()
+
+  const { data: prefsData, isLoading } = useQuery({
+    queryKey: ['notifications', 'preferences'],
+    queryFn: () => getNotificationPreferencesFn({ data: {} }),
+  })
+
+  const [categories, setCategories] = useState<CategoryPreferences | null>(null)
+  const [dndEnabled, setDndEnabled] = useState(false)
+  const [dndStart, setDndStart] = useState('22:00')
+  const [dndEnd, setDndEnd] = useState('08:00')
+
+  useEffect(() => {
+    if (prefsData) {
+      setCategories(prefsData.categories)
+      setDndEnabled(prefsData.dndEnabled)
+      setDndStart(prefsData.dndStart)
+      setDndEnd(prefsData.dndEnd)
+    }
+  }, [prefsData])
+
+  const save = async () => {
+    if (!categories) return
+    await updateNotificationPreferencesFn({
+      data: {
+        categories,
+        dndEnabled,
+        dndStart,
+        dndEnd,
+      },
+    })
+    queryClient.invalidateQueries({ queryKey: ['notifications', 'preferences'] })
+    toast.success(t('preferences.saved'))
+  }
+
+  const toggleCategory = (key: NotificationCategory) => {
+    setCategories((prev) => (prev ? { ...prev, [key]: !prev[key] } : prev))
+  }
+
+  if (isLoading) {
+    return <div className="space-y-4">{Array.from({ length: 4 }).map((_, i) => <div key={i} className="h-16 rounded-lg border bg-muted/30" />)}</div>
+  }
+
+  return (
+    <div className="space-y-6">
+      <div className="space-y-3">
+        {CATEGORY_META.map((meta) => (
+          <div key={meta.key} className="flex items-center justify-between rounded-lg border p-4">
+            <div className="flex flex-col gap-0.5">
+              <span className="text-sm font-medium">{t(meta.labelKey)}</span>
+              <span className="text-xs text-muted-foreground">{t(meta.descKey)}</span>
+            </div>
+            <button
+              type="button"
+              role="switch"
+              aria-checked={categories?.[meta.key] ?? false}
+              className={
+                'relative inline-flex h-6 w-11 shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors ' +
+                ((categories?.[meta.key] ?? false) ? 'bg-primary' : 'bg-input')
+              }
+              onClick={() => toggleCategory(meta.key)}
+            >
+              <span
+                className={
+                  'pointer-events-none block size-4 translate-x-0.5 rounded-full bg-background shadow ring-0 transition-transform ' +
+                  ((categories?.[meta.key] ?? false) ? 'translate-x-5' : '')
+                }
+              />
+            </button>
+          </div>
+        ))}
+      </div>
+
+      <div className="rounded-lg border p-4 space-y-4">
+        <div className="flex flex-col gap-0.5">
+          <span className="text-sm font-medium">{t('preferences.dnd.title')}</span>
+          <span className="text-xs text-muted-foreground">{t('preferences.dnd.desc')}</span>
+        </div>
+
+        <div className="flex items-center justify-between">
+          <span className="text-sm">{t('preferences.dnd.enabled')}</span>
+          <button
+            type="button"
+            role="switch"
+            aria-checked={dndEnabled}
+            className={
+              'relative inline-flex h-6 w-11 shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors ' +
+              (dndEnabled ? 'bg-primary' : 'bg-input')
+            }
+            onClick={() => setDndEnabled(!dndEnabled)}
+          >
+            <span
+              className={
+                'pointer-events-none block size-4 translate-x-0.5 rounded-full bg-background shadow ring-0 transition-transform ' +
+                (dndEnabled ? 'translate-x-5' : '')
+              }
+            />
+          </button>
+        </div>
+
+        {dndEnabled && (
+          <div className="flex gap-4">
+            <div className="flex-1 space-y-1">
+              <label className="text-xs text-muted-foreground">{t('preferences.dnd.start')}</label>
+              <input
+                type="time"
+                value={dndStart}
+                onChange={(e) => setDndStart(e.target.value)}
+                className="w-full rounded-md border border-input bg-background px-3 py-1.5 text-sm"
+              />
+            </div>
+            <div className="flex-1 space-y-1">
+              <label className="text-xs text-muted-foreground">{t('preferences.dnd.end')}</label>
+              <input
+                type="time"
+                value={dndEnd}
+                onChange={(e) => setDndEnd(e.target.value)}
+                className="w-full rounded-md border border-input bg-background px-3 py-1.5 text-sm"
+              />
+            </div>
+          </div>
+        )}
+      </div>
+
+      <div className="flex justify-end">
+        <button
+          type="button"
+          onClick={save}
+          className="inline-flex items-center justify-center rounded-md text-sm font-medium h-9 px-4 py-2 bg-primary text-primary-foreground hover:bg-primary/90"
+        >
+          {t('actions.save', { defaultValue: '保存' })}
+        </button>
+      </div>
+    </div>
+  )
+}