Refactor: Better State Management #42

Author: tmenzel27

src/plugin-store-item.svelte

@@ -13,18 +13,14 @@ type ConfigurePluginDetail = {
 };
 
     interface Props {
-        filteredPlugins: Plugin[];
         pluginStore: Element | undefined;
         plugin: Plugin;
-        index: number;
         localPlugins: Plugin[];
     }
 
     let {
-        filteredPlugins,
         pluginStore,
         plugin,
-        index,
         localPlugins = $bindable()
     }: Props = $props();
 
@@ -86,18 +82,10 @@ function toggleOfficialPlugin(plugin: Plugin, isEnabled: boolean) {
 	console.log("Set toggle state for", plugin.name);
 }
 
-let menus: (Menu | null)[] = $state([]);
-let menuStates = $state<boolean[]>([]);
+let isMenuOpen = $state(false);
 
-// Update arrays when filteredPlugins changes
-$effect(() => {
-	menus = filteredPlugins.map(() => null);
-	menuStates = filteredPlugins.map(() => false);
-});
-
-function openPluginMenu(index: number) {
-	menuStates = menuStates.map(() => false);
-	menuStates[index] = true;
+function openPluginMenu() {
+	isMenuOpen = true;
 }
 
 function convertPluginKindToText(kind: PluginKind): string {
@@ -157,8 +145,8 @@ function getPluginIcon(plugin: Plugin) {
                 Disable
             </Button>
         {:else}
-            <SplitButton variant="outlined" label="Disable" onclick={() => toggleOfficialPlugin(plugin, false)} onmenuOpen={() => openPluginMenu(index)}>
-                <Menu bind:this={menus[index]} open={menuStates[index]} anchorCorner="BOTTOM_LEFT" style="left: -70px;">
+            <SplitButton variant="outlined" label="Disable" onclick={() => toggleOfficialPlugin(plugin, false)} onmenuOpen={openPluginMenu}>
+                <Menu open={isMenuOpen} anchorCorner="BOTTOM_LEFT" style="left: -70px;">
                     <List>
                         <Item onSMUIAction={() => uninstallExternalPlugin(plugin)}>
                             <Text>Uninstall</Text>
@@ -173,8 +161,8 @@ function getPluginIcon(plugin: Plugin) {
         </Button>
     {:else}
         {#if localPlugins.some(p => p.name === plugin.name)}
-            <SplitButton label="Enable" onclick={() => {toggleOfficialPlugin(plugin, true)}} onmenuOpen={() => openPluginMenu(index)}>
-                <Menu bind:this={menus[index]} open={menuStates[index]} anchorCorner="BOTTOM_LEFT" style="left: -70px;">
+            <SplitButton label="Enable" onclick={() => {toggleOfficialPlugin(plugin, true)}} onmenuOpen={openPluginMenu}>
+                <Menu open={isMenuOpen} anchorCorner="BOTTOM_LEFT" style="left: -70px;">
                     <List>
                         <Item onSMUIAction={() => uninstallExternalPlugin(plugin)}>
                             <Text>Uninstall</Text>

src/plugin-store.svelte

@@ -142,11 +142,9 @@ $effect(() => {
                         <strong><div class="mdc-typography--headline6 plugin-store-items--category-title">Editor</div></strong>
                         <hr class="plugin-store-items--divider">
                     </plugin-store-items--category>
-                    {#each editorPlugins as plugin, index}
+                    {#each editorPlugins as plugin}
                         <PluginStoreItem 
                          plugin={plugin}
-                         index={index}
-                         filteredPlugins={filteredPlugins} 
                          bind:localPlugins={localPlugins} 
                          pluginStore={pluginStore}/> 
                     {/each}
@@ -159,11 +157,9 @@ $effect(() => {
                         <strong><div class="mdc-typography--headline6 plugin-store-items--category-title">Menu</div></strong>
                         <hr class="plugin-store-items--divider">
                     </plugin-store-items--category>
-                    {#each menuPlugins as plugin, index}
+                    {#each menuPlugins as plugin}
                         <PluginStoreItem 
                          plugin={plugin}
-                         index={index}
-                         filteredPlugins={filteredPlugins} 
                          bind:localPlugins={localPlugins} 
                          pluginStore={pluginStore}/> 
                     {/each}
@@ -176,11 +172,9 @@ $effect(() => {
                         <strong><div class="mdc-typography--headline6 plugin-store-items--category-title">Validator</div></strong>
                         <hr class="plugin-store-items--divider">
                     </plugin-store-items--category>
-                    {#each validatorPlugins as plugin, index}
+                    {#each validatorPlugins as plugin}
                         <PluginStoreItem 
                          plugin={plugin}
-                         index={index}
-                         filteredPlugins={filteredPlugins} 
                          bind:localPlugins={localPlugins} 
                          pluginStore={pluginStore}/> 
                     {/each}