Feat: Modview updates

apps/frontend/src/components/project-review/disclosures/view.vue

@@ -292,7 +292,7 @@ const sections = computed(() =>
 	@apply grid min-w-0 grid-cols-1 gap-1.5;
 }
 .disclosure-fields dt {
-	@apply text-sm font-semibold text-secondary;
+	@apply text-sm font-medium text-secondary;
 }
 .disclosure-fields dd {
 	@apply m-0 min-w-0 break-words leading-normal text-primary;
@@ -313,7 +313,7 @@ const sections = computed(() =>
 }
 @container disclosure-view (min-width: 32rem) {
 	.disclosure-fields {
-		@apply gap-2;
+		@apply gap-2.5;
 	}
 	.disclosure-fields > div {
 		@apply grid-cols-[142px_minmax(0,1fr)] gap-x-3;

apps/frontend/src/components/project-review/kdb-chip.vue

@@ -3,7 +3,12 @@
 		v-for="(shortcut, index) in shortcuts"
 		:key="index"
 		:aria-label="shortcut.label"
-		class="flex h-[18px] min-w-[18px] shrink-0 items-center justify-center rounded border border-solid border-surface-4 bg-surface-3 px-0.5 font-sans text-[10px] font-medium text-primary"
+		class="flex min-w-[18px] shrink-0 items-center justify-center rounded font-sans font-medium text-primary"
+		:class="{
+			'h-auto border-none bg-transparent !p-0 !text-sm shadow-none': tooltipContent,
+			'h-[18px] border border-solid border-surface-4 bg-surface-3 px-0.5 text-[10px]':
+				!tooltipContent,
+		}"
 		v-bind="$attrs"
 	>
 		{{ shortcut.text }}
@@ -17,15 +22,22 @@ import { computed, onMounted, ref } from 'vue'
 import { useModerationKeybinds, useModerationSettings } from '~/composables/moderation'
 
 defineOptions({ inheritAttrs: false })
-const props = defineProps<{ keybind: string }>()
+const props = defineProps<{
+	keybind: string
+	tooltipContent?: boolean
+}>()
 const keybinds = useModerationKeybinds()
 const settings = useModerationSettings()
 const isMac = ref(false)
 onMounted(() => {
 	isMac.value = navigator.platform.toUpperCase().includes('MAC')
 })
 const shortcuts = computed(() => {
-	if (!settings.value.get(moderationSettings.General.ShowShortcutKeybindHints)) return []
+	if (
+		!props.tooltipContent &&
+		!settings.value.get(moderationSettings.General.ShowShortcutKeybindHints)
+	)
+		return []
 	const binding = [...keybinds.value].find(([id]) => id === props.keybind)?.[1]
 	return (
 		binding?.keybind.map((definition) => {

apps/frontend/src/components/project-review/project-info/project/icon.vue

@@ -1,5 +1,8 @@
 <template>
 	<Section heading="Icon" :target="{ kind: 'icon' }">
+		<template #heading-after>
+			<KbdChip keybind="review-toggle-icon" class="ml-1" />
+		</template>
 		<template #right>
 			<EditButton v-if="!editing" section="Icon" @click="startEditing" />
 		</template>
@@ -12,7 +15,7 @@
 				aria-label="View enlarged project icon"
 				@click="viewer?.show(0)"
 			>
-				<Avatar :src="project.raw_icon_url || iconUrl" :alt="project.name" size="5rem" no-shadow />
+				<Avatar :key="iconUrl" :src="iconUrl" :alt="project.name" size="5rem" no-shadow />
 			</button>
 			<Avatar v-else :alt="project.name" size="5rem" no-shadow />
 			<ImageViewerEditor
@@ -41,6 +44,7 @@ import { useModerationKeybinds } from '~/composables/moderation'
 import { injectProjectReviewPageContext } from '~/providers/project-review'
 
 import ImageViewerActions from '../../image-viewer-actions.vue'
+import KbdChip from '../../kdb-chip.vue'
 import { useReviewShortcut } from '../../shortcuts'
 import EditButton from '../edit/button.vue'
 import IconEdit from '../edit/icon.vue'

apps/frontend/src/components/project-review/project-info/project/license.vue

@@ -22,7 +22,7 @@
 					}}
 				</span>
 				<TagItem
-					v-if="licenseRequiresSource(project.license.id)"
+					v-if="promptSourceRequired(project.license.id, project.project_types)"
 					v-tooltip="'License requires source code.'"
 					class="!border-orange !bg-surface-4 !px-1.5 !py-0.5 !text-orange"
 				>
@@ -48,7 +48,7 @@
 
 <script setup lang="ts">
 import { ExternalIcon, TagCategoryScrollTextIcon } from '@modrinth/assets'
-import { licenseRequiresSource } from '@modrinth/moderation'
+import { promptSourceRequired } from '@modrinth/moderation'
 import { TagItem } from '@modrinth/ui'
 import { computed, useTemplateRef } from 'vue'
 

apps/frontend/src/components/project-review/project-info/project/links.vue

@@ -16,7 +16,11 @@
 					<h4 class="m-0 flex items-center gap-2 text-sm font-medium text-secondary">
 						{{ link.label }}
 						<TagItem
-							v-if="link.key === 'source' && project && licenseRequiresSource(project.license.id)"
+							v-if="
+								link.key === 'source' &&
+								project &&
+								promptSourceRequired(project.license.id, project.project_types)
+							"
 							v-tooltip="'License requires source code.'"
 							class="!border-orange !bg-surface-4 !px-1.5 !py-0.5 !text-orange"
 						>
@@ -86,7 +90,7 @@ import {
 	TriangleAlertIcon,
 	WikiIcon,
 } from '@modrinth/assets'
-import { licenseRequiresSource } from '@modrinth/moderation'
+import { promptSourceRequired } from '@modrinth/moderation'
 import { injectModrinthClient, TagItem } from '@modrinth/ui'
 import { useQuery } from '@tanstack/vue-query'
 import { computed, ref, useTemplateRef, watch } from 'vue'

apps/frontend/src/components/project-review/queue-bar.vue

@@ -74,37 +74,68 @@
 							:flip="false"
 							theme="tooltip"
 							:distance="4"
+							panel-class="!p-0"
 						>
 							<span tabindex="0" class="cursor-default pb-1 pt-1.5 text-xs">
 								{{ column.label }}
 								<span class="ml-1 tabular-nums text-primary">{{ column.count }}</span>
 							</span>
 							<template #popper>
-								<div class="flex max-w-80 flex-col gap-2 py-1">
+								<div class="flex max-w-80 flex-col gap-2 p-2.5 pt-3.5">
 									<span class="font-semibold">{{ column.heading }}</span>
-									<QueueProjectList :project-ids="column.projects" :empty-message="column.empty" />
+									<QueueProjectList
+										v-model:search="queueSearches[column.label]"
+										:project-ids="column.projects"
+										:empty-message="column.empty"
+									/>
 								</div>
 							</template>
 						</FloatingMenu>
 					</template>
 				</div>
 			</div>
 			<div class="flex items-center gap-1">
-				<button type="button" class="queue-action" :disabled="busy" @click="exit">Exit</button>
+				<Tooltip :delay="750">
+					<template #popper>
+						<div class="flex items-center gap-2">
+							<KbdChip keybind="review-exit" tooltip-content />
+						</div>
+					</template>
+					<button type="button" class="queue-action" :disabled="busy" @click="exit">Exit</button>
+				</Tooltip>
 				<span class="mx-1.5 h-5 w-px bg-divider" aria-hidden="true" />
-				<button type="button" class="queue-action" :disabled="disabled || !canGoBack" @click="back">
-					<LeftArrowIcon class="mb-px" />
-					Back
-				</button>
-				<button
-					type="button"
-					class="queue-action"
-					:disabled="disabled || (!inQueue && !completed)"
-					@click="next"
-				>
-					{{ completed ? (remaining.length ? 'Next' : 'Finish') : 'Skip' }}
-					<RightArrowIcon class="mb-px" />
-				</button>
+				<Tooltip :delay="750">
+					<template #popper>
+						<div class="flex items-center gap-2">
+							<KbdChip keybind="review-back" tooltip-content />
+						</div>
+					</template>
+					<button
+						type="button"
+						class="queue-action"
+						:disabled="disabled || !canGoBack"
+						@click="back"
+					>
+						<LeftArrowIcon class="mb-px" />
+						Back
+					</button>
+				</Tooltip>
+				<Tooltip :delay="750">
+					<template #popper>
+						<div class="flex items-center gap-2">
+							<KbdChip keybind="skip-project" tooltip-content />
+						</div>
+					</template>
+					<button
+						type="button"
+						class="queue-action"
+						:disabled="disabled || (!inQueue && !completed)"
+						@click="next"
+					>
+						{{ completed ? (remaining.length ? 'Next' : 'Finish') : 'Skip' }}
+						<RightArrowIcon class="mb-px" />
+					</button>
+				</Tooltip>
 			</div>
 		</nav>
 	</footer>
@@ -150,14 +181,22 @@ import {
 	RotateCounterClockwiseIcon,
 	SettingsIcon,
 } from '@modrinth/assets'
-import { AutoLink, Button, FloatingMenu, TabbedModal, type TabbedModalTab } from '@modrinth/ui'
+import {
+	AutoLink,
+	Button,
+	FloatingMenu,
+	TabbedModal,
+	type TabbedModalTab,
+	Tooltip,
+} from '@modrinth/ui'
 import { computed, ref } from 'vue'
 
 import ModerationAppearance from '~/components/ui/moderation/settings/ModerationAppearance.vue'
 import ModerationKeybinds from '~/components/ui/moderation/settings/ModerationKeybinds.vue'
 import ModerationSettings from '~/components/ui/moderation/settings/ModerationSettings.vue'
 import { injectProjectReviewPageContext } from '~/providers/project-review'
 
+import KbdChip from './kdb-chip.vue'
 import { injectProjectReviewContext } from './layout/context'
 import QueueProjectList from './queue-project-list.vue'
 import { useReviewShortcut } from './shortcuts'
@@ -216,17 +255,21 @@ const {
 } = navigation
 
 const disabled = computed(() => busy.value || isLoading.value || !queue.hydrated)
+const queueSearches = ref<Record<string, string>>({
+	Complete: '',
+	Skipped: '',
+	Remaining: '',
+})
 const queueColumns = computed(() => {
 	const current = queue.currentQueue
-	const completedIds = new Set(current.completed)
 	const skippedIds = new Set(current.skipped)
 	return [
 		{
 			label: 'Complete',
 			heading: 'Completed projects',
 			empty: 'No completed projects yet',
 			count: current.completed.length,
-			projects: current.projectOrder.filter((id) => completedIds.has(id)),
+			projects: [...current.completed].reverse(),
 		},
 		{
 			label: 'Skipped',

apps/frontend/src/components/project-review/queue-project-list.vue

@@ -1,38 +1,38 @@
 <template>
-	<div class="flex w-72 max-w-[80vw] flex-col gap-2 py-1">
+	<div
+		class="flex max-h-[60dvh] w-72 max-w-[80vw] flex-col gap-2.5"
+		:class="{ 'h-[296px]': projectIds.length > 6 }"
+	>
 		<Input
 			v-if="projectIds.length > 6"
 			v-model="search"
+			class="shrink-0"
 			placeholder="Search..."
 			aria-label="Search"
 			size="small"
 		/>
-		<div
-			v-bind="containerProps"
-			class="max-h-[60dvh] overscroll-contain"
-			:style="{ height: `${Math.min(filteredIds.length, 8) * 32}px` }"
-		>
+		<div v-bind="containerProps" class="min-h-0 flex-1 overscroll-contain">
+			<span v-if="indexing" class="text-xs text-secondary">Searching projects…</span>
+			<span v-else-if="indexError && search.trim()" class="pt-1 text-xs text-secondary"
+				>Could not load project data</span
+			>
+			<span v-if="!filteredIds.length && !indexing" class="pt-1 text-secondary">{{
+				search.trim() ? 'No matching projects' : emptyMessage
+			}}</span>
 			<div v-bind="wrapperProps">
 				<div v-for="item in list" :key="item.data" class="flex h-8 items-center">
 					<QueueProjectPreview :project-id="item.data" />
 				</div>
 			</div>
 		</div>
-		<span v-if="indexing" class="text-xs text-secondary">Searching projects…</span>
-		<span v-else-if="indexError && search.trim()" class="text-xs text-secondary"
-			>Could not load project data</span
-		>
-		<span v-if="!filteredIds.length && !indexing" class="text-secondary">{{
-			search.trim() ? 'No matching projects' : emptyMessage
-		}}</span>
 	</div>
 </template>
 
 <script setup lang="ts">
 import { injectModrinthClient, Input } from '@modrinth/ui'
 import { useQuery, useQueryClient } from '@tanstack/vue-query'
 import { refDebounced, useVirtualList } from '@vueuse/core'
-import { computed, onScopeDispose, ref, shallowRef, watch } from 'vue'
+import { computed, onScopeDispose, shallowRef, watch } from 'vue'
 
 import {
 	type QueueProjectPreview as ProjectPreview,
@@ -49,7 +49,7 @@ const props = defineProps<{
 const client = injectModrinthClient()
 const queryClient = useQueryClient()
 
-const search = ref('')
+const search = defineModel<string>('search', { default: '' })
 const debouncedSearch = refDebounced(search, 250)
 const projects = shallowRef(new Map<string, ProjectPreview>())