feat: separate popular browse navigation

src/pages/Browse/index.tsx

@@ -7,10 +7,20 @@ export function Browse() {
   const { t } = useI18n();
   const [sp] = useSearchParams();
   const q = sp.get("q") || "";
+  const sort = sp.get("sort") || "";
+  const title = q
+    ? `${t("search")}: ${q}`
+    : sort === "latest"
+      ? t("latest")
+      : sort === "popular"
+        ? t("popular")
+        : sort === "recommended"
+          ? t("official")
+          : t("all");
   return (
     <section>
       <div className="mx-auto max-w-full px-4 md:max-w-[820px] lg:max-w-[1080px] xl:max-w-[1180px]">
-        <SectionHeader title={q ? `${t("search")}: ${q}` : t("all")} />
+        <SectionHeader title={title} />
       </div>
       <MessageStream scope={{ kind: "all" }} />
     </section>