@meith/theme-clubhouse 0.31.0 → 0.32.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@meith/theme-clubhouse",
-  "version": "0.31.0",
+  "version": "0.32.0",
   "description": "A sports club theme for Meith — GAA, soccer, basketball — painted from the club's own two colours.",
   "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.32.0",
+    "@meith/theme-kit": "^0.32.0",
+    "@meith/ui": "^0.32.0"
   },
   "peerDependencies": {
     "react": "^19.2.0"

package/src/copy.ts

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

package/src/messages/en.json

@@ -107,6 +107,8 @@
   "clubhouse.threadView.replies": "replies",
   "clubhouse.threadView.reply": "Reply",
   "clubhouse.threadView.views": "views",
+  "clubhouse.threadView.watch": "Watch",
+  "clubhouse.threadView.watching": "Watching",
   "clubhouse.userPanel.new": "new",
   "clubhouse.userPanel.signedIn": "Signed in",
   "clubhouse.userPanel.unread": "unread",

package/src/slots/header.tsx

@@ -44,7 +44,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>
@@ -54,6 +54,73 @@ 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={`${HEADING} flex min-h-11 items-center px-2.5 text-sm text-muted-foreground hover:bg-accent hover:text-foreground`}
+        >
+          {item.label}
+        </a>
+      </li>
+    )
+  }
+
+  return (
+    <li>
+      <details data-nav-disclosure name="clubhouse-header-submenu" className="group/submenu">
+        <summary
+          className={`${HEADING} flex min-h-11 cursor-default list-none items-center justify-between gap-2 px-2.5 text-sm 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 px-2.5 text-sm text-muted-foreground hover:bg-accent hover:text-foreground"
+              >
+                {child.label}
+              </a>
+            </li>
+          ))}
+        </ul>
+      </details>
+    </li>
+  )
+}
+
 export function Header({
   boardTitle,
   homeHref,
@@ -84,7 +151,8 @@ export function Header({
         <nav aria-label={c('boardSections')} className="border-b border-border bg-surface">
           <div className={PAGE}>
             <ul
-              className={`-mx-4 flex items-stretch px-4 sm:-mx-6 sm:px-6 ${
+              data-nav-view="desktop"
+              className={`-mx-4 hidden items-stretch px-4 sm:-mx-6 sm:px-6 lg:flex ${
                 opensMenus ? 'flex-wrap' : 'overflow-x-auto'
               }`}
             >
@@ -101,6 +169,22 @@ 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={`${HEADING} flex min-h-11 cursor-default list-none items-center gap-2 text-sm text-foreground select-none [&::-webkit-details-marker]:hidden [&::marker]:content-none`}
+                >
+                  <Chevron className="size-3 shrink-0 transition-transform group-open:rotate-90" />
+                  {c('boardSections')}
+                </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 { HEADING, LINK, MICRO, Prefix, ReadMark, Stamp, TABLE_ROW, Tally, 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, `clubhouse.threadRow.${key}`)
 
   const hidden = thread.visibility === 'deleted' || thread.visibility === 'unapproved'
@@ -49,6 +54,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 }) {
@@ -19,6 +20,25 @@ export function ThreadView({
       <PageHead
         actions={
           <>
+            {watch != null && (
+              <form action={watch.action} method="post">
+                <button
+                  type="submit"
+                  className={cn(
+                    BUTTON,
+                    'bg-secondary text-secondary-foreground hover:bg-secondary/80',
+                  )}
+                >
+                  {watch.subscribed ? (
+                    <>
+                      {c('watching')} <span aria-hidden="true">✓</span>
+                    </>
+                  ) : (
+                    c('watch')
+                  )}
+                </button>
+              </form>
+            )}
             {markReadAction !== null && (
               <form action={markReadAction} method="post">
                 <button

package/src/theme.ts

@@ -51,7 +51,7 @@ import { WhoIsOnline } from './slots/who-is-online'
 export const clubhouseTheme = defineTheme({
   key: 'clubhouse',
   title: 'Clubhouse',
-  version: '0.31.0',
+  version: '0.32.0',
   extends: defaultTheme,
   slots: {
     Shell,