@meith/web 0.16.0

package/src/components/admin/mail-test-card.tsx

@@ -0,0 +1,90 @@
+'use client'
+
+import { useActionState } from 'react'
+
+import { PANEL_CARD } from '@/components/shell/panel-list'
+import { EMPTY_STATE, type FormState } from '@/server/auth-form-state'
+import { sendTestMailAction } from '@/server/mail-test-actions'
+
+import { type Copy, fromCopy } from '../shell/copy'
+
+export function MailTestCard({
+  summary,
+  sends,
+  fromEnvironment,
+  copy,
+}: {
+  summary: string
+  sends: boolean
+  fromEnvironment: boolean
+  copy: Copy
+}) {
+  const [state, submit, pending] = useActionState<FormState, FormData>(
+    sendTestMailAction,
+    EMPTY_STATE,
+  )
+
+  return (
+    <section className={PANEL_CARD}>
+      <div className="flex flex-col gap-1">
+        <h2 className="font-heading text-lg font-semibold">
+          {fromCopy(copy, 'adminPanel.mail.title')}
+        </h2>
+        <p className="text-sm">
+          {summary}
+          {!sends && (
+            <span className="text-muted-foreground">
+              {' '}
+              {fromCopy(copy, 'adminPanel.mail.reachesNobody')}
+            </span>
+          )}
+        </p>
+      </div>
+
+      {fromEnvironment && (
+        <p className="rounded-md border border-border bg-muted/40 px-3 py-2 text-sm">
+          {copy['adminPanel.mail.driverOverridesLead']}
+          <code>MAIL_DRIVER</code>
+          {copy['adminPanel.mail.driverOverridesTail']}{' '}
+          {copy['adminPanel.mail.driverUntilUnsetLead']}
+          <code>MAIL_DRIVER</code>
+          {copy['adminPanel.mail.driverUntilUnsetTail']}
+        </p>
+      )}
+
+      {state.error !== undefined && (
+        <p
+          role="alert"
+          className="rounded-md border border-destructive bg-destructive/5 px-3 py-2 text-sm"
+        >
+          {state.error}
+        </p>
+      )}
+
+      {state.notice !== undefined && (
+        <p role="status" className="rounded-md border border-border bg-muted px-3 py-2 text-sm">
+          {state.notice}
+        </p>
+      )}
+
+      <form action={submit} className="flex flex-col gap-2">
+        <div>
+          <button
+            type="submit"
+            disabled={pending || !sends}
+            className="inline-flex h-9 items-center justify-center rounded-md bg-primary px-4 text-sm font-medium text-primary-foreground hover:opacity-90 disabled:opacity-60"
+          >
+            {pending
+              ? fromCopy(copy, 'adminPanel.mail.sending')
+              : fromCopy(copy, 'adminPanel.mail.send')}
+          </button>
+        </div>
+        <p className="text-xs text-muted-foreground">
+          {copy['adminPanel.mail.testNoteLead']}
+          <em>{fromCopy(copy, 'adminPanel.mail.testNoteSaved')}</em>
+          {copy['adminPanel.mail.testNoteTail']}
+        </p>
+      </form>
+    </section>
+  )
+}

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

@@ -0,0 +1,30 @@
+'use client'
+
+import { useActionState } from 'react'
+
+import { EMPTY_STATE } from '@/server/auth-form-state'
+import { refreshMarketplaceAction } from '@/server/marketplace-actions'
+
+import { FormError } from '../auth/form-controls'
+import { type Copy, fromCopy } from '../shell/copy'
+
+export function MarketplaceRefreshForm({ copy }: { copy: Copy }) {
+  const [state, action] = useActionState(refreshMarketplaceAction, EMPTY_STATE)
+
+  return (
+    <form action={action} className="flex flex-col gap-2">
+      <FormError message={state.error} />
+      {state.notice === 'refreshed' && (
+        <p role="status" className="text-sm text-muted-foreground">
+          {fromCopy(copy, 'adminPanel.marketplace.refreshed')}
+        </p>
+      )}
+      <button
+        type="submit"
+        className="inline-flex h-9 w-fit items-center justify-center rounded-md border border-border px-3 text-sm font-medium transition-colors hover:border-primary hover:bg-accent"
+      >
+        {fromCopy(copy, 'adminPanel.marketplace.refresh')}
+      </button>
+    </form>
+  )
+}

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

@@ -0,0 +1,123 @@
+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',
+}
+
+/**
+ * One catalog entry, plugin or theme alike — the row model already carries
+ * everything both browse pages need, so this is the one place that renders
+ * it. Every string here is either our own catalog copy or a value from
+ * `MarketplaceListingRow`, which has already capped lengths and validated
+ * URLs against the untrusted feed (see `apps/community/src/server/marketplace-admin.ts`);
+ * nothing here uses `dangerouslySetInnerHTML`, so the feed's own text is
+ * rendered as plain text no matter what it contains.
+ */
+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('pnpm ') || 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/components/admin/navigation-forms.tsx

@@ -0,0 +1,229 @@
+'use client'
+
+import { useActionState } from 'react'
+
+import { EMPTY_STATE } from '@/server/auth-form-state'
+import {
+  createNavigationItemAction,
+  deleteNavigationItemAction,
+  updateNavigationItemAction,
+} from '@/server/navigation-admin-actions'
+
+import { FormError, SubmitButton } from '../auth/form-controls'
+import { type Copy, fromCopy } from '../shell/copy'
+import { INPUT, Saved } from './form-bits'
+
+export interface AudienceChoice {
+  readonly value: string
+  readonly label: string
+}
+
+export interface GroupChoice {
+  readonly id: number
+  readonly title: string
+}
+
+export interface ParentChoice {
+  readonly id: number
+  readonly name: string
+}
+
+export interface NavigationItemValues {
+  readonly id: number
+  readonly parentId: number | null
+  readonly label: string
+  readonly href: string
+  readonly audience: string
+  readonly newTab: boolean
+  readonly enabled: boolean
+  readonly visibleToGroups: readonly number[]
+}
+
+function NavigationFields({
+  audiences,
+  groups,
+  parents,
+  values,
+  copy,
+}: {
+  audiences: readonly AudienceChoice[]
+  groups: readonly GroupChoice[]
+  parents: readonly ParentChoice[]
+  values?: NavigationItemValues
+  copy: Copy
+}) {
+  const chosen = new Set(values?.visibleToGroups ?? [])
+
+  return (
+    <>
+      <div className="flex flex-wrap items-end gap-3">
+        <label className="flex min-w-40 flex-1 flex-col gap-1 text-sm">
+          <span className="font-medium">{fromCopy(copy, 'adminNavigation.label')}</span>
+          <input name="label" defaultValue={values?.label ?? ''} className={INPUT} />
+          <span className="text-xs text-muted-foreground">
+            {fromCopy(copy, 'adminNavigation.labelHint')}
+          </span>
+        </label>
+
+        <label className="flex min-w-40 flex-1 flex-col gap-1 text-sm">
+          <span className="font-medium">{fromCopy(copy, 'adminNavigation.address')}</span>
+          <input name="href" defaultValue={values?.href ?? ''} className={INPUT} required />
+          <span className="text-xs text-muted-foreground">
+            {fromCopy(copy, 'adminNavigation.addressHint')}
+          </span>
+        </label>
+      </div>
+
+      <div className="flex flex-wrap items-end gap-3">
+        <label className="flex min-w-40 flex-1 flex-col gap-1 text-sm">
+          <span className="font-medium">{fromCopy(copy, 'adminNavigation.inside')}</span>
+          <select
+            name="parentId"
+            defaultValue={values?.parentId === null || values === undefined ? '' : values.parentId}
+            className={INPUT}
+          >
+            <option value="">{fromCopy(copy, 'adminNavigation.topLevel')}</option>
+            {parents
+              .filter((parent) => parent.id !== values?.id)
+              .map((parent) => (
+                <option key={parent.id} value={parent.id}>
+                  {parent.name}
+                </option>
+              ))}
+          </select>
+        </label>
+
+        <label className="flex min-w-40 flex-1 flex-col gap-1 text-sm">
+          <span className="font-medium">{fromCopy(copy, 'adminNavigation.audience')}</span>
+          <select name="audience" defaultValue={values?.audience ?? 'all'} className={INPUT}>
+            {audiences.map((audience) => (
+              <option key={audience.value} value={audience.value}>
+                {audience.label}
+              </option>
+            ))}
+          </select>
+        </label>
+      </div>
+
+      {groups.length > 0 && (
+        <fieldset className="flex flex-col gap-1 text-sm">
+          <legend className="font-medium">{fromCopy(copy, 'adminNavigation.groups')}</legend>
+          <div className="flex flex-wrap gap-x-4 gap-y-2 pt-1">
+            {groups.map((group) => (
+              <label key={group.id} className="flex items-center gap-2">
+                <input
+                  type="checkbox"
+                  name="groups"
+                  value={group.id}
+                  defaultChecked={chosen.has(group.id)}
+                  className="size-4"
+                />
+                <span>{group.title}</span>
+              </label>
+            ))}
+          </div>
+          <span className="text-xs text-muted-foreground">
+            {fromCopy(copy, 'adminNavigation.groupsHint')}
+          </span>
+        </fieldset>
+      )}
+
+      <div className="flex flex-wrap items-center gap-4">
+        <label className="flex items-center gap-2 text-sm">
+          <input
+            type="checkbox"
+            name="newTab"
+            value="1"
+            defaultChecked={values?.newTab ?? false}
+            className="size-4"
+          />
+          <span>{fromCopy(copy, 'adminNavigation.newTab')}</span>
+        </label>
+
+        <label className="flex items-center gap-2 text-sm">
+          <input
+            type="checkbox"
+            name="enabled"
+            value="1"
+            defaultChecked={values?.enabled ?? true}
+            className="size-4"
+          />
+          <span>{fromCopy(copy, 'adminNavigation.shown')}</span>
+        </label>
+      </div>
+    </>
+  )
+}
+
+export function NavigationItemRowForm({
+  item,
+  audiences,
+  groups,
+  parents,
+  copy,
+}: {
+  item: NavigationItemValues
+  audiences: readonly AudienceChoice[]
+  groups: readonly GroupChoice[]
+  parents: readonly ParentChoice[]
+  copy: Copy
+}) {
+  const [state, action] = useActionState(updateNavigationItemAction, EMPTY_STATE)
+  const [removeState, removeAction] = useActionState(deleteNavigationItemAction, EMPTY_STATE)
+
+  return (
+    <div className="flex flex-col gap-3 py-4">
+      <FormError message={state.error ?? removeState.error} />
+      <Saved when={state.notice === 'saved'}>{fromCopy(copy, 'admin.saved')}</Saved>
+
+      <form action={action} className="flex flex-col gap-3" noValidate>
+        <input type="hidden" name="id" value={item.id} />
+        <NavigationFields
+          audiences={audiences}
+          groups={groups}
+          parents={parents}
+          values={item}
+          copy={copy}
+        />
+
+        <span className="min-w-28">
+          <SubmitButton>{fromCopy(copy, 'adminContent.save')}</SubmitButton>
+        </span>
+      </form>
+
+      <form action={removeAction}>
+        <input type="hidden" name="id" value={item.id} />
+        <button type="submit" className="text-xs text-destructive hover:underline">
+          {fromCopy(copy, 'adminNavigation.removeThis')}
+        </button>
+      </form>
+    </div>
+  )
+}
+
+export function NewNavigationItemForm({
+  audiences,
+  groups,
+  parents,
+  copy,
+}: {
+  audiences: readonly AudienceChoice[]
+  groups: readonly GroupChoice[]
+  parents: readonly ParentChoice[]
+  copy: Copy
+}) {
+  const [state, action] = useActionState(createNavigationItemAction, EMPTY_STATE)
+
+  return (
+    <form action={action} className="flex flex-col gap-3" noValidate>
+      <FormError message={state.error} />
+      <Saved when={state.notice === 'saved'}>{fromCopy(copy, 'adminContent.added')}</Saved>
+
+      <NavigationFields audiences={audiences} groups={groups} parents={parents} copy={copy} />
+
+      <span className="min-w-28">
+        <SubmitButton>{fromCopy(copy, 'adminContent.add')}</SubmitButton>
+      </span>
+    </form>
+  )
+}