From 47f0f1d7862e2ca4f2935c00ae79256a17798e18 Mon Sep 17 00:00:00 2001
From: Developer <developer@noveria.net>
Date: Tue, 9 Jun 2026 23:42:59 +0200
Subject: [PATCH] feat: Iris Chat Expand-Button + Modal
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Maximize2-Button im Chat-Header
- Expand-Modal (700px, 70vh) mit vollem Chat
- Teleport-Overlay, X-Close, Overlay-Klick
- Separater chatModalListRef für Modal-Scrolling
---
 .../src/components/dashboard/ChatPanel.vue    | 209 +++++++++++++++++-
 1 file changed, 206 insertions(+), 3 deletions(-)

diff --git a/frontend/src/components/dashboard/ChatPanel.vue b/frontend/src/components/dashboard/ChatPanel.vue
index 157e7ef..72ebde1 100644
--- a/frontend/src/components/dashboard/ChatPanel.vue
+++ b/frontend/src/components/dashboard/ChatPanel.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { ref, nextTick, watch } from 'vue'
-import { Bot, Send, LoaderCircle } from '@lucide/vue'
+import { Bot, Send, LoaderCircle, Maximize2, X } from '@lucide/vue'
 import type { ChatMessage } from '../../composables/useDashboardData'
 
 const props = defineProps<{
@@ -15,6 +15,8 @@ const emit = defineEmits<{
 
 const inputText = ref('')
 const chatListRef = ref<HTMLElement | null>(null)
+const chatModalListRef = ref<HTMLElement | null>(null)
+const chatModalOpen = ref(false)
 
 function sendMessage(): void {
   if (!inputText.value.trim()) return
@@ -26,8 +28,9 @@ watch(
   () => props.messages.length,
   async () => {
     await nextTick()
-    if (chatListRef.value) {
-      chatListRef.value.scrollTop = chatListRef.value.scrollHeight
+    const el = chatModalOpen.value ? chatModalListRef.value : chatListRef.value
+    if (el) {
+      el.scrollTop = el.scrollHeight
     }
   }
 )
@@ -44,6 +47,9 @@ watch(
         <LoaderCircle :size="10" class="spin" />
         <span>Busy</span>
       </div>
+      <button class="chat-expand-btn" @click="chatModalOpen = true" title="Open larger chat">
+        <Maximize2 :size="14" />
+      </button>
     </div>
 
     <!-- Focus Bar -->
@@ -90,6 +96,68 @@ watch(
       </button>
     </div>
   </div>
+
+  <!-- Expanded Chat Modal -->
+  <Teleport to="body">
+    <div v-if="chatModalOpen" class="chat-modal-overlay" @click.self="chatModalOpen = false">
+      <div class="chat-modal">
+        <div class="chat-modal-header">
+          <div class="chat-modal-header-left">
+            <Bot :size="18" class="chat-header-icon" />
+            <h2>Iris Chat</h2>
+          </div>
+          <div v-if="irisBusy" class="busy-badge">
+            <LoaderCircle :size="10" class="spin" />
+            <span>Busy</span>
+          </div>
+          <button class="chat-modal-close" @click="chatModalOpen = false" title="Close">
+            <X :size="16" />
+          </button>
+        </div>
+
+        <div v-if="irisBusy && irisFocus" class="focus-bar">
+          <span class="focus-label">Current Focus</span>
+          <span class="focus-text">{{ irisFocus }}</span>
+        </div>
+
+        <div ref="chatModalListRef" class="chat-modal-messages">
+          <div
+            v-for="msg in messages"
+            :key="msg.id"
+            :class="['msg-row', msg.sender === 'user' ? 'msg-user' : 'msg-iris']"
+          >
+            <div v-if="msg.sender === 'iris'" class="msg-avatar">
+              <Bot :size="14" />
+            </div>
+            <div class="msg-bubble">
+              <p>{{ msg.text }}</p>
+            </div>
+          </div>
+
+          <div v-if="messages.length === 0" class="empty-state">
+            <p>No messages yet. Start a conversation with Iris.</p>
+          </div>
+        </div>
+
+        <div class="chat-modal-input-row">
+          <input
+            v-model="inputText"
+            type="text"
+            placeholder="Type a message..."
+            @keyup.enter="sendMessage"
+          />
+          <button
+            class="send-btn"
+            :disabled="!inputText.trim()"
+            @click="sendMessage"
+            aria-label="Send"
+          >
+            <Send :size="16" />
+          </button>
+        </div>
+      </div>
+    </div>
+  </Teleport>
 </template>
 
 <style scoped>
@@ -152,6 +220,27 @@ watch(
   to { transform: rotate(360deg); }
 }
 
+/* Expand Button */
+.chat-expand-btn {
+  display: grid;
+  place-items: center;
+  width: 26px;
+  height: 26px;
+  border: 1px solid rgba(255, 255, 255, 0.06);
+  border-radius: 6px;
+  background: rgba(255, 255, 255, 0.03);
+  color: #6b7385;
+  cursor: pointer;
+  flex-shrink: 0;
+  transition: all 0.2s;
+  margin-left: 6px;
+}
+.chat-expand-btn:hover {
+  background: rgba(167, 139, 250, 0.12);
+  border-color: rgba(167, 139, 250, 0.25);
+  color: #a78bfa;
+}
+
 /* Focus Bar */
 .focus-bar {
   display: flex;
@@ -293,4 +382,118 @@ watch(
 .send-btn:not(:disabled):hover {
   opacity: 0.85;
 }
+
+/* Chat Modal Overlay */
+.chat-modal-overlay {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.55);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 9999;
+  backdrop-filter: blur(4px);
+  -webkit-backdrop-filter: blur(4px);
+}
+.chat-modal {
+  display: flex;
+  flex-direction: column;
+  width: 90%;
+  max-width: 700px;
+  height: 70vh;
+  max-height: 80vh;
+  background: rgba(22, 27, 34, 0.92);
+  border: 1px solid rgba(139, 124, 246, 0.15);
+  border-radius: 16px;
+  backdrop-filter: blur(16px);
+  -webkit-backdrop-filter: blur(16px);
+  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.4);
+  overflow: hidden;
+  animation: modal-in 0.2s ease-out;
+}
+@keyframes modal-in {
+  from { opacity: 0; transform: scale(0.95) translateY(10px); }
+  to { opacity: 1; transform: scale(1) translateY(0); }
+}
+.chat-modal-header {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 16px 20px;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
+}
+.chat-modal-header-left {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex: 1;
+}
+.chat-modal-header h2 {
+  margin: 0;
+  font-size: 15px;
+  font-weight: 600;
+  color: #e8eaf0;
+}
+.chat-modal-close {
+  display: grid;
+  place-items: center;
+  width: 28px;
+  height: 28px;
+  border: none;
+  border-radius: 6px;
+  background: rgba(255, 255, 255, 0.04);
+  color: #6b7385;
+  cursor: pointer;
+  transition: all 0.2s;
+  flex-shrink: 0;
+}
+.chat-modal-close:hover {
+  background: rgba(255, 255, 255, 0.08);
+  color: #e8eaf0;
+}
+
+.chat-modal-messages {
+  flex: 1;
+  overflow-y: auto;
+  padding: 16px 20px;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+.chat-modal-messages::-webkit-scrollbar {
+  width: 6px;
+}
+.chat-modal-messages::-webkit-scrollbar-track {
+  background: transparent;
+}
+.chat-modal-messages::-webkit-scrollbar-thumb {
+  background: rgba(139, 124, 246, 0.2);
+  border-radius: 3px;
+}
+
+.chat-modal-input-row {
+  display: flex;
+  gap: 8px;
+  padding: 12px 16px;
+  border-top: 1px solid rgba(255, 255, 255, 0.06);
+}
+.chat-modal-input-row input {
+  flex: 1;
+  padding: 10px 14px;
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  border-radius: 8px;
+  background: rgba(0, 0, 0, 0.3);
+  color: #e8eaf0;
+  font-size: 13px;
+  font-family: inherit;
+  outline: none;
+  transition: border-color 0.2s;
+  min-width: 0;
+}
+.chat-modal-input-row input:focus {
+  border-color: #a78bfa;
+}
+.chat-modal-input-row input::placeholder {
+  color: #6b7385;
+}
 </style>