Communities Page Overhaul — PRD

Product: Objectuve (codename: Enkidu) Feature: /communities page redesign and bug fixes Status: Shipped — April 2026 Date: April 2026

---

✓ SHIPPED — Delivered April 2026. All acceptance criteria met and live in production.

1. Problem Statement

The /communities page was built early in Objectuve's development and hasn't kept pace with the rest of the app. The Dashboard and Goal detail pages received significant UX improvements (prominent images, streamlined layout, Focus Mode), but the Communities page still has fundamental usability issues:

Three reported bugs:

1. Ally activity feed isn't navigable. Items render as buttons and emit click events, but the AllyActivityFeed.vue component's local mock data lacks communityId, so clicks silently fail. When backend data is available, the field may also be missing from the GraphQL response mapping. Users see activity but can't act on it.

2. "My Communities" isn't prominent. The section exists but has the same visual weight as "Recommended" and "All Communities." Worse, when a category filter is applied, "My Communities" can disappear entirely if the user hasn't joined any communities in that category. Users can't quickly see or act on their own communities.

3. Category tabs show counts but render empty. Categories are hardcoded with static counts ({ id: 'fitness', name: 'Fitness', count: 12 }). The filter has a case-sensitivity bug — selectedCategory is lowercase 'fitness' but community categories are capitalized 'Fitness'. No empty state exists for zero-result categories.

Broader issues identified during exploration:

4. Mock data masking real problems. The enhancedCommunities computed property generates random fallback values (activeMembers: Math.floor(Math.random() * 50), category: categories[random].name) when backend fields are missing. This makes the page look full in dev but masks missing data in production.

5. Visual consistency gap. The rest of the app now has prominent image cards (GoalGridCard with 120px hero band), glassmorphism styling, and Coach insights. The communities page uses an older card style without these patterns.

6. No quick actions from "My Communities." Joined communities show a "View Community" button but no shortcuts for common actions like checking the feed or seeing recent activity — the user must navigate to the detail page for everything.

---

2. Goals & Success Metrics

Primary Goals

1. Fix all three reported bugs (ally navigation, my communities visibility, category filtering)
2. Elevate "My Communities" to the primary section — the first thing users see and interact with
3. Bring the page's visual design in line with the updated Dashboard and Goals pages
4. Remove mock data fallbacks that mask missing backend data

Success Metrics

Metric	Target	Measurement
Community detail page views from /communities	+30%	Navigation events from ally activity + community cards
"My Communities" interaction rate	50%+ of visits include a tap on a joined community	Click tracking on my-communities section
Category filter usage → successful navigation	80%+ of filtered views show results	Filter event → non-empty render
Time to first community interaction	< 5 seconds from page load	First tap on any community element

Guardrails

• Page must load and be interactive within 2 seconds on a good connection
• No mock/random data in any user-facing section — show real data or a clear empty state
• "My Communities" section must never be hidden by filters
• Anti-social principle: the page helps users find and engage with communities for accountability, not for browsing/entertainment

---

3. User Stories

• US-1: As a user, I want to tap an ally activity item and navigate to the relevant community, so I can see what my allies are doing.
• US-2: As a user, I want my joined communities shown prominently at the top with quick actions, so I can check in without extra navigation.
• US-3: As a user, I want category filters that work correctly and show accurate counts, so I can browse communities by interest.
• US-4: As a user, I want a clear "no results" message when a category has no communities, so I know the page isn't broken.
• US-5: As a user, I want community cards that look consistent with goal cards (prominent images, modern styling), so the app feels cohesive.
• US-6: As a new user with no communities, I want a clear onboarding prompt to join my first community, so I'm not staring at an empty page.

---

4. Feature Design

4a. Page Layout Restructure

Current layout (top to bottom):

1. Header with toolbar buttons (compare, insights, view toggle, create)
2. Ally Activity Feed (collapsible)
3. AI Insight Card
4. Search + Sort controls
5. Category filter chips
6. My Communities section
7. Recommended For You section
8. All Communities section

Proposed layout (top to bottom):

1. Header — simplified: title + Create Community button only. Move view toggle and sort into the explore section.
2. My Communities (always first, never filtered away) — horizontal scroll of joined community cards with quick actions. Shows "Join your first community" prompt if empty. Max 8 visible, "View all (N)" for overflow.
3. Explore Communities — contains search, category filters, sort, view toggle, and the browsable grid/list. Combines "Recommended" and "All" into a single filterable list with recommendation badges. Compact card format (~80px image band).

Key principle: My Communities is the action zone (what you're part of). Explore is the discovery zone (what you might join). Ally activity moves to /feed.

Removed from this page: Ally Activity Feed (moves to /feed), AI Insight Card, Comparison modal, Insights panel.

4b. My Communities Section (Priority Fix)

Design:

• Horizontal scrollable row of compact community cards (not full grid cards)
• Each card shows: cover image thumbnail, community name, member count, unread activity indicator
• Tap navigates directly to the community detail page
• Section header: "My Communities" with count badge
• Never hidden by category filters — this section is exempt from the explore filter
• If user has 0 communities: show a CTA card "Find a community that matches your goals" with a button to scroll to Explore

Card size: ~160px wide, aspect ratio ~3:4 (portrait-ish), similar to story/reel thumbnails but not circular

4c. Ally Activity Fix (Bug #1)

Root cause: AllyActivityFeed.vue local mock data doesn't include communityId. The parent handler (handleAllyActivityClick) checks for communityId before navigating.

Fix:

1. Remove local mock data from AllyActivityFeed.vue — the component should only render what's passed via props
2. Ensure ALLY_ACTIVITY_FEED_QUERY returns communityId (it already does in the schema)
3. Add navigation fallback: if communityId is missing but goalId exists, navigate to the goal; if neither, show a toast "Can't navigate to this activity"
4. Make the entire activity item a router-link instead of a button that emits — more semantic and enables right-click → open in new tab

Visual enhancement: Add a small right-arrow chevron to each item to signal clickability.

4d. Category Filter Fix (Bug #3)

Root cause: Three issues compound:

1. Categories are hardcoded with static counts
2. Case-sensitivity mismatch in filter comparison
3. No empty state for zero-result categories

Fix:

1. Dynamic categories — derive from actual community data:

   const categories = computed(() => {
     const cats = new Map<string, number>()
     enhancedCommunities.value.forEach(c => {
       const cat = c.category || 'Other'
       cats.set(cat, (cats.get(cat) || 0) + 1)
     })
     return [
       { id: 'all', name: 'All', count: enhancedCommunities.value.length },
       ...Array.from(cats).map(([name, count]) => ({
         id: name.toLowerCase().replace(/\s+/g, '-'),
         name,
         count
       }))
     ]
   })

2. Case-insensitive filtering — normalize both sides: c.category?.toLowerCase() === selectedCategory.value.toLowerCase()
3. Empty state — when filtered results are empty, show: "No communities in [Category] yet. Create one?" with a Create button

4e. Visual Consistency

Update community cards to match the app's current design language:

• EnhancedCommunityCard: Add a prominent image band similar to GoalGridCard (120px hero with overlaid badges). Currently the card has h-32 for images but uses an older styling pattern.
• Remove random mock data from enhancedCommunities computed — show 0 instead of Math.floor(Math.random() * 50) for missing fields
• Health score and badges: Keep but simplify — these add value but clutter the card at small sizes
• Consistent hover/active states matching GoalGridCard's translateY(-4px) scale(1.01) pattern

4f. Remove Mock Data Fallbacks

The current enhancedCommunities computed (Communities.vue lines 547-595) generates fake data:

• activeMembers: Math.floor(Math.random() * 50) + 5
• totalGoals: Math.floor(Math.random() * 100) + 10
• growthRate: (Math.random() * 30).toFixed(1)
• category: categories[random].name

Replace all random fallbacks with honest defaults:

• activeMembers: c.activeMembers || 0
• totalGoals: c.totalGoals || 0
• growthRate: c.growthRate || '0'
• category: c.category || c.goalCategory?.name || 'General'

---

5. Technical Approach

Files to Modify

File	Change
ionic_frontend/src/views/Communities.vue	Major restructure: reorder sections (My Communities → Explore), fix category filter, remove mock fallbacks, remove ally feed/insights/comparison, simplify header
ionic_frontend/src/components/communities/EnhancedCommunityCard.vue	Update to compact image band (~80px), auto-assign stock photos for missing covers

Files to Create

File	Purpose
ionic_frontend/src/components/communities/MyCommunityCard.vue	Compact horizontal-scroll card for "My Communities" section

Files Potentially Removable (imports removed from Communities.vue)

• AllyActivityFeed.vue — moving to /feed page (separate task)
• CommunityInsightsPanel.vue — removed from this page
• CommunityComparisonModal.vue — removed from this page
• SmartNotifications.vue — removed from this page
• OnboardingTour.vue — replaced by inline empty state

Files Unchanged

• useCommunity.ts — composable is fine, handles join/leave correctly
• social.js GraphQL queries — already return all needed fields
• CommunityPreviewModal.vue, CreateCommunityModal.vue — working correctly
• Community.vue (detail page) — not part of this overhaul

Data Dependencies

• COMMUNITIES_QUERY — already returns all needed fields including members for join detection
• ALLY_ACTIVITY_FEED_QUERY — returns communityId, communityName, allyName, etc.
• No new GraphQL queries or mutations needed

---

6. Implementation Phases

Phase 1: Bug Fixes + Cleanup

1. Fix category filter (case-insensitive, dynamic counts, empty state)
2. Remove random mock data fallbacks (use honest defaults)
3. Remove ally activity feed from this page (will live on /feed)
4. Remove comparison modal, insights panel, and AI insight card (declutter)

Phase 2: Layout Restructure

5. Move "My Communities" to top with horizontal scroll (max 8, "View all" overflow)
6. Create MyCommunityCard component for the horizontal scroll row
7. Combine "Recommended" and "All" into single "Explore" section with recommendation badges
8. Add empty/onboarding state for users with no communities

Phase 3: Visual Polish

9. Update EnhancedCommunityCard with compact image band (~80px)
10. Auto-assign stock photos to communities without covers
11. Simplify header toolbar (title + Create button only)

---

7. Out of Scope (for now)

• Community detail page redesign (separate effort)
• Community creation wizard overhaul
• Real-time activity updates via WebSocket
• Community search (backend full-text search — current search is client-side filter)
• Community recommendations algorithm (currently mock isRecommended)

---

8. Decisions (Resolved)

1. My Communities cap: Show up to 8 in the horizontal scroll with a "View all (N)" link for users with more.

2. Ally activity feed: Move to the main /feed page. Remove from /communities entirely — simplifies the page and avoids duplicate feed concepts.

3. Explore card format: Use a more compact card format (smaller image, ~80px band instead of 120px). Better for browsing many communities without the page being overwhelmingly image-heavy.

4. Auto-assign stock photos: Yes — communities without cover images get auto-assigned stock photos from the existing library (getCommunityStockPhotos()). Apply during creation based on category, same as goals.

---

Related Documentation

• Communities — feature doc for the shipped implementation

Last updated: 2026-07-16