[5.x] Soften unavailable relationship and asset item presentation

Unviewable or missing relationship and asset selections now render as a
muted, non-error placeholder with a tooltip covering both the deleted and
no-permission cases, instead of the red broken state. Also fixes a crash
where an unauthorized asset placeholder hit a TypeError in the asset field.
Frontend only; the uniform backend placeholder is unchanged so no existence
oracle is introduced.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

Author: jasonvarga

resources/css/components/assets.css

@@ -142,6 +142,10 @@
     box-shadow: 0 0 0 1px theme('colors.blue.DEFAULT');
 }
 
+.asset-tile.is-invalid {
+    @apply bg-gray-100 dark:bg-dark-650 border-gray-300 dark:border-dark-200 text-gray-600 dark:text-gray-400 cursor-default;
+}
+
 .asset-thumbnail {
     @apply border border-white dark:border-dark-950;
 }

resources/css/components/items.css

@@ -18,7 +18,7 @@
 
     &.invalid {
         .item-inner {
-            @apply border-red-300 dark:border-dark-red bg-red-100 dark:bg-red-400 text-red-500 dark:text-red-950;
+            @apply border-gray-300 dark:border-dark-200 bg-gray-100 dark:bg-dark-650 text-gray-600 dark:text-gray-400;
         }
     }
 

resources/js/components/fieldtypes/assets/Asset.js

@@ -53,11 +53,17 @@ export default {
         },
 
         label() {
-            return this.asset.basename;
+            return this.asset.invalid ? this.asset.id : this.asset.basename;
         },
 
         needsAlt() {
+            if (this.asset.invalid) return false;
+
             return (this.asset.isImage || this.asset.isSvg) && !this.asset.values.alt;
+        },
+
+        invalidLabel() {
+            return __('This item is unavailable. It may have been deleted, or you may not have permission to view it.');
         }
     },
 
@@ -66,6 +72,7 @@ export default {
 
         edit() {
             if (this.readOnly) return;
+            if (this.asset.invalid) return;
 
             this.editing = true;
         },

resources/js/components/fieldtypes/assets/AssetRow.vue

@@ -1,5 +1,5 @@
 <template>
-    <tr class="cursor-grab bg-white dark:bg-dark-750 hover:bg-gray-100 dark:hover:bg-dark-700">
+    <tr class="cursor-grab bg-white dark:bg-dark-750 hover:bg-gray-100 dark:hover:bg-dark-700" :class="{ 'is-invalid': asset.invalid }">
         <td class="flex items-center h-full">
             <div
                 v-if="canShowSvg"
@@ -24,10 +24,11 @@
                 v-if="showFilename"
                 @click="editOrOpen"
                 class="flex items-center flex-1 rtl:mr-3 ltr:ml-3 text-xs rtl:text-right ltr:text-left truncate w-full"
-                :title="__('Edit')"
+                :class="{ 'text-gray-600 dark:text-gray-400': asset.invalid }"
+                :title="asset.invalid ? invalidLabel : __('Edit')"
                 :aria-label="__('Edit Asset')"
             >
-                {{ asset.basename }}
+                {{ label }}
             </button>
 
             <button
@@ -71,6 +72,8 @@ export default {
 
     methods: {
         editOrOpen() {
+            if (this.asset.invalid) return;
+
             return this.readOnly ? this.open() : this.edit();
         }
     },

resources/js/components/fieldtypes/assets/AssetTile.vue

@@ -5,8 +5,9 @@
             'is-image': isImage && !canShowSvg,
             'is-svg': canShowSvg,
             'is-file': !isImage && !canShowSvg,
+            'is-invalid': asset.invalid,
         }"
-        :title="label"
+        :title="asset.invalid ? invalidLabel : label"
     >
         <asset-editor
             v-if="editing"
@@ -41,7 +42,7 @@
                 <div class="asset-controls">
                     <div class="flex items-center justify-center space-x-1 rtl:space-x-reverse">
                         <template v-if="!readOnly">
-                            <button @click="edit" class="btn btn-icon" :title="__('Edit')">
+                            <button v-if="!asset.invalid" @click="edit" class="btn btn-icon" :title="__('Edit')">
                                 <svg-icon name="micro/sharp-pencil" class="h-4 my-2" />
                             </button>
 

resources/js/components/inputs/relationship/Item.vue

@@ -10,7 +10,8 @@
 
             <div
                 v-if="item.invalid"
-                v-tooltip.top="__('An item with this ID could not be found')"
+                v-tooltip.top="__('This item is unavailable. It may have been deleted, or you may not have permission to view it.')"
+                class="truncate"
                 v-text="__(item.title)" />
 
             <a v-if="!item.invalid && editable" @click.prevent="edit" v-text="__(item.title)" class="truncate" v-tooltip="item.title" :href="item.edit_url" />