From 1e3d7c21e6a90e76f2e90784524585eb8baaea40 Mon Sep 17 00:00:00 2001
From: hensm <m@matt.tf>
Date: Mon, 29 Dec 2025 15:55:12 +0000
Subject: [PATCH] Reduce options UI code duplication

---
 extension/src/defaultOptions.ts               |   2 +-
 extension/src/ui/options/Bridge.svelte        |  74 +--
 extension/src/ui/options/Option.svelte        |  87 +++
 extension/src/ui/options/Options.svelte       | 570 +++++++-----------
 .../src/ui/options/OptionsCategory.svelte     |  15 +
 extension/src/ui/options/Whitelist.svelte     |  69 +--
 extension/src/ui/options/styles/index.css     |  23 +-
 7 files changed, 370 insertions(+), 470 deletions(-)
 create mode 100644 extension/src/ui/options/Option.svelte
 create mode 100644 extension/src/ui/options/OptionsCategory.svelte

diff --git a/extension/src/defaultOptions.ts b/extension/src/defaultOptions.ts
index c8d0aad..5e09007 100644
--- a/extension/src/defaultOptions.ts
+++ b/extension/src/defaultOptions.ts
@@ -106,4 +106,4 @@ export default {
     siteWhitelistCustomUserAgent: "",
 
     showAdvancedOptions: false
-} satisfies Options as Options;
+} as Options;
diff --git a/extension/src/ui/options/Bridge.svelte b/extension/src/ui/options/Bridge.svelte
index 99871ae..f254ac9 100644
--- a/extension/src/ui/options/Bridge.svelte
+++ b/extension/src/ui/options/Bridge.svelte
@@ -13,6 +13,7 @@
     import type { Options } from "../../lib/options";
 
     import messaging from "../../messaging";
+    import Option from "./Option.svelte";
 
     const _ = browser.i18n.getMessage;
 
@@ -294,16 +295,15 @@
     {/if}
 
     <div class="bridge__options">
-        <div class="option option--inline">
-            <div class="option__control">
-                <input
-                    name="bridgeBackupEnabled"
-                    id="bridgeBackupEnabled"
-                    type="checkbox"
-                    bind:checked={opts.bridgeBackupEnabled}
-                />
-            </div>
-            <label class="option__label" for="bridgeBackupEnabled">
+        <Option
+            id="bridgeBackupEnabled"
+            label={_("optionsBridgeEnabled")}
+            description={_("optionsBridgeBackupEnabledDescription")}
+            type="checkbox"
+            bind:checked={opts.bridgeBackupEnabled}
+            inline
+        >
+            <svelte:fragment slot="label">
                 {backupMessageStart}
                 <input
                     class="bridge__backup-host"
@@ -323,48 +323,30 @@
                     bind:value={opts.bridgeBackupPort}
                 />
                 {backupMessageEnd}
-            </label>
-            <div class="option__description">
-                {_("optionsBridgeBackupEnabledDescription")}
-            </div>
-        </div>
+            </svelte:fragment>
+        </Option>
+
 
         {#if opts.showAdvancedOptions}
             <fieldset
                 class="bridge__daemon-options"
                 disabled={!opts.bridgeBackupEnabled}
             >
-                <div class="option option--inline">
-                    <div class="option__control">
-                        <input
-                            id="bridgeBackupSecure"
-                            type="checkbox"
-                            bind:checked={opts.bridgeBackupSecure}
-                        />
-                    </div>
-                    <label class="option__label" for="bridgeBackupSecure">
-                        {_("optionsBridgeBackupSecure")}
-                    </label>
-                    <div class="option__description">
-                        {_("optionsBridgeBackupSecureDescription")}
-                    </div>
-                </div>
-                <div class="option">
-                    <label class="option__label" for="bridgeBackupPassword">
-                        {_("optionsBridgeBackupPassword")}
-                    </label>
-                    <div class="option__control">
-                        <input
-                            id="bridgeBackupPassword"
-                            placeholder="Password"
-                            type="password"
-                            bind:value={opts.bridgeBackupPassword}
-                        />
-                        <div class="option__description">
-                            {_("optionsBridgeBackupPasswordDescription")}
-                        </div>
-                    </div>
-                </div>
+                <Option
+                    id="bridgeBackupSecure"
+                    label={_("optionsBridgeBackupSecure")}
+                    description={_("optionsBridgeBackupSecureDescription")}
+                    type="checkbox"
+                    bind:checked={opts.bridgeBackupSecure}
+                    inline
+                />
+                <Option
+                    id="bridgeBackupPassword"
+                    label={_("optionsBridgeBackupPassword")}
+                    description={_("optionsBridgeBackupPasswordDescription")}
+                    type="password"
+                    bind:value={opts.bridgeBackupPassword}
+                />
             </fieldset>
         {/if}
     </div>
diff --git a/extension/src/ui/options/Option.svelte b/extension/src/ui/options/Option.svelte
new file mode 100644
index 0000000..714dd5d
--- /dev/null
+++ b/extension/src/ui/options/Option.svelte
@@ -0,0 +1,87 @@
+<script lang="ts">
+    import type { HTMLInputAttributes } from "svelte/elements";
+
+    const _ = browser.i18n.getMessage;
+
+    interface $$Props extends HTMLInputAttributes {
+        id: string;
+        label: string;
+        description?: string | undefined;
+        recommended?: boolean;
+        inline?: boolean;
+        value?: any;
+        checked?: boolean;
+    }
+
+    export let id: string;
+    export let label: string;
+    export let description: string | undefined = undefined;
+
+    export let recommended = false;
+    export let inline = false;
+
+    // Bindables
+    export let value: any = undefined;
+    export let checked: boolean | undefined = undefined;
+
+    let computedClassName: string;
+    $: {
+        computedClassName = "option";
+        if (inline) computedClassName += " option--inline";
+        if ($$restProps.class) computedClassName += ` ${$$restProps.class}`;
+    }
+</script>
+
+<div class={computedClassName}>
+    <!--
+    This is pretty awful, not a good fit for CSS reordering. Would use snippets,
+    but this Svelte is too old!
+    -->
+    {#if inline}
+        <div class="option__control">
+            {#if $$restProps.type === "checkbox"}
+                <input {id} type="checkbox" bind:checked={checked} {...$$restProps} />
+            {:else}
+                <input {id} bind:value={value} {...$$restProps} />
+            {/if}
+        </div>
+        <label class="option__label" for={id}>
+            {label}
+            {#if recommended}
+                <span class="option__recommended">
+                    {_("optionsOptionRecommended")}
+                </span>
+            {/if}
+            <slot name="label" />
+        </label>
+        {#if description}
+            <div class="option__description">
+                {description}
+                <slot name="description" />
+            </div>
+        {/if}
+    {:else}
+        <label class="option__label" for={id}>
+            {label}
+            {#if recommended}
+                <span class="option__recommended">
+                    {_("optionsOptionRecommended")}
+                </span>
+            {/if}
+            <slot name="label" />
+        </label>
+        <div class="option__control">
+            {#if $$restProps.type === "checkbox"}
+                <input {id} type="checkbox" bind:checked={checked} {...$$restProps} />
+            {:else}
+                <input {id} bind:value={value} {...$$restProps} />
+            {/if}
+            {#if description}
+                <div class="option__description">
+                    {description}
+                    <slot name="description" />
+                </div>
+            {/if}
+        </div>
+    {/if}
+</div>
diff --git a/extension/src/ui/options/Options.svelte b/extension/src/ui/options/Options.svelte
index 4ff70ee..4ef663d 100644
--- a/extension/src/ui/options/Options.svelte
+++ b/extension/src/ui/options/Options.svelte
@@ -11,6 +11,8 @@
     import defaultOptions from "../../defaultOptions";
 
     import { getChromeUserAgentString } from "../../lib/userAgents";
+    import Option from "./Option.svelte";
+    import OptionsCategory from "./OptionsCategory.svelte";
 
     const _ = browser.i18n.getMessage;
 
@@ -87,383 +89,230 @@
     >
         <Bridge bind:opts />
 
-        <fieldset class="category">
-            <legend class="category__name">
-                <h2>{_("optionsMediaCategoryName")}</h2>
-            </legend>
-            <p class="category__description">
-                {_("optionsMediaCategoryDescription")}
-            </p>
-
-            <div class="option option--inline">
-                <div class="option__control">
-                    <input
-                        id="mediaEnabled"
-                        type="checkbox"
-                        bind:checked={opts.mediaEnabled}
-                    />
-                </div>
-                <label class="option__label" for="mediaEnabled">
-                    {_("optionsMediaEnabled")}
-                </label>
-            </div>
+        <OptionsCategory
+            name={_("optionsMediaCategoryName")}
+            description={_("optionsMediaCategoryDescription")}
+        >
+            <Option
+                id="mediaEnabled"
+                label={_("optionsMediaEnabled")}
+                type="checkbox"
+                bind:checked={opts.mediaEnabled}
+                inline
+            />
 
             {#if opts.showAdvancedOptions}
-                <div class="option option--inline">
-                    <div class="option__control">
-                        <input
-                            id="mediaSyncElement"
-                            type="checkbox"
-                            bind:checked={opts.mediaSyncElement}
-                        />
-                    </div>
-                    <label class="option__label" for="mediaSyncElement">
-                        {_("optionsMediaSyncElement")}
-                    </label>
-                    <div class="option__description">
-                        {_("optionsMediaSyncElementDescription")}
-                    </div>
-                </div>
+                <Option
+                    id="mediaSyncElement"
+                    label={_("optionsMediaSyncElement")}
+                    description={_("optionsMediaSyncElementDescription")}
+                    type="checkbox"
+                    bind:checked={opts.mediaSyncElement}
+                    inline
+                />
             {/if}
 
-            <div class="option option--inline">
-                <div class="option__control">
-                    <input
-                        id="mediaStopOnUnload"
-                        type="checkbox"
-                        bind:checked={opts.mediaStopOnUnload}
-                    />
-                </div>
-                <label class="option__label" for="mediaStopOnUnload">
-                    {_("optionsMediaStopOnUnload")}
-                </label>
-            </div>
+            <Option
+                id="mediaStopOnUnload"
+                label={_("optionsMediaStopOnUnload")}
+                type="checkbox"
+                bind:checked={opts.mediaStopOnUnload}
+                inline
+            />
 
             <hr />
 
-            <div class="option option--inline">
-                <div class="option__control">
-                    <input
-                        id="localMediaEnabled"
-                        type="checkbox"
-                        bind:checked={opts.localMediaEnabled}
-                    />
-                </div>
-                <label class="option__label" for="localMediaEnabled">
-                    {_("optionsLocalMediaEnabled")}
-                </label>
-                <div class="option__description">
-                    {_("optionsLocalMediaCategoryDescription")}
-                </div>
-            </div>
+            <Option
+                id="localMediaEnabled"
+                label={_("optionsLocalMediaEnabled")}
+                description={_("optionsLocalMediaCategoryDescription")}
+                type="checkbox"
+                bind:checked={opts.localMediaEnabled}
+                inline
+            />
 
-            <div class="option">
-                <label class="option__label" for="localMediaServerPort">
-                    {_("optionsLocalMediaServerPort")}
-                </label>
-                <div class="option__control">
-                    <input
-                        id="localMediaServerPort"
-                        type="number"
-                        required
-                        min="1025"
-                        max="65535"
-                        bind:value={opts.localMediaServerPort}
-                    />
-                </div>
-            </div>
-        </fieldset>
+            <Option
+                id="localMediaServerPort"
+                label={_("optionsLocalMediaServerPort")}
+                type="number"
+                required
+                min="1025"
+                max="65535"
+                bind:value={opts.localMediaServerPort}
+            />
+        </OptionsCategory>
 
         {#if opts.showAdvancedOptions}
-            <fieldset class="category">
-                <legend class="category__name">
-                    <h2>{_("optionsMirroringCategoryName")}</h2>
-                </legend>
-                <p class="category__description">
-                    {_("optionsMirroringCategoryDescription")}
-                </p>
+            <OptionsCategory
+                name={_("optionsMirroringCategoryName")}
+                description={_("optionsMirroringCategoryDescription")}
+            >
+                <Option
+                    id="mirroringEnabled"
+                    label={_("optionsMirroringEnabled")}
+                    type="checkbox"
+                    bind:checked={opts.mirroringEnabled}
+                    inline
+                />
 
-                <div class="option option--inline">
-                    <div class="option__control">
-                        <input
-                            id="mirroringEnabled"
-                            type="checkbox"
-                            bind:checked={opts.mirroringEnabled}
-                        />
-                    </div>
-                    <label class="option__label" for="mirroringEnabled">
-                        {_("optionsMirroringEnabled")}
-                    </label>
-                </div>
+                <Option
+                    id="mirroringAppId"
+                    label={_("optionsMirroringAppId")}
+                    description={_("optionsMirroringAppIdDescription")}
+                    required
+                    bind:value={opts.mirroringAppId}
+                />
 
-                <div class="option">
-                    <label class="option__label" for="mirroringAppId">
-                        {_("optionsMirroringAppId")}
-                    </label>
-                    <div class="option__control">
-                        <input
-                            id="mirroringAppId"
-                            type="text"
-                            required
-                            bind:value={opts.mirroringAppId}
-                        />
-                        <div class="option__description">
-                            {_("optionsMirroringAppIdDescription")}
-                        </div>
-                    </div>
-                </div>
+                <div class="mirroring-stream">
+                    <details>
+                        <summary>
+                            {_("optionsMirroringStreamOptions")}
+                        </summary>
 
-                <details class="mirroring-stream">
-                    <summary>
-                        {_("optionsMirroringStreamOptions")}
-                    </summary>
-
-                    <div class="mirroring-stream__options">
-                        <div class="option option--inline scaling-resolution">
-                            <div class="option__control">
-                                <input
-                                    type="checkbox"
-                                    name="scaling"
-                                    id="mirroringStreamUseMaxResolution"
-                                    bind:checked={opts.mirroringStreamUseMaxResolution}
-                                />
-                            </div>
-                            <label
-                                class="option__label"
-                                for="mirroringStreamUseMaxResolution"
-                            >
-                                {_("optionsMirroringStreamMaxResolution")}
-                                <input
-                                    type="number"
-                                    min="1"
-                                    placeholder={_(
-                                        "optionsMirroringStreamMaxResolutionWidthPlaceholder"
-                                    )}
-                                    bind:value={opts
-                                        .mirroringStreamMaxResolution.width}
-                                />
-                                ×
-                                <input
-                                    type="number"
-                                    min="1"
-                                    placeholder={_(
-                                        "optionsMirroringStreamMaxResolutionHeightPlaceholder"
-                                    )}
-                                    bind:value={opts
-                                        .mirroringStreamMaxResolution.height}
-                                />
-                            </label>
-                            <p class="option__description">
-                                {_(
-                                    "optionsMirroringStreamMaxResolutionDescription"
+                        <div class="mirroring-stream__options">
+                            <Option
+                                id="mirroringStreamUseMaxResolution"
+                                label={_(
+                                    "optionsMirroringStreamUseMaxResolution"
                                 )}
-                            </p>
-                        </div>
-
-                        <div class="option scaling-downscale">
-                            <label
-                                class="option__label"
-                                for="mirroringStreamDownscaleFactor"
+                                description={_(
+                                    "optionsMirroringStreamUseMaxResolutionDescription"
+                                )}
+                                class="scaling-resolution"
+                                type="checkbox"
+                                bind:checked={opts.mirroringStreamUseMaxResolution}
+                                inline
                             >
-                                {_("optionsMirroringStreamDownscaleFactor")}
-                            </label>
-                            <div class="option__control">
-                                <input
-                                    id="mirroringStreamDownscaleFactor"
-                                    type="number"
-                                    required
-                                    min="1"
-                                    step="any"
-                                    bind:value={opts.mirroringStreamDownscaleFactor}
-                                />
+                                <svelte:fragment slot="label">
+                                    <input
+                                        type="number"
+                                        min="1"
+                                        placeholder={_(
+                                            "optionsMirroringStreamMaxResolutionWidthPlaceholder"
+                                        )}
+                                        bind:value={opts
+                                            .mirroringStreamMaxResolution.width}
+                                    />
+                                    ×
+                                    <input
+                                        type="number"
+                                        min="1"
+                                        placeholder={_(
+                                            "optionsMirroringStreamMaxResolutionHeightPlaceholder"
+                                        )}
+                                        bind:value={opts
+                                            .mirroringStreamMaxResolution
+                                            .height}
+                                    />
+                                </svelte:fragment>
+                            </Option>
 
-                                <p class="option__description">
-                                    {_(
-                                        "optionsMirroringStreamDownscaleFactorDescription"
-                                    )}
-                                </p>
-                            </div>
-                        </div>
+                            <Option
+                                id="mirroringStreamDownscaleFactor"
+                                label={_(
+                                    "optionsMirroringStreamDownscaleFactor"
+                                )}
+                                description={_(
+                                    "optionsMirroringStreamDownscaleFactorDescription"
+                                )}
+                                type="number"
+                                required
+                                min="1"
+                                step="any"
+                                bind:value={opts.mirroringStreamDownscaleFactor}
+                                class="scaling-downscale"
+                            />
 
-                        <div class="option">
-                            <label
-                                class="option__label"
-                                for="mirroringStreamMaxFrameRate"
-                            >
-                                {_("optionsMirroringStreamFrameRate")}
-                            </label>
-                            <div class="option__control">
-                                <input
-                                    id="mirroringStreamMaxFrameRate"
-                                    type="number"
-                                    required
-                                    min="1"
-                                    bind:value={opts.mirroringStreamMaxFrameRate}
-                                />
-                            </div>
-                        </div>
+                            <Option
+                                id="mirroringStreamMaxFrameRate"
+                                label={_("optionsMirroringStreamFrameRate")}
+                                type="number"
+                                required
+                                min="1"
+                                bind:value={opts.mirroringStreamMaxFrameRate}
+                            />
 
-                        <div class="option">
-                            <label
-                                class="option__label"
-                                for="mirroringStreamMaxBitRate"
-                            >
-                                {_("optionsMirroringStreamMaxBitRate")}
-                            </label>
-                            <div class="option__control">
-                                <input
-                                    id="mirroringStreamMaxBitRate"
-                                    type="number"
-                                    required
-                                    min="1"
-                                    bind:value={opts.mirroringStreamMaxBitRate}
-                                />
-                                <p class="option__description">
-                                    {_(
-                                        "optionsMirroringStreamMaxBitRateDescription"
-                                    )}
-                                </p>
-                            </div>
+                            <Option
+                                id="mirroringStreamMaxBitRate"
+                                label={_("optionsMirroringStreamMaxBitRate")}
+                                description={_(
+                                    "optionsMirroringStreamMaxBitRateDescription"
+                                )}
+                                type="number"
+                                required
+                                min="1"
+                                bind:value={opts.mirroringStreamMaxBitRate}
+                            />
                         </div>
-                    </div>
-                </details>
-            </fieldset>
+                    </details>
+                </div>
+            </OptionsCategory>
         {/if}
 
         {#if opts.showAdvancedOptions}
-            <fieldset class="category">
-                <legend class="category__name">
-                    <h2>{_("optionsReceiverSelectorCategoryName")}</h2>
-                </legend>
-                <p class="category__description">
-                    {_("optionsReceiverSelectorCategoryDescription")}
-                </p>
+            <OptionsCategory
+                name={_("optionsReceiverSelectorCategoryName")}
+                description={_("optionsReceiverSelectorCategoryDescription")}
+            >
+                <!-- <Option
+                    id="receiverSelectorWaitForConnection"
+                    label={_("optionsreceiverSelectorWaitForConnection")}
+                    description={_("optionsReceiverSelectorWaitForConnectionDescription")}
+                    type="checkbox"
+                    bind:checked={opts.receiverSelectorWaitForConnection}
+                /> -->
 
-                <!--
-                <div class="option option--inline">
-                    <div class="option__control">
-                        <input
-                            id="receiverSelectorWaitForConnection"
-                            type="checkbox"
-                            bind:checked={opts.receiverSelectorWaitForConnection}
-                        />
-                    </div>
-                    <label
-                        class="option__label"
-                        for="receiverSelectorWaitForConnection"
-                    >
-                        {_("optionsReceiverSelectorWaitForConnection")}
-                    </label>
-                    <div class="option__description">
-                        {_(
-                            "optionsReceiverSelectorWaitForConnectionDescription"
-                        )}
-                    </div>
-                </div>
-                -->
-
-                <div class="option option--inline">
-                    <div class="option__control">
-                        <input
-                            id="receiverSelectorExpandActive"
-                            type="checkbox"
-                            bind:checked={opts.receiverSelectorExpandActive}
-                        />
-                    </div>
-                    <label
-                        class="option__label"
-                        for="receiverSelectorExpandActive"
-                    >
-                        {_("optionsReceiverSelectorExpandActive")}
-                    </label>
-                </div>
-
-                <div class="option option--inline">
-                    <div class="option__control">
-                        <input
-                            id="receiverSelectorShowMediaImages"
-                            type="checkbox"
-                            bind:checked={opts.receiverSelectorShowMediaImages}
-                        />
-                    </div>
-                    <label
-                        class="option__label"
-                        for="receiverSelectorShowMediaImages"
-                    >
-                        {_("optionsReceiverSelectorShowMediaImages")}
-                    </label>
-                    <div class="option__description">
-                        {_("optionsReceiverSelectorShowMediaImagesDescription")}
-                    </div>
-                </div>
-
-                <div class="option option--inline">
-                    <div class="option__control">
-                        <input
-                            id="receiverSelectorCloseIfFocusLost"
-                            type="checkbox"
-                            bind:checked={opts.receiverSelectorCloseIfFocusLost}
-                        />
-                    </div>
-                    <label
-                        class="option__label"
-                        for="receiverSelectorCloseIfFocusLost"
-                    >
-                        {_("optionsReceiverSelectorCloseIfFocusLost")}
-                    </label>
-                </div>
-            </fieldset>
+                <Option
+                    id="receiverSelectorExpandActive"
+                    label={_("optionsReceiverSelectorExpandActive")}
+                    type="checkbox"
+                    bind:checked={opts.receiverSelectorExpandActive}
+                    inline
+                />
+                <Option
+                    id="receiverSelectorShowMediaImages"
+                    label={_("optionsreceiverSelectorShowMediaImages")}
+                    description={_(
+                        "optionsreceiverSelectorShowMediaImagesDescription"
+                    )}
+                    type="checkbox"
+                    bind:checked={opts.receiverSelectorShowMediaImages}
+                    inline
+                />
+                <Option
+                    id="receiverSelectorCloseIfFocusLost"
+                    label={_("optionsReceiverSelectorCloseIfFocusLost")}
+                    type="checkbox"
+                    bind:checked={opts.receiverSelectorCloseIfFocusLost}
+                    inline
+                />
+            </OptionsCategory>
         {/if}
 
-        <fieldset class="category">
-            <legend class="category__name">
-                <h2>{_("optionsSiteWhitelistCategoryName")}</h2>
-            </legend>
-            <p class="category__description">
-                {_("optionsSiteWhitelistCategoryDescription")}
-            </p>
-
+        <OptionsCategory
+            name={_("optionsSiteWhitelistCategoryName")}
+            description={_("optionsSiteWhitelistCategoryDescription")}
+        >
             {#if opts.showAdvancedOptions}
-                <div class="option option--inline">
-                    <div class="option__control">
-                        <input
-                            id="siteWhitelistEnabled"
-                            type="checkbox"
-                            bind:checked={opts.siteWhitelistEnabled}
-                        />
-                    </div>
-                    <label class="option__label" for="siteWhitelistEnabled">
-                        {_("optionsSiteWhitelistEnabled")}
-                        <span class="option__recommended">
-                            {_("optionsOptionRecommended")}
-                        </span>
-                    </label>
-                    <div class="option__description">
-                        {_("optionsSiteWhitelistEnabledDescription")}
-                    </div>
-                </div>
+                <Option
+                    id="siteWhitelistEnabled"
+                    label={_("optionsSiteWhitelistEnabled")}
+                    description={_("optionsSiteWhitelistEnabledDescription")}
+                    type="checkbox"
+                    bind:checked={opts.siteWhitelistEnabled}
+                    recommended
+                    inline
+                />
 
-                <div class="option">
-                    <label
-                        class="option__label"
-                        for="siteWhitelistCustomUserAgent"
-                    >
-                        {_("optionsSiteWhitelistCustomUserAgent")}
-                    </label>
-                    <div class="option__control">
-                        <input
-                            id="siteWhitelistCustomUserAgent"
-                            type="text"
-                            bind:value={opts.siteWhitelistCustomUserAgent}
-                            placeholder={defaultUserAgent}
-                        />
-                        <div class="option__description">
-                            {_(
-                                "optionsSiteWhitelistCustomUserAgentDescription"
-                            )}
-                        </div>
-                    </div>
-                </div>
+                <Option
+                    id="siteWhitelistCustomUserAgent"
+                    label={_("optionsSiteWhitelistCustomUserAgent")}
+                    description={_(
+                        "optionsSiteWhitelistCustomUserAgentDescription"
+                    )}
+                    bind:value={opts.siteWhitelistCustomUserAgent}
+                    placeholder={defaultUserAgent}
+                />
             {/if}
 
             <div class="option">
@@ -478,21 +327,16 @@
                     />
                 </div>
             </div>
-        </fieldset>
+        </OptionsCategory>
 
         <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>
+            <Option
+                id="showAdvancedOptions"
+                label={_("optionsShowAdvancedOptions")}
+                type="checkbox"
+                bind:checked={opts.showAdvancedOptions}
+                inline
+            />
 
             <div class="form__buttons">
                 {#if isSavedIndicatorVisible}
diff --git a/extension/src/ui/options/OptionsCategory.svelte b/extension/src/ui/options/OptionsCategory.svelte
new file mode 100644
index 0000000..2bfe74f
--- /dev/null
+++ b/extension/src/ui/options/OptionsCategory.svelte
@@ -0,0 +1,15 @@
+<script lang="ts">
+    export let name: string;
+    export let description: string;
+</script>
+
+<fieldset class="category">
+    <legend class="category__name">
+        <h2>{name}</h2>
+    </legend>
+    <p class="category__description">
+        {description}
+    </p>
+
+    <slot />
+</fieldset>
diff --git a/extension/src/ui/options/Whitelist.svelte b/extension/src/ui/options/Whitelist.svelte
index 8f2b4a0..48e340a 100644
--- a/extension/src/ui/options/Whitelist.svelte
+++ b/extension/src/ui/options/Whitelist.svelte
@@ -7,6 +7,7 @@
     import type { Options } from "../../lib/options";
 
     import knownApps, { KnownApp } from "../../cast/knownApps";
+    import Option from "./Option.svelte";
 
     const _ = browser.i18n.getMessage;
 
@@ -217,51 +218,31 @@
 
                     {#if isItemExpanded}
                         <div class="whitelist__expanded">
-                            <div class="option option--inline">
-                                <div class="option__control">
-                                    <input
-                                        id="isUserAgentDisabled-{i}"
-                                        type="checkbox"
-                                        bind:checked={item.isUserAgentDisabled}
-                                    />
-                                </div>
-                                <label
-                                    class="option__label"
-                                    for="isUserAgentDisabled-{i}"
-                                >
-                                    {_("optionsSiteWhitelistUserAgentDisabled")}
-                                </label>
-                                <div class="option__description">
-                                    {_(
-                                        "optionsSiteWhitelistUserAgentDisabledDescription"
-                                    )}
-                                </div>
-                            </div>
+                            <Option
+                                id="isUserAgentDisabled-{i}"
+                                label={_(
+                                    "optionsSiteWhitelistUserAgentDisabled"
+                                )}
+                                description={_(
+                                    "optionsSiteWhitelistUserAgentDisabledDescription"
+                                )}
+                                type="checkbox"
+                                bind:checked={item.isUserAgentDisabled}
+                                inline
+                            />
 
-                            <div class="option">
-                                <label
-                                    class="option__label"
-                                    for="customUserAgentString-{i}"
-                                >
-                                    {_(
-                                        "optionsSiteWhitelistSiteSpecificUserAgent"
-                                    )}
-                                </label>
-                                <div class="option__control">
-                                    <input
-                                        id="customUserAgentString-{i}"
-                                        type="text"
-                                        bind:value={item.customUserAgent}
-                                        placeholder={opts.siteWhitelistCustomUserAgent ||
-                                            defaultUserAgent}
-                                    />
-                                    <div class="option__description">
-                                        {_(
-                                            "optionsSiteWhitelistSiteSpecificUserAgentDescription"
-                                        )}
-                                    </div>
-                                </div>
-                            </div>
+                            <Option
+                                id="customUserAgentString-{i}"
+                                label={_(
+                                    "optionsSiteWhitelistSiteSpecificUserAgent"
+                                )}
+                                description={_(
+                                    "optionsSiteWhitelistSiteSpecificUserAgentDescription"
+                                )}
+                                bind:value={item.customUserAgent}
+                                placeholder={opts.siteWhitelistCustomUserAgent ||
+                                    defaultUserAgent}
+                            />
                         </div>
                     {/if}
                 {/if}
diff --git a/extension/src/ui/options/styles/index.css b/extension/src/ui/options/styles/index.css
index 7e1f442..068d841 100644
--- a/extension/src/ui/options/styles/index.css
+++ b/extension/src/ui/options/styles/index.css
@@ -237,20 +237,6 @@ input:placeholder-shown {
     grid-column: span 2;
     width: 100%;
 }
-.category > details {
-    display: contents;
-}
-.category > details > summary {
-    grid-column: 2;
-    margin-top: 5px;
-}
-.category > details:not([open]) > summary ~ * {
-    display: none;
-}
-.category > details:not([open]) > summary,
-.category > details[open] > :last-child {
-    margin-bottom: 5px;
-}
 
 .category__name {
     float: left;
@@ -336,9 +322,14 @@ fieldset:disabled .option__description {
     margin-inline-start: initial;
 }
 
-.mirroring-stream > summary {
-    color: var(--secondary-color);
+.mirroring-stream {
+    grid-column: 2;
 }
+.mirroring-stream > details > summary {
+    color: var(--secondary-color);
+    margin: 5px 0;
+}
+
 .mirroring-stream__options {
     background-color: var(--overlay-color);
     border-radius: 4px;