@allbluecn/web-app 0.9.4 → 0.10.0

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

@@ -15,7 +15,6 @@
 // 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 {
   Collapsible,
   CollapsibleContent,
@@ -35,7 +34,7 @@ import {
   Tooltip,
   TooltipContent,
   TooltipTrigger,
-} from "@/components/ui/tooltip"
+} from "@/components/ui/tooltip";
 import {
   BookOpenText,
   BookMarked,
@@ -64,17 +63,21 @@ import {
   BarChart3,
   MessageSquare,
   LibraryBig,
+  Pin,
+  PinOff,
 } from "lucide-react";
 import { Link, useLocation } from "@tanstack/react-router";
-import { useTranslation } from "react-i18next";
 import { cn } from "@/lib/utils";
 import { isParentActive } from "@/lib/sidebar-utils";
 import { useEffect, useState } from "react";
 import { useLiveQuery } from "@tanstack/react-db";
 import { knowledgeBasesCollection } from "@/lib/collections/knowledge/knowledge-bases-collection";
 import { KnowledgeFormDialog } from "@/components/knowledge/dialog/knowledge-form-dialog";
+import { useServerFn } from "@tanstack/react-start";
+import { toggleKnowledgePinFn } from "@/server/serverFns/knowledge";
 
 import { AnimatedGradientText } from "@/components/magicui/animated-gradient-text";
+import { m } from "@/paraglide/messages.js";
 
 const ICON_MAP: Record<string, React.ComponentType<{ className?: string }>> = {
   notebook: LibraryBig,
@@ -96,35 +99,43 @@ const ICON_MAP: Record<string, React.ComponentType<{ className?: string }>> = {
   messageSquare: MessageSquare,
 };
 
-const systemRoutes = [
+interface SystemRoute {
+  id: string;
+  title: () => string;
+  icon: React.ComponentType<{ className?: string }>;
+  link: string;
+  badge?: () => string;
+}
+
+const systemRoutes: SystemRoute[] = [
   {
     id: "knowledge-law",
-    title: "nav.law",
+    title: m.common_nav_law,
     icon: Scale,
     link: "/knowledge/laws",
   },
   {
     id: "knowledge-compliance",
-    title: "nav.compliance",
+    title: m.common_nav_compliance,
     icon: ShieldCheck,
     link: "/knowledge/compliance",
   },
   {
     id: "knowledge-dictionary",
-    title: "nav.dictionary",
+    title: m.common_nav_dictionary,
     icon: BookMarked,
     link: "/knowledge/dictionaries",
   },
   {
     id: "knowledge-bookmarks",
-    title: "nav.bookmarks",
+    title: m.common_nav_bookmarks,
     icon: Bookmark,
     link: "/knowledge/bookmarks",
   },
   {
     id: "knowledge-summary",
-    title: "nav.summary",
-    badge: "nav.summaryBadge",
+    title: m.common_nav_summary,
+    // badge: m.common_nav_summaryBadge,
     icon: BookCopy,
     link: "/knowledge/summary",
   },
@@ -134,8 +145,41 @@ interface KnowledgeItem {
   id: string;
   name: string;
   description: string | null;
-  badge?: string; 
   icon: string;
+  pinnedToSidebar: boolean;
+}
+
+function UnpinButton({ kb }: { kb: KnowledgeItem }) {
+  const togglePin = useServerFn(toggleKnowledgePinFn);
+  const [pinned, setPinned] = useState(kb.pinnedToSidebar);
+
+  const handleClick = async () => {
+    const newPinned = false;
+    setPinned(newPinned);
+    try {
+      await togglePin({ data: { kbId: kb.id, pinned: newPinned } });
+      (knowledgeBasesCollection as any).utils?.refetch?.();
+      window.dispatchEvent(new CustomEvent("knowledge-pinned", { detail: { kbId: kb.id, pinned: newPinned } }));
+    } catch {
+      setPinned(!newPinned);
+    }
+  };
+
+  return (
+    <button
+      type="button"
+      aria-label={m.sidebar_knowledge_unpin()}
+      className="absolute right-1 top-1/2 -translate-y-1/2 flex size-5 items-center justify-center rounded text-sidebar-foreground/70 opacity-0 transition-opacity group-hover/kb:opacity-100 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground"
+      onClick={handleClick}
+    >
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <PinOff className="size-3.5" />
+        </TooltipTrigger>
+        <TooltipContent>{m.sidebar_knowledge_unpin()}</TooltipContent>
+      </Tooltip>
+    </button>
+  );
 }
 
 function KnowledgeBaseLinks({ pathname }: { pathname: string }) {
@@ -143,23 +187,20 @@ function KnowledgeBaseLinks({ pathname }: { pathname: string }) {
     (q) => q.from({ kb: knowledgeBasesCollection })
   );
   const itemsList =
-    (items as unknown as Array<{
-      id: string;
-      name: string;
-      icon: string;
-      description?: string | null;
-      badge?: string;
-    }> | undefined) ?? [];
+    (items as unknown as Array<KnowledgeItem> | undefined) ?? [];
 
   if (itemsList.length === 0) return null;
 
+  const pinnedItems = itemsList.filter((item) => item.pinnedToSidebar);
+  if (pinnedItems.length === 0) return null;
+
   return (
     <SidebarMenu className="space-y-1">
-      {itemsList.map((item) => {
+      {pinnedItems.map((item) => {
         const Icon = ICON_MAP[item.icon] || NotebookPen;
         const itemActive = pathname.startsWith(`/knowledge/${item.id}`);
         return (
-          <SidebarMenuItem key={item.id}>
+          <SidebarMenuItem key={item.id} className="group/kb relative">
             <SidebarMenuButton
               asChild
               tooltip={item.name}
@@ -167,14 +208,15 @@ function KnowledgeBaseLinks({ pathname }: { pathname: string }) {
               className="flex w-full items-center rounded-lg px-2"
             >
               <Link
-                to="/knowledge/$kbId"
-                params={{ kbId: item.id }}
+                to={"/knowledge/$kbId" as any}
+                params={{ kbId: item.id } as any}
                 className="flex w-full items-center"
               >
                 <Icon className="size-4 mr-2 shrink-0" />
                 <span className="text-sm font-medium truncate">{item.name}</span>
               </Link>
             </SidebarMenuButton>
+            <UnpinButton kb={item} />
           </SidebarMenuItem>
         );
       })}
@@ -185,7 +227,6 @@ function KnowledgeBaseLinks({ pathname }: { pathname: string }) {
 export function NavKnowledge() {
   const { state } = useSidebar();
   const { pathname } = useLocation();
-  const { t } = useTranslation('common');
   const isCollapsed = state === "collapsed";
   const [mounted, setMounted] = useState(false);
   const [open, setOpen] = useState(false);
@@ -203,10 +244,12 @@ export function NavKnowledge() {
     window.addEventListener("knowledge-created", refresh);
     window.addEventListener("knowledge-updated", refresh);
     window.addEventListener("knowledge-deleted", refresh);
+    window.addEventListener("knowledge-pinned", refresh);
     return () => {
       window.removeEventListener("knowledge-created", refresh);
       window.removeEventListener("knowledge-updated", refresh);
       window.removeEventListener("knowledge-deleted", refresh);
+      window.removeEventListener("knowledge-pinned", refresh);
     };
   }, []);
 
@@ -214,12 +257,12 @@ export function NavKnowledge() {
     <SidebarGroup className="p-0 space-y-1">
       {!isCollapsed && (
         <div className="flex h-8 items-center justify-between px-2 mb-1">
-          <span className="text-xs font-medium text-sidebar-foreground/70">{t('sidebar.knowledge.title')}</span>
+          <span className="text-xs font-medium text-sidebar-foreground/70">{m.common_sidebar_knowledge_title()}</span>
           <Tooltip>
             <TooltipTrigger asChild>
               <button
                 type="button"
-                aria-label={t('sidebar.knowledge.create')}
+                aria-label={m.common_sidebar_knowledge_create()}
                 onClick={() => setCreateOpen(true)}
                 className="flex size-5 items-center justify-center rounded-md p-0 text-sidebar-foreground ring-sidebar-ring outline-hidden hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2"
               >
@@ -227,7 +270,7 @@ export function NavKnowledge() {
               </button>
             </TooltipTrigger>
             <TooltipContent side="right">
-              <p>{t('sidebar.knowledge.create')}</p>
+              <p>{m.common_sidebar_knowledge_create()}</p>
             </TooltipContent>
           </Tooltip>
         </div>
@@ -243,19 +286,19 @@ export function NavKnowledge() {
             <div className="relative">
               <SidebarMenuButton
                 asChild
-                tooltip={t('sidebar.knowledge.title')}
+                tooltip={m.common_sidebar_knowledge_title()}
                 isActive={active}
                 className={cn(
                   "flex w-full items-center rounded-lg px-2 pr-9",
                   isCollapsed && "justify-center"
                 )}
               >
-                <Link to="/knowledge"
+                <Link to={("/knowledge" as any)}
                   className="flex w-full items-center"
                 >
                   <BookOpenText className="size-4" />
                   {!isCollapsed && (
-                    <span className="ml-2 text-sm font-medium">{t('sidebar.knowledge.general')}</span>
+                    <span className="ml-2 text-sm font-medium">{m.common_sidebar_knowledge_general()}</span>
                   )}
                 </Link>
               </SidebarMenuButton>
@@ -263,7 +306,7 @@ export function NavKnowledge() {
               {!isCollapsed && (
                 <span
                   role="button"
-                  aria-label={open ? t('sidebar.collapseSubMenu') : t('sidebar.expandSubMenu')}
+                  aria-label={open ? m.common_sidebar_collapseSubMenu() : m.common_sidebar_expandSubMenu()}
                   className="absolute right-1 top-1/2 -translate-y-1/2 z-10 flex h-6 w-6 cursor-pointer items-center justify-center rounded-md hover:bg-muted"
                   onClick={() => setOpen((o) => !o)}
                 >
@@ -290,13 +333,13 @@ export function NavKnowledge() {
                       <Link to={route.link}
                         className="flex items-center rounded-md w-50 py-1.5 text-sm font-medium"
                       >
-<Icon className="size-4 mr-2" />
-                         {t(route.title)}
-                         {route.badge?.trim() && (
-                               <Badge className="h-4 px-1 text-[10px] bg-blue-50 text-blue-700 border-blue-400 dark:bg-blue-950 dark:text-blue-300 ">
-                                 <AnimatedGradientText speed={2} colorFrom="#0760FF" colorTo="#3E83FF">{t(route.badge)}</AnimatedGradientText>
-                               </Badge>
-                             )}
+ <Icon className="size-4 mr-2" />
+                          {route.title()}
+                          {route.badge && (
+                                <Badge className="h-4 px-1 text-[10px] bg-blue-50 text-blue-700 border-blue-400 dark:bg-blue-950 dark:text-blue-300 ">
+                                  <AnimatedGradientText speed={2} colorFrom="#0760FF" colorTo="#3E83FF">{route.badge()}</AnimatedGradientText>
+                                </Badge>
+                              )}
                       </Link>
                     </SidebarMenuSubButton>
                   </SidebarMenuSubItem>

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

@@ -15,7 +15,6 @@
 // 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 {
   Collapsible,
   CollapsibleContent,
@@ -48,7 +47,6 @@ import {
 } from "lucide-react";
 import { Link } from "@tanstack/react-router";
 import { useState } from "react";
-import { useTranslation } from "react-i18next";
 import { useLocation } from "@tanstack/react-router";
 import type { Route } from "@/config/sidebar-routes";
 import { isParentActive } from "@/lib/sidebar-utils";
@@ -95,11 +93,11 @@ function getIconComponent(iconName: string | undefined) {
   return IconComponent ? <IconComponent className="size-4 mr-2" /> : null;
 }
 import { CreatePRDDialog } from "@/plugins/core/prd/components/dialog/create-prd-dialog";
+import { m } from "@/paraglide/messages.js";
 
 export default function DashboardNavigation({ routes }: { routes: Route[] }) {
   const { state } = useSidebar();
   const { pathname } = useLocation();
-  const { t } = useTranslation('common');
   const isCollapsed = state === "collapsed";
   const [openCollapsible, setOpenCollapsible] = useState<string | null>(null);
   const [createPRDOpen, setCreatePRDOpen] = useState(false);
@@ -147,10 +145,10 @@ export default function DashboardNavigation({ routes }: { routes: Route[] }) {
                         {route.icon}
                         {!isCollapsed && (
 <span className="ml-2 flex-1 text-sm font-medium">
-                             {t(route.title)}
-                             {route.badge?.trim() && (
+                             {route.title()}
+                             {route.badge()?.trim() && (
                                <Badge className="ml-2 bg-green-50 text-green-700 border-green-400 dark:bg-green-950 dark:text-green-300 ">
-                                 <AnimatedGradientText speed={2} colorFrom="#8ECEAA" colorTo="#2A7E3B">{t(route.badge)}</AnimatedGradientText>
+                                 <AnimatedGradientText speed={2} colorFrom="#8ECEAA" colorTo="#2A7E3B">{route.badge()}</AnimatedGradientText>
                                </Badge>
                              )}
                            </span>
@@ -163,7 +161,7 @@ export default function DashboardNavigation({ routes }: { routes: Route[] }) {
                         {isPRDRoute && (
                           <span
                             role="button"
-                            aria-label={t("pr.create")}
+                            aria-label={m.common_pr_create()}
                             className="flex h-6 w-6 cursor-pointer items-center justify-center rounded-md hover:bg-muted"
                             onClick={() => setCreatePRDOpen(true)}
                           >
@@ -172,7 +170,7 @@ export default function DashboardNavigation({ routes }: { routes: Route[] }) {
                                 <BadgePlus className="h-4 w-4" />
                               </TooltipTrigger>
                                 <TooltipContent>
-                                  <p>{t('pr.create')}</p>
+                                  <p>{m.common_pr_create()}</p>
                                 </TooltipContent>
                             </Tooltip>
                           </span>
@@ -180,7 +178,7 @@ export default function DashboardNavigation({ routes }: { routes: Route[] }) {
                         {hasSubRoutes && (
                           <span
                             role="button"
-                            aria-label={isOpen ? t('sidebar.collapseSubMenu') : t('sidebar.expandSubMenu')}
+                            aria-label={isOpen ? m.common_sidebar_collapseSubMenu() : m.common_sidebar_expandSubMenu()}
                             className="flex h-6 w-6 cursor-pointer items-center justify-center rounded-md hover:bg-muted"
                             onClick={() =>
                               setOpenCollapsible(isOpen ? null : route.id)
@@ -210,7 +208,7 @@ export default function DashboardNavigation({ routes }: { routes: Route[] }) {
                                 className="flex items-center rounded-md px-2.5 py-1.5 text-sm font-medium"
                               >
                                 {getIconComponent(subRoute.icon as string)}
-                                <span className="truncate min-w-0">{subRoute.title}</span>
+                                <span className="truncate min-w-0">{subRoute.title()}</span>
                                 {/* {subRoute.badge?.trim() && (
                                   <Badge variant="destructive" >
                                     {subRoute.badge}
@@ -225,7 +223,7 @@ export default function DashboardNavigation({ routes }: { routes: Route[] }) {
                   )}
                 </Collapsible>
               ) : (
-                <SidebarMenuButton asChild tooltip={t(route.title)} isActive={active}>
+                <SidebarMenuButton asChild tooltip={route.title()} isActive={active}>
                   <Link to={route.link}
                     className={cn(
                       "flex items-center rounded-lg px-2",
@@ -235,7 +233,7 @@ export default function DashboardNavigation({ routes }: { routes: Route[] }) {
                     {route.icon}
                     {!isCollapsed && (
 <span className="ml-2 text-sm font-medium">
-                         {t(route.title)}
+                         {route.title()}
                        </span>
                     )}
                   </Link>

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

@@ -15,9 +15,9 @@
 // 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 { useState } from 'react'
 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 {
@@ -32,7 +32,6 @@ import {
   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 {
   useNotifications,
@@ -41,19 +40,20 @@ import {
 } from '@/hooks/use-notifications'
 import { listNotificationsFn, markAllNotificationsReadFn, markNotificationReadFn } from '@/server/serverFns/notifications'
 import type { NotificationItem } from '@allbluecn/kernel'
+import { m } from "@/paraglide/messages.js";
 
 const POPOVER_ITEM_LIMIT = 8
 
 export function NotificationsBell() {
-  const { t } = useTranslation('notifications')
   const navigate = useNavigate()
   const queryClient = useQueryClient()
   const { unreadCount } = useNotifications()
+  const [open, setOpen] = useState(false)
 
   // ⚠ 与详情页 useInfiniteQuery 的分页缓存形态不同，必须使用独立 queryKey
   const { data } = useQuery({
-    queryKey: NOTIFICATION_POPOVER_KEY,
-    queryFn: () => listNotificationsFn({ data: {} }),
+    queryKey: [...NOTIFICATION_POPOVER_KEY, 'status', 'unread'],
+    queryFn: () => listNotificationsFn({ data: { status: 'unread' } }),
   })
   const items = (data?.items ?? []).slice(0, POPOVER_ITEM_LIMIT)
 
@@ -65,7 +65,8 @@ export function NotificationsBell() {
     if (!item.readAt) {
       void markNotificationReadFn({ data: { id: item.id } }).then(invalidateNotificationData)
     }
-    if (item.link) navigate({ to: item.link as never })
+    setOpen(false)
+    if (item.link) void navigate({ to: item.link as never })
   }
 
   const handleMarkAllRead = async () => {
@@ -74,10 +75,10 @@ export function NotificationsBell() {
   }
 
   return (
-    <Popover>
+    <Popover open={open} onOpenChange={setOpen}>
       <PopoverTrigger asChild>
         <Button
-          aria-label={t('bell.label')}
+          aria-label={m.notifications_bell_label()}
           className="relative rounded-full"
           size="icon"
           variant="ghost"
@@ -92,11 +93,11 @@ export function NotificationsBell() {
       </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>
+          <span className="flex h-full items-center text-sm font-semibold">{m.notifications_bell_recentTitle()}</span>
           {unreadCount > 0 && (
             <Button onClick={handleMarkAllRead} size="sm" type="button" variant="ghost">
               <CheckCheck className="size-4" />
-              {t('actions.markAllRead')}
+              {m.notifications_actions_markAllRead()}
             </Button>
           )}
         </div>
@@ -107,40 +108,29 @@ export function NotificationsBell() {
               <EmptyMedia variant="icon">
                 <Bell className="size-6" />
               </EmptyMedia>
-              <EmptyTitle>{t('empty')}</EmptyTitle>
+              <EmptyTitle>{m.notifications_allCaughtUp()}</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'
-                  )}
+                  className="flex cursor-pointer items-start gap-3 px-4 py-3 transition-colors hover:bg-muted/50"
                   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'
-                    )}
-                  >
+                  <div className="flex size-8 shrink-0 items-center justify-center rounded-full 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="truncate text-sm">{item.title}</span>
                     <span className="text-muted-foreground text-xs">
-                      {formatRelativeTime(item.createdAt, t)}
+                      {formatRelativeTime(item.createdAt)}
                     </span>
                   </div>
-                  {isUnread && <span className="mt-1.5 size-2 shrink-0 rounded-full bg-primary" />}
+                  <span className="mt-1.5 size-2 shrink-0 rounded-full bg-primary" />
                 </div>
               )
             })}
@@ -150,9 +140,10 @@ export function NotificationsBell() {
         <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"
+            onClick={() => setOpen(false)}
             to="/notifications"
           >
-            {t('actions.viewAll')}
+            {m.notifications_actions_viewAll()}
           </Link>
         </div>
       </PopoverContent>

package/src/components/layout/sidebar-03/nav-search-trigger.tsx

@@ -14,12 +14,11 @@
 //
 // 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 { useTranslation } from "react-i18next"
 import { Search, Command } from "lucide-react"
 import { useSidebar } from "@/components/ui/sidebar"
 import { cn } from "@/lib/utils"
 import { setCommandPaletteOpen } from "@/lib/commands/command-palette-state"
+import { m } from "@/paraglide/messages.js";
 
 const isMac =
   typeof navigator !== "undefined" &&
@@ -27,7 +26,6 @@ const isMac =
     navigator.userAgent.toUpperCase().includes("MAC"))
 
 export function SidebarSearchTrigger() {
-  const { t } = useTranslation("common")
   const { state } = useSidebar()
   const isCollapsed = state === "collapsed"
   const openPalette = () => setCommandPaletteOpen(true)
@@ -37,7 +35,7 @@ export function SidebarSearchTrigger() {
       <button
         type="button"
         onClick={openPalette}
-        aria-label={t("command.searchPlaceholder")}
+        aria-label={m.common_command_searchPlaceholder()}
         className="flex size-8 w-full items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-muted hover:text-foreground"
       >
         <Search className="size-4" />
@@ -56,7 +54,7 @@ export function SidebarSearchTrigger() {
     >
       <Search className="size-4 shrink-0" />
       <span className="flex-1 truncate text-left text-xs">
-        {t("command.searchPlaceholder")}
+        {m.common_command_searchPlaceholder()}
       </span>
         <span className="inline-flex items-center gap-1 rounded border border-border bg-muted/60 px-1.5 py-0.5">
           <kbd