@allbluecn/admin-app 0.3.3 → 0.3.5

package/src/components/market/market-app-form.tsx

@@ -25,18 +25,18 @@ import {
   DialogFooter,
   DialogHeader,
   DialogTitle,
-} from "@allbluecn/ui/dialog"
-import { Button } from "@allbluecn/ui/button"
-import { Input } from "@allbluecn/ui/input"
-import { Label } from "@allbluecn/ui/label"
+} from "@/components/ui/dialog"
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import { Label } from "@/components/ui/label"
 import {
   Select,
   SelectContent,
   SelectItem,
   SelectTrigger,
   SelectValue,
-} from "@allbluecn/ui/select"
-import { toast } from '@allbluecn/ui/toast'
+} from "@/components/ui/select"
+import { toast } from '@/components/ui/toast'
 
 interface MarketAppFormProps {
   open: boolean

package/src/components/market/market-app-list.tsx

@@ -17,15 +17,15 @@
 
 import { useCallback, useEffect, useState } from "react"
 import { m } from '@/paraglide/messages.js'
-import { DataTable } from "@allbluecn/ui/data-table"
+import { DataTable } from "@/components/data-table/data-table"
 import { getMarketColumns, MarketAppRow } from "./columns"
 import { MarketAppForm } from "./market-app-form"
 import { MarketAppFormData } from "@/lib/anyhub/types"
-import { Button } from "@allbluecn/ui/button"
+import { Button } from "@/components/ui/button"
 import { PlusIcon } from "lucide-react"
-import { toast } from '@allbluecn/ui/toast'
+import { toast } from '@/components/ui/toast'
 import { listMarketAppsFn, updateMarketAppFn, deleteMarketAppFn } from "@/server/serverFns/anyhub/market"
-import { ConfirmDialog } from "@allbluecn/ui/components/confirm-dialog"
+import { ConfirmDialog } from "@/components/confirm-dialog"
 
 export function MarketAppList() {
   const [apps, setApps] = useState<MarketAppRow[]>([])

package/src/components/monitoring/error-list.tsx

@@ -17,7 +17,7 @@
 
 import { useState } from 'react'
 import { m } from '@/paraglide/messages.js'
-import { DataTable, type AdminColumnDef } from '@allbluecn/ui/data-table'
+import { DataTable, type AdminColumnDef } from '@/components/data-table/data-table'
 
 function formatRelativeTime(dateStr: string): string {
   const now = new Date()

package/src/components/monitoring/metrics-stats.tsx

@@ -15,7 +15,7 @@
 // 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 { DataTable, type AdminColumnDef } from '@allbluecn/ui/data-table'
+import { DataTable, type AdminColumnDef } from '@/components/data-table/data-table'
 import { m } from '@/paraglide/messages.js'
 import { describeMetric } from '@/lib/monitoring-descriptions'
 import { getBenchmark, getBenchmarkSource, compareDuration } from '@/lib/monitoring-benchmarks'

package/src/components/monitoring/request-log-table.tsx

@@ -17,7 +17,7 @@
 
 import type React from 'react'
 import { m } from '@/paraglide/messages.js'
-import { DataTable, type AdminColumnDef } from '@allbluecn/ui/data-table'
+import { DataTable, type AdminColumnDef } from '@/components/data-table/data-table'
 import { describePath } from '@/lib/monitoring-descriptions'
 import { getBenchmark, getBenchmarkSource, compareDuration } from '@/lib/monitoring-benchmarks'
 import { ArrowDown, ArrowUp, Info } from 'lucide-react'

package/src/components/notion-avatar.tsx

@@ -0,0 +1,126 @@
+// 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 { useEffect, useState } from "react"
+import type { AvatarConfig, AvatarPart, ShapeType } from "@allbluecn/kernel"
+import { sanitizeSvg } from "../lib/sanitize"
+
+const noneParts: AvatarPart[] = ["glasses", "hair", "accessories", "details", "beard"]
+
+const partOrder: AvatarPart[] = [
+  "face",
+  "nose",
+  "mouth",
+  "eyes",
+  "eyebrows",
+  "glasses",
+  "hair",
+  "accessories",
+  "details",
+  "beard",
+]
+
+function getPreviewImagePath(part: AvatarPart, index: number): string {
+  return `/avatar/preview/${part}/${index}.svg`
+}
+
+const SVGFilter = `<defs>
+  <filter id="notion-avatar-filter" x="-20%" y="-20%" width="140%" height="140%" filterUnits="objectBoundingBox" primitiveUnits="userSpaceOnUse" color-interpolation-filters="linearRGB">
+    <feMorphology operator="dilate" radius="20" in="SourceAlpha" result="morphology"/>
+    <feFlood flood-color="#ffffff" flood-opacity="1" result="flood"/>
+    <feComposite in="flood" in2="morphology" operator="in" result="composite"/>
+    <feMerge result="merge">
+      <feMergeNode in="composite" result="mergeNode"/>
+      <feMergeNode in="SourceGraphic" result="mergeNode1"/>
+    </feMerge>
+  </filter>
+</defs>`
+
+function extractInnerSvg(svgText: string): string {
+  return svgText.replace(/<svg[^>]*>/i, "").replace(/<\/svg>/i, "").trim()
+}
+
+const shapeStyle: Record<ShapeType, string> = {
+  circle: "rounded-full",
+  rounded: "rounded-lg",
+  square: "rounded-none",
+}
+
+type NotionAvatarProps = {
+  config: AvatarConfig
+  bgColor?: string
+  shape?: ShapeType
+  className?: string
+  style?: React.CSSProperties
+  flip?: boolean
+}
+
+export function NotionAvatar({
+  config,
+  bgColor = "transparent",
+  shape = "circle",
+  className,
+  style,
+  flip = false,
+}: NotionAvatarProps) {
+  const [svgContent, setSvgContent] = useState<string>("")
+
+  useEffect(() => {
+    async function buildAvatar() {
+      const groups = await Promise.all(
+        partOrder.map(async (part) => {
+          const index = config[part]
+          if (noneParts.includes(part) && index === 0) return ""
+          try {
+            const res = await fetch(getPreviewImagePath(part, index))
+            const svgText = await res.text()
+            const inner = extractInnerSvg(svgText)
+            return `\n<g id="avatar-${part}"${part === "face" ? ' fill="#ffffff"' : ""}>${inner}</g>`
+          } catch {
+            return ""
+          }
+        }),
+      )
+      const flipAttr = flip ? ' transform="scale(-1,1) translate(-1080, 0)"' : ""
+      const avatarSvg = `<svg viewBox="0 0 1080 1080" fill="none" xmlns="http://www.w3.org/2000/svg" style="width:100%;height:100%">${SVGFilter}<g id="avatar"${flipAttr}>${groups.join("")}</g></svg>`
+      setSvgContent(avatarSvg)
+    }
+    buildAvatar()
+  }, [config, flip])
+
+  if (!svgContent) {
+    return (
+      <div
+        className={`${shapeStyle[shape]} overflow-hidden bg-muted animate-pulse ${className ?? ""}`}
+        style={{ aspectRatio: "1 / 1", ...style }}
+      />
+    )
+  }
+
+  return (
+    <div
+      className={`${shapeStyle[shape]} ${className ?? ""}`}
+      style={{
+        backgroundColor: bgColor === "transparent" ? undefined : bgColor,
+        aspectRatio: "1 / 1",
+        ...style,
+      }}
+      dangerouslySetInnerHTML={{ __html: sanitizeSvg(svgContent) }}
+    />
+  )
+}

package/src/components/oauth-providers/provider-page.tsx

@@ -19,17 +19,17 @@ import { useEffect, useState } from 'react'
 import type React from 'react'
 import { m } from '@/paraglide/messages.js'
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
-import { toast } from '@allbluecn/ui/toast'
+import { toast } from '@/components/ui/toast'
 import { Eye, EyeOff, KeyRound, PlugZap, Save, Trash2 } from 'lucide-react'
 import { PageHeader } from '@/components/common/page-header'
-import { Button } from '@allbluecn/ui/button'
-import { Badge } from '@allbluecn/ui/badge'
-import { Card, CardContent } from '@allbluecn/ui/card'
-import { Input } from '@allbluecn/ui/input'
-import { Label } from '@allbluecn/ui/label'
-import { Switch } from '@allbluecn/ui/switch'
-import { Skeleton } from '@allbluecn/ui/skeleton'
-import { ConfirmDialog } from '@allbluecn/ui/components/confirm-dialog'
+import { Button } from '@/components/ui/button'
+import { Badge } from '@/components/ui/badge'
+import { Card, CardContent } from '@/components/ui/card'
+import { Input } from '@/components/ui/input'
+import { Label } from '@/components/ui/label'
+import { Switch } from '@/components/ui/switch'
+import { Skeleton } from '@/components/ui/skeleton'
+import { ConfirmDialog } from '@/components/confirm-dialog'
 import {
   deleteOAuthProviderFn,
   listOAuthProvidersFn,

package/src/components/permissions/assign-dialog.tsx

@@ -2,7 +2,7 @@ import { useEffect, useState } from 'react'
 import type React from 'react'
 import { m } from '@/paraglide/messages.js'
 import { useServerFn } from '@tanstack/react-start'
-import { toast } from '@allbluecn/ui/toast'
+import { toast } from '@/components/ui/toast'
 import {
   assignRoleFn,
   unassignRoleFn,
@@ -15,9 +15,9 @@ import {
   DialogFooter,
   DialogHeader,
   DialogTitle,
-} from '@allbluecn/ui/dialog'
-import { Button } from '@allbluecn/ui/button'
-import { Input } from '@allbluecn/ui/input'
+} from '@/components/ui/dialog'
+import { Button } from '@/components/ui/button'
+import { Input } from '@/components/ui/input'
 import {
   Table,
   TableBody,
@@ -25,7 +25,7 @@ import {
   TableHead,
   TableHeader,
   TableRow,
-} from '@allbluecn/ui/table'
+} from '@/components/ui/table'
 import type { AssignmentItem, RoleItem } from './types'
 
 export function AssignDialog({

package/src/components/permissions/create-role-dialog.tsx

@@ -2,7 +2,7 @@ import { useCallback, useEffect, useState } from 'react'
 import type React from 'react'
 import { m } from '@/paraglide/messages.js'
 import { useServerFn } from '@tanstack/react-start'
-import { toast } from '@allbluecn/ui/toast'
+import { toast } from '@/components/ui/toast'
 import { createRoleFn } from '@/server/serverFns/permissions'
 import {
   Dialog,
@@ -11,17 +11,17 @@ import {
   DialogFooter,
   DialogHeader,
   DialogTitle,
-} from '@allbluecn/ui/dialog'
-import { Button } from '@allbluecn/ui/button'
-import { Input } from '@allbluecn/ui/input'
-import { Label } from '@allbluecn/ui/label'
+} from '@/components/ui/dialog'
+import { Button } from '@/components/ui/button'
+import { Input } from '@/components/ui/input'
+import { Label } from '@/components/ui/label'
 import {
   Select,
   SelectContent,
   SelectItem,
   SelectTrigger,
   SelectValue,
-} from '@allbluecn/ui/select'
+} from '@/components/ui/select'
 import { ALL_ACTIONS, ALL_RESOURCES, LEVELS, type ResourcePermission } from './types'
 
 export function CreateRoleDialog({

package/src/components/ui/alert-dialog.tsx

@@ -0,0 +1,185 @@
+import * as React from "react"
+import { AlertDialog as AlertDialogPrimitive } from "@base-ui/react/alert-dialog"
+import { cn } from "cn"
+
+import { Button } from "./button"
+
+function AlertDialog({ ...props }: AlertDialogPrimitive.Root.Props) {
+  return <AlertDialogPrimitive.Root data-slot="alert-dialog" {...props} />
+}
+
+function AlertDialogTrigger({ ...props }: AlertDialogPrimitive.Trigger.Props) {
+  return (
+    <AlertDialogPrimitive.Trigger data-slot="alert-dialog-trigger" {...props} />
+  )
+}
+
+function AlertDialogPortal({ ...props }: AlertDialogPrimitive.Portal.Props) {
+  return (
+    <AlertDialogPrimitive.Portal data-slot="alert-dialog-portal" {...props} />
+  )
+}
+
+function AlertDialogOverlay({
+  className,
+  ...props
+}: AlertDialogPrimitive.Backdrop.Props) {
+  return (
+    <AlertDialogPrimitive.Backdrop
+      data-slot="alert-dialog-overlay"
+      className={cn(
+        "fixed inset-0 isolate z-50 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogContent({
+  className,
+  size = "default",
+  ...props
+}: AlertDialogPrimitive.Popup.Props & {
+  size?: "default" | "sm"
+}) {
+  return (
+    <AlertDialogPortal>
+      <AlertDialogOverlay />
+      <AlertDialogPrimitive.Popup
+        data-slot="alert-dialog-content"
+        data-size={size}
+        className={cn(
+          "group/alert-dialog-content fixed top-1/2 left-1/2 z-50 grid w-full -translate-x-1/2 -translate-y-1/2 gap-6 rounded-xl bg-popover p-6 text-popover-foreground ring-1 ring-foreground/10 duration-100 outline-none data-[size=default]:max-w-xs data-[size=sm]:max-w-xs data-[size=default]:sm:max-w-lg data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
+          className
+        )}
+        {...props}
+      />
+    </AlertDialogPortal>
+  )
+}
+
+function AlertDialogHeader({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-dialog-header"
+      className={cn(
+        "grid grid-rows-[auto_1fr] place-items-center gap-1.5 text-center has-data-[slot=alert-dialog-media]:grid-rows-[auto_auto_1fr] has-data-[slot=alert-dialog-media]:gap-x-6 sm:group-data-[size=default]/alert-dialog-content:place-items-start sm:group-data-[size=default]/alert-dialog-content:text-left sm:group-data-[size=default]/alert-dialog-content:has-data-[slot=alert-dialog-media]:grid-rows-[auto_1fr]",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogFooter({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-dialog-footer"
+      className={cn(
+        "flex flex-col-reverse gap-2 group-data-[size=sm]/alert-dialog-content:grid group-data-[size=sm]/alert-dialog-content:grid-cols-2 sm:flex-row sm:justify-end",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogMedia({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-dialog-media"
+      className={cn(
+        "mb-2 inline-flex size-16 items-center justify-center rounded-md bg-muted sm:group-data-[size=default]/alert-dialog-content:row-span-2 *:[svg:not([class*='size-'])]:size-8",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogTitle({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Title>) {
+  return (
+    <AlertDialogPrimitive.Title
+      data-slot="alert-dialog-title"
+      className={cn(
+        "font-heading text-lg font-medium sm:group-data-[size=default]/alert-dialog-content:group-has-data-[slot=alert-dialog-media]/alert-dialog-content:col-start-2",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogDescription({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Description>) {
+  return (
+    <AlertDialogPrimitive.Description
+      data-slot="alert-dialog-description"
+      className={cn(
+        "text-sm text-balance text-muted-foreground md:text-pretty *:[a]:underline *:[a]:underline-offset-3 *:[a]:hover:text-foreground",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogAction({
+  className,
+  ...props
+}: React.ComponentProps<typeof Button>) {
+  return (
+    <Button
+      data-slot="alert-dialog-action"
+      className={cn(className)}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogCancel({
+  className,
+  variant = "outline",
+  size = "default",
+  ...props
+}: AlertDialogPrimitive.Close.Props &
+  Pick<React.ComponentProps<typeof Button>, "variant" | "size">) {
+  return (
+    <AlertDialogPrimitive.Close
+      data-slot="alert-dialog-cancel"
+      className={cn(className)}
+      render={<Button variant={variant} size={size} />}
+      {...props}
+    />
+  )
+}
+
+export {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogMedia,
+  AlertDialogOverlay,
+  AlertDialogPortal,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+}

package/src/components/ui/alert.tsx

@@ -0,0 +1,75 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+import { cn } from "cn"
+
+const alertVariants = cva(
+  "group/alert relative grid w-full gap-0.5 rounded-lg border px-4 py-3 text-left text-sm has-data-[slot=alert-action]:relative has-data-[slot=alert-action]:pr-18 has-[>svg]:grid-cols-[auto_1fr] has-[>svg]:gap-x-2.5 *:[svg]:row-span-2 *:[svg]:translate-y-0.5 *:[svg]:text-current *:[svg:not([class*='size-'])]:size-4",
+  {
+    variants: {
+      variant: {
+        default: "bg-card text-card-foreground",
+        destructive:
+          "bg-card text-destructive *:data-[slot=alert-description]:text-destructive/90 *:[svg]:text-current",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+function Alert({
+  className,
+  variant,
+  ...props
+}: React.ComponentProps<"div"> & VariantProps<typeof alertVariants>) {
+  return (
+    <div
+      data-slot="alert"
+      role="alert"
+      className={cn(alertVariants({ variant }), className)}
+      {...props}
+    />
+  )
+}
+
+function AlertTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-title"
+      className={cn(
+        "font-medium group-has-[>svg]/alert:col-start-2 [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AlertDescription({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-description"
+      className={cn(
+        "text-sm text-balance text-muted-foreground md:text-pretty [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground [&_p:not(:last-child)]:mb-4",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AlertAction({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-action"
+      className={cn("absolute top-2.5 right-3", className)}
+      {...props}
+    />
+  )
+}
+
+export { Alert, AlertTitle, AlertDescription, AlertAction }

package/src/components/ui/avatar.tsx

@@ -0,0 +1,106 @@
+import * as React from "react"
+import { Avatar as AvatarPrimitive } from "@base-ui/react/avatar"
+import { cn } from "cn"
+
+function Avatar({
+  className,
+  size = "default",
+  ...props
+}: AvatarPrimitive.Root.Props & {
+  size?: "default" | "sm" | "lg"
+}) {
+  return (
+    <AvatarPrimitive.Root
+      data-slot="avatar"
+      data-size={size}
+      className={cn(
+        "group/avatar relative flex size-8 shrink-0 rounded-full select-none after:absolute after:inset-0 after:rounded-full after:border after:border-border after:mix-blend-darken data-[size=lg]:size-10 data-[size=sm]:size-6 dark:after:mix-blend-lighten",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AvatarImage({ className, ...props }: AvatarPrimitive.Image.Props) {
+  return (
+    <AvatarPrimitive.Image
+      data-slot="avatar-image"
+      className={cn(
+        "aspect-square size-full rounded-full object-cover",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AvatarFallback({
+  className,
+  ...props
+}: AvatarPrimitive.Fallback.Props) {
+  return (
+    <AvatarPrimitive.Fallback
+      data-slot="avatar-fallback"
+      className={cn(
+        "flex size-full items-center justify-center rounded-full bg-muted text-sm text-muted-foreground group-data-[size=sm]/avatar:text-xs",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AvatarBadge({ className, ...props }: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="avatar-badge"
+      className={cn(
+        "absolute right-0 bottom-0 z-10 inline-flex items-center justify-center rounded-full bg-primary text-primary-foreground bg-blend-color ring-2 ring-background select-none",
+        "group-data-[size=sm]/avatar:size-2 group-data-[size=sm]/avatar:[&>svg]:hidden",
+        "group-data-[size=default]/avatar:size-2.5 group-data-[size=default]/avatar:[&>svg]:size-2",
+        "group-data-[size=lg]/avatar:size-3 group-data-[size=lg]/avatar:[&>svg]:size-2",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AvatarGroup({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="avatar-group"
+      className={cn(
+        "group/avatar-group flex -space-x-2 *:data-[slot=avatar]:ring-2 *:data-[slot=avatar]:ring-background",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AvatarGroupCount({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="avatar-group-count"
+      className={cn(
+        "relative flex size-8 shrink-0 items-center justify-center rounded-full bg-muted text-sm text-muted-foreground ring-2 ring-background group-has-data-[size=lg]/avatar-group:size-10 group-has-data-[size=sm]/avatar-group:size-6 [&>svg]:size-4 group-has-data-[size=lg]/avatar-group:[&>svg]:size-5 group-has-data-[size=sm]/avatar-group:[&>svg]:size-3",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  Avatar,
+  AvatarImage,
+  AvatarFallback,
+  AvatarGroup,
+  AvatarGroupCount,
+  AvatarBadge,
+}