@meith/theme-clubhouse 0.28.1 → 0.29.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@meith/theme-clubhouse",
-  "version": "0.28.1",
+  "version": "0.29.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.28.1",
-    "@meith/theme-kit": "^0.28.1",
-    "@meith/ui": "^0.28.1"
+    "@meith/theme-default": "^0.29.0",
+    "@meith/theme-kit": "^0.29.0",
+    "@meith/ui": "^0.29.0"
   },
   "peerDependencies": {
     "react": "^19.2.0"

package/src/shared.tsx

@@ -1,4 +1,10 @@
-import type { CountModel, PrefixModel, TimeModel, UserRefModel } from '@meith/theme-kit'
+import type {
+  CountModel,
+  GroupTagModel,
+  PrefixModel,
+  TimeModel,
+  UserRefModel,
+} from '@meith/theme-kit'
 import { Badge, cn } from '@meith/ui'
 
 export const PAGE = 'mx-auto w-full max-w-6xl px-4 sm:px-6'
@@ -215,3 +221,11 @@ export function prefixTone(token: string | null): PrefixTone | 'neutral' {
 export function Prefix({ prefix }: { prefix: PrefixModel }) {
   return <Badge tone={prefixTone(prefix.token)}>{prefix.label}</Badge>
 }
+
+export function groupTags(
+  groups: readonly GroupTagModel[] | undefined,
+  title: string | null,
+): readonly GroupTagModel[] {
+  if (groups !== undefined && groups.length > 0) return groups
+  return title === null ? [] : [{ title }]
+}

package/src/slots/member-profile.tsx

@@ -2,12 +2,23 @@ import type { MemberProfileModel, SlotCopy } from '@meith/theme-kit'
 import { fromSlotCopy } from '@meith/theme-kit'
 import { Avatar, Card, CardContent, cn } from '@meith/ui'
 
-import { BUTTON, ClubBar, HEADING, MICRO, NUMERIC, PAGE_BODY, PanelHead, Stamp } from '../shared'
+import {
+  BUTTON,
+  ClubBar,
+  groupTags,
+  HEADING,
+  MICRO,
+  NUMERIC,
+  PAGE_BODY,
+  PanelHead,
+  Stamp,
+} from '../shared'
 
 export function MemberProfile({
   user,
   avatarUrl,
   title,
+  groups,
   joinedAt,
   lastVisitAt,
   postCount,
@@ -38,7 +49,11 @@ export function MemberProfile({
                 <h1 className={cn(HEADING, 'text-xl break-words', user.nameClass)}>
                   {user.username}
                 </h1>
-                {title !== null && <p className={`${MICRO} mt-0.5`}>{title}</p>}
+                {groupTags(groups, title).map((group) => (
+                  <p key={group.title} className={`${MICRO} mt-0.5`}>
+                    <span className={group.nameClass ?? undefined}>{group.title}</span>
+                  </p>
+                ))}
               </div>
             </div>
 

package/src/slots/post-bit.tsx

@@ -2,7 +2,17 @@ import type { PostBitSlotModel, SlotCopy } from '@meith/theme-kit'
 import { fromSlotCopy } from '@meith/theme-kit'
 import { Alert, AlertDescription, AlertTitle, Avatar, Card } from '@meith/ui'
 
-import { HEADING, LINK, MICRO, MICRO_BARE, MUTED_LINK, NUMERIC, Stamp, UserRef } from '../shared'
+import {
+  groupTags,
+  HEADING,
+  LINK,
+  MICRO,
+  MICRO_BARE,
+  MUTED_LINK,
+  NUMERIC,
+  Stamp,
+  UserRef,
+} from '../shared'
 
 const VISIBILITY_TINT = {
   visible: '',
@@ -98,7 +108,11 @@ function AuthorBlock({
           <UserRef user={author} className={`${HEADING} text-sm`} />
         </p>
 
-        {author.title !== null && <p className={`${MICRO} mt-0.5 truncate`}>{author.title}</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.isOnline && (
           <p className="mt-1 flex items-center gap-1.5 text-xs text-moderation-approved">

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.28.1',
+  version: '0.29.0',
   extends: defaultTheme,
   slots: {
     Shell,