feat(download): Enhance download functionality by adding mobile OS detection and updating UI components accordingly

This commit is contained in:
Anish Sarkar 2026-06-04 11:48:44 +05:30
parent e588782a9b
commit 2a13b3777a
3 changed files with 31 additions and 8 deletions

View file

@ -351,9 +351,24 @@ function GetStartedButton() {
}
function DownloadButton() {
const { os, primary, alternatives } = usePrimaryDownload();
const { os, primary, alternatives, isMobileOS } = usePrimaryDownload();
const fallbackUrl = GITHUB_RELEASES_URL;
const mobileDisabledLabel = "Desktop app unavailable on mobile";
if (isMobileOS) {
return (
<Button
type="button"
variant="ghost"
disabled
className="h-14 w-full gap-2 rounded-lg border border-neutral-200 bg-white text-center text-base font-medium text-neutral-700 shadow-sm transition duration-150 sm:w-auto sm:px-6 dark:border-neutral-700 dark:bg-neutral-900 dark:text-neutral-200"
>
<Download className="size-4" />
{mobileDisabledLabel}
</Button>
);
}
if (!primary) {
return (

View file

@ -139,14 +139,14 @@ export function SidebarUserProfile({
const { locale, setLocale } = useLocaleContext();
const { isDesktop } = usePlatform();
const isDesktopViewport = useMediaQuery("(min-width: 768px)");
const { os, primary } = usePrimaryDownload();
const { os, primary, isMobileOS } = usePrimaryDownload();
const [isLoggingOut, setIsLoggingOut] = useState(false);
const bgColor = getUserAvatarColor(user.email);
const initials = getUserInitials(user.email);
const displayName = user.name || user.email.split("@")[0];
const downloadUrl = primary?.url ?? GITHUB_RELEASES_URL;
const downloadLabel = t("download_for_os", { os });
const showDownloadCta = !isDesktop && isDesktopViewport;
const showDownloadCta = !isDesktop && !isMobileOS && isDesktopViewport;
const handleLanguageChange = (newLocale: "en" | "es" | "pt" | "hi" | "zh") => {
setLocale(newLocale);
@ -331,7 +331,7 @@ export function SidebarUserProfile({
</DropdownMenuPortal>
</DropdownMenuSub>
{!isDesktop && (
{!isDesktop && !isMobileOS && (
<DropdownMenuItem asChild className="font-medium">
<a href={downloadUrl} target="_blank" rel="noopener noreferrer">
<Download className="h-4 w-4" strokeWidth={2.5} />

View file

@ -1,7 +1,7 @@
import { useEffect, useMemo, useState } from "react";
export type OSInfo = {
os: "macOS" | "Windows" | "Linux";
os: "macOS" | "Windows" | "Linux" | "Android" | "iOS";
arch: "arm64" | "x64";
};
@ -12,7 +12,13 @@ export function useUserOS(): OSInfo {
let os: OSInfo["os"] = "macOS";
let arch: OSInfo["arch"] = "x64";
if (/Windows/i.test(ua)) {
if (/Android/i.test(ua)) {
os = "Android";
arch = "arm64";
} else if (/iPhone|iPad|iPod/i.test(ua)) {
os = "iOS";
arch = "arm64";
} else if (/Windows/i.test(ua)) {
os = "Windows";
arch = "x64";
} else if (/Linux/i.test(ua)) {
@ -88,9 +94,11 @@ export const GITHUB_RELEASES_URL = "https://github.com/MODSetter/SurfSense/relea
export function usePrimaryDownload() {
const { os, arch } = useUserOS();
const assets = useLatestRelease();
const isMobileOS = os === "Android" || os === "iOS";
const { primary, alternatives } = useMemo(() => {
if (assets.length === 0) return { primary: null, alternatives: [] };
if (isMobileOS) return { primary: null, alternatives: assets };
const matchers: Record<string, (n: string) => boolean> = {
Windows: (n) => n.endsWith(".exe"),
@ -102,7 +110,7 @@ export function usePrimaryDownload() {
const primary = assets.find((a) => match(a.name)) ?? null;
const alternatives = assets.filter((a) => a !== primary);
return { primary, alternatives };
}, [assets, os, arch]);
}, [assets, os, arch, isMobileOS]);
return { os, arch, assets, primary, alternatives };
return { os, arch, assets, primary, alternatives, isMobileOS };
}