feat: implement dependency deletion modal for content tab (#6410)

* feat: implement dependency deletion modal for content tab

* fix: handle bulk delete state

* fix: lint

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

@@ -61,6 +61,7 @@ interface Props {
 	showCheckbox?: boolean
 	hideDelete?: boolean
 	hideActions?: boolean
+	inline?: boolean
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -82,12 +83,14 @@ const props = withDefaults(defineProps<Props>(), {
 	showCheckbox: false,
 	hideDelete: false,
 	hideActions: false,
+	inline: false,
 })
 
 const selected = defineModel<boolean>('selected')
 
 const emit = defineEmits<{
 	'update:enabled': [value: boolean]
+	select: [value: boolean, event?: MouseEvent]
 	delete: [event: MouseEvent]
 	update: []
 	switchVersion: []
@@ -124,8 +127,10 @@ const deleteHovered = ref(false)
 <template>
 	<div
 		role="row"
-		class="flex h-[74px] items-center justify-between gap-4 px-3"
+		class="flex items-center justify-between"
 		:class="{
+			'h-[74px] gap-4 px-3': !inline,
+			'gap-3': inline,
 			'opacity-50 grayscale': disabled && !installing,
 			'opacity-50': installing,
 		}"
@@ -141,7 +146,7 @@ const deleteHovered = ref(false)
 				:model-value="selected ?? false"
 				:aria-label="formatMessage(messages.selectProject, { project: project.title })"
 				class="shrink-0"
-				@update:model-value="selected = $event"
+				@update:model-value="(value, event) => emit('select', value, event)"
 			/>
 
 			<div
@@ -150,7 +155,7 @@ const deleteHovered = ref(false)
 			>
 				<div
 					v-tooltip="installing ? formatMessage(commonMessages.installingLabel) : undefined"
-					class="relative shrink-0"
+					class="relative flex shrink-0 items-center"
 				>
 					<Avatar
 						:src="project.icon_url"
@@ -180,6 +185,7 @@ const deleteHovered = ref(false)
 						>
 							{{ project.title }}
 						</AutoLink>
+						<slot name="title-badges" />
 						<Tooltip
 							v-if="isClientOnly"
 							theme="dismissable-prompt"