feat: show joined servers in explore page instead of empty state

Joined discoverable servers now appear in a collapsible "Joined" section at the bottom of the explore page, so the page never feels dead when all servers have been joined. A mint success banner replaces the old empty state text.
2026-03-05 01:11:23 +01:00
parent bd7f65d33c
commit b840d2f82b
5 changed files with 124 additions and 31 deletions
@@ -211,14 +211,6 @@ export async function exploreRoutes(app: FastifyInstance): Promise<void> {

    const params: (string | number)[] = [];

-    // Exclude servers the user is already in — do this in SQL for correct total/pagination
-    if (myServerIds.size > 0) {
-      const placeholders = [...myServerIds].map(() => '?').join(',');
-      querySql += ` AND s.id NOT IN (${placeholders})`;
-      countSql += ` AND s.id NOT IN (${placeholders})`;
-      params.push(...myServerIds);
-    }
-
    if (q) {
      const likePattern = `%${q}%`;
      querySql += ` AND (s.name LIKE ? COLLATE NOCASE OR s.description LIKE ? COLLATE NOCASE)`;
@@ -247,6 +239,7 @@ export async function exploreRoutes(app: FastifyInstance): Promise<void> {
      visibility: r.visibility as ExploreServer['visibility'],
      memberCount: r.member_count,
      createdAt: r.created_at,
+      joined: myServerIds.has(r.id),
    }));

    return reply.code(200).send({ servers, total: totalRow.total, totalAll: totalAllRow.total, discoveryEnabled: true });
@@ -49,6 +49,7 @@ export interface ExploreServer {
  visibility: ServerVisibility;
  memberCount: number;
  createdAt: number;
+  joined?: boolean;
 }

 export interface JoinRequest {
@@ -118,7 +118,7 @@ export class BackspaceApiClient {
  };

  readonly explore: {
-    list: (q?: string, limit?: number, offset?: number) => Promise<{ servers: ExploreServer[]; total: number; discoveryEnabled: boolean }>;
+    list: (q?: string, limit?: number, offset?: number) => Promise<{ servers: ExploreServer[]; total: number; totalAll: number; discoveryEnabled: boolean }>;
    publicJoin: (serverId: string) => Promise<ServerWithChannelsAndMembers>;
    requestJoin: (serverId: string, message?: string) => Promise<JoinRequest>;
    getJoinRequests: (serverId: string, status?: string) => Promise<{ requests: JoinRequest[] }>;
@@ -305,7 +305,7 @@ export class BackspaceApiClient {
        if (q) params.set('q', q);
        params.set('limit', String(limit));
        params.set('offset', String(offset));
-        return request<{ servers: ExploreServer[]; total: number; discoveryEnabled: boolean }>(
+        return request<{ servers: ExploreServer[]; total: number; totalAll: number; discoveryEnabled: boolean }>(
          'GET', `/servers/explore?${params}`
        );
      },
@@ -1,4 +1,4 @@
-import React, { useEffect, useRef, useState, useCallback } from 'react';
+import React, { useEffect, useRef, useState, useCallback, useMemo } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { useExploreStore, type TaggedExploreServer } from '../../stores/exploreStore';
 import { useServerStore } from '../../stores/serverStore';
@@ -15,13 +15,14 @@ export function ExplorePage() {
  const myRequests = useExploreStore((s) => s.myRequests);
  const isLoading = useExploreStore((s) => s.isLoading);
  const discoveryEnabled = useExploreStore((s) => s.discoveryEnabled);
-  const totalAll = useExploreStore((s) => s.totalAll);
  const error = useExploreStore((s) => s.error);
  const searchQuery = useExploreStore((s) => s.searchQuery);
  const setSearchQuery = useExploreStore((s) => s.setSearchQuery);
  const fetchServers = useExploreStore((s) => s.fetchServers);
  const fetchMyRequests = useExploreStore((s) => s.fetchMyRequests);

+  const [joinedCollapsed, setJoinedCollapsed] = useState(false);
+
  const debounceRef = useRef<ReturnType<typeof setTimeout> | null>(null);

  // Fetch on mount
@@ -51,6 +52,19 @@ export function ExplorePage() {
    navigate(`/channels/${serverId}`);
  };

+  const unjoinedServers = useMemo(
+    () => servers.filter(s => !s.joined),
+    [servers],
+  );
+  const joinedServers = useMemo(
+    () => servers.filter(s => s.joined),
+    [servers],
+  );
+
+  const hasAnyServers = servers.length > 0;
+  const hasUnjoined = unjoinedServers.length > 0;
+  const hasJoined = joinedServers.length > 0;
+
  return (
    <div className="flex-1 flex flex-col bg-surface-chat h-full">
      {/* Header */}
@@ -101,7 +115,8 @@ export function ExplorePage() {
          <div className="mx-6 mt-4 p-3 bg-accent-rose/10 border border-accent-rose/30 rounded text-sm text-txt-danger">
            {error}
          </div>
-        ) : servers.length === 0 ? (
+        ) : !hasAnyServers ? (
+          /* True empty state — no discoverable servers at all */
          <div className="flex flex-col items-center justify-center h-64 opacity-60">
            <svg width="48" height="48" viewBox="0 0 24 24" fill="currentColor" className="text-txt-tertiary mb-3">
              <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-5.5-2.5l7.51-3.49L17.5 6.5 9.99 9.99 6.5 17.5zm5.5-6.6c.61 0 1.1.49 1.1 1.1s-.49 1.1-1.1 1.1-1.1-.49-1.1-1.1.49-1.1 1.1-1.1z" />
@@ -109,21 +124,75 @@ export function ExplorePage() {
            <p className="text-txt-tertiary text-sm">
              {searchQuery
                ? 'No servers match your search.'
-                : totalAll > 0
-                  ? `You've already joined all ${totalAll} discoverable server${totalAll === 1 ? '' : 's'}.`
-                  : 'No servers have been made discoverable yet.'}
+                : 'No servers have been made discoverable yet.'}
            </p>
          </div>
        ) : (
-          <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4 p-6">
-            {servers.map((server) => (
-              <ServerCard
-                key={`${server.id}:${server._instanceOrigin}`}
-                server={server}
-                isPending={myRequests.some(r => r.serverId === server.id && r.status === 'pending')}
-                onJoinSuccess={handleJoinSuccess}
-              />
-            ))}
+          <div className="p-6 space-y-6">
+            {/* All-joined success banner (only when no unjoined servers remain) */}
+            {!hasUnjoined && hasJoined && !searchQuery && (
+              <div className="flex items-center gap-2.5 px-4 py-2.5 bg-accent-mint/10 border border-accent-mint/20 rounded-lg">
+                <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor" className="text-accent-mint flex-shrink-0">
+                  <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z" />
+                </svg>
+                <span className="text-[13px] text-accent-mint">
+                  You're in all discoverable servers
+                </span>
+              </div>
+            )}
+
+            {/* Unjoined servers grid */}
+            {hasUnjoined && (
+              <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4">
+                {unjoinedServers.map((server) => (
+                  <ServerCard
+                    key={`${server.id}:${server._instanceOrigin}`}
+                    server={server}
+                    isPending={myRequests.some(r => r.serverId === server.id && r.status === 'pending')}
+                    onJoinSuccess={handleJoinSuccess}
+                  />
+                ))}
+              </div>
+            )}
+
+            {/* Joined servers section */}
+            {hasJoined && (
+              <div>
+                <button
+                  onClick={() => setJoinedCollapsed(!joinedCollapsed)}
+                  className="flex items-center gap-2 mb-3 group"
+                >
+                  <svg
+                    width="12"
+                    height="12"
+                    viewBox="0 0 24 24"
+                    fill="currentColor"
+                    className={`text-txt-tertiary transition-transform ${joinedCollapsed ? '-rotate-90' : ''}`}
+                  >
+                    <path d="M7 10l5 5 5-5z" />
+                  </svg>
+                  <span className="text-xs font-semibold uppercase tracking-wider text-txt-tertiary group-hover:text-txt-secondary transition-colors">
+                    Joined
+                  </span>
+                  <span className="text-xs text-txt-tertiary/60">
+                    {joinedServers.length}
+                  </span>
+                </button>
+
+                {!joinedCollapsed && (
+                  <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4">
+                    {joinedServers.map((server) => (
+                      <ServerCard
+                        key={`${server.id}:${server._instanceOrigin}`}
+                        server={server}
+                        isPending={false}
+                        onJoinSuccess={handleJoinSuccess}
+                      />
+                    ))}
+                  </div>
+                )}
+              </div>
+            )}
          </div>
        )}
      </div>
@@ -151,6 +220,7 @@ function ServerCard({

  const gradient = getServerGradient(server.id, server.name);
  const isPublic = server.visibility === 'public';
+  const isJoined = server.joined === true;
  const originLabel = server._instanceOrigin
    ? (() => { try { return new URL(server._instanceOrigin).host; } catch { return server._instanceOrigin; } })()
    : null;
@@ -181,8 +251,16 @@ function ServerCard({
    }
  };

+  const handleViewServer = () => {
+    onJoinSuccess(server.id);
+  };
+
  return (
-    <div className="bg-surface-sidebar rounded-lg border border-border-soft overflow-hidden flex flex-col transition-colors hover:border-border-hard">
+    <div className={`bg-surface-channel rounded-lg border overflow-hidden flex flex-col transition-colors ${
+      isJoined
+        ? 'border-accent-mint/20 hover:border-accent-mint/40'
+        : 'border-border-soft hover:border-border-hard'
+    }`}>
      {/* Banner / Icon area */}
      <div className="h-32 relative flex items-center justify-center" style={{ background: gradient.gradient }}>
        {server.icon ? (
@@ -197,6 +275,18 @@ function ServerCard({
          </span>
        )}

+        {/* Joined badge (top-left) */}
+        {isJoined && (
+          <div className="absolute top-2 left-2">
+            <span className="flex items-center gap-1 px-2 py-0.5 rounded-full text-[10px] font-semibold bg-accent-mint/25 text-accent-mint backdrop-blur-sm">
+              <svg width="10" height="10" viewBox="0 0 24 24" fill="currentColor">
+                <path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z" />
+              </svg>
+              Joined
+            </span>
+          </div>
+        )}
+
        {/* Visibility badge */}
        <div className="absolute top-2 right-2">
          <span className={`px-2 py-0.5 rounded-full text-[10px] font-semibold uppercase tracking-wider ${
@@ -244,7 +334,14 @@ function ServerCard({
          <div className="text-[12px] text-txt-danger mb-2">{joinError}</div>
        )}

-        {isPublic ? (
+        {isJoined ? (
+          <button
+            onClick={handleViewServer}
+            className="w-full py-2 bg-accent-mint/15 hover:bg-accent-mint/25 text-accent-mint text-sm font-medium rounded transition-colors"
+          >
+            View Server
+          </button>
+        ) : isPublic ? (
          <button
            onClick={handlePublicJoin}
            disabled={joining}
@@ -89,7 +89,7 @@ export const useExploreStore = create<ExploreState>((set, get) => ({
          const key = `${server.id}:${origin}`;
          if (seen.has(key)) continue;
          seen.add(key);
-          allServers.push({ ...server, _instanceOrigin: origin });
+          allServers.push({ ...server, _instanceOrigin: origin, joined: server.joined ?? false });
        }
      }

@@ -123,10 +123,12 @@ export const useExploreStore = create<ExploreState>((set, get) => ({
    // Add to server store
    useServerStore.getState().addServerFromReady(server._instanceOrigin, fullServer);

-    // Remove from explore list
+    // Mark as joined in explore list
    set((state) => ({
-      servers: state.servers.filter(s =>
-        !(s.id === server.id && s._instanceOrigin === server._instanceOrigin)
+      servers: state.servers.map(s =>
+        s.id === server.id && s._instanceOrigin === server._instanceOrigin
+          ? { ...s, joined: true }
+          : s
      ),
    }));