fix: explore tab first-click navigation and misleading empty state

Clear stale currentChannelId when clicking Explore/DMs in ServerSidebar, and guard AppLayout route effect from clobbering showExplore. Move member exclusion into SQL for correct pagination/totals, surface allSettled errors, and show context-aware empty state messages.
2026-03-04 21:24:43 +01:00
parent 5e4a5c2ee9
commit a5ea7633fc
5 changed files with 54 additions and 20 deletions
@@ -195,6 +195,11 @@ export async function exploreRoutes(app: FastifyInstance): Promise<void> {
    // which is more efficient to do with raw SQL
    const rawDb = (db as any).$client as import('better-sqlite3').Database;

+    // Count ALL discoverable servers (including ones the user has joined) for context
+    const totalAllRow = rawDb.prepare(
+      `SELECT COUNT(DISTINCT s.id) as total FROM servers s WHERE s.visibility IN ('public', 'request')`
+    ).get() as { total: number };
+
    let countSql = `SELECT COUNT(DISTINCT s.id) as total FROM servers s WHERE s.visibility IN ('public', 'request')`;
    let querySql = `
      SELECT s.id, s.name, s.icon, s.description, s.visibility, s.created_at,
@@ -204,7 +209,15 @@ export async function exploreRoutes(app: FastifyInstance): Promise<void> {
      WHERE s.visibility IN ('public', 'request')
    `;

-    const params: string[] = [];
+    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}%`;
@@ -226,20 +239,17 @@ export async function exploreRoutes(app: FastifyInstance): Promise<void> {
      member_count: number;
    }[];

-    // Filter out servers the user is already a member of
-    const servers: ExploreServer[] = rows
-      .filter(r => !myServerIds.has(r.id))
-      .map(r => ({
-        id: r.id,
-        name: r.name,
-        icon: r.icon,
-        description: r.description,
-        visibility: r.visibility as ExploreServer['visibility'],
-        memberCount: r.member_count,
-        createdAt: r.created_at,
-      }));
+    const servers: ExploreServer[] = rows.map(r => ({
+      id: r.id,
+      name: r.name,
+      icon: r.icon,
+      description: r.description,
+      visibility: r.visibility as ExploreServer['visibility'],
+      memberCount: r.member_count,
+      createdAt: r.created_at,
+    }));

-    return reply.code(200).send({ servers, total: totalRow.total, discoveryEnabled: true });
+    return reply.code(200).send({ servers, total: totalRow.total, totalAll: totalAllRow.total, discoveryEnabled: true });
  });

  // POST /api/servers/:id/public-join — join a public server without invite
@@ -15,6 +15,7 @@ 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);
@@ -106,7 +107,11 @@ export function ExplorePage() {
              <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" />
            </svg>
            <p className="text-txt-tertiary text-sm">
-              {searchQuery ? 'No servers match your search.' : 'No discoverable servers found.'}
+              {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.'}
            </p>
          </div>
        ) : (
@@ -183,7 +183,9 @@ export function AppLayout() {
  // Handle route params
  useEffect(() => {
    if (serverId === '@me') {
-      setShowDms(true);
+      if (!useUIStore.getState().showExplore) {
+        setShowDms(true);
+      }
      setCurrentServer(null);
    } else if (serverId) {
      setShowDms(false);
@@ -124,6 +124,7 @@ export function ServerSidebar() {
  const setShowExplore = useUIStore((s) => s.setShowExplore);
  const openModal = useUIStore((s) => s.openModal);
  const addToast = useUIStore((s) => s.addToast);
+  const setCurrentChannel = useChatStore((s) => s.setCurrentChannel);
  const unreadChannels = useChatStore((s) => s.unreadChannels);
  const instances = useInstanceStore((s) => s.instances);
  const navigate = useNavigate();
@@ -188,12 +189,14 @@ export function ServerSidebar() {
  const handleDmClick = () => {
    setShowDms(true);
    setCurrentServer(null);
+    setCurrentChannel(null);
    navigate('/channels/@me');
  };

  const handleExploreClick = () => {
    setShowExplore(true);
    setCurrentServer(null);
+    setCurrentChannel(null);
    navigate('/channels/@me');
  };

@@ -16,6 +16,7 @@ interface ExploreState {
  searchQuery: string;
  isLoading: boolean;
  discoveryEnabled: boolean;
+  totalAll: number;
  error: string | null;

  fetchServers: (query?: string) => Promise<void>;
@@ -42,6 +43,7 @@ export const useExploreStore = create<ExploreState>((set, get) => ({
  searchQuery: '',
  isLoading: false,
  discoveryEnabled: true,
+  totalAll: 0,
  error: null,

  fetchServers: async (query?: string) => {
@@ -59,20 +61,30 @@ export const useExploreStore = create<ExploreState>((set, get) => ({
        ),
      ]);

+      const fulfilled = results.filter(r => r.status === 'fulfilled') as PromiseFulfilledResult<{ servers: ExploreServer[]; total: number; totalAll?: number; discoveryEnabled: boolean; origin: string }>[];
+      const rejected = results.filter(r => r.status === 'rejected');
+
+      // If ALL instances failed, surface an error
+      if (fulfilled.length === 0 && rejected.length > 0) {
+        set({ isLoading: false, error: 'Failed to reach any server for discovery' });
+        return;
+      }
+
      const allServers: TaggedExploreServer[] = [];
      const seen = new Set<string>(); // dedup by serverId+origin
      let homeDiscoveryEnabled = true;
+      let totalAllSum = 0;

-      for (const result of results) {
-        if (result.status !== 'fulfilled') continue;
-
-        const { servers, discoveryEnabled, origin } = result.value;
+      for (const result of fulfilled) {
+        const { servers, discoveryEnabled, totalAll, origin } = result.value;

        // Track home instance discovery state
        if (!origin) {
          homeDiscoveryEnabled = discoveryEnabled;
        }

+        totalAllSum += totalAll ?? 0;
+
        for (const server of servers) {
          const key = `${server.id}:${origin}`;
          if (seen.has(key)) continue;
@@ -84,6 +96,7 @@ export const useExploreStore = create<ExploreState>((set, get) => ({
      set({
        servers: allServers,
        discoveryEnabled: homeDiscoveryEnabled,
+        totalAll: totalAllSum,
        isLoading: false,
      });
    } catch (err) {
@@ -139,6 +152,7 @@ export const useExploreStore = create<ExploreState>((set, get) => ({
    searchQuery: '',
    isLoading: false,
    discoveryEnabled: true,
+    totalAll: 0,
    error: null,
  }),
 }));