Developer setting to show non-member tiles

This is based on top of https://github.com/element-hq/element-call/pull/2701

src/settings/SettingsModal.tsx

@@ -26,6 +26,7 @@ import {
   useSetting,
   developerSettingsTab as developerSettingsTabSetting,
   duplicateTiles as duplicateTilesSetting,
+  showNonMemberTiles as showNonMemberTilesSetting,
   useOptInAnalytics,
   soundEffectVolumeSetting,
 } from "./settings";
@@ -70,6 +71,10 @@ export const SettingsModal: FC<Props> = ({
   );
   const [duplicateTiles, setDuplicateTiles] = useSetting(duplicateTilesSetting);
 
+  const [showNonMemberTiles, setShowNonMemberTiles] = useSetting(
+    showNonMemberTilesSetting,
+  );
+
   const optInDescription = (
     <Text size="sm">
       <Trans i18nKey="settings.opt_in_description">
@@ -240,6 +245,20 @@ export const SettingsModal: FC<Props> = ({
             )}
           />
         </FieldRow>
+        <FieldRow>
+          <InputField
+            id="showNonMemberTiles"
+            type="checkbox"
+            label={t("developer_mode.show_non_member_tiles")}
+            checked={!!showNonMemberTiles}
+            onChange={useCallback(
+              (event: ChangeEvent<HTMLInputElement>): void => {
+                setShowNonMemberTiles(event.target.checked);
+              },
+              [setShowNonMemberTiles],
+            )}
+          />
+        </FieldRow>
       </>
     ),
   };