Add an error state class for when folders are created with no name. Otherwise we can't differentiate between the placeholder in place when folders are being created and an error state

Author: JayGeorge

resources/css/components/assets.css

@@ -113,7 +113,10 @@
     grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
 
     [data-placeholder-shown] {
-        @apply overflow-hidden mt-2 text-center font-mono text-red-600 dark:text-red-600 text-xs text-ellipsis whitespace-nowrap lowercase;
+        @apply overflow-hidden mt-2 text-center font-mono text-xs text-ellipsis whitespace-nowrap lowercase;
+        &:has(+ .st-has-error) {
+            @apply text-red-600 dark:text-red-600;
+        }
     }
 }
 

resources/js/components/assets/Browser/AssetBrowserMixin.js

@@ -8,6 +8,7 @@ export default {
         path: String,
         restrictFolderNavigation: Boolean,
         creatingFolder: Boolean,
+        folderError: Boolean,
     },
 
     data() {

resources/js/components/assets/Browser/Browser.vue

@@ -266,6 +266,7 @@ export default {
             searchQuery: '',
             editedAssetId: this.initialEditingAssetId,
             creatingFolder: false,
+            folderError: false,
             uploads: [],
             page: 1,
             preferencesPrefix: `assets.${this.container.id}`,
@@ -364,6 +365,7 @@ export default {
                 restrictFolderNavigation: this.restrictFolderNavigation,
                 path: this.path,
                 creatingFolder: this.creatingFolder,
+                folderError: this.folderError,
             };
         },
 
@@ -375,7 +377,10 @@ export default {
                 'edit-asset': (event) => this.$emit('edit-asset', event),
                 'select-folder': this.selectFolder,
                 'create-folder': this.createFolder,
-                'cancel-creating-folder': () => (this.creatingFolder = false),
+                'cancel-creating-folder': () => {
+                    this.creatingFolder = false;
+                    this.folderError = false;
+                },
                 'prevent-dragging': (preventDragging) => (this.preventDragging = preventDragging),
             };
         },
@@ -446,6 +451,7 @@ export default {
 
         startCreatingFolder() {
             this.creatingFolder = true;
+            this.folderError = false;
         },
 
         listingRequestCompleted({ response }) {
@@ -559,6 +565,7 @@ export default {
                     this.folders.push(response.data);
                     this.folders = sortBy(this.folders, 'title');
                     this.creatingFolder = false;
+                    this.folderError = false;
 
                     this.$refs.grid?.clearNewFolderName();
                     this.$refs.table?.clearNewFolderName();
@@ -571,10 +578,12 @@ export default {
                             ? this.$toast.error(errors.directory[0])
                             : this.$toast.error(message);
 
+                        this.folderError = true;
                         this.$refs.grid?.focusNewFolderInput();
                         this.$refs.table?.focusNewFolderInput();
                     } else {
                         this.$toast.error(__('Something went wrong'));
+                        this.folderError = true;
                     }
                 });
         },

resources/js/components/assets/Browser/Grid.vue

@@ -66,7 +66,10 @@
                         :start-with-edit-mode="true"
                         submit-mode="enter"
                         :placeholder="__('Name')"
-                        class="flex w-[80px] items-center placeholder:lowercase justify-center overflow-hidden mt-2 text-center font-mono text-xs text-ellipsis whitespace-nowrap placeholder:text-gray-400 dark:placeholder:text-gray-500 text-gray-500"
+                        :class="[
+                            'flex w-[80px] items-center placeholder:lowercase justify-center overflow-hidden mt-2 text-center font-mono text-xs text-ellipsis whitespace-nowrap placeholder:text-gray-400 dark:placeholder:text-gray-500 text-gray-500',
+                            { 'st-has-error': folderError }
+                        ]"
                         @submit="$emit('create-folder', newFolderName)"
                         @cancel="
                             () => {