From 7a6e79a41c83cb59c872926bd61438739f67596d Mon Sep 17 00:00:00 2001
From: polyjitter <polyjitter@fastmail.com>
Date: Sat, 21 Mar 2026 16:29:11 -0400
Subject: [PATCH 01/12] Added KnockRoomPrompt.

---
 .../knock-room-prompt/KnockRoomPrompt.tsx     | 124 ++++++++++++++++++
 src/app/components/knock-room-prompt/index.ts |   1 +
 src/app/features/lobby/RoomItem.tsx           |  47 ++++++-
 3 files changed, 171 insertions(+), 1 deletion(-)
 create mode 100644 src/app/components/knock-room-prompt/KnockRoomPrompt.tsx
 create mode 100644 src/app/components/knock-room-prompt/index.ts

diff --git a/src/app/components/knock-room-prompt/KnockRoomPrompt.tsx b/src/app/components/knock-room-prompt/KnockRoomPrompt.tsx
new file mode 100644
index 000000000..dd6df494e
--- /dev/null
+++ b/src/app/components/knock-room-prompt/KnockRoomPrompt.tsx
@@ -0,0 +1,124 @@
+import { useCallback, useEffect, useState } from 'react';
+import FocusTrap from 'focus-trap-react';
+import {
+  Dialog,
+  Overlay,
+  OverlayCenter,
+  OverlayBackdrop,
+  Header,
+  config,
+  Box,
+  Text,
+  IconButton,
+  Icon,
+  Icons,
+  color,
+  Button,
+  Spinner,
+} from 'folds';
+import { MatrixError } from '$types/matrix-sdk';
+import { useMatrixClient } from '$hooks/useMatrixClient';
+import { AsyncStatus, useAsyncCallback } from '$hooks/useAsyncCallback';
+import { stopPropagation } from '$utils/keyboard';
+import { createDebugLogger } from '$utils/debugLogger';
+
+const debugLog = createDebugLogger('KockRoomPrompt');
+
+type KnockRoomProps = {
+  roomId: string;
+  via?: string;
+  onDone: () => void;
+  onCancel: () => void;
+};
+export function KnockRoomPrompt({ roomId, via, onDone, onCancel }: KnockRoomProps) {
+  const mx = useMatrixClient();
+  const [reason, setReason] = useState('');
+
+  const [knockState, knockRoom] = useAsyncCallback<undefined, MatrixError, []>(
+    useCallback(async () => {
+      debugLog.info('ui', 'Knock room button clicked', { roomId });
+      mx.knockRoom(roomId, { viaServers: via || undefined, reason: reason.trim() || undefined });
+    }, [mx, roomId, reason, via])
+  );
+
+  const handleKnock = () => {
+    knockRoom();
+  };
+
+  useEffect(() => {
+    if (knockState.status === AsyncStatus.Success) {
+      debugLog.info('ui', 'Successfully left room', { roomId });
+      onDone();
+    }
+  }, [knockState, onDone, roomId]);
+
+  return (
+    <Overlay open backdrop={<OverlayBackdrop />}>
+      <OverlayCenter>
+        <FocusTrap
+          focusTrapOptions={{
+            initialFocus: false,
+            onDeactivate: onCancel,
+            clickOutsideDeactivates: true,
+            escapeDeactivates: stopPropagation,
+          }}
+        >
+          <Dialog variant="Surface">
+            <Header
+              style={{
+                padding: `0 ${config.space.S200} 0 ${config.space.S400}`,
+                borderBottomWidth: config.borderWidth.B300,
+              }}
+              variant="Surface"
+              size="500"
+            >
+              <Box grow="Yes">
+                <Text size="H4">Knock on Room</Text>
+              </Box>
+              <IconButton size="300" onClick={onCancel} radii="300">
+                <Icon src={Icons.Cross} />
+              </IconButton>
+            </Header>
+            <Box style={{ padding: config.space.S400 }} direction="Column" gap="400">
+              <Box direction="Column" gap="200">
+                <Text priority="400">
+                  Request to join this room. You can optionally leave a reason for the moderators.
+                </Text>
+                <textarea
+                  value={reason}
+                  onChange={(e) => setReason(e.target.value)}
+                  placeholder="Reason"
+                  rows={3}
+                  style={{ resize: 'vertical', width: '100%' }}
+                />
+                {knockState.status === AsyncStatus.Error && (
+                  <Text style={{ color: color.Critical.Main }} size="T300">
+                    Failed to knock! {knockState.error.message}
+                  </Text>
+                )}
+              </Box>
+              <Button
+                type="submit"
+                variant="Primary"
+                onClick={handleKnock}
+                before={
+                  knockState.status === AsyncStatus.Loading ? (
+                    <Spinner fill="Solid" variant="Primary" size="200" />
+                  ) : undefined
+                }
+                aria-disabled={
+                  knockState.status === AsyncStatus.Loading ||
+                  knockState.status === AsyncStatus.Success
+                }
+              >
+                <Text size="B400">
+                  {knockState.status === AsyncStatus.Loading ? 'Knocking...' : 'Knock'}
+                </Text>
+              </Button>
+            </Box>
+          </Dialog>
+        </FocusTrap>
+      </OverlayCenter>
+    </Overlay>
+  );
+}
diff --git a/src/app/components/knock-room-prompt/index.ts b/src/app/components/knock-room-prompt/index.ts
new file mode 100644
index 000000000..b53201d56
--- /dev/null
+++ b/src/app/components/knock-room-prompt/index.ts
@@ -0,0 +1 @@
+export * from './KnockRoomPrompt';
diff --git a/src/app/features/lobby/RoomItem.tsx b/src/app/features/lobby/RoomItem.tsx
index 0d512285d..5318df306 100644
--- a/src/app/features/lobby/RoomItem.tsx
+++ b/src/app/features/lobby/RoomItem.tsx
@@ -44,7 +44,6 @@ type RoomJoinButtonProps = {
 };
 function RoomJoinButton({ roomId, via }: RoomJoinButtonProps) {
   const mx = useMatrixClient();
-
   const [joinState, join] = useAsyncCallback<Room, MatrixError, []>(
     useCallback(() => mx.joinRoom(roomId, { viaServers: via }), [mx, roomId, via])
   );
@@ -96,6 +95,52 @@ function RoomJoinButton({ roomId, via }: RoomJoinButtonProps) {
   );
 }
 
+function RoomKnockButton({ roomId, via }: RoomJoinButtonProps) {
+  return (
+    <Box shrink="No" gap="200" alignItems="Center">
+      {/* {joinState.status === AsyncStatus.Error && (
+        <TooltipProvider
+          tooltip={
+            <Tooltip variant="Critical" style={{ maxWidth: toRem(200) }}>
+              <Box direction="Column" gap="100">
+                <Text style={{ wordBreak: 'break-word' }} size="T400">
+                  {joinState.error.data?.error || joinState.error.message}
+                </Text>
+                <Text size="T200">{joinState.error.name}</Text>
+              </Box>
+            </Tooltip>
+          }
+        >
+          {(triggerRef) => (
+            <Icon
+              ref={triggerRef}
+              style={{ color: color.Critical.Main, cursor: 'pointer' }}
+              src={Icons.Warning}
+              size="400"
+              filled
+              tabIndex={0}
+              aria-label={joinState.error.data?.error || joinState.error.message}
+            />
+          )}
+        </TooltipProvider>
+      )} */}
+      <Chip
+        variant="Secondary"
+        fill="Soft"
+        size="400"
+        radii="Pill"
+        // before={
+        //   canJoin ? <Icon src={Icons.Plus} size="50" /> : <Spinner variant="Secondary" size="100" />
+        // }
+        onClick={join}
+        // disabled={!canJoin}
+      >
+        <Text size="B300">Knock</Text>
+      </Chip>
+    </Box>
+  );
+}
+
 function RoomProfileLoading() {
   return (
     <Box grow="Yes" gap="300">

From 92b4549c9a5f7353851375e98c6db81fc5e0ea14 Mon Sep 17 00:00:00 2001
From: polyjitter <polyjitter@fastmail.com>
Date: Sat, 21 Mar 2026 16:29:39 -0400
Subject: [PATCH 02/12] Changed "left" to "knocked" in debug info.

---
 src/app/components/knock-room-prompt/KnockRoomPrompt.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/components/knock-room-prompt/KnockRoomPrompt.tsx b/src/app/components/knock-room-prompt/KnockRoomPrompt.tsx
index dd6df494e..f54d4c779 100644
--- a/src/app/components/knock-room-prompt/KnockRoomPrompt.tsx
+++ b/src/app/components/knock-room-prompt/KnockRoomPrompt.tsx
@@ -47,7 +47,7 @@ export function KnockRoomPrompt({ roomId, via, onDone, onCancel }: KnockRoomProp
 
   useEffect(() => {
     if (knockState.status === AsyncStatus.Success) {
-      debugLog.info('ui', 'Successfully left room', { roomId });
+      debugLog.info('ui', 'Successfully knocked on room', { roomId });
       onDone();
     }
   }, [knockState, onDone, roomId]);

From 0fc7899657366193d164874564bb8b694ee3ce0e Mon Sep 17 00:00:00 2001
From: polyjitter <polyjitter@fastmail.com>
Date: Sat, 21 Mar 2026 16:30:00 -0400
Subject: [PATCH 03/12] Fixed typo in debug logger name.

---
 src/app/components/knock-room-prompt/KnockRoomPrompt.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/components/knock-room-prompt/KnockRoomPrompt.tsx b/src/app/components/knock-room-prompt/KnockRoomPrompt.tsx
index f54d4c779..4eacd7eaa 100644
--- a/src/app/components/knock-room-prompt/KnockRoomPrompt.tsx
+++ b/src/app/components/knock-room-prompt/KnockRoomPrompt.tsx
@@ -22,7 +22,7 @@ import { AsyncStatus, useAsyncCallback } from '$hooks/useAsyncCallback';
 import { stopPropagation } from '$utils/keyboard';
 import { createDebugLogger } from '$utils/debugLogger';
 
-const debugLog = createDebugLogger('KockRoomPrompt');
+const debugLog = createDebugLogger('KnockRoomPrompt');
 
 type KnockRoomProps = {
   roomId: string;

From 3cf07991f4bdf85e43b4da0c0ad2aab997aa2775 Mon Sep 17 00:00:00 2001
From: polyjitter <polyjitter@fastmail.com>
Date: Sat, 21 Mar 2026 16:59:20 -0400
Subject: [PATCH 04/12] Convert to uncontrolled text input

---
 .../knock-room-prompt/KnockRoomPrompt.tsx     | 58 ++++++++++++-------
 1 file changed, 36 insertions(+), 22 deletions(-)

diff --git a/src/app/components/knock-room-prompt/KnockRoomPrompt.tsx b/src/app/components/knock-room-prompt/KnockRoomPrompt.tsx
index 4eacd7eaa..1de35f74d 100644
--- a/src/app/components/knock-room-prompt/KnockRoomPrompt.tsx
+++ b/src/app/components/knock-room-prompt/KnockRoomPrompt.tsx
@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useState } from 'react';
+import { useCallback, useEffect, FormEventHandler } from 'react';
 import FocusTrap from 'focus-trap-react';
 import {
   Dialog,
@@ -12,6 +12,7 @@ import {
   IconButton,
   Icon,
   Icons,
+  Input,
   color,
   Button,
   Spinner,
@@ -32,17 +33,23 @@ type KnockRoomProps = {
 };
 export function KnockRoomPrompt({ roomId, via, onDone, onCancel }: KnockRoomProps) {
   const mx = useMatrixClient();
-  const [reason, setReason] = useState('');
 
-  const [knockState, knockRoom] = useAsyncCallback<undefined, MatrixError, []>(
-    useCallback(async () => {
-      debugLog.info('ui', 'Knock room button clicked', { roomId });
-      mx.knockRoom(roomId, { viaServers: via || undefined, reason: reason.trim() || undefined });
-    }, [mx, roomId, reason, via])
+  const [knockState, knockRoom] = useAsyncCallback<undefined, MatrixError, [string?]>(
+    useCallback(
+      async (reason?: string) => {
+        debugLog.info('ui', 'Knock room button clicked', { roomId });
+        mx.knockRoom(roomId, { viaServers: via || undefined, reason });
+      },
+      [mx, roomId, via]
+    )
   );
 
-  const handleKnock = () => {
-    knockRoom();
+  const handleKnock: FormEventHandler<HTMLFormElement> = (evt) => {
+    evt.preventDefault();
+    const target = evt.target as HTMLFormElement;
+    const reasonInput = (target?.reasonInput as HTMLInputElement) || undefined;
+    const reason = reasonInput?.value.trim() || undefined;
+    knockRoom(reason);
   };
 
   useEffect(() => {
@@ -79,28 +86,35 @@ export function KnockRoomPrompt({ roomId, via, onDone, onCancel }: KnockRoomProp
                 <Icon src={Icons.Cross} />
               </IconButton>
             </Header>
-            <Box style={{ padding: config.space.S400 }} direction="Column" gap="400">
+            <Box
+              as="form"
+              onSubmit={handleKnock}
+              style={{ padding: config.space.S400 }}
+              direction="Column"
+              gap="400"
+            >
               <Box direction="Column" gap="200">
                 <Text priority="400">
                   Request to join this room. You can optionally leave a reason for the moderators.
                 </Text>
-                <textarea
-                  value={reason}
-                  onChange={(e) => setReason(e.target.value)}
-                  placeholder="Reason"
-                  rows={3}
-                  style={{ resize: 'vertical', width: '100%' }}
-                />
-                {knockState.status === AsyncStatus.Error && (
-                  <Text style={{ color: color.Critical.Main }} size="T300">
-                    Failed to knock! {knockState.error.message}
+                <Box direction="Column" gap="100">
+                  <Text size="L400">
+                    Reason{' '}
+                    <Text as="span" size="T200">
+                      (Optional)
+                    </Text>
                   </Text>
-                )}
+                  <Input name="reasonInput" variant="Background" />
+                  {knockState.status === AsyncStatus.Error && (
+                    <Text style={{ color: color.Critical.Main }} size="T300">
+                      Failed to knock! {knockState.error.message}
+                    </Text>
+                  )}
+                </Box>
               </Box>
               <Button
                 type="submit"
                 variant="Primary"
-                onClick={handleKnock}
                 before={
                   knockState.status === AsyncStatus.Loading ? (
                     <Spinner fill="Solid" variant="Primary" size="200" />

From c76383fc658f2fdaaf20a3e048005054a8f44f86 Mon Sep 17 00:00:00 2001
From: polyjitter <polyjitter@fastmail.com>
Date: Sat, 21 Mar 2026 18:43:34 -0400
Subject: [PATCH 05/12] Added KnockRoomPrompt, added integration to space join,
 started work on RoomCard integration

---
 .../knock-room-prompt/KnockRoomPrompt.tsx     |  5 +-
 src/app/components/room-card/RoomCard.tsx     | 52 +++++++----
 .../JoinBeforeNavigate.tsx                    |  1 +
 src/app/features/lobby/RoomItem.tsx           | 90 ++++++++++---------
 src/app/pages/client/explore/Featured.tsx     |  2 +
 src/app/pages/client/explore/Server.tsx       |  1 +
 6 files changed, 92 insertions(+), 59 deletions(-)

diff --git a/src/app/components/knock-room-prompt/KnockRoomPrompt.tsx b/src/app/components/knock-room-prompt/KnockRoomPrompt.tsx
index 1de35f74d..a7948e9ab 100644
--- a/src/app/components/knock-room-prompt/KnockRoomPrompt.tsx
+++ b/src/app/components/knock-room-prompt/KnockRoomPrompt.tsx
@@ -18,6 +18,7 @@ import {
   Spinner,
 } from 'folds';
 import { MatrixError } from '$types/matrix-sdk';
+
 import { useMatrixClient } from '$hooks/useMatrixClient';
 import { AsyncStatus, useAsyncCallback } from '$hooks/useAsyncCallback';
 import { stopPropagation } from '$utils/keyboard';
@@ -27,7 +28,7 @@ const debugLog = createDebugLogger('KnockRoomPrompt');
 
 type KnockRoomProps = {
   roomId: string;
-  via?: string;
+  via?: string | string[];
   onDone: () => void;
   onCancel: () => void;
 };
@@ -80,7 +81,7 @@ export function KnockRoomPrompt({ roomId, via, onDone, onCancel }: KnockRoomProp
               size="500"
             >
               <Box grow="Yes">
-                <Text size="H4">Knock on Room</Text>
+                <Text size="H4">Knock On Room</Text>
               </Box>
               <IconButton size="300" onClick={onCancel} radii="300">
                 <Icon src={Icons.Cross} />
diff --git a/src/app/components/room-card/RoomCard.tsx b/src/app/components/room-card/RoomCard.tsx
index afd66d3c8..0d1e580b1 100644
--- a/src/app/components/room-card/RoomCard.tsx
+++ b/src/app/components/room-card/RoomCard.tsx
@@ -1,5 +1,5 @@
 import { ReactNode, useCallback, useRef, useState } from 'react';
-import { MatrixError, Room } from '$types/matrix-sdk';
+import { JoinRule, MatrixError, Room } from '$types/matrix-sdk';
 import {
   Avatar,
   Badge,
@@ -31,6 +31,7 @@ import { useElementSizeObserver } from '$hooks/useElementSizeObserver';
 import { getRoomAvatarUrl, getStateEvent } from '$utils/room';
 import { useStateEventCallback } from '$hooks/useStateEventCallback';
 import { useMediaAuthentication } from '$hooks/useMediaAuthentication';
+import { KnockRoomPrompt } from '$components/knock-room-prompt';
 import { RoomAvatar } from '$components/room-avatar';
 import * as css from './style.css';
 
@@ -143,6 +144,7 @@ type RoomCardProps = {
   topic?: string;
   memberCount?: number;
   roomType?: string;
+  joinRule?: JoinRule;
   viaServers?: string[];
   onView?: (roomId: string) => void;
   renderTopicViewer: (name: string, topic: string, requestClose: () => void) => ReactNode;
@@ -158,6 +160,7 @@ export const RoomCard = as<'div', RoomCardProps>(
       topic,
       memberCount,
       roomType,
+      joinRule,
       viaServers,
       onView,
       renderTopicViewer,
@@ -172,7 +175,7 @@ export const RoomCard = as<'div', RoomCardProps>(
     const [topicEvent, setTopicEvent] = useState(() =>
       joinedRoom ? getStateEvent(joinedRoom, StateEvent.RoomTopic) : undefined
     );
-
+    const [knocking, setKnocking] = useState(false);
     const fallbackName = getMxIdLocalPart(roomIdOrAlias) ?? roomIdOrAlias;
     const fallbackTopic = roomIdOrAlias;
 
@@ -271,19 +274,38 @@ export const RoomCard = as<'div', RoomCardProps>(
             </Text>
           </Button>
         )}
-        {typeof joinedRoomId !== 'string' && joinState.status !== AsyncStatus.Error && (
-          <Button
-            onClick={join}
-            variant="Secondary"
-            size="300"
-            disabled={joining}
-            before={joining && <Spinner size="50" variant="Secondary" fill="Soft" />}
-          >
-            <Text size="B300" truncate>
-              {joining ? 'Joining' : 'Join'}
-            </Text>
-          </Button>
-        )}
+        {typeof joinedRoomId !== 'string' &&
+          joinState.status !== AsyncStatus.Error &&
+          (joinRule === JoinRule.Knock ? (
+            <>
+              <Button onClick={() => setKnocking(true)} variant="Secondary" size="300">
+                <Text size="B300" truncate>
+                  {knocking ? 'Knock' : 'Knocked'}
+                </Text>
+              </Button>
+
+              {knocking && (
+                <KnockRoomPrompt
+                  roomId={roomIdOrAlias}
+                  via={viaServers}
+                  onDone={() => setKnocking(false)}
+                  onCancel={() => setKnocking(false)}
+                />
+              )}
+            </>
+          ) : (
+            <Button
+              onClick={join}
+              variant="Secondary"
+              size="300"
+              disabled={joining}
+              before={joining && <Spinner size="50" variant="Secondary" fill="Soft" />}
+            >
+              <Text size="B300" truncate>
+                {joining ? 'Joining' : 'Join'}
+              </Text>
+            </Button>
+          ))}
         {typeof joinedRoomId !== 'string' && joinState.status === AsyncStatus.Error && (
           <Box gap="200">
             <Button
diff --git a/src/app/features/join-before-navigate/JoinBeforeNavigate.tsx b/src/app/features/join-before-navigate/JoinBeforeNavigate.tsx
index c11ea99fe..17cf86ec3 100644
--- a/src/app/features/join-before-navigate/JoinBeforeNavigate.tsx
+++ b/src/app/features/join-before-navigate/JoinBeforeNavigate.tsx
@@ -65,6 +65,7 @@ export function JoinBeforeNavigate({
                   topic={summary?.topic}
                   memberCount={summary?.num_joined_members}
                   roomType={summary?.room_type}
+                  joinRule={summary?.join_rule}
                   viaServers={viaServers}
                   renderTopicViewer={(name, topic, requestClose) => (
                     <RoomTopicViewer name={name} topic={topic} requestClose={requestClose} />
diff --git a/src/app/features/lobby/RoomItem.tsx b/src/app/features/lobby/RoomItem.tsx
index 5318df306..33d894940 100644
--- a/src/app/features/lobby/RoomItem.tsx
+++ b/src/app/features/lobby/RoomItem.tsx
@@ -25,6 +25,7 @@ import { SequenceCard } from '$components/sequence-card';
 import { useMatrixClient } from '$hooks/useMatrixClient';
 import { HierarchyItem } from '$hooks/useSpaceHierarchy';
 import { millify } from '$plugins/millify';
+import { KnockRoomPrompt } from '$components/knock-room-prompt';
 import { LocalRoomSummaryLoader } from '$components/RoomSummaryLoader';
 import { UseStateProvider } from '$components/UseStateProvider';
 import { RoomTopicViewer } from '$components/room-topic-viewer';
@@ -97,50 +98,45 @@ function RoomJoinButton({ roomId, via }: RoomJoinButtonProps) {
 
 function RoomKnockButton({ roomId, via }: RoomJoinButtonProps) {
   return (
-    <Box shrink="No" gap="200" alignItems="Center">
-      {/* {joinState.status === AsyncStatus.Error && (
-        <TooltipProvider
-          tooltip={
-            <Tooltip variant="Critical" style={{ maxWidth: toRem(200) }}>
-              <Box direction="Column" gap="100">
-                <Text style={{ wordBreak: 'break-word' }} size="T400">
-                  {joinState.error.data?.error || joinState.error.message}
-                </Text>
-                <Text size="T200">{joinState.error.name}</Text>
-              </Box>
-            </Tooltip>
-          }
-        >
-          {(triggerRef) => (
-            <Icon
-              ref={triggerRef}
-              style={{ color: color.Critical.Main, cursor: 'pointer' }}
-              src={Icons.Warning}
-              size="400"
-              filled
-              tabIndex={0}
-              aria-label={joinState.error.data?.error || joinState.error.message}
+    <UseStateProvider initial={false}>
+      {(knocking, setKnocking) => (
+        <Box shrink="No" gap="200" alignItems="Center">
+          <Chip
+            variant="Secondary"
+            fill="Soft"
+            size="400"
+            radii="Pill"
+            before=<Icon src={Icons.MailPlus} size="50" />
+            onClick={() => setKnocking(true)}
+          >
+            <Text size="B300">Knock</Text>
+          </Chip>
+          {knocking && (
+            <KnockRoomPrompt
+              roomId={roomId}
+              via={via}
+              onDone={() => setKnocking(false)}
+              onCancel={() => setKnocking(false)}
             />
           )}
-        </TooltipProvider>
-      )} */}
-      <Chip
-        variant="Secondary"
-        fill="Soft"
-        size="400"
-        radii="Pill"
-        // before={
-        //   canJoin ? <Icon src={Icons.Plus} size="50" /> : <Spinner variant="Secondary" size="100" />
-        // }
-        onClick={join}
-        // disabled={!canJoin}
-      >
-        <Text size="B300">Knock</Text>
-      </Chip>
-    </Box>
+        </Box>
+      )}
+    </UseStateProvider>
   );
 }
 
+type RoomJoinOrKnockButtonProps = {
+  roomId: string;
+  via?: string[];
+  joinRule?: JoinRule;
+};
+function RoomJoinOrKnockButton({ roomId, via, joinRule }: RoomJoinOrKnockButtonProps) {
+  if (joinRule === JoinRule.Knock) {
+    return <RoomKnockButton roomId={roomId} via={via} />;
+  }
+  return <RoomJoinButton roomId={roomId} via={via} />;
+}
+
 function RoomProfileLoading() {
   return (
     <Box grow="Yes" gap="300">
@@ -212,7 +208,7 @@ function RoomProfileError({ roomId, suggested, inaccessibleRoom, via }: RoomProf
           )}
         </Box>
       </Box>
-      {!inaccessibleRoom && <RoomJoinButton roomId={roomId} via={via} />}
+      {!inaccessibleRoom && <RoomJoinOrKnockButton roomId={roomId} via={via} />}
     </Box>
   );
 }
@@ -409,7 +405,11 @@ export const RoomItemCard = as<'div', RoomItemCardProps>(
                         </Chip>
                       </Box>
                     ) : (
-                      <RoomJoinButton roomId={roomId} via={content.via} />
+                      <RoomJoinOrKnockButton
+                        roomId={roomId}
+                        via={content.via}
+                        joinRule={localSummary.joinRule}
+                      />
                     )
                   }
                 />
@@ -453,7 +453,13 @@ export const RoomItemCard = as<'div', RoomItemCardProps>(
                   memberCount={summary.num_joined_members}
                   suggested={content.suggested}
                   joinRule={summary.join_rule}
-                  options={<RoomJoinButton roomId={roomId} via={content.via} />}
+                  options={
+                    <RoomJoinOrKnockButton
+                      roomId={roomId}
+                      via={content.via}
+                      joinRule={summary.join_rule}
+                    />
+                  }
                 />
               )}
             </>
diff --git a/src/app/pages/client/explore/Featured.tsx b/src/app/pages/client/explore/Featured.tsx
index e7095772c..f3dba3425 100644
--- a/src/app/pages/client/explore/Featured.tsx
+++ b/src/app/pages/client/explore/Featured.tsx
@@ -67,6 +67,7 @@ export function FeaturedRooms() {
                                 name={roomSummary?.name}
                                 topic={roomSummary?.topic}
                                 memberCount={roomSummary?.num_joined_members}
+                                joinRule={roomSummary?.join_rule}
                                 onView={navigateSpace}
                                 renderTopicViewer={(name, topic, requestClose) => (
                                   <RoomTopicViewer
@@ -96,6 +97,7 @@ export function FeaturedRooms() {
                                 name={roomSummary?.name}
                                 topic={roomSummary?.topic}
                                 memberCount={roomSummary?.num_joined_members}
+                                joinRule={roomSummary?.join_rule}
                                 onView={navigateRoom}
                                 renderTopicViewer={(name, topic, requestClose) => (
                                   <RoomTopicViewer
diff --git a/src/app/pages/client/explore/Server.tsx b/src/app/pages/client/explore/Server.tsx
index 0ff06dd54..d58aa2a10 100644
--- a/src/app/pages/client/explore/Server.tsx
+++ b/src/app/pages/client/explore/Server.tsx
@@ -599,6 +599,7 @@ export function PublicRooms() {
                               topic={chunkRoom.topic}
                               memberCount={chunkRoom.num_joined_members}
                               roomType={chunkRoom.room_type}
+                              joinRule={chunkRoom.join_rule}
                               onView={
                                 chunkRoom.room_type === RoomType.Space
                                   ? navigateSpace

From 503f7d3d6a0af0fb4c0f2971300008419636e270 Mon Sep 17 00:00:00 2001
From: polyjitter <polyjitter@fastmail.com>
Date: Sat, 21 Mar 2026 18:46:16 -0400
Subject: [PATCH 06/12] Finish RoomCard integration

---
 src/app/components/room-card/RoomCard.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/components/room-card/RoomCard.tsx b/src/app/components/room-card/RoomCard.tsx
index 0d1e580b1..50d1f23ab 100644
--- a/src/app/components/room-card/RoomCard.tsx
+++ b/src/app/components/room-card/RoomCard.tsx
@@ -280,7 +280,7 @@ export const RoomCard = as<'div', RoomCardProps>(
             <>
               <Button onClick={() => setKnocking(true)} variant="Secondary" size="300">
                 <Text size="B300" truncate>
-                  {knocking ? 'Knock' : 'Knocked'}
+                  Knock
                 </Text>
               </Button>
 

From 3141e02bcb0a72cbd7fda1d9233c5362fedd7825 Mon Sep 17 00:00:00 2001
From: polyjitter <polyjitter@fastmail.com>
Date: Sat, 21 Mar 2026 18:52:06 -0400
Subject: [PATCH 07/12] Added changeset

---
 ...directory_an_address_a_room_mention_or_space_hierarchy.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/add_knocking_support_when_attempting_to_join_a_room_from_the_directory_an_address_a_room_mention_or_space_hierarchy.md

diff --git a/.changeset/add_knocking_support_when_attempting_to_join_a_room_from_the_directory_an_address_a_room_mention_or_space_hierarchy.md b/.changeset/add_knocking_support_when_attempting_to_join_a_room_from_the_directory_an_address_a_room_mention_or_space_hierarchy.md
new file mode 100644
index 000000000..a622c95f2
--- /dev/null
+++ b/.changeset/add_knocking_support_when_attempting_to_join_a_room_from_the_directory_an_address_a_room_mention_or_space_hierarchy.md
@@ -0,0 +1,5 @@
+---
+default: minor
+---
+
+# Add knocking support when attempting to join a room from the directory, an address, a room mention, or space hierarchy.

From 33dabd67bf5adb58334a45bc3f0c122b77396345 Mon Sep 17 00:00:00 2001
From: polyjitter <polyjitter@fastmail.com>
Date: Sun, 22 Mar 2026 00:11:22 -0400
Subject: [PATCH 08/12] Added knock command

---
 src/app/hooks/useCommands.ts | 15 +++++++++++++++
 1 file changed, 15 insertions(+)

diff --git a/src/app/hooks/useCommands.ts b/src/app/hooks/useCommands.ts
index 2a0d45666..e5c413f81 100644
--- a/src/app/hooks/useCommands.ts
+++ b/src/app/hooks/useCommands.ts
@@ -233,6 +233,7 @@ export enum Command {
   Delete = 'delete',
   Acl = 'acl',
   // Sable commands
+  Knock = 'knock',
   Color = 'color',
   SColor = 'scolor',
   Font = 'font',
@@ -763,6 +764,20 @@ export const useCommands = (mx: MatrixClient, room: Room): CommandRecord => {
         },
       },
       // Sable commands
+      [Command.Knock]: {
+        name: Command.Knock,
+        description:
+          'Knock on (request to join) room with address. Example: /knock address1 address2',
+        exe: async (payload) => {
+          const rawIds = splitWithSpace(payload);
+          const roomIdOrAliases = rawIds.filter(
+            (idOrAlias) => isRoomId(idOrAlias) || isRoomAlias(idOrAlias)
+          );
+          roomIdOrAliases.forEach(async (idOrAlias) => {
+            await mx.knockRoom(idOrAlias);
+          });
+        },
+      },
       [Command.Color]: {
         name: Command.Color,
         description: 'Set a room-specific color. Example: /color #ff00ff | /color reset',

From dbda6186ac01dcb651e4f3be5f8367d1e4af018b Mon Sep 17 00:00:00 2001
From: polyjitter <polyjitter@fastmail.com>
Date: Sun, 22 Mar 2026 00:13:15 -0400
Subject: [PATCH 09/12] Update changeset

---
 ...he_directory_an_address_a_room_mention_or_space_hierarchy.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.changeset/add_knocking_support_when_attempting_to_join_a_room_from_the_directory_an_address_a_room_mention_or_space_hierarchy.md b/.changeset/add_knocking_support_when_attempting_to_join_a_room_from_the_directory_an_address_a_room_mention_or_space_hierarchy.md
index a622c95f2..af7dbe5de 100644
--- a/.changeset/add_knocking_support_when_attempting_to_join_a_room_from_the_directory_an_address_a_room_mention_or_space_hierarchy.md
+++ b/.changeset/add_knocking_support_when_attempting_to_join_a_room_from_the_directory_an_address_a_room_mention_or_space_hierarchy.md
@@ -2,4 +2,4 @@
 default: minor
 ---
 
-# Add knocking support when attempting to join a room from the directory, an address, a room mention, or space hierarchy.
+# Add knocking support when attempting to join a room from the directory, an address, a room mention, or space hierarchy, as well as text command support for knocking.

From 6dd0e69259d8e4650cb66c40c7281c5f97db4582 Mon Sep 17 00:00:00 2001
From: polyjitter <polyjitter@fastmail.com>
Date: Sun, 22 Mar 2026 00:34:47 -0400
Subject: [PATCH 10/12] add missing brackets in JSX for RoomKnockButton.

---
 src/app/features/lobby/RoomItem.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/features/lobby/RoomItem.tsx b/src/app/features/lobby/RoomItem.tsx
index 33d894940..34954e460 100644
--- a/src/app/features/lobby/RoomItem.tsx
+++ b/src/app/features/lobby/RoomItem.tsx
@@ -106,7 +106,7 @@ function RoomKnockButton({ roomId, via }: RoomJoinButtonProps) {
             fill="Soft"
             size="400"
             radii="Pill"
-            before=<Icon src={Icons.MailPlus} size="50" />
+            before={<Icon src={Icons.MailPlus} size="50" />}
             onClick={() => setKnocking(true)}
           >
             <Text size="B300">Knock</Text>

From 65d0d89ad972eb439a880a36c49e495def7c6645 Mon Sep 17 00:00:00 2001
From: polyjitter <polyjitter@fastmail.com>
Date: Sun, 22 Mar 2026 00:46:31 -0400
Subject: [PATCH 11/12] Improve rendering of knock event messages in rooms.

---
 src/app/hooks/useMemberEventParser.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/app/hooks/useMemberEventParser.tsx b/src/app/hooks/useMemberEventParser.tsx
index 05d5cc40f..b06c7c5ec 100644
--- a/src/app/hooks/useMemberEventParser.tsx
+++ b/src/app/hooks/useMemberEventParser.tsx
@@ -63,12 +63,12 @@ export const useMemberEventParser = (): MemberEventParser => {
 
       if (content.membership === Membership.Knock) {
         return {
-          icon: Icons.ArrowGoRightPlus,
+          icon: Icons.Mail,
           body: (
             <>
               <b>{userName}</b>
-              {' request to join room '}
-              {reason}
+              {' requested to join room: '}
+              <i>{reason}</i>
             </>
           ),
         };

From d9162049589df634325f546f8f143ded0ed63d7f Mon Sep 17 00:00:00 2001
From: polyjitter <polyjitter@fastmail.com>
Date: Sun, 22 Mar 2026 00:49:04 -0400
Subject: [PATCH 12/12] Update changeset to reflect message rendering update.

---
 ...he_directory_an_address_a_room_mention_or_space_hierarchy.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.changeset/add_knocking_support_when_attempting_to_join_a_room_from_the_directory_an_address_a_room_mention_or_space_hierarchy.md b/.changeset/add_knocking_support_when_attempting_to_join_a_room_from_the_directory_an_address_a_room_mention_or_space_hierarchy.md
index af7dbe5de..d905f4f82 100644
--- a/.changeset/add_knocking_support_when_attempting_to_join_a_room_from_the_directory_an_address_a_room_mention_or_space_hierarchy.md
+++ b/.changeset/add_knocking_support_when_attempting_to_join_a_room_from_the_directory_an_address_a_room_mention_or_space_hierarchy.md
@@ -2,4 +2,4 @@
 default: minor
 ---
 
-# Add knocking support when attempting to join a room from the directory, an address, a room mention, or space hierarchy, as well as text command support for knocking.
+# Add knocking support when attempting to join a room from the directory, an address, a room mention, or space hierarchy, as well as text command support for knocking. Also improves rendering for knock notifications in rooms.