disclosures in search

packages/ui/src/components/modal/PhotosensitivityWarningModal.vue

@@ -0,0 +1,100 @@
+<template>
+	<NewModal
+		ref="modal"
+		:header="formatMessage(messages.title)"
+		:on-hide="handleHide"
+		:on-after-hide="handleAfterHide"
+		:closable="false"
+		fade="warning"
+		max-width="544px"
+	>
+		<div class="flex flex-col gap-6">
+			<p class="m-0 leading-normal">
+				{{ formatMessage(messages.body1) }}
+			</p>
+			<p class="m-0 leading-normal">
+				{{ formatMessage(messages.body2) }}
+			</p>
+
+			<div class="flex justify-between items-center">
+				<Checkbox v-model="dontShowAgain" :label="formatMessage(messages.dontShowAgain)" />
+				<Button type="colored" color="brand" native-type="button" @click="acknowledge">
+					<CheckCircleIcon class="size-4" />
+					{{ formatMessage(messages.iUnderstand) }}
+				</Button>
+			</div>
+		</div>
+	</NewModal>
+</template>
+
+<script setup lang="ts">
+import { CheckCircleIcon } from '@modrinth/assets'
+import { ref, useTemplateRef } from 'vue'
+
+import { Button } from '#ui/components/base/buttons'
+
+import { defineMessages, useVIntl } from '../../composables/i18n'
+import Checkbox from '../base/Checkbox.vue'
+import NewModal from './NewModal.vue'
+
+const emit = defineEmits<{
+	dismiss: [dontShowAgain: boolean]
+}>()
+
+const { formatMessage } = useVIntl()
+const modal = useTemplateRef('modal')
+const dontShowAgain = ref(false)
+let pendingDontShowAgain = false
+
+const messages = defineMessages({
+	title: {
+		id: 'search.photosensitivity-warning-modal.title',
+		defaultMessage: 'Results are not guaranteed to be safe',
+	},
+	body1: {
+		id: 'search.photosensitivity-warning-modal.body.1',
+		defaultMessage:
+			'We cannot guarantee that all content on Modrinth that may be dangerous for users with photosensitivity is labeled appropriately with a photosensitivity warning.',
+	},
+	body2: {
+		id: 'search.photosensitivity-warning-modal.body.2',
+		defaultMessage:
+			'The label is self-assigned by the users who uploaded the content, and do not indicate that the content has gone through any kind of safety testing. Using any content on Modrinth is at your own risk. Please stay safe.',
+	},
+	dontShowAgain: {
+		id: 'search.photosensitivity-warning-modal.dont-show-again',
+		defaultMessage: "Don't show this again",
+	},
+	iUnderstand: {
+		id: 'search.photosensitivity-warning-modal.i-understand',
+		defaultMessage: 'I understand',
+	},
+})
+
+function show() {
+	dontShowAgain.value = false
+	pendingDontShowAgain = false
+	modal.value?.show()
+}
+
+function hide() {
+	modal.value?.hide()
+}
+
+function handleHide() {
+	pendingDontShowAgain = dontShowAgain.value
+}
+
+function handleAfterHide() {
+	emit('dismiss', pendingDontShowAgain)
+	dontShowAgain.value = false
+	pendingDontShowAgain = false
+}
+
+function acknowledge() {
+	pendingDontShowAgain = dontShowAgain.value
+	modal.value?.hide()
+}
+
+defineExpose({ show, hide })
+</script>

packages/ui/src/components/modal/index.ts

@@ -3,6 +3,7 @@ export { default as ConfirmModal } from './ConfirmModal.vue'
 export { default as NewModal } from './NewModal.vue'
 export type { ServerProject as OpenInAppModalServerProject } from './OpenInAppModal.vue'
 export { default as OpenInAppModal } from './OpenInAppModal.vue'
+export { default as PhotosensitivityWarningModal } from './PhotosensitivityWarningModal.vue'
 export { default as ShareModal } from './ShareModal.vue'
 export type { Tab as TabbedModalTab } from './TabbedModal.vue'
 export { default as TabbedModal } from './TabbedModal.vue'