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>
       )}
     </>
   );

components/MapCard.tsx

@@ -21,10 +21,12 @@ export function MapCard({
   map,
   index = 0,
   minecraftPaper = false,
+  loading,
 }: {
   map: CardMap;
   index?: number;
   minecraftPaper?: boolean;
+  loading?: "eager" | "lazy";
 }) {
   const { t } = useI18n();
   return (
@@ -35,7 +37,7 @@ export function MapCard({
             src={map.image || "/images/example-map.webp"}
             alt={t("Terrain of {name}", { name: map.name })}
             fill
-            loading={index < 3 ? "eager" : "lazy"}
+            loading={loading ?? (index < 3 ? "eager" : "lazy")}
             unoptimized
             sizes="(max-width: 640px) 100vw, 33vw"
           />
@@ -48,8 +50,8 @@ export function MapCard({
       <div className="card-body">
         <span className="eyebrow">{map.server?.name || t("Overworld")}</span>
         <h3>
-          {map.name}
-          <ArrowUpRight size={20} />
+          <span title={map.name}>{map.name}</span>
+          <ArrowUpRight size={20} aria-hidden="true" />
         </h3>
         <p>{map.description}</p>
         {map.credit && (

components/PageLoading.tsx

@@ -0,0 +1,22 @@
+import { getI18n } from "@/lib/i18n";
+
+export async function PageLoading() {
+  const { t } = await getI18n();
+  return (
+    <main
+      className="section page-content route-loading"
+      aria-busy="true"
+      aria-label={t("Loading page")}
+    >
+      <p role="status" className="muted">
+        {t("Loading page")}…
+      </p>
+      <div className="loading-title loading-surface" aria-hidden="true" />
+      <div className="cards-grid" aria-hidden="true">
+        {[0, 1, 2].map((index) => (
+          <div className="loading-card loading-surface" key={index} />
+        ))}
+      </div>
+    </main>
+  );
+}

components/Shell.tsx

@@ -1,7 +1,7 @@
 import { getI18n } from "@/lib/i18n";
 import "server-only";
 import Link from "next/link";
-import { Compass, ArrowUpRight } from "lucide-react";
+import { Compass, ArrowUpRight, UserRound } from "lucide-react";
 import { LanguageSwitcher } from "./LanguageSwitcher";
 import { rawUser, admin, required } from "@/lib/supabase";
 import { canReviewMaps, isAdministrator } from "@/shared/permissions";
@@ -25,8 +25,19 @@ export async function Header() {
           <Link
             href={account ? "/dashboard" : "/log-in"}
             className="header-account"
+            aria-label={account ? t("My account") : t("Log in")}
           >
-            {account ? t("My account") : t("Log in")} <ArrowUpRight size={15} />
+            <UserRound
+              size={18}
+              className="account-symbol"
+              aria-hidden="true"
+            />
+            <span>{account ? t("My account") : t("Log in")}</span>{" "}
+            <ArrowUpRight
+              className="account-arrow"
+              size={15}
+              aria-hidden="true"
+            />
           </Link>
         </div>
       </div>

components/SiteNav.tsx

@@ -3,6 +3,8 @@ import { useI18n } from "@/components/I18nProvider";
 
 import Link from "next/link";
 import { usePathname } from "next/navigation";
+import { useEffect, useRef, useState } from "react";
+import { Menu, X } from "lucide-react";
 
 const links = [
   ["/servers", "Play & maps"],
@@ -17,26 +19,84 @@ const links = [
 export function SiteNav({ forumUrl }: { forumUrl?: string | null }) {
   const { t } = useI18n();
   const pathname = usePathname();
+  const [openPath, setOpenPath] = useState<string | null>(null);
+  const open = openPath === pathname;
+  const toggle = useRef<HTMLButtonElement>(null);
+  const navigation = useRef<HTMLElement>(null);
+  useEffect(() => {
+    if (!open) return;
+    function dismiss(event: PointerEvent) {
+      if (
+        event.target instanceof Node &&
+        !navigation.current?.contains(event.target) &&
+        !toggle.current?.contains(event.target)
+      )
+        setOpenPath(null);
+    }
+    function escape(event: KeyboardEvent) {
+      if (event.key === "Escape") {
+        setOpenPath(null);
+        toggle.current?.focus();
+      }
+    }
+    document.addEventListener("pointerdown", dismiss);
+    document.addEventListener("keydown", escape);
+    return () => {
+      document.removeEventListener("pointerdown", dismiss);
+      document.removeEventListener("keydown", escape);
+    };
+  }, [open]);
   return (
-    <nav aria-label={t("Main navigation")}>
-      {links.map(([href, label]) => (
+    <>
+      <button
+        ref={toggle}
+        type="button"
+        className="nav-toggle"
+        aria-label={open ? t("Close navigation") : t("Open navigation")}
+        aria-expanded={open}
+        aria-controls="site-navigation"
+        onClick={() => setOpenPath(open ? null : pathname)}
+      >
+        {open ? (
+          <X size={20} aria-hidden="true" />
+        ) : (
+          <Menu size={20} aria-hidden="true" />
+        )}
+      </button>
+      <nav
+        ref={navigation}
+        id="site-navigation"
+        className="site-navigation"
+        data-open={open}
+        aria-label={t("Main navigation")}
+      >
+        {links.map(([href, label]) => (
+          <Link
+            key={href}
+            href={href}
+            onClick={() => setOpenPath(null)}
+            aria-current={
+              pathname === href || pathname.startsWith(`${href}/`)
+                ? "page"
+                : undefined
+            }
+          >
+            {t(label)}
+          </Link>
+        ))}
+        {forumUrl && (
+          <a href={forumUrl} target="_blank" rel="noopener noreferrer">
+            {t("Forum")}
+          </a>
+        )}
         <Link
-          key={href}
-          href={href}
-          aria-current={
-            pathname === href || pathname.startsWith(`${href}/`)
-              ? "page"
-              : undefined
-          }
+          className="nav-support"
+          href={`/support?from=${encodeURIComponent(pathname)}`}
+          onClick={() => setOpenPath(null)}
         >
-          {t(label)}
+          {t("Report a bug")}
         </Link>
-      ))}
-      {forumUrl && (
-        <a href={forumUrl} target="_blank" rel="noopener noreferrer">
-          {t("Forum")}
-        </a>
-      )}
-    </nav>
+      </nav>
+    </>
   );
 }

components/SiteSettingsProvider.tsx

@@ -32,6 +32,7 @@ export function SiteSettingsProvider({
   const version = useRef(0);
   const pending = useRef(false);
   const pathname = usePathname();
+  const previousPathname = useRef(pathname);
   const updateSettings = useCallback((next: SiteSettings) => {
     version.current++;
     setSettings(next);
@@ -51,6 +52,9 @@ export function SiteSettingsProvider({
     }
   }, []);
   useEffect(() => {
+    // SSR already supplied fresh settings for the initial page.
+    if (previousPathname.current === pathname) return;
+    previousPathname.current = pathname;
     void refresh();
   }, [pathname, refresh]);
   useEffect(() => {