Skip to content

Commit 46c325f

Browse files
ProspectorProspector
authored
Envs v3 frontend (#4267)
* New envs frontend * lint fix * Add blog post, user-facing changes, dashboard warning, project page member warning, and migration reviewing. maybe some other misc stuff * lint * lint * ignore .data in .prettierignore * i18n as fuck * fix proj page * Improve news markdown rendering * improve phrasing of initial paragraph * Fix environments not reloading after save * index.ts instead of underscored name * shrink-0 back on these icons
1 parent 0ac4234 commit 46c325f

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

49 files changed

+2502
-390
lines changed

‎apps/frontend/.prettierignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
**/.nuxt
22
**/dist
33
**/.output
4+
**/.data
45
src/generated/**
56
src/locales/**
67
src/public/news/feed

‎apps/frontend/src/app.vue‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,10 +7,30 @@
77
</template>
88
<script setup lang="ts">
99
import { NotificationPanel, provideNotificationManager } from '@modrinth/ui'
10+
import { provideApi } from '@modrinth/ui/src/providers/api.ts'
11+
import { RestModrinthApi } from '@modrinth/utils'
1012
1113
import ModrinthLoadingIndicator from '~/components/ui/modrinth-loading-indicator.ts'
1214
1315
import { FrontendNotificationManager } from './providers/frontend-notifications.ts'
1416
1517
provideNotificationManager(new FrontendNotificationManager())
18+
19+
provideApi(
20+
new RestModrinthApi((url: string, options?: object) => {
21+
const match = url.match(/^\/v(\d+)\/(.+)$/)
22+
23+
if (match) {
24+
const apiVersion = Number(match[1])
25+
const path = match[2]
26+
27+
return useBaseFetch(path, {
28+
...options,
29+
apiVersion,
30+
}) as Promise<Response>
31+
} else {
32+
throw new Error('Invalid format')
33+
}
34+
}),
35+
)
1636
</script>

‎apps/frontend/src/assets/styles/layout.scss‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -42,6 +42,7 @@
4242
padding: 0 1.5rem;
4343

4444
grid-template:
45+
'header'
4546
'sidebar'
4647
'content'
4748
'info'

‎apps/frontend/src/components/ui/NavStackItem.vue‎

Lines changed: 21 additions & 73 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,18 @@
11
<template>
2-
<NuxtLink v-if="link !== null" class="nav-link button-base" :to="link">
3-
<div class="nav-content">
4-
<slot />
5-
<span>{{ label }}</span>
6-
<span v-if="beta" class="beta-badge">BETA</span>
7-
<span v-if="chevron" class="chevron"><ChevronRightIcon /></span>
8-
</div>
2+
<NuxtLink v-if="link !== null" :to="link" class="nav-item">
3+
<slot />
4+
<span>{{ label }}</span>
5+
<span v-if="badge" class="rounded-full bg-brand-highlight px-2 text-sm font-bold text-brand">{{
6+
badge
7+
}}</span>
8+
<span v-if="chevron" class="ml-auto"><ChevronRightIcon /></span>
99
</NuxtLink>
10-
<button
11-
v-else-if="action"
12-
class="nav-link button-base"
13-
:class="{ 'danger-button': danger }"
14-
@click="action"
15-
>
16-
<span class="nav-content">
17-
<slot />
18-
<span>{{ label }}</span>
19-
<span v-if="beta" class="beta-badge">BETA</span>
20-
</span>
10+
<button v-else-if="action" class="nav-item" :class="{ 'danger-button': danger }" @click="action">
11+
<slot />
12+
<span>{{ label }}</span>
13+
<span v-if="badge" class="rounded-full bg-brand-highlight px-2 text-sm font-bold text-brand">{{
14+
badge
15+
}}</span>
2116
</button>
2217
<span v-else>i forgor 💀</span>
2318
</template>
@@ -42,9 +37,9 @@ export default {
4237
required: true,
4338
type: String,
4439
},
45-
beta: {
46-
default: false,
47-
type: Boolean,
40+
badge: {
41+
default: null,
42+
type: String,
4843
},
4944
chevron: {
5045
default: false,
@@ -59,58 +54,11 @@ export default {
5954
</script>
6055

6156
<style lang="scss" scoped>
62-
.nav-link {
63-
font-weight: var(--font-weight-bold);
64-
background-color: transparent;
65-
color: var(--text-color);
66-
position: relative;
67-
display: flex;
68-
flex-direction: row;
69-
gap: 0.25rem;
70-
box-shadow: none;
71-
padding: 0;
72-
width: 100%;
73-
outline: none;
74-
75-
:where(.nav-link) {
76-
--text-color: var(--color-text);
77-
--background-color: var(--color-raised-bg);
78-
}
79-
80-
.nav-content {
81-
box-sizing: border-box;
82-
padding: 0.5rem 0.75rem;
83-
border-radius: var(--size-rounded-sm);
84-
display: flex;
85-
align-items: center;
86-
gap: 0.4rem;
87-
flex-grow: 1;
88-
background-color: var(--background-color);
89-
}
90-
91-
&:focus-visible {
92-
.nav-content {
93-
border-radius: 0.25rem;
94-
}
95-
}
96-
97-
&.router-link-exact-active {
98-
outline: 2px solid transparent;
99-
border-radius: 0.25rem;
100-
101-
.nav-content {
102-
color: var(--color-button-text-active);
103-
background-color: var(--color-button-bg);
104-
box-shadow: none;
105-
}
106-
}
107-
108-
.beta-badge {
109-
margin: 0;
110-
}
57+
.nav-item {
58+
@apply flex w-full cursor-pointer items-center gap-2 text-nowrap rounded-xl border-none bg-transparent px-4 py-2 text-left font-semibold text-button-text transition-all hover:bg-button-bg hover:text-contrast active:scale-[0.97];
59+
}
11160
112-
.chevron {
113-
margin-left: auto;
114-
}
61+
.router-link-exact-active.nav-item {
62+
@apply bg-button-bgSelected text-button-textSelected;
11563
}
11664
</style>

‎apps/frontend/src/components/ui/moderation/ModerationProjectNags.vue‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -7,17 +7,17 @@
77
</h2>
88
<div class="flex flex-row gap-2">
99
<div class="flex items-center gap-1">
10-
<AsteriskIcon class="size-4 text-red" />
10+
<AsteriskIcon class="size-4 shrink-0 text-red" />
1111
<span class="text-secondary">{{ getFormattedMessage(messages.required) }}</span>
1212
</div>
1313
|
1414
<div class="flex items-center gap-1">
15-
<TriangleAlertIcon class="size-4 text-orange" />
15+
<TriangleAlertIcon class="size-4 shrink-0 text-orange" />
1616
<span class="text-secondary">{{ getFormattedMessage(messages.warning) }}</span>
1717
</div>
1818
|
1919
<div class="flex items-center gap-1">
20-
<LightBulbIcon class="size-4 text-purple" />
20+
<LightBulbIcon class="size-4 shrink-0 text-purple" />
2121
<span class="text-secondary">{{ getFormattedMessage(messages.suggestion) }}</span>
2222
</div>
2323
</div>

‎apps/frontend/src/composables/featureFlags.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,8 @@ export const DEFAULT_FEATURE_FLAGS = validateValues({
3535
showProjectPageDownloadModalServersPromo: false,
3636
showProjectPageCreateServersTooltip: true,
3737
showProjectPageQuickServerButton: false,
38+
newProjectGeneralSettings: false,
39+
newProjectEnvironmentSettings: true,
3840
// advancedRendering: true,
3941
// externalLinksNewTab: true,
4042
// notUsingBlockers: false,

‎apps/frontend/src/composables/user.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -77,6 +77,7 @@ export const initUserProjects = async () => {
7777
if (auth.user && auth.user.id) {
7878
try {
7979
user.projects = await useBaseFetch(`user/${auth.user.id}/projects`)
80+
user.projectsV3 = await useBaseFetch(`user/${auth.user.id}/projects`, { apiVersion: 3 })
8081
} catch (err) {
8182
console.error(err)
8283
}

0 commit comments

Comments
 (0)