ajaxter-chat 3.0.9 → 3.0.11

package/src/components/ChatWidget.tsx

@@ -50,6 +50,8 @@ export const ChatWidget: React.FC<ChatWidgetProps> = ({ theme: localTheme }) =>
   const [chatReturnCtx, setChatReturnCtx] = useState<UserListContext>('conversation');
   const [viewingTicketId, setViewingTicketId] = useState<string | null>(null);
   const [messageSoundEnabled, setMessageSoundEnabledState] = useState(true);
+  /** Stagger list animation only when opening from home burger menu */
+  const [listEntranceAnimation, setListEntranceAnimation] = useState(false);
 
   /* App state */
   const [tickets,      setTickets]      = useState<Ticket[]>(data?.sampleTickets ?? []);
@@ -172,7 +174,8 @@ export const ChatWidget: React.FC<ChatWidgetProps> = ({ theme: localTheme }) =>
   }, [data?.widget]);
 
   /* ── Navigation ──────────────────────────────────────────────────────── */
-  const handleCardClick = useCallback((ctx: UserListContext | 'ticket') => {
+  const handleCardClick = useCallback((ctx: UserListContext | 'ticket', options?: { fromMenu?: boolean }) => {
+    setListEntranceAnimation(!!options?.fromMenu);
     if (ctx === 'ticket') {
       setActiveTab('tickets');
       setScreen('tickets');
@@ -183,6 +186,7 @@ export const ChatWidget: React.FC<ChatWidgetProps> = ({ theme: localTheme }) =>
   }, []);
 
   const handleNavFromMenu = useCallback((ctx: UserListContext | 'ticket') => {
+    setListEntranceAnimation(false);
     clearChat();
     if (ctx === 'ticket') {
       setActiveTab('tickets');
@@ -199,6 +203,7 @@ export const ChatWidget: React.FC<ChatWidgetProps> = ({ theme: localTheme }) =>
   }, []);
 
   const handleSelectUser = useCallback((user: ChatUser, returnCtxOverride?: UserListContext) => {
+    setListEntranceAnimation(false);
     setChatReturnCtx(returnCtxOverride ?? userListCtx);
     const history = data?.sampleChats[user.uid] ?? [];
     selectUser(user, history);
@@ -211,22 +216,31 @@ export const ChatWidget: React.FC<ChatWidgetProps> = ({ theme: localTheme }) =>
   }, [data, selectUser, userListCtx]);
 
   const handleBackFromChat = useCallback(() => {
+    setListEntranceAnimation(false);
     clearChat();
     setUserListCtx(chatReturnCtx);
     setScreen('user-list');
   }, [clearChat, chatReturnCtx]);
 
   const handleOpenTicket = useCallback((id: string) => {
+    setListEntranceAnimation(false);
     setViewingTicketId(id);
     setScreen('ticket-detail');
     setActiveTab('tickets');
   }, []);
 
   const handleTabChange = useCallback((tab: BottomTab) => {
+    setListEntranceAnimation(false);
     setActiveTab(tab);
     setScreen(tab === 'home' ? 'home' : tab === 'chats' ? 'recent-chats' : 'tickets');
   }, []);
 
+  useEffect(() => {
+    if (!listEntranceAnimation) return;
+    const t = window.setTimeout(() => setListEntranceAnimation(false), 520);
+    return () => window.clearTimeout(t);
+  }, [listEntranceAnimation]);
+
   /* ── Block/Unblock ───────────────────────────────────────────────────── */
   const handleBlock = useCallback(() => {
     if (!activeUser) return;
@@ -409,10 +423,10 @@ export const ChatWidget: React.FC<ChatWidgetProps> = ({ theme: localTheme }) =>
         </button>
       )}
 
-      {/* ── Backdrop (mobile) ── */}
+      {/* ── Backdrop (visual only — does not close widget on click) ── */}
       {isOpen && (
         <div
-          onClick={closeDrawer}
+          aria-hidden
           style={{
             position: 'fixed', inset: 0, zIndex: 9997,
             backgroundColor: 'rgba(0,0,0,0.35)',
@@ -517,9 +531,11 @@ export const ChatWidget: React.FC<ChatWidgetProps> = ({ theme: localTheme }) =>
                       users={filteredUsers}
                       primaryColor={primaryColor}
                       viewerType={widgetConfig.viewerType ?? 'user'}
-                      onBack={() => setScreen('home')}
+                      onBack={() => { setListEntranceAnimation(false); setScreen('home'); }}
                       onSelectUser={handleSelectUser}
                       onBlockList={userListCtx === 'conversation' ? () => setScreen('block-list') : undefined}
+                      useHomeHeader={userListCtx === 'support' && widgetConfig.viewerType !== 'developer'}
+                      animateEntrance={listEntranceAnimation}
                     />
                   )}
 
@@ -563,6 +579,7 @@ export const ChatWidget: React.FC<ChatWidgetProps> = ({ theme: localTheme }) =>
                       chats={recentChats}
                       config={widgetConfig}
                       onSelectChat={u => handleSelectUser(u, listCtxForUser(u, viewerIsDev))}
+                      animateEntrance={listEntranceAnimation}
                     />
                   )}
 
@@ -570,8 +587,13 @@ export const ChatWidget: React.FC<ChatWidgetProps> = ({ theme: localTheme }) =>
                     <TicketScreen
                       tickets={tickets}
                       config={widgetConfig}
-                      onNewTicket={() => setScreen('ticket-new')}
-                      onSelectTicket={id => { setViewingTicketId(id); setScreen('ticket-detail'); }}
+                      onNewTicket={() => { setListEntranceAnimation(false); setScreen('ticket-new'); }}
+                      onSelectTicket={id => {
+                        setListEntranceAnimation(false);
+                        setViewingTicketId(id);
+                        setScreen('ticket-detail');
+                      }}
+                      animateEntrance={listEntranceAnimation}
                     />
                   )}
 

package/src/components/HomeScreen/index.tsx

@@ -3,9 +3,14 @@ import { WidgetConfig, UserListContext, Ticket } from '../../types';
 import { SlideNavMenu } from '../SlideNavMenu';
 import { truncateWords } from '../../utils/chat';
 
+export interface HomeNavigateOptions {
+  /** When true, list screens play stagger animation (home burger menu only) */
+  fromMenu?: boolean;
+}
+
 interface HomeScreenProps {
   config: WidgetConfig;
-  onNavigate: (ctx: UserListContext | 'ticket') => void;
+  onNavigate: (ctx: UserListContext | 'ticket', options?: HomeNavigateOptions) => void;
   /** Open a specific pending ticket (full detail) */
   onOpenTicket: (ticketId: string) => void;
   tickets: Ticket[];
@@ -46,7 +51,9 @@ export const HomeScreen: React.FC<HomeScreenProps> = ({ config, onNavigate, onOp
         primaryColor={config.primaryColor}
         chatType={config.chatType}
         viewerType={config.viewerType ?? 'user'}
-        onSelect={onNavigate}
+        onSelect={ctx => {
+          onNavigate(ctx, { fromMenu: true });
+        }}
       />
 
       {/* Top bar — burger left */}
@@ -105,7 +112,7 @@ export const HomeScreen: React.FC<HomeScreenProps> = ({ config, onNavigate, onOp
         </p>
 
         {/* Continue Conversations */}
-        <h2 style={{ margin: '0 0 12px', fontSize: 15, fontWeight: 800, color: '#0f172a' }}>Continue Conversations</h2>
+        <h2 style={{ margin: '0 0 12px', fontSize: 15, fontWeight: 800, color: '#0f172a' }}>Continue with tickets</h2>
         <div style={{ display: 'flex', flexDirection: 'column', gap: 10, marginBottom: 28 }}>
           {pendingTickets.length > 0 ? (
             pendingTickets.map(t => (
@@ -163,7 +170,7 @@ export const HomeScreen: React.FC<HomeScreenProps> = ({ config, onNavigate, onOp
 
         {/* Talk to our experts / staff tools */}
         <h2 style={{ margin: '0 0 12px', fontSize: 15, fontWeight: 800, color: '#0f172a' }}>
-          {viewerIsDev ? 'Support tools' : 'Talk to our experts'}
+          {viewerIsDev ? 'Support tools' : 'Talk to support experts'}
         </h2>
 
         {showSupport && (
@@ -306,7 +313,7 @@ export const HomeScreen: React.FC<HomeScreenProps> = ({ config, onNavigate, onOp
                   fill="#fff"
                 />
               </svg>
-              Call Us
+              Get Free Widget
             </button>
           </div>
         </div>

package/src/components/RecentChatsScreen/index.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState, useMemo, useRef, useEffect } from 'react';
 import { ChatUser, WidgetConfig } from '../../types';
 import { avatarColor, initials, formatTime } from '../../utils/chat';
 
@@ -10,54 +10,107 @@ interface RecentChatsScreenProps {
   chats:         RecentChat[];
   config:        WidgetConfig;
   onSelectChat:  (user: ChatUser) => void;
+  animateEntrance?: boolean;
 }
 
-export const RecentChatsScreen: React.FC<RecentChatsScreenProps> = ({ chats, config, onSelectChat }) => (
-  <div style={{ display:'flex', flexDirection:'column', height:'100%' }}>
-    <div style={{ background:`linear-gradient(135deg,${config.primaryColor},${config.primaryColor}cc)`, padding:'18px 18px 22px', flexShrink:0 }}>
-      <h2 style={{ margin:0, fontSize:20, fontWeight:800, color:'#fff', letterSpacing:'-0.02em' }}>Recent Chats</h2>
-      <p style={{ margin:'3px 0 0', fontSize:12, color:'rgba(255,255,255,0.8)' }}>Your conversation history</p>
-    </div>
+function matchesChat(chat: RecentChat, q: string): boolean {
+  if (!q.trim()) return true;
+  const s = q.trim().toLowerCase();
+  return (
+    chat.user.name.toLowerCase().includes(s) ||
+    chat.lastMessage.toLowerCase().includes(s)
+  );
+}
+
+export const RecentChatsScreen: React.FC<RecentChatsScreenProps> = ({
+  chats, config, onSelectChat, animateEntrance = false,
+}) => {
+  const [query, setQuery] = useState('');
+  const searchRef = useRef<HTMLInputElement>(null);
+
+  useEffect(() => {
+    searchRef.current?.focus();
+  }, []);
+
+  const filtered = useMemo(() => chats.filter(c => matchesChat(c, query)), [chats, query]);
 
-    <div style={{ flex:1, overflowY:'auto' }}>
-      {chats.length === 0 ? (
-        <div style={{ padding:'50px 24px', textAlign:'center' }}>
-          <div style={{ fontSize:36, marginBottom:10 }}>💬</div>
-          <div style={{ fontWeight:700, color:'#1a2332', marginBottom:6 }}>No chats yet</div>
-          <div style={{ fontSize:13, color:'#7b8fa1' }}>Start a conversation from home</div>
+  return (
+    <div style={{ display:'flex', flexDirection:'column', height:'100%' }}>
+      <div style={{ background:`linear-gradient(135deg,${config.primaryColor},${config.primaryColor}cc)`, padding:'18px 18px 14px', flexShrink:0 }}>
+        <h2 style={{ margin:0, fontSize:20, fontWeight:800, color:'#fff', letterSpacing:'-0.02em' }}>Recent Chats</h2>
+        <p style={{ margin:'3px 0 0', fontSize:12, color:'rgba(255,255,255,0.8)' }}>Your conversation history</p>
+      </div>
+
+      <div style={{ padding: '10px 14px', background: '#fff', borderBottom: '1px solid #eef0f5', flexShrink: 0 }}>
+        <div style={{ display: 'flex', alignItems: 'center', gap: 8, padding: '0 12px', borderRadius: 10, border: '1.5px solid #e5e7eb', background: '#f8fafc' }}>
+          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" style={{ flexShrink: 0, opacity: 0.55 }}>
+            <circle cx="11" cy="11" r="7" stroke="#64748b" strokeWidth="2" />
+            <path d="M20 20l-4-4" stroke="#64748b" strokeWidth="2" strokeLinecap="round" />
+          </svg>
+          <input
+            ref={searchRef}
+            type="search"
+            value={query}
+            onChange={e => setQuery(e.target.value)}
+            placeholder="Search chats…"
+            autoComplete="off"
+            aria-label="Search chats"
+            style={{
+              flex: 1,
+              minWidth: 0,
+              border: 'none',
+              outline: 'none',
+              background: 'transparent',
+              fontSize: 14,
+              padding: '10px 0',
+              fontFamily: 'inherit',
+              color: '#1a2332',
+            }}
+          />
         </div>
-      ) : chats.map((chat, i) => (
-        <button key={chat.id} onClick={() => onSelectChat(chat.user)} style={{
-          width:'100%', padding:'13px 16px', display:'flex', alignItems:'center', gap:13,
-          background:'transparent', border:'none', borderBottom:'1px solid #f0f2f5',
-          cursor:'pointer', textAlign:'left', animation:`cw-fadeUp 0.28s ease both`, animationDelay:`${i*0.05}s`,
-          transition:'background 0.14s',
-        }}
-        onMouseEnter={e=>(e.currentTarget as HTMLElement).style.background='#f8faff'}
-        onMouseLeave={e=>(e.currentTarget as HTMLElement).style.background='transparent'}
-        >
-          <div style={{ position:'relative', flexShrink:0 }}>
-            <div style={{ width:46, height:46, borderRadius:'50%', backgroundColor:avatarColor(chat.user.name), display:'flex', alignItems:'center', justifyContent:'center', color:'#fff', fontWeight:700, fontSize:15 }}>
-              {initials(chat.user.name)}
-            </div>
-            {chat.unread > 0 && (
-              <span style={{ position:'absolute', top:-2, right:-2, width:18, height:18, borderRadius:'50%', background:'#ef4444', color:'#fff', fontSize:10, fontWeight:700, display:'flex', alignItems:'center', justifyContent:'center', border:'2px solid #fff' }}>
-                {chat.unread}
-              </span>
-            )}
+      </div>
+
+      <div style={{ flex:1, overflowY:'auto' }}>
+        {filtered.length === 0 ? (
+          <div style={{ padding:'50px 24px', textAlign:'center' }}>
+            <div style={{ fontSize:36, marginBottom:10 }}>{query.trim() ? '🔍' : '💬'}</div>
+            <div style={{ fontWeight:700, color:'#1a2332', marginBottom:6 }}>{query.trim() ? 'No matches' : 'No chats yet'}</div>
+            <div style={{ fontSize:13, color:'#7b8fa1' }}>{query.trim() ? 'Try a different search' : 'Start a conversation from home'}</div>
           </div>
-          <div style={{ flex:1, minWidth:0 }}>
-            <div style={{ display:'flex', justifyContent:'space-between', marginBottom:3 }}>
-              <span style={{ fontWeight:700, fontSize:14, color:'#1a2332' }}>{chat.user.name}</span>
-              <span style={{ fontSize:11, color:'#b0bec5' }}>{formatTime(chat.lastTime)}</span>
+        ) : filtered.map((chat, i) => (
+          <button key={chat.id} onClick={() => onSelectChat(chat.user)} style={{
+            width:'100%', padding:'13px 16px', display:'flex', alignItems:'center', gap:13,
+            background:'transparent', border:'none', borderBottom:'1px solid #f0f2f5',
+            cursor:'pointer', textAlign:'left',
+            ...(animateEntrance ? { animation: `cw-fadeUp 0.28s ease both`, animationDelay: `${i * 0.05}s` } : {}),
+            transition:'background 0.14s',
+          }}
+          onMouseEnter={e=>(e.currentTarget as HTMLElement).style.background='#f8faff'}
+          onMouseLeave={e=>(e.currentTarget as HTMLElement).style.background='transparent'}
+          >
+            <div style={{ position:'relative', flexShrink:0 }}>
+              <div style={{ width:46, height:46, borderRadius:'50%', backgroundColor:avatarColor(chat.user.name), display:'flex', alignItems:'center', justifyContent:'center', color:'#fff', fontWeight:700, fontSize:15 }}>
+                {initials(chat.user.name)}
+              </div>
+              {chat.unread > 0 && (
+                <span style={{ position:'absolute', top:-2, right:-2, width:18, height:18, borderRadius:'50%', background:'#ef4444', color:'#fff', fontSize:10, fontWeight:700, display:'flex', alignItems:'center', justifyContent:'center', border:'2px solid #fff' }}>
+                  {chat.unread}
+                </span>
+              )}
             </div>
-            <div style={{ fontSize:13, color:'#7b8fa1', overflow:'hidden', textOverflow:'ellipsis', whiteSpace:'nowrap', display:'flex', alignItems:'center', gap:5 }}>
-              {chat.isPaused && <span style={{ fontSize:10, background:'#fef3c7', color:'#92400e', padding:'1px 5px', borderRadius:4, fontWeight:700 }}>PAUSED</span>}
-              {chat.lastMessage}
+            <div style={{ flex:1, minWidth:0 }}>
+              <div style={{ display:'flex', justifyContent:'space-between', marginBottom:3 }}>
+                <span style={{ fontWeight:700, fontSize:14, color:'#1a2332' }}>{chat.user.name}</span>
+                <span style={{ fontSize:11, color:'#b0bec5' }}>{formatTime(chat.lastTime)}</span>
+              </div>
+              <div style={{ fontSize:13, color:'#7b8fa1', overflow:'hidden', textOverflow:'ellipsis', whiteSpace:'nowrap', display:'flex', alignItems:'center', gap:5 }}>
+                {chat.isPaused && <span style={{ fontSize:10, background:'#fef3c7', color:'#92400e', padding:'1px 5px', borderRadius:4, fontWeight:700 }}>PAUSED</span>}
+                {chat.lastMessage}
+              </div>
             </div>
-          </div>
-        </button>
-      ))}
+          </button>
+        ))}
+      </div>
     </div>
-  </div>
-);
+  );
+};

package/src/components/TicketFormScreen/index.tsx

@@ -39,7 +39,7 @@ export const TicketFormScreen: React.FC<TicketFormScreenProps> = ({ config, onSu
   };
 
   return (
-    <div style={{ display: 'flex', flexDirection: 'column', height: '100%', background: '#fff' }}>
+    <div style={{ display: 'flex', flexDirection: 'column', height: '100%', background: '#fff', minHeight: 0 }}>
       <div
         style={{
           background: `linear-gradient(135deg,${config.primaryColor},${config.primaryColor}cc)`,
@@ -70,12 +70,12 @@ export const TicketFormScreen: React.FC<TicketFormScreenProps> = ({ config, onSu
           </svg>
         </button>
         <div>
-          <h2 style={{ margin: 0, fontSize: 18, fontWeight: 800, color: '#fff' }}>New ticket</h2>
-          <p style={{ margin: '4px 0 0', fontSize: 12, color: 'rgba(255,255,255,0.85)' }}>Describe your issue below</p>
+          <h2 style={{ margin: 0, fontSize: 18, fontWeight: 800, color: '#fff' }}>Raise a ticket</h2>
+          <p style={{ margin: '4px 0 0', fontSize: 12, color: 'rgba(255,255,255,0.85)' }}>Please fill out the ticket form below and we will get back to you as soon as possible.</p>
         </div>
       </div>
 
-      <div className="cw-scroll" style={{ flex: 1, overflowY: 'auto', padding: '20px 18px' }}>
+      <div className="cw-scroll" style={{ flex: 1, overflowY: 'auto', padding: '20px 18px', minHeight: 0 }}>
         <input
           placeholder="Title *"
           value={title}
@@ -93,7 +93,7 @@ export const TicketFormScreen: React.FC<TicketFormScreenProps> = ({ config, onSu
           onFocus={e => (e.target.style.borderColor = config.primaryColor)}
           onBlur={e => (e.target.style.borderColor = '#e5e7eb')}
         />
-        <div style={{ display: 'flex', gap: 8, marginTop: 12, marginBottom: 20 }}>
+        <div style={{ display: 'flex', gap: 8, marginTop: 12, paddingBottom: 8 }}>
           {(['low', 'medium', 'high'] as Ticket['priority'][]).map(p => (
             <button
               key={p}
@@ -116,13 +116,24 @@ export const TicketFormScreen: React.FC<TicketFormScreenProps> = ({ config, onSu
             </button>
           ))}
         </div>
+      </div>
+
+      <div
+        style={{
+          flexShrink: 0,
+          padding: '12px 18px 18px',
+          borderTop: '1px solid #eef0f5',
+          background: '#fff',
+          boxShadow: '0 -4px 20px rgba(15,23,42,0.06)',
+        }}
+      >
         <button
           type="button"
           onClick={handleSubmit}
           disabled={!title.trim()}
           style={{
             width: '100%',
-            padding: '12px',
+            padding: '14px',
             borderRadius: 10,
             border: 'none',
             background: title.trim() ? config.primaryColor : '#e5e7eb',

package/src/components/TicketScreen/index.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState, useMemo, useRef, useEffect } from 'react';
 import { Ticket, WidgetConfig } from '../../types';
 
 interface TicketScreenProps {
@@ -6,9 +6,31 @@ interface TicketScreenProps {
   config:        WidgetConfig;
   onNewTicket:   () => void;
   onSelectTicket:(id: string) => void;
+  animateEntrance?: boolean;
 }
 
-export const TicketScreen: React.FC<TicketScreenProps> = ({ tickets, config, onNewTicket, onSelectTicket }) => {
+function matchesTicket(t: Ticket, q: string): boolean {
+  if (!q.trim()) return true;
+  const s = q.trim().toLowerCase();
+  return (
+    t.title.toLowerCase().includes(s) ||
+    t.description.toLowerCase().includes(s) ||
+    t.id.toLowerCase().includes(s)
+  );
+}
+
+export const TicketScreen: React.FC<TicketScreenProps> = ({
+  tickets, config, onNewTicket, onSelectTicket, animateEntrance = false,
+}) => {
+  const [query, setQuery] = useState('');
+  const searchRef = useRef<HTMLInputElement>(null);
+
+  useEffect(() => {
+    searchRef.current?.focus();
+  }, []);
+
+  const filtered = useMemo(() => tickets.filter(t => matchesTicket(t, query)), [tickets, query]);
+
   const sm: Record<Ticket['status'], { label: string; bg: string; color: string }> = {
     open:          { label:'Open',        bg:`${config.primaryColor}14`, color: config.primaryColor },
     'in-progress': { label:'In Progress', bg:'#fef3c7',                  color:'#d97706'            },
@@ -26,10 +48,10 @@ export const TicketScreen: React.FC<TicketScreenProps> = ({ tickets, config, onN
     <div style={{ display:'flex', flexDirection:'column', height:'100%' }}>
       <div style={{
         background:`linear-gradient(135deg,${config.primaryColor},${config.primaryColor}cc)`,
-        padding:'18px 18px 22px', flexShrink:0, position:'relative',
+        padding:'18px 18px 14px', flexShrink:0, position:'relative',
       }}>
-        <div style={{ display:'flex', justifyContent:'space-between', alignItems:'flex-start' }}>
-          <div>
+        <div style={{ display:'flex', justifyContent:'space-between', alignItems:'flex-start', gap: 12 }}>
+          <div style={{ minWidth: 0 }}>
             <h2 style={{ margin:0, fontSize:20, fontWeight:800, color:'#fff', letterSpacing:'-0.02em' }}>Tickets</h2>
             <p style={{ margin:'3px 0 0', fontSize:12, color:'rgba(255,255,255,0.8)' }}>
               {tickets.length} ticket{tickets.length!==1?'s':''} raised
@@ -39,27 +61,57 @@ export const TicketScreen: React.FC<TicketScreenProps> = ({ tickets, config, onN
             background:'rgba(255,255,255,0.22)', border:'none', borderRadius:20,
             padding:'7px 14px', color:'#fff', fontWeight:700, fontSize:13,
             cursor:'pointer', display:'flex', alignItems:'center', gap:5,
+            flexShrink: 0,
           }}>
             + New
           </button>
         </div>
       </div>
 
+      <div style={{ padding: '10px 14px', background: '#fff', borderBottom: '1px solid #eef0f5', flexShrink: 0 }}>
+        <div style={{ display: 'flex', alignItems: 'center', gap: 8, padding: '0 12px', borderRadius: 10, border: '1.5px solid #e5e7eb', background: '#f8fafc' }}>
+          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" style={{ flexShrink: 0, opacity: 0.55 }}>
+            <circle cx="11" cy="11" r="7" stroke="#64748b" strokeWidth="2" />
+            <path d="M20 20l-4-4" stroke="#64748b" strokeWidth="2" strokeLinecap="round" />
+          </svg>
+          <input
+            ref={searchRef}
+            type="search"
+            value={query}
+            onChange={e => setQuery(e.target.value)}
+            placeholder="Search tickets…"
+            autoComplete="off"
+            aria-label="Search tickets"
+            style={{
+              flex: 1,
+              minWidth: 0,
+              border: 'none',
+              outline: 'none',
+              background: 'transparent',
+              fontSize: 14,
+              padding: '10px 0',
+              fontFamily: 'inherit',
+              color: '#1a2332',
+            }}
+          />
+        </div>
+      </div>
+
       <div style={{ flex:1, overflowY:'auto' }}>
-        {tickets.length === 0 ? (
+        {filtered.length === 0 ? (
           <div style={{ padding:'50px 24px', textAlign:'center' }}>
-            <div style={{ fontSize:36, marginBottom:10 }}>🎫</div>
-            <div style={{ fontWeight:700, color:'#1a2332', marginBottom:6 }}>No tickets yet</div>
-            <div style={{ fontSize:13, color:'#7b8fa1' }}>Raise a ticket for major issues</div>
+            <div style={{ fontSize:36, marginBottom:10 }}>{query.trim() ? '🔍' : '🎫'}</div>
+            <div style={{ fontWeight:700, color:'#1a2332', marginBottom:6 }}>{query.trim() ? 'No matches' : 'No tickets yet'}</div>
+            <div style={{ fontSize:13, color:'#7b8fa1' }}>{query.trim() ? 'Try a different search' : 'Raise a ticket for major issues'}</div>
           </div>
-        ) : tickets.map((t, i) => (
+        ) : filtered.map((t, i) => (
           <button
             key={t.id}
             type="button"
             onClick={() => onSelectTicket(t.id)}
             style={{
               width:'100%', padding:'14px 16px', borderBottom:'1px solid #f0f2f5',
-              animation:`cw-fadeUp 0.3s ease both`, animationDelay:`${i*0.05}s`,
+              ...(animateEntrance ? { animation: `cw-fadeUp 0.3s ease both`, animationDelay: `${i * 0.05}s` } : {}),
               background:'transparent', borderLeft:'none', borderRight:'none', borderTop:'none',
               cursor:'pointer', textAlign:'left', fontFamily:'inherit',
             }}