chore(demo): show channel to read only if cannot join

Author: MartinCupela

examples/vite/src/ChatLayout/Panels.tsx

@@ -27,7 +27,11 @@ import { useAppSettingsSelector } from '../AppSettings/state';
 import { DESKTOP_LAYOUT_BREAKPOINT } from './constants.ts';
 import { SidebarResizeHandle, ThreadResizeHandle } from './Resize.tsx';
 import { ReturnToSkipNavigation } from '../AccessibilityNavigation/ReturnToSkipNavigation.tsx';
-import { PublicChannelOverlay } from '../PublicChannelOverlay/PublicChannelOverlay.tsx';
+import {
+  PublicChannelComposerBanner,
+  PublicChannelOverlay,
+  usePublicChannelState,
+} from '../PublicChannelOverlay/PublicChannelOverlay.tsx';
 import { useSidebar } from './SidebarContext.tsx';
 import { ThreadStateSync } from './Sync.tsx';
 
@@ -62,6 +66,23 @@ const ChannelThreadPanel = () => {
   );
 };
 
+const MessageComposerOrBanner = () => {
+  const { canJoin, isMember } = usePublicChannelState();
+
+  if (!isMember && !canJoin) return <PublicChannelComposerBanner />;
+
+  return (
+    <MessageComposer
+      additionalTextareaProps={{
+        id: CHANNEL_MESSAGE_COMPOSER_TEXTAREA_TARGET_ID,
+      }}
+      audioRecordingEnabled
+      maxRows={10}
+      asyncMessagesMultiSendEnabled
+    />
+  );
+};
+
 const ResponsiveChannelPanels = () => {
   const { thread } = useChannelStateContext('ResponsiveChannelPanels');
   const isThreadOpen = !!thread;
@@ -84,14 +105,7 @@ const ResponsiveChannelPanels = () => {
             )}
             <ReturnToSkipNavigation />
             <AIStateIndicator />
-            <MessageComposer
-              additionalTextareaProps={{
-                id: CHANNEL_MESSAGE_COMPOSER_TEXTAREA_TARGET_ID,
-              }}
-              audioRecordingEnabled
-              maxRows={10}
-              asyncMessagesMultiSendEnabled
-            />
+            <MessageComposerOrBanner />
             <PublicChannelOverlay />
           </div>
         </Window>

examples/vite/src/PublicChannelOverlay/PublicChannelOverlay.scss

@@ -1,7 +1,7 @@
 .app-public-channel-overlay {
   position: absolute;
   inset: 0;
-  z-index: 1;
+  z-index: 3;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -85,3 +85,20 @@
     width: 20px;
   }
 }
+
+.app-public-channel-composer-banner {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  min-height: 56px;
+  padding: 16px;
+  border-top: 1px solid var(--str-chat__border-color);
+}
+
+.app-public-channel-composer-banner__text {
+  margin: 0;
+  font: var(--str-chat__font-caption-default);
+  color: var(--str-chat__text-secondary);
+  text-align: center;
+}

examples/vite/src/PublicChannelOverlay/PublicChannelOverlay.tsx

@@ -12,17 +12,23 @@ import {
 
 import './PublicChannelOverlay.scss';
 
-export const PublicChannelOverlay = () => {
+export const usePublicChannelState = () => {
   const { client } = useChatContext();
   const { channel } = useChannelStateContext();
   const members = useChannelMembersState(channel);
   const membership = members[client.userID!] as ChannelMemberResponse | undefined;
-  const { addNotification } = useNotificationApi();
-  const [joining, setJoining] = useState(false);
 
   const isMember = typeof membership?.channel_role === 'string';
   const canJoin = channel.data?.own_capabilities?.includes('join-channel');
 
+  return { canJoin, channel, client, isMember };
+};
+
+export const PublicChannelOverlay = () => {
+  const { canJoin, channel, client, isMember } = usePublicChannelState();
+  const { addNotification } = useNotificationApi();
+  const [joining, setJoining] = useState(false);
+
   const handleJoin = useCallback(async () => {
     setJoining(true);
     try {
@@ -72,3 +78,17 @@ export const PublicChannelOverlay = () => {
     </div>
   );
 };
+
+export const PublicChannelComposerBanner = () => {
+  const { canJoin, isMember } = usePublicChannelState();
+
+  if (isMember || canJoin) return null;
+
+  return (
+    <div className='app-public-channel-composer-banner'>
+      <p className='app-public-channel-composer-banner__text'>
+        You can only view this conversation
+      </p>
+    </div>
+  );
+};

examples/vite/src/index.scss

@@ -225,7 +225,12 @@ body {
   }
 
   .str-chat__tooltip {
-    z-index: 10;
+    z-index: 2;
+  }
+
+  .str-chat__notification-list,
+  .str-chat__dialog-overlay {
+    z-index: 4;
   }
 
   @media (max-width: 767px) {