@allbluecn/web-app 0.17.2 → 0.18.1

package/src/components/knowledge/kb-filter-popover.tsx

@@ -17,8 +17,8 @@
 
 import * as React from "react";
 import { BookOpenText, Bookmark, BookMarked, Check, ChevronsUpDown, Scale, ShieldCheck, Sprout } from "lucide-react";
-import { Button } from "@/components/ui/button";
-import { Input } from "@/components/ui/input";
+import { Button } from "@allbluecn/ui/button";
+import { Input } from "@allbluecn/ui/input";
 import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
 import { LucideIconByName } from "@/components/shared-kit/icons/lucide-icon-picker/lucide-icon-by-name";
 import { generalGroupLabel } from "./general-groups";

package/src/components/knowledge/knowledge-tag-input.tsx

@@ -18,8 +18,8 @@ import { m } from '@/paraglide/messages.js'
 
 import { useState } from 'react'
 import { X, Plus } from 'lucide-react'
-import { Input } from '@/components/ui/input'
-import { Badge } from '@/components/ui/badge'
+import { Input } from '@allbluecn/ui/input'
+import { Badge } from '@allbluecn/ui/badge'
 import { cn } from '@/lib/utils'
 
 interface KnowledgeTagInputProps {

package/src/components/knowledge/knowledge-toolbar.tsx

@@ -17,9 +17,9 @@
 
 import { useState, useEffect, useRef } from 'react'
 import { useNavigate } from '@tanstack/react-router'
-import { Settings, Globe, Lock, Trash2, RefreshCw, Columns2, Minimize2, ArrowLeftRight, Maximize2, FileText, Grid3X3, Network, Table, PanelLeftOpen, PanelLeftClose, Plus, Check, ListIndentIncrease, ListIndentDecrease, Pencil } from 'lucide-react'
-import { Input } from '@/components/ui/input'
-import { Badge } from '@/components/ui/badge'
+import { Settings, Globe, Lock, Trash2, RefreshCw, Columns2, Minimize2, ArrowLeftRight, Maximize2, FileText, Grid3X3, Network, Table, Plus, Check, ListIndentIncrease, ListIndentDecrease, Pencil } from 'lucide-react'
+import { Input } from '@allbluecn/ui/input'
+import { Badge } from '@allbluecn/ui/badge'
 import {
   Popover,
   PopoverContent,
@@ -27,8 +27,8 @@ import {
 } from '@/components/ui/popover'
 import {
   Separator,
-} from '@/components/ui/separator'
-import { Button } from '@/components/ui/button'
+} from '@allbluecn/ui/separator'
+import { Button } from '@allbluecn/ui/button'
 import {
   Breadcrumb,
   BreadcrumbEllipsis,
@@ -49,7 +49,7 @@ import {
   DropdownMenuSubContent,
   DropdownMenuSubTrigger,
   DropdownMenuTrigger,
-} from '@/components/ui/dropdown-menu'
+} from '@allbluecn/ui/dropdown-menu'
 import {
   Dialog,
   DialogContent,
@@ -57,25 +57,26 @@ import {
   DialogFooter,
   DialogHeader,
   DialogTitle,
-} from '@/components/ui/dialog'
+} from '@allbluecn/ui/dialog'
 import {
   Tooltip,
   TooltipContent,
   TooltipTrigger,
-} from '@/components/ui/tooltip'
-import { KnowledgeTagInput } from './knowledge-tag-input'
+} from '@allbluecn/ui/tooltip'
 import { useEditorWidth } from './editor/editor-width-context'
 import type { EditorWidth } from './editor/editor-width-context'
 import { deleteKnowledgeFn, updateKnowledgeFn } from '@/server/serverFns/knowledge'
 import { reindexKnowledgeBaseFn } from '@/server/serverFns/knowledge-index'
-import { toast } from '@/components/ui/toast'
+import { toast } from '@allbluecn/ui/toast'
 import { KnowledgeFormDialog } from '@/components/knowledge/dialog/knowledge-form-dialog'
 import { cn } from '@/lib/utils'
-import { Checkbox } from '@/components/ui/checkbox'
+import { Checkbox } from '@allbluecn/ui/checkbox'
 import { Link as LinkIcon } from 'lucide-react'
 import { listKbProjectsFn, setKbProjectsFn } from '@/server/serverFns/knowledge'
 import { listProjectsBriefFn } from '@/server/serverFns/project'
 import { m } from "@/paraglide/messages.js";
+import { toastError } from "@/lib/toast-error";
+import { emitEvent, AppEvents } from "@/lib/events";
 
 interface KbData {
   id: string
@@ -183,7 +184,7 @@ export function KnowledgeToolbar({ kb, onUpdate, breadcrumb, docType, treeCollap
       toast.success('项目关联已更新');
       setProjectsDialogOpen(false);
     } catch (err) {
-      toast.error(err instanceof Error ? err.message : '保存失败');
+      toastError(err, '保存失败');
     } finally {
       setSavingProjects(false);
     }
@@ -195,7 +196,7 @@ export function KnowledgeToolbar({ kb, onUpdate, breadcrumb, docType, treeCollap
     try {
       await deleteKnowledgeFn({ data: { id: kb.id } })
       setDeleteOpen(false)
-      window.dispatchEvent(new CustomEvent("knowledge-deleted"))
+      emitEvent(AppEvents.knowledge.deleted)
       navigate({ to: '/knowledge' })
     } catch (e) {
       console.error('Delete failed:', e instanceof Error ? e.message : String(e))

package/src/components/knowledge/knowledge-tree-item.tsx

@@ -18,20 +18,20 @@
 import { useState, useRef } from 'react'
 import { ChevronDown, ChevronRight, FileText, Grid3X3, Home, MoreHorizontal, Network, Plus, Table, Trash2, FilePenLine, Check, X } from 'lucide-react'
 import { cn } from '@/lib/utils'
-import { Input } from '@/components/ui/input'
-import { Button } from '@/components/ui/button'
+import { Input } from '@allbluecn/ui/input'
+import { Button } from '@allbluecn/ui/button'
 import {
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuTrigger,
   DropdownMenuSeparator,
-} from '@/components/ui/dropdown-menu'
+} from '@allbluecn/ui/dropdown-menu'
 import {
   Tooltip,
   TooltipContent,
   TooltipTrigger,
-} from '@/components/ui/tooltip'
+} from '@allbluecn/ui/tooltip'
 import {
   Dialog,
   DialogContent,
@@ -39,7 +39,7 @@ import {
   DialogFooter,
   DialogHeader,
   DialogTitle,
-} from '@/components/ui/dialog'
+} from '@allbluecn/ui/dialog'
 import { createDocumentFn, deleteDocumentFn, updateDocumentFn } from '@/server/serverFns/knowledge'
 import { m } from "@/paraglide/messages.js";
 

package/src/components/knowledge/knowledge-tree.tsx

@@ -19,14 +19,14 @@ import { useEffect, useState, useCallback, useRef } from 'react'
 import {
   Plus, FileText, Table, Grid3X3, Network,
 } from 'lucide-react'
-import { Button } from '@/components/ui/button'
-import { Input } from '@/components/ui/input'
+import { Button } from '@allbluecn/ui/button'
+import { Input } from '@allbluecn/ui/input'
 import {
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuTrigger,
-} from '@/components/ui/dropdown-menu'
+} from '@allbluecn/ui/dropdown-menu'
 import { KnowledgeTreeItem, TreeNode } from './knowledge-tree-item'
 import { createDocumentFn, listDocumentsFn } from '@/server/serverFns/knowledge'
 import { m } from "@/paraglide/messages.js";

package/src/components/knowledge/public/bookmark-card.tsx

@@ -0,0 +1,247 @@
+// SPDX-License-Identifier: AGPL-3.0-or-later
+// AllBlue - 理想之海
+// Copyright (C) 2026 AllBlue Contributors
+//
+// 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/>.
+
+import { useLayoutEffect, useRef, useState, type ReactNode } from 'react'
+import { SharersAvatarGroup } from './sharers-avatar-group'
+import { Badge } from '@allbluecn/ui/badge'
+import { Switch } from '@allbluecn/ui/switch'
+import { Tooltip, TooltipContent, TooltipTrigger } from '@allbluecn/ui/tooltip'
+import { HoverCard, HoverCardContent, HoverCardTrigger } from '@/components/ui/hover-card'
+import { Star, GitBranch, RefreshCw, ExternalLink, Pencil } from 'lucide-react'
+import { CategoryIcon } from './category-icon'
+import { cn } from '@/lib/utils'
+import { m } from "@/paraglide/messages.js";
+
+interface BookmarkItem {
+  id: string
+  canonicalId: string
+  title: string
+  url: string
+  summary?: string | null
+  faviconUrl?: string | null
+  categoryIcon?: string
+  isGithub: boolean
+  githubStars?: number | null
+  githubLatestVersion?: string | null
+  githubRepoUpdatedAt?: Date | string | null
+  githubSyncedAt?: Date | string | null
+  tags?: unknown
+  sharers?: Array<{ id: string; username: string; avatarConfig: unknown; bgShape: string | null; bgColor: string | null }>
+  visibility: string
+  userId?: string
+  isOwner?: boolean
+  isFavorited?: boolean
+}
+
+export function BookmarkCard({
+  item,
+  canEdit,
+  onSync,
+  currentUserId,
+  onEdit,
+  onShareToggle,
+  onFavoriteToggle,
+}: {
+  item: BookmarkItem
+  canEdit?: boolean
+  onSync?: () => void
+  currentUserId?: string
+  onEdit?: () => void
+  onShareToggle?: () => void
+  onFavoriteToggle?: () => void
+}) {
+  const open = () => window.open(item.url, '_blank', 'noopener,noreferrer')
+  const stale = !item.githubSyncedAt || isStale(item.githubSyncedAt)
+  const isPublic = item.visibility === 'public'
+  const isOwner = !!item.isOwner
+  const hasSharers = isPublic && !isOwner && item.sharers?.length
+
+  return (
+    <div
+      onClick={open}
+      className="group relative flex h-full cursor-pointer flex-col rounded-xl border bg-card p-4 transition hover:shadow-md"
+    >
+      {isOwner && onEdit && (
+        <IconButton
+          tooltip={m.knowledge_bookmarkCard_edit()}
+          onClick={onEdit}
+          className="absolute right-2 top-2 z-10 h-7 w-7 opacity-0 transition-opacity group-hover:opacity-100"
+        >
+          <Pencil className="h-3.5 w-3.5" />
+        </IconButton>
+      )}
+      <div className="flex items-start gap-3">
+        <Favicon faviconUrl={item.faviconUrl} title={item.title} categoryIcon={item.categoryIcon} />
+        <div className="min-w-0 flex-1">
+          <h3 className="truncate font-medium text-lg">{item.title}</h3>
+          <div className="flex min-w-0 items-center gap-1">
+            <p className="truncate text-xs text-muted-foreground">{item.url}</p>
+            <ExternalLink className="h-3 w-3 shrink-0 text-muted-foreground opacity-0 group-hover:opacity-100" />
+          </div>
+        </div>
+      </div>
+      {item.summary && <Summary text={item.summary} />}
+      {item.isGithub && (
+        <div className="mt-2 flex flex-wrap items-center gap-x-3 gap-y-1 text-xs text-muted-foreground">
+          {item.githubStars != null && (
+            <span className="inline-flex items-center gap-0.5">
+              <Star className="h-3 w-3" />
+              {formatStars(item.githubStars)}
+            </span>
+          )}
+          {item.githubLatestVersion && (
+            <span className="inline-flex items-center gap-0.5">
+              <GitBranch className="h-3 w-3" />
+              {item.githubLatestVersion}
+            </span>
+          )}
+          {item.githubRepoUpdatedAt && <span>{m.knowledge_bookmarkCard_updatedAt()} {fmt(item.githubRepoUpdatedAt)}</span>}
+          {stale && canEdit && onSync && (
+            <button
+              onClick={(e) => {
+                e.stopPropagation()
+                onSync()
+              }}
+              className="inline-flex items-center gap-0.5 text-primary hover:underline"
+            >
+              <RefreshCw className="h-3 w-3" />
+              {m.knowledge_bookmarkCard_sync()}
+            </button>
+          )}
+        </div>
+      )}
+      <div className="mt-auto flex items-center justify-between gap-2 pt-3">
+        <div className="flex min-w-0 flex-wrap gap-1">
+          {(Array.isArray(item.tags) ? item.tags : []).slice(0, 3).map((t, i) => (
+            <Badge key={i} variant="secondary" className="text-[10px]">
+              {String(t)}
+            </Badge>
+          ))}
+        </div>
+        <div className="flex shrink-0 items-center gap-1.5">
+          {hasSharers ? <SharersAvatarGroup sharers={item.sharers!} currentUserId={currentUserId} /> : null}
+          {!isOwner && isPublic && onFavoriteToggle && (
+            <IconButton tooltip={item.isFavorited ? m.knowledge_bookmarkCard_unbookmark() : m.knowledge_bookmarkCard_bookmark()} onClick={onFavoriteToggle}>
+              <Star
+                className={cn(
+                  'h-4 w-4',
+                  item.isFavorited ? 'fill-yellow-400 text-yellow-400' : 'text-muted-foreground',
+                )}
+              />
+            </IconButton>
+          )}
+          {isOwner && onShareToggle && (
+            <div
+              className="flex items-center gap-1"
+              onClick={(e) => e.stopPropagation()}
+              role="group"
+              aria-label={m.knowledge_bookmarkCard_shareToggle()}
+            >
+              <span className="text-[11px] text-muted-foreground select-none">{isPublic ? m.knowledge_bookmarkCard_shared() : m.knowledge_bookmarkCard_share()}</span>
+              <Switch checked={isPublic} onCheckedChange={() => onShareToggle()} size="sm" aria-label={m.knowledge_bookmarkCard_share()} />
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  )
+}
+
+function Summary({ text }: { text: string }) {
+  const ref = useRef<HTMLParagraphElement>(null)
+  const [clamped, setClamped] = useState(false)
+  useLayoutEffect(() => {
+    const el = ref.current
+    if (el) setClamped(el.scrollHeight > el.clientHeight)
+  }, [text])
+  if (!clamped) {
+    return <p ref={ref} className="mt-2 line-clamp-2 text-sm text-muted-foreground">{text}</p>
+  }
+  return (
+    <HoverCard>
+      <HoverCardTrigger delay={200} closeDelay={150} render={<p ref={ref} className="mt-2 line-clamp-2 cursor-help text-sm text-muted-foreground" />}>{text}</HoverCardTrigger>
+      <HoverCardContent className="max-h-60 w-80 overflow-auto text-sm leading-relaxed">{text}</HoverCardContent>
+    </HoverCard>
+  )
+}
+
+function IconButton({
+  tooltip,
+  onClick,
+  children,
+  className,
+}: {
+  tooltip: string
+  onClick: () => void
+  children: ReactNode
+  className?: string
+}) {
+  return (
+    <Tooltip>
+      <TooltipTrigger render={<button type="button"
+          onClick={(e) => {
+            e.stopPropagation()
+            onClick()
+          }}
+          className={cn(
+            'inline-flex h-6 w-6 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-accent hover:text-foreground',
+            className,
+          )} />}>
+          {children}
+        </TooltipTrigger>
+      <TooltipContent>{tooltip}</TooltipContent>
+    </Tooltip>
+  )
+}
+
+function Favicon({ faviconUrl, title, categoryIcon }: { faviconUrl?: string | null; title: string; categoryIcon?: string }) {
+  const [showFallback, setShowFallback] = useState(false)
+  if (faviconUrl && !showFallback) {
+    return (
+      <img
+        src={faviconUrl}
+        alt=""
+        className="h-8 w-8 shrink-0 rounded dark:bg-zinc-100 dark:p-1 dark:ring-black/5"
+        onError={() => setShowFallback(true)}
+      />
+    )
+  }
+  return (
+    <div className="flex h-8 w-8 shrink-0 items-center justify-center rounded bg-primary/10 text-primary">
+      <CategoryIcon name={categoryIcon ?? 'Globe'} className="h-4 w-4" />
+    </div>
+  )
+}
+
+function formatStars(n: number) {
+  return n >= 1000 ? `${(n / 1000).toFixed(1)}k` : String(n)
+}
+
+function fmt(d: Date | string) {
+  const date = new Date(d)
+  if (Number.isNaN(date.getTime())) return ''
+  const diff = Date.now() - date.getTime()
+  const days = Math.floor(diff / 86400000)
+  if (days <= 0) return m.knowledge_bookmarkCard_today()
+  if (days < 30) return m.knowledge_bookmarkCard_daysAgo({ days })
+  if (days < 365) return m.knowledge_bookmarkCard_monthsAgo({ months: Math.floor(days / 30) })
+  return m.knowledge_bookmarkCard_yearsAgo({ years: Math.floor(days / 365) })
+}
+
+function isStale(d: Date | string) {
+  return Date.now() - new Date(d).getTime() > 6 * 60 * 60 * 1000
+}

package/src/components/knowledge/public/bookmark-form-dialog.tsx

@@ -0,0 +1,259 @@
+// SPDX-License-Identifier: AGPL-3.0-or-later
+// AllBlue - 理想之海
+// Copyright (C) 2026 AllBlue Contributors
+//
+// 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/>.
+
+import { useState, useEffect } from 'react'
+import { useQuery } from '@tanstack/react-query'
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from '@allbluecn/ui/dialog'
+import { Button } from '@allbluecn/ui/button'
+import { Input } from '@allbluecn/ui/input'
+import { Textarea } from '@allbluecn/ui/textarea'
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@allbluecn/ui/select'
+import { createBookmarkFn } from '@/server/serverFns/knowledge/public/bookmarks/create'
+import { updateBookmarkFn } from '@/server/serverFns/knowledge/public/bookmarks/update'
+import { listBookmarkCategoriesFn, createBookmarkCategoryFn } from '@/server/serverFns/knowledge/public/bookmarks/categories'
+import { deleteBookmarkFn } from '@/server/serverFns/knowledge/public/bookmarks/delete'
+import { Trash2, Check, X } from 'lucide-react'
+import { toast } from '@allbluecn/ui/toast'
+import { m } from "@/paraglide/messages.js";
+import { toastError } from "@/lib/toast-error";
+
+export interface BookmarkEditTarget {
+  id: string
+  title: string
+  url: string
+  categoryId: string | null
+  summary: string | null
+}
+
+export function BookmarkFormDialog({
+  open,
+  onOpenChange,
+  onSuccess,
+  editItem,
+}: {
+  open: boolean
+  onOpenChange: (o: boolean) => void
+  onSuccess?: () => void
+  editItem?: BookmarkEditTarget | null
+}) {
+  const isEdit = !!editItem
+  const [title, setTitle] = useState('')
+  const [url, setUrl] = useState('')
+  const [categoryId, setCategoryId] = useState('')
+  const [summary, setSummary] = useState('')
+  const [loading, setLoading] = useState(false)
+  const [creatingCat, setCreatingCat] = useState(false)
+  const [newCatName, setNewCatName] = useState('')
+  const [confirming, setConfirming] = useState(false)
+  const { data: cats, refetch: refetchCats } = useQuery({
+    queryKey: ['bookmark-categories'],
+    queryFn: () => listBookmarkCategoriesFn(),
+    enabled: open,
+  })
+
+  useEffect(() => {
+    if (!open) return
+    setTitle(editItem?.title ?? '')
+    setUrl(editItem?.url ?? '')
+    setCategoryId(editItem?.categoryId ?? '')
+    setSummary(editItem?.summary ?? '')
+    setConfirming(false)
+  }, [open, editItem])
+
+  const handleCreateCat = async () => {
+    if (!newCatName.trim()) return
+    try {
+      const cat = await createBookmarkCategoryFn({ data: { name: newCatName.trim() } })
+      setCategoryId(cat.id)
+      setNewCatName('')
+      setCreatingCat(false)
+      refetchCats()
+    } catch (e) {
+      toastError(e, m.knowledge_bookmarks_detail_createFailed())
+    }
+  }
+
+  const urlChanged = isEdit && !!editItem && url !== editItem.url
+
+  const submit = async () => {
+    if (!title.trim() || !url.trim()) {
+      toast.error(m.knowledge_bookmarks_detail_required())
+      return
+    }
+    setLoading(true)
+    try {
+      if (isEdit && editItem) {
+        await updateBookmarkFn({
+          data: {
+            id: editItem.id,
+            title: title.trim(),
+            url: url.trim(),
+            categoryId: categoryId || null,
+            summary: summary.trim() || null,
+          },
+        })
+        toast.success(m.knowledge_bookmarks_detail_saved())
+        if (urlChanged) toast.info(m.knowledge_bookmarks_detail_urlChanged())
+      } else {
+        await createBookmarkFn({
+          data: {
+            title: title.trim(),
+            url: url.trim(),
+            categoryId: categoryId || undefined,
+            summary: summary.trim() || undefined,
+          },
+        })
+        toast.success(m.knowledge_bookmarks_detail_addedSync())
+      }
+      onOpenChange(false)
+      onSuccess?.()
+    } catch (e) {
+      toastError(e, isEdit ? m.knowledge_bookmarks_detail_saveFailed() : m.knowledge_bookmarks_detail_addFailed())
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  const handleDelete = async () => {
+    if (!editItem) return
+    setLoading(true)
+    try {
+      await deleteBookmarkFn({ data: { id: editItem.id } })
+      toast.success(m.knowledge_bookmarks_detail_deleted())
+      setConfirming(false)
+      onOpenChange(false)
+      onSuccess?.()
+    } catch (e) {
+      toastError(e, m.knowledge_bookmarks_detail_deleteFailed())
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="sm:max-w-110">
+        <DialogHeader>
+          <DialogTitle>{isEdit ? m.knowledge_bookmarks_detail_editTitle() : m.knowledge_bookmarks_detail_newTitle()}</DialogTitle>
+        </DialogHeader>
+        <div className="space-y-3">
+          <div className="flex flex-col gap-1.5">
+            <label className="text-sm font-medium">{m.knowledge_bookmarks_detail_name()} *</label>
+            <Input value={title} onChange={(e) => setTitle(e.target.value)} autoFocus />
+          </div>
+          <div className="flex flex-col gap-1.5">
+            <label className="text-sm font-medium">{m.knowledge_bookmarks_detail_url()} *</label>
+            <Input value={url} onChange={(e) => setUrl(e.target.value)} placeholder="https://example.com" />
+            {urlChanged && (
+              <p className="text-xs text-amber-600 dark:text-amber-500">{m.knowledge_bookmarks_detail_urlChangeHint()}</p>
+            )}
+          </div>
+          <div className="flex flex-col gap-1.5">
+            <label className="text-sm font-medium">{m.knowledge_bookmarks_detail_category()}</label>
+            {creatingCat ? (
+              <div className="flex gap-2">
+                <Input
+                  value={newCatName}
+                  autoFocus
+                  onChange={(e) => setNewCatName(e.target.value)}
+                  placeholder={m.knowledge_bookmarks_detail_newCategoryName()}
+                  onKeyDown={(e) => {
+                    if (e.key === 'Enter') handleCreateCat()
+                    if (e.key === 'Escape') {
+                      setCreatingCat(false)
+                      setNewCatName('')
+                    }
+                  }}
+                />
+                <Button type="button" variant="outline" size="sm" onClick={() => { setCreatingCat(false); setNewCatName('') }}>
+                  {m.knowledge_bookmarks_detail_cancel()}
+                </Button>
+                <Button type="button" size="sm" onClick={handleCreateCat}>
+                  {m.knowledge_bookmarks_detail_create()}
+                </Button>
+              </div>
+            ) : (
+              <div className="flex gap-2">
+                <Select value={categoryId} onValueChange={(v) => setCategoryId(v ?? "")}>
+                  <SelectTrigger className="flex-1">
+                    <SelectValue placeholder={m.knowledge_bookmarks_detail_selectCategory()} />
+                  </SelectTrigger>
+                  <SelectContent>
+                    {(cats ?? []).map((c) => (
+                      <SelectItem key={c.id} value={c.id}>
+                        {c.name}
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+                <Button type="button" variant="outline" size="sm" onClick={() => setCreatingCat(true)}>
+                  + {m.knowledge_bookmarks_detail_addCategory()}
+                </Button>
+              </div>
+            )}
+          </div>
+          <div className="flex flex-col gap-1.5">
+            <label className="text-sm font-medium">{m.knowledge_bookmarks_detail_summary()}</label>
+            <Textarea value={summary} onChange={(e) => setSummary(e.target.value)} rows={2} maxLength={500} />
+          </div>
+        </div>
+        <DialogFooter className="gap-2 sm:justify-between">
+          {isEdit && editItem ? (
+            <div className="mr-auto flex items-center gap-1.5">
+              <Button
+                variant="outline"
+                size="sm"
+                onClick={() => setConfirming(true)}
+                disabled={loading || confirming}
+                className="text-destructive hover:text-destructive hover:bg-destructive/10"
+              >
+                <Trash2 className="h-4 w-4" />
+                {m.knowledge_bookmarks_detail_delete()}
+              </Button>
+              {confirming && (
+                <>
+                  <Button variant="destructive" size="sm" onClick={handleDelete} disabled={loading}>
+                    <Check className="h-4 w-4" />
+                    {m.knowledge_bookmarks_detail_confirmDelete()}
+                  </Button>
+                  <Button
+                    variant="ghost"
+                    size="icon"
+                    className="h-8 w-8"
+                    onClick={() => setConfirming(false)}
+                    disabled={loading}
+                    aria-label={m.knowledge_bookmarks_detail_cancelDeleteAria()}
+                  >
+                    <X className="h-4 w-4" />
+                  </Button>
+                </>
+              )}
+            </div>
+          ) : null}
+          <div className="ml-auto flex gap-2 ">
+            <Button variant="outline" onClick={() => onOpenChange(false)}>
+              {m.knowledge_bookmarks_detail_cancel()}
+            </Button>
+            <Button onClick={submit} disabled={loading}>
+              {loading ? (isEdit ? m.knowledge_bookmarks_detail_saving() : m.knowledge_bookmarks_detail_adding()) : isEdit ? m.knowledge_bookmarks_detail_save() : m.knowledge_bookmarks_detail_add()}
+            </Button>
+          </div>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  )
+}