@meith/web 0.24.0 → 0.25.0

package/app/admin/plugins/page.tsx

@@ -2,15 +2,16 @@ import type { Metadata } from 'next'
 
 import { cn } from '@meith/ui'
 
+import { MarketplaceRefreshForm } from '@/components/admin/marketplace-forms'
 import { PluginEnableForm, PluginHealthResetForm } from '@/components/admin/plugin-forms'
 import { PANEL_CARD, PANEL_LIST, PANEL_NOTE, PANEL_ROW } from '@/components/shell/panel-list'
 import { PanelPage } from '@/components/shell/panel-page'
-import { ViewTabs } from '@/components/shell/view-tabs'
 import { adminPageContext } from '@/server/admin'
 import { getTranslator, tr } from '@/server/i18n'
+import { marketplaceUpdates } from '@/server/marketplace-admin'
 import { hookListeners, pluginInventory } from '@/server/plugin-admin'
-import { pluginFormsCopy } from '@/view/admin-panel-copy'
-import { catalogTabs } from '@/view/marketplace-panel'
+import { marketplaceFormsCopy, pluginFormsCopy } from '@/view/admin-panel-copy'
+import { formatTime } from '@/view/time'
 
 export async function generateMetadata(): Promise<Metadata> {
   return { title: await tr('page.plugins') }
@@ -23,6 +24,9 @@ export default async function AdminPluginsPage() {
   const { plugins, migrationsKnown } = await pluginInventory(t)
   const listeners = hookListeners()
   const copy = pluginFormsCopy(t)
+  const marketplaceCopy = marketplaceFormsCopy(t)
+  const updates = await marketplaceUpdates('plugin')
+  const now = new Date()
 
   return (
     <PanelPage
@@ -34,15 +38,18 @@ export default async function AdminPluginsPage() {
         </>
       }
     >
-      <ViewTabs
-        label={t.t('adminMarketplace.tabsLabel')}
-        tabs={catalogTabs({
-          installedHref: '/admin/plugins',
-          browseHref: '/admin/plugins/browse',
-          current: 'installed',
-          t,
-        })}
-      />
+      <section className="flex flex-wrap items-center justify-between gap-3">
+        <p className={PANEL_NOTE}>
+          {updates.unreachable
+            ? t.t('adminMarketplace.unreachable')
+            : updates.hasEverFetched && updates.fetchedAt !== null
+              ? t.t('adminMarketplace.lastChecked', {
+                  time: formatTime(updates.fetchedAt, now, t).label,
+                })
+              : t.t('adminMarketplace.neverChecked')}
+        </p>
+        <MarketplaceRefreshForm copy={marketplaceCopy} />
+      </section>
 
       {plugins.length === 0 ? (
         <p className={PANEL_NOTE}>{t.t('page.no-plugins-configured-this-board')}</p>
@@ -50,6 +57,7 @@ export default async function AdminPluginsPage() {
         <ul className={PANEL_LIST}>
           {plugins.map((plugin) => {
             const pending = plugin.migrations.filter((migration) => !migration.applied).length
+            const latestVersion = updates.latestByKey.get(plugin.key) ?? null
 
             return (
               <li key={plugin.key} className={PANEL_ROW}>
@@ -98,6 +106,12 @@ export default async function AdminPluginsPage() {
                     </span>
                   )}
 
+                  {latestVersion !== null && (
+                    <span className="w-fit rounded-full border border-border bg-accent px-2 py-0.5 text-xs font-medium text-foreground">
+                      {t.t('adminMarketplace.updateAvailable', { version: latestVersion })}
+                    </span>
+                  )}
+
                   {plugin.pages.length > 0 && (
                     <span className="flex flex-wrap items-center gap-x-2 gap-y-1 pt-1">
                       {plugin.pages.map((page) => (

package/app/admin/themes/page.tsx

@@ -3,18 +3,18 @@ import type { Metadata } from 'next'
 import { cn } from '@meith/ui'
 
 import { LogoUploadForm } from '@/components/admin/branding-forms'
+import { MarketplaceRefreshForm } from '@/components/admin/marketplace-forms'
 import { ThemeStateForms } from '@/components/admin/theme-forms'
-import { PANEL_CARD, PANEL_LIST, PANEL_ROW } from '@/components/shell/panel-list'
+import { PANEL_CARD, PANEL_LIST, PANEL_NOTE, PANEL_ROW } from '@/components/shell/panel-list'
 import { PanelPage } from '@/components/shell/panel-page'
-import { ViewTabs } from '@/components/shell/view-tabs'
 import { adminPageContext } from '@/server/admin'
 import { logoKey, logoSrc } from '@/server/branding'
 import { getTranslator, tr } from '@/server/i18n'
 import { MAX_IMAGE_BYTES } from '@/server/image-upload'
+import { marketplaceUpdates } from '@/server/marketplace-admin'
 import { themeListing } from '@/server/theme-admin'
-import { brandingFormsCopy } from '@/view/admin-panel-copy'
+import { brandingFormsCopy, marketplaceFormsCopy } from '@/view/admin-panel-copy'
 import { themeStateCopy } from '@/view/admin-theme-copy'
-import { catalogTabs } from '@/view/marketplace-panel'
 import { formatTime } from '@/view/time'
 
 export async function generateMetadata(): Promise<Metadata> {
@@ -33,18 +33,23 @@ export default async function AdminThemesPage() {
   const now = new Date()
   const brandingCopy = brandingFormsCopy(translator)
   const stateCopy = themeStateCopy(translator)
+  const marketplaceCopy = marketplaceFormsCopy(translator)
+  const updates = await marketplaceUpdates('theme')
 
   return (
     <PanelPage title={await tr('page.themes')} lede={translator.t('adminThemes.lede')}>
-      <ViewTabs
-        label={translator.t('adminMarketplace.tabsLabel')}
-        tabs={catalogTabs({
-          installedHref: '/admin/themes',
-          browseHref: '/admin/themes/browse',
-          current: 'installed',
-          t: translator,
-        })}
-      />
+      <section className="flex flex-wrap items-center justify-between gap-3">
+        <p className={PANEL_NOTE}>
+          {updates.unreachable
+            ? translator.t('adminMarketplace.unreachable')
+            : updates.hasEverFetched && updates.fetchedAt !== null
+              ? translator.t('adminMarketplace.lastChecked', {
+                  time: formatTime(updates.fetchedAt, now, translator).label,
+                })
+              : translator.t('adminMarketplace.neverChecked')}
+        </p>
+        <MarketplaceRefreshForm copy={marketplaceCopy} />
+      </section>
 
       <section className="flex flex-col gap-3">
         <div className="flex flex-col gap-1">
@@ -124,6 +129,14 @@ export default async function AdminThemesPage() {
                   </>
                 )}
               </span>
+
+              {updates.latestByKey.has(theme.key) && (
+                <span className="w-fit rounded-full border border-border bg-accent px-2 py-0.5 text-xs font-medium text-foreground">
+                  {translator.t('adminMarketplace.updateAvailable', {
+                    version: updates.latestByKey.get(theme.key) ?? '',
+                  })}
+                </span>
+              )}
             </span>
 
             <ThemeStateForms

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@meith/web",
-  "version": "0.24.0",
+  "version": "0.25.0",
   "description": "The board itself: the Next.js app, and the forum-web bin that materializes it into an external board workspace.",
   "license": "MIT",
   "repository": {
@@ -43,53 +43,53 @@
     "react-dom": "19.2.8",
     "tailwindcss": "^4.3.3",
     "typescript": "7.0.2",
-    "@meith/accounts": "0.24.0",
-    "@meith/admin": "0.24.0",
-    "@meith/antispam": "0.24.0",
-    "@meith/api": "0.24.0",
-    "@meith/attachments": "0.24.0",
-    "@meith/authorization": "0.24.0",
-    "@meith/avatars": "0.24.0",
-    "@meith/core": "0.24.0",
-    "@meith/db": "0.24.0",
-    "@meith/demo": "0.24.0",
-    "@meith/drafts": "0.24.0",
-    "@meith/drivers": "0.24.0",
-    "@meith/events": "0.24.0",
-    "@meith/forums": "0.24.0",
-    "@meith/groups": "0.24.0",
-    "@meith/i18n": "0.24.0",
-    "@meith/import": "0.24.0",
-    "@meith/install": "0.24.0",
-    "@meith/mail": "0.24.0",
-    "@meith/markdown": "0.24.0",
-    "@meith/marketplace": "0.24.0",
-    "@meith/messages": "0.24.0",
-    "@meith/moderation": "0.24.0",
-    "@meith/notifications": "0.24.0",
-    "@meith/plugin-calendar": "0.24.0",
-    "@meith/plugin-dues": "0.24.0",
-    "@meith/plugin-kit": "0.24.0",
-    "@meith/polls": "0.24.0",
-    "@meith/posts": "0.24.0",
-    "@meith/profile-fields": "0.24.0",
-    "@meith/relations": "0.24.0",
-    "@meith/reputation": "0.24.0",
-    "@meith/runtime": "0.24.0",
-    "@meith/search": "0.24.0",
-    "@meith/settings": "0.24.0",
-    "@meith/signatures": "0.24.0",
-    "@meith/subscriptions": "0.24.0",
-    "@meith/tasks": "0.24.0",
-    "@meith/theme-clubhouse": "0.24.0",
-    "@meith/theme-default": "0.24.0",
-    "@meith/theme-kit": "0.24.0",
-    "@meith/theme-midnight": "0.24.0",
-    "@meith/theme-phasebook": "0.24.0",
-    "@meith/theme-raidframe": "0.24.0",
-    "@meith/threads": "0.24.0",
-    "@meith/ui": "0.24.0",
-    "@meith/upgrade": "0.24.0"
+    "@meith/accounts": "0.25.0",
+    "@meith/admin": "0.25.0",
+    "@meith/antispam": "0.25.0",
+    "@meith/api": "0.25.0",
+    "@meith/attachments": "0.25.0",
+    "@meith/authorization": "0.25.0",
+    "@meith/avatars": "0.25.0",
+    "@meith/core": "0.25.0",
+    "@meith/db": "0.25.0",
+    "@meith/demo": "0.25.0",
+    "@meith/drafts": "0.25.0",
+    "@meith/drivers": "0.25.0",
+    "@meith/events": "0.25.0",
+    "@meith/forums": "0.25.0",
+    "@meith/groups": "0.25.0",
+    "@meith/i18n": "0.25.0",
+    "@meith/import": "0.25.0",
+    "@meith/install": "0.25.0",
+    "@meith/mail": "0.25.0",
+    "@meith/markdown": "0.25.0",
+    "@meith/marketplace": "0.25.0",
+    "@meith/messages": "0.25.0",
+    "@meith/moderation": "0.25.0",
+    "@meith/notifications": "0.25.0",
+    "@meith/plugin-calendar": "0.25.0",
+    "@meith/plugin-dues": "0.25.0",
+    "@meith/plugin-kit": "0.25.0",
+    "@meith/polls": "0.25.0",
+    "@meith/posts": "0.25.0",
+    "@meith/profile-fields": "0.25.0",
+    "@meith/relations": "0.25.0",
+    "@meith/reputation": "0.25.0",
+    "@meith/runtime": "0.25.0",
+    "@meith/search": "0.25.0",
+    "@meith/settings": "0.25.0",
+    "@meith/signatures": "0.25.0",
+    "@meith/subscriptions": "0.25.0",
+    "@meith/tasks": "0.25.0",
+    "@meith/theme-clubhouse": "0.25.0",
+    "@meith/theme-default": "0.25.0",
+    "@meith/theme-kit": "0.25.0",
+    "@meith/theme-midnight": "0.25.0",
+    "@meith/theme-phasebook": "0.25.0",
+    "@meith/theme-raidframe": "0.25.0",
+    "@meith/threads": "0.25.0",
+    "@meith/ui": "0.25.0",
+    "@meith/upgrade": "0.25.0"
   },
   "scripts": {
     "dev": "next dev",

package/src/server/container.ts

@@ -305,6 +305,10 @@ function buildPostgres(onBypass: (e: BypassEvent) => void): Container {
         themeTokens: Object.fromEntries(
           Object.values(forumConfig.themes).map((theme) => [theme.key, theme.tokens]),
         ),
+        themeVersions: Object.values(forumConfig.themes).map((theme) => ({
+          key: theme.key,
+          version: theme.theme?.version ?? null,
+        })),
         files: drivers().files,
         images: imageProcessor,
         plugins: activeDefinitions(),

package/src/server/marketplace-actions.ts

@@ -18,8 +18,8 @@ export async function refreshMarketplaceAction(
 
     const result = await refreshMarketplaceNow()
 
-    revalidatePath('/admin/plugins/browse')
-    revalidatePath('/admin/themes/browse')
+    revalidatePath('/admin/plugins')
+    revalidatePath('/admin/themes')
 
     await recordAdminAction({
       action: 'marketplace.refresh',

package/src/server/marketplace-admin.ts

@@ -1,6 +1,6 @@
 import 'server-only'
 
-import { env, logger, readPluginEnv } from '@meith/core'
+import { env, logger } from '@meith/core'
 import { getDb, PostgresMarketplaceCacheRepository } from '@meith/db'
 import {
   type CachedMarketplace,
@@ -8,8 +8,6 @@ import {
   EMPTY_CACHE,
   type InstalledEntry,
   type ListingKind,
-  type ListingStatus,
-  type MarketplaceListing,
   MEITH_VERSION,
   PLUGIN_API_MAJOR,
   refreshCatalog,
@@ -27,28 +25,6 @@ const BUILD_INFO = {
   themeApiMajor: THEME_API_MAJOR,
 }
 
-function onStockImage(): boolean {
-  return readPluginEnv('BOARD_PLUGINS_MANIFEST') !== undefined
-}
-
-const MAX_NAME_LENGTH = 120
-const MAX_DESCRIPTION_LENGTH = 500
-const MAX_LICENCE_LENGTH = 100
-const MAX_REASON_LENGTH = 300
-
-function truncate(value: string, max: number): string {
-  return value.length > max ? `${value.slice(0, max - 1)}…` : value
-}
-
-function safeHttpsUrl(value: string): string | null {
-  try {
-    const url = new URL(value)
-    return url.protocol === 'https:' ? url.toString() : null
-  } catch {
-    return null
-  }
-}
-
 export function marketplaceCacheRepository(): PostgresMarketplaceCacheRepository | null {
   return env.DATA_SOURCE === 'postgres' ? new PostgresMarketplaceCacheRepository(getDb()) : null
 }
@@ -65,45 +41,6 @@ async function readCache(): Promise<CachedMarketplace> {
   }
 }
 
-export interface MarketplaceListingRow {
-  readonly key: string
-  readonly kind: ListingKind
-  readonly name: string
-  readonly description: string
-  readonly version: string
-  readonly package: string
-  readonly licence: string
-  readonly repositoryUrl: string | null
-  readonly screenshotHrefs: readonly string[]
-  readonly status: ListingStatus
-  readonly incompatibleReason: string | null
-  readonly installedVersion: string | null
-  readonly installSteps: readonly string[] | null
-  readonly onStockImage: boolean
-}
-
-export interface MarketplaceCatalogView {
-  readonly listings: readonly MarketplaceListingRow[]
-  readonly fetchedAt: Date | null
-  readonly hasEverFetched: boolean
-  readonly unreachable: boolean
-  readonly errorMessage: string | null
-}
-
-function installSteps(kind: ListingKind, packageName: string): readonly string[] {
-  return kind === 'plugin'
-    ? [
-        `npm install ${packageName}`,
-        `community plugin:add ${packageName}`,
-        'Rebuild and redeploy for it to take effect.',
-      ]
-    : [
-        `npm install ${packageName}`,
-        'Register it in community.config.ts (and set it as defaultTheme if it should be the board default).',
-        'Rebuild and redeploy for it to take effect.',
-      ]
-}
-
 async function pluginInstalledEntries(): Promise<ReadonlyMap<string, InstalledEntry>> {
   const map = new Map<string, InstalledEntry>()
   for (const plugin of configuredPlugins()) {
@@ -116,70 +53,38 @@ async function pluginInstalledEntries(): Promise<ReadonlyMap<string, InstalledEn
 async function themeInstalledEntries(): Promise<ReadonlyMap<string, InstalledEntry>> {
   const map = new Map<string, InstalledEntry>()
   for (const theme of await themeListing()) {
-    map.set(theme.key, { enabled: theme.enabled, version: null })
+    map.set(theme.key, { enabled: theme.enabled, version: theme.version })
   }
   return map
 }
 
-function screenshotHref(listingKey: string, index: number): string {
-  return `/admin/api/marketplace/screenshot?key=${encodeURIComponent(listingKey)}&index=${index}`
-}
-
-function toRow(
-  listing: MarketplaceListing,
-  installed: InstalledEntry | null,
-): MarketplaceListingRow {
-  const { status, incompatibleReason } = computeListingStatus({ ...listing, installed }, BUILD_INFO)
-
-  return {
-    key: listing.key,
-    kind: listing.kind,
-    name: truncate(listing.name, MAX_NAME_LENGTH),
-    description: truncate(listing.description, MAX_DESCRIPTION_LENGTH),
-    version: listing.version,
-    package: listing.package,
-    licence: truncate(listing.licence, MAX_LICENCE_LENGTH),
-    repositoryUrl: safeHttpsUrl(listing.repository),
-    screenshotHrefs: listing.screenshots.map((_, index) => screenshotHref(listing.key, index)),
-    status,
-    incompatibleReason:
-      incompatibleReason === null ? null : truncate(incompatibleReason, MAX_REASON_LENGTH),
-    installedVersion: installed?.version ?? null,
-    installSteps: status === 'not-installed' ? installSteps(listing.kind, listing.package) : null,
-    onStockImage: status === 'not-installed' && onStockImage(),
-  }
+export interface MarketplaceUpdatesView {
+  readonly latestByKey: ReadonlyMap<string, string>
+  readonly fetchedAt: Date | null
+  readonly hasEverFetched: boolean
+  readonly unreachable: boolean
 }
 
-export async function marketplaceCatalog(kind: ListingKind): Promise<MarketplaceCatalogView> {
+export async function marketplaceUpdates(kind: ListingKind): Promise<MarketplaceUpdatesView> {
   const cache = await readCache()
   const installed =
     kind === 'plugin' ? await pluginInstalledEntries() : await themeInstalledEntries()
 
-  const listings = (cache.feed?.listings ?? [])
-    .filter((listing) => listing.kind === kind)
-    .map((listing) => toRow(listing, installed.get(listing.key) ?? null))
+  const latestByKey = new Map<string, string>()
+  for (const listing of cache.feed?.listings ?? []) {
+    if (listing.kind !== kind) continue
+    const entry = installed.get(listing.key)
+    if (entry === undefined) continue
+
+    const { status } = computeListingStatus({ ...listing, installed: entry }, BUILD_INFO)
+    if (status === 'update-available') latestByKey.set(listing.key, listing.version)
+  }
 
   return {
-    listings,
+    latestByKey,
     fetchedAt: cache.fetchedAt,
     hasEverFetched: cache.fetchedAt !== null,
     unreachable: cache.error !== null,
-    errorMessage: cache.error,
-  }
-}
-
-export async function marketplaceScreenshotUrl(key: string, index: number): Promise<string | null> {
-  const cache = await readCache()
-  if (cache.feed === null || cache.sourceUrl === null) return null
-
-  const listing = cache.feed.listings.find((entry) => entry.key === key)
-  const path = listing?.screenshots[index]
-  if (path === undefined) return null
-
-  try {
-    return new URL(path, cache.sourceUrl).toString()
-  } catch {
-    return null
   }
 }
 
@@ -194,7 +99,10 @@ export async function refreshMarketplaceNow(): Promise<{
   }
 
   const url = (await getSettingsUncached()).get('marketplace.feed_url')
-  const pluginEntries = await pluginInstalledEntries()
+  const [pluginEntries, themeEntries] = await Promise.all([
+    pluginInstalledEntries(),
+    themeInstalledEntries(),
+  ])
   const notifications = notificationService()
 
   const result = await refreshCatalog({
@@ -202,7 +110,7 @@ export async function refreshMarketplaceNow(): Promise<{
     repository,
     build: BUILD_INFO,
     resolveInstalled: (listing) =>
-      listing.kind === 'plugin' ? (pluginEntries.get(listing.key) ?? null) : null,
+      (listing.kind === 'plugin' ? pluginEntries : themeEntries).get(listing.key) ?? null,
     notifyUpdate: async (listing) => {
       if (notifications === null) return
       await notifications.raiseForAdministrators({
@@ -213,7 +121,7 @@ export async function refreshMarketplaceNow(): Promise<{
           package: listing.package,
           version: listing.version,
         },
-        href: '/admin/plugins/browse',
+        href: listing.kind === 'plugin' ? '/admin/plugins' : '/admin/themes',
         dedupeKey: `marketplace.update_available:${listing.key}:${listing.version}`,
       })
     },

package/src/server/theme-admin.ts

@@ -42,6 +42,7 @@ export interface ThemeAdminView {
 export interface ThemeListing {
   readonly key: string
   readonly title: string
+  readonly version: string | null
   readonly isBuildTheme: boolean
   readonly isDefault: boolean
   readonly enabled: boolean
@@ -82,6 +83,7 @@ export async function themeListing(): Promise<readonly ThemeListing[]> {
     return {
       key: theme.key,
       title: theme.title,
+      version: theme.theme?.version ?? null,
       isBuildTheme: theme.key === buildThemeKey,
       isDefault:
         claimed === undefined || byKey.get(claimed.key)?.enabled === false

package/src/server/upgrade-notice.ts

@@ -6,7 +6,7 @@ import { planUpgrade, type UpgradeState, upgradeNotice } from '@meith/upgrade'
 
 import { activeDefinitions } from './plugin-host'
 
-export const CODE_VERSION = '0.24.0'
+export const CODE_VERSION = '0.25.0'
 
 export async function pendingUpgradeNotice(): Promise<string | null> {
   if (env.DATA_SOURCE !== 'postgres') return null

package/app/admin/api/marketplace/screenshot/route.ts

@@ -1,63 +0,0 @@
-import type { NextRequest } from 'next/server'
-
-import { readCappedBody } from '@meith/marketplace'
-
-import { requireAdmin } from '@/server/admin'
-import { marketplaceScreenshotUrl } from '@/server/marketplace-admin'
-
-export const dynamic = 'force-dynamic'
-
-const TIMEOUT_MS = 10_000
-const MAX_BYTES = 5_000_000
-
-function fail(status: number, message: string): Response {
-  return new Response(message, {
-    status,
-    headers: { 'Content-Type': 'text/plain', 'Cache-Control': 'no-store' },
-  })
-}
-
-export async function GET(request: NextRequest): Promise<Response> {
-  try {
-    await requireAdmin()
-  } catch {
-    return fail(403, 'Enter the control panel and try again.')
-  }
-
-  const key = request.nextUrl.searchParams.get('key') ?? ''
-  const index = Number(request.nextUrl.searchParams.get('index') ?? '')
-  if (key === '' || !Number.isInteger(index) || index < 0) {
-    return fail(400, 'A screenshot needs a listing key and an index.')
-  }
-
-  const url = await marketplaceScreenshotUrl(key, index)
-  if (url === null) return fail(404, 'No such screenshot.')
-
-  const controller = new AbortController()
-  const timeout = setTimeout(() => controller.abort(), TIMEOUT_MS)
-
-  try {
-    const upstream = await fetch(url, {
-      signal: controller.signal,
-      headers: { accept: 'image/png' },
-      redirect: 'manual',
-    })
-    if (!upstream.ok) return fail(502, 'The catalog host did not answer with the screenshot.')
-
-    const bytes = await readCappedBody(upstream, MAX_BYTES)
-    if (bytes === null) return fail(502, 'The screenshot was larger than expected.')
-
-    return new Response(bytes.buffer as ArrayBuffer, {
-      headers: {
-        'Content-Type': 'image/png',
-        'X-Content-Type-Options': 'nosniff',
-        'Content-Security-Policy': "default-src 'none'; sandbox",
-        'Cache-Control': 'private, max-age=3600',
-      },
-    })
-  } catch {
-    return fail(502, 'Could not reach the catalog host.')
-  } finally {
-    clearTimeout(timeout)
-  }
-}

package/app/admin/plugins/browse/page.tsx

@@ -1,70 +0,0 @@
-import type { Metadata } from 'next'
-
-import { MarketplaceRefreshForm } from '@/components/admin/marketplace-forms'
-import { MarketplaceListingCard } from '@/components/admin/marketplace-listing'
-import { PANEL_NOTE } from '@/components/shell/panel-list'
-import { PanelPage } from '@/components/shell/panel-page'
-import { ViewTabs } from '@/components/shell/view-tabs'
-import { adminPageContext } from '@/server/admin'
-import { getTranslator, tr } from '@/server/i18n'
-import { marketplaceCatalog } from '@/server/marketplace-admin'
-import { marketplaceFormsCopy } from '@/view/admin-panel-copy'
-import { catalogTabs } from '@/view/marketplace-panel'
-import { formatTime } from '@/view/time'
-
-export async function generateMetadata(): Promise<Metadata> {
-  return { title: await tr('adminMarketplace.browsePluginsTitle') }
-}
-
-export default async function AdminPluginsBrowsePage() {
-  if ((await adminPageContext()) === null) return null
-
-  const t = await getTranslator()
-  const catalog = await marketplaceCatalog('plugin')
-  const copy = marketplaceFormsCopy(t)
-  const now = new Date()
-
-  return (
-    <PanelPage
-      title={t.t('adminMarketplace.browsePluginsTitle')}
-      lede={t.t('adminMarketplace.browseLede')}
-    >
-      <ViewTabs
-        label={t.t('adminMarketplace.tabsLabel')}
-        tabs={catalogTabs({
-          installedHref: '/admin/plugins',
-          browseHref: '/admin/plugins/browse',
-          current: 'browse',
-          t,
-        })}
-        aside={
-          catalog.fetchedAt !== null
-            ? t.t('adminMarketplace.lastFetched', {
-                time: formatTime(catalog.fetchedAt, now, t).label,
-              })
-            : undefined
-        }
-      />
-
-      <MarketplaceRefreshForm copy={copy} />
-
-      {catalog.unreachable && <p className={PANEL_NOTE}>{t.t('adminMarketplace.unreachable')}</p>}
-
-      {!catalog.unreachable && !catalog.hasEverFetched && (
-        <p className={PANEL_NOTE}>{t.t('adminMarketplace.neverFetched')}</p>
-      )}
-
-      {catalog.hasEverFetched && catalog.listings.length === 0 && (
-        <p className={PANEL_NOTE}>{t.t('adminMarketplace.emptyPlugins')}</p>
-      )}
-
-      {catalog.listings.length > 0 && (
-        <ul className="flex flex-col gap-4">
-          {catalog.listings.map((listing) => (
-            <MarketplaceListingCard key={listing.key} listing={listing} t={t} />
-          ))}
-        </ul>
-      )}
-    </PanelPage>
-  )
-}

package/app/admin/themes/browse/page.tsx

@@ -1,70 +0,0 @@
-import type { Metadata } from 'next'
-
-import { MarketplaceRefreshForm } from '@/components/admin/marketplace-forms'
-import { MarketplaceListingCard } from '@/components/admin/marketplace-listing'
-import { PANEL_NOTE } from '@/components/shell/panel-list'
-import { PanelPage } from '@/components/shell/panel-page'
-import { ViewTabs } from '@/components/shell/view-tabs'
-import { adminPageContext } from '@/server/admin'
-import { getTranslator, tr } from '@/server/i18n'
-import { marketplaceCatalog } from '@/server/marketplace-admin'
-import { marketplaceFormsCopy } from '@/view/admin-panel-copy'
-import { catalogTabs } from '@/view/marketplace-panel'
-import { formatTime } from '@/view/time'
-
-export async function generateMetadata(): Promise<Metadata> {
-  return { title: await tr('adminMarketplace.browseThemesTitle') }
-}
-
-export default async function AdminThemesBrowsePage() {
-  if ((await adminPageContext()) === null) return null
-
-  const t = await getTranslator()
-  const catalog = await marketplaceCatalog('theme')
-  const copy = marketplaceFormsCopy(t)
-  const now = new Date()
-
-  return (
-    <PanelPage
-      title={t.t('adminMarketplace.browseThemesTitle')}
-      lede={t.t('adminMarketplace.browseLede')}
-    >
-      <ViewTabs
-        label={t.t('adminMarketplace.tabsLabel')}
-        tabs={catalogTabs({
-          installedHref: '/admin/themes',
-          browseHref: '/admin/themes/browse',
-          current: 'browse',
-          t,
-        })}
-        aside={
-          catalog.fetchedAt !== null
-            ? t.t('adminMarketplace.lastFetched', {
-                time: formatTime(catalog.fetchedAt, now, t).label,
-              })
-            : undefined
-        }
-      />
-
-      <MarketplaceRefreshForm copy={copy} />
-
-      {catalog.unreachable && <p className={PANEL_NOTE}>{t.t('adminMarketplace.unreachable')}</p>}
-
-      {!catalog.unreachable && !catalog.hasEverFetched && (
-        <p className={PANEL_NOTE}>{t.t('adminMarketplace.neverFetched')}</p>
-      )}
-
-      {catalog.hasEverFetched && catalog.listings.length === 0 && (
-        <p className={PANEL_NOTE}>{t.t('adminMarketplace.emptyThemes')}</p>
-      )}
-
-      {catalog.listings.length > 0 && (
-        <ul className="flex flex-col gap-4">
-          {catalog.listings.map((listing) => (
-            <MarketplaceListingCard key={listing.key} listing={listing} t={t} />
-          ))}
-        </ul>
-      )}
-    </PanelPage>
-  )
-}

package/src/components/admin/marketplace-listing.tsx

@@ -1,114 +0,0 @@
-import type { Translator } from '@meith/i18n'
-import { cn } from '@meith/ui'
-
-import { PANEL_CARD } from '@/components/shell/panel-list'
-import type { MarketplaceListingRow } from '@/server/marketplace-admin'
-import { type StatusTone, statusBadge } from '@/view/marketplace-panel'
-
-const TONE_CLASS: Readonly<Record<StatusTone, string>> = {
-  active: 'bg-primary text-primary-foreground',
-  muted: 'border border-border text-muted-foreground',
-  warning: 'border border-border bg-accent text-foreground font-medium',
-  destructive: 'bg-destructive/10 text-destructive',
-}
-
-export function MarketplaceListingCard({
-  listing,
-  t,
-}: {
-  listing: MarketplaceListingRow
-  t: Translator
-}) {
-  const badge = statusBadge(listing.status, t)
-
-  return (
-    <li className={cn(PANEL_CARD, 'gap-3')}>
-      <div className="flex flex-wrap items-start justify-between gap-2">
-        <div className="flex min-w-0 flex-col gap-0.5">
-          <span className="flex flex-wrap items-center gap-2">
-            <span className="text-sm font-medium">{listing.name}</span>
-            <span className="text-xs text-muted-foreground">{listing.version}</span>
-          </span>
-          <span className="truncate font-mono text-xs text-muted-foreground">
-            {listing.key} · {listing.package}
-          </span>
-        </div>
-        <span className={cn('shrink-0 rounded-full px-2 py-0.5 text-xs', TONE_CLASS[badge.tone])}>
-          {badge.label}
-        </span>
-      </div>
-
-      {listing.screenshotHrefs.length > 0 && (
-        <div className="flex flex-wrap gap-2">
-          {listing.screenshotHrefs.map((href) => (
-            <img
-              key={href}
-              src={href}
-              alt=""
-              loading="lazy"
-              className="h-28 w-auto rounded-md border border-border object-cover"
-            />
-          ))}
-        </div>
-      )}
-
-      <p className="text-sm text-muted-foreground">{listing.description}</p>
-
-      {listing.status === 'incompatible' && listing.incompatibleReason !== null && (
-        <p className="text-sm text-destructive">{listing.incompatibleReason}</p>
-      )}
-
-      {listing.status === 'update-available' && listing.installedVersion !== null && (
-        <p className="text-xs text-muted-foreground">
-          {t.t('adminMarketplace.installedVersion', { version: listing.installedVersion })}
-        </p>
-      )}
-
-      {listing.installSteps !== null && (
-        <div className="flex flex-col gap-1.5 rounded-md border border-border bg-surface p-3 text-sm">
-          <p className="font-medium">{t.t('adminMarketplace.installSteps')}</p>
-          <ol className="flex flex-col gap-1">
-            {listing.installSteps.map((step) => (
-              <li key={step} className="text-xs">
-                {step.startsWith('npm ') || step.startsWith('community ') ? (
-                  <code className="rounded bg-muted px-1.5 py-0.5">{step}</code>
-                ) : (
-                  <span className="text-muted-foreground">{step}</span>
-                )}
-              </li>
-            ))}
-          </ol>
-          <a
-            href="https://www.meith.dev/docs/marketplace"
-            rel="noopener noreferrer"
-            className="w-fit text-xs font-medium text-foreground underline decoration-border underline-offset-2 hover:decoration-foreground"
-          >
-            {t.t('adminMarketplace.installDocsLink')}
-          </a>
-          {listing.onStockImage && (
-            <a
-              href="https://www.meith.dev/docs/marketplace#moving-to-a-custom-board"
-              rel="noopener noreferrer"
-              className="w-fit text-xs font-medium text-foreground underline decoration-border underline-offset-2 hover:decoration-foreground"
-            >
-              {t.t('adminMarketplace.graduationLink')}
-            </a>
-          )}
-        </div>
-      )}
-
-      <div className="flex flex-wrap items-center gap-3 text-xs text-muted-foreground">
-        <span>{listing.licence}</span>
-        {listing.repositoryUrl !== null && (
-          <a
-            href={listing.repositoryUrl}
-            rel="noopener noreferrer"
-            className="font-medium text-foreground underline decoration-border underline-offset-2 hover:decoration-foreground"
-          >
-            {t.t('adminMarketplace.repository')}
-          </a>
-        )}
-      </div>
-    </li>
-  )
-}

package/src/view/marketplace-panel.ts

@@ -1,51 +0,0 @@
-import type { Translator } from '@meith/i18n'
-import type { ListingStatus } from '@meith/marketplace'
-
-import type { ViewTab } from '@/components/shell/view-tabs'
-
-export type StatusTone = 'active' | 'muted' | 'warning' | 'destructive'
-
-export interface StatusBadge {
-  readonly label: string
-  readonly tone: StatusTone
-}
-
-const STATUS_KEYS: Readonly<Record<ListingStatus, string>> = {
-  active: 'adminMarketplace.status.active',
-  'installed-disabled': 'adminMarketplace.status.installedDisabled',
-  'not-installed': 'adminMarketplace.status.notInstalled',
-  'update-available': 'adminMarketplace.status.updateAvailable',
-  incompatible: 'adminMarketplace.status.incompatible',
-}
-
-const STATUS_TONES: Readonly<Record<ListingStatus, StatusTone>> = {
-  active: 'active',
-  'installed-disabled': 'muted',
-  'not-installed': 'muted',
-  'update-available': 'warning',
-  incompatible: 'destructive',
-}
-
-export function statusBadge(status: ListingStatus, t: Translator): StatusBadge {
-  return { label: t.t(STATUS_KEYS[status]), tone: STATUS_TONES[status] }
-}
-
-export function catalogTabs(input: {
-  readonly installedHref: string
-  readonly browseHref: string
-  readonly current: 'installed' | 'browse'
-  readonly t: Translator
-}): readonly ViewTab[] {
-  return [
-    {
-      href: input.installedHref,
-      label: input.t.t('adminMarketplace.tab.installed'),
-      isCurrent: input.current === 'installed',
-    },
-    {
-      href: input.browseHref,
-      label: input.t.t('adminMarketplace.tab.browse'),
-      isCurrent: input.current === 'browse',
-    },
-  ]
-}