update archiving, move general project settings to v3 (start redesign there), use project id lookups for stable cache keys, advanced in server search

apps/frontend/src/components/ui/project-settings/disclosures/ArchivedDisclosureCard.vue

@@ -0,0 +1,82 @@
+<script setup lang="ts">
+import { ArchiveIcon } from '@modrinth/assets'
+import {
+	ArchivedProjectBanner,
+	defineMessages,
+	SettingsFormGroup,
+	SettingsToggleCard,
+	StyledInput,
+	useVIntl,
+} from '@modrinth/ui'
+
+import type { NoteDisclosure } from './types'
+
+const model = defineModel<NoteDisclosure>({ required: true })
+
+defineProps<{
+	disabled?: boolean
+	projectTitle: string
+}>()
+
+const { formatMessage } = useVIntl()
+
+const messages = defineMessages({
+	title: {
+		id: 'project.settings.disclosures.archived.title',
+		defaultMessage: 'Archive project',
+	},
+	description1: {
+		id: 'project.settings.disclosures.archived.description.1',
+		defaultMessage:
+			'Mark your project as archived to let users know that you are no longer working on it.',
+	},
+	description2: {
+		id: 'project.settings.disclosures.archived.description.2',
+		defaultMessage:
+			'Archived projects remain discoverable when their visibility is set to Public. If you wish to de-list your project, set its visibility to Unlisted',
+	},
+	noteLabel: {
+		id: 'project.settings.disclosures.archived.note-label',
+		defaultMessage: 'Optionally explain why this project is archived.',
+	},
+	notePlaceholder: {
+		id: 'project.settings.disclosures.archived.note-placeholder',
+		defaultMessage: `e.g. I don't have time to maintain this project anymore, feel free to fork it!`,
+	},
+	bannerPreview: {
+		id: 'project.settings.disclosures.archived.banner-preview',
+		defaultMessage: 'Banner preview',
+	},
+})
+</script>
+
+<template>
+	<SettingsToggleCard
+		v-model="model.enabled"
+		:disabled="disabled"
+		:icon="ArchiveIcon"
+		:title="formatMessage(messages.title)"
+	>
+		<p>{{ formatMessage(messages.description1) }}</p>
+		<p>{{ formatMessage(messages.description2) }}</p>
+		<template #expanded>
+			<SettingsFormGroup
+				:title="formatMessage(messages.noteLabel)"
+				title-for="archived-disclosure-note"
+			>
+				<StyledInput
+					id="archived-disclosure-note"
+					v-model="model.note"
+					multiline
+					:rows="3"
+					class="max-w-[40rem]"
+					:disabled="disabled"
+					:placeholder="formatMessage(messages.notePlaceholder)"
+				/>
+			</SettingsFormGroup>
+			<SettingsFormGroup :title="formatMessage(messages.bannerPreview)">
+				<ArchivedProjectBanner :title="projectTitle" :reason="model.note" />
+			</SettingsFormGroup>
+		</template>
+	</SettingsToggleCard>
+</template>

apps/frontend/src/components/ui/project-settings/disclosures/form.ts

@@ -16,7 +16,11 @@ function findDisclosure<T extends DisclosureType>(
 	return disclosures.find((disclosure): disclosure is DisclosureOf<T> => disclosure.type === type)
 }
 
-type NoteDisclosureType = 'advertisements' | 'epilepsy_triggers' | 'system_interactions'
+type NoteDisclosureType =
+	| 'advertisements'
+	| 'epilepsy_triggers'
+	| 'system_interactions'
+	| 'archived'
 
 function createNoteModel(
 	disclosures: ProjectDisclosureData[],
@@ -61,6 +65,7 @@ export function disclosuresToForm(disclosures: ProjectDisclosureData[]): Disclos
 		},
 		photosensitivity: createNoteModel(disclosures, 'epilepsy_triggers'),
 		systemInteractions: createNoteModel(disclosures, 'system_interactions'),
+		archived: createNoteModel(disclosures, 'archived'),
 	}
 }
 
@@ -113,6 +118,10 @@ export function formToDisclosures(form: DisclosureFormState): ProjectDisclosure[
 		set.push({ type: 'system_interactions', note: form.systemInteractions.note.trim() || null })
 	}
 
+	if (form.archived.enabled) {
+		set.push({ type: 'archived', note: form.archived.note.trim() || null })
+	}
+
 	return set
 }
 

apps/frontend/src/components/ui/project-settings/disclosures/index.ts

@@ -1,5 +1,6 @@
 export { default as AdvertisingDisclosureCard } from './AdvertisingDisclosureCard.vue'
 export { default as AiDisclosureCard } from './AiDisclosureCard.vue'
+export { default as ArchivedDisclosureCard } from './ArchivedDisclosureCard.vue'
 export { default as DerivativeDisclosureCard } from './DerivativeDisclosureCard.vue'
 export * from './form'
 export { default as PaidFeaturesDisclosureCard } from './PaidFeaturesDisclosureCard.vue'

apps/frontend/src/components/ui/project-settings/disclosures/types.ts

@@ -43,4 +43,5 @@ export type DisclosureFormState = {
 	derivative: DerivativeDisclosure
 	photosensitivity: NoteDisclosure
 	systemInteractions: NoteDisclosure
+	archived: NoteDisclosure
 }