fix: issues with files tab + tech rev cards (#4941)

Author: IMB11

apps/frontend/src/components/ui/create-project-version/components/DependencySelect.vue

@@ -6,22 +6,22 @@
 		:searchable="true"
 		search-placeholder="Search by name or paste ID..."
 		:no-options-message="searchLoading ? 'Loading...' : 'No results found'"
+		:disable-search-filter="true"
 		@search-input="(query) => handleSearch(query)"
-		:disableSearchFilter="true"
 	/>
 </template>
 
 <script lang="ts" setup>
+import type { ComboboxOption } from '@modrinth/ui'
 import { Combobox, injectModrinthClient, injectNotificationManager } from '@modrinth/ui'
-import type { DropdownOption } from '@modrinth/ui/src/components/base/Combobox.vue'
 import { useDebounceFn } from '@vueuse/core'
 import { defineAsyncComponent, h } from 'vue'
 
 const { addNotification } = injectNotificationManager()
 const projectId = defineModel<string>()
 
 const searchLoading = ref(false)
-const options = ref<DropdownOption<string>[]>([])
+const options = ref<ComboboxOption<string>[]>([])
 
 const { labrinth } = injectModrinthClient()
 

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

@@ -158,6 +158,9 @@ const client = injectModrinthClient()
 
 const severityOrder = { severe: 3, high: 2, medium: 1, low: 0 } as Record<string, number>
 
+const detailDecisions = ref<Map<string, 'safe' | 'malware'>>(new Map())
+const updatingDetails = ref<Set<string>>(new Set())
+
 function getFileHighestSeverity(
 	file: FlattenedFileReport,
 ): Labrinth.TechReview.Internal.DelphiSeverity {
@@ -303,9 +306,6 @@ async function copyToClipboard(code: string, detailId: string) {
 	}
 }
 
-const detailDecisions = ref<Map<string, 'safe' | 'malware'>>(new Map())
-const updatingDetails = ref<Set<string>>(new Set())
-
 function getDetailDecision(
 	detailId: string,
 	backendStatus: Labrinth.TechReview.Internal.DelphiReportIssueStatus,

apps/frontend/src/components/ui/servers/FileItem.vue

@@ -74,8 +74,14 @@ import {
 	RightArrowIcon,
 	TrashIcon,
 } from '@modrinth/assets'
-import { ButtonStyled, getFileExtensionIcon } from '@modrinth/ui'
-import { computed, ref, shallowRef } from 'vue'
+import {
+	ButtonStyled,
+	CODE_EXTENSIONS,
+	getFileExtensionIcon,
+	IMAGE_EXTENSIONS,
+	TEXT_EXTENSIONS,
+} from '@modrinth/ui'
+import { computed, h, ref, shallowRef } from 'vue'
 import { renderToString } from 'vue/server-renderer'
 import { useRoute, useRouter } from 'vue-router'
 
@@ -108,7 +114,6 @@ const emit = defineEmits<{
 const isDragOver = ref(false)
 const isDragging = ref(false)
 
-const textExtensions = Object.freeze(['txt', 'md', 'log', 'cfg', 'conf', 'properties', 'ini', 'sk'])
 const units = Object.freeze(['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB'])
 
 const route = shallowRef(useRoute())
@@ -203,9 +208,9 @@ const isEditableFile = computed(() => {
 		const ext = fileExtension.value
 		return (
 			!props.name.includes('.') ||
-			textExtensions.includes(ext) ||
-			codeExtensions.includes(ext) ||
-			imageExtensions.includes(ext)
+			TEXT_EXTENSIONS.includes(ext) ||
+			CODE_EXTENSIONS.includes(ext) ||
+			IMAGE_EXTENSIONS.includes(ext)
 		)
 	}
 	return false
@@ -252,32 +257,7 @@ const selectItem = () => {
 }
 
 const getDragIcon = async () => {
-	let iconToUse
-
-	if (props.type === 'directory') {
-		if (props.name === 'config') {
-			iconToUse = UiServersIconsCogFolderIcon
-		} else if (props.name === 'world') {
-			iconToUse = UiServersIconsEarthIcon
-		} else if (props.name === 'resourcepacks') {
-			iconToUse = PaletteIcon
-		} else {
-			iconToUse = FolderOpenIcon
-		}
-	} else {
-		const ext = fileExtension.value
-		if (codeExtensions.includes(ext)) {
-			iconToUse = UiServersIconsCodeFileIcon
-		} else if (textExtensions.includes(ext)) {
-			iconToUse = UiServersIconsTextFileIcon
-		} else if (imageExtensions.includes(ext)) {
-			iconToUse = UiServersIconsImageFileIcon
-		} else {
-			iconToUse = FileIcon
-		}
-	}
-
-	return await renderToString(h(iconToUse))
+	return await renderToString(h(iconComponent.value))
 }
 
 const handleDragStart = async (event: DragEvent) => {

packages/ui/src/utils/auto-icons.ts

@@ -88,7 +88,7 @@ const BLOCKCHAIN_CONFIG: Record<string, { icon: Component; color: string }> = {
 	polygon: { icon: PolygonIcon, color: 'text-purple' },
 }
 
-const CODE_EXTENSIONS: string[] = [
+export const CODE_EXTENSIONS: readonly string[] = [
 	'json',
 	'json5',
 	'jsonc',
@@ -115,7 +115,7 @@ const CODE_EXTENSIONS: string[] = [
 	'go',
 ] as const
 
-const TEXT_EXTENSIONS: string[] = [
+export const TEXT_EXTENSIONS: readonly string[] = [
 	'txt',
 	'md',
 	'log',
@@ -125,7 +125,7 @@ const TEXT_EXTENSIONS: string[] = [
 	'ini',
 	'sk',
 ] as const
-const IMAGE_EXTENSIONS: string[] = ['png', 'jpg', 'jpeg', 'gif', 'svg', 'webp'] as const
+export const IMAGE_EXTENSIONS: readonly 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 {