@allbluecn/web-app 0.3.0

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

@@ -0,0 +1,92 @@
+// 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, useRef } from "react"
+import { useTranslation } from "react-i18next"
+import { useAnyHubStore, anyHubActions } from "@/lib/anyhub/anyhub-store"
+import { initializeMessageBridge } from "@/lib/anyhub/anyhub-message-bridge"
+import { AnyHubTopNav } from "./anyhub-top-nav"
+import { listAnyHubAppsFn } from "@/server/serverFns/anyhub/index"
+
+interface AnyHubAppRunnerProps {
+  appId: string
+}
+
+export function AnyHubAppRunner({ appId }: AnyHubAppRunnerProps) {
+  const { t } = useTranslation("apps")
+  const iframeRef = useRef<HTMLIFrameElement>(null)
+  const activeApp = useAnyHubStore((s) => s.activeApp)
+  const setActiveApp = anyHubActions.setActiveApp
+  const topNavCollapsed = useAnyHubStore((s) => s.topNavCollapsed)
+
+  useEffect(() => {
+    if (!activeApp || activeApp.id !== appId) {
+      listAnyHubAppsFn()
+        .then((apps: any[]) => {
+          const app = apps.find((a: any) => a.id === appId)
+          if (app) setActiveApp(app)
+        })
+    }
+  }, [appId, activeApp, setActiveApp])
+
+  useEffect(() => {
+    if (!activeApp || !iframeRef.current) return
+
+    const userId = activeApp.userId
+    const cleanup = initializeMessageBridge(iframeRef, activeApp.id, userId)
+    return cleanup
+  }, [activeApp])
+
+  if (!activeApp) {
+    return (
+      <div className="flex h-full items-center justify-center">
+        <p className="text-sm text-muted-foreground">{t("anyhub.loading")}</p>
+      </div>
+    )
+  }
+
+  const iframeSrc = activeApp.url
+    ? activeApp.url
+    : activeApp.localPath
+      ? `/api/anyhub/proxy/${activeApp.id}/`
+      : null
+
+  return (
+    <div className="flex h-full flex-col">
+      <AnyHubTopNav />
+      <div
+        className="flex-1 overflow-hidden"
+        style={{ height: topNavCollapsed ? 0 : undefined }}
+      >
+        {iframeSrc ? (
+          <iframe
+            ref={iframeRef}
+            src={iframeSrc}
+            className="size-full border-0"
+            sandbox="allow-scripts allow-forms allow-same-origin"
+            title={activeApp.displayName}
+          />
+        ) : (
+          <div className="flex h-full items-center justify-center">
+            <p className="text-sm text-muted-foreground">{t("anyhub.no-entry")}</p>
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}

package/src/components/anyhub/anyhub-install-dialog.tsx

@@ -0,0 +1,128 @@
+// 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 { useTranslation } from "react-i18next"
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog"
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import { toast } from '@/components/ui/sonner'
+import { useAnyHubStore, anyHubActions } from "@/lib/anyhub/anyhub-store"
+import { AnyHubMarketplaceView } from "./anyhub-marketplace-view"
+
+interface AnyHubInstallDialogProps {
+  open: boolean
+  onOpenChange: (open: boolean) => void
+}
+
+export function AnyHubInstallDialog({
+  open,
+  onOpenChange,
+}: AnyHubInstallDialogProps) {
+  const [githubUrl, setGithubUrl] = useState("")
+  const [localPath, setLocalPath] = useState("")
+  const [installing, setInstalling] = useState(false)
+  const { t } = useTranslation("apps")
+  const installApp = anyHubActions.installApp
+
+  const handleGitHubInstall = async () => {
+    if (!githubUrl.trim()) return
+    setInstalling(true)
+    const result = await installApp("github", { githubUrl: githubUrl.trim() })
+    setInstalling(false)
+    if (result) {
+      toast.success(t("anyhub.install-success", { name: result.displayName }))
+      setGithubUrl("")
+      onOpenChange(false)
+    } else {
+      toast.error(t("anyhub.install-failed"))
+    }
+  }
+
+  const handleLocalInstall = async () => {
+    if (!localPath.trim()) return
+    setInstalling(true)
+    const result = await installApp("local", { localPath: localPath.trim() })
+    setInstalling(false)
+    if (result) {
+      toast.success(t("anyhub.install-success", { name: result.displayName }))
+      setLocalPath("")
+      onOpenChange(false)
+    } else {
+      toast.error(t("anyhub.install-failed"))
+    }
+  }
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="max-w-2xl">
+        <DialogHeader>
+          <DialogTitle>{t("anyhub.install-app")}</DialogTitle>
+        </DialogHeader>
+        <Tabs defaultValue="market">
+          <TabsList className="w-full">
+            <TabsTrigger value="market" className="flex-1">{t("anyhub.marketplace")}</TabsTrigger>
+            <TabsTrigger value="github" className="flex-1">GitHub</TabsTrigger>
+            <TabsTrigger value="local" className="flex-1">{t("anyhub.local-apps")}</TabsTrigger>
+          </TabsList>
+          <TabsContent value="market" className="mt-4 max-h-96 overflow-y-auto">
+            <AnyHubMarketplaceView compact onInstallSuccess={() => onOpenChange(false)} />
+          </TabsContent>
+          <TabsContent value="github" className="mt-4 space-y-3">
+            <p className="text-sm text-muted-foreground">
+              {t("anyhub.github-install-hint")}
+            </p>
+            <div className="flex gap-2">
+              <Input
+                placeholder="https://github.com/owner/repo"
+                value={githubUrl}
+                onChange={(e) => setGithubUrl(e.target.value)}
+                onKeyDown={(e) => e.key === "Enter" && handleGitHubInstall()}
+              />
+              <Button onClick={handleGitHubInstall} disabled={installing || !githubUrl.trim()}>
+                {installing ? t("anyhub.installing") : t("anyhub.install")}
+              </Button>
+            </div>
+          </TabsContent>
+          <TabsContent value="local" className="mt-4 space-y-3">
+            <p className="text-sm text-muted-foreground">
+              {t("anyhub.local-install-hint")}
+            </p>
+            <div className="flex gap-2">
+              <Input
+                placeholder="/path/to/app"
+                value={localPath}
+                onChange={(e) => setLocalPath(e.target.value)}
+                onKeyDown={(e) => e.key === "Enter" && handleLocalInstall()}
+              />
+              <Button onClick={handleLocalInstall} disabled={installing || !localPath.trim()}>
+                {installing ? t("anyhub.installing") : t("anyhub.install")}
+              </Button>
+            </div>
+          </TabsContent>
+        </Tabs>
+      </DialogContent>
+    </Dialog>
+  )
+}

package/src/components/anyhub/anyhub-management-view.tsx

@@ -0,0 +1,75 @@
+// 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 { useTranslation } from "react-i18next"
+import { Button } from "@/components/ui/button"
+import { Plus } from "lucide-react"
+import { useAnyHubStore, anyHubActions } from "@/lib/anyhub/anyhub-store"
+import { AnyHubAppCard } from "./anyhub-app-card"
+import { AnyHubInstallDialog } from "./anyhub-install-dialog"
+
+export function AnyHubManagementView() {
+  const { t } = useTranslation("apps")
+  const installedApps = useAnyHubStore((s) => s.installedApps)
+  const loading = useAnyHubStore((s) => s.loading)
+  const fetchInstalled = anyHubActions.fetchInstalled
+  const [installOpen, setInstallOpen] = useState(false)
+
+  useEffect(() => {
+    fetchInstalled()
+  }, [fetchInstalled])
+
+  return (
+    <div>
+      <div className="mb-4 flex items-center justify-between">
+        <h2 className="text-lg font-semibold">{t("anyhub.installed")}</h2>
+        <Button size="sm" onClick={() => setInstallOpen(true)}>
+          <Plus className="mr-1 size-4" />
+          {t("anyhub.install-app")}
+        </Button>
+      </div>
+
+      {loading ? (
+          <div className="py-12 text-center text-sm text-muted-foreground">
+            {t("anyhub.loading")}
+          </div>
+      ) : installedApps.length === 0 ? (
+        <div className="py-12 text-center">
+          <p className="text-sm text-muted-foreground">{t("anyhub.no-installed-apps")}</p>
+          <Button
+            variant="outline"
+            className="mt-3"
+            onClick={() => setInstallOpen(true)}
+          >
+            <Plus className="mr-1 size-4" />
+            {t("anyhub.install-first-app")}
+          </Button>
+        </div>
+      ) : (
+        <div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-3">
+          {installedApps.map((app) => (
+            <AnyHubAppCard key={app.id} app={app} />
+          ))}
+        </div>
+      )}
+
+      <AnyHubInstallDialog open={installOpen} onOpenChange={setInstallOpen} />
+    </div>
+  )
+}

package/src/components/anyhub/anyhub-marketplace-view.tsx

@@ -0,0 +1,151 @@
+// 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 { useTranslation } from "react-i18next"
+import { Input } from "@/components/ui/input"
+import { Button } from "@/components/ui/button"
+import { Badge } from "@/components/ui/badge"
+import { Search, Download } from "lucide-react"
+import { toast } from '@/components/ui/sonner'
+import { useAnyHubStore, anyHubActions } from "@/lib/anyhub/anyhub-store"
+
+interface AnyHubMarketplaceViewProps {
+  compact?: boolean
+  onInstallSuccess?: () => void
+}
+
+export function AnyHubMarketplaceView({
+  compact,
+  onInstallSuccess,
+}: AnyHubMarketplaceViewProps) {
+  const marketApps = useAnyHubStore((s) => s.marketApps)
+  const loading = useAnyHubStore((s) => s.loading)
+  const fetchMarketplace = anyHubActions.fetchMarketplace
+  const installApp = anyHubActions.installApp
+  const [search, setSearch] = useState("")
+  const [installing, setInstalling] = useState<string | null>(null)
+  const { t } = useTranslation("apps")
+
+  useEffect(() => {
+    fetchMarketplace()
+  }, [fetchMarketplace])
+
+  const handleInstall = async (marketplaceAppId: string) => {
+    setInstalling(marketplaceAppId)
+    const result = await installApp("market", { marketplaceAppId })
+    setInstalling(null)
+    if (result) {
+      toast.success(t("anyhub.install-success", { name: result.displayName }))
+      onInstallSuccess?.()
+    } else {
+      toast.error(t("anyhub.install-failed"))
+    }
+  }
+
+  const filtered = search
+    ? marketApps.filter(
+        (a) =>
+          a.displayName.toLowerCase().includes(search.toLowerCase()) ||
+          a.name.toLowerCase().includes(search.toLowerCase()),
+      )
+    : marketApps
+
+  return (
+    <div>
+      {!compact && (
+        <div className="mb-4 flex items-center gap-3">
+          <div className="relative flex-1">
+            <Search className="absolute left-3 top-1/2 size-4 -translate-y-1/2 text-muted-foreground" />
+            <Input
+              placeholder={t("anyhub.search-apps")}
+              className="pl-9"
+              value={search}
+              onChange={(e) => setSearch(e.target.value)}
+            />
+          </div>
+        </div>
+      )}
+
+      {compact && (
+        <div className="mb-3">
+          <Input
+            placeholder={t("anyhub.search-apps")}
+            value={search}
+            onChange={(e) => setSearch(e.target.value)}
+          />
+        </div>
+      )}
+
+      {loading ? (
+        <div className="py-8 text-center text-sm text-muted-foreground">
+          {t("anyhub.loading")}
+        </div>
+      ) : filtered.length === 0 ? (
+        <div className="py-8 text-center text-sm text-muted-foreground">
+          {search ? t("anyhub.no-matching-apps") : t("anyhub.marketplace-empty")}
+        </div>
+      ) : (
+        <div className={`grid gap-3 ${compact ? "grid-cols-1" : "sm:grid-cols-2 lg:grid-cols-3"}`}>
+          {filtered.map((app) => (
+            <div
+              key={app.id}
+              className="rounded-lg border p-4 transition-shadow hover:shadow-sm"
+            >
+              <div className="flex items-start gap-3">
+                <div className="flex size-10 shrink-0 items-center justify-center rounded-lg bg-muted">
+                  {app.icon ? (
+                    <img src={app.icon} 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>
+                    {app.category && (
+                      <Badge variant="secondary" className="text-[10px]">
+                        {app.category}
+                      </Badge>
+                    )}
+                  </div>
+                  <p className="mt-0.5 line-clamp-2 text-xs text-muted-foreground">
+                    {app.description}
+                  </p>
+                </div>
+              </div>
+              <div className="mt-3 flex items-center justify-end gap-2">
+                <Button
+                  size="sm"
+                  variant="outline"
+                  onClick={() => handleInstall(app.id)}
+                  disabled={installing === app.id}
+                >
+                  <Download className="mr-1 size-3.5" />
+                  {installing === app.id ? t("anyhub.installing") : t("anyhub.install")}
+                </Button>
+              </div>
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  )
+}

package/src/components/anyhub/anyhub-permission-panel.tsx

@@ -0,0 +1,125 @@
+// 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 { useTranslation } from "react-i18next"
+import { Button } from "@/components/ui/button"
+import { Switch } from "@/components/ui/switch"
+import { Separator } from "@/components/ui/separator"
+import { CAPABILITY_GROUPS } from "@/lib/anyhub/capabilities"
+import { X, Save } from "lucide-react"
+import { toast } from '@/components/ui/sonner'
+import { getAnyHubPermissionsFn, updateAnyHubPermissionFn } from "@/server/serverFns/anyhub/permissions"
+
+interface Permission {
+  id: string
+  capability: string
+  granted: boolean
+}
+
+interface AnyHubPermissionPanelProps {
+  appId: string
+  appName: string
+  onClose: () => void
+}
+
+export function AnyHubPermissionPanel({
+  appId,
+  appName,
+  onClose,
+}: AnyHubPermissionPanelProps) {
+  const [permissions, setPermissions] = useState<Permission[]>([])
+  const [loading, setLoading] = useState(true)
+  const { t } = useTranslation("apps")
+
+  useEffect(() => {
+    getAnyHubPermissionsFn({ data: { id: appId } })
+      .then((data) => {
+        setPermissions(data)
+        setLoading(false)
+      })
+  }, [appId])
+
+  const toggleCapability = (capability: string) => {
+    setPermissions((prev) =>
+      prev.map((p) =>
+        p.capability === capability ? { ...p, granted: !p.granted } : p,
+      ),
+    )
+  }
+
+  const handleSave = async () => {
+    for (const p of permissions) {
+      await updateAnyHubPermissionFn({
+        data: { id: appId, capability: p.capability, granted: p.granted },
+      })
+    }
+    toast.success(t("anyhub.permissions-saved"))
+    onClose()
+  }
+
+  if (loading) {
+    return (
+      <div className="border-b p-4">
+        <p className="text-sm text-muted-foreground">{t("anyhub.loading")}</p>
+      </div>
+    )
+  }
+
+  return (
+    <div className="border-b">
+      <div className="flex items-center justify-between px-4 py-2">
+        <span className="text-sm font-medium">{t("anyhub.app-permissions", { name: appName })}</span>
+        <Button variant="ghost" size="icon" className="size-7" onClick={onClose}>
+          <X className="size-4" />
+        </Button>
+      </div>
+      <div className="px-4 pb-4">
+        {CAPABILITY_GROUPS.map((group, gi) => (
+          <div key={group.id}>
+            {gi > 0 && <Separator className="my-2" />}
+            <p className="mb-1 text-xs font-medium text-muted-foreground">
+              {group.label}
+            </p>
+            {group.capabilities.map((cap) => {
+              const perm = permissions.find((p) => p.capability === cap.id)
+              return (
+                <div
+                  key={cap.id}
+                  className="flex items-center justify-between py-1"
+                >
+                  <span className="text-sm">{cap.label}</span>
+                  <Switch
+                    checked={perm?.granted ?? false}
+                    onCheckedChange={() => toggleCapability(cap.id)}
+                  />
+                </div>
+              )
+            })}
+          </div>
+        ))}
+      </div>
+      <div className="flex justify-end border-t px-4 py-2">
+        <Button size="sm" onClick={handleSave}>
+          <Save className="mr-1 size-3.5" />
+          {t("anyhub.save-permissions")}
+        </Button>
+      </div>
+    </div>
+  )
+}

package/src/components/anyhub/anyhub-provider.tsx

@@ -0,0 +1,30 @@
+// 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, type ReactNode } from "react"
+import { useAnyHubStore, anyHubActions } from "@/lib/anyhub/anyhub-store"
+
+export function AnyHubProvider({ children }: { children: ReactNode }) {
+  const fetchInstalled = anyHubActions.fetchInstalled
+
+  useEffect(() => {
+    fetchInstalled()
+  }, [fetchInstalled])
+
+  return <>{children}</>
+}