From bc353fa2c22fa5e9dca7b0e956e4c17f74e51606 Mon Sep 17 00:00:00 2001
From: soeren <soeren@sebfoto.de>
Date: Sun, 7 Dec 2025 21:36:10 +0100
Subject: [PATCH] buttons im frontend kleiner gemacht. AI status badge nur
 sichtbar, wenn das feature aktiviert ist.

---
 resources/js/Components/ImageContextMenu.vue |  1 +
 resources/js/Pages/Home.vue                  | 66 ++++++++++----------
 2 files changed, 35 insertions(+), 32 deletions(-)
diff --git a/resources/js/Components/ImageContextMenu.vue b/resources/js/Components/ImageContextMenu.vue
index fa806da..8f4ed7b 100644
--- a/resources/js/Components/ImageContextMenu.vue
+++ b/resources/js/Components/ImageContextMenu.vue
@@ -45,6 +45,7 @@
 
           <div v-if="!showStyleSelectorView" class="space-y-3">
             <button
+              v-if="props.allowAiStyles"
               type="button"
               class="flex w-full items-center justify-between gap-3 rounded-2xl border px-4 py-3 text-left font-semibold text-slate-900 transition focus:outline-none focus-visible:ring-2 dark:text-white"
               :class="[effectiveAiAvailable ? 'border-white/20 bg-white/40 hover:border-emerald-400 hover:bg-white/70 dark:border-white/10 dark:bg-white/5' : 'border-rose-200 bg-rose-50 cursor-not-allowed opacity-70']"
diff --git a/resources/js/Pages/Home.vue b/resources/js/Pages/Home.vue
index a5ea3b8..094ef17 100644
--- a/resources/js/Pages/Home.vue
+++ b/resources/js/Pages/Home.vue
@@ -2,43 +2,45 @@
   <Head title="Start" />
   <div class="min-h-screen bg-gradient-to-br from-slate-100 via-white to-slate-200 text-slate-900 transition-colors duration-500 dark:from-slate-950 dark:via-slate-900 dark:to-slate-950 dark:text-slate-100">
     <div class="mx-auto flex w-full max-w-7xl flex-col gap-6 px-2 py-8 sm:px-4 lg:px-6">
-      <header class="rounded-3xl border border-slate-200 bg-white/90 p-6 text-slate-900 shadow-2xl backdrop-blur transition-colors duration-300 dark:border-white/10 dark:bg-white/5 dark:text-white">
-        <div class="flex flex-wrap items-start justify-between gap-6">
-          <div>
+      <header class="relative rounded-3xl border border-slate-200 bg-white/90 p-6 text-slate-900 shadow-2xl backdrop-blur transition-colors duration-300 dark:border-white/10 dark:bg-white/5 dark:text-white">
+        <div class="absolute right-4 top-4 z-10 flex items-center gap-3 sm:right-6 sm:top-6">
+          <button
+            type="button"
+            class="inline-flex h-10 w-10 items-center justify-center rounded-full border border-slate-300 bg-white text-slate-900 shadow-sm transition hover:border-emerald-400 hover:text-emerald-600 focus:outline-none focus-visible:ring-2 focus-visible:ring-emerald-400 disabled:opacity-60 dark:border-white/20 dark:bg-white/10 dark:text-white dark:hover:text-emerald-200"
+            @click="handleManualRefresh"
+            :disabled="isRefreshing"
+            :title="isRefreshing ? 'Aktualisiere…' : 'Jetzt aktualisieren'"
+          >
+            <font-awesome-icon :icon="['fas', 'arrows-rotate']" class="h-5 w-5" :class="{ 'animate-spin': isRefreshing }" />
+            <span class="sr-only">{{ isRefreshing ? 'Aktualisiere…' : 'Jetzt aktualisieren' }}</span>
+          </button>
+          <button
+            type="button"
+            class="inline-flex h-10 w-10 items-center justify-center rounded-full border border-slate-300 bg-white text-slate-900 shadow-sm transition hover:border-cyan-400 hover:text-cyan-600 focus:outline-none focus-visible:ring-2 focus-visible:ring-cyan-400 dark:border-white/10 dark:bg-white/5 dark:text-white dark:hover:text-cyan-200"
+            @click="toggleTheme"
+            :title="currentTheme === 'light' ? __('api.dark_mode') : __('api.light_mode')"
+          >
+            <font-awesome-icon
+              :icon="currentTheme === 'light' ? ['fas', 'moon'] : ['fas', 'sun']"
+              class="h-5 w-5"
+            />
+            <span class="sr-only">{{ currentTheme === 'light' ? __('api.dark_mode') : __('api.light_mode') }}</span>
+          </button>
+        </div>
+        <div
+          v-if="allowAiStyles && !aiAvailable"
+          class="absolute right-4 top-16 z-10 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 sm:right-6 sm:top-20"
+        >
+          <span class="h-2 w-2 rounded-full bg-rose-500"></span>
+          <span>AI offline</span>
+        </div>
+        <div class="flex flex-col gap-3 sm:gap-4">
+          <div class="pr-20 sm:pr-0 sm:pt-1">
             <p class="text-xs uppercase tracking-[0.35em] text-slate-500 dark:text-slate-400">Live Gallery</p>
             <h1 class="mt-1 text-3xl font-semibold text-slate-900 dark:text-white sm:text-4xl">
               {{ props.galleryHeading }}
             </h1>
           </div>
-          <div class="flex flex-wrap items-center gap-3">
-            <button
-              type="button"
-              class="inline-flex items-center gap-2 rounded-full border border-slate-300 bg-white px-4 py-2 text-sm font-semibold text-slate-900 shadow-sm transition hover:border-emerald-400 hover:text-emerald-600 focus:outline-none focus-visible:ring-2 focus-visible:ring-emerald-400 disabled:opacity-60 dark:border-white/20 dark:bg-white/10 dark:text-white dark:hover:text-emerald-200"
-              @click="handleManualRefresh"
-              :disabled="isRefreshing"
-            >
-              <font-awesome-icon :icon="['fas', 'arrows-rotate']" class="h-4 w-4" :class="{ 'animate-spin': isRefreshing }" />
-              <span>{{ isRefreshing ? 'Aktualisiere…' : 'Jetzt aktualisieren' }}</span>
-            </button>
-            <button
-              type="button"
-              class="inline-flex items-center gap-2 rounded-full border border-slate-300 bg-white px-4 py-2 text-sm font-semibold text-slate-900 shadow-sm transition hover:border-cyan-400 hover:text-cyan-600 focus:outline-none focus-visible:ring-2 focus-visible:ring-cyan-400 dark:border-white/10 dark:bg-white/5 dark:text-white dark:hover:text-cyan-200"
-              @click="toggleTheme"
-            >
-              <font-awesome-icon
-                :icon="currentTheme === 'light' ? ['fas', 'moon'] : ['fas', 'sun']"
-                class="h-4 w-4"
-              />
-              <span>{{ currentTheme === 'light' ? __('api.dark_mode') : __('api.light_mode') }}</span>
-            </button>
-            <div
-              v-if="!effectiveAiAvailable"
-              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">
           <div class="inline-flex items-center gap-2 rounded-full bg-emerald-500/10 px-3 py-1 text-emerald-700 dark:text-emerald-200">
