@meith/theme-clubhouse 0.31.0 → 0.33.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@meith/theme-clubhouse",
-  "version": "0.31.0",
+  "version": "0.33.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.33.0",
+    "@meith/theme-kit": "^0.33.0",
+    "@meith/ui": "^0.33.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/shared.tsx

@@ -192,8 +192,8 @@ export function ReadMark({ unread }: { unread: boolean }) {
 }
 
 export function isEmptyRegion(node: React.ReactNode): boolean {
-  if (node === null || node === undefined || node === false) return true
-  return Array.isArray(node) && node.length === 0
+  if (node === null || node === undefined || node === false || node === '') return true
+  return Array.isArray(node) && node.every((child) => isEmptyRegion(child))
 }
 
 const PREFIX_TONES = {

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/post-bit.tsx

@@ -74,7 +74,7 @@ function GroupBadge({
 
 function StatLine({ label, children }: { label: string; children: React.ReactNode }) {
   return (
-    <div className="flex items-baseline justify-between gap-2">
+    <div className="flex items-baseline gap-1.5 sm:justify-between sm:gap-2">
       <dt className={MICRO}>{label}</dt>
       <dd className={`${NUMERIC} text-xs font-semibold text-foreground`}>{children}</dd>
     </div>
@@ -94,43 +94,45 @@ function AuthorBlock({
 
   return (
     <>
-      <div aria-hidden="true" className="h-12 border-b-2 border-b-secondary bg-primary" />
+      <div aria-hidden="true" className="h-8 border-b-2 border-b-secondary bg-primary sm:h-12" />
 
-      <div className="relative z-10 -mt-7 px-4">
+      <div className="relative z-10 -mt-5 flex items-end gap-3 px-4 sm:-mt-7 sm:block">
         <Avatar
           src={author.avatarUrl}
           name={author.username}
           size={52}
-          className="rounded-sm border-2 border-card"
+          className="shrink-0 rounded-sm border-2 border-card bg-card"
         />
 
-        <p className="mt-1.5 truncate">
-          <UserRef user={author} className={`${HEADING} text-sm`} />
-        </p>
-
-        {groupTags(author.groups, author.title).map((group) => (
-          <p key={group.title} className={`${MICRO} mt-0.5 truncate`}>
-            <span className={group.nameClass ?? undefined}>{group.title}</span>
+        <div className="min-w-0 flex-1 sm:flex-none">
+          <p className="truncate sm:mt-1.5">
+            <UserRef user={author} className={`${HEADING} text-sm`} />
           </p>
-        ))}
 
-        {author.isOnline && (
-          <p className="mt-1 flex items-center gap-1.5 text-xs text-moderation-approved">
-            <span aria-hidden="true" className="size-1.5 rounded-full bg-moderation-approved" />
-            {c('online')}
-          </p>
-        )}
+          {groupTags(author.groups, author.title).map((group) => (
+            <p key={group.title} className={`${MICRO} mt-0.5 truncate`}>
+              <span className={group.nameClass ?? undefined}>{group.title}</span>
+            </p>
+          ))}
 
-        {author.badge != null && (
-          <p className="mt-2">
-            <GroupBadge badge={author.badge} />
-          </p>
-        )}
+          {author.isOnline && (
+            <p className="mt-1 flex items-center gap-1.5 text-xs text-moderation-approved">
+              <span aria-hidden="true" className="size-1.5 rounded-full bg-moderation-approved" />
+              {c('online')}
+            </p>
+          )}
 
-        {badges}
+          {author.badge != null && (
+            <p className="mt-2">
+              <GroupBadge badge={author.badge} />
+            </p>
+          )}
+
+          {badges}
+        </div>
       </div>
 
-      <dl className="mt-2.5 space-y-1 border-t border-border px-4 py-2.5">
+      <dl className="mt-2 flex flex-wrap gap-x-4 gap-y-1 border-t border-border px-4 py-2 sm:mt-2.5 sm:block sm:space-y-1 sm:py-2.5">
         <StatLine label={c('posts')}>{author.postCount.label}</StatLine>
         {author.reputation != null && (
           <StatLine label={c('rep')}>{author.reputation.label}</StatLine>

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.33.0',
   extends: defaultTheme,
   slots: {
     Shell,