From e193e294992a52c3a13c42a97699db7db9dd0df9 Mon Sep 17 00:00:00 2001
From: Harkamal Randhawa <harkamalsr@gmail.com>
Date: Wed, 15 Apr 2026 23:12:23 -0600
Subject: [PATCH] fix contact layout and chat ui

---
 web/app/ai-chat/page.js | 65 ++++++++++++++++-------------
 web/app/chat/page.js    | 64 +++++++++++++++-------------
 web/app/contact/page.js | 92 ++++++++++++++++++++---------------------
 web/app/globals.css     |  4 ++
 4 files changed, 119 insertions(+), 106 deletions(-)

diff --git a/web/app/ai-chat/page.js b/web/app/ai-chat/page.js
index c059e3f4..6dbf101a 100644
--- a/web/app/ai-chat/page.js
+++ b/web/app/ai-chat/page.js
@@ -92,6 +92,7 @@ function AiChatPage() {
   const lastMessageIdRef = useRef(null);
   const fileInputRef = useRef(null);
   const lastScrolledIdRef = useRef(null);
+  const initialLoadDoneRef = useRef(false);
 
   useEffect(() => {
     if (!authLoading && !user) {
@@ -103,6 +104,7 @@ function AiChatPage() {
     if (messages.length === 0) return;
     const lastMsg = messages[messages.length - 1];
     if (lastMsg.id === lastScrolledIdRef.current) return;
+    if (!initialLoadDoneRef.current) return;
     lastScrolledIdRef.current = lastMsg.id;
     const area = messagesAreaRef.current;
     if (!area) return;
@@ -114,6 +116,7 @@ function AiChatPage() {
 
   const fetchMessages = useCallback(async (convId) => {
     if (!token || !convId) return;
+    initialLoadDoneRef.current = false;
     try {
       const res = await fetch(`${API_BASE}/api/v1/chat/conversations/${convId}/messages`, {
         headers: { Authorization: `Bearer ${token}` },
@@ -122,10 +125,17 @@ function AiChatPage() {
       const data = await res.json();
       if (Array.isArray(data)) {
         setMessages(data);
-        if (data.length > 0) lastMessageIdRef.current = data[data.length - 1].id;
+        if (data.length > 0) {
+          lastMessageIdRef.current = data[data.length - 1].id;
+          lastScrolledIdRef.current = data[data.length - 1].id;
+        }
+        setTimeout(() => {
+          const area = messagesAreaRef.current;
+          if (area) area.scrollTop = area.scrollHeight;
+          initialLoadDoneRef.current = true;
+        }, 50);
       }
     } catch {
-      // silent
     }
   }, [token]);
 
@@ -491,34 +501,31 @@ function AiChatPage() {
                   </div>
                 </button>
               ))}
-              {conversations.some(c => c.status === "CLOSED") && (
-                <>
-                  <button
-                    style={s.closedSectionToggle}
-                    onClick={() => setClosedExpanded(p => !p)}
-                  >
-                    <span>Closed ({conversations.filter(c => c.status === "CLOSED").length})</span>
-                    <span>{closedExpanded ? "▲" : "▼"}</span>
-                  </button>
-                  {closedExpanded && conversations.filter(c => c.status === "CLOSED").map((conv) => (
-                    <button
-                      key={conv.id}
-                      style={{ ...s.convItem, ...s.convItemClosed, ...(conv.id === conversation?.id ? s.convItemActive : {}) }}
-                      onClick={() => switchConversation(conv.id)}
-                    >
-                      <div style={s.convItemTop}>
-                        <span style={s.convItemSubject}>{conv.subject || `Conversation #${conv.id}`}</span>
-                        <span style={{ ...s.convStatusBadge, ...s.convStatusClosed }}>CLOSED</span>
-                      </div>
-                      <div style={s.convItemBottom}>
-                        <span style={s.convItemMode}>{conv.mode === "HUMAN" ? "👤 Live" : "🤖 AI"}</span>
-                        <span style={s.convItemDate}>{conv.createdAt ? new Date(conv.createdAt).toLocaleDateString() : ""}</span>
-                      </div>
-                    </button>
-                  ))}
-                </>
-              )}
             </div>
+            {conversations.some(c => c.status === "CLOSED") && (
+              <>
+                <button style={s.closedSectionToggle} onClick={() => setClosedExpanded(p => !p)}>
+                  <span>Closed ({conversations.filter(c => c.status === "CLOSED").length})</span>
+                  <span>{closedExpanded ? "▲" : "▼"}</span>
+                </button>
+                {closedExpanded && conversations.filter(c => c.status === "CLOSED").map((conv) => (
+                  <button
+                    key={conv.id}
+                    style={{ ...s.convItem, ...s.convItemClosed, ...(conv.id === conversation?.id ? s.convItemActive : {}) }}
+                    onClick={() => switchConversation(conv.id)}
+                  >
+                    <div style={s.convItemTop}>
+                      <span style={s.convItemSubject}>{conv.subject || `Conversation #${conv.id}`}</span>
+                      <span style={{ ...s.convStatusBadge, ...s.convStatusClosed }}>CLOSED</span>
+                    </div>
+                    <div style={s.convItemBottom}>
+                      <span style={s.convItemMode}>{conv.mode === "HUMAN" ? "👤 Live" : "🤖 AI"}</span>
+                      <span style={s.convItemDate}>{conv.createdAt ? new Date(conv.createdAt).toLocaleDateString() : ""}</span>
+                    </div>
+                  </button>
+                ))}
+              </>
+            )}
             <button style={s.newConvSidebarBtn} onClick={handleNewConversation}>
               + New Conversation
             </button>
diff --git a/web/app/chat/page.js b/web/app/chat/page.js
index 9c8e48f8..dbee3ed3 100644
--- a/web/app/chat/page.js
+++ b/web/app/chat/page.js
@@ -92,6 +92,7 @@ function ChatPage() {
   const lastMessageIdRef = useRef(null);
   const fileInputRef = useRef(null);
   const lastScrolledIdRef = useRef(null);
+  const initialLoadDoneRef = useRef(false);
 
   useEffect(() => {
     if (!authLoading && !user) {
@@ -103,6 +104,7 @@ function ChatPage() {
     if (messages.length === 0) return;
     const lastMsg = messages[messages.length - 1];
     if (lastMsg.id === lastScrolledIdRef.current) return;
+    if (!initialLoadDoneRef.current) return;
     lastScrolledIdRef.current = lastMsg.id;
     const area = messagesAreaRef.current;
     if (!area) return;
@@ -114,6 +116,7 @@ function ChatPage() {
 
   const fetchMessages = useCallback(async (convId) => {
     if (!token || !convId) return;
+    initialLoadDoneRef.current = false;
     try {
       const res = await fetch(`${API_BASE}/api/v1/chat/conversations/${convId}/messages`, {
         headers: { Authorization: `Bearer ${token}` },
@@ -128,10 +131,16 @@ function ChatPage() {
 
         if (data.length > 0) {
           lastMessageIdRef.current = data[data.length - 1].id;
+          lastScrolledIdRef.current = data[data.length - 1].id;
         }
+        setTimeout(() => {
+          const area = messagesAreaRef.current;
+          if (area) area.scrollTop = area.scrollHeight;
+          initialLoadDoneRef.current = true;
+        }, 50);
       }
-    } 
-    
+    }
+
     catch {
       setError("Failed to load messages.");
     }
@@ -495,34 +504,31 @@ function ChatPage() {
                   </div>
                 </button>
               ))}
-              {conversations.some(c => c.status === "CLOSED") && (
-                <>
-                  <button
-                    style={s.closedSectionToggle}
-                    onClick={() => setClosedExpanded(p => !p)}
-                  >
-                    <span>Closed ({conversations.filter(c => c.status === "CLOSED").length})</span>
-                    <span>{closedExpanded ? "▲" : "▼"}</span>
-                  </button>
-                  {closedExpanded && conversations.filter(c => c.status === "CLOSED").map((conv) => (
-                    <button
-                      key={conv.id}
-                      style={{ ...s.convItem, ...s.convItemClosed, ...(conv.id === conversation?.id ? s.convItemActive : {}) }}
-                      onClick={() => switchConversation(conv.id)}
-                    >
-                      <div style={s.convItemTop}>
-                        <span style={s.convItemSubject}>{conv.subject || `Conversation #${conv.id}`}</span>
-                        <span style={{ ...s.convStatusBadge, ...s.convStatusClosed }}>CLOSED</span>
-                      </div>
-                      <div style={s.convItemBottom}>
-                        <span style={s.convItemMode}>{conv.mode === "HUMAN" ? "👤 Live" : "🤖 AI"}</span>
-                        <span style={s.convItemDate}>{conv.createdAt ? new Date(conv.createdAt).toLocaleDateString() : ""}</span>
-                      </div>
-                    </button>
-                  ))}
-                </>
-              )}
             </div>
+            {conversations.some(c => c.status === "CLOSED") && (
+              <>
+                <button style={s.closedSectionToggle} onClick={() => setClosedExpanded(p => !p)}>
+                  <span>Closed ({conversations.filter(c => c.status === "CLOSED").length})</span>
+                  <span>{closedExpanded ? "▲" : "▼"}</span>
+                </button>
+                {closedExpanded && conversations.filter(c => c.status === "CLOSED").map((conv) => (
+                  <button
+                    key={conv.id}
+                    style={{ ...s.convItem, ...s.convItemClosed, ...(conv.id === conversation?.id ? s.convItemActive : {}) }}
+                    onClick={() => switchConversation(conv.id)}
+                  >
+                    <div style={s.convItemTop}>
+                      <span style={s.convItemSubject}>{conv.subject || `Conversation #${conv.id}`}</span>
+                      <span style={{ ...s.convStatusBadge, ...s.convStatusClosed }}>CLOSED</span>
+                    </div>
+                    <div style={s.convItemBottom}>
+                      <span style={s.convItemMode}>{conv.mode === "HUMAN" ? "👤 Live" : "🤖 AI"}</span>
+                      <span style={s.convItemDate}>{conv.createdAt ? new Date(conv.createdAt).toLocaleDateString() : ""}</span>
+                    </div>
+                  </button>
+                ))}
+              </>
+            )}
             <button style={s.newConvSidebarBtn} onClick={() => handleNewConversation()}>
               + New Conversation
             </button>
diff --git a/web/app/contact/page.js b/web/app/contact/page.js
index eb8274e9..5ae4b5e4 100644
--- a/web/app/contact/page.js
+++ b/web/app/contact/page.js
@@ -50,7 +50,7 @@ export default function ContactPage() {
       setSendSuccess(true);
       setSubject("");
       setBody("");
-    } catch (err) {
+    } catch {
       setSendError("Failed to send message. Please try again.");
     } finally {
       setSending(false);
@@ -61,67 +61,63 @@ export default function ContactPage() {
     <main className="info-page">
       <section className="info-hero">
         <h1 className="info-title">Contact Us</h1>
-        <p className="info-subtitle">Reach the team, find a location, or connect with store personnel.</p>
+        <p className="info-subtitle">Reach the team, find a location, or send us a message.</p>
         <div className="title-decoration"></div>
       </section>
 
-      <section className="info-content">
+      <section className="contact-layout">
         <div className="info-card">
-          <h2>General Contact</h2>
+          <h2>Get in Touch</h2>
           <p>Email: hello@leonspetstore.com.au</p>
           <p>Phone: (03) 9000 0000</p>
           <p>Hours: Mon–Sat, 9:00 AM – 6:00 PM</p>
-        </div>
 
-        {token && (
-          <div className="info-card">
-            <h2>Send Us a Message</h2>
-            {sendSuccess ? (
-              <p className="contact-success">Your message has been sent. We&apos;ll be in touch soon.</p>
-            ) : (
-              <form className="auth-form" onSubmit={handleSend}>
-                <label className="auth-label">
-                  Subject
-                  <input
-                    className="auth-input"
-                    type="text"
-                    value={subject}
-                    onChange={(e) => setSubject(e.target.value)}
-                    required
-                    maxLength={150}
-                  />
-                </label>
-                <label className="auth-label">
-                  Message
-                  <textarea
-                    className="auth-input"
-                    style={{ resize: "vertical" }}
-                    value={body}
-                    onChange={(e) => setBody(e.target.value)}
-                    required
-                    maxLength={2000}
-                    rows={6}
-                  />
-                </label>
-                {sendError && <p className="contact-error">{sendError}</p>}
-                <button className="auth-submit-btn" type="submit" disabled={sending}>
-                  {sending ? "Sending…" : "Send Message"}
-                </button>
-              </form>
-            )}
-          </div>
-        )}
+          {token && (
+            <div className="contact-form-section">
+              <h3>Send Us a Message</h3>
+              {sendSuccess ? (
+                <p className="contact-success">Your message has been sent. We&apos;ll be in touch soon.</p>
+              ) : (
+                <form className="auth-form" onSubmit={handleSend}>
+                  <label className="auth-label">
+                    Subject
+                    <input
+                      className="auth-input"
+                      type="text"
+                      value={subject}
+                      onChange={(e) => setSubject(e.target.value)}
+                      required
+                      maxLength={150}
+                    />
+                  </label>
+                  <label className="auth-label">
+                    Message
+                    <textarea
+                      className="auth-input"
+                      style={{ resize: "vertical" }}
+                      value={body}
+                      onChange={(e) => setBody(e.target.value)}
+                      required
+                      maxLength={2000}
+                      rows={5}
+                    />
+                  </label>
+                  {sendError && <p className="contact-error">{sendError}</p>}
+                  <button className="auth-submit-btn" type="submit" disabled={sending}>
+                    {sending ? "Sending…" : "Send Message"}
+                  </button>
+                </form>
+              )}
+            </div>
+          )}
+        </div>
 
         <div className="info-card">
           <h2>Store Locations</h2>
 
           {loading && <p>Loading locations...</p>}
-
           {error && <p style={{ color: "red" }}>Failed to load locations: {error}</p>}
-
-          {!loading && !error && locations.length === 0 && (
-            <p>No store locations found.</p>
-          )}
+          {!loading && !error && locations.length === 0 && <p>No store locations found.</p>}
 
           {!loading && !error && locations.length > 0 && (
             <div className="info-card-grid">
diff --git a/web/app/globals.css b/web/app/globals.css
index 29edace2..24bfbae7 100644
--- a/web/app/globals.css
+++ b/web/app/globals.css
@@ -3132,6 +3132,10 @@ img, video, iframe {
   max-width: 100%;
 }
 
+.contact-layout { display: grid; grid-template-columns: 1fr 2fr; gap: 1.5rem; max-width: 1200px; margin: 0 auto; padding: 0 2rem 3rem; }
+@media (max-width: 768px) { .contact-layout { grid-template-columns: 1fr; } }
+.contact-form-section { margin-top: 1.5rem; border-top: 1px solid #f0f0f0; padding-top: 1.5rem; }
+.contact-form-section h3 { margin: 0 0 1rem; font-size: 1rem; color: #333; }
 .contact-form { display: flex; flex-direction: column; gap: 1rem; }
 .contact-label { display: flex; flex-direction: column; gap: 0.4rem; font-weight: 500; color: #333; font-size: 0.95rem; }
 .contact-input, .contact-textarea { border: 1px solid #ddd; border-radius: 8px; padding: 0.6rem 0.8rem; font-size: 0.95rem; font-family: inherit; resize: vertical; }