apunkt/SurfSense
1
0
Fork 0
mirror of https://github.com/MODSetter/SurfSense.git synced 2026-06-06 20:15:17 +02:00
Code Issues Projects Releases Packages Wiki Activity

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

Browse source
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
Download patch file Download diff file Expand all files Collapse all files

17
surfsense_web/components/homepage/hero-section.tsx
View file

@ -351,9 +351,24 @@ function GetStartedButton() {
} }
function DownloadButton() { function DownloadButton() {
const { os, primary, alternatives } = usePrimaryDownload(); const { os, primary, alternatives, isMobileOS } = usePrimaryDownload();
const fallbackUrl = GITHUB_RELEASES_URL; 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) { if (!primary) {
return ( return (

6
surfsense_web/components/layout/ui/sidebar/SidebarUserProfile.tsx
View file

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

16
surfsense_web/lib/desktop-download-utils.ts
View file

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