Update app download page to use flathub (#5188)

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-link>Terms</terms-link> and <privacy-link>Privacy Policy</privacy-link>."
   },
-  "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"
   },

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({
 						</div>
 					</div>
 					<div class="description apple">
-						<a :href="linuxLinks.appImage || undefined" download="">
+						<a href="https://flathub.org/en/apps/com.modrinth.ModrinthApp" target="_blank">
-							<DownloadIcon />
+							<FlathubIcon />
-							<span>{{ formatMessage(messages.downloadTheAppImage) }}</span>
+							<span>{{ formatMessage(messages.getItOnFlathub) }}</span>
-						</a>
-						<a :href="linuxLinks.deb || undefined" download="">
-							<DownloadIcon />
-							<span>{{ formatMessage(messages.downloadTheDEB) }}</span>
-						</a>
-						<a :href="linuxLinks.rpm || undefined" download="">
-							<DownloadIcon />
-							<span>{{ formatMessage(messages.downloadTheRPM) }}</span>
-						</a>
-						<a :href="linuxLinks.thirdParty || undefined" download="">
-							<LinkIcon />
-							<span>{{ formatMessage(messages.thirdPartyPackages) }}</span>
 						</a>
+						<Accordion
+							class="mt-2 flex flex-col"
+							content-class="flex flex-col items-start gap-2 mt-2 text-sm"
+							button-class="text-sm text-secondary bg-transparent p-0 w-fit text-left m-0 active:scale-[0.98] transition-transform"
+						>
+							<template #title="{ open }">
+								{{ formatMessage(open ? messages.hideOtherPackages : messages.showOtherPackages) }}
+							</template>
+							<span class="grid grid-cols-[auto_1fr] gap-2 text-left text-orange"
+								><IssuesIcon class="mt-1" /> {{ formatMessage(messages.notRecommended) }}</span
+							>
+							<a :href="linuxLinks.appImage || undefined" download="" class="text-primary">
+								<DownloadIcon />
+								<span>{{ formatMessage(messages.downloadTheAppImage) }}</span>
+							</a>
+							<a :href="linuxLinks.deb || undefined" download="" class="text-primary">
+								<DownloadIcon />
+								<span>{{ formatMessage(messages.downloadTheDEB) }}</span>
+							</a>
+							<a :href="linuxLinks.rpm || undefined" download="" class="text-primary">
+								<DownloadIcon />
+								<span>{{ formatMessage(messages.downloadTheRPM) }}</span>
+							</a>
+						</Accordion>
 					</div>
 				</div>
 			</div>
@@ -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 {

packages/assets/external/flathub.svg

@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0.04 -1.13 62.99 60.24">
+	<g fill="currentColor" stroke-width="1.123" transform="matrix(1.56993 0 0 1.56993 -247.445 -135.95)">
+		<circle cx="166.69" cy="95.647" r="9.048"/>
+		<rect width="15.875" height="15.875" x="158.75" y="108.33" rx="4.233" ry="4.233"/>
+		<path d="m195.534 93.49-1.622-.938-9.339-5.391a2.572 2.572 0 0 0-3.857 2.227v12.657a2.572 2.572 0 0 0 3.858 2.227l10.96-6.328a2.572 2.572 0 0 0 0-4.455zM194.99 116.31c0 .88-.708 1.587-1.587 1.587h-12.7c-.88 0-1.588-.708-1.588-1.587 0-.88.708-1.588 1.587-1.588h12.7c.88 0 1.588.709 1.588 1.588zm-7.938-7.938c.88 0 1.588.709 1.588 1.588v12.7c0 .88-.708 1.587-1.587 1.587-.88 0-1.588-.708-1.588-1.587v-12.7c0-.88.708-1.587 1.587-1.587z"/>
+	</g>
+</svg>

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

packages/ui/src/components/base/Accordion.vue

@@ -7,7 +7,7 @@
 		>
 			<slot name="button" :open="isOpen">
 				<div class="flex items-center gap-1 w-full">
-					<slot name="title" />
+					<slot name="title" :open="isOpen" />
 					<DropdownIcon
 						v-if="!forceOpen"
 						class="ml-auto size-5 transition-transform duration-300 shrink-0"