mirror of
https://github.com/modrinth/code.git
synced 2026-08-31 03:55:59 +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
@@ -0,0 +1,206 @@
|
||||
<template>
|
||||
<FloatingActionBar
|
||||
:shown="selectedInstanceCount > 0"
|
||||
:aria-label="formatMessage(messages.ariaLabel)"
|
||||
hide-when-modal-open
|
||||
>
|
||||
<div class="flex items-center gap-0.5">
|
||||
<span class="px-4 py-2.5 text-base font-semibold text-contrast tabular-nums">
|
||||
{{ formatMessage(messages.selectedCount, { count: selectedLibraryInstances.size }) }}
|
||||
</span>
|
||||
<div class="mx-1 h-6 w-px bg-surface-5" />
|
||||
<Button
|
||||
type="quiet"
|
||||
class="!text-primary"
|
||||
:disabled="busy"
|
||||
@click="clearLibraryInstanceSelection"
|
||||
>
|
||||
<span class="bar-label">{{ formatMessage(commonMessages.clearButton) }}</span>
|
||||
</Button>
|
||||
</div>
|
||||
<div class="ml-auto flex items-center gap-0.5">
|
||||
<Button
|
||||
v-if="displayState.group === 'Group'"
|
||||
type="quiet"
|
||||
:disabled="busy"
|
||||
@click="createGroupFromSelection"
|
||||
>
|
||||
<SquarePlusIcon />
|
||||
<span class="bar-label">{{ formatMessage(messages.newGroup) }}</span>
|
||||
</Button>
|
||||
<Button
|
||||
v-if="selectedGroupedInstances.length > 0"
|
||||
type="quiet"
|
||||
:disabled="busy"
|
||||
@click="removeSelectedInstancesFromGroups"
|
||||
>
|
||||
<MinusIcon />
|
||||
<span class="bar-label">{{ formatMessage(messages.removeFromGroup) }}</span>
|
||||
</Button>
|
||||
<div class="mx-1 h-6 w-px bg-surface-5" />
|
||||
<Button
|
||||
v-tooltip="deleting ? formatMessage(messages.deleting) : undefined"
|
||||
type="quiet"
|
||||
color="red"
|
||||
interaction="filled"
|
||||
:disabled="busy"
|
||||
@click="confirmDeleteModal?.show()"
|
||||
>
|
||||
<TrashIcon />
|
||||
<span class="bar-label">{{ formatMessage(commonMessages.deleteLabel) }}</span>
|
||||
</Button>
|
||||
</div>
|
||||
</FloatingActionBar>
|
||||
<ConfirmDeleteInstanceModal
|
||||
ref="confirmDeleteModal"
|
||||
:instances="selectedInstances"
|
||||
@delete="deleteSelectedInstances"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { MinusIcon, SquarePlusIcon, TrashIcon } from '@modrinth/assets'
|
||||
import {
|
||||
Button,
|
||||
commonMessages,
|
||||
defineMessages,
|
||||
FloatingActionBar,
|
||||
injectNotificationManager,
|
||||
useVIntl,
|
||||
} from '@modrinth/ui'
|
||||
import { computed, ref } from 'vue'
|
||||
|
||||
import { getLibraryInstanceSelectionKey, useLibrary } from '@/components/ui/library/use-library'
|
||||
import ConfirmDeleteInstanceModal from '@/components/ui/modal/ConfirmDeleteInstanceModal.vue'
|
||||
import { toError } from '@/helpers/errors'
|
||||
import { remove } from '@/helpers/instance'
|
||||
import { set_group_memberships as setInstanceGroupMemberships } from '@/helpers/instance-groups'
|
||||
|
||||
const { formatMessage } = useVIntl()
|
||||
const { handleError } = injectNotificationManager()
|
||||
const {
|
||||
instances,
|
||||
selectedLibraryInstances,
|
||||
clearLibraryInstanceSelection,
|
||||
setSelectedLibraryInstances,
|
||||
creatingGroup,
|
||||
createDefaultGroup,
|
||||
displayState,
|
||||
} = useLibrary()
|
||||
|
||||
const confirmDeleteModal = ref<InstanceType<typeof ConfirmDeleteInstanceModal>>()
|
||||
const deleting = ref(false)
|
||||
const removingFromGroup = ref(false)
|
||||
const selectedInstanceCount = computed(() => selectedLibraryInstances.value.size)
|
||||
const selectedInstanceIds = computed(
|
||||
() =>
|
||||
new Set([...selectedLibraryInstances.value.values()].map((selection) => selection.instanceId)),
|
||||
)
|
||||
const selectedInstances = computed(() =>
|
||||
instances.value.filter((instance) => selectedInstanceIds.value.has(instance.id)),
|
||||
)
|
||||
const selectedGroupedInstances = computed(() =>
|
||||
[...selectedLibraryInstances.value.values()].flatMap((selection) => {
|
||||
const instance = instances.value.find((candidate) => candidate.id === selection.instanceId)
|
||||
return instance?.group_ids.includes(selection.groupId) ? [{ instance, selection }] : []
|
||||
}),
|
||||
)
|
||||
const busy = computed(() => deleting.value || removingFromGroup.value || creatingGroup.value)
|
||||
|
||||
const messages = defineMessages({
|
||||
ariaLabel: {
|
||||
id: 'app.library.selection.aria-label',
|
||||
defaultMessage: 'Selected instances',
|
||||
},
|
||||
selectedCount: {
|
||||
id: 'app.library.selection.selected-count',
|
||||
defaultMessage: '{count} selected',
|
||||
},
|
||||
deleting: {
|
||||
id: 'app.library.selection.deleting',
|
||||
defaultMessage: 'Deleting selected instances',
|
||||
},
|
||||
newGroup: {
|
||||
id: 'app.library.selection.new-group',
|
||||
defaultMessage: 'New group',
|
||||
},
|
||||
removeFromGroup: {
|
||||
id: 'app.library.selection.remove-from-group',
|
||||
defaultMessage: 'Remove from group',
|
||||
},
|
||||
})
|
||||
|
||||
async function createGroupFromSelection() {
|
||||
if (busy.value) return
|
||||
|
||||
const instanceIds = selectedInstanceIds.value
|
||||
clearLibraryInstanceSelection()
|
||||
await createDefaultGroup(instanceIds)
|
||||
}
|
||||
|
||||
async function removeSelectedInstancesFromGroups() {
|
||||
if (busy.value || selectedGroupedInstances.value.length === 0) return
|
||||
|
||||
removingFromGroup.value = true
|
||||
const selectedGroupIdsByInstanceId = new Map<string, Set<string>>()
|
||||
for (const { instance, selection } of selectedGroupedInstances.value) {
|
||||
const groupIds = selectedGroupIdsByInstanceId.get(instance.id) ?? new Set()
|
||||
groupIds.add(selection.groupId)
|
||||
selectedGroupIdsByInstanceId.set(instance.id, groupIds)
|
||||
}
|
||||
const operations = [...selectedGroupIdsByInstanceId].flatMap(([instanceId, groupIds]) => {
|
||||
const instance = instances.value.find((candidate) => candidate.id === instanceId)
|
||||
return instance ? [{ instance, groupIds }] : []
|
||||
})
|
||||
try {
|
||||
await setInstanceGroupMemberships(
|
||||
operations.map(({ instance, groupIds }) => ({
|
||||
instance_id: instance.id,
|
||||
group_ids: instance.group_ids.filter((groupId) => !groupIds.has(groupId)),
|
||||
})),
|
||||
)
|
||||
|
||||
const nextSelectedInstances = new Map(selectedLibraryInstances.value)
|
||||
for (const { instance, groupIds } of operations) {
|
||||
for (const groupId of groupIds) {
|
||||
nextSelectedInstances.delete(
|
||||
getLibraryInstanceSelectionKey({
|
||||
instanceId: instance.id,
|
||||
groupId,
|
||||
}),
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
setSelectedLibraryInstances(nextSelectedInstances.values())
|
||||
} catch (error) {
|
||||
handleError(toError(error))
|
||||
} finally {
|
||||
removingFromGroup.value = false
|
||||
}
|
||||
}
|
||||
|
||||
async function deleteSelectedInstances() {
|
||||
if (busy.value || selectedInstanceCount.value === 0) return
|
||||
|
||||
deleting.value = true
|
||||
const instanceIds = [...selectedInstanceIds.value]
|
||||
const results = await Promise.allSettled(instanceIds.map((instanceId) => remove(instanceId)))
|
||||
const deletedInstanceIds = new Set<string>()
|
||||
|
||||
for (const [index, result] of results.entries()) {
|
||||
if (result.status === 'rejected') {
|
||||
handleError(toError(result.reason))
|
||||
} else {
|
||||
deletedInstanceIds.add(instanceIds[index])
|
||||
}
|
||||
}
|
||||
|
||||
setSelectedLibraryInstances(
|
||||
[...selectedLibraryInstances.value.values()].filter(
|
||||
(selection) => !deletedInstanceIds.has(selection.instanceId),
|
||||
),
|
||||
)
|
||||
deleting.value = false
|
||||
}
|
||||
</script>
|
||||
Reference in New Issue
Block a user