litruv/plugin-manager
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add plugin directory tab with remote marketplace browse and download

Browse Source
This commit is contained in:
Litruv
2026-04-18 20:27:16 +10:00
parent c6d3d4cbe5
commit 11b428e25b
2 changed files with 261 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

91
test/electron/index.html
View File

@@ -210,6 +210,75 @@
#load-plugin-row button { white-space: nowrap; font-size: 11px; padding: 4px 10px; }
#no-plugins-msg { color: #555; font-size: 12px; text-align: center; padding: 20px 0; }
/* Manager tabs */
.tab-bar {
display: flex;
gap: 1px;
background: #0f3460;
flex-shrink: 0;
}
.tab-bar button {
flex: 1;
padding: 7px 4px;
border-radius: 0;
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
background: #16213e;
color: #555;
border: none;
border-bottom: 2px solid transparent;
transition: color 0.15s, border-color 0.15s;
}
.tab-bar button.active {
color: #7986cb;
border-bottom-color: #7986cb;
background: #1a1a2e;
}
.tab-bar button:hover:not(.active) { color: #90a4ae; background: #1a1a2e; }
.tab-pane { display: none; flex-direction: column; gap: 10px; }
.tab-pane.active { display: flex; }
/* Marketplace cards */
.market-card {
background: #0f3460;
border: 1px solid #1e3a6e;
border-radius: 6px;
padding: 10px;
display: flex;
flex-direction: column;
gap: 5px;
}
.market-card-header { display: flex; align-items: center; gap: 8px; }
.market-card-thumb {
width: 36px; height: 36px; border-radius: 6px;
background: linear-gradient(135deg, #233a6e 0%, #0f3460 100%);
flex-shrink: 0; object-fit: cover;
}
.market-card-thumb-fallback {
width: 36px; height: 36px; border-radius: 6px;
background: linear-gradient(135deg, #1e3a7e 0%, #e94560 100%);
flex-shrink: 0;
display: flex; align-items: center; justify-content: center;
font-weight: 700; font-size: 15px; color: #fff;
}
.market-info { flex: 1; min-width: 0; }
.market-name { font-weight: 700; font-size: 12px; color: #e0e0e0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.market-author { font-size: 10px; color: #7986cb; }
.market-desc { font-size: 11px; color: #90a4ae; line-height: 1.4; }
.market-footer { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.market-install-btn {
font-size: 10px; padding: 3px 10px; background: #e94560; color: #fff;
border-radius: 4px; margin-left: auto;
}
.market-install-btn:hover { background: #c73652; }
.market-install-btn:disabled { background: #333; color: #555; cursor: default; }
.market-tag { font-size: 9px; padding: 1px 5px; border-radius: 6px; background: #162250; color: #7986cb; }
#dir-search { margin-bottom: 4px; }
#dir-status { font-size: 11px; color: #7986cb; text-align: center; padding: 6px 0; }
</style>
</head>
<body>
@@ -220,9 +289,17 @@
<main>
<!-- Left: Plugin Manager (spans both rows) -->
<div class="panel" id="panel-manager">
<div class="panel-header">Plugin Manager</div>
<div class="panel-body">
<div class="panel" id="panel-manager" style="overflow:hidden;">
<div class="panel-header" style="display:flex;align-items:center;justify-content:space-between;">
Plugin Manager
</div>
<div class="tab-bar">
<button id="tab-installed" class="active">Installed</button>
<button id="tab-directory">Directory</button>
</div>
<!-- Installed tab -->
<div id="pane-installed" class="tab-pane active" style="flex:1;overflow-y:auto;padding:12px;">
<div style="font-size:11px;color:#7986cb;margin-bottom:2px;">Load plugin from file:</div>
<div id="load-plugin-row">
<input type="text" id="load-plugin-path" placeholder="/path/to/plugin/index.js" />
@@ -231,6 +308,14 @@
<div style="margin-top:10px;font-size:11px;color:#7986cb;margin-bottom:4px;">Registered plugins:</div>
<div id="plugin-list"><div id="no-plugins-msg">No plugins loaded</div></div>
</div>
<!-- Directory tab -->
<div id="pane-directory" class="tab-pane" style="flex:1;overflow-y:auto;padding:12px;">
<input type="text" id="dir-search" placeholder="Search plugins…" />
<div id="dir-status">Click Refresh to fetch the plugin directory.</div>
<button id="dir-refresh" style="font-size:11px;padding:4px 10px;align-self:flex-start;">&#8635; Refresh</button>
<div id="dir-list" style="display:flex;flex-direction:column;gap:8px;"></div>
</div>
</div>
<!-- Top-center: Commands -->