fixed progress and alignment of style-change

app/Filament/Resources/StyleResource.php

@@ -48,6 +48,7 @@ class StyleResource extends Resource
                     ->disk('public')
                     ->directory('style_previews')
                     ->image()
+                    ->imageEditor()
                     ->required()
                     ->rules(['mimes:jpeg,png,bmp,gif,webp']),
                 Textarea::make('parameters')

app/Http/Controllers/Api/ImageController.php

@@ -47,9 +47,13 @@ class ImageController extends Controller
         // Fetch images from the database after synchronization
         $query = Image::orderBy('updated_at', 'desc');
 
-        // If user is not authenticated, filter by is_public
+        // If user is not authenticated, filter by is_public, but also include their temporary images
         if (!auth()->check()) {
-            $query->where('is_public', true);
+            $query->where(function ($q) {
+                $q->where('is_public', true)->orWhere('is_temp', true);
+            });
+        } else {
+            // If user is authenticated, show all their images
         }
 
         $newImageTimespanMinutes = Setting::where('key', 'new_image_timespan_minutes')->first()->value ?? 60; // Default to 60 minutes

config/filesystems.php

@@ -38,7 +38,7 @@ return [
 
         'public' => [
             'driver' => 'local',
-            'root' => storage_path('app/public'),
+            'root' => public_path('storage'),
             'url' => env('APP_URL').'/storage',
             'visibility' => 'public',
             'throw' => false,
@@ -70,7 +70,7 @@ return [
     */
 
     'links' => [
-        public_path('storage') => storage_path('app/public'),
+        public_path('storage') => public_path('storage'),
     ],
 
 ];

resources/js/Components/ImageContextMenu.vue

@@ -86,7 +86,7 @@ const showStyleSelectorView = ref(false);
 }
 
 .context-menu-image-preview {
-  flex: 7; /* Takes 70% of the space (7 out of 10 parts) */
+  flex: 6; /* Takes 60% of the space (6 out of 10 parts) */
   display: flex;
   justify-content: center;
   align-items: center;
@@ -101,7 +101,7 @@ const showStyleSelectorView = ref(false);
 }
 
 .context-menu-options {
-  flex: 3; /* Takes 30% of the space (3 out of 10 parts) */
+  flex: 4; /* Takes 40% of the space (4 out of 10 parts) */
   display: flex;
   flex-direction: column;
 }

resources/js/Components/StyleSelector.vue

@@ -127,11 +127,8 @@ onMounted(() => {
 }
 
 .style-thumbnail {
-  width: 80px;
-  height: 80px;
-  object-fit: cover;
-  border-radius: 4px;
-  margin-right: 15px;
+  width: 120px;
+  padding-right: 10px;
 }
 
 .style-details h4 {