@tribe-nest/forge 3.59.0 → 3.61.0

package/src/ui/styled/community/CommunitySpaces.tsx

@@ -6,22 +6,25 @@ import {
   useLeaveCommunitySpace,
   type CommunitySpace,
 } from "../../../data/queries/useCommunity";
+import { useForgeT } from "../../../i18n";
 import { Loading } from "../Loading";
 
 export interface CommunitySpacesProps {
-  /** Open a space — routes to the space feed. */
+  /** Open a space: routes to the space feed. Never called for a level-locked space. */
   onOpenSpace: (space: CommunitySpace) => void;
 }
 
 /**
- * The gated space list. The API only returns spaces the member can access
+ * The gated space list. The API returns the spaces the member's tiers open
  * (open spaces + spaces gated to one of their active tiers), so a tier badge
- * marks members-only spaces rather than rendering locked rows. Each card also
- * carries the joined-member count and a Join/Joined toggle — tiers govern
- * access, joining opts into new-post notifications.
+ * marks members-only spaces. A space above the member's level is listed too,
+ * locked ("Unlocks at level N") and not a way in. Each open card also carries
+ * the joined-member count and a Join/Joined toggle: tiers govern access,
+ * joining opts into new-post notifications.
  */
 export function CommunitySpaces({ onOpenSpace }: CommunitySpacesProps) {
   const t = useThemeTokens();
+  const tr = useForgeT();
   const { data: spaces = [], isLoading } = useCommunitySpaces();
   const joinSpace = useJoinCommunitySpace();
   const leaveSpace = useLeaveCommunitySpace();
@@ -46,15 +49,25 @@ export function CommunitySpaces({ onOpenSpace }: CommunitySpacesProps) {
         const gated = (space.tiers?.length ?? 0) > 0;
         const memberCount = Number(space.memberCount ?? 0);
         const joinBusy = joinSpace.isPending || leaveSpace.isPending;
+        // Above the member's level: listed so they can see what their next
+        // level opens, but not a way in (the server refuses its feed too).
+        const levelLocked = !!space.levelLocked;
+        const opens = levelLocked
+          ? {}
+          : {
+              role: "button" as const,
+              tabIndex: 0,
+              onClick: () => onOpenSpace(space),
+              onKeyDown: (e: React.KeyboardEvent) => {
+                if (e.key === "Enter" || e.key === " ") onOpenSpace(space);
+              },
+            };
         return (
           <div
             key={space.id}
-            role="button"
-            tabIndex={0}
-            onClick={() => onOpenSpace(space)}
-            onKeyDown={(e) => {
-              if (e.key === "Enter" || e.key === " ") onOpenSpace(space);
-            }}
+            data-testid="community-space-row"
+            data-level-locked={levelLocked ? "true" : undefined}
+            {...opens}
             style={{
               display: "flex",
               alignItems: "center",
@@ -63,9 +76,9 @@ export function CommunitySpaces({ onOpenSpace }: CommunitySpacesProps) {
               borderRadius: t.cornerRadius,
               background: t.surface,
               padding: "14px 16px",
-              cursor: "pointer",
+              cursor: levelLocked ? "default" : "pointer",
               textAlign: "left",
-              color: t.text,
+              color: levelLocked ? t.muted : t.text,
               width: "100%",
             }}
           >
@@ -83,7 +96,7 @@ export function CommunitySpaces({ onOpenSpace }: CommunitySpacesProps) {
                 flexShrink: 0,
               }}
             >
-              <Hash size={18} />
+              {levelLocked ? <Lock size={18} /> : <Hash size={18} />}
             </span>
 
             <span style={{ flex: 1, minWidth: 0 }}>
@@ -108,6 +121,26 @@ export function CommunitySpaces({ onOpenSpace }: CommunitySpacesProps) {
                     {space.tiers.map((tier) => tier.name).join(", ")}
                   </span>
                 )}
+                {levelLocked && (
+                  <span
+                    data-testid="community-space-level-lock"
+                    style={{
+                      display: "inline-flex",
+                      alignItems: "center",
+                      gap: 4,
+                      fontSize: 11,
+                      fontWeight: 600,
+                      color: t.text,
+                      background: `${t.text}0d`,
+                      borderRadius: 999,
+                      padding: "1px 8px",
+                      whiteSpace: "nowrap",
+                    }}
+                  >
+                    <Lock size={10} aria-hidden />
+                    {tr("forge.community_spaces.unlocks_at_level", { level: space.minLevel ?? 1 })}
+                  </span>
+                )}
               </span>
               {space.description && (
                 <span
@@ -143,6 +176,7 @@ export function CommunitySpaces({ onOpenSpace }: CommunitySpacesProps) {
               {`${space.postCount ?? 0} ${Number(space.postCount ?? 0) === 1 ? "post" : "posts"}`}
             </span>
 
+            {!levelLocked && (
             <button
               onClick={(e) => {
                 e.stopPropagation();
@@ -166,6 +200,7 @@ export function CommunitySpaces({ onOpenSpace }: CommunitySpacesProps) {
             >
               {space.isJoined ? "Joined" : "Join"}
             </button>
+            )}
           </div>
         );
       })}