@meith/theme-phasebook 0.15.0 → 0.17.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@meith/theme-phasebook",
-  "version": "0.15.0",
+  "version": "0.17.0",
   "description": "A theme for Meith with a familiar social shape, built on the default theme's slots.",
   "license": "LGPL-3.0-or-later",
   "repository": {
@@ -20,9 +20,9 @@
     "access": "public"
   },
   "dependencies": {
-    "@meith/theme-default": "^0.15.0",
-    "@meith/theme-kit": "^0.15.0",
-    "@meith/ui": "^0.15.0"
+    "@meith/theme-default": "^0.17.0",
+    "@meith/theme-kit": "^0.17.0",
+    "@meith/ui": "^0.17.0"
   },
   "peerDependencies": {
     "react": "^19.2.0"

package/src/copy.ts

@@ -141,6 +141,7 @@ export function postActionsCopy(t: Translator): SlotCopy {
   return copyFor(t, [
     'phasebook.postActions.ariaLabel',
     'phasebook.postActions.edit',
+    'phasebook.postActions.history',
     'phasebook.postActions.moderate',
     'phasebook.postActions.quote',
     'phasebook.postActions.rate',

package/src/messages/en.json

@@ -66,6 +66,7 @@
   "phasebook.panelNav.waiting": "waiting",
   "phasebook.postActions.ariaLabel": "Post actions",
   "phasebook.postActions.edit": "Edit",
+  "phasebook.postActions.history": "History",
   "phasebook.postActions.moderate": "Moderate",
   "phasebook.postActions.quote": "Quote",
   "phasebook.postActions.rate": "Rate",

package/src/slots/editor-toolbar.tsx

@@ -0,0 +1,72 @@
+'use client'
+
+import {
+  applyEditorTag,
+  type EditorTag,
+  type EditorToolbarModel,
+  type SlotCopy,
+} from '@meith/theme-kit'
+
+const GLYPHS: Readonly<Record<EditorTag, string>> = {
+  bold: 'B',
+  italic: 'I',
+  strikethrough: 'S',
+  link: 'Link',
+  quote: '“”',
+  code: '</>',
+  spoiler: 'Spoiler',
+  bulletedList: '•',
+  numberedList: '1.',
+  heading: 'H',
+}
+
+const BUTTON =
+  'inline-flex h-8 min-w-8 items-center justify-center rounded-full px-2.5 text-xs font-semibold text-muted-foreground transition-colors duration-100 hover:bg-accent hover:text-foreground'
+
+function runTag(textareaId: string, tag: EditorTag, placeholder: string | null): void {
+  const field = document.getElementById(textareaId)
+  if (field instanceof HTMLTextAreaElement) applyEditorTag(field, tag, placeholder)
+}
+
+export function EditorToolbar({
+  textareaId,
+  groupLabel,
+  buttons,
+  attachment,
+}: EditorToolbarModel & { copy: SlotCopy }) {
+  return (
+    <div
+      role="group"
+      aria-label={groupLabel}
+      className="flex flex-wrap gap-1 border-b border-border bg-secondary/40 px-3 py-2"
+    >
+      {buttons.map((button) => (
+        <button
+          key={button.tag}
+          type="button"
+          onMouseDown={(event) => event.preventDefault()}
+          onClick={() => runTag(textareaId, button.tag, button.placeholder)}
+          title={button.title}
+          aria-label={button.label}
+          {...(button.keyShortcut === null ? {} : { 'aria-keyshortcuts': button.keyShortcut })}
+          className={BUTTON}
+        >
+          <span aria-hidden="true">{GLYPHS[button.tag]}</span>
+        </button>
+      ))}
+
+      {attachment !== null && (
+        <button
+          type="button"
+          onMouseDown={(event) => event.preventDefault()}
+          onClick={() => document.getElementById(attachment.inputId)?.click()}
+          title={attachment.label}
+          aria-label={attachment.label}
+          className={BUTTON}
+        >
+          <span aria-hidden="true">{attachment.label}</span>
+        </button>
+      )}
+    </div>
+  )
+}

package/src/slots/post-actions.tsx

@@ -20,6 +20,7 @@ export function PostActions({
   const reader: Action[] = [
     actions.quoteHref === null ? null : { href: actions.quoteHref, label: c('quote') },
     actions.editHref === null ? null : { href: actions.editHref, label: c('edit') },
+    actions.historyHref == null ? null : { href: actions.historyHref, label: c('history') },
     actions.rateHref === null ? null : { href: actions.rateHref, label: c('rate') },
     actions.reportHref === null ? null : { href: actions.reportHref, label: c('report') },
   ].filter((action): action is Action => action !== null)

package/src/slots/quick-reply.tsx

@@ -0,0 +1,9 @@
+'use client'
+
+import type { QuickReplyModel, SlotCopy } from '@meith/theme-kit'
+
+export function QuickReply({ placeholder, children }: QuickReplyModel & { copy: SlotCopy }) {
+  if (children === undefined) return null
+
+  return <section aria-label={placeholder}>{children}</section>
+}

package/src/theme.ts

@@ -37,6 +37,7 @@ import { BoardIndex } from './slots/board-index'
 import { BoardStats } from './slots/board-stats'
 import { CategoryBlock } from './slots/category-block'
 import { DiscoveryView } from './slots/discovery-view'
+import { EditorToolbar } from './slots/editor-toolbar'
 import { ErrorNotice } from './slots/error-notice'
 import { Footer } from './slots/footer'
 import { ForumDisplay } from './slots/forum-display'
@@ -55,6 +56,7 @@ import { PanelShell } from './slots/panel-shell'
 import { PostActions } from './slots/post-actions'
 import { PostBit } from './slots/post-bit'
 import { PostForm } from './slots/post-form'
+import { QuickReply } from './slots/quick-reply'
 import { RedirectNotice } from './slots/redirect-notice'
 import { SearchForm } from './slots/search-form'
 import { SearchResults } from './slots/search-results'
@@ -94,8 +96,10 @@ export const phasebookTheme = defineTheme({
     ThreadView,
     PostBit,
     PostActions,
+    QuickReply,
 
     PostForm,
+    EditorToolbar,
 
     MemberProfile,