You've already forked AstralRinth
forked from didirus/AstralRinth
Technical review queue (#4775)
* chore: fix typo in status message * feat(labrinth): overhaul malware scanner report storage and routes * chore: address some review comments * feat: add Delphi to Docker Compose `with-delphi` profile * chore: fix unused import Clippy lint * feat(labrinth/delphi): use PAT token authorization with project read scopes * chore: expose file IDs in version queries * fix: accept null decompiled source payloads from Delphi * tweak(labrinth): expose base62 file IDs more consistently for Delphi * feat(labrinth/delphi): support new Delphi report severity field * chore(labrinth): run `cargo sqlx prepare` to fix Docker build errors * tweak: add route for fetching Delphi issue type schema, abstract Labrinth away from issue types * chore: run `cargo sqlx prepare` * chore: fix typo on frontend generated state file message * feat: update to use new Delphi issue schema * wip: tech review endpoints * wip: add ToSchema for dependent types * wip: report issues return * wip * wip: returning more data * wip * Fix up db query * Delphi configuration to talk to Labrinth * Get Delphi working with Labrinth * Add Delphi dummy fixture * Better Delphi logging * Improve utoipa for tech review routes * Add more sorting options for tech review queue * Oops join * New routes for fetching issues and reports * Fix which kind of ID is returned in tech review endpoints * Deduplicate tech review report rows * Reduce info sent for projects * Fetch more thread info * Address PR comments * fix ci * fix postgres version mismatch * fix version creation * Implement routes * fix up tech review * Allow adding a moderation comment to Delphi rejections * fix up rebase * exclude rejected projects from tech review * add status change msg to tech review thread * cargo sqlx prepare * also ignore withheld projects * More filtering on issue search * wip: report routes * Fix up for build * cargo sqlx prepare * fix thread message privacy * New tech review search route * submit route * details have statuses now * add default to drid status * dedup issue details * fix sqlx query on empty files * fixes * Dedupe issue detail statuses and message on entering tech rev * Fix qa issues * Fix qa issues * fix review comments * typos * fix ci * feat: tech review frontend (#4781) * chore: fix typo in status message * feat(labrinth): overhaul malware scanner report storage and routes * chore: address some review comments * feat: add Delphi to Docker Compose `with-delphi` profile * chore: fix unused import Clippy lint * feat(labrinth/delphi): use PAT token authorization with project read scopes * chore: expose file IDs in version queries * fix: accept null decompiled source payloads from Delphi * tweak(labrinth): expose base62 file IDs more consistently for Delphi * feat(labrinth/delphi): support new Delphi report severity field * chore(labrinth): run `cargo sqlx prepare` to fix Docker build errors * tweak: add route for fetching Delphi issue type schema, abstract Labrinth away from issue types * chore: run `cargo sqlx prepare` * chore: fix typo on frontend generated state file message * feat: update to use new Delphi issue schema * wip: tech review endpoints * wip: add ToSchema for dependent types * wip: report issues return * wip * wip: returning more data * wip * Fix up db query * Delphi configuration to talk to Labrinth * Get Delphi working with Labrinth * Add Delphi dummy fixture * Better Delphi logging * Improve utoipa for tech review routes * Add more sorting options for tech review queue * Oops join * New routes for fetching issues and reports * Fix which kind of ID is returned in tech review endpoints * Deduplicate tech review report rows * Reduce info sent for projects * Fetch more thread info * Address PR comments * fix ci * fix ci * fix postgres version mismatch * fix version creation * Implement routes * feat: batch scan alert * feat: layout * feat: introduce surface variables * fix: theme selector * feat: rough draft of tech review card * feat: tab switcher * feat: batch scan btn * feat: api-client module for tech review * draft: impl * feat: auto icons * fix: layout issues * feat: fixes to code blocks + flag labels * feat: temp remove mock data * fix: search sort types * fix: intl & lint * chore: re-enable mock data * fix: flag badges + auto open first issue in file tab * feat: update for new routes * fix: more qa issues * feat: lazy load sources * fix: re-enable auth middleware * feat: impl threads * fix: lint & severity * feat: download btn + switch to using NavTabs with new local mode option * feat: re-add toplevel btns * feat: reports page consistency * fix: consistency on project queue * fix: icons + sizing * fix: colors and gaps * fix: impl endpoints * feat: load all flags on file tab * feat: thread generics changes * feat: more qa * feat: fix collapse * fix: qa * feat: msg modal * fix: ISO import * feat: qa fixes * fix: empty state basic * fix: collapsible region * fix: collapse thread by default * feat: rough draft of new process/flow * fix labrinth build * fix thread message privacy * New tech review search route * feat: qa fixes * feat: QA changes * fix: verdict on detail not whole issue * fix: lint + intl * fix: lint * fix: thread message for tech rev verdict * feat: use anim frames * fix: exports + typecheck * polish: qa changes * feat: qa * feat: qa polish * feat: fix malic modal * fix: lint * fix: qa + lint * fix: pagination * fix: lint * fix: qa * intl extract * fix ci --------- Signed-off-by: Calum H. <contact@cal.engineer> Co-authored-by: Alejandro González <me@alegon.dev> Co-authored-by: aecsocket <aecsocket@tutanota.com> --------- Signed-off-by: Calum H. <contact@cal.engineer> Co-authored-by: Alejandro González <me@alegon.dev> Co-authored-by: Calum H. <contact@cal.engineer>
This commit is contained in:
aecsocket
@@ -8,7 +8,10 @@
|
||||
<div :class="['flex gap-2 items-start', (header || $slots.header) && 'flex-col']">
|
||||
<div class="flex gap-2 items-start" :class="header || $slots.header ? 'w-full' : 'contents'">
|
||||
<slot name="icon" :icon-class="['h-6 w-6 flex-none', iconClasses[type]]">
|
||||
<component :is="icons[type]" :class="['h-6 w-6 flex-none', iconClasses[type]]" />
|
||||
<component
|
||||
:is="getSeverityIcon(type)"
|
||||
:class="['h-6 w-6 flex-none', iconClasses[type]]"
|
||||
/>
|
||||
</slot>
|
||||
<div v-if="header || $slots.header" class="font-semibold text-base">
|
||||
<slot name="header">{{ header }}</slot>
|
||||
@@ -25,7 +28,7 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { InfoIcon, IssuesIcon, XCircleIcon } from '@modrinth/assets'
|
||||
import { getSeverityIcon } from '../../utils'
|
||||
|
||||
withDefaults(
|
||||
defineProps<{
|
||||
@@ -53,10 +56,4 @@ const iconClasses = {
|
||||
warning: 'text-brand-orange',
|
||||
critical: 'text-brand-red',
|
||||
}
|
||||
|
||||
const icons = {
|
||||
info: InfoIcon,
|
||||
warning: IssuesIcon,
|
||||
critical: XCircleIcon,
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -69,6 +69,14 @@
|
||||
<XIcon aria-hidden="true" /> {{ formatMessage(messages.closedLabel) }}
|
||||
</template>
|
||||
|
||||
<!-- Technical review verdicts -->
|
||||
<template v-else-if="type === 'safe'">
|
||||
<ShieldCheckIcon aria-hidden="true" /> {{ formatMessage(messages.safeLabel) }}
|
||||
</template>
|
||||
<template v-else-if="type === 'unsafe'">
|
||||
<BugIcon aria-hidden="true" /> {{ formatMessage(messages.unsafeLabel) }}
|
||||
</template>
|
||||
|
||||
<!-- Other -->
|
||||
<template v-else> <span class="circle" /> {{ capitalizeString(type) }} </template>
|
||||
</span>
|
||||
@@ -78,6 +86,7 @@
|
||||
import {
|
||||
ArchiveIcon,
|
||||
BoxIcon,
|
||||
BugIcon,
|
||||
CalendarIcon,
|
||||
CheckIcon,
|
||||
EyeOffIcon,
|
||||
@@ -86,6 +95,7 @@ import {
|
||||
LockIcon,
|
||||
ModrinthIcon,
|
||||
ScaleIcon,
|
||||
ShieldCheckIcon,
|
||||
UpdatedIcon,
|
||||
XIcon,
|
||||
} from '@modrinth/assets'
|
||||
@@ -153,6 +163,10 @@ const messages = defineMessages({
|
||||
id: 'omorphia.component.badge.label.returned',
|
||||
defaultMessage: 'Returned',
|
||||
},
|
||||
safeLabel: {
|
||||
id: 'omorphia.component.badge.label.safe',
|
||||
defaultMessage: 'Pass',
|
||||
},
|
||||
scheduledLabel: {
|
||||
id: 'omorphia.component.badge.label.scheduled',
|
||||
defaultMessage: 'Scheduled',
|
||||
@@ -165,6 +179,10 @@ const messages = defineMessages({
|
||||
id: 'omorphia.component.badge.label.unlisted',
|
||||
defaultMessage: 'Unlisted',
|
||||
},
|
||||
unsafeLabel: {
|
||||
id: 'omorphia.component.badge.label.unsafe',
|
||||
defaultMessage: 'Fail',
|
||||
},
|
||||
withheldLabel: {
|
||||
id: 'omorphia.component.badge.label.withheld',
|
||||
defaultMessage: 'Withheld',
|
||||
@@ -204,6 +222,7 @@ defineProps<{
|
||||
&.type--rejected,
|
||||
&.type--returned,
|
||||
&.type--failed,
|
||||
&.type--unsafe,
|
||||
&.red {
|
||||
--badge-color: var(--color-red);
|
||||
}
|
||||
@@ -220,6 +239,7 @@ defineProps<{
|
||||
&.type--admin,
|
||||
&.type--processed,
|
||||
&.type--approved-general,
|
||||
&.type--safe,
|
||||
&.green {
|
||||
--badge-color: var(--color-green);
|
||||
}
|
||||
|
||||
@@ -1,29 +1,27 @@
|
||||
<template>
|
||||
<div
|
||||
class="relative overflow-hidden rounded-xl border-[2px] border-solid border-divider shadow-lg"
|
||||
:class="{ 'max-h-32': isCollapsed }"
|
||||
>
|
||||
<div class="relative overflow-hidden">
|
||||
<div
|
||||
class="px-4 pt-4"
|
||||
:class="{
|
||||
'content-disabled pb-16': isCollapsed,
|
||||
'pb-4': !isCollapsed,
|
||||
}"
|
||||
class="collapsible-region-content"
|
||||
:class="{ open: !collapsed }"
|
||||
:style="{ '--collapsed-height': collapsedHeight }"
|
||||
>
|
||||
<slot />
|
||||
<div :class="{ 'pointer-events-none select-none pb-16': collapsed }">
|
||||
<slot />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-if="isCollapsed"
|
||||
class="pointer-events-none absolute inset-0 bg-gradient-to-b from-transparent to-button-bg"
|
||||
></div>
|
||||
v-if="collapsed"
|
||||
class="pointer-events-none absolute inset-0 bg-gradient-to-b from-transparent"
|
||||
:class="gradientTo"
|
||||
/>
|
||||
|
||||
<div class="absolute bottom-4 left-1/2 z-20 -translate-x-1/2">
|
||||
<ButtonStyled circular type="transparent">
|
||||
<button class="flex items-center gap-1 text-xs" @click="toggleCollapsed">
|
||||
<ExpandIcon v-if="isCollapsed" />
|
||||
<button class="flex items-center gap-1 text-xs" @click="collapsed = !collapsed">
|
||||
<ExpandIcon v-if="collapsed" />
|
||||
<CollapseIcon v-else />
|
||||
{{ isCollapsed ? expandText : collapseText }}
|
||||
{{ collapsed ? expandText : collapseText }}
|
||||
</button>
|
||||
</ButtonStyled>
|
||||
</div>
|
||||
@@ -32,67 +30,51 @@
|
||||
|
||||
<script setup lang="ts">
|
||||
import { CollapseIcon, ExpandIcon } from '@modrinth/assets'
|
||||
import { ref } from 'vue'
|
||||
|
||||
import ButtonStyled from './ButtonStyled.vue'
|
||||
|
||||
const props = withDefaults(
|
||||
withDefaults(
|
||||
defineProps<{
|
||||
initiallyCollapsed?: boolean
|
||||
expandText?: string
|
||||
collapseText?: string
|
||||
collapsedHeight?: string
|
||||
gradientTo?: string
|
||||
}>(),
|
||||
{
|
||||
initiallyCollapsed: true,
|
||||
expandText: 'Expand',
|
||||
collapseText: 'Collapse',
|
||||
collapsedHeight: '8rem',
|
||||
gradientTo: 'to-surface-2',
|
||||
},
|
||||
)
|
||||
|
||||
const isCollapsed = ref(props.initiallyCollapsed)
|
||||
|
||||
function toggleCollapsed() {
|
||||
isCollapsed.value = !isCollapsed.value
|
||||
}
|
||||
|
||||
function setCollapsed(value: boolean) {
|
||||
isCollapsed.value = value
|
||||
}
|
||||
|
||||
defineExpose({
|
||||
isCollapsed,
|
||||
setCollapsed,
|
||||
toggleCollapsed,
|
||||
})
|
||||
const collapsed = defineModel<boolean>('collapsed', { default: true })
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.content-disabled {
|
||||
pointer-events: none;
|
||||
user-select: none;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
<style scoped>
|
||||
.collapsible-region-content {
|
||||
display: grid;
|
||||
grid-template-rows: 0fr;
|
||||
transition: grid-template-rows 0.3s linear;
|
||||
}
|
||||
|
||||
:deep(*) {
|
||||
pointer-events: none !important;
|
||||
user-select: none !important;
|
||||
-webkit-user-select: none !important;
|
||||
-moz-user-select: none !important;
|
||||
-ms-user-select: none !important;
|
||||
}
|
||||
|
||||
:deep(button),
|
||||
:deep(input),
|
||||
:deep(textarea),
|
||||
:deep(select),
|
||||
:deep(a),
|
||||
:deep([tabindex]) {
|
||||
tabindex: -1 !important;
|
||||
}
|
||||
|
||||
:deep(*:focus) {
|
||||
outline: none !important;
|
||||
@media (prefers-reduced-motion) {
|
||||
.collapsible-region-content {
|
||||
transition: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
.collapsible-region-content.open {
|
||||
grid-template-rows: 1fr;
|
||||
}
|
||||
|
||||
.collapsible-region-content > div {
|
||||
overflow: hidden;
|
||||
min-height: var(--collapsed-height);
|
||||
transition: min-height 0.3s linear;
|
||||
}
|
||||
|
||||
.collapsible-region-content.open > div {
|
||||
min-height: 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
ref="triggerRef"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
class="max-h-[36px] relative cursor-pointer flex min-h-5 w-full items-center justify-between overflow-hidden rounded-xl bg-button-bg px-4 py-2.5 text-left transition-all duration-200 text-button-text hover:bg-button-bgHover active:bg-button-bgActive"
|
||||
class="relative cursor-pointer flex min-h-5 w-full items-center justify-between overflow-hidden rounded-xl bg-button-bg px-4 py-2.5 text-left transition-all duration-200 text-button-text hover:bg-button-bgHover active:bg-button-bgActive"
|
||||
:class="[
|
||||
triggerClasses,
|
||||
{
|
||||
@@ -129,7 +129,7 @@ import {
|
||||
watch,
|
||||
} from 'vue'
|
||||
|
||||
export interface DropdownOption<T> {
|
||||
export interface ComboboxOption<T> {
|
||||
value: T
|
||||
label: string
|
||||
icon?: Component
|
||||
@@ -145,19 +145,19 @@ const DROPDOWN_VIEWPORT_MARGIN = 8
|
||||
const DEFAULT_MAX_HEIGHT = 300
|
||||
|
||||
function isDropdownOption<T>(
|
||||
opt: DropdownOption<T> | { type: 'divider' },
|
||||
): opt is DropdownOption<T> {
|
||||
opt: ComboboxOption<T> | { type: 'divider' },
|
||||
): opt is ComboboxOption<T> {
|
||||
return 'value' in opt
|
||||
}
|
||||
|
||||
function isDivider<T>(opt: DropdownOption<T> | { type: 'divider' }): opt is { type: 'divider' } {
|
||||
function isDivider<T>(opt: ComboboxOption<T> | { type: 'divider' }): opt is { type: 'divider' } {
|
||||
return opt.type === 'divider'
|
||||
}
|
||||
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
modelValue?: T
|
||||
options: (DropdownOption<T> | { type: 'divider' })[]
|
||||
options: (ComboboxOption<T> | { type: 'divider' })[]
|
||||
placeholder?: string
|
||||
disabled?: boolean
|
||||
searchable?: boolean
|
||||
@@ -187,7 +187,7 @@ const props = withDefaults(
|
||||
|
||||
const emit = defineEmits<{
|
||||
'update:modelValue': [value: T]
|
||||
select: [option: DropdownOption<T>]
|
||||
select: [option: ComboboxOption<T>]
|
||||
open: []
|
||||
close: []
|
||||
searchInput: [query: string]
|
||||
@@ -204,6 +204,7 @@ const dropdownRef = ref<HTMLElement>()
|
||||
const searchInputRef = ref<HTMLInputElement>()
|
||||
const optionsContainerRef = ref<HTMLElement>()
|
||||
const optionRefs = ref<(HTMLElement | null)[]>([])
|
||||
const rafId = ref<number | null>(null)
|
||||
|
||||
const dropdownStyle = ref({
|
||||
top: '0px',
|
||||
@@ -225,9 +226,9 @@ const triggerClasses = computed(() => {
|
||||
return classes
|
||||
})
|
||||
|
||||
const selectedOption = computed<DropdownOption<T> | undefined>(() => {
|
||||
const selectedOption = computed<ComboboxOption<T> | undefined>(() => {
|
||||
return props.options.find(
|
||||
(opt): opt is DropdownOption<T> => isDropdownOption(opt) && opt.value === props.modelValue,
|
||||
(opt): opt is ComboboxOption<T> => isDropdownOption(opt) && opt.value === props.modelValue,
|
||||
)
|
||||
})
|
||||
|
||||
@@ -259,7 +260,7 @@ const filteredOptions = computed(() => {
|
||||
const shouldRoundBottomCorners = computed(() => isOpen.value && openDirection.value === 'down')
|
||||
const shouldRoundTopCorners = computed(() => isOpen.value && openDirection.value === 'up')
|
||||
|
||||
function getOptionClasses(item: DropdownOption<T> & { key: string }, index: number) {
|
||||
function getOptionClasses(item: ComboboxOption<T> & { key: string }, index: number) {
|
||||
return [
|
||||
item.class,
|
||||
{
|
||||
@@ -368,11 +369,13 @@ async function openDropdown() {
|
||||
|
||||
setInitialFocus()
|
||||
focusSearchInput()
|
||||
startPositionTracking()
|
||||
}
|
||||
|
||||
function closeDropdown() {
|
||||
if (!isOpen.value) return
|
||||
|
||||
stopPositionTracking()
|
||||
isOpen.value = false
|
||||
searchQuery.value = ''
|
||||
focusedIndex.value = -1
|
||||
@@ -391,7 +394,7 @@ function handleTriggerClick() {
|
||||
}
|
||||
}
|
||||
|
||||
function handleOptionClick(option: DropdownOption<T>, index: number) {
|
||||
function handleOptionClick(option: ComboboxOption<T>, index: number) {
|
||||
if (option.disabled || option.type === 'divider') return
|
||||
|
||||
focusedIndex.value = index
|
||||
@@ -514,6 +517,21 @@ function handleWindowResize() {
|
||||
}
|
||||
}
|
||||
|
||||
function startPositionTracking() {
|
||||
function track() {
|
||||
updateDropdownPosition()
|
||||
rafId.value = requestAnimationFrame(track)
|
||||
}
|
||||
rafId.value = requestAnimationFrame(track)
|
||||
}
|
||||
|
||||
function stopPositionTracking() {
|
||||
if (rafId.value !== null) {
|
||||
cancelAnimationFrame(rafId.value)
|
||||
rafId.value = null
|
||||
}
|
||||
}
|
||||
|
||||
onClickOutside(
|
||||
dropdownRef,
|
||||
() => {
|
||||
@@ -528,6 +546,7 @@ onMounted(() => {
|
||||
|
||||
onUnmounted(() => {
|
||||
window.removeEventListener('resize', handleWindowResize)
|
||||
stopPositionTracking()
|
||||
})
|
||||
|
||||
watch(isOpen, (value) => {
|
||||
|
||||
@@ -13,6 +13,7 @@ export { default as Checkbox } from './Checkbox.vue'
|
||||
export { default as Chips } from './Chips.vue'
|
||||
export { default as Collapsible } from './Collapsible.vue'
|
||||
export { default as CollapsibleRegion } from './CollapsibleRegion.vue'
|
||||
export type { ComboboxOption } from './Combobox.vue'
|
||||
export { default as Combobox } from './Combobox.vue'
|
||||
export { default as ContentPageHeader } from './ContentPageHeader.vue'
|
||||
export { default as CopyCode } from './CopyCode.vue'
|
||||
|
||||
@@ -1,9 +1,8 @@
|
||||
<script setup lang="ts">
|
||||
import { CardIcon, CurrencyIcon, PayPalIcon, UnknownIcon } from '@modrinth/assets'
|
||||
import { useVIntl } from '@vintl/vintl'
|
||||
import type Stripe from 'stripe'
|
||||
|
||||
import { commonMessages, paymentMethodMessages } from '../../utils'
|
||||
import { commonMessages, getPaymentMethodIcon, paymentMethodMessages } from '../../utils'
|
||||
|
||||
const { formatMessage } = useVIntl()
|
||||
defineProps<{
|
||||
@@ -13,10 +12,7 @@ defineProps<{
|
||||
|
||||
<template>
|
||||
<template v-if="'type' in method">
|
||||
<CardIcon v-if="method.type === 'card'" class="size-[1.5em]" />
|
||||
<CurrencyIcon v-else-if="method.type === 'cashapp'" class="size-[1.5em]" />
|
||||
<PayPalIcon v-else-if="method.type === 'paypal'" class="size-[1.5em]" />
|
||||
<UnknownIcon v-else class="size-[1.5em]" />
|
||||
<component :is="getPaymentMethodIcon(method.type)" class="size-[1.5em]" />
|
||||
<span v-if="method.type === 'card' && 'card' in method && method.card">
|
||||
{{
|
||||
formatMessage(commonMessages.paymentMethodCardDisplay, {
|
||||
|
||||
@@ -8,12 +8,7 @@
|
||||
iconClasses[variant],
|
||||
]"
|
||||
>
|
||||
<IssuesIcon
|
||||
v-if="variant === 'warning' || variant === 'error'"
|
||||
aria-hidden="true"
|
||||
class="w-6 h-6 flex-shrink-0"
|
||||
/>
|
||||
<InfoIcon v-if="variant === 'info'" aria-hidden="true" class="w-6 h-6 flex-shrink-0" />
|
||||
<component :is="getSeverityIcon(variant)" aria-hidden="true" class="w-6 h-6 flex-shrink-0" />
|
||||
<slot name="title" />
|
||||
</div>
|
||||
|
||||
@@ -32,7 +27,7 @@
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { InfoIcon, IssuesIcon } from '@modrinth/assets'
|
||||
import { getSeverityIcon } from '../../utils'
|
||||
|
||||
defineProps<{
|
||||
variant: 'error' | 'warning' | 'info'
|
||||
|
||||
@@ -3,22 +3,11 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import {
|
||||
ArchiveIcon,
|
||||
CalendarIcon,
|
||||
FileTextIcon,
|
||||
GlobeIcon,
|
||||
LinkIcon,
|
||||
LockIcon,
|
||||
UnknownIcon,
|
||||
UpdatedIcon,
|
||||
XIcon,
|
||||
} from '@modrinth/assets'
|
||||
import type { ProjectStatus } from '@modrinth/utils'
|
||||
import { defineMessage, type MessageDescriptor, useVIntl } from '@vintl/vintl'
|
||||
import type { Component } from 'vue'
|
||||
import { computed } from 'vue'
|
||||
|
||||
import { PROJECT_STATUS_ICONS } from '../../utils'
|
||||
import Badge from '../base/SimpleBadge.vue'
|
||||
|
||||
const props = defineProps<{
|
||||
@@ -28,76 +17,66 @@ const props = defineProps<{
|
||||
const { formatMessage } = useVIntl()
|
||||
|
||||
const metadata = computed(() => ({
|
||||
icon: statusMetadata[props.status]?.icon ?? statusMetadata.unknown.icon,
|
||||
icon: PROJECT_STATUS_ICONS[props.status] ?? PROJECT_STATUS_ICONS.unknown,
|
||||
formattedName: formatMessage(statusMetadata[props.status]?.message ?? props.status),
|
||||
}))
|
||||
|
||||
const statusMetadata: Record<ProjectStatus, { icon?: Component; message: MessageDescriptor }> = {
|
||||
const statusMetadata: Record<ProjectStatus, { message: MessageDescriptor }> = {
|
||||
approved: {
|
||||
icon: GlobeIcon,
|
||||
message: defineMessage({
|
||||
id: 'project.visibility.public',
|
||||
defaultMessage: 'Public',
|
||||
}),
|
||||
},
|
||||
unlisted: {
|
||||
icon: LinkIcon,
|
||||
message: defineMessage({
|
||||
id: 'project.visibility.unlisted',
|
||||
defaultMessage: 'Unlisted',
|
||||
}),
|
||||
},
|
||||
withheld: {
|
||||
icon: LinkIcon,
|
||||
message: defineMessage({
|
||||
id: 'project.visibility.unlisted-by-staff',
|
||||
defaultMessage: 'Unlisted by staff',
|
||||
}),
|
||||
},
|
||||
private: {
|
||||
icon: LockIcon,
|
||||
message: defineMessage({
|
||||
id: 'project.visibility.private',
|
||||
defaultMessage: 'Private',
|
||||
}),
|
||||
},
|
||||
scheduled: {
|
||||
icon: CalendarIcon,
|
||||
message: defineMessage({
|
||||
id: 'project.visibility.scheduled',
|
||||
defaultMessage: 'Scheduled',
|
||||
}),
|
||||
},
|
||||
draft: {
|
||||
icon: FileTextIcon,
|
||||
message: defineMessage({
|
||||
id: 'project.visibility.draft',
|
||||
defaultMessage: 'Draft',
|
||||
}),
|
||||
},
|
||||
archived: {
|
||||
icon: ArchiveIcon,
|
||||
message: defineMessage({
|
||||
id: 'project.visibility.archived',
|
||||
defaultMessage: 'Archived',
|
||||
}),
|
||||
},
|
||||
rejected: {
|
||||
icon: XIcon,
|
||||
message: defineMessage({
|
||||
id: 'project.visibility.rejected',
|
||||
defaultMessage: 'Rejected',
|
||||
}),
|
||||
},
|
||||
processing: {
|
||||
icon: UpdatedIcon,
|
||||
message: defineMessage({
|
||||
id: 'project.visibility.under-review',
|
||||
defaultMessage: 'Under review',
|
||||
}),
|
||||
},
|
||||
unknown: {
|
||||
icon: UnknownIcon,
|
||||
message: defineMessage({
|
||||
id: 'project.visibility.unknown',
|
||||
defaultMessage: 'Unknown',
|
||||
|
||||
@@ -416,6 +416,9 @@
|
||||
"omorphia.component.badge.label.returned": {
|
||||
"defaultMessage": "Returned"
|
||||
},
|
||||
"omorphia.component.badge.label.safe": {
|
||||
"defaultMessage": "Pass"
|
||||
},
|
||||
"omorphia.component.badge.label.scheduled": {
|
||||
"defaultMessage": "Scheduled"
|
||||
},
|
||||
@@ -425,6 +428,9 @@
|
||||
"omorphia.component.badge.label.unlisted": {
|
||||
"defaultMessage": "Unlisted"
|
||||
},
|
||||
"omorphia.component.badge.label.unsafe": {
|
||||
"defaultMessage": "Fail"
|
||||
},
|
||||
"omorphia.component.badge.label.withheld": {
|
||||
"defaultMessage": "Withheld"
|
||||
},
|
||||
|
||||
201
packages/ui/src/utils/auto-icons.ts
Normal file
201
packages/ui/src/utils/auto-icons.ts
Normal file
@@ -0,0 +1,201 @@
|
||||
import {
|
||||
ArchiveIcon,
|
||||
BoxIcon,
|
||||
BracesIcon,
|
||||
CalendarIcon,
|
||||
CardIcon,
|
||||
CurrencyIcon,
|
||||
FileArchiveIcon,
|
||||
FileCodeIcon,
|
||||
FileIcon,
|
||||
FileImageIcon,
|
||||
FileTextIcon,
|
||||
FolderOpenIcon,
|
||||
GithubIcon,
|
||||
GlassesIcon,
|
||||
GlobeIcon,
|
||||
InfoIcon,
|
||||
IssuesIcon,
|
||||
LinkIcon,
|
||||
LockIcon,
|
||||
PackageOpenIcon,
|
||||
PaintbrushIcon,
|
||||
PayPalIcon,
|
||||
PlugIcon,
|
||||
PolygonIcon,
|
||||
UnknownIcon,
|
||||
UpdatedIcon,
|
||||
USDCColorIcon,
|
||||
XCircleIcon,
|
||||
XIcon,
|
||||
} from '@modrinth/assets'
|
||||
import type { ProjectStatus, ProjectType } from '@modrinth/utils'
|
||||
import type { Component } from 'vue'
|
||||
|
||||
export const PROJECT_TYPE_ICONS: Record<ProjectType, Component> = {
|
||||
mod: BoxIcon,
|
||||
modpack: PackageOpenIcon,
|
||||
resourcepack: PaintbrushIcon,
|
||||
shader: GlassesIcon,
|
||||
plugin: PlugIcon,
|
||||
datapack: BracesIcon,
|
||||
project: BoxIcon,
|
||||
}
|
||||
|
||||
export const PAYMENT_METHOD_ICONS: Record<string, Component> = {
|
||||
card: CardIcon,
|
||||
cashapp: CurrencyIcon,
|
||||
paypal: PayPalIcon,
|
||||
}
|
||||
|
||||
export const SOCIAL_PLATFORM_ICONS: Record<string, Component> = {
|
||||
discord: GithubIcon,
|
||||
github: GithubIcon,
|
||||
}
|
||||
|
||||
export const SEVERITY_ICONS: Record<string, Component> = {
|
||||
info: InfoIcon,
|
||||
warning: IssuesIcon,
|
||||
error: XCircleIcon,
|
||||
critical: XCircleIcon,
|
||||
}
|
||||
|
||||
export const PROJECT_STATUS_ICONS: Record<ProjectStatus, Component> = {
|
||||
approved: GlobeIcon,
|
||||
unlisted: LinkIcon,
|
||||
withheld: LinkIcon,
|
||||
private: LockIcon,
|
||||
scheduled: CalendarIcon,
|
||||
draft: FileTextIcon,
|
||||
archived: ArchiveIcon,
|
||||
rejected: XIcon,
|
||||
processing: UpdatedIcon,
|
||||
unknown: UnknownIcon,
|
||||
}
|
||||
|
||||
export const DIRECTORY_ICONS: Record<string, Component> = {
|
||||
config: FolderOpenIcon,
|
||||
world: FolderOpenIcon,
|
||||
resourcepacks: PaintbrushIcon,
|
||||
_default: FolderOpenIcon,
|
||||
}
|
||||
|
||||
const CURRENCY_CONFIG: Record<string, { icon: Component; color: string }> = {
|
||||
usdc: { icon: USDCColorIcon, color: 'text-blue' },
|
||||
}
|
||||
|
||||
const BLOCKCHAIN_CONFIG: Record<string, { icon: Component; color: string }> = {
|
||||
polygon: { icon: PolygonIcon, color: 'text-purple' },
|
||||
}
|
||||
|
||||
const CODE_EXTENSIONS: string[] = [
|
||||
'json',
|
||||
'json5',
|
||||
'jsonc',
|
||||
'java',
|
||||
'kt',
|
||||
'kts',
|
||||
'sh',
|
||||
'bat',
|
||||
'ps1',
|
||||
'yml',
|
||||
'yaml',
|
||||
'toml',
|
||||
'js',
|
||||
'ts',
|
||||
'py',
|
||||
'rb',
|
||||
'php',
|
||||
'html',
|
||||
'css',
|
||||
'cpp',
|
||||
'c',
|
||||
'h',
|
||||
'rs',
|
||||
'go',
|
||||
] as const
|
||||
|
||||
const TEXT_EXTENSIONS: string[] = [
|
||||
'txt',
|
||||
'md',
|
||||
'log',
|
||||
'cfg',
|
||||
'conf',
|
||||
'properties',
|
||||
'ini',
|
||||
'sk',
|
||||
] as const
|
||||
const IMAGE_EXTENSIONS: string[] = ['png', 'jpg', 'jpeg', 'gif', 'svg', 'webp'] as const
|
||||
const ARCHIVE_EXTENSIONS: string[] = ['zip', 'jar', 'tar', 'gz', 'rar', '7z'] as const
|
||||
|
||||
export function getProjectTypeIcon(projectType: ProjectType): Component {
|
||||
return PROJECT_TYPE_ICONS[projectType] ?? BoxIcon
|
||||
}
|
||||
|
||||
export function getPaymentMethodIcon(method: string): Component {
|
||||
return PAYMENT_METHOD_ICONS[method] ?? UnknownIcon
|
||||
}
|
||||
|
||||
export function getSocialPlatformIcon(platform: string): Component {
|
||||
return SOCIAL_PLATFORM_ICONS[platform.toLowerCase()] ?? UnknownIcon
|
||||
}
|
||||
|
||||
export function getSeverityIcon(severity: string): Component {
|
||||
return SEVERITY_ICONS[severity] ?? InfoIcon
|
||||
}
|
||||
|
||||
export function getProjectStatusIcon(status: ProjectStatus): Component {
|
||||
return PROJECT_STATUS_ICONS[status] ?? UnknownIcon
|
||||
}
|
||||
|
||||
export function getDirectoryIcon(name: string): Component {
|
||||
return DIRECTORY_ICONS[name.toLowerCase()] ?? DIRECTORY_ICONS._default
|
||||
}
|
||||
|
||||
export function getFileExtensionIcon(extension: string): Component {
|
||||
const ext: string = extension.toLowerCase()
|
||||
|
||||
if (CODE_EXTENSIONS.includes(ext)) {
|
||||
return FileCodeIcon
|
||||
}
|
||||
if (TEXT_EXTENSIONS.includes(ext)) {
|
||||
return FileTextIcon
|
||||
}
|
||||
if (IMAGE_EXTENSIONS.includes(ext)) {
|
||||
return FileImageIcon
|
||||
}
|
||||
if (ARCHIVE_EXTENSIONS.includes(ext)) {
|
||||
return FileArchiveIcon
|
||||
}
|
||||
|
||||
return FileIcon
|
||||
}
|
||||
|
||||
export function getFileIcon(fileName: string): Component {
|
||||
const extension = fileName.split('.').pop()?.toLowerCase() || ''
|
||||
return getFileExtensionIcon(extension)
|
||||
}
|
||||
|
||||
export function getCurrencyIcon(currency: string): Component | null {
|
||||
const lower = currency.toLowerCase()
|
||||
const key = Object.keys(CURRENCY_CONFIG).find((k) => lower.includes(k))
|
||||
return key ? CURRENCY_CONFIG[key].icon : null
|
||||
}
|
||||
|
||||
export function getCurrencyColor(currency: string): string {
|
||||
const lower = currency.toLowerCase()
|
||||
const key = Object.keys(CURRENCY_CONFIG).find((k) => lower.includes(k))
|
||||
return key ? CURRENCY_CONFIG[key].color : 'text-contrast'
|
||||
}
|
||||
|
||||
export function getBlockchainIcon(blockchain: string): Component | null {
|
||||
const lower = blockchain.toLowerCase()
|
||||
const key = Object.keys(BLOCKCHAIN_CONFIG).find((k) => lower.includes(k))
|
||||
return key ? BLOCKCHAIN_CONFIG[key].icon : null
|
||||
}
|
||||
|
||||
export function getBlockchainColor(blockchain: string): string {
|
||||
const lower = blockchain.toLowerCase()
|
||||
const key = Object.keys(BLOCKCHAIN_CONFIG).find((k) => lower.includes(k))
|
||||
return key ? BLOCKCHAIN_CONFIG[key].color : 'text-contrast'
|
||||
}
|
||||
@@ -1,3 +1,4 @@
|
||||
export * from './auto-icons'
|
||||
export * from './common-messages'
|
||||
export * from './game-modes'
|
||||
export * from './notices'
|
||||
|
||||
Reference in New Issue
Block a user