feat: better tooltips for mods in content tab hosting panel (#5679)

* feat: better tooltips for mods in content tab hosting panel

* feat: qa

packages/ui/src/layouts/shared/content-tab/components/ContentCardItem.vue

@@ -25,7 +25,12 @@ import { useVIntl } from '#ui/composables/i18n'
 import { commonMessages } from '#ui/utils/common-messages'
 import { truncatedTooltip } from '#ui/utils/truncate'
 
-import type { ContentCardProject, ContentCardVersion, ContentOwner } from '../types'
+import type {
+	ClientWarningType,
+	ContentCardProject,
+	ContentCardVersion,
+	ContentOwner,
+} from '../types'
 
 const { formatMessage } = useVIntl()
 
@@ -39,6 +44,8 @@ interface Props {
 	installing?: boolean
 	hasUpdate?: boolean
 	isClientOnly?: boolean
+	clientWarning?: ClientWarningType | null
+	hideSwitchVersion?: boolean
 	overflowOptions?: OverflowMenuOption[]
 	disabled?: boolean
 	showCheckbox?: boolean
@@ -55,6 +62,8 @@ const props = withDefaults(defineProps<Props>(), {
 	installing: false,
 	hasUpdate: false,
 	isClientOnly: false,
+	clientWarning: null,
+	hideSwitchVersion: false,
 	overflowOptions: undefined,
 	disabled: false,
 	showCheckbox: false,
@@ -83,6 +92,17 @@ const fileNameRef = ref<HTMLElement | null>(null)
 
 const isDisabled = computed(() => props.disabled || props.installing)
 
+const clientWarningMessage = computed(() => {
+	switch (props.clientWarning) {
+		case 'retained':
+			return commonMessages.clientRetainedWarning
+		case 'depends':
+			return commonMessages.clientDependsWarning
+		default:
+			return commonMessages.clientOnlyWarning
+	}
+})
+
 const { shift: shiftHeld } = useMagicKeys()
 const deleteHovered = ref(false)
 </script>
@@ -147,7 +167,7 @@ const deleteHovered = ref(false)
 							<TriangleAlertIcon class="size-4 shrink-0 text-orange" />
 							<template #popper>
 								<div class="max-w-[18rem] text-sm">
-									{{ formatMessage(commonMessages.clientOnlyWarning) }}
+									{{ formatMessage(clientWarningMessage) }}
 								</div>
 							</template>
 						</Tooltip>
@@ -260,7 +280,11 @@ const deleteHovered = ref(false)
 						<DownloadIcon class="size-5" />
 					</button>
 				</ButtonStyled>
-				<ButtonStyled v-else-if="hasSwitchVersionListener && version" circular type="transparent">
+				<ButtonStyled
+					v-else-if="hasSwitchVersionListener && version && !hideSwitchVersion"
+					circular
+					type="transparent"
+				>
 					<button
 						v-tooltip="formatMessage(commonMessages.switchVersionButton)"
 						:disabled="isDisabled"