UX: Display file errors as alert in edit dialog to enhance visibility

Author: lastzero

frontend/src/dialog/photo/files.vue

@@ -10,6 +10,10 @@
           <v-card>
             <v-card-text class="white pa-0">
               <v-container fluid class="pa-0">
+                <v-alert
+                    :value="file.Error"
+                    type="error" class="my-0 text-capitalize"
+                >{{ file.Error }}</v-alert>
                 <v-layout row wrap fill-height
                           align-center
                           justify-center>
@@ -41,13 +45,13 @@
                                    @click.stop.prevent="downloadFile(file)">
                               <translate>Download</translate>
                             </v-btn>
-                            <v-btn v-if="features.edit && file.Type === 'jpg' && file.Error !== '' && !file.Primary" small depressed dark
+                            <v-btn v-if="features.edit && file.Type === 'jpg' && !file.Error && !file.Primary" small depressed dark
                                    color="primary-button"
                                    class="ma-0 action-primary"
                                    @click.stop.prevent="primaryFile(file)">
                               <translate>Primary</translate>
                             </v-btn>
-                            <v-btn v-if="features.edit && !file.Sidecar && file.Error !== '' && !file.Primary && file.Root === '/'" small
+                            <v-btn v-if="features.edit && !file.Sidecar && !file.Error && !file.Primary && file.Root === '/'" small
                                    depressed dark color="primary-button"
                                    class="ma-0 action-unstack"
                                    @click.stop.prevent="unstackFile(file)">
@@ -66,12 +70,6 @@
                           </td>
                           <td>{{ file.UID | uppercase }}</td>
                         </tr>
-                        <tr v-if="file.Error">
-                          <td>
-                            <translate>Error</translate>
-                          </td>
-                          <td><span class="body-2">{{ file.Error | uppercase }}</span></td>
-                        </tr>
                         <tr v-if="file.InstanceID" title="XMP">
                           <td>
                             <translate>Instance ID</translate>
@@ -162,7 +160,7 @@
                           </td>
                           <td>{{ file.MainColor | capitalize }}</td>
                         </tr>
-                        <tr v-if="file.Type === 'jpg'">
+                        <tr v-if="file.Chroma">
                           <td>
                             <translate>Chroma</translate>
                           </td>