feat: delete function, sidebar collapse, layer drag&drop, library tree

- Delete: trash button in PropertiesPanel + existing Delete key support
- Left sidebar: desktop collapse toggle button
- Right sidebar: desktop collapse toggle + SVG icon size fix (replaced emoji)
- Layer panel: drag&drop enabled (reorder, move to layers, sub-layers)
- Library tree: BlockLibrary added to left sidebar
- App.tsx: handleReorderLayer, handleAddSubLayer, handleUpdateElement
- styles.css: collapse + drag&drop visual indicators
This commit is contained in:
2026-06-29 10:44:53 +02:00
parent 6b0b637636
commit ba978cd13c
7 changed files with 222 additions and 21 deletions
+40
View File
@@ -2172,3 +2172,43 @@ body.drawer-open { overflow: hidden; }
}
.dashboard-share-btn:hover { border-color: var(--color-primary); color: var(--color-primary); }
/* ─── Desktop Sidebar Collapse ─────────────────────────── */
.rightbar-collapse-toggle {
position: absolute;
top: 8px;
right: 32px;
width: 24px;
height: 24px;
display: grid;
place-items: center;
background: var(--color-surface-2);
border: 1px solid var(--color-border);
border-radius: 4px;
cursor: pointer;
color: var(--color-text-muted);
z-index: 10;
transition: all var(--t-fast);
}
.rightbar-collapse-toggle:hover {
background: var(--color-surface-3);
color: var(--color-text);
}
.rightbar-collapse-toggle svg { width: 14px; height: 14px; }
.app-body.right-collapsed .rightbar { width: 0; min-width: 0; overflow: hidden; border-left: none; }
.app-body.right-collapsed .rightbar-tabs,
.app-body.right-collapsed .rightbar-content,
.app-body.right-collapsed .rightbar-close { display: none; }
.leftbar-collapsed .tool-section,
.leftbar-collapsed .leftbar-title,
.leftbar-collapsed .leftbar-footer-btn:not(:first-child) { display: none; }
.leftbar-collapsed .leftbar-header { justify-content: center; padding: 4px; border: none; }
.leftbar-collapsed .leftbar-toggle svg { transform: rotate(180deg); }
/* Tree drag & drop indicators */
.tree-drag-before { border-top: 2px solid var(--color-primary); }
.tree-drag-after { border-bottom: 2px solid var(--color-primary); }
.tree-drag-inside { background: var(--color-surface-2); outline: 2px solid var(--color-primary); outline-offset: -2px; }
.tree-dragging { opacity: 0.5; }