Skip to content

Commit ceb761f

Browse files
IMB11IMB11
committed
feat: rough draft of tech review card
1 parent 5059017 commit ceb761f

File tree

5 files changed

+171
-194
lines changed

5 files changed

+171
-194
lines changed

apps/frontend/src/components/ui/moderation/delphi/BatchScanProgressAlert.vue renamed to apps/frontend/src/components/ui/moderation/BatchScanProgressAlert.vue

File renamed without changes.

‎apps/frontend/src/components/ui/moderation/ModerationDelphiReportCard.vue‎

Lines changed: 0 additions & 182 deletions
This file was deleted.

‎apps/frontend/src/components/ui/moderation/ModerationTechRevCard.vue‎

Lines changed: 163 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,163 @@
1+
<script setup lang="ts">
2+
import { CheckIcon, MoreVerticalIcon, ScanEyeIcon, XIcon } from '@modrinth/assets'
3+
import { Avatar, ButtonStyled } from '@modrinth/ui'
4+
import { computed, ref } from 'vue'
5+
import type { DelphiIssueResult } from '~/helpers/tech-review.dummy'
6+
7+
const props = defineProps<{
8+
item: DelphiIssueResult
9+
}>()
10+
11+
type Tab = 'Summary' | 'Thread' | 'Files'
12+
const tabs: readonly Tab[] = ['Summary', 'Thread', 'Files']
13+
const currentTab = ref<Tab>('Summary')
14+
15+
const severityColor = computed(() => {
16+
switch (props.item.report.severity) {
17+
case 'SEVERE':
18+
return 'text-red bg-highlight-red border-solid border-[1px] border-red'
19+
case 'HIGH':
20+
return 'text-orange bg-highlight-orange border-solid border-[1px] border-orange'
21+
case 'MEDIUM':
22+
return 'text-blue bg-highlight-blue border-solid border-[1px] border-blue'
23+
case 'LOW':
24+
default:
25+
return 'text-green bg-highlight-green border-solid border-[1px] border-green'
26+
}
27+
})
28+
29+
const statusColor = computed(() => {
30+
switch (props.item.issue.status) {
31+
case 'pending':
32+
return 'text-orange bg-orange/10'
33+
case 'approved':
34+
return 'text-green bg-green/10'
35+
case 'rejected':
36+
return 'text-red bg-red/10'
37+
}
38+
})
39+
40+
const createdAt = computed(() => new Date(props.item.report.created).toLocaleDateString())
41+
</script>
42+
43+
<template>
44+
<div
45+
class="overflow-hidden rounded-2xl border-[1px] border-solid border-surface-l4 bg-surface-l3"
46+
>
47+
<div class="flex flex-col gap-4 bg-surface-l3 p-4">
48+
<div class="flex items-center justify-between">
49+
<div class="flex items-center gap-4">
50+
<Avatar
51+
src="https://cdn.modrinth.com/data/AANobbMI/295862f4724dc3f78df3447ad6072b2dcd3ef0c9_96.webp"
52+
class="border-[1px] border-solid border-surface-l5 bg-surface-l4"
53+
size="4rem"
54+
/>
55+
56+
<div class="flex flex-col gap-1">
57+
<div class="flex items-center gap-2">
58+
<span class="my-auto text-xl font-semibold text-contrast">Sodium</span>
59+
<div
60+
class="flex items-center gap-1 rounded-full border-[1px] border-solid border-surface-l5 bg-surface-l4 px-2.5 py-1"
61+
>
62+
<div class="h-4 w-4 rounded-full bg-surface-l5"></div>
63+
<span class="text-sm font-medium text-secondary">MPK</span>
64+
</div>
65+
66+
<div
67+
class="rounded-full border-[1px] border-solid border-surface-l5 bg-surface-l4 px-2.5 py-1"
68+
>
69+
<span class="text-sm font-medium text-secondary">Auto-Flagged</span>
70+
</div>
71+
72+
<div
73+
class="rounded-full border-[1px] border-solid px-2.5 py-1"
74+
:class="severityColor"
75+
>
76+
<span class="text-sm font-medium">{{
77+
item.report.severity.charAt(0) + item.report.severity.slice(1).toLowerCase()
78+
}}</span>
79+
</div>
80+
</div>
81+
82+
<div class="flex items-center gap-1">
83+
<Avatar
84+
src="https://cdn.modrinth.com/user/TEZXhE2U/f4705a5f2388c65029ae2e59f1434b3e6e4de23a.png"
85+
class="border-[1px] border-solid border-surface-l5 bg-surface-l4"
86+
size="1.5rem"
87+
circle
88+
/>
89+
<span class="text-sm font-medium text-secondary">JellySquid</span>
90+
</div>
91+
</div>
92+
</div>
93+
94+
<div class="flex items-center gap-3">
95+
<span class="text-base text-secondary">{{ createdAt }}</span>
96+
<div class="flex items-center gap-2">
97+
<ButtonStyled circular color="green">
98+
<button><CheckIcon /></button>
99+
</ButtonStyled>
100+
101+
<ButtonStyled circular color="red">
102+
<button><XIcon /></button>
103+
</ButtonStyled>
104+
105+
<ButtonStyled>
106+
<button>
107+
<ScanEyeIcon />
108+
<span class="font-semibold">Scan</span>
109+
</button>
110+
</ButtonStyled>
111+
112+
<ButtonStyled circular>
113+
<button>
114+
<MoreVerticalIcon />
115+
</button>
116+
</ButtonStyled>
117+
</div>
118+
</div>
119+
</div>
120+
121+
<hr class="border-surface-l5" />
122+
123+
<!-- todo -->
124+
<div class="flex items-center gap-3">
125+
<button
126+
v-for="tab in tabs"
127+
:key="tab"
128+
class="border-b-2 px-4 py-2 text-base font-semibold transition-colors"
129+
:class="{
130+
'border-white text-white': currentTab === tab,
131+
'border-transparent text-secondary': currentTab !== tab,
132+
}"
133+
@click="currentTab = tab"
134+
>
135+
{{ tab }}
136+
</button>
137+
</div>
138+
</div>
139+
140+
<div class="min-h-[200px] border-t border-surface-l3 bg-surface-l2 p-4">
141+
<div v-if="currentTab === 'Summary'" class="flex min-h-[200px] items-center justify-center">
142+
<div class="text-center text-secondary">
143+
<p class="mt-1 text-sm">TBD</p>
144+
</div>
145+
</div>
146+
147+
<div
148+
v-else-if="currentTab === 'Thread'"
149+
class="flex min-h-[200px] items-center justify-center"
150+
>
151+
<div class="text-center text-secondary">
152+
<p class="mt-1 text-sm">TBD</p>
153+
</div>
154+
</div>
155+
156+
<div v-else class="flex min-h-[200px] items-center justify-center">
157+
<div class="text-center text-secondary">
158+
<p class="mt-1 text-sm">TBD</p>
159+
</div>
160+
</div>
161+
</div>
162+
</div>
163+
</template>

‎apps/frontend/src/pages/moderation/technical-review.vue‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,12 @@
11
<script setup lang="ts">
2-
import BatchScanProgressAlert, {
3-
type BatchScanProgress,
4-
} from '@/components/ui/moderation/delphi/BatchScanProgressAlert.vue'
52
import { FilterIcon, SearchIcon, SortAscIcon, SortDescIcon, XIcon } from '@modrinth/assets'
63
import { Button, DropdownSelect, Pagination } from '@modrinth/ui'
74
import { defineMessages, useVIntl } from '@vintl/vintl'
85
import Fuse from 'fuse.js'
6+
import BatchScanProgressAlert, {
7+
type BatchScanProgress,
8+
} from '~/components/ui/moderation/BatchScanProgressAlert.vue'
9+
import ModerationTechRevCard from '~/components/ui/moderation/ModerationTechRevCard.vue'
910
import { fetchDelphiIssues, fetchIssueTypeSchema, type OrderBy } from '~/helpers/tech-review'
1011
1112
// Data from backend helper (with dummy fallback)
@@ -275,11 +276,10 @@ const batchScanProgressInformation = computed<BatchScanProgress | undefined>(()
275276
<div
276277
v-else
277278
v-for="(item, idx) in paginatedItems"
278-
:key="(item as any)?.id ?? idx"
279-
class="universal-card p-4"
279+
:key="item.issue.id ?? idx"
280+
class=""
280281
>
281-
<!-- TODO: Replace with <TechReviewCard :item="item" /> -->
282-
<pre class="max-h-48 overflow-auto text-xs">{{ item }}</pre>
282+
<ModerationTechRevCard :item="item" />
283283
</div>
284284
</div>
285285

‎packages/moderation/src/types/reports.ts‎

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import type { DelphiReport, Project, Report, Thread, User, Version } from '@modrinth/utils'
1+
import type { Project, Report, Thread, User, Version } from '@modrinth/utils'
22

33
export interface OwnershipTarget {
44
name: string
@@ -16,10 +16,6 @@ export interface ExtendedReport extends Report {
1616
target?: OwnershipTarget
1717
}
1818

19-
export interface ExtendedDelphiReport extends DelphiReport {
20-
target?: OwnershipTarget
21-
}
22-
2319
export interface ReportQuickReply {
2420
label: string
2521
message: string | ((report: ExtendedReport) => Promise<string> | string)

0 commit comments

Comments
 (0)