feat: implement improved flow for server panel edit installation (#5711)

* feat: implement improved flow for server panel edit installation

* feat: installation form finalized

* feat: error state for InstallingBanner

* feat: action button refactor + save banner text fix

* fix: lint

* fix: content card alignment

* feat: better copy

* fix: lint

* fix: hide shift click + fix NeoForge chip

* fix: lint

packages/ui/src/layouts/shared/content-tab/components/ContentModpackCard.vue

@@ -138,7 +138,7 @@ onUnmounted(() => {
 		class="@container flex flex-col gap-4 rounded-[20px] bg-bg-raised p-6 shadow-md"
 		:class="{ 'opacity-50': disabled }"
 	>
-		<div class="flex flex-wrap items-center justify-between gap-4">
+		<div class="flex flex-wrap items-start justify-between gap-4">
 			<div class="flex min-w-0 flex-1 items-center gap-4">
 				<AutoLink :to="projectLink" class="shrink-0">
 					<Avatar :src="project.icon_url" :alt="project.title" size="5rem" no-shadow raised />

packages/ui/src/layouts/shared/content-tab/components/modals/ConfirmBulkUpdateModal.vue

@@ -13,6 +13,7 @@
 			<InlineBackupCreator
 				ref="backupCreator"
 				:backup-name="backupTip ? `Before bulk update (${backupTip})` : 'Before bulk update'"
+				:shift-click-hint-override="formatMessage(messages.shiftClickHint)"
 				@update:buttons-disabled="buttonsDisabled = $event"
 			/>
 		</div>
@@ -68,6 +69,11 @@ const messages = defineMessages({
 		id: 'content.confirm-bulk-update.update-button',
 		defaultMessage: 'Update {count, plural, one {# project} other {# projects}}',
 	},
+	shiftClickHint: {
+		id: 'content.confirm-bulk-update.shift-click-hint',
+		defaultMessage:
+			'Hold Shift while clicking "Update all" to skip this confirmation in the future.',
+	},
 })
 
 defineProps<{

packages/ui/src/layouts/shared/content-tab/components/modals/InlineBackupCreator.vue

@@ -44,7 +44,7 @@
 			/>
 		</div>
 		<span v-if="!props.hideShiftClickHint" class="text-secondary">
-			{{ formatMessage(messages.shiftClickHint) }}
+			{{ props.shiftClickHintOverride ?? formatMessage(messages.shiftClickHint) }}
 		</span>
 	</div>
 </template>
@@ -61,6 +61,7 @@ import { useInlineBackup } from '../../composables/use-inline-backup'
 const props = defineProps<{
 	backupName: string
 	hideShiftClickHint?: boolean
+	shiftClickHintOverride?: string
 }>()
 
 const emit = defineEmits<{