Add popup warning banner when the bridge has a problem

ext/src/ui/assets/photon_info.svg

@@ -3,11 +3,14 @@
    - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
 <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
     <style>
+        path {
+            fill: rgba(12, 12, 13, .8);
+        }
         @media (prefers-color-scheme: dark) {
             path {
                 fill: rgba(249, 249, 250, .8);
             }
         }
     </style>
-    <path fill="rgba(12, 12, 13, .8)" d="M8 1a7 7 0 1 0 7 7 7.008 7.008 0 0 0-7-7zm0 13a6 6 0 1 1 6-6 6.007 6.007 0 0 1-6 6zm0-7a1 1 0 0 0-1 1v3a1 1 0 1 0 2 0V8a1 1 0 0 0-1-1zm0-3.188A1.188 1.188 0 1 0 9.188 5 1.188 1.188 0 0 0 8 3.812z"></path>
-</svg>
+    <path d="M8 1a7 7 0 1 0 7 7 7.008 7.008 0 0 0-7-7zm0 13a6 6 0 1 1 6-6 6.007 6.007 0 0 1-6 6zm0-7a1 1 0 0 0-1 1v3a1 1 0 1 0 2 0V8a1 1 0 0 0-1-1zm0-3.188A1.188 1.188 0 1 0 9.188 5 1.188 1.188 0 0 0 8 3.812z"></path>
+</svg>

ext/src/ui/assets/photon_warning.svg

@@ -0,0 +1,16 @@
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+   <style>
+        path {
+            fill: rgba(12, 12, 13, .8);
+        }
+        @media (prefers-color-scheme: dark) {
+            path {
+                fill: rgba(249, 249, 250, .8);
+            }
+        }
+    </style>
+   <path d="M14.742 12.106L9.789 2.2a2 2 0 0 0-3.578 0l-4.953 9.91A2 2 0 0 0 3.047 15h9.905a2 2 0 0 0 1.79-2.894zM7 5a1 1 0 0 1 2 0v4a1 1 0 0 1-2 0zm1 8.25A1.25 1.25 0 1 1 9.25 12 1.25 1.25 0 0 1 8 13.25z"></path>
+</svg>

ext/src/ui/popup/Popup.svelte

@@ -27,6 +27,9 @@
     /** Media types available to select. */
     let availableMediaTypes = ReceiverSelectorMediaType.App;
 
+    /** Whether to show bridge warning banner. */
+    let isBridgeCompatible = true;
+
     /** Devices to display. */
     let devices: ReceiverDevice[] = [];
     /** IDs of sessions connected by this extension. */
@@ -171,6 +174,7 @@
             case "popup:init":
                 appInfo = message.data.appInfo;
                 pageInfo = message.data.pageInfo;
+                isBridgeCompatible = message.data.isBridgeCompatible;
                 break;
 
             case "popup:update": {
@@ -319,18 +323,32 @@
     }
 </script>
 
-<div class="whitelist-banner" hidden={!shouldSuggestWhitelist}>
-    <img src="photon_info.svg" alt="icon, info" />
-    {_("popupWhitelistNotWhitelisted", knownApp?.name)}
-    <button
-        on:click={() => {
-            if (!knownApp || !pageInfo) return;
-            addToWhitelist(knownApp, pageInfo);
-        }}
-    >
-        {_("popupWhitelistAddToWhitelist")}
-    </button>
-</div>
+{#if !isBridgeCompatible}
+    <div class="banner banner--warn">
+        {_("popupBridgeErrorBanner")}
+        <button
+            on:click={() => {
+                browser.runtime.openOptionsPage();
+            }}
+        >
+            {_("popupBridgeErrorBannerOptions")}
+        </button>
+    </div>
+{/if}
+
+{#if shouldSuggestWhitelist}
+    <div class="banner banner--info">
+        {_("popupWhitelistNotWhitelisted", knownApp?.name)}
+        <button
+            on:click={() => {
+                if (!knownApp || !pageInfo) return;
+                addToWhitelist(knownApp, pageInfo);
+            }}
+        >
+            {_("popupWhitelistAddToWhitelist")}
+        </button>
+    </div>
+{/if}
 
 {#if availableMediaTypes !== ReceiverSelectorMediaType.None}
     <div class="media-type-select">

ext/src/ui/popup/Receiver.svelte

@@ -91,13 +91,13 @@
         isExpanded = false;
     } else if (
         // If app is running
-        application?.appId &&
+        application &&
         // And user hasn't manually changed the expanded state
         !isExpandedUserModified &&
         // And auto-expansion is enabled
         opts?.receiverSelectorExpandActive
     ) {
-        isExpanded = connectedSessionIds.includes(application?.transportId);
+        isExpanded = connectedSessionIds.includes(application.transportId);
     }
 
     /** Whether a session request is in progress for this receiver.. */

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

@@ -1,3 +1,12 @@
+#root {
+    height: 100%;
+}
+
+#root {
+    display: flex;
+    flex-direction: column;
+}
+
 body {
     --font-size: 13px;
     background: var(--box-background);
@@ -12,7 +21,7 @@ body {
     display: none !important;
 }
 
-.whitelist-banner {
+.banner {
     align-items: center;
     background-color: var(--blue-50-a30);
     border-bottom: 1px solid rgba(0, 0, 0, 0.25);
@@ -21,18 +30,34 @@ body {
     gap: 0.5em;
     padding: 0.5em 0.75em;
 }
-.whitelist-banner > button {
+.banner > button {
     --button-background: hsla(0, 0%, 50%, 0.3);
     --button-background-hover: hsla(0, 0%, 30%, 0.3);
     --button-background-active: hsla(0, 0%, 10%, 0.3);
     margin-left: auto;
 }
 
+.banner--warn {
+    background-color: var(--red-60-a30);
+}
+
+.banner::before {
+    content: "";
+    height: 16px;
+    width: 16px;
+}
+.banner--info::before {
+    background-image: url("../../assets/photon_info.svg");
+}
+.banner--warn::before {
+    background-image: url("../../assets/photon_warning.svg");
+}
+
 @media (prefers-color-scheme: dark) {
-    .whitelist-banner {
+    .banner {
         border-bottom: 1px solid rgba(255, 255, 255, 0.25);
     }
-    .whitelist-banner > button {
+    .banner > button {
         --button-background: hsla(0, 0%, 50%, 0.3);
         --button-background-hover: hsla(0, 0%, 70%, 0.3);
         --button-background-active: hsla(0, 0%, 90%, 0.3);