Added the in app marketplace
This commit is contained in:
298
src/marketplace.js
Normal file
298
src/marketplace.js
Normal file
@@ -0,0 +1,298 @@
|
||||
const REPO_OWNER = 'ItsSkaiya';
|
||||
const REPO_NAME = 'WaifuBoard-Extensions';
|
||||
const API_URL = `https://api.github.com/repos/${REPO_OWNER}/${REPO_NAME}/contents/extensions?ref=main`;
|
||||
|
||||
document.addEventListener('DOMContentLoaded', async () => {
|
||||
const browseGrid = document.getElementById('marketplace-grid');
|
||||
const installedGrid = document.getElementById('installed-grid');
|
||||
|
||||
const statTotal = document.getElementById('stat-total');
|
||||
const statInstalled = document.getElementById('stat-installed');
|
||||
|
||||
const tabBrowse = document.getElementById('tab-browse');
|
||||
const tabInstalled = document.getElementById('tab-installed');
|
||||
const viewBrowse = document.getElementById('view-browse');
|
||||
const viewInstalled = document.getElementById('view-installed');
|
||||
|
||||
let allRemoteExtensions = [];
|
||||
let installedExtensionsList = [];
|
||||
|
||||
const messageBar = document.getElementById('message-bar');
|
||||
|
||||
function showMessage(msg, type = 'success') {
|
||||
if (!messageBar) return;
|
||||
messageBar.textContent = msg;
|
||||
messageBar.className = `toast ${type === 'error' ? 'error' : ''}`;
|
||||
messageBar.classList.remove('hidden');
|
||||
setTimeout(() => messageBar.classList.add('hidden'), 3000);
|
||||
}
|
||||
|
||||
function updateStats() {
|
||||
if(statTotal) statTotal.textContent = allRemoteExtensions.length;
|
||||
if(statInstalled) statInstalled.textContent = installedExtensionsList.length;
|
||||
}
|
||||
|
||||
function showRestartToast() {
|
||||
if (document.getElementById('restart-toast')) return;
|
||||
|
||||
const toast = document.createElement('div');
|
||||
toast.id = 'restart-toast';
|
||||
toast.style.cssText = `
|
||||
position: fixed;
|
||||
bottom: 20px;
|
||||
right: 20px;
|
||||
background: #1f2937;
|
||||
border: 1px solid var(--accent);
|
||||
border-radius: 12px;
|
||||
padding: 1rem 1.5rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
box-shadow: 0 10px 30px rgba(0,0,0,0.5);
|
||||
z-index: 2000;
|
||||
animation: slideUp 0.3s ease-out;
|
||||
`;
|
||||
|
||||
toast.innerHTML = `
|
||||
<div style="display:flex; flex-direction:column;">
|
||||
<span style="color:#fff; font-weight:600;">Restart Required</span>
|
||||
<span style="color:#9ca3af; font-size:0.8rem;">Changes will apply after restart.</span>
|
||||
</div>
|
||||
<button id="btn-restart-now" style="
|
||||
background: var(--accent);
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 0.5rem 1rem;
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
font-weight: 700;
|
||||
font-size: 0.85rem;
|
||||
transition: 0.2s;
|
||||
">Restart Now</button>
|
||||
`;
|
||||
|
||||
document.body.appendChild(toast);
|
||||
|
||||
const btn = document.getElementById('btn-restart-now');
|
||||
btn.onmouseover = () => btn.style.opacity = '0.9';
|
||||
btn.onmouseout = () => btn.style.opacity = '1';
|
||||
|
||||
btn.onclick = () => {
|
||||
if (window.api && typeof window.api.restartApp === 'function') {
|
||||
window.api.restartApp();
|
||||
} else {
|
||||
console.error("Restart API not found in window.api");
|
||||
alert("Please close and reopen the application manually.");
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
function switchTab(tab) {
|
||||
if (tab === 'browse') {
|
||||
tabBrowse.classList.add('active');
|
||||
tabInstalled.classList.remove('active');
|
||||
viewBrowse.classList.remove('hidden');
|
||||
viewInstalled.classList.add('hidden');
|
||||
} else {
|
||||
tabBrowse.classList.remove('active');
|
||||
tabInstalled.classList.add('active');
|
||||
viewBrowse.classList.add('hidden');
|
||||
viewInstalled.classList.remove('hidden');
|
||||
renderInstalledGrid();
|
||||
}
|
||||
}
|
||||
|
||||
if(tabBrowse) tabBrowse.onclick = () => switchTab('browse');
|
||||
if(tabInstalled) tabInstalled.onclick = () => switchTab('installed');
|
||||
|
||||
async function fetchInstalledExtensions() {
|
||||
try {
|
||||
const extensions = await window.api.getInstalledExtensions();
|
||||
installedExtensionsList = extensions || [];
|
||||
} catch (e) {
|
||||
console.error("Failed to fetch installed extensions:", e);
|
||||
installedExtensionsList = [];
|
||||
}
|
||||
}
|
||||
|
||||
async function fetchRemoteExtensions() {
|
||||
try {
|
||||
const res = await fetch(API_URL);
|
||||
if (!res.ok) throw new Error(`GitHub API Error: ${res.status}`);
|
||||
const data = await res.json();
|
||||
|
||||
allRemoteExtensions = data.filter(item => item.name.endsWith('.js'));
|
||||
renderBrowseGrid(allRemoteExtensions);
|
||||
updateStats();
|
||||
} catch (e) {
|
||||
if(browseGrid) browseGrid.innerHTML = `<div class="loading-state"><p style="color:#ef4444">Failed to load marketplace.<br>${e.message}</p></div>`;
|
||||
}
|
||||
}
|
||||
|
||||
async function getExtensionDetails(url) {
|
||||
try {
|
||||
const res = await fetch(url);
|
||||
const text = await res.text();
|
||||
|
||||
const baseUrlMatch = text.match(/baseUrl\s*=\s*["']([^"']+)["']/);
|
||||
let baseUrl = baseUrlMatch ? baseUrlMatch[1] : null;
|
||||
|
||||
if (baseUrl) {
|
||||
try {
|
||||
const urlObj = new URL(baseUrl);
|
||||
baseUrl = urlObj.hostname;
|
||||
} catch(e) {
|
||||
console.warn("Invalid URL in extension:", baseUrl);
|
||||
}
|
||||
}
|
||||
|
||||
const classMatch = text.match(/class\s+(\w+)/);
|
||||
const name = classMatch ? classMatch[1] : null;
|
||||
|
||||
let type = 'Image';
|
||||
if (text.includes('type = "book-board"') || text.includes("type = 'book-board'")) {
|
||||
type = 'Book';
|
||||
}
|
||||
|
||||
return { baseUrl, name, type };
|
||||
} catch (e) {
|
||||
return { baseUrl: null, name: null, type: 'Unknown' };
|
||||
}
|
||||
}
|
||||
|
||||
async function createCard(item, isLocalOnly = false) {
|
||||
const isInstalled = installedExtensionsList.includes(item.name);
|
||||
|
||||
const downloadUrl = item.download_url || null;
|
||||
let sizeKB = item.size ? (item.size / 1024).toFixed(1) + ' KB' : 'Local';
|
||||
|
||||
let iconUrl = '';
|
||||
let displayName = item.name.replace('.js', '');
|
||||
let typeLabel = 'Extension';
|
||||
let typeClass = 'type-image';
|
||||
|
||||
if (downloadUrl) {
|
||||
const details = await getExtensionDetails(downloadUrl);
|
||||
displayName = details.name || displayName;
|
||||
const domain = details.baseUrl || 'github.com';
|
||||
iconUrl = `https://www.google.com/s2/favicons?domain=${domain}&sz=128`;
|
||||
|
||||
if (details.type === 'Book') {
|
||||
typeLabel = 'Book Board';
|
||||
typeClass = 'type-book';
|
||||
} else {
|
||||
typeLabel = 'Image Board';
|
||||
typeClass = 'type-image';
|
||||
}
|
||||
} else {
|
||||
iconUrl = `https://ui-avatars.com/api/?name=${displayName}&background=18181b&color=fff&length=1`;
|
||||
}
|
||||
|
||||
const card = document.createElement('div');
|
||||
card.className = 'extension-card';
|
||||
card.dataset.name = item.name;
|
||||
|
||||
const downloadIcon = '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path><polyline points="7 10 12 15 17 10"></polyline><line x1="12" y1="15" x2="12" y2="3"></line></svg>';
|
||||
const trashIcon = '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="3 6 5 6 21 6"></polyline><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path></svg>';
|
||||
const checkIcon = '<svg width="12" height="12" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg>';
|
||||
|
||||
const renderInner = (installed) => `
|
||||
<div class="card-header-row">
|
||||
<div class="ext-icon-box">
|
||||
<img src="${iconUrl}" class="ext-icon" onerror="this.src='data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22gray%22 stroke-width=%222%22><rect x=%223%22 y=%223%22 width=%2218%22 height=%2218%22 rx=%222%22/></svg>'">
|
||||
</div>
|
||||
<span class="type-badge ${typeClass}">${typeLabel}</span>
|
||||
</div>
|
||||
|
||||
<div class="ext-info">
|
||||
<h3 class="ext-name">${displayName}</h3>
|
||||
<div class="ext-filename">${item.name}</div>
|
||||
</div>
|
||||
|
||||
<div class="card-footer">
|
||||
<div class="ext-status-group">${installed ? `<span class="status-badge status-installed">${checkIcon} Installed</span>` : ''}
|
||||
<span class="ext-size-badge">${sizeKB}</span>
|
||||
</div>
|
||||
<button class="install-btn ${installed ? 'installed' : ''}" title="${installed ? 'Uninstall' : 'Install'}">
|
||||
${installed ? `${trashIcon} Uninstall` : `${downloadIcon} Install`}
|
||||
</button>
|
||||
</div>
|
||||
`;
|
||||
|
||||
card.innerHTML = renderInner(isInstalled);
|
||||
|
||||
card.addEventListener('click', async (e) => {
|
||||
const btn = e.target.closest('.install-btn');
|
||||
if (!btn) return;
|
||||
|
||||
const currentlyInstalled = installedExtensionsList.includes(item.name);
|
||||
|
||||
if (currentlyInstalled) {
|
||||
const success = await window.api.uninstallExtension(item.name);
|
||||
if (success) {
|
||||
installedExtensionsList = installedExtensionsList.filter(n => n !== item.name);
|
||||
card.innerHTML = renderInner(false);
|
||||
updateStats();
|
||||
|
||||
if (tabInstalled.classList.contains('active')) {
|
||||
card.remove();
|
||||
if (installedGrid.children.length === 0) {
|
||||
installedGrid.innerHTML = '<div class="loading-state"><p>No extensions installed.</p></div>';
|
||||
}
|
||||
}
|
||||
showRestartToast();
|
||||
} else {
|
||||
showMessage('Failed to uninstall', 'error');
|
||||
}
|
||||
} else {
|
||||
if (!downloadUrl) return;
|
||||
const originalHTML = btn.innerHTML;
|
||||
btn.innerHTML = '<svg class="spinner" viewBox="0 0 50 50"><circle cx="25" cy="25" r="20" fill="none" stroke="currentColor" stroke-width="5"></circle></svg>';
|
||||
|
||||
const success = await window.api.installExtension(item.name, downloadUrl);
|
||||
if (success) {
|
||||
installedExtensionsList.push(item.name);
|
||||
card.innerHTML = renderInner(true);
|
||||
updateStats();
|
||||
showMessage(`Installed ${displayName}`);
|
||||
showRestartToast();
|
||||
} else {
|
||||
showMessage('Failed to install', 'error');
|
||||
btn.innerHTML = originalHTML;
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
return card;
|
||||
}
|
||||
|
||||
async function renderBrowseGrid(list) {
|
||||
browseGrid.innerHTML = '';
|
||||
if (list.length === 0) {
|
||||
browseGrid.innerHTML = '<p class="loading-state">No extensions found.</p>';
|
||||
return;
|
||||
}
|
||||
for (const item of list) {
|
||||
const card = await createCard(item);
|
||||
browseGrid.appendChild(card);
|
||||
}
|
||||
}
|
||||
|
||||
async function renderInstalledGrid() {
|
||||
installedGrid.innerHTML = '';
|
||||
if (installedExtensionsList.length === 0) {
|
||||
installedGrid.innerHTML = '<div class="loading-state"><p>No extensions installed.</p></div>';
|
||||
return;
|
||||
}
|
||||
|
||||
for (const filename of installedExtensionsList) {
|
||||
const remoteData = allRemoteExtensions.find(r => r.name === filename);
|
||||
const item = remoteData || { name: filename, download_url: null, size: 0 };
|
||||
const card = await createCard(item, !remoteData);
|
||||
installedGrid.appendChild(card);
|
||||
}
|
||||
}
|
||||
|
||||
await fetchInstalledExtensions();
|
||||
await fetchRemoteExtensions();
|
||||
});
|
||||
Reference in New Issue
Block a user