eightequal/AstralRinth
1
0
Fork 0
forked from didirus/AstralRinth
Code Pull Requests Activity

NormalPage component w/ Collections refactor (#4873)

Browse Source 
* Refactor search page, migrate to /discover/

* Add NormalPage component for common layouts, refactor Collections page as an example, misc ui pkg cleanup

* intl:extract

* lint

* lint

* remove old components

* Refactor search page, migrate to /discover/

* Add NormalPage component for common layouts, refactor Collections page as an example, misc ui pkg cleanup

* intl:extract

* lint

* lint

* remove old components
This commit is contained in:
Prospector
2025-12-09 14:44:10 -08:00
committed by GitHub
parent 1d64b2e22a
commit 0a8f489234
67 changed files with 1201 additions and 1771 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
apps/frontend/src/app.vue
View File

@@ -6,7 +6,12 @@
</NuxtLayout>
</template>
<script setup lang="ts">
import { NotificationPanel, provideModrinthClient, provideNotificationManager } from '@modrinth/ui'
import {
NotificationPanel,
provideModrinthClient,
provideNotificationManager,
providePageContext,
} from '@modrinth/ui'
import ModrinthLoadingIndicator from '~/components/ui/modrinth-loading-indicator.ts'
import { createModrinthClient } from '~/helpers/api.ts'
@@ -23,4 +28,8 @@ const client = createModrinthClient(auth, {
rateLimitKey: config.rateLimitKey,
})
provideModrinthClient(client)
providePageContext({
hierarchicalSidebarAvailable: ref(false),
showAds: ref(false),
})
</script>

54
apps/frontend/src/assets/styles/layout.scss
View File

@@ -135,21 +135,6 @@
'sidebar'
/ 100%;
.normal-page__ultimate-sidebar {
grid-area: ultimate-sidebar;
position: fixed;
bottom: 1rem;
right: 1rem;
z-index: 100;
max-width: calc(100% - 2rem);
max-height: calc(100vh - 2rem);
overflow-y: auto;
> div {
box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
}
}
@media screen and (min-width: 1024px) {
&.sidebar {
grid-template:
@@ -173,45 +158,6 @@
}
}
@media screen and (min-width: 1400px) {
&.ultimate-sidebar {
max-width: calc(80rem + 0.75rem + 600px);
grid-template:
'header header ultimate-sidebar' auto
'content sidebar ultimate-sidebar' auto
'content dummy ultimate-sidebar' 1fr
/ 1fr 18.75rem auto;
.normal-page__header {
max-width: 80rem;
}
.normal-page__ultimate-sidebar {
position: sticky;
top: 4.5rem;
bottom: unset;
right: unset;
z-index: unset;
align-self: start;
display: flex;
height: calc(100vh - 4.5rem * 2);
> div {
box-shadow: none;
}
}
&.alt-layout {
grid-template:
'ultimate-sidebar header header' auto
'ultimate-sidebar sidebar content' auto
'ultimate-sidebar dummy content' 1fr
/ auto 18.75rem 1fr;
}
}
}
.normal-page__sidebar {
grid-area: sidebar;
}

2
apps/frontend/src/assets/styles/tailwind.css
View File

@@ -1,3 +1,5 @@
@import '@modrinth/ui/src/styles/tailwind-utilities.css';
@tailwind base;
@tailwind components;
@tailwind utilities;

160
apps/frontend/src/components/ui/NavRow.vue
View File

@@ -1,160 +0,0 @@
<template>
<nav class="navigation">
<NuxtLink
v-for="(link, index) in filteredLinks"
v-show="link.shown === undefined ? true : link.shown"
:key="index"
ref="rowLinkElements"
:to="query ? (link.href ? `?${query}=${link.href}` : '?') : link.href"
class="nav-link button-animation"
>
<span>{{ link.label }}</span>
</NuxtLink>
<div
class="nav-indicator"
:style="{
left: positionToMoveX,
top: positionToMoveY,
width: sliderWidth,
opacity: activeIndex === -1 ? 0 : 1,
}"
aria-hidden="true"
></div>
</nav>
</template>
<script setup>
const route = useNativeRoute()
const props = defineProps({
links: {
default: () => [],
type: Array,
},
query: {
default: null,
type: String,
},
})
const sliderPositionX = ref(0)
const sliderPositionY = ref(18)
const selectedElementWidth = ref(0)
const activeIndex = ref(-1)
const oldIndex = ref(-1)
const filteredLinks = computed(() =>
props.links.filter((x) => (x.shown === undefined ? true : x.shown)),
)
const positionToMoveX = computed(() => `${sliderPositionX.value}px`)
const positionToMoveY = computed(() => `${sliderPositionY.value}px`)
const sliderWidth = computed(() => `${selectedElementWidth.value}px`)
function pickLink() {
activeIndex.value = props.query
? filteredLinks.value.findIndex(
(x) => (x.href === '' ? undefined : x.href) === route.path[props.query],
)
: filteredLinks.value.findIndex((x) => x.href === decodeURIComponent(route.path))
if (activeIndex.value !== -1) {
startAnimation()
} else {
oldIndex.value = -1
sliderPositionX.value = 0
selectedElementWidth.value = 0
}
}
const rowLinkElements = ref()
function startAnimation() {
const el = rowLinkElements.value[activeIndex.value].$el
if (!el || !el.offsetParent) return
sliderPositionX.value = el.offsetLeft
sliderPositionY.value = el.offsetTop + el.offsetHeight
selectedElementWidth.value = el.offsetWidth
}
onMounted(() => {
window.addEventListener('resize', pickLink)
pickLink()
})
onUnmounted(() => {
window.removeEventListener('resize', pickLink)
})
watch(route, () => pickLink())
</script>
<style lang="scss" scoped>
.navigation {
display: flex;
flex-direction: row;
align-items: center;
grid-gap: 1rem;
flex-wrap: wrap;
position: relative;
.nav-link {
text-transform: capitalize;
font-weight: var(--font-weight-bold);
color: var(--color-text);
position: relative;
&:hover {
color: var(--color-text);
&::after {
opacity: 0.4;
}
}
&:active::after {
opacity: 0.2;
}
&.router-link-exact-active {
color: var(--color-text);
&:not(:focus-visible) {
outline: 2px solid transparent;
outline-offset: 6px;
border-radius: 0.25rem;
}
&::after {
opacity: 1;
}
}
}
&.use-animation {
.nav-link {
&.is-active::after {
opacity: 0;
}
}
}
.nav-indicator {
position: absolute;
height: 0.25rem;
bottom: -5px;
left: 0;
width: 3rem;
transition: all ease-in-out 0.2s;
border-radius: var(--size-rounded-max);
background-color: var(--color-brand);
outline: 2px solid transparent;
outline-offset: -2px;
@media (prefers-reduced-motion) {
transition: none !important;
}
}
}
</style>

10
apps/frontend/src/components/ui/dashboard/CreatorTaxFormModal.vue
View File

@@ -158,12 +158,18 @@ import {
SpinnerIcon,
XIcon,
} from '@modrinth/assets'
import { Admonition, ButtonStyled, Chips, injectNotificationManager, NewModal } from '@modrinth/ui'
import {
Admonition,
ButtonStyled,
Chips,
injectNotificationManager,
NewModal,
normalizeChildren,
} from '@modrinth/ui'
import { defineMessages, useVIntl } from '@vintl/vintl'
import { IntlFormatted } from '@vintl/vintl/components'
import { type FormRequestResponse, useAvalara1099 } from '@/composables/avalara1099'
import { normalizeChildren } from '@/utils/vue-children.ts'
const props = withDefaults(
defineProps<{

2
apps/frontend/src/components/ui/dashboard/withdraw-stages/CompletionStage.vue
View File

@@ -124,6 +124,7 @@
</template>
<script setup lang="ts">
import { normalizeChildren } from '@modrinth/ui'
import { formatMoney } from '@modrinth/utils'
import { defineMessages, useVIntl } from '@vintl/vintl'
import { IntlFormatted } from '@vintl/vintl/components'
@@ -133,7 +134,6 @@ import ConfettiExplosion from 'vue-confetti-explosion'
import { type TremendousProviderData, useWithdrawContext } from '@/providers/creator-withdraw.ts'
import { getRailConfig } from '@/utils/muralpay-rails'
import { normalizeChildren } from '@/utils/vue-children.ts'
const { withdrawData } = useWithdrawContext()
const { formatMessage } = useVIntl()

9
apps/frontend/src/components/ui/dashboard/withdraw-stages/LegacyPaypalDetailsStage.vue
View File

@@ -104,7 +104,13 @@
<script setup lang="ts">
import { CheckIcon, PayPalColorIcon, SaveIcon, XIcon } from '@modrinth/assets'
import { ButtonStyled, Checkbox, financialMessages, formFieldLabels } from '@modrinth/ui'
import {
ButtonStyled,
Checkbox,
financialMessages,
formFieldLabels,
normalizeChildren,
} from '@modrinth/ui'
import { defineMessages, useVIntl } from '@vintl/vintl'
import { IntlFormatted } from '@vintl/vintl/components'
import { useDebounceFn } from '@vueuse/core'
@@ -114,7 +120,6 @@ import RevenueInputField from '@/components/ui/dashboard/RevenueInputField.vue'
import WithdrawFeeBreakdown from '@/components/ui/dashboard/WithdrawFeeBreakdown.vue'
import { getAuthUrl, removeAuthProvider, useAuth } from '@/composables/auth.js'
import { useWithdrawContext } from '@/providers/creator-withdraw.ts'
import { normalizeChildren } from '@/utils/vue-children.ts'
const { withdrawData, maxWithdrawAmount, availableMethods, calculateFees, saveStateToStorage } =
useWithdrawContext()

2
apps/frontend/src/components/ui/dashboard/withdraw-stages/MethodSelectionStage.vue
View File

@@ -84,6 +84,7 @@ import {
ButtonStyled,
Combobox,
injectNotificationManager,
normalizeChildren,
useDebugLogger,
} from '@modrinth/ui'
import { formatMoney } from '@modrinth/utils'
@@ -93,7 +94,6 @@ import { useGeolocation } from '@vueuse/core'
import { useCountries, useFormattedCountries, useUserCountry } from '@/composables/country.ts'
import { type PayoutMethod, useWithdrawContext } from '@/providers/creator-withdraw.ts'
import { normalizeChildren } from '@/utils/vue-children.ts'
const debug = useDebugLogger('MethodSelectionStage')
const {

2
apps/frontend/src/components/ui/dashboard/withdraw-stages/MuralpayDetailsStage.vue
View File

@@ -207,6 +207,7 @@ import {
financialMessages,
formFieldLabels,
formFieldPlaceholders,
normalizeChildren,
} from '@modrinth/ui'
import { defineMessages, useVIntl } from '@vintl/vintl'
import { IntlFormatted } from '@vintl/vintl/components'
@@ -224,7 +225,6 @@ import {
getCurrencyIcon,
} from '@/utils/finance-icons.ts'
import { getRailConfig } from '@/utils/muralpay-rails'
import { normalizeChildren } from '@/utils/vue-children.ts'
const { withdrawData, maxWithdrawAmount, availableMethods, calculateFees } = useWithdrawContext()
const { formatMessage } = useVIntl()

3
apps/frontend/src/components/ui/dashboard/withdraw-stages/TaxFormStage.vue
View File

@@ -74,14 +74,13 @@
<script setup lang="ts">
import { FileTextIcon } from '@modrinth/assets'
import { Admonition, ButtonStyled } from '@modrinth/ui'
import { Admonition, ButtonStyled, normalizeChildren } from '@modrinth/ui'
import { formatMoney } from '@modrinth/utils'
import { defineMessages, useVIntl } from '@vintl/vintl'
import { IntlFormatted } from '@vintl/vintl/components'
import { computed } from 'vue'
import { TAX_THRESHOLD_ACTUAL } from '@/providers/creator-withdraw.ts'
import { normalizeChildren } from '@/utils/vue-children.ts'
const props = defineProps<{
balance: any

2
apps/frontend/src/components/ui/dashboard/withdraw-stages/TremendousDetailsStage.vue
View File

@@ -181,6 +181,7 @@ import {
financialMessages,
formFieldLabels,
formFieldPlaceholders,
normalizeChildren,
paymentMethodMessages,
useDebugLogger,
} from '@modrinth/ui'
@@ -195,7 +196,6 @@ import WithdrawFeeBreakdown from '@/components/ui/dashboard/WithdrawFeeBreakdown
import { useAuth } from '@/composables/auth.js'
import { useBaseFetch } from '@/composables/fetch.js'
import { type PayoutMethod, useWithdrawContext } from '@/providers/creator-withdraw.ts'
import { normalizeChildren } from '@/utils/vue-children.ts'
const debug = useDebugLogger('TremendousDetailsStage')
const {

11
apps/frontend/src/error.vue
View File

@@ -52,7 +52,12 @@
<script setup>
import { SadRinthbot } from '@modrinth/assets'
import { NotificationPanel, provideModrinthClient, provideNotificationManager } from '@modrinth/ui'
import {
NotificationPanel,
provideModrinthClient,
provideNotificationManager,
providePageContext,
} from '@modrinth/ui'
import { defineMessage, useVIntl } from '@vintl/vintl'
import { IntlFormatted } from '@vintl/vintl/components'
@@ -73,6 +78,10 @@ const client = createModrinthClient(auth.value, {
rateLimitKey: config.rateLimitKey,
})
provideModrinthClient(client)
providePageContext({
hierarchicalSidebarAvailable: ref(false),
showAds: ref(false),
})
const { formatMessage } = useVIntl()

42
apps/frontend/src/locales/en-US/index.json
View File

@@ -365,20 +365,26 @@
"auth.welcome.title": {
"message": "Welcome"
},
"collection.button.delete-icon": {
"message": "Delete icon"
},
"collection.button.edit-icon": {
"message": "Edit icon"
},
"collection.button.remove-icon": {
"message": "Remove icon"
},
"collection.button.remove-project": {
"message": "Remove project"
},
"collection.button.replace-icon": {
"message": "Replace icon"
},
"collection.button.select-icon": {
"message": "Select icon"
},
"collection.button.unfollow-project": {
"message": "Unfollow project"
},
"collection.delete-modal.description": {
"message": "This will remove this collection forever. This action cannot be undone."
"message": "This will permanently delete this collection. This action cannot be undone."
},
"collection.delete-modal.title": {
"message": "Are you sure you want to delete this collection?"
@@ -389,33 +395,39 @@
"collection.description.following": {
"message": "Auto-generated collection of all the projects you're following."
},
"collection.editing": {
"message": "Editing collection"
},
"collection.error.not-found": {
"message": "Collection not found"
},
"collection.label.collection": {
"message": "Collection"
},
"collection.label.created-at": {
"message": "Created {ago}"
},
"collection.label.curated-by": {
"message": "Curated by"
},
"collection.label.description": {
"message": "Description"
},
"collection.label.details": {
"message": "Details"
},
"collection.label.no-projects": {
"message": "This collection has no projects!"
},
"collection.label.no-projects-auth": {
"message": "You don't have any projects.\nWould you like to <create-link>add one</create-link>?"
},
"collection.label.owner": {
"message": "Owner"
"message": "No projects in collection yet"
},
"collection.label.projects-count": {
"message": "{count, plural, one {<stat>{count}</stat> project} other {<stat>{count}</stat> projects}}"
"message": "{count, plural, =0 {No projects yet} one {<stat>{count}</stat> project} other {<stat>{count}</stat> {type}}}"
},
"collection.label.updated-at": {
"message": "Updated {ago}"
},
"collection.return-link.dashboard-collections": {
"message": "Your collections"
},
"collection.return-link.user": {
"message": "{user}'s profile"
},
"collection.title": {
"message": "{name} - Collection"
},

9
apps/frontend/src/pages/auth/authorize.vue
View File

@@ -81,13 +81,18 @@
<script setup>
import { CheckIcon, XIcon } from '@modrinth/assets'
import { Avatar, Button, commonMessages, injectNotificationManager } from '@modrinth/ui'
import {
Avatar,
Button,
commonMessages,
injectNotificationManager,
normalizeChildren,
} from '@modrinth/ui'
import { IntlFormatted } from '@vintl/vintl/components'
import { useAuth } from '@/composables/auth.js'
import { useScopes } from '@/composables/auth/scopes.ts'
import { useBaseFetch } from '@/composables/fetch.js'
import { normalizeChildren } from '@/utils/vue-children.ts'
const { addNotification } = injectNotificationManager()
const { formatMessage } = useVIntl()

4
apps/frontend/src/pages/auth/welcome.vue
View File

@@ -49,11 +49,9 @@
<script setup>
import { RightArrowIcon, WavingRinthbot } from '@modrinth/assets'
import { Checkbox, commonMessages } from '@modrinth/ui'
import { Checkbox, commonMessages, normalizeChildren } from '@modrinth/ui'
import { IntlFormatted } from '@vintl/vintl/components'
import { normalizeChildren } from '@/utils/vue-children.ts'
const route = useRoute()
const { formatMessage } = useVIntl()

1115
apps/frontend/src/pages/collection/[id].vue
View File

File diff suppressed because it is too large Load Diff

13
apps/frontend/src/pages/dashboard/collections.vue
View File

@@ -27,7 +27,7 @@
:to="`/collection/following`"
class="universal-card recessed collection"
>
<Avatar src="https://cdn.modrinth.com/follow-collection.png" class="icon" />
<Avatar src="https://cdn.modrinth.com/follow-collection.png" size="64px" />
<div class="details">
<span class="title">{{ formatMessage(commonMessages.followedProjectsLabel) }}</span>
<span class="description">
@@ -57,7 +57,7 @@
:to="`/collection/${collection.id}`"
class="universal-card recessed collection"
>
<Avatar :src="collection.icon_url" class="icon" />
<Avatar :src="collection.icon_url" size="64px" />
<div class="details">
<span class="title">{{ collection.name }}</span>
<span class="description">
@@ -188,15 +188,6 @@ const orderedCollections = computed(() => {
gap: var(--gap-md);
margin-bottom: 0;
.icon {
width: 100% !important;
height: 6rem !important;
max-width: unset !important;
max-height: unset !important;
aspect-ratio: 1 / 1;
object-fit: cover;
}
.details {
display: flex;
flex-direction: column;

3
apps/frontend/src/pages/settings/index.vue
View File

@@ -205,12 +205,11 @@
<script setup lang="ts">
import { CodeIcon, RadioButtonCheckedIcon, RadioButtonIcon } from '@modrinth/assets'
import { Button, injectNotificationManager, ThemeSelector } from '@modrinth/ui'
import { Button, injectNotificationManager, normalizeChildren, ThemeSelector } from '@modrinth/ui'
import { formatProjectType } from '@modrinth/utils'
import { defineMessages, useVIntl } from '@vintl/vintl'
import { IntlFormatted } from '@vintl/vintl/components'
import { normalizeChildren } from '@/utils/vue-children.ts'
import MessageBanner from '~/components/ui/MessageBanner.vue'
import type { DisplayLocation } from '~/plugins/cosmetics'
import { isDarkTheme, type Theme } from '~/plugins/theme/index.ts'

4
apps/frontend/src/pages/user/[id].vue
View File

@@ -276,7 +276,7 @@
</ContentPageHeader>
</div>
<div class="normal-page__content">
<div v-if="navLinks.length >= 2" class="mb-4 max-w-full overflow-x-auto">
<div v-if="navLinks.length > 2" class="mb-4 max-w-full overflow-x-auto">
<NavTabs :links="navLinks" />
</div>
<div v-if="projects.length > 0">
@@ -352,7 +352,7 @@
class="card collection-item"
>
<div class="collection">
<Avatar :src="collection.icon_url" class="icon" />
<Avatar :src="collection.icon_url" size="64px" />
<div class="details">
<h2 class="title">{{ collection.name }}</h2>
<div class="stats">

25
apps/frontend/src/utils/vue-children.ts
View File

@@ -1,25 +0,0 @@
import { createTextVNode, isVNode, toDisplayString, type VNode } from 'vue'
/**
* Checks whether a specific child is a VNode. If not, converts it to a display
* string and then creates text VNode for the result.
*
* @param child Child to normalize.
* @returns Either the original VNode or a text VNode containing child converted
* to a display string.
*/
function normalizeChild(child: any): VNode {
return isVNode(child) ? child : createTextVNode(toDisplayString(child))
}
/**
* Takes in an array of VNodes and other children. It then converts each child
* that is not already a VNode to a display string, and creates a text VNode for
* that string.
*
* @param children Children to normalize.
* @returns Children with all of non-VNodes converted to display strings.
*/
export function normalizeChildren(children: any | any[]): VNode[] {
return Array.isArray(children) ? children.map(normalizeChild) : [normalizeChild(children)]
}