@allbluecn/ui 0.2.0

package/src/name-confirm-dialog.tsx

@@ -0,0 +1,153 @@
+// 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 } from "react";
+import type { ReactNode } from "react";
+import { toast } from "sonner";
+import { useTranslation } from "react-i18next";
+import { Button } from "./button";
+import { Input } from "./input";
+import { Tooltip, TooltipContent, TooltipTrigger } from "./tooltip";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "./dialog";
+
+interface NameConfirmDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  title: string;
+  description: string;
+  confirmText: string;
+  expectedName: string;
+  onConfirm: () => Promise<void>;
+  children?: ReactNode;
+}
+
+export function NameConfirmDialog({
+  open,
+  onOpenChange,
+  title,
+  description,
+  confirmText,
+  expectedName,
+  onConfirm,
+  children,
+}: NameConfirmDialogProps) {
+  const { t } = useTranslation('common')
+  const [inputValue, setInputValue] = useState("");
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState("");
+
+  const isValid = inputValue.trim() === expectedName;
+
+  const handleConfirm = async () => {
+    if (!isValid) {
+      setError(t('nameConfirm.invalidName'));
+      return;
+    }
+
+    setLoading(true);
+    setError("");
+
+    try {
+      await onConfirm();
+      setInputValue("");
+      onOpenChange(false);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : t('nameConfirm.operationFailed'));
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleOpenChange = (newOpen: boolean) => {
+    if (!newOpen) {
+      setInputValue("");
+      setError("");
+    }
+    onOpenChange(newOpen);
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={handleOpenChange}>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>{title}</DialogTitle>
+          <DialogDescription>{description}</DialogDescription>
+        </DialogHeader>
+
+        <div className="space-y-4 py-4">
+          <div className="space-y-2">
+            <p className="text-sm text-muted-foreground">
+              {t('nameConfirm.inputInstruction')} <Tooltip>
+                <TooltipTrigger asChild>
+                  <button
+                    type="button"
+                    className="inline-flex cursor-pointer items-center font-medium text-foreground hover:text-primary transition-colors"
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      void navigator.clipboard.writeText(expectedName);
+                      toast.success(t('nameConfirm.copied'));
+                    }}
+                  >
+                    {expectedName}
+                  </button>
+                </TooltipTrigger>
+                <TooltipContent side="top" className="text-xs">
+                  {t('nameConfirm.clickToCopy')}
+                </TooltipContent>
+              </Tooltip> {t('nameConfirm.confirmDelete')}
+            </p>
+            <Input
+              value={inputValue}
+              onChange={(e) => {
+                setInputValue(e.target.value);
+                setError("");
+              }}
+              placeholder={t('nameConfirm.inputPlaceholder', { expectedName })}
+            />
+          </div>
+
+          {error && (
+            <p className="text-sm text-destructive">{error}</p>
+          )}
+
+          {children}
+        </div>
+
+        <DialogFooter>
+          <Button variant="outline" onClick={() => handleOpenChange(false)}>
+            {t('nameConfirm.cancel')}
+          </Button>
+          <Button
+            variant="destructive"
+            onClick={handleConfirm}
+            disabled={!isValid || loading}
+          >
+            {loading ? t('nameConfirm.deleting') : confirmText}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}

package/src/nav-float-button.tsx

@@ -0,0 +1,301 @@
+// 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 React, { useRef, useState, useCallback, useEffect } from "react";
+import { useTranslation } from "react-i18next";
+import { Button } from "./button";
+import { Minimize2, ArrowDownToLine } from "lucide-react";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "./tooltip";
+
+type Corner = "top-left" | "top-right" | "bottom-left" | "bottom-right";
+
+interface NavFloatButtonProps {
+  containerRef?: React.RefObject<HTMLDivElement | null>;
+  showExitFullscreen?: boolean;
+  showExpandHeader?: boolean;
+  onExitFullscreen?: () => void;
+  onExpandHeader?: () => void;
+}
+
+const BUTTON_SIZE = 40;
+
+const getCornerRadius = (corner: Corner, mode: "expand" | "exit"): string => {
+  const radius = "14px";
+  const small = "14px";
+
+  if (mode === "expand") {
+    switch (corner) {
+      case "top-left":
+        return `${radius} 0 ${radius} 0`;
+      case "top-right":
+        return `0 ${radius} 0 ${radius}`;
+      case "bottom-left":
+        return `0 ${radius} 0 ${radius}`;
+      case "bottom-right":
+        return `${radius} 0 ${radius} 0`;
+    }
+  } else {
+    switch (corner) {
+      case "top-left":
+        return `0 0 ${small} 0`;
+      case "top-right":
+        return `0 0 0 ${small}`;
+      case "bottom-left":
+        return `0 ${small} 0 0`;
+      case "bottom-right":
+        return `${small} 0 0 0`;
+    }
+  }
+};
+
+const getBorderStyle = (corner: Corner, fullBorder?: boolean) => {
+  if (fullBorder) {
+    return {
+      borderLeftColor: "var(--border)",
+      borderRightColor: "var(--border)",
+      borderTopColor: "var(--border)",
+      borderBottomColor: "var(--border)",
+    };
+  }
+
+  const isLeft = corner === "top-left" || corner === "bottom-left";
+  const isRight = corner === "top-right" || corner === "bottom-right";
+  const isTop = corner === "top-left" || corner === "top-right";
+  const isBottom = corner === "bottom-left" || corner === "bottom-right";
+
+  return {
+    borderLeftColor: isLeft ? "var(--background)" : "var(--border)",
+    borderRightColor: isRight ? "var(--background)" : "var(--border)",
+    borderTopColor: isTop ? "var(--background)" : "var(--border)",
+    borderBottomColor: isBottom ? "var(--background)" : "var(--border)",
+  };
+};
+
+export function NavFloatButton({
+  containerRef: externalContainerRef,
+  showExitFullscreen,
+  showExpandHeader,
+  onExitFullscreen,
+  onExpandHeader,
+}: NavFloatButtonProps) {
+  const { t } = useTranslation('common')
+  const buttonRef = useRef<HTMLDivElement>(null);
+  const containerRef = externalContainerRef as React.RefObject<HTMLDivElement | null> | undefined;
+
+  const [isDragging, setIsDragging] = useState(false);
+  const [corner, setCorner] = useState<Corner>("top-right");
+  const [openTooltip, setOpenTooltip] = useState(false);
+
+  const dragStartRef = useRef({ x: 0, y: 0, offsetX: 0, offsetY: 0 });
+  const isMovedRef = useRef(false);
+  const [position, setPosition] = useState({ x: 0, y: 0 });
+
+  const getInitialPosition = useCallback(() => {
+    const container = containerRef?.current;
+    if (!container) return { x: 0, y: 0 };
+    return { x: container.clientWidth - BUTTON_SIZE + 1, y: -1 };
+  }, []);
+
+  useEffect(() => {
+    if (!showExitFullscreen && !showExpandHeader) return;
+    const container = containerRef?.current;
+    if (!container) return;
+
+    const updatePosition = () => {
+      setPosition(getInitialPosition());
+    };
+
+    updatePosition();
+
+    const ro = new ResizeObserver(updatePosition);
+    ro.observe(container);
+    return () => ro.disconnect();
+  }, [showExitFullscreen, showExpandHeader, getInitialPosition]);
+
+  const handlePointerDown = useCallback((e: React.PointerEvent) => {
+    const btn = buttonRef.current;
+    if (!btn) return;
+
+    e.preventDefault();
+    e.stopPropagation();
+    setOpenTooltip(false);
+
+    btn.setPointerCapture(e.pointerId);
+    setIsDragging(true);
+    isMovedRef.current = false;
+
+    dragStartRef.current = {
+      x: e.clientX,
+      y: e.clientY,
+      offsetX: position.x,
+      offsetY: position.y,
+    };
+
+    document.body.style.cursor = "grabbing";
+    document.body.style.userSelect = "none";
+  }, [position]);
+
+  const handlePointerMove = useCallback((e: React.PointerEvent) => {
+    if (!isDragging) return;
+
+    const container = containerRef?.current;
+    if (!container) return;
+
+    const dx = e.clientX - dragStartRef.current.x;
+    const dy = e.clientY - dragStartRef.current.y;
+
+    if (Math.abs(dx) > 3 || Math.abs(dy) > 3) {
+      isMovedRef.current = true;
+    }
+
+    const maxX = container.clientWidth - BUTTON_SIZE;
+    const maxY = container.clientHeight - BUTTON_SIZE;
+
+    const newX = Math.max(-1, Math.min(maxX + 1, dragStartRef.current.offsetX + dx));
+    const newY = Math.max(-1, Math.min(maxY + 1, dragStartRef.current.offsetY + dy));
+
+    setPosition({ x: newX, y: newY });
+  }, [isDragging]);
+
+  const handlePointerUp = useCallback((e: React.PointerEvent) => {
+    const btn = buttonRef.current;
+    if (!btn || !isDragging) return;
+
+    btn.releasePointerCapture(e.pointerId);
+    setIsDragging(false);
+    document.body.style.cursor = "";
+    document.body.style.userSelect = "";
+
+    if (!isMovedRef.current) {
+      if (showExitFullscreen && onExitFullscreen) {
+        onExitFullscreen();
+      }
+      if (showExpandHeader && onExpandHeader) {
+        onExpandHeader();
+      }
+      return;
+    }
+
+    const container = containerRef?.current;
+    if (!container) return;
+
+    const maxX = container.clientWidth - BUTTON_SIZE;
+    const maxY = container.clientHeight - BUTTON_SIZE;
+
+    const snapPoints = [
+      { x: -1, y: -1, corner: "top-left" as Corner },
+      { x: maxX + 1, y: -1, corner: "top-right" as Corner },
+      { x: -1, y: maxY + 1, corner: "bottom-left" as Corner },
+      { x: maxX + 1, y: maxY + 1, corner: "bottom-right" as Corner },
+    ];
+
+    let nearest = snapPoints[0];
+    let minDist = Infinity;
+
+    for (const sp of snapPoints) {
+      const dist = Math.hypot(position.x - sp.x, position.y - sp.y);
+      if (dist < minDist) {
+        minDist = dist;
+        nearest = sp;
+      }
+    }
+
+    setCorner(nearest.corner);
+    setPosition({ x: nearest.x, y: nearest.y });
+  }, [isDragging, position, showExitFullscreen, showExpandHeader, onExitFullscreen, onExpandHeader]);
+
+  const mode = showExpandHeader && !showExitFullscreen ? "expand" : "exit";
+  const borderStyle = getBorderStyle(corner, isDragging);
+
+  return (
+    <TooltipProvider>
+      <div
+        ref={buttonRef}
+        className="absolute z-50 select-none"
+        style={{
+          left: 0,
+          top: 0,
+          transform: `translate(${position.x}px, ${position.y}px)`,
+          touchAction: "none",
+          cursor: isDragging ? "grabbing" : "grab",
+          transition: isDragging ? "none" : "transform 0.2s ease-out",
+        }}
+        onPointerDown={handlePointerDown}
+        onPointerMove={handlePointerMove}
+        onPointerUp={handlePointerUp}
+        onPointerCancel={handlePointerUp}
+      >
+        <div
+          className="bg-background/95 backdrop-blur flex items-center justify-center"
+          style={{
+            width: BUTTON_SIZE,
+            height: BUTTON_SIZE,
+            borderRadius: isDragging ? "50%" : getCornerRadius(corner, mode),
+            borderWidth: 1,
+            borderStyle: "solid",
+            ...borderStyle,
+            transition: "border-radius 0.2s ease-out, border-color 0.2s ease-out",
+          }}
+        >
+          {showExitFullscreen && (
+            <Tooltip open={openTooltip} onOpenChange={setOpenTooltip} delayDuration={0}>
+              <TooltipTrigger asChild>
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  className="h-8 w-8"
+                  onMouseEnter={() => !isDragging && setOpenTooltip(true)}
+                  onMouseLeave={() => setOpenTooltip(false)}
+                >
+                  <Minimize2 className="h-4 w-4" />
+                </Button>
+              </TooltipTrigger>
+              <TooltipContent side="bottom" className="z-[9999]">
+                <p>{t('navFloat.exitFullscreen')}</p>
+              </TooltipContent>
+            </Tooltip>
+          )}
+
+          {showExpandHeader && (
+            <Tooltip open={openTooltip} onOpenChange={setOpenTooltip} delayDuration={0}>
+              <TooltipTrigger asChild>
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  className="h-8 w-8"
+                  onMouseEnter={() => !isDragging && setOpenTooltip(true)}
+                  onMouseLeave={() => setOpenTooltip(false)}
+                >
+                  <ArrowDownToLine className="h-4 w-4" />
+                </Button>
+              </TooltipTrigger>
+              <TooltipContent side="bottom" className="z-[9999]">
+                <p>{t('navFloat.showHeader')}</p>
+              </TooltipContent>
+            </Tooltip>
+          )}
+        </div>
+      </div>
+    </TooltipProvider>
+  );
+}

package/src/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/>.
+
+"use client"
+
+import { useEffect, useState } from "react"
+import type { AvatarConfig, AvatarPart, ShapeType } from "@allbluecn/shared"
+
+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: svgContent }}
+    />
+  )
+}

package/src/placeholder-page.tsx

@@ -0,0 +1,42 @@
+// 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 { useTranslation } from "react-i18next";
+import type { LucideIcon } from "lucide-react";
+
+type PlaceholderPageProps = {
+  title: string;
+  description?: string;
+  icon: LucideIcon;
+};
+
+export function PlaceholderPage({ title, description, icon: Icon }: PlaceholderPageProps) {
+  const { t } = useTranslation('common')
+  return (
+    <div className="flex h-full min-h-[60vh] items-center justify-center">
+      <div className="flex flex-col items-center gap-4 rounded-xl border bg-card p-12 text-center shadow-sm">
+        <div className="flex size-16 items-center justify-center rounded-full bg-muted">
+          <Icon className="size-8 text-muted-foreground" />
+        </div>
+        <h1 className="text-xl font-semibold">{title}</h1>
+        <p className="text-sm text-muted-foreground">
+          {description ?? t('placeholder.developing')}
+        </p>
+      </div>
+    </div>
+  );
+}