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

resources/js/Components/ImageContextMenu.vue

@@ -33,47 +33,14 @@
                 {{ image?.path }}
               </p>
             </div>
-            <div class="flex items-center gap-2">
-              <div class="relative">
-                <div class="flex items-center gap-2 rounded-full bg-white/80 px-3 py-1.5 text-xs font-medium shadow-sm dark:bg-slate-800/80">
-                  <span class="h-2 w-2 rounded-full"
-                        :class="aiAvailable ? 'bg-emerald-500' : 'bg-rose-500'"></span>
-                  <span class="text-slate-600 dark:text-slate-300">
-                    AI {{ aiAvailable ? 'verfügbar' : 'nicht verfügbar' }}
-                  </span>
-                  <button @click="showAiStatusDetails = !showAiStatusDetails"
-                          class="text-slate-400 hover:text-slate-600 dark:hover:text-slate-200">
-                    <font-awesome-icon :icon="['fas', 'info-circle']" class="h-3.5 w-3.5"/>
-                  </button>
-                </div>
-                <div v-if="showAiStatusDetails"
-                     class="absolute right-0 mt-2 w-64 rounded-lg bg-white p-3 shadow-lg dark:bg-slate-800">
-                  <div class="space-y-2 text-sm">
-                    <div class="flex justify-between">
-                      <span class="font-medium">API-Provider Status:</span>
-                      <span :class="aiAvailable ? 'text-emerald-600' : 'text-rose-600'">
-                        {{ aiAvailable ? 'Online' : 'Offline' }}
-                      </span>
-                    </div>
-                    <div v-if="!aiAvailable" class="text-xs text-slate-500">
-                      Einige Funktionen sind derzeit nicht verfügbar
-                    </div>
-                    <button @click="refreshAiStatus"
-                            class="mt-2 w-full rounded-md bg-slate-100 px-2 py-1 text-xs hover:bg-slate-200 dark:bg-slate-700 dark:hover:bg-slate-600">
-                      Status aktualisieren
-                    </button>
-                  </div>
-                </div>
-              </div>
-              <button
-                type="button"
-                class="rounded-full border border-white/20 bg-white/10 p-2 text-slate-900 shadow-sm transition hover:border-rose-400 hover:text-rose-400 focus:outline-none focus-visible:ring-2 focus-visible:ring-rose-400 dark:text-white"
-                @click="$emit('close')"
-                aria-label="Kontextmenü schließen"
-              >
-                <font-awesome-icon :icon="['fas', 'xmark']" class="h-5 w-5" />
-              </button>
-            </div>
+            <button
+              type="button"
+              class="rounded-full border border-white/20 bg-white/10 p-2 text-slate-900 shadow-sm transition hover:border-rose-400 hover:text-rose-400 focus:outline-none focus-visible:ring-2 focus-visible:ring-rose-400 dark:text-white"
+              @click="$emit('close')"
+              aria-label="Kontextmenü schließen"
+            >
+              <font-awesome-icon :icon="['fas', 'xmark']" class="h-5 w-5" />
+            </button>
           </div>
 
           <div v-if="!showStyleSelectorView" class="space-y-3">
@@ -200,13 +167,10 @@ const shouldShowDownload = computed(() => {
 
 const showStyleSelectorView = ref(false);
 const aiAvailable = ref(false);
-const aiStatus = ref({});
-const showAiStatusDetails = ref(false);
 
 const checkAiStatus = async () => {
   try {
     const response = await axios.get('/api/ai-status');
-    aiStatus.value = response.data;
     aiAvailable.value = response.data.some(provider => provider.available);
   } catch (error) {
     console.error('Error checking AI status:', error);
@@ -214,11 +178,6 @@ const checkAiStatus = async () => {
   }
 };
 
-const refreshAiStatus = async () => {
-  await checkAiStatus();
-  showAiStatusDetails.value = false;
-};
-
 onMounted(() => {
   checkAiStatus();
   // Check every 5 minutes

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>