mjasin/Nexus.Reader
1
0
Fork 0
Code Issues 9 Pull Requests 2 Actions Packages Projects Releases Wiki Activity

feat(ui/graph): Knowledge Graph Refinement and Sidebar Hierarchy (#25)

Browse Source 
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:
Marek Jaisński
2026-05-09 09:36:23 +00:00
committed by Marek Jaisński
parent 9e77aee231
commit 34794db209
11 changed files with 144 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/NexusReader.UI.Shared/Components/Molecules/AiAssistantBubble.razor
+1 -1
View File
@@ -129,7 +129,7 @@
{
if (action.Contains("quiz", StringComparison.OrdinalIgnoreCase))
{
QuizState.RequestQuiz(ContextBlockId);
await QuizState.RequestQuiz(ContextBlockId);
}
if (OnActionTriggered.HasDelegate)
src/NexusReader.UI.Shared/Components/Molecules/IntelligenceToolbar.razor
+1 -1
View File
@@ -38,7 +38,7 @@
<button class="toolbar-item" title="Global Settings">
<NexusIcon Name="settings" Size="20" />
</button>
<button class="toolbar-item logout-item" @onclick="HandleLogout" title="Logout">
<button class="toolbar-item logout-item" @onclick="HandleLogout" title="Exit">
<NexusIcon Name="log-out" Size="20" />
</button>
</div>
src/NexusReader.UI.Shared/Components/Molecules/IntelligenceToolbar.razor.css
+19
View File
@@ -75,3 +75,22 @@
color: #ff4d4d;
background: rgba(255, 77, 77, 0.1);
}
.toolbar-item.logout-item {
margin-top: 1rem;
border-top: 1px solid rgba(255, 255, 255, 0.08);
padding-top: 1.5rem;
height: auto;
width: 100%;
display: flex;
justify-content: center;
border-radius: 0;
color: #444;
}
.toolbar-item.logout-item:hover {
color: #ff4d4d;
background: none;
filter: drop-shadow(0 0 8px rgba(255, 77, 77, 0.4));
}
src/NexusReader.UI.Shared/Components/Organisms/KnowledgeGraph.razor.css
+17 -12
View File
@@ -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 {