From dca30b62f9f7bc4cf936fbfbe4b7acb28aa352f8 Mon Sep 17 00:00:00 2001
From: Grace Kind <gracekind400@gmail.com>
Date: Wed, 22 Jul 2026 20:01:07 -0500
Subject: [PATCH] Key plugin toggle switches

---
 package.json                          |   2 +-
 src/js/views/settings/plugins.view.js | 159 +++++++++++++-------------
 2 files changed, 83 insertions(+), 78 deletions(-)

diff --git a/package.json b/package.json
index 75e33a03..826613eb 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "impro",
-  "version": "0.18.50",
+  "version": "0.18.51",
   "type": "module",
   "scripts": {
     "start": "rm -rf \"${BUILD_DIR:-build}\" && NODE_ENV=development eleventy --serve",
diff --git a/src/js/views/settings/plugins.view.js b/src/js/views/settings/plugins.view.js
index 667723cf..afbd0f11 100644
--- a/src/js/views/settings/plugins.view.js
+++ b/src/js/views/settings/plugins.view.js
@@ -1,5 +1,5 @@
 import { View } from "/js/views/view.js";
-import { html, render } from "/js/lib/lit-html.js";
+import { html, render, keyed } from "/js/lib/lit-html.js";
 import { pageEffect, bindToPage } from "/js/router.js";
 import { headerTemplate } from "/js/templates/header.template.js";
 import { auth } from "/js/auth.js";
@@ -239,85 +239,90 @@ class SettingsPluginsView extends View {
                           state.$enablingIds.has(plugin.id) ||
                           state.$disablingIds.has(plugin.id) ||
                           isUpdating;
-                        return html`
-                          <li
-                            class="plugin-list-item ${state.$uninstallingIds.has(
-                              plugin.id,
-                            )
-                              ? "uninstalling"
-                              : ""}"
-                            ?inert=${isPending}
-                          >
-                            <div class="plugin-list-item-info">
-                              <div class="plugin-list-item-name">
-                                ${plugin.name}
-                                ${plugin.id.endsWith("__LOCAL")
-                                  ? html`<span class="plugin-local-badge"
-                                      >local</span
-                                    >`
+                        // Keyed to avoid flipping animation when plugins are added / removed
+                        return keyed(
+                          plugin.id,
+                          html`
+                            <li
+                              class="plugin-list-item ${state.$uninstallingIds.has(
+                                plugin.id,
+                              )
+                                ? "uninstalling"
+                                : ""}"
+                              ?inert=${isPending}
+                            >
+                              <div class="plugin-list-item-info">
+                                <div class="plugin-list-item-name">
+                                  ${plugin.name}
+                                  ${plugin.id.endsWith("__LOCAL")
+                                    ? html`<span class="plugin-local-badge"
+                                        >local</span
+                                      >`
+                                    : ""}
+                                </div>
+                                ${plugin.description
+                                  ? html`<div
+                                      class="plugin-list-item-description"
+                                    >
+                                      ${plugin.description}
+                                    </div>`
                                   : ""}
+                                <div class="plugin-list-item-version">
+                                  Version: ${plugin.version}
+                                </div>
+                                <div class="plugin-list-item-author">
+                                  By ${plugin.author}
+                                </div>
                               </div>
-                              ${plugin.description
-                                ? html`<div
-                                    class="plugin-list-item-description"
-                                  >
-                                    ${plugin.description}
-                                  </div>`
-                                : ""}
-                              <div class="plugin-list-item-version">
-                                Version: ${plugin.version}
-                              </div>
-                              <div class="plugin-list-item-author">
-                                By ${plugin.author}
+                              <div class="plugin-list-item-controls">
+                                ${hasUpdate
+                                  ? html`<button
+                                      class="plugin-update-button rounded-button rounded-button-primary"
+                                      @click=${() => updatePlugin(plugin)}
+                                      ?disabled=${isUpdating}
+                                    >
+                                      ${isUpdating
+                                        ? html`Updating
+                                            <div
+                                              class="loading-spinner"
+                                              data-testid="loading-spinner"
+                                            ></div>`
+                                        : "Update"}
+                                    </button>`
+                                  : ""}
+                                ${plugin.enabled && plugin.hasSettings
+                                  ? html`<a
+                                      class="plugin-settings-link icon-button"
+                                      href="/settings/plugins/${plugin.id}"
+                                      aria-label="Settings for ${plugin.name}"
+                                    >
+                                      ${settingsIconTemplate()}
+                                    </a>`
+                                  : ""}
+                                <button
+                                  class="plugin-uninstall-button icon-button"
+                                  aria-label="Uninstall ${plugin.name}"
+                                  @click=${() => uninstallPlugin(plugin)}
+                                >
+                                  ${trashCanIconTemplate()}
+                                </button>
+                                <toggle-switch
+                                  class="plugin-toggle"
+                                  label="Enable ${plugin.name}"
+                                  ?checked=${state.$enablingIds.has(plugin.id)
+                                    ? true
+                                    : state.$disablingIds.has(plugin.id)
+                                      ? false
+                                      : plugin.enabled}
+                                  ?disabled=${state.$enablingIds.has(
+                                    plugin.id,
+                                  ) || state.$disablingIds.has(plugin.id)}
+                                  @change=${() => togglePlugin(plugin)}
+                                ></toggle-switch>
                               </div>
-                            </div>
-                            <div class="plugin-list-item-controls">
-                              ${hasUpdate
-                                ? html`<button
-                                    class="plugin-update-button rounded-button rounded-button-primary"
-                                    @click=${() => updatePlugin(plugin)}
-                                    ?disabled=${isUpdating}
-                                  >
-                                    ${isUpdating
-                                      ? html`Updating
-                                          <div
-                                            class="loading-spinner"
-                                            data-testid="loading-spinner"
-                                          ></div>`
-                                      : "Update"}
-                                  </button>`
-                                : ""}
-                              ${plugin.enabled && plugin.hasSettings
-                                ? html`<a
-                                    class="plugin-settings-link icon-button"
-                                    href="/settings/plugins/${plugin.id}"
-                                    aria-label="Settings for ${plugin.name}"
-                                  >
-                                    ${settingsIconTemplate()}
-                                  </a>`
-                                : ""}
-                              <button
-                                class="plugin-uninstall-button icon-button"
-                                aria-label="Uninstall ${plugin.name}"
-                                @click=${() => uninstallPlugin(plugin)}
-                              >
-                                ${trashCanIconTemplate()}
-                              </button>
-                              <toggle-switch
-                                class="plugin-toggle"
-                                label="Enable ${plugin.name}"
-                                ?checked=${state.$enablingIds.has(plugin.id)
-                                  ? true
-                                  : state.$disablingIds.has(plugin.id)
-                                    ? false
-                                    : plugin.enabled}
-                                ?disabled=${state.$enablingIds.has(plugin.id) ||
-                                state.$disablingIds.has(plugin.id)}
-                                @change=${() => togglePlugin(plugin)}
-                              ></toggle-switch>
-                            </div>
-                          </li>
-                        `;
+                            </li>
+                          `,
+                        );
                       })}
                     </ul>`}
           </main>
-- 
2.51.2