@meith/web 0.16.0

package/app/admin/content/attachments/page.tsx

@@ -0,0 +1,199 @@
+import type { Metadata } from 'next'
+
+import { cn } from '@meith/ui'
+
+import { DeleteAttachmentForm } from '@/components/admin/content-forms'
+import { PANEL_CARD, PANEL_LIST, PANEL_NOTE, PANEL_ROW } from '@/components/shell/panel-list'
+import { PanelPage } from '@/components/shell/panel-page'
+import { PanelPagination } from '@/components/shell/panel-pagination'
+import { adminPageContext } from '@/server/admin'
+import { attachmentAdminRepository } from '@/server/content-admin'
+import { getTranslator, tr } from '@/server/i18n'
+import { contentAdminCopy } from '@/view/admin-content-copy'
+import { formatBytes } from '@/view/attachments'
+import { offsetOf, readPage } from '@/view/pager'
+import { postLink } from '@/view/post-link'
+import { formatTime } from '@/view/time'
+
+export async function generateMetadata(): Promise<Metadata> {
+  return { title: await tr('page.attachments') }
+}
+
+const PAGE_SIZE = 50
+
+export default async function AdminAttachmentsPage({
+  searchParams,
+}: {
+  searchParams: Promise<Record<string, string | string[] | undefined>>
+}) {
+  if ((await adminPageContext()) === null) return null
+
+  const repository = attachmentAdminRepository()
+  if (repository === null) {
+    return (
+      <PanelPage title={await tr('page.attachments')} width="wide">
+        <p className="mt-2 text-sm text-muted-foreground">
+          {await tr('page.this-board-running-in-memory-sample-4')}
+        </p>
+      </PanelPage>
+    )
+  }
+
+  const params = await searchParams
+  const one = (name: string): string | undefined => {
+    const value = params[name]
+    const text = Array.isArray(value) ? value[0] : value
+    return text === undefined || text.trim() === '' ? undefined : text.trim()
+  }
+
+  const filename = one('filename')
+  const status = one('status')
+  const pageNumber = readPage(params)
+
+  const [page, totals] = await Promise.all([
+    repository.list({
+      ...(filename === undefined ? {} : { filename }),
+      ...(status === undefined ? {} : { status }),
+      offset: offsetOf(pageNumber, PAGE_SIZE),
+      limit: PAGE_SIZE,
+    }),
+    repository.totals(),
+  ])
+
+  const now = new Date()
+  const translator = await getTranslator()
+  const copy = contentAdminCopy(translator)
+  return (
+    <PanelPage
+      back={{ href: '/admin/content', label: translator.t('page.content') }}
+      title={await tr('page.attachments')}
+      lede={
+        <>
+          {translator.t('adminAttachments.ledeBefore')}{' '}
+          <strong>{translator.t('adminAttachments.ledeStrong')}</strong>
+          {translator.t('adminAttachments.ledeAfter')}
+        </>
+      }
+      width="wide"
+    >
+      <dl className={cn(PANEL_CARD, 'grid grid-cols-2 gap-4 sm:grid-cols-4')}>
+        <div>
+          <dt className="text-xs text-muted-foreground">
+            {translator.t('adminAttachments.files')}
+          </dt>
+          <dd className="text-lg">{totals.count}</dd>
+        </div>
+        <div>
+          <dt className="text-xs text-muted-foreground">
+            {translator.t('adminAttachments.stored')}
+          </dt>
+          <dd className="text-lg">{formatBytes(totals.bytes)}</dd>
+        </div>
+        <div>
+          <dt className="text-xs text-muted-foreground">{await tr('page.awaiting-processing')}</dt>
+          <dd className={totals.pending > 0 ? 'text-lg text-destructive' : 'text-lg'}>
+            {totals.pending}
+          </dd>
+        </div>
+        <div>
+          <dt className="text-xs text-muted-foreground">
+            {translator.t('adminAttachments.failed')}
+          </dt>
+          <dd className={totals.failed > 0 ? 'text-lg text-destructive' : 'text-lg'}>
+            {totals.failed}
+          </dd>
+        </div>
+      </dl>
+
+      <form method="get" className={cn(PANEL_CARD, 'flex-row flex-wrap items-end')}>
+        <label className="flex min-w-48 flex-1 flex-col gap-1 text-sm">
+          <span className="font-medium">{await tr('page.filename-contains')}</span>
+          <input
+            name="filename"
+            defaultValue={filename ?? ''}
+            className="w-full rounded-md border border-border bg-background px-3 py-2 text-sm"
+          />
+        </label>
+
+        <label className="flex flex-col gap-1 text-sm">
+          <span className="font-medium">{translator.t('adminAttachments.status')}</span>
+          <select
+            name="status"
+            defaultValue={status ?? ''}
+            className="rounded-md border border-border bg-background px-3 py-2 text-sm"
+          >
+            <option value="">{translator.t('adminAttachments.any')}</option>
+            <option value="ready">{translator.t('adminAttachments.ready')}</option>
+            <option value="pending">{await tr('page.awaiting-processing')}</option>
+            <option value="failed">{translator.t('adminAttachments.failed')}</option>
+          </select>
+        </label>
+
+        <button
+          type="submit"
+          className="inline-flex h-10 items-center rounded-md border border-border px-4 text-sm"
+        >
+          {translator.t('adminAttachments.filter')}
+        </button>
+      </form>
+
+      {page.rows.length === 0 ? (
+        <p className={PANEL_NOTE}>{await tr('page.nothing-matches')}</p>
+      ) : (
+        <ul className={PANEL_LIST}>
+          {page.rows.map((row) => (
+            <li key={row.id} className={PANEL_ROW}>
+              <span className="flex min-w-0 flex-col gap-0.5">
+                <span className="truncate text-sm font-medium">{row.filename}</span>
+                <span className="truncate text-xs text-muted-foreground">
+                  {translator.t('adminAttachments.meta', {
+                    size: formatBytes(row.sizeBytes),
+                    type: row.contentType,
+                    count: row.downloadCount,
+                  })}{' '}
+                  <time dateTime={row.createdAt.toISOString()}>
+                    {formatTime(row.createdAt, now, translator).label}
+                  </time>
+                </span>
+                <span className="truncate text-xs text-muted-foreground">
+                  {row.uploaderUsername ?? translator.t('adminAttachments.deletedAccount')}
+                  {row.threadSlug !== null && (
+                    <>
+                      {' · '}
+                      <a
+                        href={postLink(`/thread/${row.threadSlug}`, row.postId)}
+                        className="font-medium text-foreground underline decoration-border underline-offset-2 hover:decoration-foreground"
+                      >
+                        {translator.t('adminAttachments.post')}
+                      </a>
+                    </>
+                  )}
+                </span>
+                {row.status !== 'ready' && (
+                  <span className="text-xs text-destructive">
+                    {row.status === 'pending'
+                      ? translator.t('adminAttachments.pending')
+                      : translator.t('adminAttachments.failure', {
+                          reason:
+                            row.failureReason ?? translator.t('adminAttachments.noFailureReason'),
+                        })}
+                  </span>
+                )}
+              </span>
+
+              <DeleteAttachmentForm attachmentId={row.id} copy={copy} />
+            </li>
+          ))}
+        </ul>
+      )}
+
+      <PanelPagination
+        path="/admin/content/attachments"
+        params={params}
+        page={pageNumber}
+        pageSize={PAGE_SIZE}
+        total={page.total}
+      />
+    </PanelPage>
+  )
+}

package/app/admin/content/navigation/page.tsx

@@ -0,0 +1,123 @@
+import type { Metadata } from 'next'
+
+import { pluginKeyOfNavigation } from '@meith/plugin-kit'
+
+import {
+  type AudienceChoice,
+  type GroupChoice,
+  NewNavigationItemForm,
+  type ParentChoice,
+} from '@/components/admin/navigation-forms'
+import { NavigationTree, type NavigationTreeRow } from '@/components/admin/navigation-tree'
+import { PANEL_CARD, PANEL_NOTE } from '@/components/shell/panel-list'
+import { PanelPage } from '@/components/shell/panel-page'
+import { adminPageContext } from '@/server/admin'
+import { groupAdminRepository } from '@/server/group-admin'
+import { getTranslator, tr } from '@/server/i18n'
+import {
+  navigationRepository,
+  pluginNavigationNames,
+  syncPluginNavigation,
+} from '@/server/navigation'
+import { navigationAdminCopy } from '@/view/admin-navigation-copy'
+import {
+  builtInNavigation,
+  NAVIGATION_AUDIENCE_MESSAGE_KEYS,
+  NAVIGATION_AUDIENCE_VALUES,
+  navigationLabel,
+  outlineOf,
+} from '@/view/navigation'
+
+export async function generateMetadata(): Promise<Metadata> {
+  return { title: await tr('page.navigation') }
+}
+
+export default async function AdminNavigationPage() {
+  if ((await adminPageContext()) === null) return null
+
+  const repository = navigationRepository()
+  if (repository === null) {
+    return (
+      <PanelPage title={await tr('page.navigation')}>
+        <p className="mt-2 text-sm text-muted-foreground">
+          {await tr('page.this-board-running-in-memory-sample-5')}
+        </p>
+      </PanelPage>
+    )
+  }
+
+  await syncPluginNavigation()
+
+  const groupRepository = groupAdminRepository()
+  const names = pluginNavigationNames()
+  const [items, groupRows] = await Promise.all([
+    repository.list(),
+    groupRepository === null ? Promise.resolve([]) : groupRepository.list(),
+  ])
+
+  const translator = await getTranslator()
+  const copy = navigationAdminCopy(translator)
+
+  const audiences: readonly AudienceChoice[] = NAVIGATION_AUDIENCE_VALUES.map((audience) => ({
+    value: audience,
+    label: translator.t(NAVIGATION_AUDIENCE_MESSAGE_KEYS[audience]),
+  }))
+
+  const groups: readonly GroupChoice[] = groupRows.map((group) => ({
+    id: group.id,
+    title: group.title,
+  }))
+
+  const outline = outlineOf(items)
+
+  const rows: readonly NavigationTreeRow[] = outline.map((row) => ({
+    id: row.id,
+    parentId: row.parentId,
+    depth: row.depth,
+    name: navigationLabel(row, translator, names),
+    builtIn: builtInNavigation(row.key) !== null || pluginKeyOfNavigation(row.key) !== null,
+    label: row.label,
+    href: row.href,
+    audience: row.audience,
+    newTab: row.newTab,
+    enabled: row.enabled,
+    visibleToGroups: row.visibleToGroups,
+  }))
+
+  const parents: readonly ParentChoice[] = rows
+    .filter((row) => row.depth === 0)
+    .map((row) => ({ id: row.id, name: row.name }))
+
+  return (
+    <PanelPage
+      back={{ href: '/admin/content', label: translator.t('page.content') }}
+      title={await tr('page.navigation')}
+      lede={translator.t('adminNavigation.lede')}
+      gap="loose"
+    >
+      {rows.length === 0 ? (
+        <p className={PANEL_NOTE}>{translator.t('adminNavigation.none')}</p>
+      ) : (
+        <NavigationTree
+          rows={rows}
+          audiences={audiences}
+          groups={groups}
+          parents={parents}
+          copy={copy}
+        />
+      )}
+
+      <section className={PANEL_CARD}>
+        <h2 className="font-heading text-lg font-semibold">
+          {translator.t('adminNavigation.newItem')}
+        </h2>
+        <NewNavigationItemForm
+          audiences={audiences}
+          groups={groups}
+          parents={parents}
+          copy={copy}
+        />
+      </section>
+    </PanelPage>
+  )
+}

package/app/admin/content/page.tsx

@@ -0,0 +1,170 @@
+import type { Metadata } from 'next'
+
+import { cn } from '@meith/ui'
+
+import {
+  DeletePrefixForm,
+  DirectiveRowForm,
+  NewDirectiveForm,
+  NewPrefixForm,
+  NewSmileyForm,
+  NewWordFilterForm,
+  SmileyRowForm,
+  WordFilterRowForm,
+} from '@/components/admin/content-forms'
+import { PANEL_CARD } from '@/components/shell/panel-list'
+import { PanelPage } from '@/components/shell/panel-page'
+import { adminPageContext } from '@/server/admin'
+import { contentAdminRepository } from '@/server/content-admin'
+import { getTranslator, tr } from '@/server/i18n'
+import { contentAdminCopy } from '@/view/admin-content-copy'
+
+export async function generateMetadata(): Promise<Metadata> {
+  return { title: await tr('page.content') }
+}
+
+export default async function AdminContentPage() {
+  if ((await adminPageContext()) === null) return null
+
+  const repository = contentAdminRepository()
+  if (repository === null) {
+    return (
+      <PanelPage title={await tr('page.content')}>
+        <p className="mt-2 text-sm text-muted-foreground">
+          {await tr('page.this-board-running-in-memory-sample-3')}
+        </p>
+      </PanelPage>
+    )
+  }
+
+  const [filters, prefixes, smilies, directives] = await Promise.all([
+    repository.listWordFilters(),
+    repository.listPrefixes(),
+    repository.listSmilies(),
+    repository.listDirectives(),
+  ])
+
+  const copy = contentAdminCopy(await getTranslator())
+  const t = await getTranslator()
+
+  return (
+    <PanelPage title={await tr('page.content')} lede={t.t('contentPage.lede')} gap="loose">
+      <section className={PANEL_CARD}>
+        <h2 className="font-heading text-lg font-semibold">{await tr('page.word-filters')}</h2>
+        <p className="text-sm text-muted-foreground">{t.t('contentPage.wordFiltersHelp')}</p>
+        <p className="text-xs text-muted-foreground">{t.t('contentPage.wordFiltersWholeWords')}</p>
+
+        {filters.length === 0 ? (
+          <p className="text-sm text-muted-foreground">
+            {await tr('page.no-filters-posts-show-as')}
+          </p>
+        ) : (
+          <div className="flex flex-col divide-y divide-border">
+            {filters.map((filter) => (
+              <WordFilterRowForm key={filter.id} filter={filter} copy={copy} />
+            ))}
+          </div>
+        )}
+
+        <div className="border-t border-border pt-3">
+          <NewWordFilterForm copy={copy} />
+        </div>
+      </section>
+
+      <section className={PANEL_CARD}>
+        <h2 className="font-heading text-lg font-semibold">{await tr('page.thread-prefixes')}</h2>
+        <p className="text-sm text-muted-foreground">{t.t('contentPage.prefixHelp')}</p>
+
+        {prefixes.length === 0 ? (
+          <p className="text-sm text-muted-foreground">
+            {await tr('page.none-configured-so-composer-offers')}
+          </p>
+        ) : (
+          <ul className="flex flex-col divide-y divide-border">
+            {prefixes.map((prefix) => (
+              <li key={prefix.id} className="flex items-center justify-between gap-3 py-2">
+                <span className="flex min-w-0 flex-col">
+                  <span className="truncate text-sm font-medium">{prefix.label}</span>
+                  <span className="truncate text-xs text-muted-foreground">
+                    {t.t('contentPage.prefixMeta', {
+                      order: prefix.displayOrder,
+                      token: prefix.token ?? 'none',
+                      path: prefix.forumPathPrefix ?? 'none',
+                    })}
+                  </span>
+                </span>
+                <DeletePrefixForm prefix={prefix} copy={copy} />
+              </li>
+            ))}
+          </ul>
+        )}
+
+        <div className="border-t border-border pt-3">
+          <NewPrefixForm copy={copy} />
+        </div>
+      </section>
+
+      <section className={cn(PANEL_CARD, 'gap-2 text-sm')}>
+        <h2 className="font-heading text-lg font-semibold">{t.t('contentPage.announcements')}</h2>
+        <p className="text-muted-foreground">{t.t('contentPage.announcementsHelp')}</p>
+        <a
+          href="/admin/content/announcements"
+          className="font-medium text-foreground underline decoration-border underline-offset-2 hover:decoration-foreground"
+        >
+          {await tr('page.announcements-b')}
+        </a>
+      </section>
+
+      <section className={cn(PANEL_CARD, 'gap-2 text-sm')}>
+        <h2 className="font-heading text-lg font-semibold">{t.t('contentPage.attachments')}</h2>
+        <p className="text-muted-foreground">{t.t('contentPage.attachmentsHelp')}</p>
+        <a
+          href="/admin/content/attachments"
+          className="font-medium text-foreground underline decoration-border underline-offset-2 hover:decoration-foreground"
+        >
+          {await tr('page.attachments-b')}
+        </a>
+      </section>
+
+      <section className={PANEL_CARD}>
+        <h2 className="font-heading text-lg font-semibold">{t.t('contentPage.smilies')}</h2>
+        <p className="text-sm text-muted-foreground">{t.t('contentPage.smiliesHelp')}</p>
+        <p className="text-xs text-muted-foreground">{t.t('contentPage.smiliesRendering')}</p>
+
+        {smilies.length === 0 ? (
+          <p className="text-sm text-muted-foreground">{t.t('contentPage.noSmilies')}</p>
+        ) : (
+          <div className="flex flex-col divide-y divide-border">
+            {smilies.map((smiley) => (
+              <SmileyRowForm key={smiley.id} smiley={smiley} copy={copy} />
+            ))}
+          </div>
+        )}
+
+        <div className="border-t border-border pt-3">
+          <NewSmileyForm copy={copy} />
+        </div>
+      </section>
+
+      <section className={PANEL_CARD}>
+        <h2 className="font-heading text-lg font-semibold">{await tr('page.custom-directives')}</h2>
+        <p className="text-sm text-muted-foreground">{t.t('contentPage.directivesHelp')}</p>
+        <p className="text-xs text-muted-foreground">{t.t('contentPage.directivesSyntax')}</p>
+
+        {directives.length === 0 ? (
+          <p className="text-sm text-muted-foreground">{t.t('contentPage.noDirectives')}</p>
+        ) : (
+          <div className="flex flex-col divide-y divide-border">
+            {directives.map((directive) => (
+              <DirectiveRowForm key={directive.id} directive={directive} copy={copy} />
+            ))}
+          </div>
+        )}
+
+        <div className="border-t border-border pt-3">
+          <NewDirectiveForm copy={copy} />
+        </div>
+      </section>
+    </PanelPage>
+  )
+}

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

@@ -0,0 +1,96 @@
+import type { Metadata } from 'next'
+import { notFound } from 'next/navigation'
+
+import { MODERATOR_RIGHTS } from '@meith/db'
+
+import { ForumOptionsForm, ModeratorsPanel, MoveForumForm } from '@/components/admin/forum-forms'
+import { PANEL_CARD } from '@/components/shell/panel-list'
+import { PanelPage } from '@/components/shell/panel-page'
+import { adminPageContext } from '@/server/admin'
+import { getContainer } from '@/server/container'
+import { forumAdminRepository } from '@/server/forum-admin'
+import { getTranslator, tr } from '@/server/i18n'
+import { forumAdminCopy } from '@/view/admin-copy'
+
+export async function generateMetadata(): Promise<Metadata> {
+  return { title: await tr('page.forum-options') }
+}
+
+export default async function AdminForumPage({ params }: { params: Promise<{ id: string }> }) {
+  if ((await adminPageContext()) === null) return null
+
+  const { id } = await params
+  if (!/^[1-9]\d*$/.test(id)) notFound()
+
+  const forums = await getContainer().forums.listAll()
+  const forum = forums.find((row) => row.id === Number(id))
+  if (forum === undefined) notFound()
+
+  const repository = forumAdminRepository()
+  const options = await repository?.readOptions(forum.id)
+  if (options === null || options === undefined || repository === null) notFound()
+
+  const t = await getTranslator()
+  const moderators = await repository.listModerators(forum.id)
+  const groups = (await repository.listGroups()).map((group) => ({
+    groupId: group.id,
+    title: group.title,
+  }))
+
+  return (
+    <PanelPage
+      back={{ href: '/admin/forums', label: t.t('adminForums.all') }}
+      title={forum.title}
+      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">{t.t('adminForums.move')}</h2>
+        <MoveForumForm
+          forumId={forum.id}
+          currentParentId={forum.parentId}
+          parents={forums
+            .filter(
+              (row) =>
+                row.type !== 'link' &&
+                row.id !== forum.id &&
+                !row.path.startsWith(`${forum.path}.`),
+            )
+            .map((row) => ({ id: row.id, title: row.title, depth: row.depth }))}
+          copy={forumAdminCopy(t)}
+        />
+      </section>
+
+      <ModeratorsPanel
+        forumId={forum.id}
+        rights={[...MODERATOR_RIGHTS]}
+        moderators={moderators}
+        groups={groups}
+        copy={forumAdminCopy(t)}
+      />
+    </PanelPage>
+  )
+}