fix: don't hide replacement details when no-dep col added

user needs to be able to reference the full details

Author: serhalp

app/components/Compare/PackageSelector.vue

@@ -34,7 +34,7 @@ const EASTER_EGG_TRIGGERS = new Set([
   'use the platform',
 ])
 
-// Check if "no dependency" option should show
+// Check if "no dependency" option should show in typeahead
 const showNoDependencyOption = computed(() => {
   if (packages.value.includes(NO_DEPENDENCY_ID)) return false
   const input = inputValue.value.toLowerCase().trim()

app/components/Compare/ReplacementSuggestion.vue

@@ -6,6 +6,8 @@ const props = defineProps<{
   replacement: ModuleReplacement
   /** Whether this suggestion should show the "no dep" action (native/simple) or just info (documented) */
   variant: 'nodep' | 'info'
+  /** Whether to show the action button (defaults to true) */
+  showAction?: boolean
 }>()
 
 const emit = defineEmits<{
@@ -63,7 +65,7 @@ const docUrl = computed(() => {
 
     <!-- No dependency action button -->
     <button
-      v-if="variant === 'nodep'"
+      v-if="variant === 'nodep' && showAction !== false"
       type="button"
       class="flex-shrink-0 px-2 py-1 text-xs font-medium bg-amber-500/20 hover:bg-amber-500/30 rounded transition-colors"
       :aria-label="$t('compare.no_dependency.add_column')"

app/pages/compare.vue

@@ -59,12 +59,10 @@ const gridColumns = computed(() =>
     }),
 )
 
-// Filter "no dep" suggestions to only show if not already added and we have room
-const actionableNoDepSuggestions = computed(() => {
-  if (packages.value.length >= 4) return [] // Can't add more
-  if (packages.value.includes(NO_DEPENDENCY_ID)) return [] // Already added
-  return noDepSuggestions.value
-})
+// Whether we can add the no-dep column (not already added and have room)
+const canAddNoDep = computed(
+  () => packages.value.length < 4 && !packages.value.includes(NO_DEPENDENCY_ID),
+)
 
 // Add "no dependency" column to comparison
 function addNoDep() {
@@ -140,13 +138,14 @@ useSeoMeta({
         <ComparePackageSelector v-model="packages" :max="4" />
 
         <!-- "No dep" replacement suggestions (native, simple) -->
-        <div v-if="actionableNoDepSuggestions.length > 0" class="mt-3 space-y-2">
+        <div v-if="noDepSuggestions.length > 0" class="mt-3 space-y-2">
           <CompareReplacementSuggestion
-            v-for="suggestion in actionableNoDepSuggestions"
+            v-for="suggestion in noDepSuggestions"
             :key="suggestion.forPackage"
             :package-name="suggestion.forPackage"
             :replacement="suggestion.replacement"
             variant="nodep"
+            :show-action="canAddNoDep"
             @add-no-dep="addNoDep"
           />
         </div>