feat(communications): split personal and organization settings

src/features/communications/CommunicationsModule.tsx

@@ -26,6 +26,9 @@ export function CommunicationsModule() {
   const [connectMode, setConnectMode] = useState<'messenger' | 'email'>('messenger');
   const [showEmailTab, setShowEmailTab] = useState(() => localStorage.getItem('krona-show-email') === 'true');
   const [showChannelsTab, setShowChannelsTab] = useState(() => localStorage.getItem('krona-show-bot-channels') === 'true');
+  const [orgEmailAllowed, setOrgEmailAllowed] = useState(() => localStorage.getItem('krona-org-email-allowed') !== 'false');
+  const [orgChannelsAllowed, setOrgChannelsAllowed] = useState(() => localStorage.getItem('krona-org-channels-allowed') !== 'false');
+  const [canConnectAccounts, setCanConnectAccounts] = useState(() => localStorage.getItem('krona-org-connect-accounts') !== 'false');
 
   const updateEmailVisibility = (enabled: boolean) => {
     setShowEmailTab(enabled);
@@ -39,6 +42,23 @@ export function CommunicationsModule() {
     if (!enabled && currentTab === 'channels') handleTabChange('settings');
   };
 
+  const updateOrgEmailAllowed = (enabled: boolean) => {
+    setOrgEmailAllowed(enabled);
+    localStorage.setItem('krona-org-email-allowed', String(enabled));
+    if (!enabled) updateEmailVisibility(false);
+  };
+
+  const updateOrgChannelsAllowed = (enabled: boolean) => {
+    setOrgChannelsAllowed(enabled);
+    localStorage.setItem('krona-org-channels-allowed', String(enabled));
+    if (!enabled) updateChannelsVisibility(false);
+  };
+
+  const updateCanConnectAccounts = (enabled: boolean) => {
+    setCanConnectAccounts(enabled);
+    localStorage.setItem('krona-org-connect-accounts', String(enabled));
+  };
+
   // Sync tab with URL search param
   const urlTab = searchParams.get('tab') as CommunicationTab | null;
   const requestedTab = urlTab && ['messengers', 'email', 'channels', 'contacts', 'settings'].includes(urlTab) ? urlTab : activeTab;
@@ -62,9 +82,9 @@ export function CommunicationsModule() {
           onTabChange={handleTabChange}
           unreadChats={48}
           unreadEmails={10}
-          unreadChannels={4}
+           unreadChannels={4}
-          showEmailTab={showEmailTab}
+          showEmailTab={showEmailTab && orgEmailAllowed}
-          showChannelsTab={showChannelsTab}
+          showChannelsTab={showChannelsTab && orgChannelsAllowed}
         />
       </div>
 
@@ -72,12 +92,12 @@ export function CommunicationsModule() {
       <main className="flex-1 min-h-0 flex flex-col overflow-hidden">
         {currentTab === 'messengers' && (
           <MessengersView
-            onOpenConnectModal={() => { setConnectMode('messenger'); setIsConnectChannelOpen(true); }}
+            onOpenConnectModal={canConnectAccounts ? () => { setConnectMode('messenger'); setIsConnectChannelOpen(true); } : undefined}
             onOpenAddContactModal={() => setIsAddContactOpen(true)}
           />
         )}
         {currentTab === 'email' && (
-          <EmailView onComposeEmail={() => setIsComposeEmailOpen(true)} onAddMailbox={() => { setConnectMode('email'); setIsConnectChannelOpen(true); }} />
+          <EmailView onComposeEmail={() => setIsComposeEmailOpen(true)} onAddMailbox={canConnectAccounts ? () => { setConnectMode('email'); setIsConnectChannelOpen(true); } : undefined} />
         )}
         {currentTab === 'channels' && (
           <ChannelsView onCreateChannelModal={() => setIsCreateChannelOpen(true)} />
@@ -85,7 +105,7 @@ export function CommunicationsModule() {
         {currentTab === 'contacts' && (
           <ContactsView onAddContactModal={() => setIsAddContactOpen(true)} />
         )}
-        {currentTab === 'settings' && <SettingsView showEmailTab={showEmailTab} onShowEmailTabChange={updateEmailVisibility} showChannelsTab={showChannelsTab} onShowChannelsTabChange={updateChannelsVisibility} />}
+        {currentTab === 'settings' && <SettingsView showEmailTab={showEmailTab} onShowEmailTabChange={updateEmailVisibility} showChannelsTab={showChannelsTab} onShowChannelsTabChange={updateChannelsVisibility} orgEmailAllowed={orgEmailAllowed} onOrgEmailAllowedChange={updateOrgEmailAllowed} orgChannelsAllowed={orgChannelsAllowed} onOrgChannelsAllowedChange={updateOrgChannelsAllowed} canConnectAccounts={canConnectAccounts} onCanConnectAccountsChange={updateCanConnectAccounts} />}
       </main>
 
       {/* Modals */}

src/features/communications/components/EmailView.tsx

@@ -9,7 +9,7 @@ import { useToast } from '../../../shared/ui';
 
 interface EmailViewProps {
   onComposeEmail: () => void;
-  onAddMailbox: () => void;
+  onAddMailbox?: () => void;
 }
 
 export function EmailView({ onComposeEmail, onAddMailbox }: EmailViewProps) {
@@ -61,9 +61,9 @@ export function EmailView({ onComposeEmail, onAddMailbox }: EmailViewProps) {
             <span className="text-xs font-bold text-[var(--krona-text-secondary)] uppercase tracking-wider">
               Почтовые ящики
             </span>
-            <button type="button" onClick={onAddMailbox} className="text-xs font-semibold text-[var(--krona-primary)] hover:underline">
+            {onAddMailbox && <button type="button" onClick={onAddMailbox} className="text-xs font-semibold text-[var(--krona-primary)] hover:underline">
               + Добавить
-            </button>
+            </button>}
           </div>
           <div className="space-y-1">
             {mailboxes.map((mb) => (

src/features/communications/components/MessengersView.tsx

@@ -11,7 +11,7 @@ import { Avatar, Badge, Button, ConnectorPill } from '@krona/ui';
 import { useToast, Drawer } from '../../../shared/ui';
 
 interface MessengersViewProps {
-  onOpenConnectModal: () => void;
+  onOpenConnectModal?: () => void;
   onOpenAddContactModal: () => void;
 }
 
@@ -690,7 +690,7 @@ export function MessengersView({ onOpenConnectModal, onOpenAddContactModal }: Me
         </div>
 
         <div className="flex items-center gap-2 shrink-0">
-          <Button
+          {onOpenConnectModal && <Button
             variant="secondary"
             size="sm"
             onClick={onOpenConnectModal}
@@ -698,15 +698,15 @@ export function MessengersView({ onOpenConnectModal, onOpenAddContactModal }: Me
             className="hidden sm:inline-flex"
           >
             Добавить мессенджер
-          </Button>
+          </Button>}
-          <button
+          {onOpenConnectModal && <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="Добавить мессенджер"
           >
             <Plus className="w-4 h-4 text-[var(--krona-primary)]" />
-          </button>
+          </button>}
         </div>
       </div>}
 

src/features/communications/components/SettingsView.tsx

@@ -1,5 +1,5 @@
 import { useState } from 'react';
-import { RefreshCw, Trash2, Globe } from 'lucide-react';
+import { RefreshCw, Trash2, Globe, UserCog, Bell, Volume2, PanelTop } from 'lucide-react';
 import { useCommunicationsStore } from '../services/communicationsService';
 import { Button, Badge } from '@krona/ui';
 import { useToast } from '../../../shared/ui';
@@ -9,9 +9,15 @@ interface SettingsViewProps {
   onShowEmailTabChange: (enabled: boolean) => void;
   showChannelsTab: boolean;
   onShowChannelsTabChange: (enabled: boolean) => void;
+  orgEmailAllowed: boolean;
+  onOrgEmailAllowedChange: (enabled: boolean) => void;
+  orgChannelsAllowed: boolean;
+  onOrgChannelsAllowedChange: (enabled: boolean) => void;
+  canConnectAccounts: boolean;
+  onCanConnectAccountsChange: (enabled: boolean) => void;
 }
 
-export function SettingsView({ showEmailTab, onShowEmailTabChange, showChannelsTab, onShowChannelsTabChange }: SettingsViewProps) {
+export function SettingsView({ showEmailTab, onShowEmailTabChange, showChannelsTab, onShowChannelsTabChange, orgEmailAllowed, onOrgEmailAllowedChange, orgChannelsAllowed, onOrgChannelsAllowedChange, canConnectAccounts, onCanConnectAccountsChange }: SettingsViewProps) {
   const { showToast } = useToast();
   const {
     integrations,
@@ -25,6 +31,13 @@ export function SettingsView({ showEmailTab, onShowEmailTabChange, showChannelsT
 
   const [newTemplateText, setNewTemplateText] = useState('');
   const [testingId, setTestingId] = useState<string | null>(null);
+  const [settingsScope, setSettingsScope] = useState<'personal' | 'organization'>('personal');
+  const [notificationsEnabled, setNotificationsEnabled] = useState(() => localStorage.getItem('krona-user-notifications') !== 'false');
+  const [soundsEnabled, setSoundsEnabled] = useState(() => localStorage.getItem('krona-user-sounds') !== 'false');
+  const [compactMode, setCompactMode] = useState(() => localStorage.getItem('krona-user-compact') !== 'false');
+
+  const switchClass = (enabled: boolean) => `relative w-12 h-7 rounded-full transition-colors shrink-0 ${enabled ? 'bg-[var(--krona-primary)]' : 'bg-[var(--krona-surface-muted)]'}`;
+  const switchKnobClass = (enabled: boolean) => `absolute left-1 top-1 w-5 h-5 rounded-full bg-white shadow-sm transition-transform ${enabled ? 'translate-x-5' : 'translate-x-0'}`;
 
   const handleTest = async (id: string) => {
     setTestingId(id);
@@ -51,6 +64,12 @@ export function SettingsView({ showEmailTab, onShowEmailTabChange, showChannelsT
 
   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">
+      <div className="flex p-1 rounded-xl bg-[var(--krona-surface-muted)] self-start" role="tablist" aria-label="Тип настроек">
+        <button type="button" role="tab" aria-selected={settingsScope === 'personal'} onClick={() => setSettingsScope('personal')} className={`px-4 py-2 rounded-lg text-sm font-semibold transition-colors ${settingsScope === 'personal' ? 'bg-[var(--krona-surface)] text-[var(--krona-primary)] shadow-xs' : 'text-[var(--krona-text-secondary)]'}`}>Мои настройки</button>
+        <button type="button" role="tab" aria-selected={settingsScope === 'organization'} onClick={() => setSettingsScope('organization')} className={`px-4 py-2 rounded-lg text-sm font-semibold transition-colors ${settingsScope === 'organization' ? 'bg-[var(--krona-surface)] text-[var(--krona-primary)] shadow-xs' : 'text-[var(--krona-text-secondary)]'}`}>Организация</button>
+      </div>
+
+      {settingsScope === 'personal' ? <>
       <section className="p-4 sm:p-5 rounded-2xl bg-[var(--krona-surface)] border border-[var(--krona-border-subtle)] shadow-xs">
         <h3 className="font-bold text-base text-[var(--krona-text-primary)]">Отображение разделов</h3>
         <p className="text-xs text-[var(--krona-text-secondary)] mt-0.5 mb-4">Показывайте только те способы связи, которыми пользуется организация</p>
@@ -60,8 +79,8 @@ export function SettingsView({ showEmailTab, onShowEmailTabChange, showChannelsT
               <div className="font-semibold text-sm text-[var(--krona-text-primary)]">Email</div>
               <div className="text-xs text-[var(--krona-text-secondary)]">Почтовые ящики и переписка</div>
             </div>
-            <button type="button" role="switch" aria-checked={showEmailTab} onClick={() => onShowEmailTabChange(!showEmailTab)} className={`relative w-12 h-7 rounded-full transition-colors shrink-0 ${showEmailTab ? 'bg-[var(--krona-primary)]' : 'bg-[var(--krona-surface-muted)]'}`} aria-label="Показывать раздел Email">
+            <button type="button" role="switch" aria-checked={showEmailTab} disabled={!orgEmailAllowed} onClick={() => onShowEmailTabChange(!showEmailTab)} className={`${switchClass(showEmailTab)} disabled:opacity-40`} aria-label="Показывать раздел Email">
-              <span className={`absolute left-1 top-1 w-5 h-5 rounded-full bg-white shadow-sm transition-transform ${showEmailTab ? 'translate-x-5' : 'translate-x-0'}`} />
+              <span className={switchKnobClass(showEmailTab)} />
             </button>
           </div>
           <div className="flex items-center justify-between gap-4 py-3">
@@ -74,14 +93,37 @@ export function SettingsView({ showEmailTab, onShowEmailTabChange, showChannelsT
             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)]'}`}
+            disabled={!orgChannelsAllowed}
+            className={`${switchClass(showChannelsTab)} disabled:opacity-40`}
             aria-label="Показывать раздел Каналы"
           >
-            <span className={`absolute left-1 top-1 w-5 h-5 rounded-full bg-white shadow-sm transition-transform ${showChannelsTab ? 'translate-x-5' : 'translate-x-0'}`} />
+            <span className={switchKnobClass(showChannelsTab)} />
           </button>
           </div>
         </div>
       </section>
+      <section className="p-4 sm:p-5 rounded-2xl bg-[var(--krona-surface)] border border-[var(--krona-border-subtle)] shadow-xs divide-y divide-[var(--krona-border-subtle)]">
+        <h3 className="font-bold text-base text-[var(--krona-text-primary)] pb-3">Поведение и уведомления</h3>
+        {[
+          { label: 'Уведомления', hint: 'Новые сообщения и упоминания', icon: Bell, value: notificationsEnabled, set: setNotificationsEnabled, key: 'krona-user-notifications' },
+          { label: 'Звуки', hint: 'Звуковой сигнал новых сообщений', icon: Volume2, value: soundsEnabled, set: setSoundsEnabled, key: 'krona-user-sounds' },
+          { label: 'Компактный интерфейс', hint: 'Больше диалогов и сообщений на экране', icon: PanelTop, value: compactMode, set: setCompactMode, key: 'krona-user-compact' },
+        ].map((item) => <div key={item.label} className="flex items-center justify-between gap-4 py-3"><div className="flex items-center gap-3"><item.icon className="w-4 h-4 text-[var(--krona-primary)]"/><div><div className="font-semibold text-sm text-[var(--krona-text-primary)]">{item.label}</div><div className="text-xs text-[var(--krona-text-secondary)]">{item.hint}</div></div></div><button type="button" role="switch" aria-checked={item.value} onClick={() => { const next = !item.value; item.set(next); localStorage.setItem(item.key, String(next)); }} className={switchClass(item.value)} aria-label={item.label}><span className={switchKnobClass(item.value)} /></button></div>)}
+      </section>
+      </> : <>
+      <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 gap-2 mb-1"><UserCog className="w-5 h-5 text-[var(--krona-primary)]"/><h3 className="font-bold text-base text-[var(--krona-text-primary)]">Доступ организации</h3></div>
+        <p className="text-xs text-[var(--krona-text-secondary)] mb-4">Разрешения действуют для всех пользователей организации</p>
+        <div className="divide-y divide-[var(--krona-border-subtle)]">
+          <div className="flex items-center justify-between gap-4 py-3"><div><div className="font-semibold text-sm">Разрешить Email</div><div className="text-xs text-[var(--krona-text-secondary)]">Пользователи смогут подключать и показывать свои ящики</div></div><button type="button" role="switch" aria-checked={orgEmailAllowed} onClick={() => onOrgEmailAllowedChange(!orgEmailAllowed)} className={switchClass(orgEmailAllowed)} aria-label="Разрешить Email организации"><span className={switchKnobClass(orgEmailAllowed)}/></button></div>
+          <div className="flex items-center justify-between gap-4 py-3"><div><div className="font-semibold text-sm">Разрешить Каналы</div><div className="text-xs text-[var(--krona-text-secondary)]">Боты и публичные каналы организации</div></div><button type="button" role="switch" aria-checked={orgChannelsAllowed} onClick={() => onOrgChannelsAllowedChange(!orgChannelsAllowed)} className={switchClass(orgChannelsAllowed)} aria-label="Разрешить Каналы организации"><span className={switchKnobClass(orgChannelsAllowed)}/></button></div>
+          <div className="flex items-center justify-between gap-4 py-3"><div><div className="font-semibold text-sm">Пользователи подключают аккаунты</div><div className="text-xs text-[var(--krona-text-secondary)]">Разрешить добавление личных мессенджеров и почты</div></div><button type="button" role="switch" aria-checked={canConnectAccounts} onClick={() => onCanConnectAccountsChange(!canConnectAccounts)} className={switchClass(canConnectAccounts)} aria-label="Разрешить подключение аккаунтов"><span className={switchKnobClass(canConnectAccounts)}/></button></div>
+        </div>
+      </section>
+      <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-3 mb-4"><div><h3 className="font-bold text-base">Пользователи и роли</h3><p className="text-xs text-[var(--krona-text-secondary)]">Кто принимает сообщения и управляет подключениями</p></div><Button size="sm" variant="primary" onClick={() => showToast({ title: 'Добавление пользователя', message: 'Форма приглашения пользователя будет открыта здесь', type: 'info' })}>Добавить пользователя</Button></div>
+        <div className="space-y-2 text-sm"><div className="flex justify-between p-3 rounded-xl bg-[var(--krona-bg-workspace)]"><span><strong>Виктор</strong><small className="block text-[var(--krona-text-secondary)]">Владелец</small></span><span className="text-xs text-[var(--krona-primary)]">Все права</span></div><div className="flex justify-between p-3 rounded-xl bg-[var(--krona-bg-workspace)]"><span><strong>Мария К.</strong><small className="block text-[var(--krona-text-secondary)]">Менеджер</small></span><span className="text-xs text-[var(--krona-text-secondary)]">Чаты и почта</span></div></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">
@@ -159,9 +201,7 @@ export function SettingsView({ showEmailTab, onShowEmailTabChange, showChannelsT
               Обеспечение бесперебойного доступа к международным API Telegram и WhatsApp
             </p>
           </div>
-          <span className="px-2.5 py-1 rounded-full bg-emerald-100 dark:bg-emerald-950 text-emerald-700 dark:text-emerald-300 font-bold text-xs">
+          <div className="flex items-center gap-2"><span className="px-2.5 py-1 rounded-full bg-emerald-100 dark:bg-emerald-950 text-emerald-700 dark:text-emerald-300 font-bold text-xs">Туннель активен (14 ms)</span><Button size="sm" variant="secondary" onClick={() => showToast({ title: 'Настройка VPN', message: 'Открыта настройка единого шлюза организации', type: 'info' })}>Настроить VPN</Button></div>
-            Туннель активен (14 ms)
-          </span>
         </div>
 
         <div className="grid grid-cols-1 sm:grid-cols-3 gap-3 text-xs">
@@ -268,6 +308,7 @@ export function SettingsView({ showEmailTab, onShowEmailTabChange, showChannelsT
           </table>
         </div>
       </section>
+      </>}
     </div>
   );
 }