@meith/theme-raidframe 0.31.0 → 0.33.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@meith/theme-raidframe",
-  "version": "0.31.0",
+  "version": "0.33.0",
   "description": "A gaming theme for Meith — guild, raid and match boards — built on the default theme's slots.",
   "license": "MIT",
   "repository": {
@@ -20,9 +20,9 @@
     "access": "public"
   },
   "dependencies": {
-    "@meith/theme-default": "^0.31.0",
-    "@meith/theme-kit": "^0.31.0",
-    "@meith/ui": "^0.31.0"
+    "@meith/theme-default": "^0.33.0",
+    "@meith/theme-kit": "^0.33.0",
+    "@meith/ui": "^0.33.0"
   },
   "peerDependencies": {
     "react": "^19.2.0"

package/src/copy.ts

@@ -264,6 +264,8 @@ export function threadViewCopy(t: Translator): SlotCopy {
     'raidframe.threadView.replies',
     'raidframe.threadView.views',
     'raidframe.threadView.markRead',
+    'raidframe.threadView.watch',
+    'raidframe.threadView.watching',
   ])
 }
 

package/src/messages/en.json

@@ -133,6 +133,8 @@
   "raidframe.threadView.postReply": "post reply",
   "raidframe.threadView.replies": "replies",
   "raidframe.threadView.views": "views",
+  "raidframe.threadView.watch": "watch",
+  "raidframe.threadView.watching": "watching",
   "raidframe.userPanel.accountLabel": "Your account",
   "raidframe.userPanel.new": "new",
   "raidframe.userPanel.pm": "pm",

package/src/shared.tsx

@@ -138,3 +138,8 @@ export function groupTags(
   if (groups !== undefined && groups.length > 0) return groups
   return title === null ? [] : [{ title }]
 }
+
+export function isEmptyRegion(node: React.ReactNode): boolean {
+  if (node === null || node === undefined || node === false || node === '') return true
+  return Array.isArray(node) && node.every((child) => isEmptyRegion(child))
+}

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'
@@ -14,20 +16,34 @@ const GLYPHS: Readonly<Record<EditorTag, string>> = {
   italic: 'I',
   strikethrough: 'S',
   link: 'LINK',
+  image: 'IMG',
   quote: 'QUOTE',
   code: 'CODE',
   spoiler: 'SPLR',
   bulletedList: 'UL',
   numberedList: 'OL',
+  taskList: 'TASK',
   heading: 'H',
+  table: 'TBL',
 }
 
 const BUTTON =
   'inline-flex min-w-8 items-center justify-center border border-border bg-secondary px-2 py-1.5 font-mono text-[0.6875rem] font-semibold uppercase tracking-[0.1em] text-secondary-foreground hover:border-primary/70 hover:text-primary'
 
-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({
@@ -39,18 +55,19 @@ export function EditorToolbar({
   return (
     <>
       <div role="group" aria-label={groupLabel} className="flex flex-wrap gap-1 px-4 py-3">
-        {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/forum-row.tsx

@@ -26,6 +26,19 @@ export function ForumRow({ forum, copy }: ForumRowSlotModel & { copy: SlotCopy }
               <p className="mt-0.5 text-xs text-muted-foreground">{forum.description}</p>
             )}
 
+            {!isLink && forum.lastPost !== null && (
+              <p className="mt-1.5 text-xs text-muted-foreground sm:hidden">
+                <a href={forum.lastPost.href} className="text-foreground hover:text-primary">
+                  {forum.lastPost.threadTitle}
+                </a>
+                <span className={`${MICRO} mt-0.5 block normal-case`}>
+                  <UserRef user={forum.lastPost.author} className="hover:text-primary" />
+                  {c('separator')}
+                  <Stamp at={forum.lastPost.at} />
+                </span>
+              </p>
+            )}
+
             {forum.subforums.length > 0 && (
               <p className="mt-1.5 flex flex-wrap gap-1.5">
                 {forum.subforums.map((sub) => (

package/src/slots/header.tsx

@@ -41,7 +41,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>
@@ -51,6 +51,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 px-3.5 font-mono text-[0.6875rem] font-semibold tracking-[0.14em] text-muted-foreground uppercase hover:bg-secondary hover:text-primary"
+        >
+          {item.label}
+        </a>
+      </li>
+    )
+  }
+
+  return (
+    <li>
+      <details data-nav-disclosure name="raidframe-header-submenu" className="group/submenu">
+        <summary className="flex min-h-11 cursor-default list-none items-center justify-between gap-2 px-3.5 font-mono text-[0.6875rem] font-semibold tracking-[0.14em] text-muted-foreground uppercase select-none [&::-webkit-details-marker]:hidden [&::marker]:content-none hover:bg-secondary hover:text-primary">
+          <a
+            href={item.href}
+            {...linkTarget(item)}
+            className="min-w-0 flex-1 truncate normal-case tracking-normal hover:underline"
+          >
+            {item.label}
+          </a>
+          <span className="flex size-11 shrink-0 items-center justify-center">
+            <Chevron className="size-3 transition-transform group-open/submenu:rotate-90" />
+          </span>
+        </summary>
+        <ul className="ml-3 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 px-3.5 font-mono text-[0.6875rem] font-semibold tracking-[0.14em] text-muted-foreground uppercase hover:bg-secondary hover:text-primary"
+              >
+                {child.label}
+              </a>
+            </li>
+          ))}
+        </ul>
+      </details>
+    </li>
+  )
+}
+
 export function Header({
   boardTitle,
   homeHref,
@@ -77,22 +142,35 @@ export function Header({
       <div className={RULE} aria-hidden="true" />
 
       {navigation.length > 0 && (
-        <nav
-          aria-label={c('sectionsAriaLabel')}
-          className="flex flex-wrap border-b border-border bg-card/60"
-        >
-          {navigation.map((item) => (
-            <span key={item.href} className="group relative">
-              <a
-                href={item.href}
-                {...linkTarget(item)}
-                className="block border-t-2 border-r border-t-transparent border-r-border px-3.5 py-2 font-mono text-[0.6875rem] font-semibold tracking-[0.14em] text-muted-foreground uppercase hover:border-t-primary hover:bg-secondary hover:text-primary"
-              >
-                {item.label}
-              </a>
-              <Submenu items={item.submenu} />
-            </span>
-          ))}
+        <nav aria-label={c('sectionsAriaLabel')} className="border-b border-border bg-card/60">
+          <div data-nav-view="desktop" className="hidden flex-wrap lg:flex">
+            {navigation.map((item) => (
+              <span key={item.href} className="group relative">
+                <a
+                  href={item.href}
+                  {...linkTarget(item)}
+                  className="block border-t-2 border-r border-t-transparent border-r-border px-3.5 py-2 font-mono text-[0.6875rem] font-semibold tracking-[0.14em] text-muted-foreground uppercase pointer-coarse:flex pointer-coarse:min-h-11 pointer-coarse:items-center hover:border-t-primary hover:bg-secondary hover:text-primary"
+                >
+                  {item.label}
+                </a>
+                <Submenu items={item.submenu} />
+              </span>
+            ))}
+          </div>
+
+          <div data-nav-view="mobile" className="px-4 py-1 lg:hidden">
+            <details data-nav-disclosure className="group">
+              <summary className="flex min-h-11 cursor-default list-none items-center gap-2 font-mono text-[0.6875rem] font-semibold tracking-[0.14em] text-foreground uppercase 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/post-actions.tsx

@@ -1,6 +1,8 @@
 import type { PostActionsSlotModel, SlotCopy } from '@meith/theme-kit'
 import { fromSlotCopy } from '@meith/theme-kit'
 
+import { isEmptyRegion } from '../shared'
+
 const ACTION =
   'font-mono text-[0.625rem] font-semibold uppercase tracking-[0.14em] text-muted-foreground hover:text-primary'
 
@@ -22,7 +24,9 @@ export function PostActions({
     { href: actions.moderateHref, label: c('moderate') },
   ].filter((item): item is { href: string; label: string } => item.href != null)
 
-  if (items.length === 0 && children === undefined) return null
+  const extra = isEmptyRegion(children) ? null : children
+
+  if (items.length === 0 && extra === null) return null
 
   return (
     <nav aria-label={c('ariaLabel')} className="flex flex-wrap items-center gap-x-4 gap-y-1">
@@ -31,7 +35,7 @@ export function PostActions({
           {item.label}
         </a>
       ))}
-      {children}
+      {extra}
     </nav>
   )
 }

package/src/slots/thread-row.tsx

@@ -5,7 +5,12 @@ import { MICRO, NUMERIC, ReadPip, Stamp, UserRef } from '../shared'
 
 const TAG = 'border px-1.5 py-px font-mono text-[0.625rem] font-bold uppercase tracking-[0.12em]'
 
-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, `raidframe.threadRow.${key}`)
 
   const hidden = thread.visibility === 'deleted' || thread.visibility === 'unapproved'
@@ -65,12 +70,22 @@ export function ThreadRow({ thread, select, copy }: ThreadRowSlotModel & { copy:
               {c('deleted')}
             </span>
           )}
+          {regions?.pluginBadges}
         </div>
 
         <p className={`${MICRO} mt-1 normal-case`}>
           <span className="uppercase">{c('startedBy')}</span>{' '}
           <UserRef user={thread.author} className="hover:text-primary" />
         </p>
+        {thread.lastPost !== null && (
+          <p className={`${MICRO} mt-1 normal-case sm:hidden`}>
+            <a href={thread.lastPost.href} className="hover:text-primary">
+              <Stamp at={thread.lastPost.at} className="text-foreground" />
+              {c('byPrefix')}
+              <UserRef user={thread.lastPost.author} linked={false} />
+            </a>
+          </p>
+        )}
       </td>
 
       <td className={`w-16 px-2 py-2.5 text-right text-xs ${NUMERIC} text-foreground`}>

package/src/slots/thread-view.tsx

@@ -10,6 +10,7 @@ export function ThreadView({
   forum,
   replyHref,
   markReadAction,
+  watch,
   regions,
   copy,
 }: ThreadViewModel & { copy: SlotCopy }) {
@@ -22,6 +23,21 @@ export function ThreadView({
       </a>
     )
 
+  const watchToggle =
+    watch == null ? null : (
+      <form action={watch.action} method="post">
+        <button type="submit" className={BUTTON}>
+          {watch.subscribed ? (
+            <>
+              {c('watching')} <span aria-hidden="true">✓</span>
+            </>
+          ) : (
+            c('watch')
+          )}
+        </button>
+      </form>
+    )
+
   return (
     <div className="flex flex-col gap-4 p-4">
       <div className="border border-border bg-card shadow-elevation">
@@ -53,7 +69,10 @@ export function ThreadView({
             </p>
           </div>
 
-          {reply}
+          <div className="flex shrink-0 flex-wrap items-center gap-2">
+            {watchToggle}
+            {reply}
+          </div>
         </div>
         <div className={RULE} aria-hidden="true" />
       </div>

package/src/theme.ts

@@ -73,7 +73,7 @@ import { WhoIsOnline } from './slots/who-is-online'
 export const raidframeTheme = defineTheme({
   key: 'raidframe',
   title: 'Raidframe',
-  version: '0.31.0',
+  version: '0.33.0',
   extends: defaultTheme,
   slots: {
     Shell,