@allbluecn/web-app 0.3.0

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

@@ -0,0 +1,188 @@
+// 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 {
+  BadgeCheck,
+  PartyPopper,
+  ChevronsUpDown,
+  LogIn,
+  LogOut,
+  Settings,
+} from "lucide-react";
+import { logoutRemoteFn } from '@/server/serverFns/auth/session'
+import { toast } from 'sonner'
+
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import {
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  useSidebar,
+} from "@/components/ui/sidebar";
+import { signOut, useSession } from "@/lib/auth/auth-client";
+import { useRouter, useMatches } from "@tanstack/react-router";
+import { useTranslation } from "react-i18next";
+import { useQueryClient } from "@tanstack/react-query";
+import { UserAvatar } from "@allbluecn/ui";
+import type { AvatarConfig, ShapeType } from "@allbluecn/shared";
+import { SparklesText } from "@/components/magicui/sparkles-text";
+
+export function UserMenu() {
+  const { t } = useTranslation('common');
+  const { isMobile } = useSidebar();
+  const { data: clientSession } = useSession();
+  const queryClient = useQueryClient();
+  const router = useRouter();
+  const matches = useMatches();
+
+  const navMatch = matches.find((m) => m.routeId === '/_nav');
+  const contextSession = navMatch?.context?.session as { user?: { id?: string; email?: string; name?: string | null; role?: string; image?: string | null; avatarConfig?: AvatarConfig; bgShape?: ShapeType; bgColor?: string } } | null;
+  const session = clientSession || contextSession;
+
+  const user = session?.user;
+  const userName = user?.name || user?.email || t('sidebar.userMenu.title');
+  const userEmail = user?.email || "";
+  const userRole = (user as { role?: string })?.role;
+  const isAdmin = userRole === "ADMIN" || userRole === "SUPER_ADMIN";
+  const avatarConfig = (user as { avatarConfig?: AvatarConfig })?.avatarConfig;
+  const bgShape = (user as { bgShape?: string })?.bgShape as ShapeType | undefined;
+  const bgColor = (user as { bgColor?: string })?.bgColor;
+  const userImage = user?.image;
+  const isGuest = (user as { isGuest?: boolean })?.isGuest === true;
+  const isLocalGuest = isGuest && user?.id === 'local-guest';
+
+  const handleSignOut = async () => {
+    if (isLocalGuest) {
+      await logoutRemoteFn();
+      toast.success(t('sidebar.userMenu.logoutToGuest'));
+      queryClient.resetQueries({ queryKey: ['session'] });
+      queryClient.resetQueries({ queryKey: ['effective-plan'] });
+      window.location.reload();
+      return;
+    }
+    await signOut();
+    queryClient.resetQueries({ queryKey: ['session'] });
+    await router.navigate({ to: "/login" });
+  };
+
+  const handleEnterAdmin = () => {
+    window.open("http://localhost:3001/login", "_blank");
+  };
+
+  const handleLocalLogin = () => {
+    window.location.href = '/login?desktop_redirect=true';
+  };
+
+  return (
+    <SidebarMenu>
+      <SidebarMenuItem className="rounded-lg bg-sidebar-accent/50">
+        <DropdownMenu >
+          <DropdownMenuTrigger asChild>
+            <SidebarMenuButton size="lg" className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground">
+              <UserAvatar
+                avatarConfig={avatarConfig}
+                bgShape={bgShape}
+                bgColor={bgColor}
+                name={userName}
+                imageUrl={userImage}
+                size="md"
+              />
+              <div className="grid flex-1 text-left text-sm leading-tight">
+                <span className="truncate font-medium">{userName}</span>
+                <span className="truncate text-xs">{userEmail}</span>
+              </div>
+              <ChevronsUpDown className="ml-auto size-4" />
+            </SidebarMenuButton>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent
+            className="w-(--radix-dropdown-menu-trigger-width) min-w-56 rounded-lg border"
+            side={isMobile ? "bottom" : "right"}
+            align="end"
+            sideOffset={4}
+          >
+            <DropdownMenuGroup >
+              <DropdownMenuLabel className="p-0 font-normal">
+                <div className="flex items-center gap-2 px-1 py-1.5 text-left text-sm">
+                  <UserAvatar
+                    avatarConfig={avatarConfig}
+                    bgShape={bgShape}
+                    bgColor={bgColor}
+                    name={userName}
+                    imageUrl={userImage}
+                    size="md"
+                  />
+                  <div className="grid flex-1 text-left text-sm leading-tight">
+                    <span className="truncate font-medium">{userName}</span>
+                    <span className="truncate text-xs">{userEmail}</span>
+                  </div>
+                </div>
+              </DropdownMenuLabel>
+            </DropdownMenuGroup>
+            <DropdownMenuSeparator />
+            <DropdownMenuGroup className="space-y-1">
+              <DropdownMenuItem>
+                <PartyPopper strokeWidth={2.5} />
+                  <SparklesText sparklesCount={5} className=" flex gap-2 text-sm font-medium">
+                  {t('sidebar.userMenu.upgradePro')}
+                </SparklesText>
+              </DropdownMenuItem>
+              <DropdownMenuSeparator />
+              {isLocalGuest && (
+                <DropdownMenuItem onClick={handleLocalLogin}>
+                  <LogIn />
+                  {t('sidebar.userMenu.loginSaaS')}
+                </DropdownMenuItem>
+              )}
+              <DropdownMenuItem onClick={async () => { await router.navigate({ to: "/settings" }) }}>
+                <Settings />
+                {t('sidebar.userMenu.settings')}
+              </DropdownMenuItem>
+              <DropdownMenuItem onClick={async () => { await router.navigate({ to: "/settings/account" }) }}>
+                <BadgeCheck />
+                {t('sidebar.userMenu.profile')}
+              </DropdownMenuItem>
+
+
+
+              {isAdmin && (
+                <DropdownMenuItem onClick={handleEnterAdmin}>
+                  <LogIn />
+                  {t('sidebar.userMenu.admin')}
+                </DropdownMenuItem>
+              )}
+
+            </DropdownMenuGroup>
+            <DropdownMenuSeparator />
+            <DropdownMenuItem onClick={handleSignOut}>
+              <LogOut />
+              {t('sidebar.userMenu.logout')}
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </SidebarMenuItem>
+    </SidebarMenu>
+  );
+}

package/src/components/magicui/animated-gradient-text.tsx

@@ -0,0 +1,54 @@
+// 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 { type ComponentPropsWithoutRef } from "react"
+
+import { cn } from "@/lib/utils"
+
+export interface AnimatedGradientTextProps extends ComponentPropsWithoutRef<"div"> {
+  speed?: number
+  colorFrom?: string
+  colorTo?: string
+}
+
+export function AnimatedGradientText({
+  children,
+  className,
+  speed = 1,
+  colorFrom = "#ffaa40",
+  colorTo = "#9c40ff",
+  ...props
+}: AnimatedGradientTextProps) {
+  return (
+    <span
+      style={
+        {
+          "--bg-size": `${speed * 300}%`,
+          "--color-from": colorFrom,
+          "--color-to": colorTo,
+        } as React.CSSProperties
+      }
+      className={cn(
+        `animate-gradient inline bg-linear-to-r from-(--color-from) via-(--color-to) to-(--color-from) bg-size-[var(--bg-size)_100%] bg-clip-text text-transparent`,
+        className
+      )}
+      {...props}
+    >
+      {children}
+    </span>
+  )
+}

package/src/components/magicui/animated-grid-pattern.tsx

@@ -0,0 +1,192 @@
+// 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 {
+  useCallback,
+  useEffect,
+  useId,
+  useRef,
+  useState,
+  type ComponentPropsWithoutRef,
+} from "react"
+import { m } from "motion/react"
+
+import { cn } from "@/lib/utils"
+
+export interface AnimatedGridPatternProps extends ComponentPropsWithoutRef<"svg"> {
+  width?: number
+  height?: number
+  x?: number
+  y?: number
+  strokeDasharray?: number
+  numSquares?: number
+  maxOpacity?: number
+  duration?: number
+  repeatDelay?: number
+}
+
+type Square = {
+  id: number
+  pos: [number, number]
+  iteration: number
+}
+
+export function AnimatedGridPattern({
+  width = 40,
+  height = 40,
+  x = -1,
+  y = -1,
+  strokeDasharray = 0,
+  numSquares = 50,
+  className,
+  maxOpacity = 0.5,
+  duration = 4,
+  repeatDelay = 0.5,
+  ...props
+}: AnimatedGridPatternProps) {
+  const id = useId()
+  const containerRef = useRef<SVGSVGElement | null>(null)
+  const [dimensions, setDimensions] = useState({ width: 0, height: 0 })
+  const [squares, setSquares] = useState<Array<Square>>([])
+
+  const getPos = useCallback((): [number, number] => {
+    return [
+      Math.floor((Math.random() * dimensions.width) / width),
+      Math.floor((Math.random() * dimensions.height) / height),
+    ]
+  }, [dimensions.height, dimensions.width, height, width])
+
+  const generateSquares = useCallback(
+    (count: number) => {
+      return Array.from({ length: count }, (_, i) => ({
+        id: i,
+        pos: getPos(),
+        iteration: 0,
+      }))
+    },
+    [getPos]
+  )
+
+  const updateSquarePosition = useCallback(
+    (squareId: number) => {
+      setSquares((currentSquares) => {
+        const current = currentSquares[squareId]
+        if (!current || current.id !== squareId) return currentSquares
+
+        const nextSquares = currentSquares.slice()
+        nextSquares[squareId] = {
+          ...current,
+          pos: getPos(),
+          iteration: current.iteration + 1,
+        }
+
+        return nextSquares
+      })
+    },
+    [getPos]
+  )
+
+  useEffect(() => {
+    if (dimensions.width && dimensions.height) {
+      setSquares(generateSquares(numSquares))
+    }
+  }, [dimensions.width, dimensions.height, generateSquares, numSquares])
+
+  useEffect(() => {
+    const element = containerRef.current
+    let resizeObserver: ResizeObserver | null = null
+
+    if (element) {
+      resizeObserver = new ResizeObserver((entries) => {
+        for (const entry of entries) {
+          setDimensions((currentDimensions) => {
+            const nextWidth = entry.contentRect.width
+            const nextHeight = entry.contentRect.height
+            if (
+              currentDimensions.width === nextWidth &&
+              currentDimensions.height === nextHeight
+            ) {
+              return currentDimensions
+            }
+            return { width: nextWidth, height: nextHeight }
+          })
+        }
+      })
+
+      resizeObserver.observe(element)
+    }
+
+    return () => {
+      if (resizeObserver) {
+        resizeObserver.disconnect()
+      }
+    }
+  }, [])
+
+  return (
+    <svg
+      ref={containerRef}
+      aria-hidden="true"
+      className={cn(
+        "pointer-events-none absolute inset-0 h-full w-full fill-gray-400/30 stroke-gray-400/30",
+        className
+      )}
+      {...props}
+    >
+      <defs>
+        <pattern
+          id={id}
+          width={width}
+          height={height}
+          patternUnits="userSpaceOnUse"
+          x={x}
+          y={y}
+        >
+          <path
+            d={`M.5 ${height}V.5H${width}`}
+            fill="none"
+            strokeDasharray={strokeDasharray}
+          />
+        </pattern>
+      </defs>
+      <rect width="100%" height="100%" fill={`url(#${id})`} />
+      <svg x={x} y={y} className="overflow-visible">
+        {squares.map(({ pos: [squareX, squareY], id, iteration }, index) => (
+          <m.rect
+            initial={{ opacity: 0 }}
+            animate={{ opacity: maxOpacity }}
+            transition={{
+              duration,
+              repeat: 1,
+              delay: index * 0.1,
+              repeatType: "reverse",
+              repeatDelay,
+            }}
+            onAnimationComplete={() => updateSquarePosition(id)}
+            key={`${id}-${iteration}`}
+            width={width - 1}
+            height={height - 1}
+            x={squareX * width + 1}
+            y={squareY * height + 1}
+            fill="currentColor"
+            strokeWidth="0"
+          />
+        ))}
+      </svg>
+    </svg>
+  )
+}

package/src/components/magicui/animated-theme-toggler.tsx

@@ -0,0 +1 @@
+export * from '@allbluecn/ui/animated-theme-toggler'

package/src/components/magicui/aurora-text.tsx

@@ -0,0 +1,58 @@
+// 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, { memo } from "react"
+
+interface AuroraTextProps {
+  children: React.ReactNode
+  className?: string
+  colors?: string[]
+  speed?: number
+}
+
+export const AuroraText = memo(
+  ({
+    children,
+    className = "",
+    colors = ["#FF0080", "#7928CA", "#0070F3", "#38bdf8"],
+    speed = 1,
+  }: AuroraTextProps) => {
+    const gradientStyle = {
+      backgroundImage: `linear-gradient(135deg, ${colors.join(", ")}, ${
+        colors[0]
+      })`,
+      WebkitBackgroundClip: "text",
+      WebkitTextFillColor: "transparent",
+      animationDuration: `${10 / speed}s`,
+    }
+
+    return (
+      <span className={`relative inline-block ${className}`}>
+        <span className="sr-only">{children}</span>
+        <span
+          className="animate-aurora relative bg-size-[200%_auto] bg-clip-text text-transparent"
+          style={gradientStyle}
+          aria-hidden="true"
+        >
+          {children}
+        </span>
+      </span>
+    )
+  }
+)
+
+AuroraText.displayName = "AuroraText"

package/src/components/magicui/components/animate/avatar-group.tsx

@@ -0,0 +1,85 @@
+// 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 * as React from 'react';
+import { m } from 'motion/react';
+
+
+import {
+  AvatarGroup as AvatarGroupPrimitive,
+  AvatarGroupTooltip as AvatarGroupTooltipPrimitive,
+  AvatarGroupTooltipArrow as AvatarGroupTooltipArrowPrimitive,
+  type AvatarGroupProps as AvatarGroupPropsPrimitive,
+  type AvatarGroupTooltipProps as AvatarGroupTooltipPropsPrimitive,
+} from '@/components/magicui/primitives/animate/avatar-group';
+import { cn } from '@/lib/utils';
+
+type AvatarGroupProps = AvatarGroupPropsPrimitive;
+
+function AvatarGroup({
+  className,
+  invertOverlap = true,
+  ...props
+}: AvatarGroupProps) {
+  return (
+    <AvatarGroupPrimitive
+      className={cn('h-12 -space-x-3', className)}
+      invertOverlap={invertOverlap}
+      {...props}
+    />
+  );
+}
+
+type AvatarGroupTooltipProps = Omit<
+  AvatarGroupTooltipPropsPrimitive,
+  'asChild'
+> & {
+  children: React.ReactNode;
+  layout?: boolean | 'position' | 'size' | 'preserve-aspect';
+};
+
+function AvatarGroupTooltip({
+  className,
+  children,
+  layout = 'preserve-aspect',
+  ...props
+}: AvatarGroupTooltipProps) {
+  return (
+    <AvatarGroupTooltipPrimitive
+      className={cn(
+        'bg-primary text-primary-foreground z-50 w-fit rounded-md px-3 py-1.5 text-xs text-balance',
+        className,
+      )}
+      {...props}
+    >
+      <m.div layout={layout} className="overflow-hidden">
+        {children}
+      </m.div>
+      <AvatarGroupTooltipArrowPrimitive
+        className="fill-primary size-3 data-[side='bottom']:translate-y-[1px] data-[side='right']:translate-x-[1px] data-[side='left']:translate-x-[-1px] data-[side='top']:translate-y-[-1px]"
+        tipRadius={2}
+      />
+    </AvatarGroupTooltipPrimitive>
+  );
+}
+
+export {
+  AvatarGroup,
+  AvatarGroupTooltip,
+  type AvatarGroupProps,
+  type AvatarGroupTooltipProps,
+};