Add map import and export with durable refresh progress

components/CatalogBrowser.tsx

@@ -4,7 +4,14 @@ import { useI18n } from "@/components/I18nProvider";
 import { useState } from "react";
 import { Search } from "lucide-react";
 import { MapCard, type CardMap } from "./MapCard";
-export function CatalogBrowser({ maps }: { maps: CardMap[] }) {
+import { ImportMap } from "./MapTransfer";
+export function CatalogBrowser({
+  maps,
+  signedIn = false,
+}: {
+  maps: CardMap[];
+  signedIn?: boolean;
+}) {
   const { t } = useI18n();
   const [query, setQuery] = useState(""),
     [source, setSource] = useState("all");
@@ -18,15 +25,18 @@ export function CatalogBrowser({ maps }: { maps: CardMap[] }) {
   return (
     <>
       <div className="catalog-controls">
-        <label className="search-field">
-          <Search size={17} />
-          <input
-            aria-label={t("Search worlds")}
-            placeholder={t("Search worlds or servers…")}
-            value={query}
-            onChange={(e) => setQuery(e.target.value)}
-          />
-        </label>
+        <div className="catalog-search">
+          <label className="search-field">
+            <Search size={17} />
+            <input
+              aria-label={t("Search worlds")}
+              placeholder={t("Search worlds or servers…")}
+              value={query}
+              onChange={(e) => setQuery(e.target.value)}
+            />
+          </label>
+          <ImportMap signedIn={signedIn} />
+        </div>
         <div className="tabs" aria-label={t("Capture source")}>
           {[
             ["all", t("All worlds")],