kingkont 0.18.3 → 0.18.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "kingkont",
-  "version": "0.18.3",
+  "version": "0.18.4",
   "description": "KingKont · Chatium — нод-редактор сцен с AI-генерацией (картинки/видео/голос/SFX/музыка/текст)",
   "main": "main.js",
   "bin": {

package/renderer/notifyPanel.js

@@ -21,12 +21,46 @@
 
   function _ensureUI() {
     if ($('notifyBtn')) return;
+    // CSS animations для бейджа/панели/новых row'ов — иначе юзер не
+    // замечает что событие пришло (прошлая версия с display:none→flex
+    // была инстант, не привлекала внимание).
+    if (!$('notifyPanelStyles')) {
+      const style = document.createElement('style');
+      style.id = 'notifyPanelStyles';
+      style.textContent = `
+        @keyframes notifyBellPulse {
+          0%   { transform: scale(1); box-shadow: 0 0 0 0 rgba(227,51,119,0.55); background: rgba(60,30,50,0.92); }
+          40%  { transform: scale(1.18); box-shadow: 0 0 0 8px rgba(227,51,119,0); background: rgba(120,40,80,0.95); }
+          100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(227,51,119,0); background: rgba(30,30,40,0.85); }
+        }
+        @keyframes notifyPanelSlide {
+          0%   { transform: translateY(12px) scale(0.96); opacity: 0; }
+          100% { transform: translateY(0) scale(1);       opacity: 1; }
+        }
+        @keyframes notifyRowFlash {
+          0%   { box-shadow: 0 0 0 0 rgba(227,51,119,0.0), inset 0 0 0 0 rgba(227,51,119,0.0); transform: translateX(-6px); opacity: 0.4; }
+          18%  { transform: translateX(0); opacity: 1; box-shadow: 0 0 14px 2px rgba(227,51,119,0.55), inset 2px 0 0 0 rgba(227,51,119,0.85); }
+          100% { box-shadow: 0 0 0 0 rgba(227,51,119,0), inset 2px 0 0 0 rgba(227,51,119,0); transform: translateX(0); opacity: 1; }
+        }
+        #notifyBtn.pulsing {
+          animation: notifyBellPulse 0.9s ease-out 1;
+        }
+        #notifyPanel.opening {
+          animation: notifyPanelSlide 0.22s cubic-bezier(0.18, 0.89, 0.32, 1.28) 1;
+          transform-origin: bottom left;
+        }
+        #notifyList .notify-row.is-new {
+          animation: notifyRowFlash 1.6s ease-out 1;
+        }
+      `;
+      document.head.appendChild(style);
+    }
     // Кнопка-колокольчик в нижнем-левом углу — там есть свободное место,
     // не перекрывает sidebar/canvas-toolbar/welcome-status.
     const btn = document.createElement('button');
     btn.id = 'notifyBtn';
     btn.title = 'События (генерации, чат, ошибки)';
-    btn.style.cssText = 'position:fixed; bottom:12px; left:12px; z-index:9998; background:rgba(30,30,40,0.85); border:1px solid #444; color:#ccc; font-size:14px; width:32px; height:32px; border-radius:50%; cursor:pointer; backdrop-filter:blur(4px); display:flex; align-items:center; justify-content:center;';
+    btn.style.cssText = 'position:fixed; bottom:12px; left:12px; z-index:9998; background:rgba(30,30,40,0.85); border:1px solid #444; color:#ccc; font-size:14px; width:32px; height:32px; border-radius:50%; cursor:pointer; backdrop-filter:blur(4px); display:flex; align-items:center; justify-content:center; transition:background 0.2s;';
     btn.innerHTML = '🔔';
     document.body.appendChild(btn);
     btn.addEventListener('click', toggle);
@@ -62,8 +96,21 @@
     _ensureUI();
     panelOpen = open;
     openMode = open ? (mode || 'manual') : null;
-    $('notifyPanel').style.display = open ? 'flex' : 'none';
-    if (open) { unread = 0; updateBadge(); render(); }
+    const panel = $('notifyPanel');
+    panel.style.display = open ? 'flex' : 'none';
+    if (open) {
+      // Слайд-анимация при открытии — иначе display:none→flex слишком
+      // резкий, юзер не успевает заметить «панель появилась». Переустанавливаем
+      // класс через requestAnimationFrame чтобы анимация рестартовала
+      // даже если панель только что закрылась.
+      panel.classList.remove('opening');
+      requestAnimationFrame(() => {
+        requestAnimationFrame(() => panel.classList.add('opening'));
+      });
+      unread = 0;
+      updateBadge();
+      render();
+    }
   }
   function toggle() { setOpen(!panelOpen, 'manual'); }
   function isManuallyOpen() { return panelOpen && openMode === 'manual'; }
@@ -96,6 +143,11 @@
       const time = `${String(dt.getHours()).padStart(2,'0')}:${String(dt.getMinutes()).padStart(2,'0')}:${String(dt.getSeconds()).padStart(2,'0')}`;
       const clickable = !!e.target;
       row.style.cssText = `position:relative; padding:8px 10px 8px 10px; border-radius:4px; margin-bottom:4px; background:${c}22; border-left:3px solid ${c}; cursor:${clickable ? 'pointer' : 'default'}; transition:background 0.1s;`;
+      row.classList.add('notify-row');
+      // Свежее событие — flash-анимация. Окно 2.2s достаточное чтобы
+      // юзер заметил, и не настолько большое чтобы старый event при
+      // re-render'е (например после удаления) ложно мигнул.
+      if (Date.now() - e.ts < 2200) row.classList.add('is-new');
       if (clickable) row.title = 'Перейти к объекту';
       const targetHint = clickable ? `<span style="color:#9ab; font-size:10px; margin-left:6px;">↗</span>` : '';
       row.innerHTML = `<div style="display:flex; justify-content:space-between; gap:8px; align-items:flex-start; padding-right:18px;">
@@ -164,11 +216,22 @@
     } else {
       render();
     }
+    _pulseBell();
     // Авто-открытие панели на 3.5s — юзер видит событие сразу, потом
     // панель прячется. Если юзер сам открыл — не трогаем (проверка в
     // openAuto). Каждое новое событие сбрасывает таймер.
     _scheduleAutoFlash();
   }
+  // Bell-pulse: одна короткая анимация. Перезапускаем класс через
+  // void offsetWidth — иначе подряд идущие события не «пульсируют»
+  // повторно (CSS animation не рестартует на тот же класс).
+  function _pulseBell() {
+    const btn = $('notifyBtn');
+    if (!btn) return;
+    btn.classList.remove('pulsing');
+    void btn.offsetWidth;
+    btn.classList.add('pulsing');
+  }
   // Auto-flash: открыть в auto-режиме и закрыть через таймер. Срабатывает
   // на КАЖДОЕ addEvent. Если юзер уже manual'но открыл — открытие no-op'ится.
   let _autoFlashT = null;
@@ -179,7 +242,7 @@
     _autoFlashT = setTimeout(() => {
       _autoFlashT = null;
       if (openMode === 'auto') setOpen(false);
-    }, 3500);
+    }, 5000);
   }
 
   // Navigate from notification to scene/node.