feat(download): enhance mobile download experience with platform detection and redirection

Signed-off-by: Innei <tukon479@gmail.com>

apps/desktop/layer/renderer/src/modules/download/index.tsx

@@ -1,12 +1,32 @@
 import { Folo } from "@follow/components/icons/folo.jsx"
 import { Logo } from "@follow/components/icons/logo.jsx"
 import { Button } from "@follow/components/ui/button/index.js"
+import { APP_STORE_URLS } from "@follow/constants"
+import { getMobilePlatform, isMobileDevice } from "@follow/utils"
+import { useEffect } from "react"
 
 export function DownloadPage() {
   const openDownloadPage = () => {
     window.open("https://folo.is/download", "_blank", "noopener,noreferrer")
   }
 
+  const mobilePlatform = getMobilePlatform()
+  const isMobile = isMobileDevice()
+
+  useEffect(() => {
+    if (isMobile && mobilePlatform && APP_STORE_URLS[mobilePlatform]) {
+      window.location.href = APP_STORE_URLS[mobilePlatform]
+    }
+  }, [isMobile, mobilePlatform])
+
+  const handleMobileDownload = () => {
+    if (mobilePlatform && APP_STORE_URLS[mobilePlatform]) {
+      window.location.href = APP_STORE_URLS[mobilePlatform]
+    } else {
+      openDownloadPage()
+    }
+  }
+
   return (
     <div className="bg-background flex min-h-screen flex-col items-center justify-center px-6">
       {/* Logo Section */}
@@ -22,18 +42,30 @@ export function DownloadPage() {
       <div className="w-full max-w-xs space-y-6 text-center">
         <div>
           <h1 className="text-text mb-3 text-xl font-semibold">Download Folo</h1>
-          <p className="text-text-secondary text-sm">Get the mobile app for the best experience</p>
+          <p className="text-text-secondary text-sm">
+            {isMobile
+              ? mobilePlatform
+                ? `Get the ${mobilePlatform} app for the best experience`
+                : "Get the mobile app for the best experience"
+              : "Get the mobile app for the best experience"}
+          </p>
         </div>
 
         {/* Download Button */}
-        <Button onClick={openDownloadPage}>
+        <Button onClick={isMobile ? handleMobileDownload : openDownloadPage}>
           <i className="i-mgc-download-2-cute-re mr-2 text-lg" />
-          Go to Download Page
+          <span>
+            {isMobile && mobilePlatform ? `Download for ${mobilePlatform}` : "Go to Download Page"}
+          </span>
         </Button>
 
         {/* Hint */}
         <p className="text-text-tertiary text-xs">
-          Available for iOS, Android, Windows, macOS & Linux
+          {isMobile
+            ? mobilePlatform
+              ? `Redirecting to ${mobilePlatform === "iOS" ? "App Store" : "Google Play"}...`
+              : "Available for iOS, Android, Windows, macOS & Linux"
+            : "Available for iOS, Android, Windows, macOS & Linux"}
         </p>
       </div>
     </div>

packages/internal/constants/src/app.ts

@@ -1 +1,7 @@
 export const APPLE_APP_STORE_ID = "6739802604"
+export const GOOGLE_PLAY_PACKAGE_ID = "is.follow"
+
+export const APP_STORE_URLS = {
+  iOS: `https://apps.apple.com/us/app/folo-follow-everything/id${APPLE_APP_STORE_ID}`,
+  Android: `https://play.google.com/store/apps/details?id=${GOOGLE_PLAY_PACKAGE_ID}`,
+} as const

packages/internal/utils/src/utils.ts

@@ -476,3 +476,15 @@ export function formatNumber(num: number): string {
 
   return `${isNegative ? "-" : ""}${absNum}`
 }
+
+export type MobilePlatform = "iOS" | "Android" | null
+
+export const getMobilePlatform = once((): MobilePlatform => {
+  const os = getOS()
+
+  return ["iOS", "Android"].includes(os) ? (os as MobilePlatform) : null
+})
+
+export const isMobileDevice = once((): boolean => {
+  return getMobilePlatform() !== null
+})