Show Inactive badge on communities map tooltip

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

Author: bryceerobertson

src/app/communities/CommunitiesMap.tsx

@@ -64,6 +64,7 @@ export default function CommunitiesMap({ communities }: CommunitiesMapProps) {
           location: c.location || '',
           link: c.joinLink,
           logo: c.logo || '',
+          activity: c.activityLevel,
         }
       })
 
@@ -236,6 +237,7 @@ export default function CommunitiesMap({ communities }: CommunitiesMapProps) {
             link: community.link,
             location: community.location,
             logo: community.logo,
+            activity: community.activity,
             baseSize:
               community.type === 'city'
                 ? 0.25
@@ -316,7 +318,11 @@ export default function CommunitiesMap({ communities }: CommunitiesMapProps) {
         const locationLine = location
           ? `<span class="location-text"><svg class="location-icon" width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M6 1a3.5 3.5 0 0 0-3.5 3.5c0 2.5 3.5 6.5 3.5 6.5s3.5-4 3.5-6.5A3.5 3.5 0 0 0 6 1Zm0 5a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3Z" fill="currentColor"/></svg>${location}</span>`
           : ''
-        return `<div class="tooltip-header">${headerImage}<div class="tooltip-title-block"><strong class="paragraph-small-bold">${name}</strong>${locationLine}</div></div>${description}`
+        const inactiveBadge =
+          props?.activity === 'Inactive'
+            ? '<span class="tooltip-inactive-badge">Inactive</span>'
+            : ''
+        return `<div class="tooltip-header">${headerImage}<div class="tooltip-title-block"><strong class="paragraph-small-bold">${name}</strong>${inactiveBadge}${locationLine}</div></div>${description}`
       }
 
       function updateTooltipPosition(

src/app/communities/page.module.css

@@ -147,6 +147,16 @@
   min-width: 0;
 }
 
+/* align-self keeps the pill hugging its text — without it the flex column
+   stretches the border across the tooltip's full width. */
+:global(#mapbox-tooltip .tooltip-inactive-badge) {
+  align-self: flex-start;
+  padding: 1px 8px;
+  border: 1px solid var(--teal-600);
+  border-radius: 999px;
+  color: var(--teal-300);
+}
+
 :global(#mapbox-tooltip .location-text) {
   display: inline-flex;
   align-items: center;