From 942373563d31b2657264758802c2f647d029efe1 Mon Sep 17 00:00:00 2001 From: DCCONSTRUCTIONS Date: Sun, 28 Jun 2026 19:48:20 +0300 Subject: [PATCH] Unify page workspace error panels --- seo_mode/seo_mode/app/src/App.tsx | 462 +++++++++++---------------- seo_mode/seo_mode/app/src/styles.css | 134 ++++++++ 2 files changed, 320 insertions(+), 276 deletions(-) diff --git a/seo_mode/seo_mode/app/src/App.tsx b/seo_mode/seo_mode/app/src/App.tsx index 9f0cf48..bc4535d 100644 --- a/seo_mode/seo_mode/app/src/App.tsx +++ b/seo_mode/seo_mode/app/src/App.tsx @@ -1039,6 +1039,10 @@ function getWorkspaceKey(projectId: string, scopeId: string) { return `${projectId}:${scopeId}`; } +function getWorkspaceUiKeyFromWorkspaceKey(workspaceKey: string) { + return workspaceKey.split(":")[0] ?? workspaceKey; +} + type WorkspaceSection = PageWorkspace["sections"][number]; type WorkspaceSectionTextMap = Record; @@ -1059,7 +1063,9 @@ type WorkspaceTarget = { }; type WorkspacePreviewMode = "desktop" | "mobile"; -type WorkspaceDrawerPanel = "fields" | "issues"; +type WorkspaceDrawerPanel = "pages" | "issues"; + +const WORKSPACE_DRAWER_ORDER: WorkspaceDrawerPanel[] = ["pages", "issues"]; const WORKSPACE_PREVIEW_MODES: Array<{ id: WorkspacePreviewMode; label: string }> = [ { id: "desktop", label: "Desktop" }, @@ -1500,7 +1506,6 @@ export function App() { const [activeWorkspaceTargetIds, setActiveWorkspaceTargetIds] = useState>({}); const [workspacePreviewMarkers, setWorkspacePreviewMarkers] = useState>({}); const [workspaceDrawers, setWorkspaceDrawers] = useState>({}); - const [workspacePageMenus, setWorkspacePageMenus] = useState>({}); const [workspacePreviewScopeIds, setWorkspacePreviewScopeIds] = useState>({}); const [pageWorkspaces, setPageWorkspaces] = useState>({}); const [workspaceDraftTexts, setWorkspaceDraftTexts] = useState>({}); @@ -1760,11 +1765,6 @@ export function App() { return; } - if (data.type === "seo-mode:preview-pointerdown") { - closeWorkspacePageMenus(); - return; - } - if (data.type !== "seo-mode:preview-markers") { if (data?.type === "seo-mode:active-scope-page") { const sourceWorkspaceKey = typeof data.workspaceKey === "string" ? data.workspaceKey : ""; @@ -1832,7 +1832,7 @@ export function App() { ...currentSectionIds, [workspaceKey]: sectionId || targetId })); - openWorkspaceDrawer(workspaceKey, "fields"); + openWorkspaceDrawer(getWorkspaceUiKeyFromWorkspaceKey(workspaceKey), "issues"); scrollWorkspaceFieldIntoView(workspaceKey, targetId); return; @@ -2550,7 +2550,7 @@ export function App() { ...currentSectionIds, [workspaceKey]: target.sectionId })); - openWorkspaceDrawer(workspaceKey, "fields"); + openWorkspaceDrawer(getWorkspaceUiKeyFromWorkspaceKey(workspaceKey), "issues"); scrollWorkspaceFieldIntoView(workspaceKey, target.id); } @@ -2599,49 +2599,6 @@ export function App() { }); } - function toggleWorkspacePageMenu(workspaceKey: string) { - setWorkspacePageMenus((currentMenus) => ({ - ...currentMenus, - [workspaceKey]: !currentMenus[workspaceKey] - })); - } - - function closeWorkspacePageMenus() { - setWorkspacePageMenus((currentMenus) => { - let hasOpenMenu = false; - const nextMenus = { ...currentMenus }; - - Object.keys(nextMenus).forEach((workspaceKey) => { - if (nextMenus[workspaceKey]) { - nextMenus[workspaceKey] = false; - hasOpenMenu = true; - } - }); - - return hasOpenMenu ? nextMenus : currentMenus; - }); - } - - useEffect(() => { - if (!Object.values(workspacePageMenus).some(Boolean)) { - return; - } - - function handleDocumentPointerDown(event: PointerEvent) { - if (event.target instanceof Element && event.target.closest(".workspace-page-control")) { - return; - } - - closeWorkspacePageMenus(); - } - - document.addEventListener("pointerdown", handleDocumentPointerDown, true); - - return () => { - document.removeEventListener("pointerdown", handleDocumentPointerDown, true); - }; - }, [workspacePageMenus]); - function updateWorkspacePreviewMarkers( workspaceKey: string, targets: WorkspaceTarget[], @@ -2803,12 +2760,11 @@ export function App() { ); setWorkspaceDrawers((currentDrawers) => Object.fromEntries( - Object.entries(currentDrawers).filter(([workspaceKey]) => !workspaceKey.startsWith(`${project.id}:`)) + Object.entries(currentDrawers).filter( + ([workspaceKey]) => workspaceKey !== project.id && !workspaceKey.startsWith(`${project.id}:`) + ) ) ); - setWorkspacePageMenus((currentMenus) => - Object.fromEntries(Object.entries(currentMenus).filter(([workspaceKey]) => !workspaceKey.startsWith(`${project.id}:`))) - ); setActiveWorkspaceSectionIds((currentSectionIds) => Object.fromEntries( Object.entries(currentSectionIds).filter(([workspaceKey]) => !workspaceKey.startsWith(`${project.id}:`)) @@ -3522,12 +3478,10 @@ export function App() { null; const activeWorkspaceMarkers = activeWorkspaceKey ? (workspacePreviewMarkers[activeWorkspaceKey] ?? []) : []; const activeWorkspacePreviewMode = activeWorkspaceKey ? (workspacePreviewModes[activeWorkspaceKey] ?? "desktop") : "desktop"; - const activeWorkspaceDrawers = activeWorkspaceKey - ? (workspaceDrawers[activeWorkspaceKey] ?? []).filter( - (drawer): drawer is WorkspaceDrawerPanel => drawer === "fields" || drawer === "issues" - ) - : []; - const isWorkspacePageMenuOpen = activeWorkspaceKey ? Boolean(workspacePageMenus[activeWorkspaceKey]) : false; + const activeWorkspaceUiKey = project.id; + const activeWorkspaceDrawers = WORKSPACE_DRAWER_ORDER.filter((drawer) => + (workspaceDrawers[activeWorkspaceUiKey] ?? []).includes(drawer) + ); const previewWorkspaceScopeId = workspacePreviewScopeIds[project.id] ?? activeWorkspaceScopeItem?.scopeId ?? null; const previewWorkspaceScopeItem = selectedWorkspaceScopeItems.find((item) => item.scopeId === previewWorkspaceScopeId) ?? @@ -4793,83 +4747,25 @@ export function App() { Warning: {activeWorkspaceIssueCounts.warnings} · Info: {activeWorkspaceIssueCounts.info}
-
- - {isWorkspacePageMenuOpen ? ( -
-
- Страницы и секции - Переключает preview, ошибки и поля рабочей зоны. -
- {selectedWorkspaceScopeItems.length > 0 ? ( -
- {selectedWorkspaceScopeItems.map((scopeItem, pageIndex) => { - const pageWorkspaceKey = getWorkspaceKey(project.id, scopeItem.scopeId); - const isActivePage = activeWorkspaceScopeItem?.scopeId === scopeItem.scopeId; - const isOpening = busyWorkspaceKey === pageWorkspaceKey; - const pageIssues = getPageIssues(scanSummary, scopeItem.pageId); - - return ( - - ); - })} -
- ) : ( - - В выбранном наборе пока нет рабочих страниц или секций. - - )} -
- ) : null} -
+ -
@@ -4949,162 +4845,176 @@ export function App() {
{activeWorkspaceDrawers.length > 0 ? (
- {activeWorkspaceDrawers.map((activeWorkspaceDrawer) => ( -