UI/UX Guide - Phase 2

Responsive Layout System

Desktop (lg):

┌─────────────────────────────────────────┐
│ Settings (25%) | Feed (50%) | Users (25%)│
└─────────────────────────────────────────┘

Tablet (md):

┌───────────────────────────────┐
│ Settings (30%) | Feed (70%)   │
│ + Drawer for Users →          │
└───────────────────────────────┘

Mobile (sm):

┌──────────────┐
│ Feed (100%)  │
│ ↑ Bottom Sheet│
└──────────────┘

<UnreadBadge :count="unreadMessages" size="md" />

Props: count (number), size (sm|md|lg), maxDisplay (default: 99)

<ProfileEditor :user-id="userId" :sphere-id="sphereId" @close="handleClose" />

Opens modal for profile editing with avatar upload, bio, interests, location.

<OffcanvasDrawer v-model:open="drawerOpen" title="Users" position="right">
  <UsersSidebar />
</OffcanvasDrawer>

<BottomSheet v-model:open="sheetOpen">
  <template #header>Custom Header</template>
  <UsersSidebar />
</BottomSheet>