ajaxter-chat 2.0.1 → 3.0.1

package/src/components/EmojiPicker/index.tsx

@@ -0,0 +1,48 @@
+import React from 'react';
+
+const EMOJIS = [
+  '😀','😂','😊','😍','🤔','😎','😢','😡',
+  '👍','👎','👏','🙏','🎉','❤️','🔥','✅',
+  '🚀','💡','⚠️','🎫',
+];
+
+interface EmojiPickerProps {
+  onSelect: (emoji: string) => void;
+  onClose: () => void;
+  primaryColor: string;
+}
+
+export const EmojiPicker: React.FC<EmojiPickerProps> = ({ onSelect, onClose, primaryColor }) => (
+  <div style={{
+    position:'absolute', bottom:'100%', right:0,
+    background:'#fff', borderRadius:14,
+    boxShadow:'0 8px 32px rgba(0,0,0,0.18)',
+    padding:'12px', zIndex:100,
+    animation:'cw-fadeUp 0.18s ease',
+    marginBottom:8,
+  }}>
+    {/* Header */}
+    <div style={{ display:'flex', justifyContent:'space-between', alignItems:'center', marginBottom:8 }}>
+      <span style={{ fontSize:11, fontWeight:700, color:'#7b8fa1', textTransform:'uppercase', letterSpacing:'0.06em' }}>
+        Emojis
+      </span>
+      <button onClick={onClose} style={{ background:'none', border:'none', cursor:'pointer', padding:2, color:'#7b8fa1', fontSize:14 }}>✕</button>
+    </div>
+    {/* Grid */}
+    <div style={{ display:'grid', gridTemplateColumns:'repeat(5, 1fr)', gap:4, width:200 }}>
+      {EMOJIS.map(e => (
+        <button
+          key={e}
+          onClick={() => { onSelect(e); onClose(); }}
+          style={{
+            background:'none', border:'none', cursor:'pointer',
+            fontSize:22, padding:'6px', borderRadius:8,
+            transition:'background 0.12s',
+          }}
+          onMouseEnter={el => (el.currentTarget as HTMLElement).style.background = `${primaryColor}15`}
+          onMouseLeave={el => (el.currentTarget as HTMLElement).style.background = 'none'}
+        >{e}</button>
+      ))}
+    </div>
+  </div>
+);

package/src/components/HomeScreen/index.tsx

@@ -1,118 +1,97 @@
 import React from 'react';
-import { ChatConfig, ChatWidgetTheme, UserListContext } from '../../types';
-import { mergeTheme } from '../../utils/theme';
+import { WidgetConfig, UserListContext } from '../../types';
 
 interface HomeScreenProps {
-  config: ChatConfig;
-  theme?: ChatWidgetTheme;
+  config: WidgetConfig;
   onNavigate: (ctx: UserListContext | 'ticket') => void;
 }
 
-export const HomeScreen: React.FC<HomeScreenProps> = ({ config, theme, onNavigate }) => {
-  const t = mergeTheme(theme);
-  const showSupport      = config.chatType === 'SUPPORT' || config.chatType === 'BOTH';
-  const showConversation = config.chatType === 'CHAT'    || config.chatType === 'BOTH';
+export const HomeScreen: React.FC<HomeScreenProps> = ({ config, onNavigate }) => {
+  const showSupport = config.chatType === 'SUPPORT' || config.chatType === 'BOTH';
+  const showChat    = config.chatType === 'CHAT'    || config.chatType === 'BOTH';
 
   const cards = [
     showSupport && {
-      key:      'support' as UserListContext,
-      title:    'Need Support',
+      key: 'support' as UserListContext,
+      icon: '🛠',
+      title: 'Need Support',
       subtitle: 'We typically reply in a few minutes',
-      onClick:  () => onNavigate('support'),
+      onClick: () => onNavigate('support'),
     },
-    showConversation && {
-      key:      'conversation' as UserListContext,
-      title:    'New Conversation',
+    showChat && {
+      key: 'conversation' as UserListContext,
+      icon: '💬',
+      title: 'New Conversation',
       subtitle: 'With your colleague',
-      onClick:  () => onNavigate('conversation'),
+      onClick: () => onNavigate('conversation'),
     },
-    // Raise Ticket is always shown
     {
-      key:      'ticket' as const,
-      title:    'Raise Ticket',
+      key: 'ticket',
+      icon: '🎫',
+      title: 'Raise Ticket',
       subtitle: 'For major changes',
-      onClick:  () => onNavigate('ticket'),
+      onClick: () => onNavigate('ticket'),
     },
-  ].filter(Boolean) as Array<{ key: string; title: string; subtitle: string; onClick: () => void }>;
+  ].filter(Boolean) as Array<{ key: string; icon: string; title: string; subtitle: string; onClick: () => void }>;
 
   return (
     <div style={{ display: 'flex', flexDirection: 'column', height: '100%' }}>
-      {/* Teal hero header */}
-      <div
-        style={{
-          backgroundColor: t.primaryColor,
-          padding: '32px 24px 40px',
-          flexShrink: 0,
-        }}
-      >
-        <h1
-          style={{
-            margin: '0 0 8px',
-            fontSize: '28px',
-            fontWeight: 800,
-            color: '#fff',
-            letterSpacing: '-0.03em',
-            fontFamily: t.fontFamily,
-          }}
-        >
-          Hi there 👋
+      {/* Hero */}
+      <div style={{
+        background: `linear-gradient(145deg, ${config.primaryColor}, ${config.primaryColor}dd)`,
+        padding: '36px 24px 52px',
+        flexShrink: 0,
+        position: 'relative',
+        overflow: 'hidden',
+      }}>
+        {/* Decorative circles */}
+        <div style={{ position:'absolute', top:-40, right:-40, width:140, height:140, borderRadius:'50%', background:'rgba(255,255,255,0.07)' }} />
+        <div style={{ position:'absolute', bottom:-20, left:-20, width:90,  height:90,  borderRadius:'50%', background:'rgba(255,255,255,0.05)' }} />
+        <h1 style={{ margin:'0 0 8px', fontSize:26, fontWeight:800, color:'#fff', letterSpacing:'-0.03em' }}>
+          {config.welcomeTitle}
         </h1>
-        <p style={{ margin: 0, fontSize: '15px', color: 'rgba(255,255,255,0.85)', fontFamily: t.fontFamily }}>
-          Need help? start a conversation:
+        <p style={{ margin:0, fontSize:14, color:'rgba(255,255,255,0.85)', lineHeight:1.6 }}>
+          {config.welcomeSubtitle}
         </p>
       </div>
 
-      {/* Cards — float over the header with negative margin trick */}
-      <div
-        style={{
-          flex: 1,
-          overflowY: 'auto',
-          padding: '0 16px 16px',
-          marginTop: '-24px',
-          display: 'flex',
-          flexDirection: 'column',
-          gap: '10px',
-        }}
-      >
+      {/* Cards float over hero */}
+      <div style={{ flex:1, overflowY:'auto', padding:'0 16px 20px', marginTop:-28, display:'flex', flexDirection:'column', gap:10 }}>
         {cards.map((card, i) => (
           <button
             key={card.key}
             onClick={card.onClick}
             style={{
-              width: '100%',
-              background: '#fff',
-              border: 'none',
-              borderRadius: '14px',
-              padding: '18px 20px',
-              display: 'flex',
-              alignItems: 'center',
-              justifyContent: 'space-between',
-              cursor: 'pointer',
-              textAlign: 'left',
-              boxShadow: '0 2px 12px rgba(0,0,0,0.09)',
-              transition: 'transform 0.15s ease, box-shadow 0.15s ease',
-              animation: `cw-fadeUp 0.35s ease both`,
-              animationDelay: `${i * 0.08}s`,
-              fontFamily: t.fontFamily,
+              width:'100%', background:'#fff', border:'none', borderRadius:14,
+              padding:'18px 20px', display:'flex', alignItems:'center',
+              justifyContent:'space-between', cursor:'pointer', textAlign:'left',
+              boxShadow:'0 2px 14px rgba(0,0,0,0.10)',
+              animation:`cw-fadeUp 0.35s ease both`,
+              animationDelay:`${i * 0.08}s`,
+              transition:'transform 0.15s, box-shadow 0.15s',
             }}
             onMouseEnter={e => {
               (e.currentTarget as HTMLElement).style.transform  = 'translateY(-2px)';
-              (e.currentTarget as HTMLElement).style.boxShadow = '0 6px 20px rgba(0,0,0,0.13)';
+              (e.currentTarget as HTMLElement).style.boxShadow = '0 8px 24px rgba(0,0,0,0.14)';
             }}
             onMouseLeave={e => {
               (e.currentTarget as HTMLElement).style.transform  = 'translateY(0)';
-              (e.currentTarget as HTMLElement).style.boxShadow = '0 2px 12px rgba(0,0,0,0.09)';
+              (e.currentTarget as HTMLElement).style.boxShadow = '0 2px 14px rgba(0,0,0,0.10)';
             }}
           >
-            <div>
-              <div style={{ fontWeight: 700, fontSize: '15px', color: '#1a2332', marginBottom: '3px' }}>
-                {card.title}
-              </div>
-              <div style={{ fontSize: '13px', color: '#7b8fa1' }}>
-                {card.subtitle}
+            <div style={{ display:'flex', alignItems:'center', gap:14 }}>
+              <div style={{
+                width:44, height:44, borderRadius:12,
+                backgroundColor:`${config.primaryColor}14`,
+                display:'flex', alignItems:'center', justifyContent:'center',
+                fontSize:20, flexShrink:0,
+              }}>{card.icon}</div>
+              <div>
+                <div style={{ fontWeight:700, fontSize:15, color:'#1a2332', marginBottom:2 }}>{card.title}</div>
+                <div style={{ fontSize:12, color:'#7b8fa1' }}>{card.subtitle}</div>
               </div>
             </div>
-            <SendArrow color={t.primaryColor} />
+            <SendArrow color={config.primaryColor} />
           </button>
         ))}
       </div>
@@ -121,10 +100,7 @@ export const HomeScreen: React.FC<HomeScreenProps> = ({ config, theme, onNavigat
 };
 
 const SendArrow: React.FC<{ color: string }> = ({ color }) => (
-  <svg width="22" height="22" viewBox="0 0 24 24" fill="none" style={{ flexShrink: 0 }}>
-    <path
-      d="M22 2L11 13M22 2L15 22L11 13L2 9L22 2Z"
-      stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"
-    />
+  <svg width="20" height="20" viewBox="0 0 24 24" fill="none" style={{ flexShrink:0 }}>
+    <path d="M5 12h14M12 5l7 7-7 7" stroke={color} strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"/>
   </svg>
 );

package/src/components/MaintenanceView/index.tsx

@@ -2,14 +2,12 @@ import React from 'react';
 
 interface MaintenanceViewProps {
   primaryColor: string;
-  fontFamily: string;
 }
 
-export const MaintenanceView: React.FC<MaintenanceViewProps> = ({ primaryColor, fontFamily }) => (
+export const MaintenanceView: React.FC<MaintenanceViewProps> = ({ primaryColor }) => (
   <div style={{
     display: 'flex', flexDirection: 'column', alignItems: 'center',
-    justifyContent: 'center', height: '100%', padding: '32px',
-    fontFamily, textAlign: 'center', gap: 16,
+    justifyContent: 'center', height: '100%', padding: '32px', textAlign: 'center', gap: 16,
   }}>
     <div style={{
       width: 72, height: 72, borderRadius: '50%',
@@ -18,21 +16,20 @@ export const MaintenanceView: React.FC<MaintenanceViewProps> = ({ primaryColor,
     }}>
       <svg width="32" height="32" viewBox="0 0 24 24" fill="none">
         <path d="M12 9v4M12 17h.01M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0z"
-          stroke={primaryColor} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+          stroke={primaryColor} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
       </svg>
     </div>
-    <h3 style={{ margin: 0, fontSize: '17px', fontWeight: 800, color: '#1a2332', letterSpacing: '-0.02em' }}>
+    <h3 style={{ margin: 0, fontSize: 17, fontWeight: 800, color: '#1a2332', letterSpacing: '-0.02em' }}>
       Under Maintenance
     </h3>
-    <p style={{ margin: 0, fontSize: '14px', color: '#7b8fa1', lineHeight: 1.6, maxWidth: 220 }}>
+    <p style={{ margin: 0, fontSize: 14, color: '#7b8fa1', lineHeight: 1.6, maxWidth: 220 }}>
       Chat is under maintenance. We'll be back shortly!
     </p>
     <span style={{
       display: 'inline-flex', alignItems: 'center', gap: 6,
       padding: '6px 14px', borderRadius: 20,
       backgroundColor: '#fff3cd', color: '#856404',
-      fontSize: '12px', fontWeight: 700,
-      border: '1px solid #ffc10730',
+      fontSize: 12, fontWeight: 700, border: '1px solid #ffc10730',
     }}>
       <span style={{ width: 6, height: 6, borderRadius: '50%', backgroundColor: '#ffc107', display: 'inline-block' }} />
       Temporarily Unavailable

package/src/components/RecentChatsScreen/index.tsx

@@ -1,108 +1,63 @@
 import React from 'react';
-import { ChatUser, ChatWidgetTheme } from '../../types';
-import { mergeTheme } from '../../utils/theme';
+import { ChatUser, WidgetConfig } from '../../types';
+import { avatarColor, initials, formatTime } from '../../utils/chat';
 
 interface RecentChat {
-  id: string;
-  user: ChatUser;
-  lastMessage: string;
-  lastTime: Date;
-  unread: number;
+  id: string; user: ChatUser; lastMessage: string; lastTime: string; unread: number; isPaused: boolean;
 }
 
 interface RecentChatsScreenProps {
-  chats: RecentChat[];
-  theme?: ChatWidgetTheme;
-  onSelectChat: (user: ChatUser) => void;
+  chats:         RecentChat[];
+  config:        WidgetConfig;
+  onSelectChat:  (user: ChatUser) => void;
 }
 
-export const RecentChatsScreen: React.FC<RecentChatsScreenProps> = ({ chats, theme, onSelectChat }) => {
-  const t = mergeTheme(theme);
-
-  return (
-    <div style={{ display: 'flex', flexDirection: 'column', height: '100%' }}>
-      {/* Header */}
-      <div style={{
-        backgroundColor: t.primaryColor,
-        padding: '20px 20px 24px',
-        flexShrink: 0,
-      }}>
-        <h2 style={{ margin: 0, fontSize: '20px', fontWeight: 800, color: '#fff', fontFamily: t.fontFamily, letterSpacing: '-0.02em' }}>
-          Recent Chats
-        </h2>
-        <p style={{ margin: '4px 0 0', fontSize: '13px', color: 'rgba(255,255,255,0.8)', fontFamily: t.fontFamily }}>
-          Your conversation history
-        </p>
-      </div>
+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>
 
-      <div style={{ flex: 1, overflowY: 'auto' }}>
-        {chats.length === 0 ? (
-          <div style={{ padding: '50px 24px', textAlign: 'center', fontFamily: t.fontFamily }}>
-            <div style={{ fontSize: '36px', marginBottom: 12 }}>💬</div>
-            <div style={{ fontWeight: 700, color: '#1a2332', marginBottom: 6 }}>No chats yet</div>
-            <div style={{ fontSize: '13px', color: '#7b8fa1' }}>
-              Start a conversation from the home tab
+    <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>
+        </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>
-        ) : (
-          chats.map((chat, i) => {
-            const initials = chat.user.name.split(' ').map(n => n[0]).join('').toUpperCase().slice(0, 2);
-            const avatarColors = ['#1aaa96','#2563EB','#7C3AED','#D97706','#DC2626'];
-            const bg = avatarColors[chat.user.name.charCodeAt(0) % avatarColors.length];
-            const timeStr = new Date(chat.lastTime).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
-
-            return (
-              <button
-                key={chat.id}
-                onClick={() => onSelectChat(chat.user)}
-                style={{
-                  width: '100%', padding: '14px 20px',
-                  display: 'flex', alignItems: 'center', gap: '14px',
-                  background: 'transparent', border: 'none',
-                  borderBottom: '1px solid #f3f4f6',
-                  cursor: 'pointer', textAlign: 'left',
-                  fontFamily: t.fontFamily,
-                  animation: `cw-fadeUp 0.3s ease both`,
-                  animationDelay: `${i * 0.05}s`,
-                  transition: 'background 0.15s',
-                }}
-                onMouseEnter={e => (e.currentTarget as HTMLElement).style.background = '#f8fdfc'}
-                onMouseLeave={e => (e.currentTarget as HTMLElement).style.background = 'transparent'}
-              >
-                <div style={{
-                  width: 46, height: 46, borderRadius: '50%', backgroundColor: bg,
-                  display: 'flex', alignItems: 'center', justifyContent: 'center',
-                  color: '#fff', fontWeight: 700, fontSize: '15px', flexShrink: 0,
-                  position: 'relative',
-                }}>
-                  {initials}
-                  {chat.unread > 0 && (
-                    <span style={{
-                      position: 'absolute', top: -2, right: -2,
-                      width: 18, height: 18, borderRadius: '50%',
-                      backgroundColor: '#ff4757', color: '#fff',
-                      fontSize: '10px', fontWeight: 700,
-                      display: 'flex', alignItems: 'center', justifyContent: 'center',
-                      border: '2px solid #fff',
-                    }}>
-                      {chat.unread}
-                    </span>
-                  )}
-                </div>
-                <div style={{ flex: 1, minWidth: 0 }}>
-                  <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 3 }}>
-                    <span style={{ fontWeight: 700, fontSize: '14px', color: '#1a2332' }}>{chat.user.name}</span>
-                    <span style={{ fontSize: '11px', color: '#b0bec5' }}>{timeStr}</span>
-                  </div>
-                  <div style={{ fontSize: '13px', color: '#7b8fa1', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
-                    {chat.lastMessage}
-                  </div>
-                </div>
-              </button>
-            );
-          })
-        )}
-      </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>
+            </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>
+        </button>
+      ))}
     </div>
-  );
-};
+  </div>
+);

package/src/components/Tabs/BottomTabs.tsx

@@ -2,14 +2,14 @@ import React from 'react';
 import { BottomTab } from '../../types';
 
 interface BottomTabsProps {
-  active: BottomTab;
-  onChange: (tab: BottomTab) => void;
+  active:       BottomTab;
+  onChange:     (tab: BottomTab) => void;
   primaryColor: string;
-  fontFamily: string;
+  onBlockList:  () => void;
 }
 
-export const BottomTabs: React.FC<BottomTabsProps> = ({ active, onChange, primaryColor, fontFamily }) => {
-  const tabs: { key: BottomTab; label: string; Icon: React.FC<{ active: boolean; color: string }> }[] = [
+export const BottomTabs: React.FC<BottomTabsProps> = ({ active, onChange, primaryColor, onBlockList }) => {
+  const tabs: { key: BottomTab; label: string; Icon: React.FC<{ a: boolean; c: string }> }[] = [
     { key: 'home',    label: 'Home',    Icon: HomeIcon    },
     { key: 'chats',   label: 'Chats',   Icon: ChatsIcon   },
     { key: 'tickets', label: 'Tickets', Icon: TicketsIcon },
@@ -17,10 +17,8 @@ export const BottomTabs: React.FC<BottomTabsProps> = ({ active, onChange, primar
 
   return (
     <div style={{
-      display: 'flex',
-      borderTop: '1px solid #eef0f5',
-      backgroundColor: '#fff',
-      flexShrink: 0,
+      display: 'flex', borderTop: '1px solid #eef0f5',
+      backgroundColor: '#fff', flexShrink: 0,
     }}>
       {tabs.map(tab => {
         const isActive = active === tab.key;
@@ -32,51 +30,61 @@ export const BottomTabs: React.FC<BottomTabsProps> = ({ active, onChange, primar
               flex: 1, padding: '10px 0 8px',
               display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 3,
               background: 'transparent', border: 'none', cursor: 'pointer',
-              fontFamily, fontSize: '10px', fontWeight: isActive ? 700 : 500,
+              fontSize: '10px', fontWeight: isActive ? 700 : 500,
               color: isActive ? primaryColor : '#9aa3af',
-              transition: 'color 0.15s',
               borderTop: isActive ? `2px solid ${primaryColor}` : '2px solid transparent',
+              transition: 'color 0.15s',
+              fontFamily: 'inherit',
             }}
           >
-            <tab.Icon active={isActive} color={isActive ? primaryColor : '#b0bec5'} />
+            <tab.Icon a={isActive} c={isActive ? primaryColor : '#b0bec5'} />
             {tab.label}
           </button>
         );
       })}
+
+      {/* Block list icon */}
+      <button
+        onClick={onBlockList}
+        style={{
+          padding: '10px 14px 8px',
+          display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 3,
+          background: 'transparent', border: 'none', cursor: 'pointer',
+          fontSize: '10px', fontWeight: 500, color: '#9aa3af',
+          borderTop: '2px solid transparent',
+          transition: 'color 0.15s', fontFamily: 'inherit',
+        }}
+        title="Block List"
+      >
+        <svg width="20" height="20" viewBox="0 0 24 24" fill="none">
+          <circle cx="12" cy="12" r="10" stroke="#b0bec5" strokeWidth="1.8" />
+          <line x1="4.93" y1="4.93" x2="19.07" y2="19.07" stroke="#b0bec5" strokeWidth="1.8" strokeLinecap="round" />
+        </svg>
+        Blocked
+      </button>
     </div>
   );
 };
 
-// ── Icons ─────────────────────────────────────────────────────────────────────
-
-const HomeIcon: React.FC<{ active: boolean; color: string }> = ({ active, color }) => (
-  <svg width="22" height="22" viewBox="0 0 24 24" fill="none">
-    <path
-      d="M3 9.5L12 3l9 6.5V20a1 1 0 01-1 1H4a1 1 0 01-1-1V9.5z"
-      stroke={color} strokeWidth={active ? 2.2 : 1.8} strokeLinecap="round" strokeLinejoin="round"
-      fill={active ? `${color}20` : 'none'}
-    />
-    <path d="M9 21V12h6v9" stroke={color} strokeWidth={active ? 2.2 : 1.8} strokeLinecap="round" strokeLinejoin="round"/>
+const HomeIcon: React.FC<{ a: boolean; c: string }> = ({ a, c }) => (
+  <svg width="20" height="20" viewBox="0 0 24 24" fill="none">
+    <path d="M3 9.5L12 3l9 6.5V20a1 1 0 01-1 1H4a1 1 0 01-1-1V9.5z"
+      stroke={c} strokeWidth={a ? 2.2 : 1.8} fill={a ? `${c}20` : 'none'} strokeLinecap="round" strokeLinejoin="round" />
+    <path d="M9 21V12h6v9" stroke={c} strokeWidth={a ? 2.2 : 1.8} strokeLinecap="round" strokeLinejoin="round" />
   </svg>
 );
 
-const ChatsIcon: React.FC<{ active: boolean; color: string }> = ({ active, color }) => (
-  <svg width="22" height="22" viewBox="0 0 24 24" fill="none">
-    <path
-      d="M21 15a2 2 0 01-2 2H7l-4 4V5a2 2 0 012-2h14a2 2 0 012 2z"
-      stroke={color} strokeWidth={active ? 2.2 : 1.8} strokeLinecap="round" strokeLinejoin="round"
-      fill={active ? `${color}20` : 'none'}
-    />
+const ChatsIcon: React.FC<{ a: boolean; c: string }> = ({ a, c }) => (
+  <svg width="20" height="20" viewBox="0 0 24 24" fill="none">
+    <path d="M21 15a2 2 0 01-2 2H7l-4 4V5a2 2 0 012-2h14a2 2 0 012 2z"
+      stroke={c} strokeWidth={a ? 2.2 : 1.8} fill={a ? `${c}20` : 'none'} strokeLinecap="round" strokeLinejoin="round" />
   </svg>
 );
 
-const TicketsIcon: React.FC<{ active: boolean; color: string }> = ({ active, color }) => (
-  <svg width="22" height="22" viewBox="0 0 24 24" fill="none">
-    <path
-      d="M15 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V9l-4-4z"
-      stroke={color} strokeWidth={active ? 2.2 : 1.8} strokeLinecap="round" strokeLinejoin="round"
-      fill={active ? `${color}20` : 'none'}
-    />
-    <path d="M15 5v4h4M9 13h6M9 17h4" stroke={color} strokeWidth={active ? 2.2 : 1.8} strokeLinecap="round"/>
+const TicketsIcon: React.FC<{ a: boolean; c: string }> = ({ a, c }) => (
+  <svg width="20" height="20" viewBox="0 0 24 24" fill="none">
+    <path d="M15 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V9l-4-4z"
+      stroke={c} strokeWidth={a ? 2.2 : 1.8} fill={a ? `${c}20` : 'none'} strokeLinecap="round" strokeLinejoin="round" />
+    <path d="M15 5v4h4M9 13h6M9 17h4" stroke={c} strokeWidth={a ? 2.2 : 1.8} strokeLinecap="round" />
   </svg>
 );