@meith/web 0.24.0 → 0.25.1

package/app/(board)/member/[id]/reputation/page.tsx

@@ -119,11 +119,11 @@ export default async function ReputationPage({
         )}
 
         {view.rows.length === 0 ? (
-          <p className="text-sm text-muted-foreground">
+          <p className="rounded-lg border border-border bg-card p-4 text-sm text-muted-foreground">
             {await tr('page.nobody-has-rated-them-yet')}
           </p>
         ) : (
-          <ul className="flex flex-col divide-y divide-border rounded-lg border border-border">
+          <ul className="flex flex-col divide-y divide-border rounded-lg border border-border bg-card">
             {view.rows.map((row) => (
               <li key={row.id} className="flex flex-col gap-1 px-4 py-3">
                 <div className="flex flex-wrap items-baseline gap-2 text-sm">

package/app/(board)/messages/[id]/page.tsx

@@ -2,6 +2,7 @@ import type { Metadata } from 'next'
 import { notFound } from 'next/navigation'
 
 import { postBodyHtml } from '@meith/markdown'
+import { Card, CardContent, CardFooter } from '@meith/ui'
 
 import { PanelPage } from '@/components/shell/panel-page'
 import { getContainer } from '@/server/container'
@@ -63,27 +64,34 @@ export default async function MessagePage({ params }: { params: Promise<{ id: st
           }
         : {})}
     >
-      <article
-        className="prose prose-sm max-w-none break-words"
-        dangerouslySetInnerHTML={{ __html: view.bodyHtml }}
-      />
+      <Card>
+        <CardContent className="p-4 sm:p-5">
+          <article
+            className="prose prose-sm max-w-none break-words"
+            dangerouslySetInnerHTML={{ __html: view.bodyHtml }}
+          />
+        </CardContent>
 
-      <div className="flex flex-wrap items-center gap-4 border-t border-border pt-4">
-        {view.actions.map((action) => (
-          <a
-            key={action.href}
-            href={action.href}
-            className="text-sm font-medium text-foreground underline decoration-border underline-offset-2 hover:decoration-foreground"
-          >
-            {action.label}
-          </a>
-        ))}
-        {view.reportHref !== null && (
-          <a href={view.reportHref} className="text-sm text-muted-foreground hover:text-foreground">
-            {await tr('page.report-this-message')}
-          </a>
-        )}
-      </div>
+        <CardFooter className="gap-4">
+          {view.actions.map((action) => (
+            <a
+              key={action.href}
+              href={action.href}
+              className="text-sm font-medium text-foreground underline decoration-border underline-offset-2 hover:decoration-foreground"
+            >
+              {action.label}
+            </a>
+          ))}
+          {view.reportHref !== null && (
+            <a
+              href={view.reportHref}
+              className="text-sm text-muted-foreground hover:text-foreground"
+            >
+              {await tr('page.report-this-message')}
+            </a>
+          )}
+        </CardFooter>
+      </Card>
 
       {view.tracking.length > 0 && (
         <section className="flex flex-col gap-2 rounded-lg border border-border bg-card p-4">

package/app/(board)/messages/page.tsx

@@ -110,7 +110,7 @@ export default async function MessagesPage({
       ) : null}
 
       {view.rows.length === 0 ? (
-        <p className="text-sm text-muted-foreground">
+        <p className="rounded-lg border border-border bg-card p-4 text-sm text-muted-foreground">
           {folder === 'inbox'
             ? translator.t('board.messages.emptyInbox')
             : folder === 'sent'
@@ -125,7 +125,7 @@ export default async function MessagesPage({
             copy={messageFormsCopy(await getTranslator())}
           />
 
-          <ul className="flex flex-col divide-y divide-border rounded-lg border border-border">
+          <ul className="flex flex-col divide-y divide-border rounded-lg border border-border bg-card">
             {view.rows.map((row) => (
               <li key={row.copyId} className="flex items-start gap-3 px-4 py-3">
                 <input

package/app/(board)/notifications/page.tsx

@@ -79,7 +79,9 @@ export default async function NotificationsPage({
       {notice !== null && <BoardNotice kind="info" message={notice} dismissHref="/notifications" />}
 
       {view.rows.length === 0 ? (
-        <p className="text-sm text-muted-foreground">{translator.t('board.notifications.empty')}</p>
+        <p className="rounded-lg border border-border bg-card p-4 text-sm text-muted-foreground">
+          {translator.t('board.notifications.empty')}
+        </p>
       ) : (
         <ul className="flex flex-col gap-3">
           {view.rows.map((row) => (

package/app/(board)/subscriptions/page.tsx

@@ -65,7 +65,9 @@ export default async function SubscriptionsPage({
       {notice !== null && <BoardNotice kind="info" message={notice} dismissHref="/subscriptions" />}
 
       {view.total === 0 ? (
-        <p className="text-sm text-muted-foreground">{await tr('page.subscriptions.none')}</p>
+        <p className="rounded-lg border border-border bg-card p-4 text-sm text-muted-foreground">
+          {await tr('page.subscriptions.none')}
+        </p>
       ) : (
         <>
           <Section
@@ -110,7 +112,9 @@ function Section({
       <h2 className="font-heading text-lg font-semibold">{title}</h2>
 
       {rows.length === 0 ? (
-        <p className="text-sm text-muted-foreground">{empty}</p>
+        <p className="rounded-lg border border-border bg-card p-4 text-sm text-muted-foreground">
+          {empty}
+        </p>
       ) : (
         <ul className="flex flex-col gap-3">
           {rows.map((row) => (

package/app/(board)/usercp/contacts/page.tsx

@@ -5,7 +5,7 @@ import { MAX_RELATIONS } from '@meith/relations'
 
 import { RemoveRelationForm } from '@/components/account/relation-forms'
 import { BoardNotice } from '@/components/shell/board-notice'
-import { PANEL_LIST } from '@/components/shell/panel-list'
+import { PANEL_LIST, PANEL_NOTE } from '@/components/shell/panel-list'
 import { PanelPage } from '@/components/shell/panel-page'
 import { getActor } from '@/server/context'
 import { getTranslator, tr } from '@/server/i18n'
@@ -68,9 +68,7 @@ export default async function ContactsPage({
         </h2>
 
         {view.buddies.length === 0 ? (
-          <p className="text-sm text-muted-foreground">
-            {translator.t('board.contacts.emptyBuddies')}
-          </p>
+          <p className={PANEL_NOTE}>{translator.t('board.contacts.emptyBuddies')}</p>
         ) : (
           <ul className={PANEL_LIST}>
             {view.buddies.map((row) => (
@@ -89,9 +87,7 @@ export default async function ContactsPage({
         </p>
 
         {view.ignored.length === 0 ? (
-          <p className="text-sm text-muted-foreground">
-            {translator.t('board.contacts.emptyIgnored')}
-          </p>
+          <p className={PANEL_NOTE}>{translator.t('board.contacts.emptyIgnored')}</p>
         ) : (
           <ul className={PANEL_LIST}>
             {view.ignored.map((row) => (

package/app/admin/api-tokens/page.tsx

@@ -1,6 +1,7 @@
 import type { Metadata } from 'next'
 
 import { IssueTokenForm, RevokeTokenForm } from '@/components/admin/api-token-forms'
+import { PANEL_CARD } from '@/components/shell/panel-list'
 import { PanelPage } from '@/components/shell/panel-page'
 import { adminPageContext } from '@/server/admin'
 import { buildApiTokenView } from '@/server/api-tokens-admin'
@@ -47,12 +48,12 @@ export default async function AdminApiTokensPage() {
       }
       gap="loose"
     >
-      <section className="flex flex-col gap-3">
+      <section className={PANEL_CARD}>
         <h2 className="font-heading text-lg font-semibold">{await tr('page.issue-token')}</h2>
         <IssueTokenForm scopes={view.scopes} copy={copy} />
       </section>
 
-      <section className="flex flex-col gap-3">
+      <section className={PANEL_CARD}>
         <h2 className="font-heading text-lg font-semibold">{await tr('page.existing-tokens')}</h2>
 
         {view.tokens.length === 0 ? (

package/app/admin/forums/[id]/page.tsx

@@ -47,28 +47,31 @@ export default async function AdminForumPage({ params }: { params: Promise<{ id:
       lede={t.t('adminForums.optionsLede')}
       gap="loose"
     >
-      <ForumOptionsForm
-        forum={{
-          id: forum.id,
-          type: forum.type,
-          title: options.title,
-          slug: options.slug,
-          description: options.description ?? '',
-          linkUrl: options.linkUrl ?? '',
-          displayOrder: options.displayOrder,
-          flags: {
-            isOpen: options.isOpen,
-            allowThreads: options.allowThreads,
-            allowReplies: options.allowReplies,
-            allowPolls: options.allowPolls,
-            allowAttachments: options.allowAttachments,
-            requiresPrefix: options.requiresPrefix,
-            moderateNewThreads: options.moderateNewThreads,
-            moderateNewPosts: options.moderateNewPosts,
-          },
-        }}
-        copy={forumAdminCopy(t)}
-      />
+      <section className={PANEL_CARD}>
+        <h2 className="font-heading text-lg font-semibold">{await tr('page.forum-options')}</h2>
+        <ForumOptionsForm
+          forum={{
+            id: forum.id,
+            type: forum.type,
+            title: options.title,
+            slug: options.slug,
+            description: options.description ?? '',
+            linkUrl: options.linkUrl ?? '',
+            displayOrder: options.displayOrder,
+            flags: {
+              isOpen: options.isOpen,
+              allowThreads: options.allowThreads,
+              allowReplies: options.allowReplies,
+              allowPolls: options.allowPolls,
+              allowAttachments: options.allowAttachments,
+              requiresPrefix: options.requiresPrefix,
+              moderateNewThreads: options.moderateNewThreads,
+              moderateNewPosts: options.moderateNewPosts,
+            },
+          }}
+          copy={forumAdminCopy(t)}
+        />
+      </section>
 
       <section className={PANEL_CARD}>
         <h2 className="font-heading text-lg font-semibold">{t.t('adminForums.move')}</h2>

package/app/admin/groups/memberships/page.tsx

@@ -44,13 +44,13 @@ export default async function AdminMembershipsPage() {
           }))}
           copy={groupAdminCopy(translator)}
         />
-      </section>
 
-      <p className="text-xs text-muted-foreground">
-        {translator.t('adminGroups.membershipsBefore')}{' '}
-        <strong>{translator.t('adminGroups.primary')}</strong>
-        {translator.t('adminGroups.membershipsAfter')}
-      </p>
+        <p className="border-t border-border pt-4 text-xs text-muted-foreground">
+          {translator.t('adminGroups.membershipsBefore')}{' '}
+          <strong>{translator.t('adminGroups.primary')}</strong>
+          {translator.t('adminGroups.membershipsAfter')}
+        </p>
+      </section>
     </PanelPage>
   )
 }

package/app/admin/groups/promotions/page.tsx

@@ -1,13 +1,11 @@
 import type { Metadata } from 'next'
 
-import { cn } from '@meith/ui'
-
 import {
   ApplyPromotionsForm,
   NewPromotionRuleForm,
   PromotionRuleRowForm,
 } from '@/components/admin/group-forms'
-import { PANEL_CARD, PANEL_LIST, PANEL_NOTE } from '@/components/shell/panel-list'
+import { PANEL_CARD } from '@/components/shell/panel-list'
 import { PanelPage } from '@/components/shell/panel-page'
 import { adminPageContext } from '@/server/admin'
 import {
@@ -93,7 +91,7 @@ export default async function AdminPromotionsPage() {
         <NewPromotionRuleForm groups={options} copy={copy} />
       </section>
 
-      <section className="flex flex-col gap-3">
+      <section className={PANEL_CARD}>
         <h2 className="font-heading text-lg font-semibold">
           {await tr('page.what-would-happen-now')}
         </h2>
@@ -102,24 +100,24 @@ export default async function AdminPromotionsPage() {
         </p>
 
         {result.complete ? null : (
-          <p className={PANEL_NOTE}>
+          <p className="text-sm text-muted-foreground">
             {translator.t('adminGroups.previewCapped', { count: result.examined })}
           </p>
         )}
 
         {result.outcomes.length === 0 ? (
-          <p className={PANEL_NOTE}>
+          <p className="text-sm text-muted-foreground">
             {stored.length === 0
               ? translator.t('adminGroups.nobodyNoRules')
               : translator.t('adminGroups.nobodyQualified')}
           </p>
         ) : (
           <>
-            <ul className={cn(PANEL_LIST, 'text-sm')}>
+            <ul className="flex flex-col divide-y divide-border text-sm">
               {result.outcomes.map((outcome) => (
                 <li
                   key={`${outcome.userId}:${outcome.ruleId}`}
-                  className="flex flex-wrap items-baseline gap-2 px-4 py-2"
+                  className="flex flex-wrap items-baseline gap-2 py-2 first:pt-0 last:pb-0"
                 >
                   <span className="font-medium">
                     {translator.t('adminGroups.member', { id: outcome.userId })}
@@ -132,18 +130,18 @@ export default async function AdminPromotionsPage() {
               ))}
             </ul>
 
-            <section className={PANEL_CARD}>
-              <h3 className="font-heading text-lg font-semibold">{await tr('page.run-it')}</h3>
+            <div className="flex flex-col gap-3 border-t border-border pt-4">
+              <h3 className="font-heading text-base font-semibold">{await tr('page.run-it')}</h3>
               <ApplyPromotionsForm count={result.outcomes.length} copy={copy} />
-            </section>
+            </div>
           </>
         )}
-      </section>
 
-      <p className="text-xs text-muted-foreground">
-        {translator.t('adminGroups.promotionNoteBefore')} <code>promotions.apply</code>
-        {translator.t('adminGroups.promotionNoteEnd')}
-      </p>
+        <p className="border-t border-border pt-4 text-xs text-muted-foreground">
+          {translator.t('adminGroups.promotionNoteBefore')} <code>promotions.apply</code>
+          {translator.t('adminGroups.promotionNoteEnd')}
+        </p>
+      </section>
     </PanelPage>
   )
 }

package/app/admin/log/page.tsx

@@ -1,6 +1,8 @@
 import type { Metadata } from 'next'
 
-import { PANEL_LIST } from '@/components/shell/panel-list'
+import { cn } from '@meith/ui'
+
+import { PANEL_CARD, PANEL_LIST, PANEL_NOTE } from '@/components/shell/panel-list'
 import { PanelPage } from '@/components/shell/panel-page'
 import { PanelPagination } from '@/components/shell/panel-pagination'
 import { adminPageContext } from '@/server/admin'
@@ -52,7 +54,7 @@ export default async function AdminLogPage({
       lede={await tr('page.every-administrative-moderation-action-newest')}
       width="wide"
     >
-      <form method="get" className="flex flex-wrap items-end gap-2">
+      <form method="get" className={cn(PANEL_CARD, 'flex-row flex-wrap items-end')}>
         <label className="flex flex-col gap-1 text-sm">
           <span className="font-medium">{translator.t('adminLog.action')}</span>
           <select
@@ -77,7 +79,7 @@ export default async function AdminLogPage({
       </form>
 
       {view.rows.length === 0 ? (
-        <p className="text-sm text-muted-foreground">{await tr('page.nothing-logged')}</p>
+        <p className={PANEL_NOTE}>{await tr('page.nothing-logged')}</p>
       ) : (
         <ul className={PANEL_LIST}>
           {view.rows.map((row) => (

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/security/page.tsx

@@ -1,8 +1,9 @@
 import type { Metadata } from 'next'
 
 import { AUTH_EVENT_KINDS } from '@meith/accounts'
+import { cn } from '@meith/ui'
 
-import { 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 { adminPageContext } from '@/server/admin'
 import { boardSecurityActivity } from '@/server/auth-events'
@@ -51,7 +52,7 @@ export default async function AdminSecurityPage({
       lede={translator.t('adminSecurity.lede')}
       width="wide"
     >
-      <form method="get" className="flex flex-wrap items-end gap-2">
+      <form method="get" className={cn(PANEL_CARD, 'flex-row flex-wrap items-end')}>
         <label className="flex flex-col gap-1 text-sm">
           <span className="font-medium">{translator.t('adminSecurity.kind')}</span>
           <select
@@ -76,7 +77,7 @@ export default async function AdminSecurityPage({
       </form>
 
       {page.length === 0 ? (
-        <p className="text-sm text-muted-foreground">{await tr('page.nothing-recorded-yet')}</p>
+        <p className={PANEL_NOTE}>{await tr('page.nothing-recorded-yet')}</p>
       ) : (
         <ul className={PANEL_LIST}>
           {page.map((event) => (

package/app/admin/system/page.tsx

@@ -11,7 +11,7 @@ import {
   ReindexSearchForm,
   RetryJobForm,
 } from '@/components/admin/system-forms'
-import { PANEL_CARD, PANEL_LIST, PANEL_NOTE, PANEL_ROW } from '@/components/shell/panel-list'
+import { PANEL_CARD } from '@/components/shell/panel-list'
 import { PanelPage } from '@/components/shell/panel-page'
 import { adminPageContext } from '@/server/admin'
 import { getTranslator, tr } from '@/server/i18n'
@@ -122,7 +122,7 @@ export default async function AdminSystemPage() {
         </section>
       )}
 
-      <section className="flex flex-col gap-3">
+      <section className={PANEL_CARD}>
         <h2 className="font-heading text-lg font-semibold">{translator.t('adminSystem.mail')}</h2>
         <p className="text-sm">
           {mail.summary}
@@ -152,14 +152,17 @@ export default async function AdminSystemPage() {
         <p className="text-sm text-muted-foreground">{translator.t('adminSystem.mailSchedule')}</p>
       </section>
 
-      <section className="flex flex-col gap-3">
+      <section className={PANEL_CARD}>
         <h2 className="font-heading text-lg font-semibold">{await tr('page.scheduled-tasks')}</h2>
         {scheduler.tasks.length === 0 ? (
-          <p className={PANEL_NOTE}>{translator.t('adminSystem.noTasks')}</p>
+          <p className="text-sm text-muted-foreground">{translator.t('adminSystem.noTasks')}</p>
         ) : (
-          <ul className={PANEL_LIST}>
+          <ul className="flex flex-col divide-y divide-border">
             {scheduler.tasks.map((task) => (
-              <li key={task.key} className={PANEL_ROW}>
+              <li
+                key={task.key}
+                className="flex flex-wrap items-center justify-between gap-x-3 gap-y-2 py-3 first:pt-0 last:pb-0"
+              >
                 <span className="flex min-w-0 flex-col">
                   <span className="truncate text-sm font-medium">
                     {task.titleKey === undefined ? task.key : translator.t(task.titleKey)}
@@ -198,7 +201,7 @@ export default async function AdminSystemPage() {
         )}
       </section>
 
-      <section className="flex flex-col gap-3">
+      <section className={PANEL_CARD}>
         <h2 className="font-heading text-lg font-semibold">{await tr('page.recent-runs')}</h2>
         {view.runs.length === 0 ? (
           <p className="text-sm text-muted-foreground">{await tr('page.nothing-has-run-yet')}</p>
@@ -227,7 +230,7 @@ export default async function AdminSystemPage() {
         )}
       </section>
 
-      <section className="flex flex-col gap-3">
+      <section className={PANEL_CARD}>
         <h2 className="font-heading text-lg font-semibold">
           {translator.t('adminSystem.volumes')}
         </h2>
@@ -243,7 +246,7 @@ export default async function AdminSystemPage() {
         </ul>
       </section>
 
-      <section className="flex flex-col gap-3">
+      <section className={PANEL_CARD}>
         <h2 className="font-heading text-lg font-semibold">
           {translator.t('adminSystem.recount')}
         </h2>
@@ -266,7 +269,7 @@ export default async function AdminSystemPage() {
         <RecountForm copy={copy} />
       </section>
 
-      <section className="flex flex-col gap-3">
+      <section className={PANEL_CARD}>
         <h2 className="font-heading text-lg font-semibold">{await tr('page.search-index')}</h2>
         <p className="text-sm text-muted-foreground">
           {translator.t('adminSystem.searchIndexHint')}

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