feat: enhance LibraryManagerModal to fetch and display installed libraries dynamically

pull/10/head
David Montero Crespo 2026-03-05 01:23:59 -03:00
parent f9dfc2b012
commit da47f69cb2
1 changed files with 32 additions and 11 deletions

View File

@ -33,6 +33,14 @@ export const LibraryManagerModal: React.FC<LibraryManagerModalProps> = ({ isOpen
} }
}, []); }, []);
// Fetch installed list when modal opens (to cross-reference in search tab)
useEffect(() => {
if (isOpen) {
fetchInstalled();
}
}, [isOpen, fetchInstalled]);
// Also refresh when switching to the installed tab
useEffect(() => { useEffect(() => {
if (isOpen && activeTab === 'installed') { if (isOpen && activeTab === 'installed') {
fetchInstalled(); fetchInstalled();
@ -69,6 +77,7 @@ export const LibraryManagerModal: React.FC<LibraryManagerModalProps> = ({ isOpen
const result = await installLibrary(libName); const result = await installLibrary(libName);
if (result.success) { if (result.success) {
setStatusMsg({ type: 'success', text: `"${libName}" installed successfully!` }); setStatusMsg({ type: 'success', text: `"${libName}" installed successfully!` });
fetchInstalled(); // Refresh installed list so search tab reflects new state
} else { } else {
setStatusMsg({ type: 'error', text: result.error || `Failed to install "${libName}"` }); setStatusMsg({ type: 'error', text: result.error || `Failed to install "${libName}"` });
} }
@ -88,6 +97,11 @@ export const LibraryManagerModal: React.FC<LibraryManagerModalProps> = ({ isOpen
if (!isOpen) return null; if (!isOpen) return null;
const isInstalled = (libName: string): boolean =>
installedLibraries.some(
(il) => (il.library?.name || il.name || '').toLowerCase() === libName.toLowerCase()
);
const getLibName = (lib: ArduinoLibrary): string => lib.name || 'Unknown'; const getLibName = (lib: ArduinoLibrary): string => lib.name || 'Unknown';
const getLibVersion = (lib: ArduinoLibrary): string => lib.latest?.version || lib.version || ''; const getLibVersion = (lib: ArduinoLibrary): string => lib.latest?.version || lib.version || '';
const getLibAuthor = (lib: ArduinoLibrary): string => lib.latest?.author || lib.author || ''; const getLibAuthor = (lib: ArduinoLibrary): string => lib.latest?.author || lib.author || '';
@ -207,6 +221,12 @@ export const LibraryManagerModal: React.FC<LibraryManagerModalProps> = ({ isOpen
{getLibVersion(lib) && ( {getLibVersion(lib) && (
<span className="lib-item-version">{getLibVersion(lib)}</span> <span className="lib-item-version">{getLibVersion(lib)}</span>
)} )}
{isInstalled(getLibName(lib)) ? (
<span className="lib-item-version lib-installed-badge">
INSTALLED
<svg style={{ display: 'inline', marginLeft: '4px', verticalAlign: 'middle' }} width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round"><polyline points="20 6 9 17 4 12" /></svg>
</span>
) : (
<button <button
className="lib-install-btn" className="lib-install-btn"
onClick={() => handleInstall(getLibName(lib))} onClick={() => handleInstall(getLibName(lib))}
@ -218,6 +238,7 @@ export const LibraryManagerModal: React.FC<LibraryManagerModalProps> = ({ isOpen
'INSTALL' 'INSTALL'
)} )}
</button> </button>
)}
</div> </div>
</div> </div>
))} ))}