fix: align official recommendations behavior

src/pages/Browse.tsx

@@ -53,13 +53,40 @@ export function Browse() {
 
   useEffect(() => {
     setErr(null);
+
+    if (sort === "recommended") {
+      const p = new URLSearchParams();
+      p.set("lang", lang);
+      p.set("limit", "100");
+
+      getJSON<{ items: Resource[] }>(`/api/resources/recommended?${p}`)
+        .then((r) => {
+          const tagLower = tag.toLowerCase();
+          const officialItems = itemsOrEmpty(r.items)
+            .filter((item) => item.isRecommended)
+            .filter((item) => type === "all" || item.type === type)
+            .filter((item) => !resourceLang || item.language === resourceLang)
+            .filter(
+              (item) =>
+                !tagLower ||
+                item.tags?.some(
+                  (itemTag) => itemTag.toLowerCase() === tagLower,
+                ),
+            );
+          setTotal(officialItems.length);
+          setItems(officialItems.slice((page - 1) * limit, page * limit));
+        })
+        .catch((e) => setErr(String(e)));
+      return;
+    }
+
     getJSON<{ items: Resource[]; total?: number }>(`/api/resources?${query}`)
       .then((r) => {
         setItems(itemsOrEmpty(r.items));
         setTotal(typeof r.total === "number" ? r.total : 0);
       })
       .catch((e) => setErr(String(e)));
-  }, [query]);
+  }, [lang, limit, page, query, resourceLang, sort, tag, type]);
 
   const setPage = (next: number) => {
     const n = new URLSearchParams(sp);