Full censored room card

client/css/room-directory.css

@@ -301,7 +301,7 @@
   border-radius: 8px;
 }
 
-.RoomCardView--blockedBySafeSearch {
+.RoomCardView.blockedBySafeSearch {
   background-color: #d0d9e1;
 }
 
@@ -354,6 +354,14 @@
   text-overflow: ellipsis;
 }
 
+.RoomCardView_blockedBySafeSearchTopic {
+  margin-top: 8px;
+  margin-bottom: 8px;
+
+  line-height: 1.2em;
+  font-style: italic;
+}
+
 .RoomCardView_footer {
   display: flex;
   /**
@@ -402,14 +410,22 @@
   cursor: pointer;
 }
 
+.RoomCardView_viewButton[disabled] {
+  border-color: #2774c299;
+
+  color: #2774c299;
+
+  cursor: auto;
+}
+
 @media (max-width: 750px) {
   .RoomCardView_viewButton {
     padding: 8px 32px;
   }
 }
 
-.RoomCardView_viewButtonWrapperLink:hover > .RoomCardView_viewButton,
-.RoomCardView_viewButtonWrapperLink:focus > .RoomCardView_viewButton {
+.RoomCardView_viewButtonWrapperLink:hover > .RoomCardView_viewButton:not([disabled]),
+.RoomCardView_viewButtonWrapperLink:focus > .RoomCardView_viewButton:not([disabled]) {
   background-color: #2774c2;
   color: #ffffff;
 }

shared/viewmodels/AvatarViewModel.js

@@ -11,7 +11,7 @@ class AvatarViewModel extends ViewModel {
 
     const { homeserverUrlToPullMediaFrom, avatarUrl, avatarTitle, avatarLetterString, entityId } =
       options;
-    assert(homeserverUrlToPullMediaFrom);
+    assert(!avatarUrl || homeserverUrlToPullMediaFrom);
     assert(avatarTitle);
     assert(avatarLetterString);
     assert(entityId);

shared/views/RoomCardView.js

@@ -1,11 +1,17 @@
 'use strict';
 
-const { TemplateView, AvatarView } = require('hydrogen-view-sdk');
+const { TemplateView, AvatarView, text } = require('hydrogen-view-sdk');
 const AvatarViewModel = require('../viewmodels/AvatarViewModel');
 
 const safeSearchBlockedRoomTitle = 'Blocked by Safe Search';
 const safeSearchBlockedRoomDescription =
-  'This room was filtered because safe search is turned on and may contain explicit content. Turn off safe search to see this room.';
+  'This room was blocked because safe search is turned on and may contain explicit content. Turn off safe search to see this room.';
+
+const blockedBySafeSearchAvatarViewModel = new AvatarViewModel({
+  avatarTitle: 'x',
+  avatarLetterString: 'x',
+  entityId: 'x',
+});
 
 class RoomCardView extends TemplateView {
   render(t, vm) {
@@ -35,7 +41,7 @@ class RoomCardView extends TemplateView {
       {
         className: {
           RoomCardView: true,
-          'RoomCardView--blockedBySafeSearch': (vm) => vm.blockedBySafeSearch,
+          blockedBySafeSearch: (vm) => vm.blockedBySafeSearch,
         },
         'data-room-id': vm.roomId,
         'data-testid': 'room-card',
@@ -50,7 +56,15 @@ class RoomCardView extends TemplateView {
             tabindex: -1,
           },
           [
-            t.view(new AvatarView(avatarViewModel, 24)),
+            t.mapView(
+              (vm) => vm.blockedBySafeSearch,
+              (blockedBySafeSearch) => {
+                if (blockedBySafeSearch) {
+                  return new AvatarView(blockedBySafeSearchAvatarViewModel, 24);
+                }
+                return new AvatarView(avatarViewModel, 24);
+              }
+            ),
             t.if(
               (vm) => vm.name,
               (t /*, vm*/) =>
@@ -79,29 +93,58 @@ class RoomCardView extends TemplateView {
             ),
           ]
         ),
-        t.a(
-          {
-            className: 'RoomCardView_alias',
-            href: vm.archiveRoomUrl,
-            // Since this is the same button as the "View" link, just tab to
-            // that instead
-            tabindex: -1,
-          },
-          [aliasOrRoomId]
+        t.if(
+          (vm) => !vm.blockedBySafeSearch,
+          (t /*, vm*/) =>
+            t.a(
+              {
+                className: 'RoomCardView_alias',
+                href: vm.archiveRoomUrl,
+                // Since this is the same button as the "View" link, just tab to
+                // that instead
+                tabindex: -1,
+              },
+              [aliasOrRoomId]
+            )
+        ),
+        t.if(
+          (vm) => vm.blockedBySafeSearch,
+          (t /*, vm*/) =>
+            t.p({ className: 'RoomCardView_blockedBySafeSearchTopic' }, [
+              safeSearchBlockedRoomDescription,
+            ])
+        ),
+        t.if(
+          (vm) => !vm.blockedBySafeSearch,
+          (t /*, vm*/) =>
+            t.p({ className: 'RoomCardView_topic', title: vm.topic || null }, [vm.topic || ''])
         ),
-        t.p({ className: 'RoomCardView_topic', title: vm.topic || null }, [vm.topic || '']),
         t.div({ className: 'RoomCardView_footer' }, [
           t.div({ className: 'RoomCardView_footerInner' }, [
-            t.div({}, [memberDisplay]),
+            t.div({}, [
+              t.if(
+                (vm) => !vm.blockedBySafeSearch,
+                (/*t , vm*/) => text(memberDisplay)
+              ),
+            ]),
             t.a(
               {
                 className: 'RoomCardView_viewButtonWrapperLink',
-                href: vm.archiveRoomUrl,
+                href: (vm) => {
+                  if (vm.blockedBySafeSearch) {
+                    // Omit the href so the link is not clickable when it's blocked by
+                    // safe search
+                    return undefined;
+                  }
+
+                  return vm.archiveRoomUrl;
+                },
                 title: `View the ${displayName} room`,
               },
               t.span(
                 {
                   className: 'RoomCardView_viewButton',
+                  disabled: (vm) => vm.blockedBySafeSearch,
                 },
                 ['View']
               )