Hide advanced options by default and add toggle checkbox

ext/src/_locales/en/messages.json

@@ -415,5 +415,9 @@
     "optionsSaved": {
         "message": "Saved!",
         "description": "Status text displayed by save button once options have been successfully saved."
+    },
+    "optionsShowAdvancedOptions": {
+        "message": "Show advanced options",
+        "description": "Show advanced options checkbox label."
     }
 }

ext/src/defaultOptions.ts

@@ -19,6 +19,7 @@ export interface Options {
     siteWhitelistEnabled: boolean;
     siteWhitelist: WhitelistItemData[];
     siteWhitelistCustomUserAgent: string;
+    showAdvancedOptions: boolean;
 
     [key: string]: Options[keyof Options];
 }
@@ -39,5 +40,6 @@ export default {
     receiverSelectorWaitForConnection: true,
     siteWhitelistEnabled: true,
     siteWhitelist: [{ pattern: "https://www.netflix.com/*" }],
-    siteWhitelistCustomUserAgent: ""
+    siteWhitelistCustomUserAgent: "",
+    showAdvancedOptions: false
 } as Options;

ext/src/ui/options/Options.svelte

@@ -68,13 +68,19 @@
     }
 
     function resetForm() {
-        opts = JSON.parse(JSON.stringify(defaultOptions));
+        if (!opts) return;
+
+        opts = {
+            ...JSON.parse(JSON.stringify(defaultOptions)),
+            // Retain advanced options shown state
+            showAdvancedOptions: opts.showAdvancedOptions
+        };
     }
 </script>
 
 {#if opts}
     <form
-        id="form"
+        class="form"
         bind:this={formElement}
         on:input={onFormInput}
         on:submit|preventDefault={onFormSubmit}
@@ -102,6 +108,7 @@
                 </label>
             </div>
 
+            {#if opts.showAdvancedOptions}
                 <div class="option option--inline">
                     <div class="option__control">
                         <input
@@ -117,6 +124,7 @@
                         {_("optionsMediaSyncElementDescription")}
                     </div>
                 </div>
+            {/if}
 
             <div class="option option--inline">
                 <div class="option__control">
@@ -166,6 +174,7 @@
             </div>
         </fieldset>
 
+        {#if opts.showAdvancedOptions}
             <fieldset class="category">
                 <legend class="category__name">
                     <h2>{_("optionsMirroringCategoryName")}</h2>
@@ -186,7 +195,6 @@
                         {_("optionsMirroringEnabled")}
                     </label>
                 </div>
-
                 <div class="option">
                     <label class="option__label" for="mirroringAppId">
                         {_("optionsMirroringAppId")}
@@ -204,7 +212,9 @@
                     </div>
                 </div>
             </fieldset>
+        {/if}
 
+        {#if opts.showAdvancedOptions}
             <fieldset class="category">
                 <legend class="category__name">
                     <h2>{_("optionsReceiverSelectorCategoryName")}</h2>
@@ -228,7 +238,9 @@
                         {_("optionsReceiverSelectorWaitForConnection")}
                     </label>
                     <div class="option__description">
-                    {_("optionsReceiverSelectorWaitForConnectionDescription")}
+                        {_(
+                            "optionsReceiverSelectorWaitForConnectionDescription"
+                        )}
                     </div>
                 </div>
 
@@ -248,6 +260,7 @@
                     </label>
                 </div>
             </fieldset>
+        {/if}
 
         <fieldset class="category">
             <legend class="category__name">
@@ -257,6 +270,7 @@
                 {_("optionsSiteWhitelistCategoryDescription")}
             </p>
 
+            {#if opts.showAdvancedOptions}
                 <div class="option option--inline">
                     <div class="option__control">
                         <input
@@ -277,7 +291,10 @@
                 </div>
 
                 <div class="option">
-                <label class="option__label" for="siteWhitelistCustomUserAgent">
+                    <label
+                        class="option__label"
+                        for="siteWhitelistCustomUserAgent"
+                    >
                         {_("optionsSiteWhitelistCustomUserAgent")}
                     </label>
                     <div class="option__control">
@@ -288,10 +305,13 @@
                             placeholder={defaultUserAgent}
                         />
                         <div class="option__description">
-                        {_("optionsSiteWhitelistCustomUserAgentDescription")}
+                            {_(
+                                "optionsSiteWhitelistCustomUserAgentDescription"
+                            )}
                         </div>
                     </div>
                 </div>
+            {/if}
 
             <div class="option">
                 <div class="option__label">
@@ -307,9 +327,23 @@
             </div>
         </fieldset>
 
-        <div id="buttons">
+        <div class="form__footer">
+            <div class="option option--inline">
+                <div class="option__control">
+                    <input
+                        id="showAdvancedOptions"
+                        type="checkbox"
+                        bind:checked={opts.showAdvancedOptions}
+                    />
+                </div>
+                <label class="option__label" for="showAdvancedOptions">
+                    {_("optionsShowAdvancedOptions")}
+                </label>
+            </div>
+
+            <div class="form__buttons">
                 {#if isSavedIndicatorVisible}
-                <div id="status-line">
+                    <div class="form__status-line">
                         {_("optionsSaved")}
                     </div>
                 {/if}
@@ -321,5 +355,6 @@
                     {_("optionsSave")}
                 </button>
             </div>
+        </div>
     </form>
 {/if}

ext/src/ui/options/Whitelist.svelte

@@ -183,7 +183,7 @@
                     <img src="assets/photon_delete.svg" alt="icon, remove" />
                 </button>
 
-                {#if !isEditingItem}
+                {#if !isEditingItem && opts.showAdvancedOptions}
                     <button
                         type="button"
                         class="whitelist__expand-button ghost"

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

@@ -48,23 +48,25 @@ button.ghost:not(:hover) {
     background-color: initial;
 }
 
-#form {
+.form {
     display: flex;
     flex-direction: column;
 }
 
-#buttons {
+.form__footer {
-    display: flex;
     align-items: center;
-    align-self: flex-end;
+    display: flex;
-    margin-block-start: 20px;
+    margin-top: 20px;
 }
 
-#buttons > :not(:last-child) {
+.form__buttons {
-    margin-inline-end: 5px;
+    align-items: center;
+    display: flex;
+    gap: 5px;
+    margin-inline-start: auto;
 }
 
-#status-line {
+.form__status-line {
     color: var(--secondary-color);
 }
 
@@ -228,7 +230,7 @@ button.ghost:not(:hover) {
     padding: 10px 0;
 }
 
-#form > .category {
+.form > .category {
     border-bottom: 1px solid var(--border-color);
 }