Make gear button show dropdown menu

ts/components/WithDropdownMenu.svelte

@@ -8,6 +8,8 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     import { setContext } from "svelte";
     import { dropdownKey } from "./contextKeys";
 
+    export let disabled = false;
+
     setContext(dropdownKey, {
         dropdown: true,
         "data-bs-toggle": "dropdown",
@@ -17,8 +19,10 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     const menuId = Math.random().toString(36).substring(2);
     let dropdown: Dropdown;
 
-    function activateDropdown(_event: MouseEvent): void {
+    function activateDropdown(): void {
-        dropdown.toggle();
+        if (!disabled) {
+            dropdown.toggle();
+        }
     }
 
     /* Normally dropdown and trigger are associated with a

ts/deckoptions/Badge.svelte

@@ -3,7 +3,9 @@ Copyright: Ankitects Pty Ltd and contributors
 License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 -->
 <script lang="ts">
-    import { onMount, createEventDispatcher } from "svelte";
+    import type { DropdownProps } from "components/dropdown";
+    import { dropdownKey } from "components/contextKeys";
+    import { onMount, createEventDispatcher, getContext } from "svelte";
 
     let className = "";
     export { className as class };
@@ -12,12 +14,20 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 
     let spanRef: HTMLSpanElement;
 
+    const dropdownProps = getContext<DropdownProps>(dropdownKey) ?? { dropdown: false };
+
     onMount(() => {
         dispatch("mount", { span: spanRef });
     });
 </script>
 
-<span bind:this={spanRef} class={`badge ${className}`} on:click>
+<span
+    bind:this={spanRef}
+    class={`badge ${className}`}
+    class:dropdown-toggle={dropdownProps.dropdown}
+    {...dropdownProps}
+    on:click
+>
     <slot />
 </span>
 
@@ -26,6 +36,10 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         color: inherit;
     }
 
+    .dropdown-toggle::after {
+        display: none;
+    }
+
     span :global(svg) {
         vertical-align: -0.125rem;
     }

ts/deckoptions/RevertButton.svelte

@@ -37,13 +37,29 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     }
 </script>
 
-<WithDropdownMenu let:createDropdown let:menuId>
+<WithDropdownMenu
-    <Badge class={className} on:mount={(event) => createDropdown(event.detail.span)}>
+    disabled={!modified}
+    let:createDropdown
+    let:activateDropdown
+    let:menuId
+>
+    <Badge
+        class={className}
+        on:mount={(event) => createDropdown(event.detail.span)}
+        on:click={activateDropdown}
+    >
         {@html gearIcon}
     </Badge>
 
     <DropdownMenu id={menuId}>
-        <DropdownItem on:click={revert}>
+        <DropdownItem
+            on:click={() => {
+                revert();
+                // Otherwise the menu won't close when the item is clicked
+                // TODO: investigate why this is necessary
+                activateDropdown();
+            }}
+        >
             {tr.deckConfigRevertButtonTooltip()}<Badge>{@html revertIcon}</Badge>
         </DropdownItem>
     </DropdownMenu>