added enabled/disable to styles

resources/js/Pages/Home.vue

@@ -30,13 +30,16 @@
       @close="currentOverlayComponent = null" 
     />
 
+    <div v-if="errorMessage" class="fixed bottom-4 right-4 bg-red-500 text-white p-4 rounded-lg shadow-lg z-50">
+      {{ errorMessage }}
+    </div>
     <StyledImageDisplay
       v-if="currentOverlayComponent === 'styledImageDisplay'"
       :image="styledImage"
       @keep="keepStyledImage"
       @delete="deleteStyledImage"
     />
-  </div>
+      </div>
 </template>
 
 <script setup>
@@ -55,6 +58,7 @@ const currentOverlayComponent = ref(null); // null, 'contextMenu', 'styleSelecto
 const contextMenuPosition = ref({ x: 0, y: 0 });
 const selectedImage = ref(null);
 const styledImage = ref(null); // To store the newly styled image
+const errorMessage = ref(null); // New ref for error messages
 let fetchInterval = null;
 
 const totalPages = computed(() => {
@@ -74,9 +78,17 @@ const fetchImages = () => {
     })
     .catch(error => {
       console.error('Error fetching images:', error);
+      showError(error.response?.data?.error || 'An unknown error occurred.');
     });
 };
 
+const showError = (message) => {
+  errorMessage.value = message;
+  setTimeout(() => {
+    errorMessage.value = null;
+  }, 5000); // Clear error after 5 seconds
+};
+
 const showContextMenu = (image, event) => {
   selectedImage.value = image;
   contextMenuPosition.value = { x: event.clientX, y: event.clientY };
@@ -113,8 +125,9 @@ const applyStyle = (style) => {
   })
   .catch(error => {
     console.error('Error applying style:', error);
-    // Handle error, maybe show a notification
+    showError(error.response?.data?.error || 'Failed to apply style.');
   });
+  currentOverlayComponent.value = null;
 };
 
 const keepStyledImage = (imageToKeep) => {