kingkont 0.8.8 → 0.9.0

package/renderer/board.js

@@ -38,6 +38,27 @@ window.addEventListener('DOMContentLoaded', async () => {
     window.appMenu.on('open-settings', () => openSettings());
     window.appMenu.on('open-updates', () => openUpdatesOverlay());
   }
+  // Подписка на смену Chatium-auth-статуса (login/logout из настроек):
+  //   - login  → чистим localStorage-кэш и заново фетчим /api/projects.
+  //              Welcome перерисуется со свежими облачными карточками.
+  //   - logout → чистим кэш + перерисовываем (cloud-карточки исчезнут,
+  //              fetchListCached не дёрнет /api/projects без логина).
+  // setCloudButtonsVisibility пересоберёт sidebar-кнопки (☁ Новый и пр.).
+  if (window.appChatium?.onAuthChanged) {
+    window.appChatium.onAuthChanged(async (state) => {
+      try {
+        // Сбрасываем кэш — он содержал данные старого юзера.
+        localStorage.removeItem('cloudProjectsCache');
+        localStorage.removeItem('cloudProjectsLastOpened');
+        // Если открыт welcome (нет проекта) — перерисовать. fetchListCached
+        // в renderWelcomeRecents подтянет свежий список с сервера.
+        if (!state || !window.cloudProjects) return;
+        if (window.cloudProjects.setVisibility) window.cloudProjects.setVisibility();
+        if (!document.body.classList.contains('no-project')) return;
+        await renderWelcomeRecents();
+      } catch (e) { vlog('err', 'auth-changed handler: ' + (e?.message || e)); }
+    });
+  }
   // Восстановить состояние панелей таймлайна/превью/реплик
   const tlOpen = localStorage.getItem('timelineOpen') === '1';
   const pvOpen = localStorage.getItem('previewOpen') === '1';
@@ -77,20 +98,30 @@ window.addEventListener('DOMContentLoaded', async () => {
   setInterval(() => { refreshBalance().catch(() => {}); }, 60_000);
 
   // Тихий autoload: первый recent с granted-permission (если есть).
-  try {
-    const recents = await getRecents();
-    if (recents.length && recents[0].handle) {
-      const first = recents[0];
-      let q = 'prompt';
-      try { q = await first.handle.queryPermission({ mode: 'readwrite' }); } catch {}
-      vlog('info', `restore: handle=${first.name} queryPermission=${q}`);
-      if (q === 'granted') {
-        await openFilm(first.handle);
-        return;
+  // НО — если юзер только что вышел из проекта (closeProject поставил
+  // флаг welcomeOnNextStart), пропускаем autoload и показываем welcome.
+  // Это нужно чтобы Cmd+R после явного выхода не реоткрывал проект.
+  // (При обычном перезапуске после crash'а флага нет → автоload работает.)
+  const skipAutoload = localStorage.getItem('welcomeOnNextStart') === '1';
+  if (skipAutoload) {
+    localStorage.removeItem('welcomeOnNextStart');
+    vlog('info', 'restore: skipped (user explicitly closed last project)');
+  } else {
+    try {
+      const recents = await getRecents();
+      if (recents.length && recents[0].handle) {
+        const first = recents[0];
+        let q = 'prompt';
+        try { q = await first.handle.queryPermission({ mode: 'readwrite' }); } catch {}
+        vlog('info', `restore: handle=${first.name} queryPermission=${q}`);
+        if (q === 'granted') {
+          await openFilm(first.handle);
+          return;
+        }
       }
+    } catch (e) {
+      vlog('err', 'restore failed: ' + (e?.message || e));
     }
-  } catch (e) {
-    vlog('err', 'restore failed: ' + (e?.message || e));
   }
   await renderWelcomeRecents();
 
@@ -318,6 +349,11 @@ async function getRecents() {
 
 async function touchRecent(handle, thumbBlob) {
   if (!handle) return;
+  // Облачные проекты НЕ попадают в recents — они уже показываются в
+  // welcome-grid'е через /api/projects (с ☁-бейджем). Иначе после первого
+  // открытия cloud-проект дублируется: один раз как «облачный», второй раз
+  // как «локальный недавний» (handle указывает на userData/cloud-projects/<id>).
+  if (window.cloudFsShim?.isCloudHandle?.(handle)) return;
   const list = await _readRecentsMeta();
   const i = list.findIndex(r => r.name === handle.name);
   let thumbDataUrl = (i >= 0 ? list[i].thumbDataUrl : null);
@@ -382,6 +418,37 @@ async function renderWelcomeRecents() {
   openCard.addEventListener('click', () => $('pickRoot').click());
   grid.appendChild(openCard);
 
+  // ☁ Облачные проекты — видна только если залогинен в Chatium.
+  // Создаёт серверную запись и открывает её как новый проект.
+  let isLoggedIn = false;
+  try {
+    const s = await window.appSettings?.get();
+    isLoggedIn = !!(s?.useChatium && s?.chatium?.token);
+  } catch {}
+  if (isLoggedIn) {
+    const cloudCard = document.createElement('div');
+    cloudCard.className = 'welcome-card open-card';
+    const cloudThumb = document.createElement('div');
+    cloudThumb.className = 'welcome-card-thumb';
+    cloudThumb.textContent = '☁';
+    const cloudMeta = document.createElement('div');
+    cloudMeta.className = 'welcome-card-meta';
+    const cloudName = document.createElement('div');
+    cloudName.className = 'welcome-card-name';
+    cloudName.textContent = 'Новый проект (облако)';
+    const cloudSub = document.createElement('div');
+    cloudSub.className = 'welcome-card-ts';
+    cloudSub.textContent = 'хранится на сервере';
+    cloudMeta.append(cloudName, cloudSub);
+    cloudCard.append(cloudThumb, cloudMeta);
+    cloudCard.addEventListener('click', () => {
+      if (window.cloudProjects?.createNew) window.cloudProjects.createNew();
+    });
+    grid.appendChild(cloudCard);
+    // (отдельная карточка «Мои облачные проекты» убрана — облачные теперь
+    //  показываются inline в общем списке с ☁-бейджем.)
+  }
+
   // Сразу за «Открыть проект» — карточка «Шаблоны» (открывает библиотеку
   // шаблонов с серверa). Стиль такой же как у open-card — иконка + meta.
   const tplCard = document.createElement('div');
@@ -411,70 +478,194 @@ async function renderWelcomeRecents() {
   });
   grid.appendChild(tplCard);
 
-  // Title меняем в зависимости от наличия recents.
-  if (titleEl) titleEl.textContent = list.length ? 'Открыть проект · недавние' : 'Открыть проект';
+  // ---- Облачные проекты: добавляем в тот же grid с ☁ бейджем ----
+  // Cached → рендерим сразу, fresh → background → merge через onListChange.
+  let cloudItems = [];
+  if (isLoggedIn && window.cloudProjects?.fetchListCached) {
+    const { cached, promise } = window.cloudProjects.fetchListCached();
+    cloudItems = cached;
+    // Когда фон-фетч обновит — перерендерим карточки in-place.
+    promise.then(items => {
+      if (state.filmHandle) return;       // welcome больше не виден
+      if (JSON.stringify(items) === JSON.stringify(cloudItems)) return;  // ничего не изменилось
+      renderWelcomeRecents().catch(() => {});
+    }).catch(() => {});
+  }
 
+  // ---- Объединённый список: cloud + folder, отсортированный по timestamp ----
+  // Каждый элемент: { type: 'cloud'|'recent', sortTs, item }.
+  // Для cloud берём максимум из (updatedAt | lastOpenedAt | createdAt) —
+  // юзер ожидает что недавно открытый проект (даже без сохранения) поднимется.
+  const merged = [];
+  for (const c of cloudItems) {
+    const ts = Math.max(c.lastOpenedAt || 0, c.updatedAt || 0, c.createdAt || 0);
+    merged.push({ type: 'cloud', sortTs: ts, item: c });
+  }
+  // Дедуп: cloud-проекты не должны показываться ещё и как «недавние папки».
+  // Источники дубля:
+  //   1) handle — cloud-shim (window.cloudFsShim.isCloudHandle) — фильтруем в touchRecent,
+  //      но старые записи могли остаться от предыдущих версий.
+  //   2) имя совпадает с именем cloud-проекта — heuristic для legacy-записей.
+  const cloudNames = new Set(cloudItems.map(c => c.name).filter(Boolean));
   for (const r of list) {
-    const card = document.createElement('div');
-    card.className = 'welcome-card';
-    const thumb = document.createElement('div');
-    thumb.className = 'welcome-card-thumb';
-    if (r.thumb) {
-      const img = document.createElement('img');
-      img.src = URL.createObjectURL(r.thumb);
-      img.onload = () => setTimeout(() => URL.revokeObjectURL(img.src), 60_000);
-      thumb.appendChild(img);
-    } else {
-      thumb.textContent = '🎬';
-    }
-    const meta = document.createElement('div');
-    meta.className = 'welcome-card-meta';
-    const nameEl = document.createElement('div');
-    nameEl.className = 'welcome-card-name';
-    nameEl.textContent = r.name;
-    const tsEl = document.createElement('div');
-    tsEl.className = 'welcome-card-ts';
-    tsEl.textContent = fmtRelativeTime(r.ts);
-    meta.append(nameEl, tsEl);
-    card.append(thumb, meta);
-    const del = document.createElement('div');
-    del.className = 'welcome-card-del';
-    del.textContent = '×';
-    del.title = 'Удалить из недавних';
-    del.addEventListener('click', async e => {
-      e.stopPropagation();
-      if (!confirm(`Убрать «${r.name}» из недавних? (папка не удаляется)`)) return;
-      await removeRecent(r.name);
-      await renderWelcomeRecents();
-    });
-    card.appendChild(del);
-    card.addEventListener('click', async () => {
-      try {
-        if (r.handle) {
-          let g = (await r.handle.queryPermission({ mode: 'readwrite' })) === 'granted';
-          if (!g) g = (await r.handle.requestPermission({ mode: 'readwrite' })) === 'granted';
-          vlog('info', `welcome card click ${r.name}: granted=${g}`);
-          if (g) await openFilm(r.handle);
-          else alert('Доступ к папке не подтверждён.');
-        } else {
-          // Handle потерялся (IDB сбросилась) — открываем picker прямо здесь,
-          // чтобы сохранить user-gesture (через $('pickRoot').click() он
-          // теряется и showDirectoryPicker валится SecurityError).
-          try {
-            const handle = await window.showDirectoryPicker({ mode: 'readwrite', id: 'video-editor-film' });
-            await openFilm(handle);
-          } catch (err) {
-            if (err.name === 'AbortError') return;
-            throw err;
-          }
+    if (window.cloudFsShim?.isCloudHandle?.(r.handle)) continue;  // shim в IDB
+    if (cloudNames.has(r.name)) continue;                          // имя дубля
+    merged.push({ type: 'recent', sortTs: r.ts || 0, item: r });
+  }
+  merged.sort((a, b) => b.sortTs - a.sortTs);
+
+  // Title меняем в зависимости от наличия проектов.
+  if (titleEl) titleEl.textContent = merged.length ? 'Открыть проект · недавние' : 'Открыть проект';
+
+  for (const m of merged) {
+    if (m.type === 'cloud') grid.appendChild(makeCloudWelcomeCard(m.item));
+    else                    grid.appendChild(makeRecentWelcomeCard(m.item));
+  }
+}
+
+// Карточка локального (папочного) проекта — извлечена из renderWelcomeRecents.
+function makeRecentWelcomeCard(r) {
+  const card = document.createElement('div');
+  card.className = 'welcome-card';
+  const thumb = document.createElement('div');
+  thumb.className = 'welcome-card-thumb';
+  if (r.thumb) {
+    const img = document.createElement('img');
+    img.src = URL.createObjectURL(r.thumb);
+    img.onload = () => setTimeout(() => URL.revokeObjectURL(img.src), 60_000);
+    thumb.appendChild(img);
+  } else thumb.textContent = '🎬';
+  const meta = document.createElement('div');
+  meta.className = 'welcome-card-meta';
+  const nameEl = document.createElement('div');
+  nameEl.className = 'welcome-card-name';
+  nameEl.textContent = r.name;
+  const tsEl = document.createElement('div');
+  tsEl.className = 'welcome-card-ts';
+  tsEl.textContent = fmtRelativeTime(r.ts);
+  meta.append(nameEl, tsEl);
+  card.append(thumb, meta);
+  const del = document.createElement('div');
+  del.className = 'welcome-card-del';
+  del.textContent = '×';
+  del.title = 'Удалить из недавних';
+  del.addEventListener('click', async e => {
+    e.stopPropagation();
+    if (!confirm(`Убрать «${r.name}» из недавних? (папка не удаляется)`)) return;
+    await removeRecent(r.name);
+    await renderWelcomeRecents();
+  });
+  card.appendChild(del);
+  card.addEventListener('click', async () => {
+    try {
+      if (r.handle) {
+        let g = (await r.handle.queryPermission({ mode: 'readwrite' })) === 'granted';
+        if (!g) g = (await r.handle.requestPermission({ mode: 'readwrite' })) === 'granted';
+        vlog('info', `welcome card click ${r.name}: granted=${g}`);
+        if (g) await openFilm(r.handle);
+        else alert('Доступ к папке не подтверждён.');
+      } else {
+        try {
+          const handle = await window.showDirectoryPicker({ mode: 'readwrite', id: 'video-editor-film' });
+          await openFilm(handle);
+        } catch (err) {
+          if (err.name === 'AbortError') return;
+          throw err;
         }
-      } catch (err) {
-        vlog('err', 'welcome card failed: ' + (err?.message || err));
-        alert('Ошибка: ' + (err?.message || err));
       }
-    });
-    grid.appendChild(card);
-  }
+    } catch (err) {
+      vlog('err', 'welcome card failed: ' + (err?.message || err));
+      alert('Ошибка: ' + (err?.message || err));
+    }
+  });
+  return card;
+}
+
+// Карточка облачного проекта. Визуально такая же как у папочного, плюс
+// ☁ бейдж в углу обложки. Клик → cloudProjects.open() (использует local
+// cache если синхронизирован, иначе скачивает manifest+файлы).
+// ПКМ → меню «Открыть в Finder», «Обновить из облака», «Удалить с сервера».
+function makeCloudWelcomeCard(p) {
+  const card = document.createElement('div');
+  card.className = 'welcome-card cloud-card';
+  card.dataset.cloudId = p.id;
+
+  const thumb = document.createElement('div');
+  thumb.className = 'welcome-card-thumb';
+  if (p.coverUrl) {
+    const img = document.createElement('img');
+    img.src = '/api/proxy?url=' + encodeURIComponent(p.coverUrl);
+    img.draggable = false;
+    img.onerror = () => { thumb.textContent = '🎬'; img.remove(); };
+    thumb.appendChild(img);
+  } else thumb.textContent = '🎬';
+  // ☁-бейдж в нижнем правом углу обложки.
+  const cloudBadge = document.createElement('div');
+  cloudBadge.className = 'welcome-card-cloud-badge';
+  cloudBadge.textContent = '☁';
+  cloudBadge.title = 'Облачный проект';
+  thumb.appendChild(cloudBadge);
+
+  const meta = document.createElement('div');
+  meta.className = 'welcome-card-meta';
+  const nameEl = document.createElement('div');
+  nameEl.className = 'welcome-card-name';
+  nameEl.textContent = p.name || '(без названия)';
+  const tsEl = document.createElement('div');
+  tsEl.className = 'welcome-card-ts';
+  tsEl.textContent = p.updatedAt ? fmtRelativeTime(p.updatedAt) : 'облако';
+  meta.append(nameEl, tsEl);
+  card.append(thumb, meta);
+
+  card.addEventListener('click', () => {
+    if (window.cloudProjects?.open) window.cloudProjects.open(p.id, p.name);
+  });
+  card.addEventListener('contextmenu', e => {
+    e.preventDefault();
+    e.stopPropagation();
+    showCloudCardContextMenu(p, e.clientX, e.clientY);
+  });
+  return card;
+}
+
+// ПКМ-меню для облачной welcome-карточки.
+function showCloudCardContextMenu(p, clientX, clientY) {
+  const menu = $('nodeMenu');
+  if (!menu) return;
+  menu.innerHTML = '';
+  const add = (label, fn, opts = {}) => {
+    const b = document.createElement('button');
+    b.textContent = label;
+    if (opts.danger) b.style.color = '#f88';
+    b.addEventListener('click', () => { menu.classList.add('hidden'); fn(); });
+    menu.appendChild(b);
+  };
+  add('📂 Открыть в Finder', async () => {
+    if (!window.cloudFs?.openInFinder) {
+      alert('Доступно только в Electron-приложении');
+      return;
+    }
+    const r = await window.cloudFs.openInFinder(p.id);
+    if (!r?.ok) alert('Не удалось открыть: ' + (r?.error || 'unknown'));
+  });
+  add('↻ Обновить из облака', () => {
+    if (window.cloudProjects?.open) window.cloudProjects.open(p.id, p.name, { forceRefresh: true });
+  });
+  add('🗑 Удалить с сервера', async () => {
+    if (!confirm(`Удалить «${p.name}» с сервера? Локальная копия в userData останется.`)) return;
+    try {
+      const r = await fetch('/api/projects/' + encodeURIComponent(p.id), { method: 'DELETE' });
+      if (!r.ok) throw new Error('HTTP ' + r.status);
+      // Очищаем кэш и перерендериваем grid.
+      try {
+        const cached = JSON.parse(localStorage.getItem('cloudProjectsCache') || '[]');
+        localStorage.setItem('cloudProjectsCache', JSON.stringify(cached.filter(c => c.id !== p.id)));
+      } catch {}
+      await renderWelcomeRecents();
+    } catch (e) { alert('Не удалось удалить: ' + (e?.message || e)); }
+  }, { danger: true });
+  positionFloatingMenu(menu, clientX, clientY);
+  setTimeout(() => document.addEventListener('mousedown', closeNodeMenu, { once: true }), 0);
 }
 
 // Скопировать файл image-ноды в корень проекта как `.cover.<ext>`.
@@ -656,6 +847,8 @@ async function openFilm(handle) {
   loadUploadCache().catch(() => {});
   await refreshSidebar();
   showEmpty();
+  // Cloud-кнопки: показать «☁ Сохранить на сервер» когда проект открыт.
+  if (window.cloudProjects?.setVisibility) window.cloudProjects.setVisibility();
 
   const raw = localStorage.getItem(`lastBoard:${handle.name}`);
   if (raw) {
@@ -696,7 +889,13 @@ async function openFilm(handle) {
 // Закрыть текущий проект: выгрузить state, скрыть секции, восстановить
 // шапку, оставить запись в idb (чтобы Recent работал).
 async function closeProject() {
+  // Помечаем что юзер вышел явно — на следующем старте autoload пропускается.
+  // Cmd+R после close = welcome, а не реоткрытие.
+  try { localStorage.setItem('welcomeOnNextStart', '1'); } catch {}
   stopExternalWatcher();
+  // Сбрасываем UI таймлайна/превью — иначе при возврате через welcome
+  // в новый проект остаётся фрейм/дорожки прошлого.
+  if (typeof resetTimelineUI === 'function') resetTimelineUI();
   if (state.currentBoard?.urls) {
     for (const u of Object.values(state.currentBoard.urls)) URL.revokeObjectURL(u);
   }
@@ -705,6 +904,9 @@ async function closeProject() {
   if (typeof revokeMentionThumbCache === 'function') revokeMentionThumbCache();
   state.filmHandle = null;
   state.currentBoard = null;
+  // Сбрасываем cloud-маркеры (если был открыт облачный проект).
+  state.cloudProjectId = null;
+  state.cloudDirty = false;
   window.appProject?.notifyState(false);
   state.charactersInfo = [];
   state.locationsInfo = [];
@@ -712,6 +914,8 @@ async function closeProject() {
   state.selectedClipIds.clear();
   state.selectedTrackIds.clear();
   document.body.classList.add('no-project');
+  // Видимость cloud-кнопок зависит от наличия открытого проекта — переключаем.
+  if (window.cloudProjects?.setVisibility) window.cloudProjects.setVisibility();
   const sub = $('brandSub');
   if (sub) { sub.textContent = 'Видео-редактор'; sub.classList.remove('has-project'); }
   const boardEl = $('brandBoard');
@@ -794,21 +998,9 @@ function showBoardContextMenu(kind, item, clientX, clientY) {
       selectBoard({ kind, ...item }).then(() => openCharacterSettings()).catch(() => {});
     });
   }
-  // Сохранение этого board'а как шаблон. saveCurrentBoardAsTemplate
-  // работает с state.currentBoard, поэтому сначала открываем нужный
-  // board (если он не текущий), а затем запускаем сохранение.
-  add('💾 Сохранить как шаблон', async () => {
-    try {
-      if (!state.currentBoard || state.currentBoard.kind !== kind || state.currentBoard.name !== item.name) {
-        await selectBoard({ kind, ...item });
-      }
-      if (typeof saveCurrentBoardAsTemplate === 'function') {
-        await saveCurrentBoardAsTemplate();
-      }
-    } catch (e) {
-      alert('Не удалось сохранить как шаблон: ' + (e?.message || e));
-    }
-  });
+  // «💾 Сохранить как шаблон» скрыт: scene-templates по упрощённой
+  // модели больше не используются (только project-templates). Код
+  // saveCurrentBoardAsTemplate сохранён — может пригодиться позже.
   add('🗑 Удалить', async () => {
     if (!confirm(`Удалить «${item.name}»? Папка переедет в _deleted, Cmd+Z восстановит.`)) return;
     try { await deleteBoard(kind, item.name); }
@@ -838,6 +1030,8 @@ async function promptBoardAspectRatio(kind, item) {
     if (!state.currentBoard.metadata.settings) state.currentBoard.metadata.settings = {};
     state.currentBoard.metadata.settings.aspectRatio = chosen;
     scheduleSave();
+    // Обновить aspect-label в заголовке таймлайна (если открыт).
+    if (typeof updateTimelineAspectLabel === 'function') updateTimelineAspectLabel();
   } else {
     // Доска не активна — пишем напрямую.
     const meta = await loadBoardMetadata(item.handle);
@@ -1366,6 +1560,10 @@ async function selectBoard(board) {
   if (state.currentBoard?.urls) {
     for (const url of Object.values(state.currentBoard.urls)) URL.revokeObjectURL(url);
   }
+  // Сбрасываем UI таймлайна/превью (иначе остаётся фрейм/контент прошлой сцены
+  // пока юзер не нажмёт ▶ — особенно заметно при переключении на сцену
+  // без таймлайна вовсе).
+  if (typeof resetTimelineUI === 'function') resetTimelineUI();
   clearSelection();
   state.selectedClipIds.clear();
   state.selectedTrackIds.clear();