From 772e0ee22099c81691bba0eb18bedd4d4a7fe8d6 Mon Sep 17 00:00:00 2001
From: Prospector <6166773+Prospector@users.noreply.github.com>
Date: Thu, 22 Jan 2026 11:36:56 -0800
Subject: [PATCH] Update app download page to use flathub (#5188)
---
apps/frontend/src/locales/en-US/index.json | 15 +++-
apps/frontend/src/pages/app.vue | 72 +++++++++++++------
packages/assets/external/flathub.svg | 7 ++
packages/assets/index.ts | 2 +
packages/ui/src/components/base/Accordion.vue | 2 +-
5 files changed, 73 insertions(+), 25 deletions(-)
create mode 100644 packages/assets/external/flathub.svg
diff --git a/apps/frontend/src/locales/en-US/index.json b/apps/frontend/src/locales/en-US/index.json
index 01a50b0f..f93f38a9 100644
--- a/apps/frontend/src/locales/en-US/index.json
+++ b/apps/frontend/src/locales/en-US/index.json
@@ -23,6 +23,9 @@
"app-marketing.download.download-rpm": {
"message": "Download the RPM"
},
+ "app-marketing.download.flathub": {
+ "message": "Get it on Flathub"
+ },
"app-marketing.download.linux": {
"message": "Linux"
},
@@ -38,9 +41,6 @@
"app-marketing.download.terms": {
"message": "By downloading Modrinth App you agree to our Terms and Privacy Policy."
},
- "app-marketing.download.third-party-packages": {
- "message": "Third-party packages"
- },
"app-marketing.download.title": {
"message": "Download Modrinth App (Beta)"
},
@@ -197,6 +197,15 @@
"app-marketing.hero.more-download-options": {
"message": "More Download Options"
},
+ "app-marketing.hide-other-packages": {
+ "message": "Hide other packages"
+ },
+ "app-marketing.not-recommended": {
+ "message": "We don't recommend you use these unless you know what you're doing."
+ },
+ "app-marketing.show-other-packages": {
+ "message": "Show other packages"
+ },
"auth.authorize.action.authorize": {
"message": "Authorize"
},
diff --git a/apps/frontend/src/pages/app.vue b/apps/frontend/src/pages/app.vue
index 6b6bfe80..d089377a 100644
--- a/apps/frontend/src/pages/app.vue
+++ b/apps/frontend/src/pages/app.vue
@@ -3,12 +3,14 @@ import {
BoxIcon,
DownloadIcon,
EditIcon,
- LinkIcon,
+ FlathubIcon,
+ IssuesIcon,
SearchIcon,
SendIcon,
TrashIcon,
} from '@modrinth/assets'
import {
+ Accordion,
Avatar,
Badge,
Checkbox,
@@ -452,6 +454,22 @@ const messages = defineMessages({
id: 'app-marketing.download.download-beta',
defaultMessage: 'Download the beta',
},
+ getItOnFlathub: {
+ id: 'app-marketing.download.flathub',
+ defaultMessage: 'Get it on Flathub',
+ },
+ showOtherPackages: {
+ id: 'app-marketing.show-other-packages',
+ defaultMessage: 'Show other packages',
+ },
+ hideOtherPackages: {
+ id: 'app-marketing.hide-other-packages',
+ defaultMessage: 'Hide other packages',
+ },
+ notRecommended: {
+ id: 'app-marketing.not-recommended',
+ defaultMessage: `We don't recommend you use these unless you know what you're doing.`,
+ },
downloadTheAppImage: {
id: 'app-marketing.download.download-appimage',
defaultMessage: 'Download the AppImage',
@@ -464,10 +482,6 @@ const messages = defineMessages({
id: 'app-marketing.download.download-rpm',
defaultMessage: 'Download the RPM',
},
- thirdPartyPackages: {
- id: 'app-marketing.download.third-party-packages',
- defaultMessage: 'Third-party packages',
- },
downloadTerms: {
id: 'app-marketing.download.terms',
defaultMessage:
@@ -1156,22 +1170,34 @@ useSeoMeta({
@@ -2148,13 +2174,17 @@ useSeoMeta({
a {
display: flex;
- align-items: flex-start;
+ align-items: center;
gap: var(--gap-sm);
justify-content: center;
&:hover {
cursor: pointer;
}
+
+ span {
+ text-align: left;
+ }
}
&.apple {
diff --git a/packages/assets/external/flathub.svg b/packages/assets/external/flathub.svg
new file mode 100644
index 00000000..701550c1
--- /dev/null
+++ b/packages/assets/external/flathub.svg
@@ -0,0 +1,7 @@
+
diff --git a/packages/assets/index.ts b/packages/assets/index.ts
index fd299ed6..e16578bd 100644
--- a/packages/assets/index.ts
+++ b/packages/assets/index.ts
@@ -39,6 +39,7 @@ import _VenmoColorIcon from './external/color/venmo.svg?component'
import _CurseForgeIcon from './external/curseforge.svg?component'
import _DiscordIcon from './external/discord.svg?component'
import _FacebookIcon from './external/facebook.svg?component'
+import _FlathubIcon from './external/flathub.svg?component'
import _GithubIcon from './external/github.svg?component'
import _MinecraftServerIcon from './external/illustrations/minecraft_server_icon.png?url'
import _InstagramIcon from './external/instagram.svg?component'
@@ -93,6 +94,7 @@ export const GithubIcon = _GithubIcon
export const CurseForgeIcon = _CurseForgeIcon
export const DiscordIcon = _DiscordIcon
export const FacebookIcon = _FacebookIcon
+export const FlathubIcon = _FlathubIcon
export const InstagramIcon = _InstagramIcon
export const SnapchatIcon = _SnapchatIcon
export const ReelsIcon = _ReelsIcon
diff --git a/packages/ui/src/components/base/Accordion.vue b/packages/ui/src/components/base/Accordion.vue
index a0cc8a64..506cdee6 100644
--- a/packages/ui/src/components/base/Accordion.vue
+++ b/packages/ui/src/components/base/Accordion.vue
@@ -7,7 +7,7 @@
>
-
+