@meith/theme-phasebook 0.30.1 → 0.32.0

package/package.json

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

package/src/copy.ts

@@ -245,6 +245,8 @@ export function threadViewCopy(t: Translator): SlotCopy {
     'phasebook.threadView.replyAction',
     'phasebook.threadView.view.one',
     'phasebook.threadView.view.other',
+    'phasebook.threadView.watch',
+    'phasebook.threadView.watching',
   ])
 }
 

package/src/messages/en.json

@@ -129,6 +129,8 @@
   "phasebook.threadView.replyAction": "Reply",
   "phasebook.threadView.view.one": "view",
   "phasebook.threadView.view.other": "views",
+  "phasebook.threadView.watch": "Watch",
+  "phasebook.threadView.watching": "Watching",
   "phasebook.userPanel.accountAriaLabel": "Your account",
   "phasebook.userPanel.messages": "Messages",
   "phasebook.userPanel.notifications": "Notifications",

package/src/slots/editor-toolbar.tsx

@@ -2,7 +2,9 @@
 
 import {
   applyEditorTag,
+  applyInsertion,
   type EditorTag,
+  type EditorToolbarButtonModel,
   type EditorToolbarModel,
   type SlotCopy,
 } from '@meith/theme-kit'
@@ -12,20 +14,34 @@ const GLYPHS: Readonly<Record<EditorTag, string>> = {
   italic: 'I',
   strikethrough: 'S',
   link: 'Link',
+  image: 'Image',
   quote: '“”',
   code: '</>',
   spoiler: 'Spoiler',
   bulletedList: '•',
   numberedList: '1.',
+  taskList: '☑',
   heading: 'H',
+  table: 'Table',
 }
 
 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 {
+function runButton(textareaId: string, button: EditorToolbarButtonModel): void {
   const field = document.getElementById(textareaId)
-  if (field instanceof HTMLTextAreaElement) applyEditorTag(field, tag, placeholder)
+  if (!(field instanceof HTMLTextAreaElement)) return
+
+  if (button.tag !== null) {
+    applyEditorTag(field, button.tag, button.placeholder)
+    return
+  }
+
+  if (button.insertion !== null) applyInsertion(field, button.insertion)
+}
+
+function glyphFor(button: EditorToolbarButtonModel): string {
+  return button.tag === null ? button.label.charAt(0).toUpperCase() : GLYPHS[button.tag]
 }
 
 export function EditorToolbar({
@@ -40,18 +56,19 @@ export function EditorToolbar({
       aria-label={groupLabel}
       className="flex flex-wrap gap-1 border-b border-border bg-secondary/40 px-3 py-2"
     >
-      {buttons.map((button) => (
+      {buttons.map((button, index) => (
         <button
-          key={button.tag}
+          // biome-ignore lint/suspicious/noArrayIndexKey: a plugin's button carries no id of its own, so the index disambiguates two sharing a tag or label; the list is server-rendered in order and never reordered on the client
+          key={`${button.tag ?? button.label}-${index}`}
           type="button"
           onMouseDown={(event) => event.preventDefault()}
-          onClick={() => runTag(textareaId, button.tag, button.placeholder)}
+          onClick={() => runButton(textareaId, button)}
           title={button.title}
           aria-label={button.label}
           {...(button.keyShortcut === null ? {} : { 'aria-keyshortcuts': button.keyShortcut })}
           className={BUTTON}
         >
-          <span aria-hidden="true">{GLYPHS[button.tag]}</span>
+          <span aria-hidden="true">{glyphFor(button)}</span>
         </button>
       ))}
 

package/src/slots/header.tsx

@@ -46,7 +46,7 @@ function Submenu({ items }: { items: HeaderModel['navigation'][number]['submenu'
           <a
             href={child.href}
             {...linkTarget(child)}
-            className="block px-4 py-2 text-muted-foreground hover:bg-accent hover:text-foreground"
+            className="flex items-center px-4 py-2 text-muted-foreground pointer-coarse:min-h-11 hover:bg-accent hover:text-foreground"
           >
             {child.label}
           </a>
@@ -56,6 +56,71 @@ function Submenu({ items }: { items: HeaderModel['navigation'][number]['submenu'
   )
 }
 
+function Chevron({ className }: { className: string }) {
+  return (
+    <svg
+      aria-hidden="true"
+      viewBox="0 0 12 12"
+      className={className}
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    >
+      <path d="m4.5 3 3 3-3 3" />
+    </svg>
+  )
+}
+
+function MobileNavItem({ item }: { item: HeaderModel['navigation'][number] }) {
+  if (item.submenu === undefined || item.submenu.length === 0) {
+    return (
+      <li>
+        <a
+          href={item.href}
+          {...linkTarget(item)}
+          className="flex min-h-11 items-center rounded-lg px-3 text-sm font-medium text-muted-foreground hover:bg-accent hover:text-foreground"
+        >
+          {item.label}
+        </a>
+      </li>
+    )
+  }
+
+  return (
+    <li>
+      <details data-nav-disclosure name="phasebook-header-submenu" className="group/submenu">
+        <summary className="flex min-h-11 cursor-default list-none items-center justify-between gap-2 rounded-lg px-3 text-sm font-medium text-muted-foreground select-none [&::-webkit-details-marker]:hidden [&::marker]:content-none hover:bg-accent hover:text-foreground">
+          <a
+            href={item.href}
+            {...linkTarget(item)}
+            className="min-w-0 flex-1 truncate hover:underline"
+          >
+            {item.label}
+          </a>
+          <span className="flex size-11 shrink-0 items-center justify-center">
+            <Chevron className="size-3 text-muted-foreground transition-transform group-open/submenu:rotate-90" />
+          </span>
+        </summary>
+        <ul className="ml-2 flex flex-col gap-0.5 border-l border-border py-1 pl-2.5">
+          {item.submenu.map((child) => (
+            <li key={child.href}>
+              <a
+                href={child.href}
+                {...linkTarget(child)}
+                className="flex min-h-11 items-center rounded-lg px-3 text-sm text-muted-foreground hover:bg-accent hover:text-foreground"
+              >
+                {child.label}
+              </a>
+            </li>
+          ))}
+        </ul>
+      </details>
+    </li>
+  )
+}
+
 export function Header({
   boardTitle,
   homeHref,
@@ -66,8 +131,6 @@ export function Header({
 }: HeaderModel & { copy: SlotCopy }) {
   const c = (key: string) => fromSlotCopy(copy, `phasebook.header.${key}`)
 
-  const opensMenus = navigation.some((item) => item.submenu !== undefined)
-
   return (
     <header className="sticky top-0 z-30 border-b border-border bg-card shadow-elevation">
       <div className={`${PAGE} flex h-14 items-center justify-between gap-3`}>
@@ -84,6 +147,7 @@ export function Header({
         {navigation.length > 0 && (
           <nav
             aria-label={c('sectionsAriaLabel')}
+            data-nav-view="desktop"
             className="hidden min-w-0 flex-1 justify-center lg:flex"
           >
             <ul className="flex items-center gap-1">
@@ -107,25 +171,24 @@ export function Header({
       </div>
 
       {navigation.length > 0 && (
-        <nav aria-label={c('sectionsAriaLabel')} className="border-t border-border lg:hidden">
-          <ul
-            className={`${PAGE} flex items-center gap-1 py-1 ${
-              opensMenus ? 'flex-wrap' : 'overflow-x-auto'
-            }`}
-          >
-            {navigation.map((item) => (
-              <li key={item.href} className="group relative shrink-0">
-                <a
-                  href={item.href}
-                  {...linkTarget(item)}
-                  className="inline-flex h-9 items-center rounded-full px-3 text-sm font-medium text-muted-foreground transition-colors hover:bg-accent hover:text-foreground"
-                >
-                  {item.label}
-                </a>
-                <Submenu items={item.submenu} />
-              </li>
-            ))}
-          </ul>
+        <nav
+          aria-label={c('sectionsAriaLabel')}
+          data-nav-view="mobile"
+          className="border-t border-border lg:hidden"
+        >
+          <div className={`${PAGE} py-1`}>
+            <details data-nav-disclosure className="group">
+              <summary className="flex min-h-11 cursor-default list-none items-center gap-2 text-sm font-medium text-foreground select-none [&::-webkit-details-marker]:hidden [&::marker]:content-none">
+                <Chevron className="size-3 shrink-0 transition-transform group-open:rotate-90" />
+                {c('sectionsAriaLabel')}
+              </summary>
+              <ul className="flex flex-col gap-0.5 pb-2">
+                {navigation.map((item) => (
+                  <MobileNavItem key={item.href} item={item} />
+                ))}
+              </ul>
+            </details>
+          </div>
         </nav>
       )}
     </header>

package/src/slots/thread-row.tsx

@@ -3,7 +3,12 @@ import { fromSlotCopy } from '@meith/theme-kit'
 
 import { Circle, count, MUTED_LINK, NUMERIC, Prefix, plural, Stamp, Tag, UserRef } from '../shared'
 
-export function ThreadRow({ thread, select, copy }: ThreadRowSlotModel & { copy: SlotCopy }) {
+export function ThreadRow({
+  thread,
+  select,
+  regions,
+  copy,
+}: ThreadRowSlotModel & { copy: SlotCopy }) {
   const c = (key: string) => fromSlotCopy(copy, `phasebook.threadRow.${key}`)
 
   const hidden = thread.visibility === 'deleted' || thread.visibility === 'unapproved'
@@ -49,6 +54,7 @@ export function ThreadRow({ thread, select, copy }: ThreadRowSlotModel & { copy:
               <Tag token="thread-unapproved">{c('unapproved')}</Tag>
             )}
             {thread.visibility === 'deleted' && <Tag token="thread-deleted">{c('deleted')}</Tag>}
+            {regions?.pluginBadges}
           </div>
 
           <a

package/src/slots/thread-view.tsx

@@ -19,6 +19,7 @@ export function ThreadView({
   forum,
   replyHref,
   markReadAction,
+  watch,
   regions,
   copy,
 }: ThreadViewModel & { copy: SlotCopy }) {
@@ -54,6 +55,19 @@ export function ThreadView({
             </div>
 
             <div className="flex shrink-0 items-center gap-2">
+              {watch != null && (
+                <form action={watch.action} method="post">
+                  <button type="submit" className={PILL}>
+                    {watch.subscribed ? (
+                      <>
+                        {c('watching')} <span aria-hidden="true">✓</span>
+                      </>
+                    ) : (
+                      c('watch')
+                    )}
+                  </button>
+                </form>
+              )}
               {markReadAction !== null && (
                 <form action={markReadAction} method="post">
                   <button type="submit" className={PILL}>

package/src/theme.ts

@@ -70,7 +70,7 @@ import { WhoIsOnline } from './slots/who-is-online'
 export const phasebookTheme = defineTheme({
   key: 'phasebook',
   title: 'Phasebook',
-  version: '0.30.1',
+  version: '0.32.0',
   extends: defaultTheme,
   slots: {
     Shell,