feat(communications): separate user accounts from bot channels

src/features/communications/CommunicationsModule.tsx

@@ -23,6 +23,14 @@ export function CommunicationsModule() {
   const [isCreateChannelOpen, setIsCreateChannelOpen] = useState(false);
   const [isAddContactOpen, setIsAddContactOpen] = useState(false);
   const [isConnectChannelOpen, setIsConnectChannelOpen] = useState(false);
+  const [connectMode, setConnectMode] = useState<'messenger' | 'email'>('messenger');
+  const [showChannelsTab, setShowChannelsTab] = useState(() => localStorage.getItem('krona-show-bot-channels') === 'true');
+
+  const updateChannelsVisibility = (enabled: boolean) => {
+    setShowChannelsTab(enabled);
+    localStorage.setItem('krona-show-bot-channels', String(enabled));
+    if (!enabled && currentTab === 'channels') handleTabChange('settings');
+  };
 
   // Sync tab with URL search param
   const urlTab = searchParams.get('tab') as CommunicationTab | null;
@@ -45,6 +53,7 @@ export function CommunicationsModule() {
           unreadChats={48}
           unreadEmails={10}
           unreadChannels={4}
+          showChannelsTab={showChannelsTab}
         />
       </div>
 
@@ -52,12 +61,12 @@ export function CommunicationsModule() {
       <main className="flex-1 min-h-0 flex flex-col overflow-hidden">
         {currentTab === 'messengers' && (
           <MessengersView
-            onOpenConnectModal={() => setIsConnectChannelOpen(true)}
+            onOpenConnectModal={() => { setConnectMode('messenger'); setIsConnectChannelOpen(true); }}
             onOpenAddContactModal={() => setIsAddContactOpen(true)}
           />
         )}
         {currentTab === 'email' && (
-          <EmailView onComposeEmail={() => setIsComposeEmailOpen(true)} />
+          <EmailView onComposeEmail={() => setIsComposeEmailOpen(true)} onAddMailbox={() => { setConnectMode('email'); setIsConnectChannelOpen(true); }} />
         )}
         {currentTab === 'channels' && (
           <ChannelsView onCreateChannelModal={() => setIsCreateChannelOpen(true)} />
@@ -65,7 +74,7 @@ export function CommunicationsModule() {
         {currentTab === 'contacts' && (
           <ContactsView onAddContactModal={() => setIsAddContactOpen(true)} />
         )}
-        {currentTab === 'settings' && <SettingsView />}
+        {currentTab === 'settings' && <SettingsView showChannelsTab={showChannelsTab} onShowChannelsTabChange={updateChannelsVisibility} />}
       </main>
 
       {/* Modals */}
@@ -84,6 +93,7 @@ export function CommunicationsModule() {
       <ConnectChannelModal
         isOpen={isConnectChannelOpen}
         onClose={() => setIsConnectChannelOpen(false)}
+        mode={connectMode}
       />
     </div>
   );

src/features/communications/components/CommunicationsHeader.tsx

@@ -9,6 +9,7 @@ interface CommunicationsHeaderProps {
   unreadChats: number;
   unreadEmails: number;
   unreadChannels: number;
+  showChannelsTab: boolean;
 }
 
 export function CommunicationsHeader({
@@ -17,6 +18,7 @@ export function CommunicationsHeader({
   unreadChats,
   unreadEmails,
   unreadChannels,
+  showChannelsTab,
 }: CommunicationsHeaderProps) {
   const tabItems = [
     {
@@ -47,7 +49,7 @@ export function CommunicationsHeader({
       label: 'Настройки',
       icon: <Settings className="w-4 h-4" />,
     },
-  ];
+  ].filter((item) => item.id !== 'channels' || showChannelsTab);
 
   return (
     <header className="bg-[var(--krona-surface)] border-b border-[var(--krona-border-subtle)] px-3 sm:px-5 py-1.5 shrink-0 overflow-hidden">

src/features/communications/components/EmailView.tsx

@@ -9,9 +9,10 @@ import { useToast } from '../../../shared/ui';
 
 interface EmailViewProps {
   onComposeEmail: () => void;
+  onAddMailbox: () => void;
 }
 
-export function EmailView({ onComposeEmail }: EmailViewProps) {
+export function EmailView({ onComposeEmail, onAddMailbox }: EmailViewProps) {
   const { showToast } = useToast();
   const {
     mailboxes,
@@ -56,9 +57,14 @@ export function EmailView({ onComposeEmail }: EmailViewProps) {
 
         {/* Mailbox Selector */}
         <div>
-          <span className="text-xs font-bold text-[var(--krona-text-secondary)] uppercase tracking-wider block mb-2">
+          <div className="flex items-center justify-between gap-2 mb-2">
-            Почтовые ящики
+            <span className="text-xs font-bold text-[var(--krona-text-secondary)] uppercase tracking-wider">
-          </span>
+              Почтовые ящики
+            </span>
+            <button type="button" onClick={onAddMailbox} className="text-xs font-semibold text-[var(--krona-primary)] hover:underline">
+              + Добавить
+            </button>
+          </div>
           <div className="space-y-1">
             {mailboxes.map((mb) => (
               <button

src/features/communications/components/MessengersView.tsx

@@ -704,13 +704,13 @@ export function MessengersView({ onOpenConnectModal, onOpenAddContactModal }: Me
             leftIcon={<Plus className="w-3.5 h-3.5 text-[var(--krona-primary)]" />}
             className="hidden sm:inline-flex"
           >
-            Подключить
+            Добавить мессенджер
           </Button>
           <button
             type="button"
             onClick={onOpenConnectModal}
             className="sm:hidden h-8 w-8 rounded-lg border border-[var(--krona-border)] bg-[var(--krona-surface)] hover:bg-[var(--krona-surface-hover)] text-[var(--krona-primary)] flex items-center justify-center shrink-0"
-            aria-label="Подключить канал"
+            aria-label="Добавить мессенджер"
           >
             <Plus className="w-4 h-4 text-[var(--krona-primary)]" />
           </button>

src/features/communications/components/Modals.tsx

@@ -295,57 +295,65 @@ export function AddContactModal({ isOpen, onClose }: { isOpen: boolean; onClose:
   );
 }
 
-export function ConnectChannelModal({ isOpen, onClose }: { isOpen: boolean; onClose: () => void }) {
+export function ConnectChannelModal({ isOpen, onClose, mode = 'messenger' }: { isOpen: boolean; onClose: () => void; mode?: 'messenger' | 'email' }) {
   const { showToast } = useToast();
   const [platform, setPlatform] = useState('telegram');
   const [identifier, setIdentifier] = useState('');
+  const [useVpn, setUseVpn] = useState(false);
 
   const handleSubmit = (e: FormEvent) => {
     e.preventDefault();
     showToast({
-      title: 'Интеграция подключена',
+      title: mode === 'email' ? 'Почта подключена' : 'Мессенджер подключен',
-      message: `Канал ${platform.toUpperCase()} (${identifier || 'bot'}) успешно привязан`,
+      message: `${mode === 'email' ? 'Ящик' : platform.toUpperCase()} (${identifier}) успешно подключен${useVpn && mode === 'messenger' ? ' через VPN' : ''}`,
       type: 'success',
     });
     onClose();
   };
 
   return (
-    <Modal isOpen={isOpen} onClose={onClose} title="Подключение нового канала связи">
+    <Modal isOpen={isOpen} onClose={onClose} title={mode === 'email' ? 'Добавление почтового ящика' : 'Добавление мессенджера'}>
       <form onSubmit={handleSubmit} className="space-y-4">
         <div>
           <label className="block text-xs font-semibold text-[var(--krona-text-secondary)] mb-1">
-            Выберите платформу
+            {mode === 'email' ? 'Почтовый сервис' : 'Мессенджер'}
           </label>
           <select
-            value={platform}
+            value={mode === 'email' ? 'email' : platform}
             onChange={(e) => setPlatform(e.target.value)}
             className="w-full h-10 px-3 rounded-xl bg-[var(--krona-bg-workspace)] border border-[var(--krona-border)] text-sm text-[var(--krona-text-primary)] focus:outline-none focus:border-[var(--krona-primary)]"
           >
-            <option value="telegram">Telegram Bot / Channel</option>
+            {mode === 'email' ? <>
-            <option value="whatsapp">WhatsApp Business API</option>
+              <option value="email">IMAP / SMTP</option>
-            <option value="vk">ВКонтакте Сообщество</option>
+              <option value="yandex">Яндекс Почта</option>
-            <option value="max">MAX Messenger Gateway</option>
+              <option value="gmail">Google Workspace / Gmail</option>
-            <option value="email">Почтовый ящик SMTP/IMAP</option>
+              <option value="mailru">Mail.ru</option>
+            </> : <>
+              <option value="telegram">Telegram</option>
+              <option value="whatsapp">WhatsApp</option>
+              <option value="vk">VK Мессенджер</option>
+              <option value="max">MAX</option>
+            </>}
           </select>
         </div>
 
         <div>
           <label className="block text-xs font-semibold text-[var(--krona-text-secondary)] mb-1">
-            Токен авторизации / Идентификатор
+            {mode === 'email' ? 'Адрес электронной почты' : 'Телефон или логин аккаунта'}
           </label>
           <Input
             type="text"
             value={identifier}
             onChange={(e) => setIdentifier(e.target.value)}
-            placeholder="bot123456789:ABCDefgh..."
+            placeholder={mode === 'email' ? 'name@company.ru' : '+7 900 000-00-00 или @username'}
             required
           />
         </div>
 
-        <div className="p-3 rounded-xl bg-amber-50 dark:bg-amber-950/30 border border-amber-200 dark:border-amber-900/50 text-xs text-amber-900 dark:text-amber-200">
+        {mode === 'messenger' && <label className="p-3 rounded-xl bg-[var(--krona-bg-workspace)] border border-[var(--krona-border)] flex items-center gap-3 text-sm text-[var(--krona-text-primary)] cursor-pointer">
-          При подключении автоматически генерируется Webhook URL для приема сообщений в реальном времени.
+          <input type="checkbox" checked={useVpn} onChange={(e) => setUseVpn(e.target.checked)} className="w-4 h-4 accent-[var(--krona-primary)]" />
-        </div>
+          <span><strong className="block">Подключать через VPN</strong><span className="text-xs text-[var(--krona-text-secondary)]">Использовать VPN-шлюз организации для этого аккаунта</span></span>
+        </label>}
 
         <div className="flex items-center justify-end gap-2 pt-2 border-t border-[var(--krona-border-subtle)]">
           <Button variant="secondary" size="md" onClick={onClose}>

src/features/communications/components/SettingsView.tsx

@@ -4,7 +4,12 @@ import { useCommunicationsStore } from '../services/communicationsService';
 import { Button, Badge } from '@krona/ui';
 import { useToast } from '../../../shared/ui';
 
-export function SettingsView() {
+interface SettingsViewProps {
+  showChannelsTab: boolean;
+  onShowChannelsTabChange: (enabled: boolean) => void;
+}
+
+export function SettingsView({ showChannelsTab, onShowChannelsTabChange }: SettingsViewProps) {
   const { showToast } = useToast();
   const {
     integrations,
@@ -44,6 +49,24 @@ export function SettingsView() {
 
   return (
     <div className="flex-1 min-h-0 flex flex-col p-4 sm:p-6 bg-[var(--krona-bg-workspace)] overflow-y-auto space-y-6">
+      <section className="p-4 sm:p-5 rounded-2xl bg-[var(--krona-surface)] border border-[var(--krona-border-subtle)] shadow-xs">
+        <div className="flex items-center justify-between gap-4">
+          <div>
+            <h3 className="font-bold text-base text-[var(--krona-text-primary)]">Раздел «Каналы»</h3>
+            <p className="text-xs text-[var(--krona-text-secondary)] mt-0.5">Боты и публичные каналы организации</p>
+          </div>
+          <button
+            type="button"
+            role="switch"
+            aria-checked={showChannelsTab}
+            onClick={() => onShowChannelsTabChange(!showChannelsTab)}
+            className={`relative w-12 h-7 rounded-full transition-colors shrink-0 ${showChannelsTab ? 'bg-[var(--krona-primary)]' : 'bg-[var(--krona-surface-muted)]'}`}
+            aria-label="Показывать раздел Каналы"
+          >
+            <span className={`absolute top-1 w-5 h-5 rounded-full bg-white shadow transition-transform ${showChannelsTab ? 'translate-x-6' : 'translate-x-1'}`} />
+          </button>
+        </div>
+      </section>
       {/* 1. Connected Messengers & Connectors */}
       <section className="p-5 rounded-2xl bg-[var(--krona-surface)] border border-[var(--krona-border-subtle)] shadow-xs">
         <div className="flex items-center justify-between mb-4">