feat: add connections page, composable, nav badge, and peer-support redirect

- useConnections composable wrapping all /api/connections endpoints
- Connections page with suggestions, filters, and connection management
- Pending connection count badge in sidebar navigation
- peer-support.vue now redirects to /connections

app/components/AppNavigation.vue

@@ -34,8 +34,13 @@
                 :to="item.path"
                 :class="{ active: isActive(item.path) }"
                 @click="handleNavigate"
-                >{{ item.label }}</NuxtLink
               >
+                {{ item.label }}
+                <span
+                  v-if="item.path === '/connections' && pendingCount > 0"
+                  class="nav-badge"
+                >{{ pendingCount }}</span>
+              </NuxtLink>
             </li>
           </ul>
         </template>
@@ -129,7 +134,21 @@ const emit = defineEmits(["navigate"]);
 
 const route = useRoute();
 const { isAuthenticated, logout } = useAuth();
+const { getPendingCount } = useConnections();
 const isDev = import.meta.dev;
+const pendingCount = ref(0);
+
+// Fetch pending connection count for authenticated users
+onMounted(async () => {
+  if (isAuthenticated.value) {
+    try {
+      const data = await getPendingCount();
+      pendingCount.value = data.count || 0;
+    } catch {
+      // Silently ignore — badge is non-critical
+    }
+  }
+});
 
 const handleNavigate = () => {
   if (props.isMobile) {
@@ -279,4 +298,19 @@ const exploreItems = [
 .sidebar-meta a {
   color: var(--candle-dim);
 }
+
+.nav-badge {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 16px;
+  height: 16px;
+  padding: 0 4px;
+  margin-left: 6px;
+  font-size: 10px;
+  line-height: 1;
+  color: var(--bg);
+  background: var(--candle);
+  border-radius: 0;
+}
 </style>