create-fullstack-scaffold 0.1.1 → 0.2.0

package/template/src/client/pages/CategoriesPage.tsx

@@ -0,0 +1,100 @@
+import { useEffect } from 'react'
+import { Link } from 'react-router-dom'
+import { Helmet } from 'react-helmet-async'
+import { FolderOpen, Package } from 'lucide-react'
+import { usePluginStore } from '@client/stores/pluginStore'
+import { LoadingSpinner, EmptyState } from '@client/components'
+
+const categoryGradients = [
+  'from-violet-500 to-purple-600',
+  'from-blue-500 to-cyan-500',
+  'from-fuchsia-500 to-pink-500',
+  'from-emerald-500 to-teal-500',
+  'from-orange-500 to-amber-500',
+  'from-rose-500 to-red-500',
+  'from-indigo-500 to-blue-600',
+  'from-teal-500 to-green-500',
+  'from-cyan-500 to-sky-500',
+]
+
+export const CategoriesPage: React.FC = () => {
+  const categories = usePluginStore(state => state.categories)
+  const loading = usePluginStore(state => state.loading)
+  const fetchCategories = usePluginStore(state => state.fetchCategories)
+  const setSelectedCategory = usePluginStore(state => state.setSelectedCategory)
+
+  useEffect(() => {
+    fetchCategories()
+  }, [fetchCategories])
+
+  return (
+    <div className="min-h-screen" data-testid="categories-page">
+      <Helmet>
+        <title>Categories - Plugin Marketplace</title>
+        <meta name="description" content="Browse plugins by category" />
+      </Helmet>
+
+      <div className="bg-gradient-to-br from-slate-900 via-purple-900 to-slate-900 pt-12 pb-16 px-6">
+        <div className="max-w-6xl mx-auto">
+          <div className="flex items-center gap-3 mb-4">
+            <div className="p-2.5 bg-gradient-to-br from-violet-500 to-fuchsia-500 rounded-xl shadow-lg shadow-violet-500/25">
+              <FolderOpen className="w-6 h-6 text-white" />
+            </div>
+            <h1 className="text-3xl font-bold text-white tracking-tight">Categories</h1>
+          </div>
+          <p className="text-purple-200/70 text-lg">
+            Browse plugins by category to find exactly what you need
+          </p>
+        </div>
+      </div>
+
+      <div className="max-w-6xl mx-auto px-6 -mt-8 pb-16">
+        {loading && categories.length === 0 ? (
+          <div className="flex items-center justify-center py-20">
+            <LoadingSpinner size="lg" />
+          </div>
+        ) : categories.length === 0 ? (
+          <EmptyState icon={FolderOpen} title="No categories yet" />
+        ) : (
+          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-5">
+            {categories.map((category, index) => (
+              <Link
+                key={category.id}
+                to="/plugins"
+                onClick={() => setSelectedCategory(category.slug)}
+                className="group relative overflow-hidden bg-white rounded-2xl border border-gray-100 hover:border-transparent hover:shadow-2xl hover:shadow-violet-500/10 transition-all duration-300 block"
+              >
+                <div
+                  className={`absolute top-0 left-0 right-0 h-1.5 bg-gradient-to-r ${
+                    categoryGradients[index % categoryGradients.length]
+                  } opacity-60 group-hover:opacity-100 transition-opacity`}
+                />
+                <div className="p-6">
+                  <div
+                    className={`w-14 h-14 rounded-2xl bg-gradient-to-br ${
+                      categoryGradients[index % categoryGradients.length]
+                    } flex items-center justify-center text-2xl shadow-lg mb-4`}
+                  >
+                    {category.icon || '📁'}
+                  </div>
+                  <h3 className="text-lg font-semibold text-gray-900 group-hover:text-violet-700 transition-colors">
+                    {category.name}
+                  </h3>
+                  {category.description && (
+                    <p className="text-sm text-gray-500 mt-1.5 leading-relaxed">
+                      {category.description}
+                    </p>
+                  )}
+                  <div className="mt-4 flex items-center gap-1.5 text-xs text-violet-500 font-medium opacity-0 group-hover:opacity-100 transition-opacity">
+                    <Package className="w-3.5 h-3.5" />
+                    Browse plugins
+                  </div>
+                </div>
+              </Link>
+            ))}
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}

package/template/src/client/pages/ContentDetailPage.tsx

@@ -1,4 +1,4 @@
-import { useState, useEffect } from 'react'
+import { useState, useEffect, useCallback } from 'react'
 import { useParams, Link } from 'react-router-dom'
 import { Helmet } from 'react-helmet-async'
 import type { Content } from '@shared/modules/content'
@@ -10,11 +10,7 @@ export const ContentDetailPage: React.FC = () => {
   const [loading, setLoading] = useState(true)
   const [error, setError] = useState<string | null>(null)
 
-  useEffect(() => {
-    if (id) fetchContent(id)
-  }, [id])
-
-  const fetchContent = async (contentId: string) => {
+  const fetchContent = useCallback(async (contentId: string) => {
     setLoading(true)
     setError(null)
     try {
@@ -40,7 +36,11 @@ export const ContentDetailPage: React.FC = () => {
     } finally {
       setLoading(false)
     }
-  }
+  }, [])
+
+  useEffect(() => {
+    if (id) fetchContent(id)
+  }, [id, fetchContent])
 
   const formatDate = (dateStr: string | null | undefined) => {
     if (!dateStr) return ''
@@ -63,9 +63,7 @@ export const ContentDetailPage: React.FC = () => {
     return (
       <div className="max-w-4xl mx-auto p-6">
         <div className="text-center py-12">
-          <h1 className="text-2xl font-bold text-gray-900 mb-4">
-            {error || '内容不存在'}
-          </h1>
+          <h1 className="text-2xl font-bold text-gray-900 mb-4">{error || '内容不存在'}</h1>
           <Link to="/content" className="text-blue-600 hover:underline">
             ← 返回内容列表
           </Link>
@@ -107,10 +105,7 @@ export const ContentDetailPage: React.FC = () => {
                 {content.category}
               </span>
               {content.tags?.map(tag => (
-                <span
-                  key={tag}
-                  className="px-2 py-1 bg-gray-100 text-gray-600 text-xs rounded"
-                >
+                <span key={tag} className="px-2 py-1 bg-gray-100 text-gray-600 text-xs rounded">
                   {tag}
                 </span>
               ))}

package/template/src/client/pages/ContentListPage.tsx

@@ -33,8 +33,7 @@ export const ContentListPage: React.FC = () => {
       })
       const result = await res.json()
       if (result.success) {
-        const data = result.data
-        setContents(Array.isArray(data) ? data : [])
+        setContents(result.data)
       } else {
         setError('Failed to fetch contents')
       }
@@ -122,9 +121,7 @@ export const ContentListPage: React.FC = () => {
           </div>
         )}
 
-        {loading && (
-          <div className="text-center py-12 text-gray-500">加载中...</div>
-        )}
+        {loading && <div className="text-center py-12 text-gray-500">加载中...</div>}
 
         {!loading && !error && contents.length === 0 && (
           <div className="text-center py-12 text-gray-500">暂无内容</div>
@@ -146,12 +143,8 @@ export const ContentListPage: React.FC = () => {
                       </span>
                       <span className="text-sm text-gray-500">{content.author}</span>
                     </div>
-                    <h2 className="text-xl font-semibold text-gray-900 mb-2">
-                      {content.title}
-                    </h2>
-                    <p className="text-gray-600 line-clamp-2">
-                      {content.content.slice(0, 150)}...
-                    </p>
+                    <h2 className="text-xl font-semibold text-gray-900 mb-2">{content.title}</h2>
+                    <p className="text-gray-600 line-clamp-2">{content.content.slice(0, 150)}...</p>
                     <div className="flex items-center gap-4 mt-3 text-sm text-gray-400">
                       {content.publishedAt && <span>{formatDate(content.publishedAt)}</span>}
                       <span>👁 {content.viewCount}</span>

package/template/src/client/pages/DashboardPage.tsx

@@ -0,0 +1,261 @@
+import { useState, useEffect } from 'react'
+import { Helmet } from 'react-helmet-async'
+import { TrendingUp, TrendingDown, ArrowUpRight, ChevronDown } from 'lucide-react'
+import { apiClient } from '@client/services/apiClient'
+import { LoadingSpinner } from '@client/components'
+import type { DashboardStat, RevenueData, ActivityStatus, Activity } from '@shared/schemas'
+
+type StatCard = DashboardStat & { icon: React.FC<{ className?: string }> }
+
+const statusStyles: Record<ActivityStatus, string> = {
+  Active: 'bg-green-100 text-green-700',
+  Pending: 'bg-yellow-100 text-yellow-700',
+  Inactive: 'bg-gray-100 text-gray-600',
+}
+
+const timeRanges = ['Last 7 days', 'Last 30 days', 'Last 90 days', 'Last year']
+
+export const DashboardPage: React.FC = () => {
+  const [timeRange, setTimeRange] = useState('Last 30 days')
+  const [dropdownOpen, setDropdownOpen] = useState(false)
+  const [loading, setLoading] = useState(true)
+  const [stats, setStats] = useState<StatCard[]>([])
+  const [revenueData, setRevenueData] = useState<RevenueData[]>([])
+  const [userGrowthData, setUserGrowthData] = useState<RevenueData[]>([])
+  const [recentActivity, setRecentActivity] = useState<Activity[]>([])
+
+  useEffect(() => {
+    async function fetchDashboard() {
+      try {
+        const api = apiClient.api as unknown as Record<
+          string,
+          Record<string, Record<string, () => Promise<Response>>>
+        >
+        const statsEndpoint = api?.admin?.dashboard?.stats
+        if (!statsEndpoint) {
+          setLoading(false)
+          return
+        }
+        const res = await statsEndpoint()
+        const result = (await res.json()) as Record<string, unknown>
+        const data = (result.data ?? {}) as Record<string, unknown>
+        if (result.success) {
+          setStats((data.stats as StatCard[]) || [])
+          setRevenueData((data.revenue as RevenueData[]) || [])
+          setUserGrowthData((data.userGrowth as RevenueData[]) || [])
+          setRecentActivity((data.activity as Activity[]) || [])
+        }
+      } finally {
+        setLoading(false)
+      }
+    }
+    fetchDashboard()
+  }, [])
+
+  if (loading) {
+    return (
+      <div
+        className="flex items-center justify-center min-h-screen"
+        data-testid="dashboard-loading"
+      >
+        <LoadingSpinner size="lg" />
+      </div>
+    )
+  }
+
+  return (
+    <div className="min-h-screen bg-gray-50 p-4 sm:p-6 lg:p-8" data-testid="dashboard-page">
+      <Helmet>
+        <title>Dashboard - SaaS Admin</title>
+        <meta name="description" content="SaaS Admin Dashboard" />
+      </Helmet>
+
+      <div className="max-w-7xl mx-auto">
+        <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between mb-8 gap-4">
+          <h1 className="text-2xl sm:text-3xl font-bold text-gray-900">Dashboard</h1>
+          <div className="relative">
+            <button
+              onClick={() => setDropdownOpen(!dropdownOpen)}
+              data-testid="time-range-dropdown"
+              className="flex items-center gap-2 px-4 py-2 bg-white border border-gray-200 rounded-lg text-sm font-medium text-gray-700 hover:bg-gray-50 transition-colors"
+            >
+              {timeRange}
+              <ChevronDown className="w-4 h-4" />
+            </button>
+            {dropdownOpen && (
+              <div className="absolute right-0 mt-1 w-44 bg-white border border-gray-200 rounded-lg shadow-lg z-10">
+                {timeRanges.map(range => (
+                  <button
+                    key={range}
+                    onClick={() => {
+                      setTimeRange(range)
+                      setDropdownOpen(false)
+                    }}
+                    data-testid={`time-range-${range.toLowerCase().replace(/\s+/g, '-')}`}
+                    className={`block w-full text-left px-4 py-2 text-sm transition-colors first:rounded-t-lg last:rounded-b-lg ${
+                      range === timeRange
+                        ? 'bg-gray-100 text-gray-900 font-medium'
+                        : 'text-gray-600 hover:bg-gray-50'
+                    }`}
+                  >
+                    {range}
+                  </button>
+                ))}
+              </div>
+            )}
+          </div>
+        </div>
+
+        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 sm:gap-6 mb-8">
+          {stats.map(stat => {
+            const Icon = stat.icon
+            const isPositive = stat.trend >= 0
+            return (
+              <div
+                key={stat.label}
+                data-testid={`stat-card-${stat.label.toLowerCase().replace(/\s+/g, '-')}`}
+                className="bg-white rounded-lg border border-gray-200 p-5 hover:shadow-sm transition-shadow"
+              >
+                <div className="flex items-center justify-between mb-3">
+                  <span className="text-sm font-medium text-gray-500">{stat.label}</span>
+                  <div className="p-2 bg-gray-100 rounded-lg">
+                    <Icon className="w-4 h-4 text-gray-600" />
+                  </div>
+                </div>
+                <div className="text-2xl font-bold text-gray-900 mb-1">{stat.value}</div>
+                <div className="flex items-center gap-1">
+                  {isPositive ? (
+                    <TrendingUp className="w-3 h-3 text-green-500" />
+                  ) : (
+                    <TrendingDown className="w-3 h-3 text-red-500" />
+                  )}
+                  <span
+                    className={`text-sm font-medium ${
+                      isPositive ? 'text-green-600' : 'text-red-600'
+                    }`}
+                  >
+                    {isPositive ? '+' : ''}
+                    {stat.trend}%
+                  </span>
+                  <span className="text-xs text-gray-400 ml-1">vs last period</span>
+                </div>
+              </div>
+            )
+          })}
+        </div>
+
+        <div className="grid grid-cols-1 lg:grid-cols-2 gap-4 sm:gap-6 mb-8">
+          <div
+            className="bg-white rounded-lg border border-gray-200 p-5 sm:p-6"
+            data-testid="revenue-chart"
+          >
+            <h2 className="text-base font-semibold text-gray-900 mb-6">Revenue Overview</h2>
+            <div className="flex items-end gap-3 h-48">
+              {revenueData.map(item => (
+                <div key={item.month} className="flex-1 flex flex-col items-center gap-2">
+                  <div className="w-full flex flex-col items-center">
+                    <span className="text-xs text-gray-500 mb-1">${item.value}k</span>
+                    <div
+                      className="w-full rounded-t-md bg-gray-800 transition-all hover:bg-gray-700"
+                      style={{ height: `${(item.value / 100) * 160}px` }}
+                    />
+                  </div>
+                  <span className="text-xs text-gray-500">{item.month}</span>
+                </div>
+              ))}
+            </div>
+          </div>
+
+          <div
+            className="bg-white rounded-lg border border-gray-200 p-5 sm:p-6"
+            data-testid="user-growth-chart"
+          >
+            <h2 className="text-base font-semibold text-gray-900 mb-6">User Growth</h2>
+            <div className="flex items-end gap-3 h-48">
+              {userGrowthData.map(item => (
+                <div key={item.month} className="flex-1 flex flex-col items-center gap-2">
+                  <div className="w-full flex flex-col items-center">
+                    <span className="text-xs text-gray-500 mb-1">{item.value}%</span>
+                    <div
+                      className="w-full rounded-t-md transition-all"
+                      style={{
+                        height: `${(item.value / 100) * 160}px`,
+                        background: `linear-gradient(to top, #1f2937 ${item.value}%, #e5e7eb ${item.value}%)`,
+                      }}
+                    />
+                  </div>
+                  <span className="text-xs text-gray-500">{item.month}</span>
+                </div>
+              ))}
+            </div>
+          </div>
+        </div>
+
+        <div
+          className="bg-white rounded-lg border border-gray-200 overflow-hidden"
+          data-testid="recent-activity"
+        >
+          <div className="px-5 sm:px-6 py-4 border-b border-gray-100 flex items-center justify-between">
+            <h2 className="text-base font-semibold text-gray-900">Recent Activity</h2>
+            <button
+              data-testid="view-all-activity"
+              className="flex items-center gap-1 text-sm font-medium text-gray-600 hover:text-gray-900 transition-colors"
+            >
+              View all
+              <ArrowUpRight className="w-3.5 h-3.5" />
+            </button>
+          </div>
+          <div className="overflow-x-auto">
+            <table className="w-full">
+              <thead>
+                <tr className="border-b border-gray-100">
+                  <th className="text-left px-5 sm:px-6 py-3 text-xs font-medium text-gray-500 uppercase tracking-wider">
+                    User
+                  </th>
+                  <th className="text-left px-5 sm:px-6 py-3 text-xs font-medium text-gray-500 uppercase tracking-wider">
+                    Action
+                  </th>
+                  <th className="text-left px-5 sm:px-6 py-3 text-xs font-medium text-gray-500 uppercase tracking-wider hidden sm:table-cell">
+                    Date
+                  </th>
+                  <th className="text-left px-5 sm:px-6 py-3 text-xs font-medium text-gray-500 uppercase tracking-wider">
+                    Status
+                  </th>
+                </tr>
+              </thead>
+              <tbody>
+                {recentActivity.map(activity => (
+                  <tr
+                    key={activity.id}
+                    data-testid={`activity-row-${activity.id}`}
+                    className="border-b border-gray-50 last:border-0 hover:bg-gray-50 transition-colors"
+                  >
+                    <td className="px-5 sm:px-6 py-4">
+                      <span className="text-sm font-medium text-gray-900">{activity.user}</span>
+                    </td>
+                    <td className="px-5 sm:px-6 py-4">
+                      <span className="text-sm text-gray-600">{activity.action}</span>
+                    </td>
+                    <td className="px-5 sm:px-6 py-4 hidden sm:table-cell">
+                      <span className="text-sm text-gray-500">{activity.date}</span>
+                    </td>
+                    <td className="px-5 sm:px-6 py-4">
+                      <span
+                        data-testid={`status-badge-${activity.id}`}
+                        className={`inline-flex items-center px-2.5 py-0.5 rounded-md text-xs font-medium ${
+                          statusStyles[activity.status]
+                        }`}
+                      >
+                        {activity.status}
+                      </span>
+                    </td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}

package/template/src/client/pages/DeveloperDashboardPage.tsx

@@ -0,0 +1,211 @@
+import { useEffect } from 'react'
+import { Link } from 'react-router-dom'
+import { Helmet } from 'react-helmet-async'
+import {
+  Package,
+  Trash2,
+  ExternalLink,
+  Plus,
+  BarChart3,
+  CheckCircle2,
+  Clock,
+  Download,
+} from 'lucide-react'
+import { usePluginStore } from '@client/stores/pluginStore'
+import { LoadingSpinner, EmptyState, StatusBadge } from '@client/components'
+
+export const DeveloperDashboardPage: React.FC = () => {
+  const myPlugins = usePluginStore(state => state.myPlugins)
+  const loading = usePluginStore(state => state.loading)
+  const error = usePluginStore(state => state.error)
+  const fetchMyPlugins = usePluginStore(state => state.fetchMyPlugins)
+  const deletePlugin = usePluginStore(state => state.deletePlugin)
+  const fetchStats = usePluginStore(state => state.fetchStats)
+
+  useEffect(() => {
+    fetchMyPlugins()
+    fetchStats()
+  }, [fetchMyPlugins, fetchStats])
+
+  const statusColors: Record<string, 'green' | 'yellow' | 'red'> = {
+    approved: 'green',
+    pending: 'yellow',
+    rejected: 'red',
+  }
+
+  const safePlugins = myPlugins?.filter(Boolean) ?? []
+  const totalDownloads = safePlugins.reduce((sum, p) => sum + (p?.downloadCount ?? 0), 0)
+
+  return (
+    <div className="min-h-screen" data-testid="developer-dashboard-page">
+      <Helmet>
+        <title>Developer Dashboard - Plugin Marketplace</title>
+        <meta name="description" content="Manage your published plugins" />
+      </Helmet>
+
+      <div className="bg-gradient-to-br from-slate-900 via-purple-900 to-slate-900 pt-12 pb-16 px-6">
+        <div className="max-w-5xl mx-auto">
+          <div className="flex items-center justify-between">
+            <div className="flex items-center gap-3">
+              <div className="p-2.5 bg-gradient-to-br from-violet-500 to-fuchsia-500 rounded-xl shadow-lg shadow-violet-500/25">
+                <BarChart3 className="w-6 h-6 text-white" />
+              </div>
+              <div>
+                <h1 className="text-3xl font-bold text-white tracking-tight">
+                  Developer Dashboard
+                </h1>
+                <p className="text-purple-200/60 mt-0.5">Manage your published plugins</p>
+              </div>
+            </div>
+            <Link
+              to="/publish"
+              className="group flex items-center gap-2 px-5 py-2.5 bg-gradient-to-r from-violet-500 to-fuchsia-500 text-white rounded-xl hover:from-violet-400 hover:to-fuchsia-400 transition-all shadow-lg shadow-violet-500/25 hover:shadow-violet-500/40 text-sm font-semibold"
+            >
+              <Plus className="w-4 h-4 group-hover:rotate-90 transition-transform" />
+              New Plugin
+            </Link>
+          </div>
+        </div>
+      </div>
+
+      <div className="max-w-5xl mx-auto px-6 -mt-8 pb-16">
+        <div className="grid grid-cols-2 sm:grid-cols-4 gap-4 mb-6">
+          <div className="relative overflow-hidden bg-white rounded-2xl shadow-lg shadow-black/5 border border-gray-100 p-5">
+            <div className="absolute top-0 left-0 right-0 h-1 bg-gradient-to-r from-violet-500 to-fuchsia-500" />
+            <div className="flex items-center gap-3">
+              <div className="p-2 bg-violet-50 rounded-lg">
+                <Package className="w-5 h-5 text-violet-500" />
+              </div>
+              <div>
+                <p className="text-xs text-gray-500 font-medium">My Plugins</p>
+                <p className="text-2xl font-bold text-gray-900">{safePlugins.length}</p>
+              </div>
+            </div>
+          </div>
+          <div className="relative overflow-hidden bg-white rounded-2xl shadow-lg shadow-black/5 border border-gray-100 p-5">
+            <div className="absolute top-0 left-0 right-0 h-1 bg-gradient-to-r from-emerald-500 to-teal-500" />
+            <div className="flex items-center gap-3">
+              <div className="p-2 bg-emerald-50 rounded-lg">
+                <CheckCircle2 className="w-5 h-5 text-emerald-500" />
+              </div>
+              <div>
+                <p className="text-xs text-gray-500 font-medium">Approved</p>
+                <p className="text-2xl font-bold text-emerald-600">
+                  {safePlugins.filter(p => p.status === 'approved').length}
+                </p>
+              </div>
+            </div>
+          </div>
+          <div className="relative overflow-hidden bg-white rounded-2xl shadow-lg shadow-black/5 border border-gray-100 p-5">
+            <div className="absolute top-0 left-0 right-0 h-1 bg-gradient-to-r from-amber-500 to-orange-500" />
+            <div className="flex items-center gap-3">
+              <div className="p-2 bg-amber-50 rounded-lg">
+                <Clock className="w-5 h-5 text-amber-500" />
+              </div>
+              <div>
+                <p className="text-xs text-gray-500 font-medium">Pending</p>
+                <p className="text-2xl font-bold text-amber-600">
+                  {safePlugins.filter(p => p.status === 'pending').length}
+                </p>
+              </div>
+            </div>
+          </div>
+          <div className="relative overflow-hidden bg-white rounded-2xl shadow-lg shadow-black/5 border border-gray-100 p-5">
+            <div className="absolute top-0 left-0 right-0 h-1 bg-gradient-to-r from-blue-500 to-cyan-500" />
+            <div className="flex items-center gap-3">
+              <div className="p-2 bg-blue-50 rounded-lg">
+                <Download className="w-5 h-5 text-blue-500" />
+              </div>
+              <div>
+                <p className="text-xs text-gray-500 font-medium">Downloads</p>
+                <p className="text-2xl font-bold text-blue-600">{totalDownloads}</p>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        {error && (
+          <div className="mb-6 p-4 bg-red-500/10 border border-red-500/20 text-red-600 rounded-2xl">
+            {error}
+          </div>
+        )}
+
+        {loading && safePlugins.length === 0 ? (
+          <div className="flex items-center justify-center py-20">
+            <LoadingSpinner size="lg" />
+          </div>
+        ) : safePlugins.length === 0 ? (
+          <div className="bg-white rounded-2xl shadow-xl shadow-black/5 border border-gray-100 p-12">
+            <EmptyState
+              icon={Package}
+              title="No plugins published yet"
+              description="Publish your first plugin to get started"
+            />
+          </div>
+        ) : (
+          <div className="space-y-3">
+            {safePlugins.map(plugin => (
+              <div
+                key={plugin.id}
+                className="group bg-white rounded-2xl border border-gray-100 hover:border-violet-200 hover:shadow-lg hover:shadow-violet-500/5 transition-all duration-300 p-5"
+              >
+                <div className="flex items-start gap-4">
+                  <div className="w-12 h-12 rounded-xl bg-gradient-to-br from-violet-100 to-fuchsia-100 flex items-center justify-center text-lg font-bold text-violet-600 shrink-0">
+                    {plugin.name.charAt(0).toUpperCase()}
+                  </div>
+                  <div className="flex-1 min-w-0">
+                    <div className="flex items-center gap-2">
+                      <h3 className="text-base font-semibold text-gray-900 group-hover:text-violet-700 transition-colors">
+                        {plugin.name}
+                      </h3>
+                      <StatusBadge
+                        label={plugin.status}
+                        colorScheme={statusColors[plugin.status] || 'gray'}
+                      />
+                    </div>
+                    <p className="text-xs text-gray-400 mt-0.5 font-mono">
+                      {plugin.slug} &middot; v{plugin.version}
+                    </p>
+                    {plugin.status === 'rejected' && plugin.rejectReason && (
+                      <p className="text-sm text-red-500 mt-1">Rejected: {plugin.rejectReason}</p>
+                    )}
+                    <p className="text-sm text-gray-500 mt-2 line-clamp-2 leading-relaxed">
+                      {plugin.description}
+                    </p>
+                    <div className="mt-2 flex items-center gap-4 text-xs text-gray-400">
+                      <span className="flex items-center gap-1">
+                        <Download className="w-3.5 h-3.5" />
+                        {plugin.downloadCount} downloads
+                      </span>
+                      <span>{new Date(plugin.createdAt).toLocaleDateString()}</span>
+                    </div>
+                  </div>
+                  <div className="flex items-center gap-1.5 shrink-0">
+                    <Link
+                      to={`/plugins/${plugin.slug}`}
+                      className="p-2.5 text-gray-400 hover:text-violet-500 hover:bg-violet-50 rounded-xl transition-all"
+                      title="View"
+                    >
+                      <ExternalLink className="w-4.5 h-4.5" />
+                    </Link>
+                    <button
+                      onClick={() => {
+                        if (confirm('Delete this plugin?')) {
+                          deletePlugin(plugin.slug)
+                        }
+                      }}
+                      className="p-2.5 text-gray-400 hover:text-red-500 hover:bg-red-50 rounded-xl transition-all"
+                      title="Delete"
+                    >
+                      <Trash2 className="w-4.5 h-4.5" />
+                    </button>
+                  </div>
+                </div>
+              </div>
+            ))}
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}