UI/UX Spec - irl.coop

Concept: "Pared-down Discord" Philosophy: Apps are Channels. Governance is Content.

The Layout (Desktop)

A three-column layout familiar to anyone who uses chat apps, but adapted for doing things, not just talking.

1. The Navigation Rail (Far Left)

• Circles: Icons for each Group the user is in ("Swim Buddies", "OEM").
• Top: "Me" / Home (Global feed of mentions/votes across all groups).
• Bottom: "Create Group" (+).

2. The Context Rail (Left Sidebar)

Unlike Discord (which is just Chat Channels), this mixes Tools and Chats.

Category: Communication

• # lobby (General Chat)
• # logistics (Topic Chat)
• 🔊 Voice Lounge

Category: Operations

• 🏛 Treasury (Clicking this opens the Banking Dashboard in the main view)
• 📅 Calendar (Opens the Calendar View)
• 📝 Docs (Opens file browser/OnlyOffice)
• 🗺 Map (Opens OpenMapServer)

3. The Main Stage (Center)

This is the view frame. It changes based on what is selected in the Context Rail.

• If Chat selected: Standard chat interface.
  • Innovation: Embedded Proposals.
  • When a vote starts, a card appears in the chat stream:
  • [ Proposal: Pay Kayaker $50 ] [ Vote YES ] [ Vote NO ]
  • Users vote without leaving the conversation.
• If Treasury selected:
  • Big Font: $150.00 (Shielded Total).
  • List of recent transactions ("$50 from Joe", "Pending: $50 to Kayaker").
  • "Add Funds" Button (Venmo/Crypto bridge).

4. The Activity Rail (Right - Collapsible)

• Top: Action Items (The "Work" list)
  • "3 Pending Votes" (Red Badge).
  • "Draft Email to Sarah" (Needs approval).
• Bottom: Members
  • Online list.
  • Role/Status.

Mobile Experience

Mobile is strictly for Triage & Communication.

• Tab Bar:
  1. Chat: (The pulse).
  2. Action: (Pending votes/approvals - Tinder style "Swipe to Approve"?).
  3. Wallet: (Treasury view & Add Funds).
• Deep Work: Editing documents or configuring phone trees is hidden or disabled on mobile. Focus on "Vote", "Chat", "Pay".

Key Interactions

"The Magic Input" In the chat bar, typing / brings up the Group's superpowers.

• /propose "Buy Pizza" -> Starts a governance flow.
• /invite @Sarah -> Generates an invite link.
• /map -> Drops a pin in the chat.

"Action as Object" Governance isn't a separate tab you visit once a month. It's a card in the chat.

• "Joe created a draft email." -> [ View Draft ] button in chat.
• "Joe wants to send it." -> [ Vote to Send ] button appears below the draft.

Visual Vibe

• Clean, not Cyberpunk. This is for swim clubs, not hackers.
• Warm Tones. Avoid "Matrix Green" or "Dark Mode Purple". Think "Paper and Ink" or "Nature" palettes.
• Trust Indicators. When money is involved, show clear status: "Secured by Namada", "Processing...", "Sent".