Improve responsive layouts and streamline page loading

components/CatalogBrowser.tsx

@@ -54,7 +54,7 @@ export function CatalogBrowser({
           ))}
         </div>
       </div>
-      <p className="muted">
+      <p className="muted catalog-count" role="status">
         {t("Worlds to explore: {count}", { count: shown.length })}
       </p>
       <div className="cards-grid">
@@ -63,7 +63,20 @@ export function CatalogBrowser({
         ))}
       </div>
       {!shown.length && (
-        <p className="empty-state">{t("No worlds match that search.")}</p>
+        <div className="empty-state catalog-empty">
+          <Search size={28} aria-hidden="true" />
+          <p>{t("No worlds match that search.")}</p>
+          <button
+            type="button"
+            className="button secondary"
+            onClick={() => {
+              setQuery("");
+              setSource("all");
+            }}
+          >
+            {t("Clear filters")}
+          </button>
+        </div>
       )}
     </>
   );