@meith/theme-default 0.31.0 → 0.32.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@meith/theme-default",
-  "version": "0.31.0",
+  "version": "0.32.0",
   "description": "Meith's default theme — every slot and every token, and the reference for what a complete theme fills.",
   "license": "MIT",
   "repository": {
@@ -20,8 +20,8 @@
     "access": "public"
   },
   "dependencies": {
-    "@meith/theme-kit": "^0.31.0",
-    "@meith/ui": "^0.31.0"
+    "@meith/theme-kit": "^0.32.0",
+    "@meith/ui": "^0.32.0"
   },
   "peerDependencies": {
     "react": "^19.2.0"

package/src/copy.ts

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

package/src/messages/en.json

@@ -170,6 +170,8 @@
   "default.threadView.view.one": "view",
   "default.threadView.view.other": "views",
   "default.threadView.viewsLabel": "Views",
+  "default.threadView.watch": "Watch",
+  "default.threadView.watching": "Watching",
   "default.userPanel.new": "new",
   "default.userPanel.signedIn": "Signed in",
   "default.userPanel.unread": "unread",

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 =
   'min-w-8 rounded px-2 py-1 text-xs font-medium text-muted-foreground hover:bg-background hover:text-foreground focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring'
 
-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-0.5 border-b border-border bg-muted/40 p-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

@@ -35,7 +35,7 @@ function Submenu({ items }: { items: HeaderModel['navigation'][number]['submenu'
           <a
             href={child.href}
             {...linkTarget(child)}
-            className="block px-3 py-1.5 text-muted-foreground hover:bg-muted hover:text-foreground"
+            className="flex items-center px-3 py-1.5 text-muted-foreground pointer-coarse:min-h-11 hover:bg-muted hover:text-foreground"
           >
             {child.label}
           </a>
@@ -45,6 +45,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-md px-2.5 text-sm font-medium text-muted-foreground hover:bg-muted hover:text-foreground"
+        >
+          {item.label}
+        </a>
+      </li>
+    )
+  }
+
+  return (
+    <li>
+      <details data-nav-disclosure name="default-header-submenu" className="group/submenu">
+        <summary className="flex min-h-11 cursor-default list-none items-center justify-between gap-2 rounded-md px-2.5 text-sm font-medium text-muted-foreground select-none [&::-webkit-details-marker]:hidden [&::marker]:content-none hover:bg-muted 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-md px-2.5 text-sm text-muted-foreground hover:bg-muted hover:text-foreground"
+              >
+                {child.label}
+              </a>
+            </li>
+          ))}
+        </ul>
+      </details>
+    </li>
+  )
+}
+
 export function Header({
   boardTitle,
   homeHref,
@@ -73,7 +138,8 @@ export function Header({
         <nav aria-label={c('sections')} className="border-t border-border bg-surface">
           <div className={PAGE}>
             <ul
-              className={`-mx-4 flex items-stretch gap-1 px-4 text-sm sm:-mx-6 sm:px-6 ${
+              data-nav-view="desktop"
+              className={`-mx-4 hidden items-stretch gap-1 px-4 text-sm sm:-mx-6 sm:px-6 lg:flex ${
                 opensMenus
                   ? 'flex-wrap'
                   : 'overflow-x-auto [mask-image:linear-gradient(to_right,black_calc(100%-1.5rem),transparent)] sm:[mask-image:none]'
@@ -84,7 +150,7 @@ export function Header({
                   <a
                     href={item.href}
                     {...linkTarget(item)}
-                    className="inline-flex h-10 items-center rounded-t-md border-b-2 border-transparent px-2.5 font-medium text-muted-foreground transition-colors hover:border-border hover:text-foreground"
+                    className="inline-flex h-10 items-center rounded-t-md border-b-2 border-transparent px-2.5 font-medium text-muted-foreground transition-colors pointer-coarse:h-11 hover:border-border hover:text-foreground"
                   >
                     {item.label}
                   </a>
@@ -92,6 +158,20 @@ export function Header({
                 </li>
               ))}
             </ul>
+
+            <div data-nav-view="mobile" className="-mx-4 px-4 py-1 sm:-mx-6 sm:px-6 lg:hidden">
+              <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('sections')}
+                </summary>
+                <ul className="flex flex-col gap-0.5 pb-2">
+                  {navigation.map((item) => (
+                    <MobileNavItem key={item.href} item={item} />
+                  ))}
+                </ul>
+              </details>
+            </div>
           </div>
         </nav>
       )}

package/src/slots/thread-row.tsx

@@ -4,7 +4,12 @@ import { Badge } from '@meith/ui'
 
 import { Counts, LINK, Prefix, ReadSpacer, Stamp, UnreadDot, 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, `default.threadRow.${key}`)
 
   const hidden = thread.visibility === 'deleted' || thread.visibility === 'unapproved'
@@ -52,6 +57,7 @@ export function ThreadRow({ thread, select, copy }: ThreadRowSlotModel & { copy:
             {thread.title}
           </a>
           {thread.isUnread && <span className="sr-only"> {c('newPosts')}</span>}
+          {regions?.pluginBadges}
         </div>
 
         <p className="mt-0.5 text-xs text-muted-foreground">

package/src/slots/thread-view.tsx

@@ -9,6 +9,7 @@ export function ThreadView({
   forum,
   replyHref,
   markReadAction,
+  watch,
   regions,
   copy,
 }: ThreadViewModel & { copy: SlotCopy }) {
@@ -52,6 +53,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={buttonVariants({ variant: 'ghost' })}>
+                {watch.subscribed ? (
+                  <>
+                    {c('watching')} <span aria-hidden="true">✓</span>
+                  </>
+                ) : (
+                  c('watch')
+                )}
+              </button>
+            </form>
+          )}
           {markReadAction !== null && (
             <form action={markReadAction} method="post">
               <button type="submit" className={buttonVariants({ variant: 'ghost' })}>

package/src/theme.ts

@@ -70,7 +70,7 @@ import { WhoIsOnline } from './slots/who-is-online'
 export const defaultTheme = defineTheme({
   key: 'default',
   title: 'Default',
-  version: '0.31.0',
+  version: '0.32.0',
   slots: {
     Shell,
     Header,