[6.x] Relationship UI adjustments

lang/de.json

@@ -600,7 +600,6 @@
     "Icon": "Icon",
     "Icon Set": "Icon-Set",
     "ID": "ID",
-    "ID not found": "ID nicht gefunden",
     "ID regenerated and Stache cleared": "ID neu generiert und Stache geleert",
     "If you're having trouble clicking the \":actionText\" button, copy and paste the URL below\ninto your web browser:": "Falls das Klicken auf den „:actionText“-Button nicht funktioniert, kopiere die folgende URL in deinen Webbrowser:",
     "Ignoring Section|Ignoring Sections": "Abschnitt wird ignoriert|Abschnitte werden ignoriert",

lang/de_CH.json

@@ -600,7 +600,6 @@
     "Icon": "Icon",
     "Icon Set": "Icon-Set",
     "ID": "ID",
-    "ID not found": "ID nicht gefunden",
     "ID regenerated and Stache cleared": "ID neu generiert und Stache geleert",
     "If you're having trouble clicking the \":actionText\" button, copy and paste the URL below\ninto your web browser:": "Falls das Klicken auf den «:actionText»-Button nicht funktioniert, kopiere die folgende URL in deinen Webbrowser:",
     "Ignoring Section|Ignoring Sections": "Abschnitt wird ignoriert|Abschnitte werden ignoriert",

lang/fr.json

@@ -601,7 +601,6 @@
     "Icon": "Icône",
     "Icon Set": "Jeu d'icônes",
     "ID": "ID",
-    "ID not found": "ID non trouvée",
     "ID regenerated and Stache cleared": "ID regénéré et Stache effacé",
     "If you're having trouble clicking the \":actionText\" button, copy and paste the URL below\ninto your web browser:": "Si vous ne parvenez pas à cliquer sur le bouton \":actionText\", copiez et collez l'URL ci-dessous dans votre navigateur Web :",
     "Ignoring Section|Ignoring Sections": "Ignorer la section|Ignorer les sections",

lang/nl.json

@@ -585,7 +585,6 @@
     "Icon": "Icoon",
     "Icon Set": "pictogram set",
     "ID": "ID",
-    "ID not found": "ID niet gevonden",
     "ID regenerated and Stache cleared": "ID's opnieuw gegenereerd en Stache geleegd",
     "If you're having trouble clicking the \":actionText\" button, copy and paste the URL below\ninto your web browser:": "Als je problemen ondervindt bij het klikken op de knop \":actionText\", kopieer en plak de onderstaande URL dan in je webbrowser:",
     "Image": "Afbeelding",

lang/ru.json

@@ -623,7 +623,6 @@
     "Icon": "Иконка",
     "Icon Set": "Набор иконок",
     "ID": "ID",
-    "ID not found": "ID не найден",
     "ID regenerated and Stache cleared": "ID обновлён, а Stache очищен",
     "If you're having trouble clicking the \":actionText\" button, copy and paste the URL below\ninto your web browser:": "Если у вас возникли проблемы с нажатием кнопки \":actionText\" скопируйте и вставьте URL ниже\nв свой веб-браузер:",
     "Image": "Изображения",

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

@@ -50,12 +50,18 @@ 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 __('messages.relationship_item_unavailable');
+        },
     },
 
     methods: {
@@ -67,6 +73,7 @@ export default {
 
         edit() {
             if (this.readOnly) return;
+            if (this.asset.invalid) return;
 
             this.editing = true;
         },

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

@@ -19,16 +19,20 @@
                     :alt="asset.basename"
                     v-if="thumbnail"
                 />
-                <file-icon :extension="asset.extension" v-else class="size-7" />
+                <file-icon :extension="asset.extension ?? 'generic'" v-else class="size-7" />
             </button>
             <button
                 v-if="showFilename"
                 @click="editOrOpen"
-                class="min-w-0 flex-1 truncate text-start text-sm leading-5 text-gray-600 dark:text-gray-400"
-                :title="__('Edit')"
+                class="min-w-0 flex-1 truncate text-start text-sm leading-5"
+                :class="{
+                    'text-gray-600 dark:text-gray-300': !asset.invalid,
+                    'text-gray-500 dark:text-gray-400': asset.invalid
+                }"
+                :title="asset.invalid ? invalidLabel : __('Edit')"
                 :aria-label="__('Edit Asset')"
             >
-                {{ asset.basename }}
+                {{ label }}
             </button>
             <div v-if="readOnly" v-text="asset.size" class="asset-filesize hidden shrink-0 px-2 text-sm leading-5 text-gray-600 dark:text-gray-400 @xs:block" />
         </td>

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

@@ -6,7 +6,7 @@
             'is-svg': canShowSvg,
             'is-file': !isImage && !canShowSvg,
         }"
-        :title="label"
+        :title="asset.invalid ? invalidLabel : label"
     >
         <asset-editor
             v-if="editing"
@@ -35,7 +35,7 @@
                     <template v-else>
                         <img :src="thumbnail" v-if="thumbnail" :title="label" class="rounded-md relative"  />
 
-                        <file-icon v-else :extension="asset.extension" class="h-full w-full p-4 relative" />
+                        <file-icon v-else :extension="asset.extension ?? 'generic'" class="h-full w-full p-4 relative" />
                     </template>
                 </template>
 
@@ -66,7 +66,15 @@
         </div>
 
         <div class="flex items-center justify-between w-full px-1" v-if="showFilename">
-            <div class="truncate w-18 text-xs text-gray-600 dark:text-gray-400 flex-1 px-2 py-1" v-tooltip="label" :class="{ 'text-center': !needsAlt }">
+            <div
+                class="truncate w-18 text-xs flex-1 px-2 py-1"
+                :class="{
+                    'text-center': !needsAlt,
+                    'text-gray-600 dark:text-gray-300': !asset.invalid,
+                    'text-gray-500 dark:text-gray-400': asset.invalid,
+                }"
+                v-tooltip="asset.invalid ? invalidLabel : label"
+            >
                 {{ label }}
             </div>
             <ui-badge as="button" size="sm" color="sky"  @click="editOrOpen" v-if="asset.isEditable && showSetAlt && needsAlt" :text="asset.values.alt ? '✅' : __('Set Alt')" />

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

@@ -1,17 +1,16 @@
 <template>
     <div
         class="shadow-ui-sm relative z-(--z-index-above) flex w-full h-full items-center gap-2 rounded-lg border border-gray-300 bg-white px-3 [&:has(.cursor-grab)]:px-1.5 py-1.5 mb-1.5 last:mb-0 text-base dark:border-gray-700 dark:with-contrast:border-gray-500 dark:bg-gray-900"
-        :class="{ invalid: item.invalid }"
     >
         <ui-icon name="handles" class="item-move sortable-handle size-4 cursor-grab text-gray-300 dark:text-gray-700" v-if="sortable" />
         <div class="flex flex-1 items-center line-clamp-1 text-sm text-gray-600 dark:text-gray-300">
             <ui-status-indicator v-if="item.status" :status="item.status" class="me-2" />
 
             <div
                 v-if="item.invalid"
-                v-tooltip.top="__('ID not found')"
+                v-tooltip.top="__('messages.relationship_item_unavailable')"
                 v-text="__(item.title)"
-                class="line-clamp-1 text-sm text-gray-600 dark:text-gray-300"
+                class="line-clamp-1 text-sm text-gray-500 dark:text-gray-400"
             />
 
             <a