Redesign report form and prevent duplicate reports (#3211)

* Redesign report form and prevent duplicate reports

* Fix lint

* Add malware evidence notice to report form

* Fix lint

packages/ui/src/components/base/MarkdownEditor.vue

@@ -300,8 +300,8 @@ import Chips from './Chips.vue'
 const props = withDefaults(
   defineProps<{
     modelValue: string
-    disabled: boolean
-    headingButtons: boolean
+    disabled?: boolean
+    headingButtons?: boolean
     /**
      * @param file The file to upload
      * @throws If the file is invalid or the upload fails
@@ -948,4 +948,8 @@ function openVideoModal() {
   pointer-events: none;
   cursor: not-allowed;
 }
+
+:deep(.cm-content) {
+  overflow: auto;
+}
 </style>

packages/ui/src/components/base/RadialHeader.vue

@@ -0,0 +1,49 @@
+<template>
+  <div :style="colorClasses" class="radial-header relative pb-1" v-bind="$attrs">
+    <slot />
+  </div>
+  <div class="radial-header-divider" />
+</template>
+<script setup lang="ts">
+import { computed } from 'vue'
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+const props = withDefaults(
+  defineProps<{
+    color?: 'brand' | 'red' | 'orange' | 'green' | 'blue' | 'purple' | 'gray'
+  }>(),
+  {
+    color: 'brand',
+  },
+)
+
+const colorClasses = computed(
+  () =>
+    `--_radial-bg: var(--color-${props.color}-highlight);--_radial-border: var(--color-${props.color});`,
+)
+</script>
+<style scoped lang="scss">
+.radial-header {
+  background-image: radial-gradient(50% 100% at 50% 100%, var(--_radial-bg) 10%, #ffffff00 100%);
+  position: relative;
+
+  &::before {
+    content: '';
+    position: absolute;
+    left: 0;
+    bottom: 0;
+    background-image: linear-gradient(
+      90deg,
+      #ffffff00 0%,
+      var(--_radial-border) 50%,
+      #ffffff00 100%
+    );
+    width: 100%;
+    height: 1px;
+    opacity: 0.8;
+  }
+}
+</style>

packages/ui/src/components/base/RadioButtons.vue

@@ -0,0 +1,48 @@
+<template>
+  <div class="flex flex-wrap gap-2">
+    <button
+      v-for="(item, index) in items"
+      :key="`radio-button-${index}`"
+      class="p-0 py-2 px-2 border-0 flex gap-2 transition-all items-center cursor-pointer active:scale-95 hover:bg-button-bg rounded-xl"
+      :class="{
+        'text-contrast font-medium bg-button-bg': selected === item,
+        'text-primary bg-transparent': selected !== item,
+      }"
+      @click="selected = item"
+    >
+      <RadioButtonChecked v-if="selected === item" class="text-brand h-5 w-5" />
+      <RadioButtonIcon v-else class="h-5 w-5" />
+      <slot :item="item" />
+    </button>
+  </div>
+</template>
+<script setup lang="ts" generic="T">
+import { RadioButtonIcon, RadioButtonChecked } from '@modrinth/assets'
+import { computed } from 'vue'
+
+const props = withDefaults(
+  defineProps<{
+    modelValue: T
+    items: T[]
+    forceSelection?: boolean
+  }>(),
+  {
+    forceSelection: false,
+  },
+)
+
+const emit = defineEmits(['update:modelValue'])
+
+const selected = computed({
+  get() {
+    return props.modelValue
+  },
+  set(value) {
+    emit('update:modelValue', value)
+  },
+})
+
+if (props.items.length > 0 && props.forceSelection && !props.modelValue) {
+  selected.value = props.items[0]
+}
+</script>

packages/ui/src/components/index.ts

@@ -25,6 +25,8 @@ export { default as Pagination } from './base/Pagination.vue'
 export { default as PopoutMenu } from './base/PopoutMenu.vue'
 export { default as PreviewSelectButton } from './base/PreviewSelectButton.vue'
 export { default as ProjectCard } from './base/ProjectCard.vue'
+export { default as RadialHeader } from './base/RadialHeader.vue'
+export { default as RadioButtons } from './base/RadioButtons.vue'
 export { default as ScrollablePanel } from './base/ScrollablePanel.vue'
 export { default as SimpleBadge } from './base/SimpleBadge.vue'
 export { default as Slider } from './base/Slider.vue'