updated the readme

resources/js/Components/StyledImageDisplay.vue

@@ -0,0 +1,39 @@
+<template>
+    <div class="fixed inset-0 bg-black bg-opacity-75 flex items-center justify-center z-50">
+        <div class="bg-white p-4 rounded-lg shadow-lg max-w-3xl w-full text-center">
+            <h2 class="text-xl font-bold mb-4">{{ __('styled_image_display.title') }}</h2>
+            <img :src="image.path" alt="Styled Image" class="max-w-full h-auto mx-auto mb-4 rounded-md" />
+            <div class="flex justify-center space-x-4">
+                <button
+                    @click="$emit('keep', image)"
+                    class="px-6 py-2 bg-green-500 text-white rounded-md hover:bg-green-600 focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-opacity-50"
+                >
+                    {{ __('styled_image_display.keep_button') }}
+                </button>
+                <button
+                    @click="$emit('delete', image)"
+                    class="px-6 py-2 bg-red-500 text-white rounded-md hover:bg-red-600 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-opacity-50"
+                >
+                    {{ __('styled_image_display.delete_button') }}
+                </button>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import { defineProps, defineEmits } from 'vue';
+
+const props = defineProps({
+    image: {
+        type: Object,
+        required: true,
+    },
+});
+
+const emits = defineEmits(['keep', 'delete']);
+</script>
+
+<style scoped>
+/* Add any specific styles for the modal here if needed */
+</style>

resources/js/Pages/Home.vue

@@ -29,6 +29,13 @@
       @back="goBackToContextMenu" 
       @close="currentOverlayComponent = null" 
     />
+
+    <StyledImageDisplay
+      v-if="currentOverlayComponent === 'styledImageDisplay'"
+      :image="styledImage"
+      @keep="keepStyledImage"
+      @delete="deleteStyledImage"
+    />
   </div>
 </template>
 
@@ -37,15 +44,17 @@ import Navigation from '../Components/Navigation.vue';
 import GalleryGrid from '../Components/GalleryGrid.vue';
 import ImageContextMenu from '../Components/ImageContextMenu.vue';
 import StyleSelector from '../Components/StyleSelector.vue';
+import StyledImageDisplay from '../Components/StyledImageDisplay.vue'; // Import the new component
 import axios from 'axios';
 import { ref, computed, onMounted, onUnmounted } from 'vue';
 
 const images = ref([]);
 const imagesPerPage = 12;
 const currentPage = ref(1);
-const currentOverlayComponent = ref(null); // null, 'contextMenu', 'styleSelector'
+const currentOverlayComponent = ref(null); // null, 'contextMenu', 'styleSelector', 'styledImageDisplay'
 const contextMenuPosition = ref({ x: 0, y: 0 });
 const selectedImage = ref(null);
+const styledImage = ref(null); // To store the newly styled image
 let fetchInterval = null;
 
 const totalPages = computed(() => {
@@ -89,17 +98,37 @@ const goBackToContextMenu = () => {
 
 const applyStyle = (style) => {
   console.log('Applying style:', style.title, 'to image:', selectedImage.value);
+  currentOverlayComponent.value = null; // Close style selector immediately
+  // You might want to show a loading indicator here
+
   axios.post('/api/images/style-change', {
     image_id: selectedImage.value.id,
     style_id: style.id,
   })
   .then(response => {
     console.log('Style change request successful:', response.data);
+    // Assuming the response contains the new styled image data
+    styledImage.value = response.data.styled_image; // Adjust based on your API response structure
+    currentOverlayComponent.value = 'styledImageDisplay'; // Show the new component
   })
   .catch(error => {
     console.error('Error applying style:', error);
+    // Handle error, maybe show a notification
   });
-  currentOverlayComponent.value = null;
+};
+
+const keepStyledImage = (imageToKeep) => {
+  console.log('Keeping styled image:', imageToKeep);
+  // Implement API call to mark image as kept/permanent if needed
+  // For now, just refresh the image list to show the new image
+  fetchImages();
+  currentOverlayComponent.value = null; // Close the display
+};
+
+const deleteStyledImage = (imageToDelete) => {
+  console.log('Deleting styled image:', imageToDelete);
+  // Implement API call to delete the temporary styled image
+  currentOverlayComponent.value = null; // Close the display
 };
 
 const prevPage = () => {