From d56df2f76e8284c8e154535bbb5c7a0546db5f54 Mon Sep 17 00:00:00 2001
From: Grace Kind <gracekind400@gmail.com>
Date: Sat, 3 Oct 2026 17:01:20 -0500
Subject: [PATCH] Update plugin empty state styles

---
 package.json                                  |  2 +-
 src/css/style.css                             | 81 +++++++------------
 src/js/views/communityPlugins.view.js         | 10 +--
 src/js/views/installedPlugins.view.js         | 10 +--
 src/js/views/search.view.js                   |  9 ++-
 .../specs/views/installedPlugins.view.test.js |  6 +-
 tests/e2e/specs/views/search.view.test.js     | 34 +++++---
 7 files changed, 70 insertions(+), 82 deletions(-)

diff --git a/package.json b/package.json
index eb524c56..b5ca6b55 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "impro",
-  "version": "0.20.76",
+  "version": "0.20.77",
   "type": "module",
   "scripts": {
     "start": "rm -rf \"${BUILD_DIR:-build}\" && NODE_ENV=development eleventy --serve",
diff --git a/src/css/style.css b/src/css/style.css
index 1da90c5e..68718efa 100644
--- a/src/css/style.css
+++ b/src/css/style.css
@@ -6518,34 +6518,6 @@ button.profile-list-item-button.is-disabled {
   height: 16px;
 }
 
-.search-placeholder {
-  padding: 48px 24px;
-  color: var(--text-color-muted);
-  font-size: 15px;
-  text-align: center;
-  line-height: 1.5;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 12px;
-}
-
-.search-placeholder-icon {
-  width: 64px;
-  height: 64px;
-  opacity: 0.3;
-}
-
-.search-placeholder-icon > app-icon {
-  width: 100%;
-  height: 100%;
-  color: var(--text-color-muted);
-}
-
-.search-placeholder-text {
-  max-width: 345px;
-}
-
 .search-status-message {
   padding: 16px;
   color: var(--text-color-muted);
@@ -9836,6 +9808,34 @@ moderation-warning .toggle-content {
   height: 2em;
 }
 
+.empty-state {
+  color: var(--text-color-muted);
+  padding: 32px 20px;
+  text-align: center;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  line-height: 1.5;
+}
+
+.empty-state h3 {
+  color: var(--text-color);
+  margin-bottom: 4px;
+}
+
+.empty-state-icon {
+  width: 64px;
+  height: 64px;
+  margin-bottom: 12px;
+  opacity: 0.3;
+}
+
+.empty-state-icon > app-icon {
+  width: 100%;
+  height: 100%;
+  color: var(--text-color-muted);
+}
+
 .error-state {
   color: var(--text-color-muted);
   padding-top: 2em;
@@ -11867,31 +11867,6 @@ image-cropper {
   padding: 32px 16px;
 }
 
-.plugins-empty-state {
-  margin: 16px;
-  padding: 24px 20px;
-  border-radius: var(--callout-border-radius);
-  background: var(--callout-color);
-  text-align: center;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 6px;
-}
-
-.plugins-empty-state-title {
-  font-weight: 600;
-  font-size: 16px;
-}
-
-.plugins-empty-state-message {
-  margin: 0;
-  color: var(--text-color-muted);
-  font-size: 14px;
-  line-height: 1.5;
-  max-width: 32em;
-}
-
 /* @chunk plugins */
 #community-plugins-view .error-state,
 #installed-plugins-view .error-state {
diff --git a/src/js/views/communityPlugins.view.js b/src/js/views/communityPlugins.view.js
index f92ba02e..47f64070 100644
--- a/src/js/views/communityPlugins.view.js
+++ b/src/js/views/communityPlugins.view.js
@@ -87,13 +87,9 @@ export default async function communityPluginsView({
                   ></div>
                 </div>`
               : listings.length === 0
-                ? html`<div class="plugins-empty-state">
-                    <div class="plugins-empty-state-title">
-                      No community plugins to show
-                    </div>
-                    <p class="plugins-empty-state-message">
-                      The registry is empty right now.
-                    </p>
+                ? html`<div class="empty-state" data-testid="empty-state">
+                    <h3>No community plugins to show</h3>
+                    <div>The registry is empty right now.</div>
                   </div>`
                 : html`<ul class="plugin-list">
                     ${listings.map((listing) => {
diff --git a/src/js/views/installedPlugins.view.js b/src/js/views/installedPlugins.view.js
index 759c70cc..99c167b0 100644
--- a/src/js/views/installedPlugins.view.js
+++ b/src/js/views/installedPlugins.view.js
@@ -181,13 +181,11 @@ export default async function installedPluginsView({
           ${!pluginsInfo
             ? html`<p class="plugin-list-loading">Loading…</p>`
             : pluginsInfo.length === 0
-              ? html`<div class="plugins-empty-state">
-                  <div class="plugins-empty-state-title">
-                    No plugins installed
-                  </div>
-                  <p class="plugins-empty-state-message">
+              ? html`<div class="empty-state" data-testid="empty-state">
+                  <h3>No plugins installed</h3>
+                  <div>
                     Browse the community registry to find and install plugins.
-                  </p>
+                  </div>
                 </div>`
               : html`<div class="installed-plugins-header">
                     <h2>Installed plugins</h2>
diff --git a/src/js/views/search.view.js b/src/js/views/search.view.js
index 87ebf412..551de7dd 100644
--- a/src/js/views/search.view.js
+++ b/src/js/views/search.view.js
@@ -702,11 +702,14 @@ export default async function searchView({
           profileItems: recentProfileItems,
         });
       } else {
-        bodyTemplate = html`<div class="search-placeholder">
-          <div class="search-placeholder-icon">
+        bodyTemplate = html`<div
+          class="empty-state"
+          data-testid="search-placeholder"
+        >
+          <div class="empty-state-icon">
             <app-icon icon="search-line"></app-icon>
           </div>
-          <div class="search-placeholder-text">
+          <div>
             ${isAuthenticated
               ? "Start typing to search for users, posts, and feeds."
               : html`Start typing to search for users.<br />Sign in to search
diff --git a/tests/e2e/specs/views/installedPlugins.view.test.js b/tests/e2e/specs/views/installedPlugins.view.test.js
index 10b6b3cb..02cb84a7 100644
--- a/tests/e2e/specs/views/installedPlugins.view.test.js
+++ b/tests/e2e/specs/views/installedPlugins.view.test.js
@@ -71,7 +71,7 @@ test.describe("Installed plugins view", () => {
     await page.goto("/plugins/installed");
 
     const view = page.locator("#installed-plugins-view");
-    await expect(view.locator(".plugins-empty-state")).toBeVisible({
+    await expect(view.locator('[data-testid="empty-state"]')).toBeVisible({
       timeout: 10000,
     });
     await expect(view.locator(".plugin-list-item")).toHaveCount(0);
@@ -149,7 +149,9 @@ test.describe("Installed plugins view", () => {
 
     await expect(page.locator('[data-testid="toast"]')).toBeVisible();
     await expect(page.locator(".plugin-list-item")).toHaveCount(0);
-    await expect(page.locator(".plugins-empty-state")).toBeVisible();
+    await expect(
+      page.locator('#installed-plugins-view [data-testid="empty-state"]'),
+    ).toBeVisible();
   });
 
   test("uninstall button does nothing when cancelled", async ({ page }) => {
diff --git a/tests/e2e/specs/views/search.view.test.js b/tests/e2e/specs/views/search.view.test.js
index 52d019dc..caac2340 100644
--- a/tests/e2e/specs/views/search.view.test.js
+++ b/tests/e2e/specs/views/search.view.test.js
@@ -22,10 +22,12 @@ test.describe("Search view", () => {
 
     const view = page.locator("#search-view");
     await expect(view.locator(".search-input")).toBeVisible({ timeout: 10000 });
-    await expect(view.locator(".search-placeholder")).toBeVisible();
-    await expect(view.locator(".search-placeholder-text")).toContainText(
-      "Start typing to search for users, posts, and feeds.",
-    );
+    await expect(
+      view.locator('[data-testid="search-placeholder"]'),
+    ).toBeVisible();
+    await expect(
+      view.locator('[data-testid="search-placeholder"]'),
+    ).toContainText("Start typing to search for users, posts, and feeds.");
   });
 
   test("should display profile search results", async ({ page }) => {
@@ -238,7 +240,9 @@ test.describe("Search view", () => {
     await view.locator(".search-clear-button").click();
 
     // Should return to placeholder state
-    await expect(view.locator(".search-placeholder")).toBeVisible({
+    await expect(
+      view.locator('[data-testid="search-placeholder"]'),
+    ).toBeVisible({
       timeout: 10000,
     });
     await expect(view.locator(".search-clear-button")).not.toBeVisible();
@@ -1055,7 +1059,9 @@ test.describe("Search view", () => {
 
       await input.fill("");
 
-      await expect(view.locator(".search-placeholder")).toBeVisible({
+      await expect(
+        view.locator('[data-testid="search-placeholder"]'),
+      ).toBeVisible({
         timeout: 10000,
       });
     });
@@ -1388,7 +1394,9 @@ test.describe("Search view", () => {
       await expect(view.locator('[data-testid="search-recent"]')).toBeVisible({
         timeout: 10000,
       });
-      await expect(view.locator(".search-placeholder")).not.toBeVisible();
+      await expect(
+        view.locator('[data-testid="search-placeholder"]'),
+      ).not.toBeVisible();
       const rows = view.locator('[data-testid="search-recent-row"]');
       await expect(rows).toHaveCount(2);
       await expect(rows.nth(0)).toContainText("dogs");
@@ -1412,7 +1420,9 @@ test.describe("Search view", () => {
 
       const view = page.locator("#search-view");
       const input = view.locator(".search-input");
-      await expect(view.locator(".search-placeholder")).toBeVisible({
+      await expect(
+        view.locator('[data-testid="search-placeholder"]'),
+      ).toBeVisible({
         timeout: 10000,
       });
       await input.fill("kittens");
@@ -1585,7 +1595,9 @@ test.describe("Search view", () => {
         .first()
         .click();
 
-      await expect(view.locator(".search-placeholder")).toBeVisible({
+      await expect(
+        view.locator('[data-testid="search-placeholder"]'),
+      ).toBeVisible({
         timeout: 10000,
       });
       await expect(
@@ -1609,7 +1621,9 @@ test.describe("Search view", () => {
       await page.goto("/search");
 
       const view = page.locator("#search-view");
-      await expect(view.locator(".search-placeholder")).toBeVisible({
+      await expect(
+        view.locator('[data-testid="search-placeholder"]'),
+      ).toBeVisible({
         timeout: 10000,
       });
 
-- 
2.51.2