Improve dependency UI: rename to DependGraph, hide empty Used By

- Rename "Dependency Graph" modal title to "DependGraph"
- Hide "Used By" section when no packages depend on this package
This commit is contained in:
Mondo Diaz
2026-02-02 20:34:32 -06:00
parent 01915bcb45
commit f87e5b4a51
2 changed files with 8 additions and 15 deletions

View File

@@ -247,7 +247,7 @@ function DependencyGraph({ projectName, packageName, tagName, onClose }: Depende
<div className="dependency-graph-modal" onClick={onClose}>
<div className="dependency-graph-content" onClick={e => e.stopPropagation()}>
<div className="dependency-graph-header">
<h2>Dependency Graph</h2>
<h2>DependGraph</h2>
<div className="dependency-graph-info">
<span>{projectName}/{packageName} @ {tagName}</span>
{resolution && (

View File

@@ -83,7 +83,7 @@ function PackagePage() {
// Reverse dependencies state
const [reverseDeps, setReverseDeps] = useState<DependentInfo[]>([]);
const [reverseDepsLoading, setReverseDepsLoading] = useState(false);
const [reverseDepsError, setReverseDepsError] = useState<string | null>(null);
const [_reverseDepsError, setReverseDepsError] = useState<string | null>(null);
const [reverseDepsPage, setReverseDepsPage] = useState(1);
const [reverseDepsTotal, setReverseDepsTotal] = useState(0);
const [reverseDepsHasMore, setReverseDepsHasMore] = useState(false);
@@ -690,17 +690,10 @@ function PackagePage() {
/>
)}
{/* Used By (Reverse Dependencies) Section */}
<div className="used-by-section card">
<h3>Used By</h3>
{reverseDepsLoading ? (
<div className="deps-loading">Loading reverse dependencies...</div>
) : reverseDepsError ? (
<div className="deps-error">{reverseDepsError}</div>
) : reverseDeps.length === 0 ? (
<div className="deps-empty">No packages depend on this package</div>
) : (
{/* Used By (Reverse Dependencies) Section - only show if there are reverse deps */}
{reverseDeps.length > 0 && (
<div className="used-by-section card">
<h3>Used By</h3>
<div className="reverse-deps-list">
<div className="deps-summary">
{reverseDepsTotal} {reverseDepsTotal === 1 ? 'package depends' : 'packages depend'} on this:
@@ -743,8 +736,8 @@ function PackagePage() {
</div>
)}
</div>
)}
</div>
</div>
)}
<div className="usage-section card">
<h3>Usage</h3>