From 807b2f623461b2a41ab9b297683ef36adc8d4519 Mon Sep 17 00:00:00 2001
From: Jannis Braun <151788261+TheZwiss@users.noreply.github.com>
Date: Wed, 1 Jul 2026 19:06:10 +0200
Subject: [PATCH] refactor(web): fold final-review polish into join modal
 feature

---
 .../modals/ExploreSpacePreviewCard.tsx        |  9 +++-----
 .../src/components/modals/JoinSpace.test.tsx  | 21 +++++++++++++++++++
 packages/web/src/hooks/useSpaceJoin.test.ts   |  9 ++++++++
 3 files changed, 33 insertions(+), 6 deletions(-)

diff --git a/packages/web/src/components/modals/ExploreSpacePreviewCard.tsx b/packages/web/src/components/modals/ExploreSpacePreviewCard.tsx
index 4422a216..4dff6886 100644
--- a/packages/web/src/components/modals/ExploreSpacePreviewCard.tsx
+++ b/packages/web/src/components/modals/ExploreSpacePreviewCard.tsx
@@ -1,4 +1,3 @@
-import { useState } from 'react';
 import { useSpaceJoin } from '../../hooks/useSpaceJoin';
 import { getSpaceGradient } from '../../utils/gradients';
 import type { TaggedExploreSpace } from '../../stores/exploreStore';
@@ -24,8 +23,6 @@ export function ExploreSpacePreviewCard({
     sendRequest,
   } = useSpaceJoin(space);
 
-  const [expanded, setExpanded] = useState(false);
-
   const fallbackGradient = getSpaceGradient(space.id, space.name, space.avatarColor).gradient;
   const iconUrl = space.icon
     ? (space.icon.startsWith('http') || space.icon.startsWith('/') ? space.icon : `/api/uploads/${space.icon}`)
@@ -79,7 +76,7 @@ export function ExploreSpacePreviewCard({
           ) : (
             <button
               type="button"
-              onClick={() => { openRequestForm(); setExpanded(true); }}
+              onClick={openRequestForm}
               className="px-3 py-1.5 bg-accent-amber/20 hover:bg-accent-amber/30 text-accent-amber text-xs font-medium rounded-full transition-colors"
             >
               Request
@@ -89,7 +86,7 @@ export function ExploreSpacePreviewCard({
       </div>
 
       {/* Inline request form */}
-      {showRequestForm && expanded && (
+      {showRequestForm && (
         <div className="mt-2.5 space-y-2">
           <textarea
             value={requestMessage}
@@ -109,7 +106,7 @@ export function ExploreSpacePreviewCard({
             </button>
             <button
               type="button"
-              onClick={() => { cancelRequestForm(); setExpanded(false); }}
+              onClick={cancelRequestForm}
               className="px-3 py-1.5 text-xs text-txt-tertiary hover:text-txt-secondary transition-colors"
             >
               Cancel
diff --git a/packages/web/src/components/modals/JoinSpace.test.tsx b/packages/web/src/components/modals/JoinSpace.test.tsx
index 2f18c43a..9009c72d 100644
--- a/packages/web/src/components/modals/JoinSpace.test.tsx
+++ b/packages/web/src/components/modals/JoinSpace.test.tsx
@@ -174,6 +174,27 @@ describe('JoinSpaceModal', () => {
     expect(mockNavigate).not.toHaveBeenCalledWith('/explore');
   });
 
+  it('shows loading skeletons while discovery is fetching with no spaces yet', () => {
+    useExploreStore.setState({ isLoading: true, spaces: [] });
+    useUIStore.setState({ activeModal: 'joinSpace' });
+    renderModal();
+    // The skeleton branch (discoveryLoading && previewSpaces.length === 0)
+    // renders placeholder rows marked with `animate-pulse`.
+    expect(document.querySelectorAll('.animate-pulse').length).toBeGreaterThan(0);
+  });
+
+  it('degrades to the invite path when discovery fails to load', () => {
+    useExploreStore.setState({ error: 'boom', spaces: [], isLoading: false });
+    useUIStore.setState({ activeModal: 'joinSpace' });
+    renderModal();
+    // Discovery failure shows a degrade note...
+    expect(screen.getByText(/Couldn.t load spaces/i)).toBeInTheDocument();
+    // ...but the invite input stays usable so the user can still join.
+    expect(
+      screen.getByPlaceholderText('e.g. abc123 or https://instance.com/join/abc123')
+    ).toBeInTheDocument();
+  });
+
   it('hides discovery and shows a notice when discovery is disabled', () => {
     useExploreStore.setState({ discoveryEnabled: false });
     useUIStore.setState({ activeModal: 'joinSpace' });
diff --git a/packages/web/src/hooks/useSpaceJoin.test.ts b/packages/web/src/hooks/useSpaceJoin.test.ts
index 9b4eed1a..6ae7c830 100644
--- a/packages/web/src/hooks/useSpaceJoin.test.ts
+++ b/packages/web/src/hooks/useSpaceJoin.test.ts
@@ -75,6 +75,15 @@ describe('useSpaceJoin', () => {
     expect(result.current.joining).toBe(false);
   });
 
+  it('openRequestForm/cancelRequestForm toggle showRequestForm', () => {
+    const { result } = renderHook(() => useSpaceJoin(makeSpace({ visibility: 'request' })));
+    expect(result.current.showRequestForm).toBe(false);
+    act(() => result.current.openRequestForm());
+    expect(result.current.showRequestForm).toBe(true);
+    act(() => result.current.cancelRequestForm());
+    expect(result.current.showRequestForm).toBe(false);
+  });
+
   it('sendRequest() calls requestJoin and flips to pending', async () => {
     const { result } = renderHook(() => useSpaceJoin(makeSpace({ visibility: 'request' })));
     act(() => result.current.setRequestMessage('  please  '));