@allbluecn/web-app 0.3.0

package/src/components/animated-icons/user.tsx

@@ -0,0 +1,136 @@
+// 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 type { Variants } from "motion/react";
+import { m, useAnimation } from "motion/react";
+import type { HTMLAttributes } from "react";
+import { forwardRef, useCallback, useImperativeHandle, useRef } from "react";
+
+import { cn } from "@/lib/utils";
+
+export interface UserIconHandle {
+  startAnimation: () => void;
+  stopAnimation: () => void;
+}
+
+interface UserIconProps extends HTMLAttributes<HTMLDivElement> {
+  size?: number;
+}
+
+const PATH_VARIANT: Variants = {
+  normal: { pathLength: 1, opacity: 1, pathOffset: 0 },
+  animate: {
+    pathLength: [0, 1],
+    opacity: [0, 1],
+    pathOffset: [1, 0],
+  },
+};
+
+const CIRCLE_VARIANT: Variants = {
+  normal: {
+    pathLength: 1,
+    pathOffset: 0,
+    scale: 1,
+  },
+  animate: {
+    pathLength: [0, 1],
+    pathOffset: [1, 0],
+    scale: [0.5, 1],
+  },
+};
+
+const UserIcon = forwardRef<UserIconHandle, UserIconProps>(
+  ({ onMouseEnter, onMouseLeave, className, size = 28, ...props }, ref) => {
+    const controls = useAnimation();
+    const isControlledRef = useRef(false);
+
+    useImperativeHandle(ref, () => {
+      isControlledRef.current = true;
+
+      return {
+        startAnimation: () => controls.start("animate"),
+        stopAnimation: () => controls.start("normal"),
+      };
+    });
+
+    const handleMouseEnter = useCallback(
+      (e: React.MouseEvent<HTMLDivElement>) => {
+        if (isControlledRef.current) {
+          onMouseEnter?.(e);
+        } else {
+          controls.start("animate");
+        }
+      },
+      [controls, onMouseEnter]
+    );
+
+    const handleMouseLeave = useCallback(
+      (e: React.MouseEvent<HTMLDivElement>) => {
+        if (isControlledRef.current) {
+          onMouseLeave?.(e);
+        } else {
+          controls.start("normal");
+        }
+      },
+      [controls, onMouseLeave]
+    );
+    return (
+      <div
+        className={cn(className)}
+        onMouseEnter={handleMouseEnter}
+        onMouseLeave={handleMouseLeave}
+        {...props}
+      >
+        <svg
+          fill="none"
+          height={size}
+          stroke="currentColor"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth="2"
+          viewBox="0 0 24 24"
+          width={size}
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <m.circle
+            animate={controls}
+            cx="12"
+            cy="8"
+            r="5"
+            variants={CIRCLE_VARIANT}
+          />
+
+          <m.path
+            animate={controls}
+            d="M20 21a8 8 0 0 0-16 0"
+            transition={{
+              delay: 0.2,
+              duration: 0.4,
+            }}
+            variants={PATH_VARIANT}
+          />
+        </svg>
+      </div>
+    );
+  }
+);
+
+UserIcon.displayName = "UserIcon";
+
+export { UserIcon };

package/src/components/animated-icons/users.tsx

@@ -0,0 +1,130 @@
+// 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 type { Variants } from "motion/react";
+import { m, useAnimation } from "motion/react";
+import type { HTMLAttributes } from "react";
+import { forwardRef, useCallback, useImperativeHandle, useRef } from "react";
+
+import { cn } from "@/lib/utils";
+
+export interface UsersIconHandle {
+  startAnimation: () => void;
+  stopAnimation: () => void;
+}
+
+interface UsersIconProps extends HTMLAttributes<HTMLDivElement> {
+  size?: number;
+}
+
+const PATH_VARIANTS: Variants = {
+  normal: {
+    translateX: 0,
+    transition: {
+      type: "spring",
+      stiffness: 200,
+      damping: 13,
+    },
+  },
+  animate: {
+    translateX: [-6, 0],
+    transition: {
+      delay: 0.1,
+      type: "spring",
+      stiffness: 200,
+      damping: 13,
+    },
+  },
+};
+
+const UsersIcon = forwardRef<UsersIconHandle, UsersIconProps>(
+  ({ onMouseEnter, onMouseLeave, className, size = 28, ...props }, ref) => {
+    const controls = useAnimation();
+    const isControlledRef = useRef(false);
+
+    useImperativeHandle(ref, () => {
+      isControlledRef.current = true;
+
+      return {
+        startAnimation: () => controls.start("animate"),
+        stopAnimation: () => controls.start("normal"),
+      };
+    });
+
+    const handleMouseEnter = useCallback(
+      (e: React.MouseEvent<HTMLDivElement>) => {
+        if (isControlledRef.current) {
+          onMouseEnter?.(e);
+        } else {
+          controls.start("animate");
+        }
+      },
+      [controls, onMouseEnter]
+    );
+
+    const handleMouseLeave = useCallback(
+      (e: React.MouseEvent<HTMLDivElement>) => {
+        if (isControlledRef.current) {
+          onMouseLeave?.(e);
+        } else {
+          controls.start("normal");
+        }
+      },
+      [controls, onMouseLeave]
+    );
+
+    return (
+      <div
+        className={cn(className)}
+        onMouseEnter={handleMouseEnter}
+        onMouseLeave={handleMouseLeave}
+        {...props}
+      >
+        <svg
+          fill="none"
+          height={size}
+          stroke="currentColor"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth="2"
+          viewBox="0 0 24 24"
+          width={size}
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2" />
+          <circle cx="9" cy="7" r="4" />
+          <m.path
+            animate={controls}
+            d="M22 21v-2a4 4 0 0 0-3-3.87"
+            variants={PATH_VARIANTS}
+          />
+          <m.path
+            animate={controls}
+            d="M16 3.13a4 4 0 0 1 0 7.75"
+            variants={PATH_VARIANTS}
+          />
+        </svg>
+      </div>
+    );
+  }
+);
+
+UsersIcon.displayName = "UsersIcon";
+
+export { UsersIcon };

package/src/components/animated-icons/workflow.tsx

@@ -0,0 +1,144 @@
+// 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 type { Transition, Variants } from "motion/react";
+import { m, useAnimation } from "motion/react";
+import type { HTMLAttributes } from "react";
+import { forwardRef, useCallback, useImperativeHandle, useRef } from "react";
+
+import { cn } from "@/lib/utils";
+
+export interface WorkflowIconHandle {
+  startAnimation: () => void;
+  stopAnimation: () => void;
+}
+
+interface WorkflowIconProps extends HTMLAttributes<HTMLDivElement> {
+  size?: number;
+}
+
+const TRANSITION: Transition = {
+  duration: 0.3,
+  opacity: { delay: 0.15 },
+};
+
+const VARIANTS: Variants = {
+  normal: {
+    pathLength: 1,
+    opacity: 1,
+  },
+  animate: (custom: number) => ({
+    pathLength: [0, 1],
+    opacity: [0, 1],
+    transition: {
+      ...TRANSITION,
+      delay: 0.1 * custom,
+    },
+  }),
+};
+
+const WorkflowIcon = forwardRef<WorkflowIconHandle, WorkflowIconProps>(
+  ({ onMouseEnter, onMouseLeave, className, size = 28, ...props }, ref) => {
+    const controls = useAnimation();
+    const isControlledRef = useRef(false);
+
+    useImperativeHandle(ref, () => {
+      isControlledRef.current = true;
+
+      return {
+        startAnimation: () => controls.start("animate"),
+        stopAnimation: () => controls.start("normal"),
+      };
+    });
+
+    const handleMouseEnter = useCallback(
+      (e: React.MouseEvent<HTMLDivElement>) => {
+        if (isControlledRef.current) {
+          onMouseEnter?.(e);
+        } else {
+          controls.start("animate");
+        }
+      },
+      [controls, onMouseEnter]
+    );
+
+    const handleMouseLeave = useCallback(
+      (e: React.MouseEvent<HTMLDivElement>) => {
+        if (isControlledRef.current) {
+          onMouseLeave?.(e);
+        } else {
+          controls.start("normal");
+        }
+      },
+      [controls, onMouseLeave]
+    );
+
+    return (
+      <div
+        className={cn(className)}
+        onMouseEnter={handleMouseEnter}
+        onMouseLeave={handleMouseLeave}
+        {...props}
+      >
+        <svg
+          fill="none"
+          height={size}
+          stroke="currentColor"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth="2"
+          viewBox="0 0 24 24"
+          width={size}
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <m.rect
+            animate={controls}
+            custom={0}
+            height="8"
+            rx="2"
+            variants={VARIANTS}
+            width="8"
+            x="3"
+            y="3"
+          />
+          <m.path
+            animate={controls}
+            custom={3}
+            d="M7 11v4a2 2 0 0 0 2 2h4"
+            variants={VARIANTS}
+          />
+          <m.rect
+            animate={controls}
+            custom={0}
+            height="8"
+            rx="2"
+            variants={VARIANTS}
+            width="8"
+            x="13"
+            y="13"
+          />
+        </svg>
+      </div>
+    );
+  }
+);
+
+WorkflowIcon.displayName = "WorkflowIcon";
+
+export { WorkflowIcon };

package/src/components/animated-icons/zap.tsx

@@ -0,0 +1,122 @@
+// 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 type { Variants } from "motion/react";
+import { m, useAnimation } from "motion/react";
+import type { HTMLAttributes } from "react";
+import { forwardRef, useCallback, useImperativeHandle, useRef } from "react";
+
+import { cn } from "@/lib/utils";
+
+export interface ZapHandle {
+  startAnimation: () => void;
+  stopAnimation: () => void;
+}
+
+interface ZapProps extends HTMLAttributes<HTMLDivElement> {
+  size?: number;
+}
+
+const PATH_VARIANTS: Variants = {
+  normal: {
+    opacity: 1,
+    pathLength: 1,
+    transition: {
+      duration: 0.6,
+      opacity: { duration: 0.1 },
+    },
+  },
+  animate: {
+    opacity: [0, 1],
+    pathLength: [0, 1],
+    transition: {
+      duration: 0.6,
+      opacity: { duration: 0.1 },
+    },
+  },
+};
+
+const ZapIcon = forwardRef<ZapHandle, ZapProps>(
+  ({ onMouseEnter, onMouseLeave, className, size = 28, ...props }, ref) => {
+    const controls = useAnimation();
+    const isControlledRef = useRef(false);
+
+    useImperativeHandle(ref, () => {
+      isControlledRef.current = true;
+
+      return {
+        startAnimation: () => controls.start("animate"),
+        stopAnimation: () => controls.start("normal"),
+      };
+    });
+
+    const handleMouseEnter = useCallback(
+      (e: React.MouseEvent<HTMLDivElement>) => {
+        if (isControlledRef.current) {
+          onMouseEnter?.(e);
+        } else {
+          controls.start("animate");
+        }
+      },
+      [controls, onMouseEnter]
+    );
+
+    const handleMouseLeave = useCallback(
+      (e: React.MouseEvent<HTMLDivElement>) => {
+        if (isControlledRef.current) {
+          onMouseLeave?.(e);
+        } else {
+          controls.start("normal");
+        }
+      },
+      [controls, onMouseLeave]
+    );
+
+    return (
+      <div
+        className={cn(className)}
+        onMouseEnter={handleMouseEnter}
+        onMouseLeave={handleMouseLeave}
+        {...props}
+      >
+        <svg
+          fill="none"
+          height={size}
+          stroke="currentColor"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth="2"
+          viewBox="0 0 24 24"
+          width={size}
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <m.path
+            animate={controls}
+            d="M4 14a1 1 0 0 1-.78-1.63l9.9-10.2a.5.5 0 0 1 .86.46l-1.92 6.02A1 1 0 0 0 13 10h7a1 1 0 0 1 .78 1.63l-9.9 10.2a.5.5 0 0 1-.86-.46l1.92-6.02A1 1 0 0 0 11 14z"
+            variants={PATH_VARIANTS}
+          />
+        </svg>
+      </div>
+    );
+  }
+);
+
+ZapIcon.displayName = "ZapIcon";
+
+export { ZapIcon };

package/src/components/anyhub/anyhub-app-card.tsx

@@ -0,0 +1,154 @@
+// 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 { useRouter } from "@tanstack/react-router"
+import { useTranslation } from "react-i18next"
+import {
+  Card,
+  CardContent,
+} from "@/components/ui/card"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu"
+import { Button } from "@/components/ui/button"
+import { Badge } from "@/components/ui/badge"
+import { MoreVertical, Pin, PinOff, Trash2, RefreshCw, Settings } from "lucide-react"
+import { toast } from '@/components/ui/sonner'
+import { useAnyHubStore, anyHubActions } from "@/lib/anyhub/anyhub-store"
+import type { AnyHubAppData } from "@/lib/anyhub/types"
+import { AnyHubPermissionPanel } from "./anyhub-permission-panel"
+
+interface AnyHubAppCardProps {
+  app: AnyHubAppData
+}
+
+export function AnyHubAppCard({ app }: AnyHubAppCardProps) {
+  const router = useRouter()
+  const { t } = useTranslation("apps")
+  const togglePin = anyHubActions.togglePin
+  const uninstallApp = anyHubActions.uninstallApp
+  const [showPermissions, setShowPermissions] = useState(false)
+
+  const statusColor =
+    app.status === "ready"
+      ? "bg-green-500"
+      : app.status === "error"
+        ? "bg-red-500"
+        : "bg-yellow-500"
+
+  return (
+    <>
+      <Card className="group cursor-pointer transition-shadow hover:shadow-md" onClick={async () => { await router.navigate({ to: `/apps/anyhub/${app.id}` }) }}>
+        <CardContent className="flex items-start gap-3 p-4">
+          <div className="flex size-10 shrink-0 items-center justify-center rounded-lg bg-muted">
+            {app.iconUrl ? (
+              <img src={app.iconUrl} alt={app.displayName} className="size-6" />
+            ) : (
+              <div className="size-6 rounded bg-primary/10" />
+            )}
+          </div>
+          <div className="min-w-0 flex-1">
+            <div className="flex items-center gap-2">
+              <span className="truncate text-sm font-medium">
+                {app.displayName}
+              </span>
+              <div className={`size-2 rounded-full ${statusColor}`} />
+            </div>
+            <p className="mt-0.5 truncate text-xs text-muted-foreground">
+              {app.description || app.source}
+            </p>
+            <div className="mt-1 flex items-center gap-1">
+              <Badge variant="secondary" className="text-[10px]">
+                {app.version}
+              </Badge>
+              <Badge variant="outline" className="text-[10px]">
+                {app.source}
+              </Badge>
+              {app.pinned && (
+                <Pin className="size-3 text-muted-foreground" />
+              )}
+            </div>
+          </div>
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild onClick={(e) => e.stopPropagation()}>
+              <Button variant="ghost" size="icon" className="size-8 opacity-0 group-hover:opacity-100">
+                <MoreVertical className="size-4" />
+              </Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align="end">
+              <DropdownMenuItem
+                onClick={(e) => {
+                  e.stopPropagation()
+                  togglePin(app.id)
+                }}
+              >
+                {app.pinned ? <PinOff className="mr-2 size-4" /> : <Pin className="mr-2 size-4" />}
+                {app.pinned ? t("anyhub.unpin") : t("anyhub.pin-to-sidebar")}
+              </DropdownMenuItem>
+              <DropdownMenuItem
+                onClick={(e) => {
+                  e.stopPropagation()
+                  setShowPermissions(true)
+                }}
+              >
+                <Settings className="mr-2 size-4" />
+                {t("anyhub.permissions")}
+              </DropdownMenuItem>
+              <DropdownMenuItem
+                onClick={async (e) => {
+                  e.stopPropagation()
+                  await router.navigate({ to: `/apps/anyhub/${app.id}` })
+                }}
+              >
+                <RefreshCw className="mr-2 size-4" />
+                {t("anyhub.update")}
+              </DropdownMenuItem>
+              <DropdownMenuItem
+                className="text-destructive"
+                onClick={(e) => {
+                  e.stopPropagation()
+                  uninstallApp(app.id).then((ok) => {
+                    if (ok) toast.success(t("anyhub.uninstalled"))
+                  })
+                }}
+              >
+                <Trash2 className="mr-2 size-4" />
+                {t("anyhub.uninstall")}
+              </DropdownMenuItem>
+            </DropdownMenuContent>
+          </DropdownMenu>
+        </CardContent>
+      </Card>
+      {showPermissions && (
+        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50" onClick={() => setShowPermissions(false)}>
+          <div className="w-96 rounded-lg border bg-background shadow-lg" onClick={(e) => e.stopPropagation()}>
+            <AnyHubPermissionPanel
+              appId={app.id}
+              appName={app.displayName}
+              onClose={() => setShowPermissions(false)}
+            />
+          </div>
+        </div>
+      )}
+    </>
+  )
+}