Runware/ComfyUI fixes, dashboard links, import action, Leonardo plugin, widget, added status field and test connection button

resources/js/Pages/Home.vue

@@ -31,6 +31,13 @@
               />
               <span>{{ currentTheme === 'light' ? __('api.dark_mode') : __('api.light_mode') }}</span>
             </button>
+            <div
+              v-if="!aiAvailable"
+              class="inline-flex items-center gap-2 rounded-full border border-rose-200 bg-rose-50 px-3 py-2 text-xs font-semibold uppercase tracking-[0.2em] text-rose-700 shadow-sm dark:border-rose-500/40 dark:bg-rose-500/10 dark:text-rose-200"
+            >
+              <span class="h-2 w-2 rounded-full bg-rose-500"></span>
+              <span>AI offline</span>
+            </div>
           </div>
         </div>
         <div class="mt-4 flex flex-wrap items-center gap-4 text-xs text-slate-500 dark:text-slate-300">
@@ -96,7 +103,7 @@
 </template>
 
 <script setup>
-import { Head, router } from '@inertiajs/vue3';
+import { Head } from '@inertiajs/vue3';
 import { computed, onMounted, onUnmounted, ref, watch } from 'vue';
 import axios from 'axios';
 import GalleryGrid from '../Components/GalleryGrid.vue';
@@ -123,6 +130,7 @@ const currentPage = ref(1);
 const currentOverlayComponent = ref(null);
 const selectedImage = ref(null);
 const styledImage = ref(null);
+const aiAvailable = ref(true);
 const processingProgress = ref(0);
 const isLoading = ref(false);
 const currentTheme = ref('light');
@@ -134,6 +142,7 @@ const toastMessage = ref(null);
 const toastVariant = ref('info');
 let toastTimer = null;
 let refreshTimer = null;
+let aiStatusTimer = null;
 
 const getImageIdentifier = (image) => image?.id ?? image?.image_id ?? null;
 
@@ -226,6 +235,18 @@ const toggleTheme = () => {
   applyTheme(newTheme);
 };
 
+const checkAiStatus = () => {
+  axios
+    .get('/api/ai-status')
+    .then((response) => {
+      aiAvailable.value = response.data.some((provider) => provider.available);
+    })
+    .catch((error) => {
+      console.error('Error checking AI status:', error);
+      aiAvailable.value = false;
+    });
+};
+
 const closeOverlays = () => {
   currentOverlayComponent.value = null;
   selectedImage.value = null;
@@ -236,24 +257,23 @@ const fetchImages = (options = { silent: false }) => {
     isRefreshing.value = true;
   }
 
-  router.reload({
-    only: ['images'],
-    preserveScroll: true,
-    onSuccess: (page) => {
-      if (Array.isArray(page.props.images)) {
-        images.value = page.props.images;
+  axios
+    .get('/api/images')
+    .then((response) => {
+      if (Array.isArray(response.data)) {
+        images.value = response.data;
         lastRefreshedAt.value = new Date();
       }
-    },
-    onError: () => {
+    })
+    .catch((error) => {
+      console.error('Error fetching images:', error);
       showToast('Die Galerie konnte nicht aktualisiert werden.', 'error');
-    },
-    onFinish: () => {
+    })
+    .finally(() => {
       if (!options.silent) {
         isRefreshing.value = false;
       }
-    },
-  });
+    });
 };
 
 const startAutoRefresh = (intervalMs) => {
@@ -538,6 +558,9 @@ onMounted(() => {
     .catch((error) => {
       console.error('Error fetching max copies setting:', error);
     });
+
+  checkAiStatus();
+  aiStatusTimer = setInterval(() => checkAiStatus(), 300000);
 });
 
 onUnmounted(() => {
@@ -547,5 +570,8 @@ onUnmounted(() => {
   if (toastTimer) {
     clearTimeout(toastTimer);
   }
+  if (aiStatusTimer) {
+    clearInterval(aiStatusTimer);
+  }
 });
 </script>