mirror of
https://github.com/modrinth/code.git
synced 2026-09-04 22:10:15 +00:00
feat: app onboarding and library (#6923)
* refactor: remove unused legacy onboarded flag * sqlx prepare * feat: add onboarding checklist app db and add vue provider * feat: add welcome page * feat: add onboarding checklist component * feat: move checklist visibility source of truth in app db * feat: split up import modpack button * feat-small: style tweak * feat: remove discover section from homepage and add library * refactor: move welcome screen to component * refactor: move grid display into /library * refactor: rename existing components * refactor: split up the current library page files * feat: add create group modal * feat: add instance group definitions * feat: update accordian for instance groups * feat: add delete group * feat: implement rename instance groups * refactor: move instance group api out * feat: add context menu for groups * feat: style instance items in library * feat: add selected instance item state * feat: implement action bar for selection * feat: drag and drop to move between groups * feat: show ungrouped with header * feat: improve edit group name * small fix * small style fixes * feat: improve selection behaviour * fix: dont toggle group when context menu open * feat: drag and drop multiple selected * small * feat: add remove from group in action bar * feat: add delay on icon hiding in inline input * feat: improve icon hiding delay * fix: bad routes.js * feat: implement sort and filter options * refactor: dont prefix filenames * feat: change open/collapse group target * feat: improve ungrouped behaviour * feat: add shift to select multiple instances * fix: icon disappear transition * feat: add esc while dragging to cancel * feat: update sorting and moved label * feat: update context menu * fix: multiple context menus can be opened * refactor: instance groups to be identified by ID instead of name, names become display data * feat: creating new group always adds instance * feat: create group button, fix instance selection, and increase group name max length * feat: strokes * fix: show getting started checklist in all sidebar * feat: set size on microsoft login screen * fix: use ButtonStyled in Chips component * feat: creating groups with selected instances and fix some moving selection and duplication bugs * pnpm prepr * feat: add tooltip for instance already in group * feat: create instance with content in creation flow modal - search modpack becomes search projects - creation flow modal context receives prepareProjectInstall and createProjectInstall callbacks, from content-install.ts (shared with ContentInstallModal) * feat: update instance card styles * refactor: separate out instance card content * update styles * refactor: instance card * fix: width of instance * feat: update empty state * feat: update sort and grouping dropdowns * feat: better context menu options * feat: add group action buttons * feat: add/remove favourites group * remove manual sort * feat: improve the "New group" jank * feat: add group by instance type and change group sorting * feat: welcome screen styles match figma * feat: not signed in skins demo * feat: new hosting empty state * feat: new instance card style * feat: add tooltip and spice up animation more * feat: improve the transitions for groups after dropping many instances * feat: set instance group membership for bulk moving * feat: remove fade out * fix: allow dragging from buttons inside instance card * fix: library page load in behaviour * small fix * feat: add group ordering and reordering * feat: add drag to reorder groups * fix: switching page not clearing selected instances * style fixes * style fix * fix spacing * feat: jump in changes * feat: add styled newly created instances * feat: improve jump in cards styles * fix: welcome screen style * fix: empty state styles * feat: max 5 jump in items * feat: max new instances to 3 * fix: search icon * feat: clear selection after move * feat: skins list use check icon styles * feat: list will be deleted instances and default sort last played * fix: stroke * remove: no more group settings in instance general settings * fix: resolving modpack server install * feat: icon editor * feat: add three hue shifted variants * fix: surprise me doesnt pick symbol * feat: add customize icon to create instance modal * feat: skins loading state style * fix: welcome logo * fix: copy * fix: left over usage of ButtonStyled from main's refactor * feat: some leaked merge stuff * feat: server empty state styles * remove: instance helper text * remove: auto link in set up stage * feat: auto focus on search when modal open * fix: delete instance modal style * remove: modpack meta repeating * fix: icon * fix: font weight * fix: dropdown filter preview heights * pnpm prepr * fix: sign into modrinth flashing change in position * feat: add avatar transparent corner gets padding * feat: drag and hold over group opens group * feat: add random icon for custom instance * feat: update loading icon * polish: empty state for search * polish: jump in cards * fix: avatar could skip checking for image if tauri loads it first * feat: add icon customize and randomizer in content install modal for add to new instances * fix: avatar cannot read image pixels due to cors * refactor: popup notifications toast type for instance sharing notifications * feat: apply random icons modal and add popup notification for it * polish: style * fix: set_webview_visible * QA * qa * feat: add inner white 15 opacity stroke around avatar * add to catalog * pnpm prepr * fix: app event import * feat: add new icons and backgrounds for icon editor * feat: recents list generate from randomized icons and save icon in editor + icon editor modal fixes * qa * refactor: recipe -> config * fix: event bus * polish * feat: add safe guard against randomizing empty icons * feat: navigate to instance after creation * fix: icon file names * i18n on welcome screen * i18n pass on PR * fix: inconsistent max group name length * refactor: use sqlx macro * feat: add instance icon background selection drag * feat: update catalog order * fix: remove gradient for welcome screen * remove: frog * fix: min width * feat: update corner size * fix: context menu styles * prepr * fix: instance name trimming * reorder * fix: instance card loading state stayed until hovering * feat: add icon randomizer blacklist * blog * prepr --------- Co-authored-by: Prospector <6166773+Prospector@users.noreply.github.com>
This commit is contained in:
Truman Gao
Prospector
@@ -2,12 +2,12 @@
|
||||
import {
|
||||
CheckIcon,
|
||||
EditIcon,
|
||||
ExcitedRinthbot,
|
||||
EyeIcon,
|
||||
LogInIcon,
|
||||
InfoIcon,
|
||||
RotateCounterClockwiseIcon,
|
||||
ShirtIcon,
|
||||
SpinnerIcon,
|
||||
WindowsIcon,
|
||||
} from '@modrinth/assets'
|
||||
import {
|
||||
Button,
|
||||
@@ -173,6 +173,10 @@ const messages = defineMessages({
|
||||
id: 'app.skins.apply-button',
|
||||
defaultMessage: 'Apply',
|
||||
},
|
||||
demoApplyTooltip: {
|
||||
id: 'app.skins.demo.apply-tooltip',
|
||||
defaultMessage: 'Sign in to apply skins.',
|
||||
},
|
||||
editSkinButton: {
|
||||
id: 'app.skins.preview.edit-button',
|
||||
defaultMessage: 'Edit skin',
|
||||
@@ -189,22 +193,17 @@ const messages = defineMessages({
|
||||
id: 'app.skins.toggle-ears-features-on',
|
||||
defaultMessage: 'Toggle on',
|
||||
},
|
||||
excitedRinthbotAlt: {
|
||||
id: 'app.skins.sign-in.rinthbot-alt',
|
||||
defaultMessage: 'Excited Modrinth Bot',
|
||||
demoTitle: {
|
||||
id: 'app.skins.demo.title',
|
||||
defaultMessage: 'Editing with a demo account',
|
||||
},
|
||||
signInTitle: {
|
||||
id: 'app.skins.sign-in.title',
|
||||
defaultMessage: 'Please sign in',
|
||||
},
|
||||
signInDescription: {
|
||||
id: 'app.skins.sign-in.description',
|
||||
defaultMessage:
|
||||
'Please sign into your Minecraft account to use the skin management features of the Modrinth app.',
|
||||
demoDescription: {
|
||||
id: 'app.skins.demo.description',
|
||||
defaultMessage: 'Sign in to your Minecraft account to save and apply skins!',
|
||||
},
|
||||
signInButton: {
|
||||
id: 'app.skins.sign-in.button',
|
||||
defaultMessage: 'Sign In',
|
||||
defaultMessage: 'Sign in to Microsoft',
|
||||
},
|
||||
})
|
||||
|
||||
@@ -342,7 +341,9 @@ const capeTexture = computed(() => currentCape.value?.texture)
|
||||
const skinVariant = computed(() => selectedSkin.value?.variant)
|
||||
const skinNametag = computed(() => (themeStore.hideNametagSkinsPage ? undefined : username.value))
|
||||
const isSkinManagementReadOnly = computed(
|
||||
() => offline.value || (authServerQuery.isError.value && !authServerQuery.isLoading.value),
|
||||
() =>
|
||||
!!currentUser.value &&
|
||||
(offline.value || (authServerQuery.isError.value && !authServerQuery.isLoading.value)),
|
||||
)
|
||||
const hasPendingSkinChange = computed(
|
||||
() => !skinsMatch(selectedSkin.value, originalSelectedSkin.value),
|
||||
@@ -746,6 +747,7 @@ function schedulePendingSkinRefresh() {
|
||||
async function applySelectedSkin() {
|
||||
const skinToApply = selectedSkin.value
|
||||
if (
|
||||
!currentUser.value ||
|
||||
!skinToApply ||
|
||||
!hasPendingSkinChange.value ||
|
||||
isApplyingSkin.value ||
|
||||
@@ -1058,6 +1060,7 @@ await loadSkins()
|
||||
<EditSkinModal
|
||||
ref="editSkinModal"
|
||||
:capes="capes"
|
||||
:demo="!currentUser"
|
||||
@saved="onSkinSaved"
|
||||
@deleted="() => loadSkins()"
|
||||
/>
|
||||
@@ -1076,7 +1079,7 @@ await loadSkins()
|
||||
@proceed="deleteSkin"
|
||||
/>
|
||||
|
||||
<div v-if="currentUser" class="skin-layout box-border min-h-full p-4">
|
||||
<div class="skin-layout box-border grow p-4" :class="{ 'pb-40': !currentUser }">
|
||||
<div class="sticky top-6 self-start p-2 pt-0">
|
||||
<h1 class="m-0 text-2xl font-bold flex items-center gap-2">
|
||||
{{ formatMessage(appMessages.skinSelectorLabel) }}
|
||||
@@ -1132,13 +1135,17 @@ await loadSkins()
|
||||
</Button>
|
||||
<Button
|
||||
v-tooltip="
|
||||
selectedSkinHasEarsFeatures ? formatMessage(messages.applyButton) : undefined
|
||||
!currentUser
|
||||
? formatMessage(messages.demoApplyTooltip)
|
||||
: selectedSkinHasEarsFeatures
|
||||
? formatMessage(messages.applyButton)
|
||||
: undefined
|
||||
"
|
||||
type="colored"
|
||||
color="brand"
|
||||
size="lg"
|
||||
class="skin-preview-action-button"
|
||||
:disabled="isApplyingSkin || isSkinManagementReadOnly"
|
||||
:disabled="!currentUser || isApplyingSkin || isSkinManagementReadOnly"
|
||||
:aria-label="formatMessage(messages.applyButton)"
|
||||
@click="applySelectedSkin"
|
||||
>
|
||||
@@ -1258,45 +1265,32 @@ await loadSkins()
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-else class="box-border flex min-h-full items-center justify-center pt-[25%]">
|
||||
<div v-if="!currentUser" class="sticky w-full bottom-0 z-20 p-4 pt-0">
|
||||
<div
|
||||
class="relative mx-auto flex w-full max-w-xl flex-col gap-5 rounded-lg bg-bg-raised p-7 shadow-lg"
|
||||
class="mx-auto flex w-full max-w-5xl items-center justify-between gap-3 rounded-[20px] border border-solid border-surface-5 bg-surface-3 p-4"
|
||||
>
|
||||
<img
|
||||
:src="ExcitedRinthbot"
|
||||
:alt="formatMessage(messages.excitedRinthbotAlt)"
|
||||
class="absolute -top-28 right-8 md:right-20 h-28 w-auto"
|
||||
/>
|
||||
<div
|
||||
class="absolute top-0 left-0 w-full h-[1px] opacity-40 bg-gradient-to-r from-transparent via-green-500 to-transparent"
|
||||
style="
|
||||
background: linear-gradient(
|
||||
to right,
|
||||
transparent 2rem,
|
||||
var(--color-green) calc(100% - 13rem),
|
||||
var(--color-green) calc(100% - 5rem),
|
||||
transparent calc(100% - 2rem)
|
||||
);
|
||||
"
|
||||
></div>
|
||||
|
||||
<div class="flex flex-col gap-5">
|
||||
<h1 class="text-3xl font-extrabold m-0">{{ formatMessage(messages.signInTitle) }}</h1>
|
||||
<p class="text-lg m-0">
|
||||
{{ formatMessage(messages.signInDescription) }}
|
||||
</p>
|
||||
<Button
|
||||
v-show="accountsCard"
|
||||
type="colored"
|
||||
color="brand"
|
||||
:disabled="accountsCard.loginDisabled"
|
||||
@click="login"
|
||||
>
|
||||
<LogInIcon v-if="!accountsCard.loginDisabled" />
|
||||
<SpinnerIcon v-else class="animate-spin" />
|
||||
{{ formatMessage(messages.signInButton) }}
|
||||
</Button>
|
||||
<div class="flex min-w-0 grow items-start gap-3">
|
||||
<InfoIcon class="size-6 shrink-0 text-blue" />
|
||||
<div class="flex min-w-0 flex-col gap-1">
|
||||
<p class="m-0 text-lg font-semibold leading-6 text-contrast">
|
||||
{{ formatMessage(messages.demoTitle) }}
|
||||
</p>
|
||||
<p class="m-0 text-base leading-6 text-primary">
|
||||
{{ formatMessage(messages.demoDescription) }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<Button
|
||||
v-show="accountsCard"
|
||||
type="colored"
|
||||
color="brand"
|
||||
:disabled="accountsCard.loginDisabled"
|
||||
@click="login"
|
||||
>
|
||||
<SpinnerIcon v-if="accountsCard.loginDisabled" class="animate-spin" />
|
||||
<WindowsIcon v-else />
|
||||
{{ formatMessage(messages.signInButton) }}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
Reference in New Issue
Block a user