Merge pull request #3593 from Shopify/icon-viewer-hidden

Icon Explorer Improvements

Author: davebcn87

packages/ui-extensions/docs/surfaces/admin/templates/icon-renderer/dark-mode-listener.jsx

@@ -26,4 +26,13 @@
   window.addEventListener('theme-mode-changed', () => {
     sendThemeToIframe();
   });
+
+  // Re-send theme when page is restored from cache
+  window.addEventListener('pageshow', (event) => {
+    if (event.persisted) {
+      sendThemeToIframe();
+    }
+  });
+
+  sendThemeToIframe();
 })();

packages/ui-extensions/docs/surfaces/admin/templates/icon-renderer/icon-preview.jsx

@@ -1,8 +1,15 @@
 const icons = "__ICON_LIST__";
 
 const styles = `
+  @keyframes reveal-fallback {
+    0% { visibility: hidden; }
+    99% { visibility: hidden; }
+    100% { visibility: visible; }
+  }
+
   html:not([data-theme]) body {
     visibility: hidden;
+    animation: reveal-fallback 300ms forwards;
   }
 
   html {
@@ -77,7 +84,6 @@ const styles = `
     color: var(--text-primary);
     font-size: 14px;
     outline: none;
-    transition: border-color 0.2s;
     box-sizing: border-box;
   }
 
@@ -106,9 +112,7 @@ const styles = `
     border: 1px solid var(--border-icon-item);
     border-radius: 8px;
     box-shadow: 0 2px 0px var(--shadow-icon-item);
-    transition: background-color 0.2s linear, border-color 0.2s linear;
     font-family: "JetBrains Mono", Monaco, Consolas, "Lucida Console", monospace
-  
   }
 
   .icon-item:hover {
@@ -148,7 +152,6 @@ const styles = `
     color: var(--text-primary);
     font-size: 14px;
     cursor: pointer;
-    transition: background 0.2s;
   }
 
   .pagination-button:hover:not(:disabled) {
@@ -179,10 +182,23 @@ const [isMobile, setIsMobile] = useState(window.innerWidth <= 480);
 
 const pageSize = isMobile ? 6 : 10;
 
+// Simple fuzzy search - checks if all query chars appear in order
+const fuzzyMatch = (query, text) => {
+  let queryIndex = 0;
+  const lowerQuery = query.toLowerCase();
+  const lowerText = text.toLowerCase();
+
+  for (let i = 0; i < lowerText.length && queryIndex < lowerQuery.length; i++) {
+    if (lowerText[i] === lowerQuery[queryIndex]) {
+      queryIndex++;
+    }
+  }
+
+  return queryIndex === lowerQuery.length;
+};
+
 const filteredIcons = searchQuery
-  ? icons.filter((icon) =>
-      icon.toLowerCase().includes(searchQuery.toLowerCase())
-    )
+  ? icons.filter(icon => fuzzyMatch(searchQuery, icon))
   : icons;
 
 const totalPages = Math.ceil(filteredIcons.length / pageSize);