From 3fbdf236da4d28f0b6d665c4335f0f05d3e37368 Mon Sep 17 00:00:00 2001
From: "google-labs-jules[bot]"
 <161369871+google-labs-jules[bot]@users.noreply.github.com>
Date: Fri, 6 Feb 2026 13:46:04 +0000
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8=20Palette:=20Improve=20Login=20Exp?=
 =?UTF-8?q?erience=20&=20Accessibility?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Replace browser alert() with integrated inline error message in LoginView.
- Implement robust error synchronization between App and LoginView using unique object references.
- Add visually hidden labels for login and chat inputs for better accessibility.
- Add aria-label to icon-only buttons in the chat interface.
- Add pnpm-lock.yaml to .gitignore to keep commits focused.

Co-authored-by: BenjaminWie <54136562+BenjaminWie@users.noreply.github.com>
---
 .Jules/palette.md        |  3 +++
 .gitignore               |  1 +
 App.tsx                  |  8 ++++++--
 components/ChatView.tsx  |  6 ++++++
 components/LoginView.tsx | 38 +++++++++++++++++++++++++++++---------
 5 files changed, 45 insertions(+), 11 deletions(-)
 create mode 100644 .Jules/palette.md

diff --git a/.Jules/palette.md b/.Jules/palette.md
new file mode 100644
index 0000000..1a2a6d7
--- /dev/null
+++ b/.Jules/palette.md
@@ -0,0 +1,3 @@
+## 2025-05-22 - [Robust Error Synchronization in Login]
+**Learning:** When syncing external error props to local state (e.g., in a LoginView), a simple string comparison in `useEffect` fails if the same error is triggered twice after being cleared locally. Using a 'derived state' pattern with a reference tracker or passing errors as unique objects from the parent ensures that the UI can reliably re-trigger error states.
+**Action:** Use an object-based error state in the parent (e.g., `{ message: string } | null`) to ensure new references on every error event, and use `useRef` as a tracker in the child component to detect when a new error object has arrived.
diff --git a/.gitignore b/.gitignore
index a547bf3..6a1f366 100644
--- a/.gitignore
+++ b/.gitignore
@@ -8,6 +8,7 @@ pnpm-debug.log*
 lerna-debug.log*
 
 node_modules
+pnpm-lock.yaml
 dist
 dist-ssr
 *.local
diff --git a/App.tsx b/App.tsx
index 28169f5..7bc27a8 100644
--- a/App.tsx
+++ b/App.tsx
@@ -43,6 +43,7 @@ const App: React.FC = () => {
   const [sessions, setSessions] = useState<ChatSession[]>([]);
   const [currentSessionId, setCurrentSessionId] = useState<string | null>(null);
   const [isLoading, setIsLoading] = useState(false);
+  const [loginError, setLoginError] = useState<{ message: string } | null>(null);
   const [isFaqGenerating, setIsFaqGenerating] = useState(false);
   const [generatingStatus, setGeneratingStatus] = useState('');
   const [isSyncing, setIsSyncing] = useState(false);
@@ -100,8 +101,11 @@ const App: React.FC = () => {
     const user = users.find(u => u.email.toLowerCase() === email.toLowerCase() && u.status === 'aktiv');
     if (user) {
       setCurrentUser(user);
+      setLoginError(null);
     } else {
-      alert("Zugang verweigert. Nur verifizierte Wohnpro-Bewohner können sich im Wohnpro Guide anmelden.");
+      // Using an object to ensure a new reference even if the message is the same,
+      // which triggers a re-render and allows LoginView to re-show the error.
+      setLoginError({ message: "Zugang verweigert. Nur verifizierte Wohnpro-Bewohner können sich im Wohnpro Guide anmelden." });
     }
   };
 
@@ -256,7 +260,7 @@ const App: React.FC = () => {
             Synchronisiere mit Nextcloud...
           </div>
         )}
-        <LoginView onLogin={handleLogin} />
+        <LoginView onLogin={handleLogin} error={loginError} />
       </>
     );
   }
diff --git a/components/ChatView.tsx b/components/ChatView.tsx
index 43534f2..8716bca 100644
--- a/components/ChatView.tsx
+++ b/components/ChatView.tsx
@@ -150,7 +150,11 @@ const ChatView: React.FC<ChatViewProps> = ({ messages, onSendMessage, onEnterVoi
           <form onSubmit={handleSubmit} className="relative group">
             <div className="absolute inset-0 bg-black/5 blur-3xl rounded-full opacity-0 group-focus-within:opacity-100 transition-all duration-1000" />
             <div className="relative flex items-center">
+              <label htmlFor="chat-input" className="sr-only">
+                Deine Nachricht an den Wohnpro Guide
+              </label>
               <input
+                id="chat-input"
                 type="text"
                 value={input}
                 onChange={(e) => setInput(e.target.value)}
@@ -164,12 +168,14 @@ const ChatView: React.FC<ChatViewProps> = ({ messages, onSendMessage, onEnterVoi
                   onClick={onEnterVoice}
                   className="p-3.5 text-gray-400 hover:text-green-600 transition-all rounded-full hover:bg-gray-50 active:scale-90"
                   title="Sprachmodus"
+                  aria-label="Sprachmodus starten"
                 >
                   <MicIcon className="w-7 h-7" />
                 </button>
                 <button
                   type="submit"
                   disabled={!input.trim() || isLoading}
+                  aria-label="Nachricht senden"
                   className={`p-4 rounded-full transition-all active:scale-90 ${
                     input.trim() && !isLoading 
                     ? 'bg-black text-white shadow-xl shadow-black/20 hover:bg-gray-900' 
diff --git a/components/LoginView.tsx b/components/LoginView.tsx
index a7c3c0b..e0c0c04 100644
--- a/components/LoginView.tsx
+++ b/components/LoginView.tsx
@@ -1,27 +1,37 @@
 
-import React, { useState } from 'react';
-import { User } from '../types';
+import React, { useState, useEffect, useRef } from 'react';
 
 interface LoginViewProps {
   onLogin: (email: string) => void;
-  error?: string;
+  error?: { message: string } | null;
 }
 
 const LoginView: React.FC<LoginViewProps> = ({ onLogin, error: externalError }) => {
   const [email, setEmail] = useState('');
-  const [error, setError] = useState(externalError || '');
+  const [localError, setLocalError] = useState('');
+  const prevExternalErrorRef = useRef<{ message: string } | null | undefined>(externalError);
+
+  // Sync external error to local state using tracker pattern
+  useEffect(() => {
+    if (externalError && externalError !== prevExternalErrorRef.current) {
+      setLocalError(externalError.message);
+    }
+    prevExternalErrorRef.current = externalError;
+  }, [externalError]);
+
+  const error = localError;
 
   const handleSubmit = (e: React.FormEvent) => {
     e.preventDefault();
     if (!email) {
-      setError('Bitte gib deine Wohnpro E-Mail Adresse ein.');
+      setLocalError('Bitte gib deine Wohnpro E-Mail Adresse ein.');
       return;
     }
     onLogin(email);
   };
 
   return (
-    <div className="fixed inset-0 bg-white flex items-center justify-center p-6 animate-in fade-in duration-700">
+    <div className="fixed inset-0 bg-white flex items-center justify-center p-6 animate-in fade-in duration-700" role="main">
       <div className="w-full max-w-sm text-center">
         <div className="mb-12">
           <div className="w-16 h-16 bg-black rounded-3xl mx-auto flex items-center justify-center mb-6 shadow-xl shadow-black/10">
@@ -35,15 +45,25 @@ const LoginView: React.FC<LoginViewProps> = ({ onLogin, error: externalError })
         </div>
 
         <form onSubmit={handleSubmit} className="space-y-4">
-          <div className="relative group">
+          <div className="relative group text-left">
+            <label htmlFor="email-input" className="sr-only">
+              Wohnpro E-Mail Adresse
+            </label>
             <input
+              id="email-input"
               type="email"
               value={email}
-              onChange={(e) => { setEmail(e.target.value); setError(''); }}
+              onChange={(e) => { setEmail(e.target.value); setLocalError(''); }}
               placeholder="Wohnpro E-Mail Adresse"
+              aria-invalid={!!error}
+              aria-describedby={error ? "login-error" : undefined}
               className={`w-full bg-gray-50 border ${error ? 'border-red-200' : 'border-gray-100'} rounded-2xl px-6 py-4 focus:outline-none focus:ring-2 focus:ring-black/5 transition-all text-lg placeholder:text-gray-300`}
             />
-            {error && <p className="mt-2 text-sm text-red-500 text-left px-2">{error}</p>}
+            {error && (
+              <p id="login-error" role="alert" className="mt-2 text-sm text-red-500 px-2 animate-in fade-in slide-in-from-top-1 duration-300">
+                {error}
+              </p>
+            )}
           </div>
 
           <button