@allbluecn/web-app 0.3.0

package/src/routes/_nav/chat/route.tsx

@@ -0,0 +1,23 @@
+// 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 { createFileRoute } from '@tanstack/react-router'
+import { listConversationsFn } from '@/server/serverFns/chat/conversations'
+
+export const Route = createFileRoute('/_nav/chat')({
+  loader: () => listConversationsFn(),
+})

package/src/routes/_nav/dashboard/-components/activity-feed.tsx

@@ -0,0 +1,63 @@
+// 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 { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
+import { MessageSquare } from 'lucide-react'
+import { useTranslation } from 'react-i18next'
+
+interface Activity {
+  id: string
+  content: string
+  userName: string
+  createdAt: string
+}
+
+interface ActivityFeedProps {
+  activities: Activity[]
+}
+
+export function ActivityFeed({ activities }: ActivityFeedProps) {
+  const { t } = useTranslation('dashboard')
+  return (
+    <Card className="border">
+      <CardHeader>
+        <CardTitle className="flex items-center gap-2">
+          <MessageSquare className="h-4 w-4" />
+          {t('activityFeed.title')}
+        </CardTitle>
+      </CardHeader>
+      <CardContent>
+        {activities.length === 0 ? (
+          <p className="text-sm text-muted-foreground">{t('activityFeed.empty')}</p>
+        ) : (
+          <div className="space-y-4">
+            {activities.map((activity) => (
+              <div key={activity.id} className="flex items-start gap-3">
+                <div className="flex-1">
+                  <p className="text-sm">{activity.content}</p>
+                  <p className="text-xs text-muted-foreground">
+                    {activity.userName} · {activity.createdAt}
+                  </p>
+                </div>
+              </div>
+            ))}
+          </div>
+        )}
+      </CardContent>
+    </Card>
+  )
+}

package/src/routes/_nav/dashboard/-components/avatar-group.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 { UserAvatar } from '@allbluecn/ui'
+import type { AvatarConfig, ShapeType } from '@allbluecn/shared'
+
+interface TeamMember {
+  name: string
+  email: string
+  avatarConfig?: AvatarConfig | null
+  bgShape?: string | null
+  bgColor?: string | null
+}
+
+interface AvatarGroupProps {
+  members: TeamMember[]
+}
+
+export function AvatarGroup({ members }: AvatarGroupProps) {
+  return (
+    <div className="flex items-center">
+      {members.slice(0, 5).map((member, i) => (
+        <div key={member.email} className="relative" style={{ marginLeft: i > 0 ? '-8px' : 0, zIndex: members.length - i }}>
+          <UserAvatar
+            avatarConfig={member.avatarConfig}
+            bgShape={member.bgShape as ShapeType | undefined}
+            bgColor={member.bgColor}
+            name={member.name || member.email}
+            size="sm"
+          />
+        </div>
+      ))}
+      {members.length > 5 && (
+        <div className="relative flex h-6 w-6 items-center justify-center rounded-full bg-muted text-xs font-medium" style={{ marginLeft: '-8px', zIndex: 0 }}>
+          +{members.length - 5}
+        </div>
+      )}
+    </div>
+  )
+}

package/src/routes/_nav/dashboard/-components/quick-actions.tsx

@@ -0,0 +1,49 @@
+// 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 { Button } from '@/components/ui/button'
+import { Plus, Package2, MessageSquare } from 'lucide-react'
+import { Link } from '@tanstack/react-router'
+import { useTranslation } from 'react-i18next'
+
+interface QuickActionsProps {
+  onCreatePRD?: () => void
+}
+
+export function QuickActions({ onCreatePRD }: QuickActionsProps) {
+  const { t } = useTranslation('dashboard')
+  return (
+    <div className="flex flex-wrap gap-2">
+      <Button variant="outline" size="sm" onClick={onCreatePRD}>
+        <Plus className="mr-1 h-4 w-4" />
+        {t('quickActions.newPRD')}
+      </Button>
+      <Link to="/apps/anyhub">
+        <Button variant="outline" size="sm">
+          <Package2 className="mr-1 h-4 w-4" />
+          AnyHub
+        </Button>
+      </Link>
+      <Link to="/prd">
+        <Button variant="outline" size="sm">
+          <MessageSquare className="mr-1 h-4 w-4" />
+          {t('quickActions.viewComments')}
+        </Button>
+      </Link>
+    </div>
+  )
+}

package/src/routes/_nav/dashboard/-components/stats-grid.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 { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
+import { FileText, MessageSquare, CheckCircle2, Package2 } from 'lucide-react'
+import { useTranslation } from 'react-i18next'
+
+interface StatsGridProps {
+  prdCount: number
+  completedToday: number
+  unreadComments: number
+  installedApps: number
+  className?: string
+}
+
+export function StatsGrid({ prdCount, completedToday, unreadComments, installedApps, className }: StatsGridProps) {
+  const { t } = useTranslation('dashboard')
+  const stats = [
+    { title: t('stats.prdTotal'), value: prdCount, icon: FileText, color: 'text-blue-500' },
+    { title: t('stats.completedToday'), value: completedToday, icon: CheckCircle2, color: 'text-green-500' },
+    { title: t('stats.unreadComments'), value: unreadComments, icon: MessageSquare, color: 'text-amber-500' },
+    { title: t('stats.anyHubInstalled'), value: installedApps, icon: Package2, color: 'text-purple-500' },
+  ]
+
+  return (
+    <div className={`grid gap-4 sm:grid-cols-2 lg:grid-cols-4 ${className}`}>
+      {stats.map((stat) => (
+        <Card key={stat.title} className="border">
+          <CardHeader className="flex flex-row items-center justify-between pb-2">
+            <CardTitle className="text-sm font-medium text-muted-foreground">{stat.title}</CardTitle>
+            <stat.icon className={`h-4 w-4 ${stat.color}`} />
+          </CardHeader>
+          <CardContent>
+            <div className="text-2xl font-bold">{stat.value}</div>
+          </CardContent>
+        </Card>
+      ))}
+    </div>
+  )
+}

package/src/routes/_nav/dashboard/route.lazy.tsx

@@ -0,0 +1,106 @@
+// 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 { cn } from "@/lib/utils"
+import { ClientOnly, createLazyFileRoute } from '@tanstack/react-router'
+import { useEffect, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { StatsGrid } from './-components/stats-grid'
+import { ActivityFeed } from './-components/activity-feed'
+import { QuickActions } from './-components/quick-actions'
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
+import LiquidEther from '@/components/react-bits/liquid-ether'
+import { LightRays as MagicuiLightRays } from '@/components/magicui/light-rays'
+import WebglLightRays from '@/components/react-bits/light-rays'
+import { AiChatPrompt } from '@/components/ai/ai-chat-prompt'
+import { ContributionGraphWithTooltip } from '@/components/shared/contribution-graph-tooltip'
+import { PluginWidgets } from '@/components/plugin-slots/plugin-widgets'
+
+export const Route = createLazyFileRoute('/_nav/dashboard')({
+  pendingComponent: () => (
+    <div className="flex h-64 items-center justify-center">
+      <div className="size-8 animate-spin rounded-full border-2 border-primary border-t-transparent" />
+    </div>
+  ),
+  component: DashboardPage,
+})
+
+function DashboardPage() {
+  const { t } = useTranslation('dashboard')
+  const { prds, activityData } = Route.useLoaderData()
+  const context = Route.useRouteContext()
+  const [isDark, setIsDark] = useState(
+    typeof document !== 'undefined' && document.documentElement.classList.contains('dark'),
+  )
+
+  useEffect(() => {
+    setIsDark(document.documentElement.classList.contains('dark'))
+    const observer = new MutationObserver(() => {
+      setIsDark(document.documentElement.classList.contains('dark'))
+    })
+    observer.observe(document.documentElement, { attributes: true, attributeFilter: ['class'] })
+    return () => observer.disconnect()
+  }, [])
+
+  return (
+    <div className="relative min-h-full overflow-hidden">
+      <div className= {cn("mask-[linear-gradient(to_bottom,white_80%,transparent)] pointer-events-none absolute inset-x-0 inset-0 h-142 top-0 overflow-hidden")} >
+        <ClientOnly>{isDark ? <WebglLightRays /> : <MagicuiLightRays />}</ClientOnly>
+      </div>
+      <div className="relative z-10 space-y-6 p-6">
+        <div className="flex items-center justify-between ">
+          {/* <QuickActions /> */}
+        </div>
+
+        <AiChatPrompt hasAiKey={context?.session?.user?.hasAiKey} />
+
+        <StatsGrid
+          prdCount={prds.length}
+          completedToday={0}
+          unreadComments={0}
+          installedApps={0}
+          className="mt-60"
+        />
+
+        <Card className="border">
+          <CardHeader>
+            <CardTitle>{t('dashboard.activity')}</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <ContributionGraphWithTooltip data={activityData} />
+          </CardContent>
+        </Card>
+
+        <div className="grid gap-6 lg:grid-cols-2">
+          <ActivityFeed activities={[]} />
+          <Card className="border">
+            <CardHeader>
+              <CardTitle>{t('dashboard.quickEntry')}</CardTitle>
+            </CardHeader>
+            <CardContent>
+              <p className="text-sm text-muted-foreground">
+                {t('dashboard.teamFeatureComing')}
+              </p>
+            </CardContent>
+          </Card>
+        </div>
+
+        <PluginWidgets />
+      </div>
+    </div>
+  )
+}

package/src/routes/_nav/dashboard/route.tsx

@@ -0,0 +1,39 @@
+// 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 { createFileRoute } from '@tanstack/react-router'
+import { listPrdFn } from '@allbluecn/plugins-core/prd/serverFns'
+import { getActivityDataFn } from '@/server/serverFns/activity'
+import { getSessionFn } from '@/server/serverFns/auth/session'
+import { resolveTimezone } from '@/lib/datetime'
+import type { Session } from '@/lib/auth/auth-client'
+
+export const Route = createFileRoute('/_nav/dashboard')({
+  loader: async () => {
+    try {
+      const session = await getSessionFn() as Session | null
+      const timezone = resolveTimezone(null, session?.user?.timezone as string | null)
+      const [prds, activityData] = await Promise.all([
+        listPrdFn({ data: {} }),
+        getActivityDataFn({ data: { timezone } }),
+      ])
+      return { prds, activityData }
+    } catch {
+      return { prds: [], activityData: [] }
+    }
+  },
+})

package/src/routes/_nav/design/$projectId/$artboardId/route.lazy.tsx

@@ -0,0 +1,89 @@
+// 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 { createLazyFileRoute, Link } from "@tanstack/react-router"
+import { useTranslation } from "react-i18next"
+import { ArrowLeft } from "lucide-react"
+import { CanvasPreview } from "@/components/design/sketch/canvas-preview"
+import { LayerTree } from "@/components/design/sketch/layer-tree"
+import { ExportPanel } from "@/components/design/sketch/export-panel"
+import { CodePreview } from "@/components/design/sketch/code-preview"
+import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from "@/components/ui/resizable"
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
+import { useState } from "react"
+import type { AnnotationLayer } from "@/server/design/sketch/annotation-parser"
+
+export const Route = createLazyFileRoute("/_nav/design/$projectId/$artboardId")({
+  pendingComponent: () => <div className="p-6">Loading...</div>,
+  component: ArtboardDetailPage,
+})
+
+function ArtboardDetailPage() {
+  const { artboard } = Route.useLoaderData()
+  const [selectedLayer, setSelectedLayer] = useState<AnnotationLayer | null>(null)
+  const [hoveredLayer, setHoveredLayer] = useState<AnnotationLayer | null>(null)
+  const { projectId } = Route.useParams()
+  const { t } = useTranslation("design")
+
+  if (!artboard) return <div className="p-6">{t("detail.notFound")}</div>
+
+  return (
+    <div className="h-full flex flex-col">
+      <div className="h-12 border-b px-4 flex items-center gap-3">
+        <Link to="/design/$projectId" params={{ projectId }} className="text-muted-foreground hover:text-foreground">
+          <ArrowLeft className="size-5" />
+        </Link>
+        <h2 className="font-semibold">{artboard.name}</h2>
+        <div className="text-sm text-muted-foreground ml-auto">
+          {artboard.width} × {artboard.height}
+        </div>
+      </div>
+      <ResizablePanelGroup orientation="horizontal">
+        <ResizablePanel defaultSize={20} minSize={15}>
+          <div className="h-full border-r p-4 overflow-auto">
+            <h3 className="font-semibold mb-3 text-sm">{t("detail.layers")}</h3>
+            <p className="text-xs text-muted-foreground">{t("detail.layerCount", { count: artboard.layerCount })}</p>
+          </div>
+        </ResizablePanel>
+        <ResizableHandle />
+        <ResizablePanel defaultSize={60} minSize={40}>
+          <div className="h-full p-4 overflow-auto flex items-center justify-center bg-muted/30">
+            <div className="text-center text-muted-foreground">
+              <p className="text-sm">{t("detail.preview")}</p>
+              <p className="text-xs mt-1">{artboard.pngPath}</p>
+            </div>
+          </div>
+        </ResizablePanel>
+        <ResizableHandle />
+        <ResizablePanel defaultSize={20} minSize={15}>
+          <Tabs defaultValue="exports" className="h-full">
+            <TabsList className="w-full justify-start">
+              <TabsTrigger value="exports">{t("detail.export")}</TabsTrigger>
+              <TabsTrigger value="code">{t("detail.code")}</TabsTrigger>
+            </TabsList>
+            <TabsContent value="exports" className="p-4 overflow-auto">
+              <ExportPanel exports={artboard.exports} projectId={projectId} />
+            </TabsContent>
+            <TabsContent value="code" className="p-4 overflow-auto">
+              <CodePreview layer={null} />
+            </TabsContent>
+          </Tabs>
+        </ResizablePanel>
+      </ResizablePanelGroup>
+    </div>
+  )
+}

package/src/routes/_nav/design/$projectId/$artboardId/route.tsx

@@ -0,0 +1,26 @@
+// 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 { createFileRoute } from "@tanstack/react-router"
+import { getArtboardFn } from "@/server/serverFns/design"
+
+export const Route = createFileRoute("/_nav/design/$projectId/$artboardId")({
+  loader: async ({ params }) => {
+    const artboard = await getArtboardFn({ data: { id: params.artboardId } })
+    return { artboard }
+  },
+})

package/src/routes/_nav/design/$projectId/route.lazy.tsx

@@ -0,0 +1,50 @@
+// 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 { createLazyFileRoute, Link } from "@tanstack/react-router"
+import { useTranslation } from "react-i18next"
+import { ArrowLeft } from "lucide-react"
+import { ArtboardGrid } from "@/components/design/artboard-grid"
+
+export const Route = createLazyFileRoute("/_nav/design/$projectId")({
+  pendingComponent: () => <div className="p-6">Loading...</div>,
+  component: ProjectDetailPage,
+})
+
+function ProjectDetailPage() {
+  const { project } = Route.useLoaderData()
+  const { t } = useTranslation("design")
+
+  if (!project) return <div className="p-6">{t("projectNotFound")}</div>
+
+  return (
+    <div className="p-6 space-y-6">
+      <div className="flex items-center gap-3">
+        <Link to="/design" className="text-muted-foreground hover:text-foreground">
+          <ArrowLeft className="size-5" />
+        </Link>
+        <div>
+          <h1 className="text-xl font-semibold">{project.name}</h1>
+          <p className="text-sm text-muted-foreground">
+            {t("project.artboardVersionInfo", { count: project.artboards.length, version: project.version })}
+          </p>
+        </div>
+      </div>
+      <ArtboardGrid projectId={project.id} artboards={project.artboards} />
+    </div>
+  )
+}

package/src/routes/_nav/design/$projectId/route.tsx

@@ -0,0 +1,26 @@
+// 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 { createFileRoute } from "@tanstack/react-router"
+import { getDesignProjectFn } from "@/server/serverFns/design"
+
+export const Route = createFileRoute("/_nav/design/$projectId")({
+  loader: async ({ params }) => {
+    const project = await getDesignProjectFn({ data: { id: params.projectId } })
+    return { project }
+  },
+})