fix: keep video downloads visible while playing

src/layouts/PublicLayout.tsx

@@ -4,6 +4,7 @@ import { Link, Outlet, useLocation, useNavigate } from "react-router-dom";
 import { ArkLogoMark } from "../components/ArkLogoMark";
 import { useI18n, type Lang } from "../i18n";
 import { LANG_OPTIONS } from "../i18nLanguages";
+import { isPopularTag, popularTagParam } from "../utils/popularTag";
 
 type PublicNavWhich =
   | "home"
@@ -20,6 +21,7 @@ function navIsActive(
   search: string,
   hash: string,
   which: PublicNavWhich,
+  currentLang: Lang,
 ): boolean {
   const sp = new URLSearchParams(search);
   switch (which) {
@@ -37,7 +39,9 @@ function navIsActive(
     case "browseRecommended":
       return pathname === "/official-recommendations";
     case "browsePopular":
-      return pathname === "/browse" && sp.get("sort") === "popular";
+      return (
+        pathname === "/browse" && isPopularTag(sp.get("tag") || "", currentLang)
+      );
     case "favorites":
       return (
         pathname === "/favorites" || (pathname === "/" && hash === "#favorites")
@@ -273,9 +277,10 @@ export function PublicLayout() {
   const nav = useNavigate();
 
   const na = (which: PublicNavWhich) =>
-    navIsActive(pathname, search, hash, which);
+    navIsActive(pathname, search, hash, which, lang);
   const isHome = pathname === "/";
   const footerInContentFlow = pathname === "/browse";
+  const popularHref = `/browse?tag=${popularTagParam(lang)}`;
 
   const goSearch = () => {
     const s = q.trim();
@@ -416,7 +421,7 @@ export function PublicLayout() {
                 {t("latest")}
               </Link>
               <Link
-                to="/browse?sort=popular"
+                to={popularHref}
                 className={navClassName(na("browsePopular"))}
                 aria-current={na("browsePopular") ? "page" : undefined}
               >
@@ -518,7 +523,7 @@ export function PublicLayout() {
               {t("latest")}
             </Link>
             <Link
-              to="/browse?sort=popular"
+              to={popularHref}
               className={navClassName(na("browsePopular"))}
               aria-current={na("browsePopular") ? "page" : undefined}
               onClick={() => setOpen(false)}
@@ -593,12 +598,12 @@ export function PublicLayout() {
             active={na("favorites")}
           />
           <BottomNavIcon
-            to="/browse?sort=popular"
+            to={popularHref}
             label={t("popular")}
             icon="update"
             active={
               pathname === "/browse" &&
-              new URLSearchParams(search).get("sort") === "popular"
+              new URLSearchParams(search).get("tag") === "popular"
             }
           />
         </div>