Display message in selector instead of disabling browser action

ext/src/ui/popup/index.tsx

@@ -152,13 +152,17 @@ class PopupApp extends Component<{}, PopupAppState> {
                     </div>
                 </div>
                 <ul className="receivers">
-                    { this.state.receivers && this.state.receivers.map(
-                            (receiver, i) => (
-                        <ReceiverEntry receiver={ receiver }
-                                       onCast={ this.onCast }
-                                       isLoading={ this.state.isLoading }
-                                       canCast={ canCast }
-                                       key={ i }/> ))}
+                    { this.state.receivers && this.state.receivers.length
+                        ? this.state.receivers.map((receiver, i) => (
+                            <ReceiverEntry receiver={ receiver }
+                                           onCast={ this.onCast }
+                                           isLoading={ this.state.isLoading }
+                                           canCast={ canCast }
+                                           key={ i } /> ))
+                        : (
+                            <div className="receivers__not-found">
+                                { _("popupNoReceiversFound") }
+                            </div> )}
                 </ul>
             </div>
         );

ext/src/ui/popup/styles/index.css

@@ -33,6 +33,14 @@ body {
     padding: initial;
 }
 
+.receivers__not-found {
+    align-items: center;
+    display: flex;
+    height: 50px;
+    justify-content: center;
+    padding: 0.75em 1em;
+}
+
 .receiver {
     column-gap: 0.75em;
     display: grid;