feat(ui/graph): Knowledge Graph Refinement and Sidebar Hierarchy (#25)
This PR addresses several UI/UX and architectural refinements for the Knowledge Graph and Intelligence Sidebar. ### Key Changes: - **Knowledge Graph (#21, #22)**: - Implemented \"pill-shaped\" nodes with dynamic label truncation and SVG tooltips. - Added bound-constrained simulation to keep nodes within the viewport. - Integrated `ResizeObserver` for dynamic layout handling. - Implemented Zoom-to-Fit functionality. - Enforced unique concept IDs in AI prompts and hardened JS logic to prevent multi-selection bugs. - **Intelligence Sidebar (#23)**: - Improved visual depth with a radial gradient background for the graph. - Increased sidebar divider contrast for better layering. - Transformed graph controls into a floating glassmorphism panel. - Relocated the \"Logout\" action to the toolbar bottom and rebranded it as \"Exit\". Fixes #21 Fixes #22 Fixes #23 Reviewed-on: #25 Co-authored-by: Marek Jasiński <jasins.marek@gmail.com> Co-committed-by: Marek Jasiński <jasins.marek@gmail.com>
This commit was merged in pull request #25.
This commit is contained in:
@@ -12,28 +12,33 @@
|
||||
|
||||
.graph-controls {
|
||||
position: absolute;
|
||||
bottom: 1rem;
|
||||
bottom: 1.5rem;
|
||||
right: 1.5rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
flex-direction: row;
|
||||
gap: 0.25rem;
|
||||
background: rgba(20, 20, 20, 0.4);
|
||||
backdrop-filter: blur(12px);
|
||||
padding: 0.35rem;
|
||||
border-radius: 8px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.08);
|
||||
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.zoom-btn {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
background: rgba(18, 18, 18, 0.8);
|
||||
backdrop-filter: blur(4px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
border-radius: 4px;
|
||||
color: #888;
|
||||
font-size: 1rem;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
background: rgba(255, 255, 255, 0.03);
|
||||
border: 1px solid rgba(255, 255, 255, 0.05);
|
||||
border-radius: 6px;
|
||||
color: #aaa;
|
||||
font-size: 1.1rem;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: all 0.2s ease;
|
||||
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
.zoom-btn:hover {
|
||||
|
||||
Reference in New Issue
Block a user