Integrate known apps into options page whitelist

ext/src/_locales/en/messages.json

@@ -354,6 +354,10 @@
         "message": "Match pattern already exists!",
         "description": "Error displayed by input indicating a duplicate match pattern."
     },
+    "optionsSiteWhitelistKnownAppsCustomApp": {
+        "message": "Custom",
+        "description": "Default <option> for knownApps <select>."
+    },
 
     "optionsMirroringCategoryName": {
         "message": "Screen/tab casting",

ext/src/ui/options/Whitelist.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
     import { tick } from "svelte";
 
+    import knownApps, { KnownApp } from "../../cast/knownApps";
     import { WhitelistItemData } from "../../background/whitelist";
     import { REMOTE_MATCH_PATTERN_REGEX } from "../../lib/matchPattern";
 
@@ -15,6 +16,9 @@
     let editingInput: HTMLInputElement;
     let editingValue: string;
 
+    const knownAppsValues = Object.values(knownApps);
+    let knownAppToAdd: Nullable<KnownApp> = null;
+
     async function beginEditing(index: number) {
         if (isEditing) return;
 
@@ -80,8 +84,14 @@
 
     function addItem() {
         if (isEditing) return;
-        items = [...items, { pattern: "" }];
+
-        beginEditing(items.length - 1);
+        if (knownAppToAdd?.matches) {
+            items = [...items, { pattern: knownAppToAdd.matches }];
+            knownAppToAdd = null;
+        } else {
+            items = [...items, { pattern: "" }];
+            beginEditing(items.length - 1);
+        }
     }
     function removeItem(index: number) {
         if (isEditing) {
@@ -118,7 +128,17 @@
                             on:blur={finishEditing}
                         />
                     {:else}
-                        {item.pattern}
+                        {@const knownApp = knownAppsValues.find(
+                            app => app.matches === item.pattern
+                        )}
+                        <div class="whitelist__pattern">
+                            {item.pattern}
+                        </div>
+                        {#if knownApp}
+                            <div class="whitelist__known-app">
+                                &nbsp;({knownApp.name})
+                            </div>
+                        {/if}
                     {/if}
                 </div>
 
@@ -157,6 +177,24 @@
     <hr />
 
     <div class="whitelist__view-actions">
+        <div class="select-wrapper">
+            <select bind:value={knownAppToAdd}>
+                <option value={null}>
+                    {_("optionsSiteWhitelistKnownAppsCustomApp")}
+                </option>
+                {#each knownAppsValues as knownApp}
+                    {@const isExisting = !!items.find(
+                        item => item.pattern === knownApp.matches
+                    )}
+
+                    {#if knownApp.matches && knownApp.name !== _("popupMediaTypeAppMedia") && !isExisting}
+                        <option value={knownApp}>
+                            {knownApp.name}
+                        </option>
+                    {/if}
+                {/each}
+            </select>
+        </div>
         <button
             class="whitelist__add-button ghost"
             title={_("optionsSiteWhitelistAddItem")}

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

@@ -264,7 +264,8 @@ button.ghost:not(:hover) {
 }
 
 .option--inline {
-    align-items: center;
+    align-items: baseline;
+    column-gap: 4px;
     display: grid;
     grid-column-start: 2;
     grid-template-columns: min-content 1fr;
@@ -325,7 +326,9 @@ button.ghost:not(:hover) {
 }
 
 .whitelist__view-actions {
+    align-items: center;
     display: flex;
+    gap: 5px;
     justify-content: end;
 }
 
@@ -361,12 +364,20 @@ button.ghost:not(:hover) {
 }
 
 .whitelist__title {
+    display: flex;
     flex: 1;
+    min-width: 0;
+    padding: 4px;
+    white-space: nowrap;
+}
+
+.whitelist__known-app {
+    opacity: 0.5;
+}
+.whitelist__pattern {
     font-family: monospace;
     overflow: hidden;
-    padding: 4px;
     text-overflow: ellipsis;
-    white-space: nowrap;
 }
 
 .whitelist__input-pattern {

ext/src/ui/photon-widgets.css

@@ -52,8 +52,7 @@
 button,
 input,
 textarea,
-select,
+select {
-.select-wrapper {
     border: 1px solid transparent;
     border-radius: 2px;
 }