feat: updated package claim visibility

Author: mikouaji

app/components/Package/ClaimPackageModal.vue

@@ -3,6 +3,8 @@ import { checkPackageName } from '~/utils/package-name'
 
 const props = defineProps<{
   packageName: string
+  packageScope?: string | null
+  canPublishToScope: boolean
 }>()
 
 const {
@@ -221,9 +223,19 @@ const previewPackageJson = computed(() => {
       </div>
 
       <!-- Availability status -->
-      <div v-if="checkResult.valid">
+      <template v-if="checkResult.valid">
         <div
-          v-if="checkResult.available"
+          v-if="isConnected && !canPublishToScope"
+          class="flex items-center gap-3 p-4 bg-red-500/10 border border-red-500/20 rounded-lg"
+        >
+          <span class="i-lucide:x text-red-500 w-5 h-5" aria-hidden="true" />
+          <p class="font-mono text-sm text-fg">
+            {{ $t('claim.modal.missing_permission', { scope: packageScope }) }}
+          </p>
+        </div>
+
+        <div
+          v-else-if="checkResult.available"
           class="flex items-center gap-3 p-4 bg-green-500/10 border border-green-500/20 rounded-lg"
         >
           <span class="i-lucide:check text-green-500 w-5 h-5" aria-hidden="true" />
@@ -237,10 +249,10 @@ const previewPackageJson = computed(() => {
           <span class="i-lucide:x text-red-500 w-5 h-5" aria-hidden="true" />
           <p class="font-mono text-sm text-fg">{{ $t('claim.modal.taken') }}</p>
         </div>
-      </div>
+      </template>
 
       <!-- Similar packages warning -->
-      <div v-if="checkResult.similarPackages?.length && checkResult.available">
+      <template v-if="checkResult.similarPackages?.length && checkResult.available">
         <div
           :class="
             hasDangerousSimilarPackages
@@ -290,7 +302,7 @@ const previewPackageJson = computed(() => {
             </li>
           </ul>
         </div>
-      </div>
+      </template>
 
       <!-- Error message -->
       <div
@@ -336,7 +348,7 @@ const previewPackageJson = computed(() => {
         </div>
 
         <!-- Claim button -->
-        <div v-else class="space-y-3">
+        <div v-else-if="isConnected && canPublishToScope" class="space-y-3">
           <p class="text-sm text-fg-muted">
             {{ $t('claim.modal.publish_hint') }}
           </p>

app/pages/search.vue

@@ -332,14 +332,13 @@ const canPublishToScope = computed(() => {
   return orgMembership.value[scope] === true
 })
 
-// Show claim prompt when valid name, available, connected, and has permission
+// Show claim prompt when valid name, available, either not connected or connected and has permission
 const showClaimPrompt = computed(() => {
   return (
-    isConnected.value &&
     isValidPackageName.value &&
     packageAvailability.value?.available === true &&
     packageAvailability.value.name === query.value.trim() &&
-    canPublishToScope.value &&
+    (!isConnected.value || (isConnected.value && canPublishToScope.value)) &&
     status.value !== 'pending'
   )
 })
@@ -569,7 +568,7 @@ defineOgImageComponent('Default', {
           <!-- Claim prompt - shown at top when valid name but no exact match -->
           <div
             v-if="showClaimPrompt && visibleResults.total > 0"
-            class="mb-6 p-4 bg-bg-subtle border border-border rounded-lg flex flex-col sm:flex-row sm:items-center gap-3 sm:gap-4"
+            class="mb-6 p-4 bg-bg-subtle border border-border rounded-lg sm:flex hidden flex-row sm:items-center gap-3 sm:gap-4"
           >
             <div class="flex-1 min-w-0">
               <p class="font-mono text-sm text-fg">
@@ -687,7 +686,7 @@ defineOgImageComponent('Default', {
             </div>
 
             <!-- Offer to claim the package name if it's valid -->
-            <div v-if="showClaimPrompt" class="max-w-md mx-auto text-center">
+            <div v-if="showClaimPrompt" class="max-w-md mx-auto text-center hidden sm:block">
               <div class="p-4 bg-bg-subtle border border-border rounded-lg">
                 <p class="text-sm text-fg-muted mb-3">{{ $t('search.want_to_claim') }}</p>
                 <button
@@ -741,6 +740,11 @@ defineOgImageComponent('Default', {
     </div>
 
     <!-- Claim package modal -->
-    <PackageClaimPackageModal ref="claimPackageModalRef" :package-name="query" />
+    <PackageClaimPackageModal
+      ref="claimPackageModalRef"
+      :package-name="query"
+      :package-scope="packageScope"
+      :can-publish-to-scope="canPublishToScope"
+    />
   </main>
 </template>