Feature: WE/Flux Sidebar Integration

[jhweir]

WE ↔ Flux Sidebar Integration

Branch: feat/we-flux-sidebar-integration → base: feat/postmessage-ws-proxy
Repo: coasys/flux

---

Overview

When Flux is embedded inside WE, the WE sidebar already shows all spaces — so Flux's own sidebar is redundant. This PR wires the two together: WE hides Flux's sidebar and drives its navigation, giving the user a single unified sidebar experience.

A companion PR in coasys/we (see below) broadcasts NAVIGATE_PERSPECTIVE postMessages when the user clicks a space. This PR is the Flux side that consumes them.

---

Problem

• Flux loaded as an embedded iframe inside WE displayed its own sidebar alongside WE's, wasting horizontal space and duplicating navigation.
• Clicking a space in WE's sidebar had no effect on Flux — the two apps navigated independently.
• When WE navigated to a perspective that had no Flux community yet, Flux had no way to handle it gracefully.

---

Message Protocol

// WE → Flux (postMessage from SpaceStore.navigateToSpace)
{ type: 'NAVIGATE_PERSPECTIVE', communityId: string }

communityId = WE's spaceId = Flux's router communityId. Both strip neighbourhood:// from the shared URL, or use the raw UUID for local perspectives — no transformation needed on either side.

---

Changes

app/src/app.ts

Hide sidebar on embed:
When isEmbedded() is true, calls uiStore.setAppSidebarOpen(false) immediately after Pinia is ready, permanently collapsing Flux's sidebar so WE's unified sidebar is the sole navigation surface.

NAVIGATE_PERSPECTIVE listener:
Attaches a window.addEventListener('message', ...) that filters for type === 'NAVIGATE_PERSPECTIVE' and calls handlePerspectiveNavigation(communityId).

handlePerspectiveNavigation:
Looks up communityId in appStore.myCommunities, trying both the neighbourhood-prefixed key and the private:// variant. If found, pushes the user to their last-remembered route for that community (via routeMemoryStore), falling back to the community root. If the perspective exists but has no Flux community, redirects to the new init-community route.

Pending navigation queue:
If NAVIGATE_PERSPECTIVE arrives before Flux finishes initialising, the communityId is stored in pendingPerspectiveNavigation. After init completes, this is dispatched as the first navigation, replacing the default "go to last community" logic.

---

app/src/router/index.ts

Adds a single new route nested under the main layout:

{
  path: 'init-community/:communityId',
  name: 'init-community',
  component: () => import('@/views/main/InitCommunityView.vue'),
}

---

app/src/views/main/InitCommunityView.vue (new)

Shown when the user navigates in WE to a perspective that has no Flux community yet.

• Resolves the perspective from appStore.myPerspectives by matching communityId against the stripped sharedUrl or raw UUID.
• Happy path: shows the perspective's avatar and name with a prompt explaining it has no Flux community yet. An "Initialize Flux Community" button calls createCommunity({ perspectiveUuid, name, client }) from @coasys/flux-api, refreshes myCommunities, then navigates to the new community.
• Error state: if the perspective can't be found at all, shows "Space not accessible".

---

Edge Cases

Scenario	Behaviour
NAVIGATE_PERSPECTIVE arrives before init completes	Queued, dispatched as the first post-init navigation
Perspective has a Flux community	Navigate to last-remembered route for that community
Perspective exists but has no Flux community	Navigate to init-community view
Perspective not found	init-community shows "Space not accessible" error state

---

Files Changed

• app/src/app.ts
• app/src/router/index.ts
• app/src/views/main/InitCommunityView.vue (new)
• packages/ui/meta.json (build artifact bump, not for review)

---

Companion WE PR

Branch: feat/we-flux-sidebar-integration in coasys/we
The sole functional change is in SpaceStore.tsx: navigateToSpace() now calls broadcastPerspectiveNavigation(spaceId) after updating the route, which queries all we-iframe elements and posts { type: 'NAVIGATE_PERSPECTIVE', communityId } to each. No schema or UI changes required on the WE side.

[coderabbitai]

Warning

Review limit reached

@jhweir, we couldn't start this review because you've reached your PR review rate limit.

More reviews will be available in 36 minutes and 25 seconds. Learn how PR review limits work.

Your organization has run out of usage credits. Purchase more in the billing tab.

⌛ How to resolve this issue?

After more reviews become available, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

We recommend that you space out your commits to avoid hitting the rate limit.

🚦 How do rate limits work?

CodeRabbit enforces hourly rate limits for each developer per organization.

Our paid plans include higher PR review limits than trial, open-source, and free plans. In all cases, reviews become available again over time. During sustained high-volume PR review activity, CodeRabbit may temporarily slow when the next review becomes available.

Please see our Fair Usage Limits Policy for further information.

ℹ️ Review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 2044b964-fd57-4472-a639-e9db3b02a1fa

📥 Commits

Reviewing files that changed from the base of the PR and between bc3bae2 and 6291c88.

📒 Files selected for processing (3)

• app/src/app.ts
• app/src/router/index.ts
• app/src/views/main/InitCommunityView.vue

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch feat/we-flux-sidebar-integration

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[netlify]

✅ Deploy Preview for fluxsocial-dev ready!

Name	Link
🔨 Latest commit	6291c88
🔍 Latest deploy log	https://app.netlify.com/projects/fluxsocial-dev/deploys/6a216f372c40160008a70404
😎 Deploy Preview	https://deploy-preview-603--fluxsocial-dev.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[lucksus]

LGTM, not tested though