From 66bbae6eba076130736d4caefc2985859801086c Mon Sep 17 00:00:00 2001
From: hensm <m@matt.tf>
Date: Mon, 4 Jul 2022 23:09:58 +0100
Subject: [PATCH] Integrate known apps into options page whitelist

---
 ext/src/_locales/en/messages.json   |  4 +++
 ext/src/ui/options/Whitelist.svelte | 44 +++++++++++++++++++++++++++--
 ext/src/ui/options/styles/index.css | 17 +++++++++--
 ext/src/ui/photon-widgets.css       |  3 +-
 4 files changed, 60 insertions(+), 8 deletions(-)

diff --git a/ext/src/_locales/en/messages.json b/ext/src/_locales/en/messages.json
index b892c95..b0b8d6d 100755
--- a/ext/src/_locales/en/messages.json
+++ b/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",
diff --git a/ext/src/ui/options/Whitelist.svelte b/ext/src/ui/options/Whitelist.svelte
index 511688b..114092e 100644
--- a/ext/src/ui/options/Whitelist.svelte
+++ b/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")}
diff --git a/ext/src/ui/options/styles/index.css b/ext/src/ui/options/styles/index.css
index 4f62b10..abe033d 100644
--- a/ext/src/ui/options/styles/index.css
+++ b/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 {
diff --git a/ext/src/ui/photon-widgets.css b/ext/src/ui/photon-widgets.css
index 03466e5..4e48c63 100644
--- a/ext/src/ui/photon-widgets.css
+++ b/ext/src/ui/photon-widgets.css
@@ -52,8 +52,7 @@
 button,
 input,
 textarea,
-select,
-.select-wrapper {
+select {
     border: 1px solid transparent;
     border-radius: 2px;
 }