@allbluecn/web-app 0.4.22 → 0.5.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@allbluecn/web-app",
-  "version": "0.4.22",
+  "version": "0.5.0",
   "license": "AGPL-3.0-or-later",
   "type": "module",
   "files": [
@@ -127,14 +127,14 @@
     "three": "^0.180.0",
     "tw-animate-css": "^1.4.0",
     "zod": "^4.4.3",
-    "@allbluecn/database": "0.4.14",
+    "@allbluecn/database": "0.4.15",
     "@allbluecn/kernel": "0.3.1",
-    "@allbluecn/shared": "0.4.15",
-    "@allbluecn/ai-gateway": "0.4.15",
-    "@allbluecn/tiptap": "0.4.15",
-    "@allbluecn/ui": "0.4.15",
-    "@allbluecn/plugins-core": "0.4.14",
-    "@allbluecn/prototype": "0.1.1"
+    "@allbluecn/plugins-core": "0.4.15",
+    "@allbluecn/prototype": "0.1.1",
+    "@allbluecn/ai-gateway": "0.4.16",
+    "@allbluecn/shared": "0.4.16",
+    "@allbluecn/tiptap": "0.4.16",
+    "@allbluecn/ui": "0.4.16"
   },
   "devDependencies": {
     "@babel/parser": "^8.0.4",

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

@@ -27,7 +27,7 @@ import {
 import { cn } from "@/lib/utils";
 import { m } from "motion/react";
 import DashboardNavigation from "@/components/layout/sidebar-03/nav-main";
-import { NotificationsPopover } from "@/components/layout/sidebar-03/nav-notifications";
+import { NotificationsBell } from "@/components/layout/sidebar-03/nav-notifications";
 import { NavAnyHub } from "@/components/layout/sidebar-03/nav-anyhub";
 import { NavKnowledge } from "@/components/layout/sidebar-03/nav-knowledge";
 import { NavWorkspace } from "@/components/layout/sidebar-03/nav-workspace";
@@ -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} />
+              <NotificationsBell />
               <SidebarTrigger />
             </m.div>
           </div>
@@ -86,7 +85,7 @@ export function DashboardSidebar() {
               animate={{ opacity: 1 }}
               transition={{ duration: 0.8 }}
             >
-              <NotificationsPopover notifications={notifications} />
+              <NotificationsBell />
               <AnimatedThemeToggler />
 
               <SidebarTrigger />

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

@@ -15,64 +15,147 @@
 // 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/>.
 
-
-import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
-import { Button } from "@/components/ui/button";
+import { useQuery, useQueryClient } from '@tanstack/react-query'
+import { Link, useNavigate } from '@tanstack/react-router'
+import { useTranslation } from 'react-i18next'
+import { Bell, CheckCheck } from 'lucide-react'
+import { Button } from '@/components/ui/button'
+import {
+  Empty,
+  EmptyHeader,
+  EmptyMedia,
+  EmptyTitle,
+} from '@/components/ui/empty'
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from '@/components/ui/popover'
+import { Separator } from '@/components/ui/separator'
+import { cn } from '@/lib/utils'
+import { CATEGORY_ICONS, formatRelativeTime } from '@/components/notifications/team-notifications'
 import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuLabel,
-  DropdownMenuSeparator,
-  DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu";
-import { BellIcon } from "lucide-react";
+  useNotifications,
+  NOTIFICATION_POPOVER_KEY,
+  NOTIFICATION_ROOT_KEY,
+} from '@/hooks/use-notifications'
+import { listNotificationsFn, markAllNotificationsReadFn, markNotificationReadFn } from '@/server/serverFns/notifications'
+import type { NotificationItem } from '@allbluecn/shared'
+
+const POPOVER_ITEM_LIMIT = 8
+
+export function NotificationsBell() {
+  const { t } = useTranslation('notifications')
+  const navigate = useNavigate()
+  const queryClient = useQueryClient()
+  const { unreadCount } = useNotifications()
 
-type Notification = {
-  id: string;
-  avatar: string;
-  fallback: string;
-  text: string;
-  time: string;
-};
+  // ⚠ 与详情页 useInfiniteQuery 的分页缓存形态不同，必须使用独立 queryKey
+  const { data } = useQuery({
+    queryKey: NOTIFICATION_POPOVER_KEY,
+    queryFn: () => listNotificationsFn({ data: {} }),
+  })
+  const items = (data?.items ?? []).slice(0, POPOVER_ITEM_LIMIT)
+
+  const invalidateNotificationData = () => {
+    queryClient.invalidateQueries({ queryKey: NOTIFICATION_ROOT_KEY })
+  }
+
+  const handleOpenItem = (item: NotificationItem) => {
+    if (!item.readAt) {
+      void markNotificationReadFn({ data: { id: item.id } }).then(invalidateNotificationData)
+    }
+    if (item.link) navigate({ to: item.link as never })
+  }
+
+  const handleMarkAllRead = async () => {
+    await markAllNotificationsReadFn({ data: {} })
+    invalidateNotificationData()
+  }
 
-export function NotificationsPopover({
-  notifications,
-}: {
-  notifications: Notification[];
-}) {
   return (
-    <DropdownMenu>
-      <DropdownMenuTrigger asChild>
+    <Popover>
+      <PopoverTrigger asChild>
         <Button
-          variant="ghost"
+          aria-label={t('bell.label')}
+          className="relative rounded-full"
           size="icon"
-          className="rounded-full"
-          aria-label="Open notifications"
+          variant="ghost"
         >
-          <BellIcon className="size-5" />
+          <Bell className="size-5" />
+          {unreadCount > 0 && (
+            <span className="absolute -top-0.5 -right-0.5 flex size-4 items-center justify-center rounded-full bg-destructive text-[10px] font-medium text-destructive-foreground">
+              {unreadCount > 9 ? '9+' : unreadCount}
+            </span>
+          )}
         </Button>
-      </DropdownMenuTrigger>
-      <DropdownMenuContent side="right" className="w-80 my-6">
-        <DropdownMenuLabel>Notifications</DropdownMenuLabel>
-        <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>
-        ))}
-        <DropdownMenuSeparator />
-        <DropdownMenuItem className="justify-center text-sm text-muted-foreground hover:text-primary">
-          View all notifications
-        </DropdownMenuItem>
-      </DropdownMenuContent>
-    </DropdownMenu>
-  );
+      </PopoverTrigger>
+      <PopoverContent align="start" className="w-80 p-0">
+        <div className="flex h-6 mt-3 items-center justify-between px-4">
+          <span className="flex h-full items-center text-sm font-semibold">{t('bell.recentTitle')}</span>
+          {unreadCount > 0 && (
+            <Button onClick={handleMarkAllRead} size="sm" type="button" variant="ghost">
+              <CheckCheck className="size-4" />
+              {t('actions.markAllRead')}
+            </Button>
+          )}
+        </div>
+        {/* <Separator /> */}
+        {items.length === 0 ? (
+          <Empty>
+            <EmptyHeader>
+              <EmptyMedia variant="icon">
+                <Bell className="size-6" />
+              </EmptyMedia>
+              <EmptyTitle>{t('empty')}</EmptyTitle>
+            </EmptyHeader>
+          </Empty>
+        ) : (
+          <div className="max-h-96 overflow-y-auto border-t">
+            {items.map((item) => {
+              const Icon = CATEGORY_ICONS[item.category]
+              const isUnread = !item.readAt
+              return (
+                <div
+                  key={item.id}
+                  className={cn(
+                    'flex cursor-pointer items-start gap-3 px-4 py-3 transition-colors hover:bg-muted/50',
+                    isUnread && 'bg-primary/5'
+                  )}
+                  onClick={() => handleOpenItem(item)}
+                >
+                  <div
+                    className={cn(
+                      'flex size-8 shrink-0 items-center justify-center rounded-full',
+                      isUnread ? 'bg-primary/10 text-primary' : 'bg-muted text-muted-foreground'
+                    )}
+                  >
+                    <Icon className="size-4" />
+                  </div>
+                  <div className="flex min-w-0 flex-1 flex-col gap-0.5">
+                    <span className={cn('truncate text-sm', isUnread ? 'font-medium' : 'text-muted-foreground')}>
+                      {item.title}
+                    </span>
+                    <span className="text-muted-foreground text-xs">
+                      {formatRelativeTime(item.createdAt, t)}
+                    </span>
+                  </div>
+                  {isUnread && <span className="mt-1.5 size-2 shrink-0 rounded-full bg-primary" />}
+                </div>
+              )
+            })}
+          </div>
+        )}
+        {/* <Separator /> */}
+        <div className="p-1 border-t">
+          <Link
+            className="flex h-10 w-full items-center justify-center rounded-md text-sm text-muted-foreground transition-colors hover:bg-muted/50 hover:text-primary"
+            to="/notifications"
+          >
+            {t('actions.viewAll')}
+          </Link>
+        </div>
+      </PopoverContent>
+    </Popover>
+  )
 }

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

@@ -46,7 +46,7 @@ import {
 import { signOut, useSession } from "@/lib/auth/auth-client";
 import { useRouter, useMatches } from "@tanstack/react-router";
 import { useTranslation } from "react-i18next";
-import { useQueryClient } from "@tanstack/react-query";
+import { getQueryClient } from "@allbluecn/shared/lib/query-client-seam";
 import { UserAvatar } from "@allbluecn/ui";
 import type { AvatarConfig, ShapeType } from "@allbluecn/shared";
 import { SparklesText } from "@/components/magicui/sparkles-text";
@@ -55,7 +55,9 @@ export function UserMenu() {
   const { t } = useTranslation('common');
   const { isMobile } = useSidebar();
   const { data: clientSession } = useSession();
-  const queryClient = useQueryClient();
+  // seam 单例替代 React Context 读取：SSR 下 npm 包内 react-query 可能与宿主
+  // 解析到不同物理实例，Context 分裂会抛 "No QueryClient set"
+  const queryClient = getQueryClient();
   const router = useRouter();
   const matches = useMatches();
 

package/src/components/notifications/settings-notifications.tsx

@@ -0,0 +1,198 @@
+// SPDX-License-Identifier: AGPL-3.0-or-later
+// Adapted from @hextaui/settings-notifications (https://www.hextaui.com)
+import { useEffect, useState } from 'react'
+import { useQuery, useQueryClient } from '@tanstack/react-query'
+import { useTranslation } from 'react-i18next'
+import { toast } from 'sonner'
+import { Bell } from 'lucide-react'
+import { Field, FieldContent, FieldDescription, FieldLabel } from '@/components/ui/field'
+import { InputGroup, InputGroupInput } from '@/components/ui/input-group'
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select'
+import { Separator } from '@/components/ui/separator'
+import { Switch } from '@/components/ui/switch'
+import { useDebouncedCallback } from '@/lib/pacer'
+import { getNotificationPreferencesFn, updateNotificationPreferencesFn } from '@/server/serverFns/notifications'
+import type {
+  CategoryFrequencies,
+  NotificationCategory,
+  NotificationFrequency,
+  NotificationPreferences,
+} from '@allbluecn/shared'
+import { NOTIFICATION_FREQUENCIES } from '@allbluecn/shared'
+
+const FREQUENCY_OPTIONS = NOTIFICATION_FREQUENCIES as readonly NotificationFrequency[]
+
+const FREQUENCY_LABEL_KEYS: Record<NotificationFrequency, string> = {
+  realtime: 'preferences.frequency.realtime',
+  'digest-daily': 'preferences.frequency.daily',
+  'digest-weekly': 'preferences.frequency.weekly',
+  off: 'preferences.frequency.off',
+}
+
+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' },
+]
+
+const PREFERENCES_SAVE_DEBOUNCE_MS = 500
+
+export function SettingsNotifications() {
+  const { t } = useTranslation('notifications')
+  const queryClient = useQueryClient()
+
+  const { data: prefsData, isLoading } = useQuery({
+    queryKey: ['notifications', 'preferences'],
+    queryFn: () => getNotificationPreferencesFn({ data: {} }),
+  })
+
+  const [prefs, setPrefs] = useState<NotificationPreferences | null>(null)
+
+  useEffect(() => {
+    if (prefsData) setPrefs(prefsData)
+  }, [prefsData])
+
+  const debouncedSave = useDebouncedCallback(async (next: NotificationPreferences) => {
+    try {
+      await updateNotificationPreferencesFn({ data: next })
+      queryClient.setQueryData(['notifications', 'preferences'], next)
+    } catch {
+      toast.error(t('preferences.saveFailed'))
+      queryClient.invalidateQueries({ queryKey: ['notifications', 'preferences'] })
+    }
+  }, { wait: PREFERENCES_SAVE_DEBOUNCE_MS })
+
+  const patch = (partial: Partial<NotificationPreferences>) => {
+    if (!prefs) return
+    const next = { ...prefs, ...partial }
+    setPrefs(next)
+    debouncedSave(next)
+  }
+
+  const setCategoryFrequency = (key: NotificationCategory, frequency: NotificationFrequency) => {
+    if (!prefs) return
+    patch({ categories: { ...prefs.categories, [key]: frequency } as CategoryFrequencies })
+  }
+
+  if (isLoading || !prefs) {
+    return (
+      <div className="flex flex-col gap-4">
+        {Array.from({ length: 4 }).map((_, i) => (
+          <div key={i} className="h-16 rounded-lg border bg-muted/30" />
+        ))}
+      </div>
+    )
+  }
+
+  return (
+    <div className="flex flex-col gap-6">
+          <div className="flex flex-col gap-4">
+            {CATEGORY_META.map((meta) => {
+              const frequency = prefs.categories[meta.key]
+              return (
+                <div className="flex flex-col gap-4 rounded-lg border p-4" key={meta.key}>
+                  <div className="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
+                    <div className="flex min-w-0 flex-1 flex-col gap-2">
+                      <h4 className="font-medium text-sm">{t(meta.labelKey)}</h4>
+                      <p className="text-muted-foreground text-xs">{t(meta.descKey)}</p>
+                    </div>
+                    <Select
+                      onValueChange={(value) => setCategoryFrequency(meta.key, value as NotificationFrequency)}
+                      value={frequency}
+                    >
+                      <SelectTrigger className="w-full shrink-0 sm:w-[140px]">
+                        <SelectValue />
+                      </SelectTrigger>
+                      <SelectContent>
+                        {FREQUENCY_OPTIONS.map((option) => (
+                          <SelectItem key={option} value={option}>
+                            {t(FREQUENCY_LABEL_KEYS[option])}
+                          </SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
+                  </div>
+
+                  <Separator />
+
+                  <Field>
+                    <div className="flex items-center justify-between">
+                      <div className="flex items-center gap-2">
+                        <Bell className="size-4 text-muted-foreground" />
+                        <FieldLabel htmlFor={`${meta.key}-enable`}>
+                          {t('preferences.enable')}
+                        </FieldLabel>
+                      </div>
+                      <Switch
+                        checked={frequency !== 'off'}
+                        id={`${meta.key}-enable`}
+                        onCheckedChange={(checked) => setCategoryFrequency(meta.key, checked ? 'realtime' : 'off')}
+                      />
+                    </div>
+                  </Field>
+                </div>
+              )
+            })}
+          </div>
+
+          <Separator />
+
+          <div className="flex flex-col gap-4">
+            <h3 className="font-semibold text-base">{t('preferences.dnd.title')}</h3>
+            <Field>
+              <div className="flex items-center justify-between">
+                <div className="flex flex-col gap-1">
+                  <FieldLabel htmlFor="dnd-enabled">{t('preferences.dnd.enabled')}</FieldLabel>
+                  <FieldDescription>{t('preferences.dnd.desc')}</FieldDescription>
+                </div>
+                <Switch
+                  checked={prefs.dndEnabled}
+                  id="dnd-enabled"
+                  onCheckedChange={(checked) => patch({ dndEnabled: checked })}
+                />
+              </div>
+            </Field>
+
+            {prefs.dndEnabled && (
+              <div className="flex flex-col gap-4 rounded-lg border bg-muted/30 p-4">
+                <Field>
+                  <FieldLabel htmlFor="dnd-start">{t('preferences.dnd.start')}</FieldLabel>
+                  <FieldContent>
+                    <InputGroup>
+                      <InputGroupInput
+                        id="dnd-start"
+                        onChange={(e) => patch({ dndStart: e.target.value })}
+                        type="time"
+                        value={prefs.dndStart}
+                      />
+                    </InputGroup>
+                  </FieldContent>
+                </Field>
+
+                <Field>
+                  <FieldLabel htmlFor="dnd-end">{t('preferences.dnd.end')}</FieldLabel>
+                  <FieldContent>
+                    <InputGroup>
+                      <InputGroupInput
+                        id="dnd-end"
+                        onChange={(e) => patch({ dndEnd: e.target.value })}
+                        type="time"
+                        value={prefs.dndEnd}
+                      />
+                    </InputGroup>
+                  </FieldContent>
+                </Field>
+              </div>
+            )}
+          </div>
+        </div>
+  )
+}