feat: support mobile video previews

src/components/PopularRankList.tsx

@@ -15,6 +15,7 @@ import { useState } from "react";
 import { useNavigate } from "react-router-dom";
 import { assetUrl, type Category } from "../api";
 import { useI18n } from "../i18n";
+import { useLocalizedPath } from "../useLocalizedPath";
 import { resourceTypeLabel } from "../resourceTypeLabels";
 import { cleanCategoryDisplayName } from "../utils/categoryDisplay";
 import { formatDateYmd } from "../utils/format";
@@ -91,6 +92,7 @@ function PopularRankRow({
 }) {
   const { t, lang } = useI18n();
   const navigate = useNavigate();
+  const lp = useLocalizedPath();
   const { showToast } = useToast();
   const [isDownloading, setIsDownloading] = useState(false);
   const [coverFailed, setCoverFailed] = useState(false);
@@ -120,7 +122,9 @@ function PopularRankRow({
       <button
         type="button"
         onClick={() =>
-          navigate(`/browse?sort=popular&post=${encodeURIComponent(post.id)}`)
+          navigate(
+            lp(`/browse?sort=popular&post=${encodeURIComponent(post.id)}`),
+          )
         }
         aria-label={r.title}
         className="absolute inset-0 z-0 rounded-2xl outline-none focus-visible:ring-2 focus-visible:ring-ark-gold/70"