new marketplace page
This commit is contained in:
@@ -37,24 +37,33 @@ export async function getExtensionSettings(req: ExtensionNameRequest, reply: Fas
|
|||||||
}
|
}
|
||||||
|
|
||||||
export async function installExtension(req: any, reply: FastifyReply) {
|
export async function installExtension(req: any, reply: FastifyReply) {
|
||||||
const { fileName } = req.body;
|
const { url } = req.body;
|
||||||
|
|
||||||
if (!fileName || !fileName.endsWith('.js')) {
|
if (!url || typeof url !== 'string' || !url.endsWith('.js')) {
|
||||||
return reply.code(400).send({ error: "Invalid extension fileName provided" });
|
return reply.code(400).send({ error: "Invalid extension URL provided" });
|
||||||
}
|
}
|
||||||
|
|
||||||
try {
|
try {
|
||||||
|
const fileName = url.split('/').pop();
|
||||||
|
|
||||||
const downloadUrl = `https://git.waifuboard.app/ItsSkaiya/WaifuBoard-Extensions/raw/branch/main/${fileName}`
|
if (!fileName) {
|
||||||
|
return reply.code(400).send({ error: "Could not determine file name from URL" });
|
||||||
|
}
|
||||||
|
|
||||||
await saveExtensionFile(fileName, downloadUrl);
|
await saveExtensionFile(fileName, url);
|
||||||
|
|
||||||
req.server.log.info(`Extension installed: ${fileName}`);
|
req.server.log.info(`Extension installed: ${fileName}`);
|
||||||
return reply.code(200).send({ success: true, message: `Extension ${fileName} installed successfully.` });
|
return reply.code(200).send({
|
||||||
|
success: true,
|
||||||
|
message: `Extension ${fileName} installed successfully.`,
|
||||||
|
});
|
||||||
|
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
req.server.log.error(`Failed to install extension ${fileName}:`, error);
|
req.server.log.error(`Failed to install extension from ${url}:`, error);
|
||||||
return reply.code(500).send({ success: false, error: `Failed to install extension ${fileName}.` });
|
return reply.code(500).send({
|
||||||
|
success: false,
|
||||||
|
error: "Failed to install extension.",
|
||||||
|
});
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -1,422 +1,221 @@
|
|||||||
const GITEA_INSTANCE = 'https://git.waifuboard.app';
|
const ORIGINAL_MARKETPLACE_URL = 'https://git.waifuboard.app/ItsSkaiya/WaifuBoard-Extensions/raw/branch/main/marketplace.json';
|
||||||
const REPO_OWNER = 'ItsSkaiya';
|
const MARKETPLACE_JSON_URL = `/api/proxy?url=${encodeURIComponent(ORIGINAL_MARKETPLACE_URL)}`;
|
||||||
const REPO_NAME = 'WaifuBoard-Extensions';
|
|
||||||
let DETECTED_BRANCH = 'main';
|
|
||||||
const API_URL_BASE = `${GITEA_INSTANCE}/api/v1/repos/${REPO_OWNER}/${REPO_NAME}/contents`;
|
|
||||||
|
|
||||||
const INSTALLED_EXTENSIONS_API = '/api/extensions';
|
const INSTALLED_EXTENSIONS_API = '/api/extensions';
|
||||||
|
|
||||||
const extensionsGrid = document.getElementById('extensions-grid');
|
const marketplaceContent = document.getElementById('marketplace-content');
|
||||||
const filterSelect = document.getElementById('extension-filter');
|
const filterSelect = document.getElementById('extension-filter');
|
||||||
|
|
||||||
let allExtensionsData = [];
|
const modal = document.getElementById('customModal');
|
||||||
|
|
||||||
const customModal = document.getElementById('customModal');
|
|
||||||
const modalTitle = document.getElementById('modalTitle');
|
const modalTitle = document.getElementById('modalTitle');
|
||||||
const modalMessage = document.getElementById('modalMessage');
|
const modalMessage = document.getElementById('modalMessage');
|
||||||
|
const modalConfirmBtn = document.getElementById('modalConfirmButton');
|
||||||
|
const modalCloseBtn = document.getElementById('modalCloseButton');
|
||||||
|
|
||||||
function getRawUrl(filename) {
|
let marketplaceMetadata = {};
|
||||||
|
let installedExtensions = [];
|
||||||
|
let currentTab = 'marketplace';
|
||||||
|
|
||||||
const targetUrl = `${GITEA_INSTANCE}/${REPO_OWNER}/${REPO_NAME}/raw/branch/main/${filename}`;
|
async function loadMarketplace() {
|
||||||
|
showSkeletons();
|
||||||
const encodedUrl = encodeURIComponent(targetUrl);
|
|
||||||
|
|
||||||
return `/api/proxy?url=${encodedUrl}`;
|
|
||||||
}
|
|
||||||
|
|
||||||
function updateExtensionState(fileName, installed) {
|
|
||||||
const ext = allExtensionsData.find(e => e.fileName === fileName);
|
|
||||||
if (!ext) return;
|
|
||||||
|
|
||||||
ext.isInstalled = installed;
|
|
||||||
ext.isLocal = installed && ext.isLocal;
|
|
||||||
|
|
||||||
filterAndRenderExtensions(filterSelect?.value || 'All');
|
|
||||||
}
|
|
||||||
|
|
||||||
function formatExtensionName(fileName) {
|
|
||||||
return fileName.replace('.js', '')
|
|
||||||
.replace(/([a-z])([A-Z])/g, '$1 $2')
|
|
||||||
.replace(/^[a-z]/, (char) => char.toUpperCase());
|
|
||||||
}
|
|
||||||
|
|
||||||
function getIconUrl(extensionDetails) {
|
|
||||||
return extensionDetails;
|
|
||||||
}
|
|
||||||
|
|
||||||
async function getExtensionDetails(url) {
|
|
||||||
try {
|
try {
|
||||||
const res = await fetch(url);
|
const [metaRes, installedRes] = await Promise.all([
|
||||||
if (!res.ok) throw new Error(`Fetch failed: ${res.status}`);
|
fetch(MARKETPLACE_JSON_URL).then(res => res.json()),
|
||||||
const text = await res.text();
|
fetch(INSTALLED_EXTENSIONS_API).then(res => res.json())
|
||||||
|
]);
|
||||||
|
|
||||||
const regex = /(?:this\.|const\s+|let\s+|var\s+)?baseUrl\s*=\s*(["'`])(.*?)\1/i;
|
marketplaceMetadata = metaRes.extensions;
|
||||||
const match = text.match(regex);
|
installedExtensions = (installedRes.extensions || []).map(e => e.toLowerCase());
|
||||||
let finalHostname = null;
|
|
||||||
if (match && match[2]) {
|
initTabs();
|
||||||
let rawUrl = match[2].trim();
|
renderGroupedView();
|
||||||
if (!rawUrl.startsWith('http')) rawUrl = 'https://' + rawUrl;
|
|
||||||
try {
|
if (filterSelect) {
|
||||||
const urlObj = new URL(rawUrl);
|
filterSelect.addEventListener('change', () => renderGroupedView());
|
||||||
finalHostname = urlObj.hostname;
|
|
||||||
} catch(e) {
|
|
||||||
console.warn(`Could not parse baseUrl: ${rawUrl}`);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
} catch (error) {
|
||||||
const classMatch = text.match(/class\s+(\w+)/);
|
console.error('Error loading marketplace:', error);
|
||||||
const name = classMatch ? classMatch[1] : null;
|
marketplaceContent.innerHTML = `<div class="error-msg">Error al cargar el marketplace.</div>`;
|
||||||
|
|
||||||
let type = 'Image';
|
|
||||||
if (text.includes('type = "book-board"') || text.includes("type = 'book-board'")) type = 'Book';
|
|
||||||
else if (text.includes('type = "anime-board"') || text.includes("type = 'anime-board'")) type = 'Anime';
|
|
||||||
|
|
||||||
return { baseUrl: finalHostname, name, type };
|
|
||||||
} catch (e) {
|
|
||||||
return { baseUrl: null, name: null, type: 'Unknown' };
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
function showCustomModal(title, message, isConfirm = false) {
|
function initTabs() {
|
||||||
return new Promise(resolve => {
|
const tabs = document.querySelectorAll('.tab-button');
|
||||||
|
tabs.forEach(tab => {
|
||||||
modalTitle.textContent = title;
|
tab.onclick = () => {
|
||||||
modalMessage.textContent = message;
|
tabs.forEach(t => t.classList.remove('active'));
|
||||||
|
tab.classList.add('active');
|
||||||
const currentConfirmButton = document.getElementById('modalConfirmButton');
|
currentTab = tab.dataset.tab;
|
||||||
const currentCloseButton = document.getElementById('modalCloseButton');
|
renderGroupedView();
|
||||||
|
|
||||||
const newConfirmButton = currentConfirmButton.cloneNode(true);
|
|
||||||
currentConfirmButton.parentNode.replaceChild(newConfirmButton, currentConfirmButton);
|
|
||||||
|
|
||||||
const newCloseButton = currentCloseButton.cloneNode(true);
|
|
||||||
currentCloseButton.parentNode.replaceChild(newCloseButton, currentCloseButton);
|
|
||||||
|
|
||||||
if (isConfirm) {
|
|
||||||
|
|
||||||
newConfirmButton.classList.remove('hidden');
|
|
||||||
newConfirmButton.textContent = 'Confirm';
|
|
||||||
newCloseButton.textContent = 'Cancel';
|
|
||||||
} else {
|
|
||||||
|
|
||||||
newConfirmButton.classList.add('hidden');
|
|
||||||
newCloseButton.textContent = 'Close';
|
|
||||||
}
|
|
||||||
|
|
||||||
const closeModal = (confirmed) => {
|
|
||||||
customModal.classList.add('hidden');
|
|
||||||
resolve(confirmed);
|
|
||||||
};
|
};
|
||||||
|
|
||||||
newConfirmButton.onclick = () => closeModal(true);
|
|
||||||
newCloseButton.onclick = () => closeModal(false);
|
|
||||||
|
|
||||||
customModal.classList.remove('hidden');
|
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
function renderExtensionCard(extension, isInstalled, isLocalOnly = false) {
|
function renderGroupedView() {
|
||||||
|
marketplaceContent.innerHTML = '';
|
||||||
|
const activeFilter = filterSelect.value;
|
||||||
|
const groups = {};
|
||||||
|
|
||||||
const extensionName = formatExtensionName(extension.fileName || extension.name);
|
let listToRender = [];
|
||||||
const extensionType = extension.type || 'Unknown';
|
|
||||||
|
|
||||||
let iconUrl;
|
if (currentTab === 'marketplace') {
|
||||||
|
|
||||||
if (extension.baseUrl && extension.baseUrl !== 'Local Install') {
|
for (const [id, data] of Object.entries(marketplaceMetadata)) {
|
||||||
|
listToRender.push({
|
||||||
iconUrl = `https://www.google.com/s2/favicons?domain=${extension.baseUrl}&sz=128`;
|
id,
|
||||||
|
...data,
|
||||||
|
isInstalled: installedExtensions.includes(id.toLowerCase())
|
||||||
|
});
|
||||||
|
}
|
||||||
} else {
|
} else {
|
||||||
|
|
||||||
const displayName = extensionName.replace(/\s/g, '+');
|
for (const [id, data] of Object.entries(marketplaceMetadata)) {
|
||||||
iconUrl = `https://ui-avatars.com/api/?name=${displayName}&background=1f2937&color=fff&length=1`;
|
if (installedExtensions.includes(id.toLowerCase())) {
|
||||||
|
listToRender.push({ id, ...data, isInstalled: true });
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
installedExtensions.forEach(id => {
|
||||||
|
const existsInMeta = Object.keys(marketplaceMetadata).some(k => k.toLowerCase() === id);
|
||||||
|
if (!existsInMeta) {
|
||||||
|
listToRender.push({
|
||||||
|
id: id,
|
||||||
|
name: id.charAt(0).toUpperCase() + id.slice(1),
|
||||||
|
type: 'Local',
|
||||||
|
author: 'Unknown',
|
||||||
|
isInstalled: true
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
listToRender.forEach(ext => {
|
||||||
|
const type = ext.type || 'Other';
|
||||||
|
|
||||||
|
if (activeFilter !== 'All' && type !== activeFilter) return;
|
||||||
|
|
||||||
|
if (!groups[type]) groups[type] = [];
|
||||||
|
groups[type].push(ext);
|
||||||
|
});
|
||||||
|
|
||||||
|
const sortedTypes = Object.keys(groups).sort();
|
||||||
|
|
||||||
|
if (sortedTypes.length === 0) {
|
||||||
|
marketplaceContent.innerHTML = `<p class="empty-msg">No extensions found for this criteria.</p>`;
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
sortedTypes.forEach(type => {
|
||||||
|
const section = document.createElement('div');
|
||||||
|
section.className = 'category-group';
|
||||||
|
|
||||||
|
const title = document.createElement('h2');
|
||||||
|
title.className = 'marketplace-section-title';
|
||||||
|
title.innerText = type.replace('-', ' ');
|
||||||
|
|
||||||
|
const grid = document.createElement('div');
|
||||||
|
grid.className = 'marketplace-grid';
|
||||||
|
|
||||||
|
groups[type].forEach(ext => grid.appendChild(createCard(ext)));
|
||||||
|
|
||||||
|
section.appendChild(title);
|
||||||
|
section.appendChild(grid);
|
||||||
|
marketplaceContent.appendChild(section);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function createCard(ext) {
|
||||||
const card = document.createElement('div');
|
const card = document.createElement('div');
|
||||||
card.className = `extension-card grid-item extension-type-${extensionType.toLowerCase()}`;
|
card.className = `extension-card ${ext.nsfw ? 'nsfw-ext' : ''} ${ext.broken ? 'broken-ext' : ''}`;
|
||||||
card.dataset.path = extension.fileName || extension.name;
|
|
||||||
card.dataset.type = extensionType;
|
|
||||||
|
|
||||||
let buttonHtml;
|
const iconUrl = `https://www.google.com/s2/favicons?domain=${ext.domain}&sz=128`
|
||||||
let badgeHtml = '';
|
|
||||||
|
|
||||||
if (isInstalled) {
|
let buttonHtml = '';
|
||||||
|
if (ext.isInstalled) {
|
||||||
if (isLocalOnly) {
|
buttonHtml = `<button class="extension-action-button btn-uninstall">Uninstall</button>`;
|
||||||
badgeHtml = '<span class="extension-status-badge badge-local">Local</span>';
|
} else if (ext.broken) {
|
||||||
} else {
|
buttonHtml = `<button class="extension-action-button" style="background: #4b5563; cursor: not-allowed;" disabled>Broken</button>`;
|
||||||
badgeHtml = '<span class="extension-status-badge badge-installed">Installed</span>';
|
|
||||||
}
|
|
||||||
buttonHtml = `
|
|
||||||
<button class="extension-action-button btn-uninstall" data-action="uninstall">Uninstall</button>
|
|
||||||
`;
|
|
||||||
} else {
|
} else {
|
||||||
|
buttonHtml = `<button class="extension-action-button btn-install">Install</button>`;
|
||||||
buttonHtml = `
|
|
||||||
<button class="extension-action-button btn-install" data-action="install">Install</button>
|
|
||||||
`;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
card.innerHTML = `
|
card.innerHTML = `
|
||||||
<img class="extension-icon" src="${iconUrl}" alt="${extensionName} Icon" onerror="this.onerror=null; this.src='https://ui-avatars.com/api/?name=E&background=1f2937&color=fff&length=1'">
|
<img class="extension-icon" src="${iconUrl}" onerror="this.src='/public/assets/waifuboards.ico'">
|
||||||
<div class="card-content-wrapper">
|
<div class="card-content-wrapper">
|
||||||
<h3 class="extension-name" title="${extensionName}">${extensionName}</h3>
|
<h3 class="extension-name">${ext.name}</h3>
|
||||||
${badgeHtml}
|
<span class="extension-author">by ${ext.author || 'Unknown'}</span>
|
||||||
|
<p class="extension-description">${ext.description || 'No description available.'}</p>
|
||||||
|
<div class="extension-tags">
|
||||||
|
<span class="extension-status-badge badge-${ext.isInstalled ? 'installed' : (ext.broken ? 'local' : 'available')}">
|
||||||
|
${ext.isInstalled ? 'Installed' : (ext.broken ? 'Broken' : 'Available')}
|
||||||
|
</span>
|
||||||
|
${ext.nsfw ? '<span class="extension-status-badge badge-local">NSFW</span>' : ''}
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
${buttonHtml}
|
${buttonHtml}
|
||||||
`;
|
`;
|
||||||
|
|
||||||
const installButton = card.querySelector('[data-action="install"]');
|
const btn = card.querySelector('.extension-action-button');
|
||||||
const uninstallButton = card.querySelector('[data-action="uninstall"]');
|
if (!ext.broken || ext.isInstalled) {
|
||||||
|
btn.onclick = () => ext.isInstalled ? promptUninstall(ext) : handleInstall(ext);
|
||||||
if (installButton) {
|
|
||||||
installButton.addEventListener('click', async () => {
|
|
||||||
try {
|
|
||||||
const response = await fetch('/api/extensions/install', {
|
|
||||||
method: 'POST',
|
|
||||||
headers: { 'Content-Type': 'application/json' },
|
|
||||||
body: JSON.stringify({ fileName: extension.fileName }),
|
|
||||||
});
|
|
||||||
|
|
||||||
const result = await response.json();
|
|
||||||
|
|
||||||
if (response.ok) {
|
|
||||||
updateExtensionState(extension.fileName, true);
|
|
||||||
|
|
||||||
await showCustomModal(
|
|
||||||
'Installation Successful',
|
|
||||||
`${extensionName} has been successfully installed.`,
|
|
||||||
false
|
|
||||||
);
|
|
||||||
} else {
|
|
||||||
|
|
||||||
await showCustomModal(
|
|
||||||
'Installation Failed',
|
|
||||||
`Installation failed: ${result.error || 'Unknown error.'}`,
|
|
||||||
false
|
|
||||||
);
|
|
||||||
}
|
|
||||||
} catch (error) {
|
|
||||||
|
|
||||||
await showCustomModal(
|
|
||||||
'Installation Failed',
|
|
||||||
`Network error during installation.`,
|
|
||||||
false
|
|
||||||
);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
}
|
||||||
|
|
||||||
if (uninstallButton) {
|
return card;
|
||||||
uninstallButton.addEventListener('click', async () => {
|
|
||||||
|
|
||||||
const confirmed = await showCustomModal(
|
|
||||||
'Confirm Uninstallation',
|
|
||||||
`Are you sure you want to uninstall ${extensionName}?`,
|
|
||||||
true
|
|
||||||
);
|
|
||||||
|
|
||||||
if (!confirmed) return;
|
|
||||||
|
|
||||||
try {
|
|
||||||
const response = await fetch('/api/extensions/uninstall', {
|
|
||||||
method: 'POST',
|
|
||||||
headers: { 'Content-Type': 'application/json' },
|
|
||||||
body: JSON.stringify({ fileName: extension.fileName }),
|
|
||||||
});
|
|
||||||
|
|
||||||
const result = await response.json();
|
|
||||||
|
|
||||||
if (response.ok) {
|
|
||||||
updateExtensionState(extension.fileName, false);
|
|
||||||
|
|
||||||
await showCustomModal(
|
|
||||||
'Uninstallation Successful',
|
|
||||||
`${extensionName} has been successfully uninstalled.`,
|
|
||||||
false
|
|
||||||
);
|
|
||||||
} else {
|
|
||||||
|
|
||||||
await showCustomModal(
|
|
||||||
'Uninstallation Failed',
|
|
||||||
`Uninstallation failed: ${result.error || 'Unknown error.'}`,
|
|
||||||
false
|
|
||||||
);
|
|
||||||
}
|
|
||||||
} catch (error) {
|
|
||||||
|
|
||||||
await showCustomModal(
|
|
||||||
'Uninstallation Failed',
|
|
||||||
`Network error during uninstallation.`,
|
|
||||||
false
|
|
||||||
);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
extensionsGrid.appendChild(card);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
async function getInstalledExtensions() {
|
function showModal(title, message, showConfirm = false, onConfirm = null) {
|
||||||
console.log(`Fetching installed extensions from: ${INSTALLED_EXTENSIONS_API}`);
|
modalTitle.innerText = title;
|
||||||
|
modalMessage.innerText = message;
|
||||||
try {
|
if (showConfirm) {
|
||||||
const response = await fetch(INSTALLED_EXTENSIONS_API);
|
modalConfirmBtn.classList.remove('hidden');
|
||||||
|
modalConfirmBtn.onclick = () => { hideModal(); if (onConfirm) onConfirm(); };
|
||||||
if (!response.ok) {
|
|
||||||
console.error(`Error fetching installed extensions. Status: ${response.status}`);
|
|
||||||
return new Set();
|
|
||||||
}
|
|
||||||
|
|
||||||
const data = await response.json();
|
|
||||||
|
|
||||||
if (!data.extensions || !Array.isArray(data.extensions)) {
|
|
||||||
console.error("Invalid response format from /api/extensions: 'extensions' array missing or incorrect.");
|
|
||||||
return new Set();
|
|
||||||
}
|
|
||||||
|
|
||||||
const installedFileNames = data.extensions
|
|
||||||
.map(name => `${name.toLowerCase()}.js`);
|
|
||||||
|
|
||||||
return new Set(installedFileNames);
|
|
||||||
|
|
||||||
} catch (error) {
|
|
||||||
console.error('Network or JSON parsing error during fetch of installed extensions:', error);
|
|
||||||
return new Set();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function filterAndRenderExtensions(filterType) {
|
|
||||||
extensionsGrid.innerHTML = '';
|
|
||||||
|
|
||||||
if (!allExtensionsData || allExtensionsData.length === 0) {
|
|
||||||
console.log('No extension data to filter.');
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
const filteredExtensions = allExtensionsData.filter(ext =>
|
|
||||||
filterType === 'All' || ext.type === filterType || (ext.isLocal && filterType === 'Local')
|
|
||||||
);
|
|
||||||
|
|
||||||
filteredExtensions.forEach(ext => {
|
|
||||||
renderExtensionCard(ext, ext.isInstalled, ext.isLocal);
|
|
||||||
});
|
|
||||||
|
|
||||||
if (filteredExtensions.length === 0) {
|
|
||||||
extensionsGrid.innerHTML = `<p style="grid-column: 1 / -1; text-align: center; color: var(--text-secondary);">No extensions found for the selected filter (${filterType}).</p>`;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
async function loadMarketplace() {
|
|
||||||
extensionsGrid.innerHTML = '';
|
|
||||||
|
|
||||||
for (let i = 0; i < 6; i++) {
|
|
||||||
extensionsGrid.innerHTML += `
|
|
||||||
<div class="extension-card skeleton grid-item">
|
|
||||||
<div class="skeleton-icon skeleton" style="width: 50px; height: 50px;"></div>
|
|
||||||
<div class="card-content-wrapper">
|
|
||||||
<div class="skeleton-text title-skeleton skeleton" style="width: 80%; height: 1.1em;"></div>
|
|
||||||
<div class="skeleton-text text-skeleton skeleton" style="width: 50%; height: 0.7em; margin-top: 0.25rem;"></div>
|
|
||||||
</div>
|
|
||||||
<div class="skeleton-button skeleton" style="width: 100%; height: 32px; margin-top: 0.5rem;"></div>
|
|
||||||
</div>`;
|
|
||||||
}
|
|
||||||
|
|
||||||
try {
|
|
||||||
|
|
||||||
const [availableExtensionsRaw, installedExtensionsSet] = await Promise.all([
|
|
||||||
fetch(API_URL_BASE).then(res => {
|
|
||||||
if (!res.ok) throw new Error(`HTTP error! status: ${res.status}`);
|
|
||||||
return res.json();
|
|
||||||
}),
|
|
||||||
getInstalledExtensions()
|
|
||||||
]);
|
|
||||||
|
|
||||||
const availableExtensionsJs = availableExtensionsRaw.filter(ext => ext.type === 'file' && ext.name.endsWith('.js'));
|
|
||||||
const detailPromises = [];
|
|
||||||
|
|
||||||
const marketplaceFileNames = new Set(availableExtensionsJs.map(ext => ext.name.toLowerCase()));
|
|
||||||
|
|
||||||
for (const ext of availableExtensionsJs) {
|
|
||||||
|
|
||||||
const downloadUrl = getRawUrl(ext.name);
|
|
||||||
|
|
||||||
const detailsPromise = getExtensionDetails(downloadUrl).then(details => ({
|
|
||||||
...ext,
|
|
||||||
...details,
|
|
||||||
fileName: ext.name,
|
|
||||||
|
|
||||||
isInstalled: installedExtensionsSet.has(ext.name.toLowerCase()),
|
|
||||||
isLocal: false,
|
|
||||||
}));
|
|
||||||
detailPromises.push(detailsPromise);
|
|
||||||
}
|
|
||||||
|
|
||||||
const extensionsWithDetails = await Promise.all(detailPromises);
|
|
||||||
|
|
||||||
installedExtensionsSet.forEach(installedName => {
|
|
||||||
|
|
||||||
if (!marketplaceFileNames.has(installedName)) {
|
|
||||||
|
|
||||||
const localExt = {
|
|
||||||
name: formatExtensionName(installedName),
|
|
||||||
fileName: installedName,
|
|
||||||
type: 'Local',
|
|
||||||
isInstalled: true,
|
|
||||||
isLocal: true,
|
|
||||||
baseUrl: 'Local Install',
|
|
||||||
};
|
|
||||||
extensionsWithDetails.push(localExt);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
extensionsWithDetails.sort((a, b) => {
|
|
||||||
if (a.isInstalled !== b.isInstalled) {
|
|
||||||
return b.isInstalled - a.isInstalled;
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
const nameA = a.name || '';
|
|
||||||
const nameB = b.name || '';
|
|
||||||
|
|
||||||
return nameA.localeCompare(nameB);
|
|
||||||
|
|
||||||
});
|
|
||||||
|
|
||||||
allExtensionsData = extensionsWithDetails;
|
|
||||||
|
|
||||||
if (filterSelect) {
|
|
||||||
filterSelect.addEventListener('change', (event) => {
|
|
||||||
filterAndRenderExtensions(event.target.value);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
filterAndRenderExtensions('All');
|
|
||||||
|
|
||||||
} catch (error) {
|
|
||||||
console.error('Error loading the marketplace:', error);
|
|
||||||
extensionsGrid.innerHTML = `
|
|
||||||
<div style="grid-column: 1 / -1; color: #dc2626; text-align: center; padding: 2rem; background: rgba(220,38,38,0.1); border-radius: 12px; margin-top: 1rem;">
|
|
||||||
🚨 Error loading extensions.
|
|
||||||
<p>Could not connect to the extension repository or local endpoint. Detail: ${error.message}</p>
|
|
||||||
</div>
|
|
||||||
`;
|
|
||||||
allExtensionsData = [];
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
customModal.addEventListener('click', (e) => {
|
|
||||||
if (e.target === customModal || e.target.tagName === 'BUTTON') {
|
|
||||||
customModal.classList.add('hidden');
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
document.addEventListener('DOMContentLoaded', loadMarketplace);
|
|
||||||
|
|
||||||
window.addEventListener('scroll', () => {
|
|
||||||
const navbar = document.getElementById('navbar');
|
|
||||||
if (window.scrollY > 0) {
|
|
||||||
navbar.classList.add('scrolled');
|
|
||||||
} else {
|
} else {
|
||||||
navbar.classList.remove('scrolled');
|
modalConfirmBtn.classList.add('hidden');
|
||||||
}
|
}
|
||||||
});
|
modalCloseBtn.onclick = hideModal;
|
||||||
|
modal.classList.remove('hidden');
|
||||||
|
}
|
||||||
|
|
||||||
|
function hideModal() { modal.classList.add('hidden'); }
|
||||||
|
|
||||||
|
async function handleInstall(ext) {
|
||||||
|
try {
|
||||||
|
const res = await fetch('/api/extensions/install', {
|
||||||
|
method: 'POST',
|
||||||
|
headers: { 'Content-Type': 'application/json' },
|
||||||
|
body: JSON.stringify({ url: ext.entry })
|
||||||
|
});
|
||||||
|
if (res.ok) {
|
||||||
|
installedExtensions.push(ext.id.toLowerCase());
|
||||||
|
renderGroupedView();
|
||||||
|
showModal('Success', `${ext.name} installed!`);
|
||||||
|
}
|
||||||
|
} catch (e) { showModal('Error', 'Install failed.'); }
|
||||||
|
}
|
||||||
|
|
||||||
|
function promptUninstall(ext) {
|
||||||
|
showModal('Confirm', `Uninstall ${ext.name}?`, true, () => handleUninstall(ext));
|
||||||
|
}
|
||||||
|
|
||||||
|
async function handleUninstall(ext) {
|
||||||
|
try {
|
||||||
|
const res = await fetch('/api/extensions/uninstall', {
|
||||||
|
method: 'POST',
|
||||||
|
headers: { 'Content-Type': 'application/json' },
|
||||||
|
body: JSON.stringify({ fileName: ext.id + '.js' })
|
||||||
|
});
|
||||||
|
if (res.ok) {
|
||||||
|
installedExtensions = installedExtensions.filter(id => id !== ext.id.toLowerCase());
|
||||||
|
renderGroupedView();
|
||||||
|
}
|
||||||
|
} catch (e) { showModal('Error', 'Uninstall failed.'); }
|
||||||
|
}
|
||||||
|
|
||||||
|
function showSkeletons() {
|
||||||
|
marketplaceContent.innerHTML = `
|
||||||
|
<div class="marketplace-grid">
|
||||||
|
${Array(3).fill('<div class="extension-card skeleton"></div>').join('')}
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
}
|
||||||
|
|
||||||
|
document.addEventListener('DOMContentLoaded', loadMarketplace);
|
||||||
@@ -292,4 +292,99 @@
|
|||||||
.modal-button.btn-uninstall:hover {
|
.modal-button.btn-uninstall:hover {
|
||||||
background: #ef4444;
|
background: #ef4444;
|
||||||
transform: scale(1.02);
|
transform: scale(1.02);
|
||||||
|
}
|
||||||
|
|
||||||
|
.extension-author {
|
||||||
|
font-size: 0.8rem;
|
||||||
|
color: var(--color-text-secondary);
|
||||||
|
display: block;
|
||||||
|
margin-bottom: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.extension-tags {
|
||||||
|
display: flex;
|
||||||
|
gap: 0.5rem;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.badge-available {
|
||||||
|
background: rgba(59, 130, 246, 0.2);
|
||||||
|
color: #60a5fa;
|
||||||
|
border: 1px solid rgba(59, 130, 246, 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.nsfw-ext {
|
||||||
|
border-color: rgba(220, 38, 38, 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.broken-ext {
|
||||||
|
filter: grayscale(0.8);
|
||||||
|
opacity: 0.7;
|
||||||
|
border: 1px dashed #ef4444; /* Borde rojo discontinuo */
|
||||||
|
}
|
||||||
|
|
||||||
|
.broken-ext:hover {
|
||||||
|
transform: none; /* Evitamos que se mueva al pasar el ratón si está rota */
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Estilos para los Tabs */
|
||||||
|
.tabs-container {
|
||||||
|
display: flex;
|
||||||
|
gap: 1rem;
|
||||||
|
margin-bottom: 1.5rem;
|
||||||
|
border-bottom: 1px solid rgba(255,255,255,0.1);
|
||||||
|
padding-bottom: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tab-button {
|
||||||
|
background: none;
|
||||||
|
border: none;
|
||||||
|
color: var(--color-text-secondary);
|
||||||
|
font-size: 1.1rem;
|
||||||
|
font-weight: 700;
|
||||||
|
padding: 0.5rem 1rem;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all 0.3s;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tab-button.active {
|
||||||
|
color: var(--color-primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.tab-button.active::after {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
bottom: -0.6rem;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 3px;
|
||||||
|
background: var(--color-primary);
|
||||||
|
border-radius: 999px;
|
||||||
|
box-shadow: 0 0 10px var(--color-primary-glow);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Títulos de Secciones en Marketplace */
|
||||||
|
.marketplace-section-title {
|
||||||
|
font-size: 1.4rem;
|
||||||
|
font-weight: 800;
|
||||||
|
margin: 2rem 0 1rem 0;
|
||||||
|
color: var(--color-text-primary);
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.5rem;
|
||||||
|
text-transform: capitalize;
|
||||||
|
}
|
||||||
|
|
||||||
|
.marketplace-section-title::before {
|
||||||
|
content: '';
|
||||||
|
display: inline-block;
|
||||||
|
width: 4px;
|
||||||
|
height: 20px;
|
||||||
|
background: var(--color-primary);
|
||||||
|
border-radius: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.category-group {
|
||||||
|
margin-bottom: 3rem;
|
||||||
}
|
}
|
||||||
@@ -10,13 +10,13 @@
|
|||||||
<link rel="stylesheet" href="/views/css/components/updateNotifier.css">
|
<link rel="stylesheet" href="/views/css/components/updateNotifier.css">
|
||||||
<link rel="icon" href="/public/assets/waifuboards.ico" type="image/x-icon">
|
<link rel="icon" href="/public/assets/waifuboards.ico" type="image/x-icon">
|
||||||
<link rel="stylesheet" href="/views/css/components/titlebar.css">
|
<link rel="stylesheet" href="/views/css/components/titlebar.css">
|
||||||
<script src="/src/scripts/titlebar.js"></script>
|
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div id="titlebar"> <div class="title-left">
|
<div id="titlebar">
|
||||||
<img class="app-icon" src="/public/assets/waifuboards.ico" alt=""/>
|
<div class="title-left">
|
||||||
<span class="app-title">WaifuBoard</span>
|
<img class="app-icon" src="/public/assets/waifuboards.ico" alt=""/>
|
||||||
</div>
|
<span class="app-title">WaifuBoard</span>
|
||||||
|
</div>
|
||||||
<div class="title-right">
|
<div class="title-right">
|
||||||
<button class="min">—</button>
|
<button class="min">—</button>
|
||||||
<button class="max">🗖</button>
|
<button class="max">🗖</button>
|
||||||
@@ -36,9 +36,9 @@
|
|||||||
<button class="nav-button" onclick="window.location.href='/anime'">Anime</button>
|
<button class="nav-button" onclick="window.location.href='/anime'">Anime</button>
|
||||||
<button class="nav-button" onclick="window.location.href='/books'">Books</button>
|
<button class="nav-button" onclick="window.location.href='/books'">Books</button>
|
||||||
<button class="nav-button" onclick="window.location.href='/gallery'">Gallery</button>
|
<button class="nav-button" onclick="window.location.href='/gallery'">Gallery</button>
|
||||||
<button class="nav-button" onclick="window.location.href='/schedule'">Schedule</button>
|
<button class="nav-button" onclick="window.location.href='/schedule.html'">Schedule</button>
|
||||||
<button class="nav-button" onclick="window.location.href='/my-list'">My List</button>
|
<button class="nav-button" onclick="window.location.href='/my-list'">My List</button>
|
||||||
<button class="nav-button active">Marketplace</button>
|
<button class="nav-button">Marketplace</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="nav-right">
|
<div class="nav-right">
|
||||||
@@ -90,47 +90,28 @@
|
|||||||
|
|
||||||
<main>
|
<main>
|
||||||
<section class="section">
|
<section class="section">
|
||||||
|
|
||||||
<header class="section-header">
|
<header class="section-header">
|
||||||
<p class="marketplace-subtitle">Explore, install, and manage all available data source extensions for WaifuBoard.</p>
|
<div class="tabs-container">
|
||||||
|
<button class="tab-button active" data-tab="marketplace">Marketplace</button>
|
||||||
|
<button class="tab-button" data-tab="installed">My Extensions</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class="filter-controls">
|
<div class="filter-controls">
|
||||||
<label for="extension-filter" class="filter-label">Filter by Type:</label>
|
<label for="extension-filter" class="filter-label">Filter by Type:</label>
|
||||||
<select id="extension-filter" class="filter-select">
|
<select id="extension-filter" class="filter-select">
|
||||||
<option value="All">All Extensions</option>
|
<option value="All">All Categories</option>
|
||||||
<option value="Image">Image Boards</option>
|
<option value="image-board">Image Boards</option>
|
||||||
<option value="Anime">Anime Boards</option>
|
<option value="anime-board">Anime Boards</option>
|
||||||
<option value="Book">Book Boards</option>
|
<option value="book-board">Book Boards</option>
|
||||||
<option value="Local">Local Only</option>
|
<option value="Local">Local/Manual</option>
|
||||||
</select>
|
</select>
|
||||||
</div>
|
</div>
|
||||||
</header>
|
</header>
|
||||||
<div class="marketplace-grid" id="extensions-grid">
|
|
||||||
<div class="extension-card skeleton grid-item">
|
<div id="marketplace-content">
|
||||||
<div class="skeleton-icon" style="width: 50px; height: 50px;"></div>
|
|
||||||
<div class="card-content-wrapper">
|
|
||||||
<div class="skeleton-text title-skeleton" style="width: 80%; height: 1.1em;"></div>
|
|
||||||
<div class="skeleton-text text-skeleton" style="width: 50%; height: 0.7em; margin-top: 0.25rem;"></div>
|
|
||||||
</div>
|
|
||||||
<div class="skeleton-button" style="width: 100%; height: 32px; margin-top: 0.5rem;"></div>
|
|
||||||
</div>
|
|
||||||
<div class="extension-card skeleton grid-item">
|
|
||||||
<div class="skeleton-icon" style="width: 50px; height: 50px;"></div>
|
|
||||||
<div class="card-content-wrapper">
|
|
||||||
<div class="skeleton-text title-skeleton" style="width: 80%; height: 1.1em;"></div>
|
|
||||||
<div class="skeleton-text text-skeleton" style="width: 50%; height: 0.7em; margin-top: 0.25rem;"></div>
|
|
||||||
</div>
|
|
||||||
<div class="skeleton-button" style="width: 100%; height: 32px; margin-top: 0.5rem;"></div>
|
|
||||||
</div>
|
|
||||||
<div class="extension-card skeleton grid-item">
|
|
||||||
<div class="skeleton-icon" style="width: 50px; height: 50px;"></div>
|
|
||||||
<div class="card-content-wrapper">
|
|
||||||
<div class="skeleton-text title-skeleton" style="width: 80%; height: 1.1em;"></div>
|
|
||||||
<div class="skeleton-text text-skeleton" style="width: 50%; height: 0.7em; margin-top: 0.25rem;"></div>
|
|
||||||
</div>
|
|
||||||
<div class="skeleton-button" style="width: 100%; height: 32px; margin-top: 0.5rem;"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<div id="customModal" class="modal-overlay hidden">
|
<div id="customModal" class="modal-overlay hidden">
|
||||||
<div class="modal-content">
|
<div class="modal-content">
|
||||||
<h3 id="modalTitle"></h3>
|
<h3 id="modalTitle"></h3>
|
||||||
@@ -143,22 +124,10 @@
|
|||||||
</div>
|
</div>
|
||||||
</main>
|
</main>
|
||||||
|
|
||||||
<div id="updateToast" class="hidden">
|
|
||||||
<p>Update available: <span id="latestVersionDisplay">v1.x</span></p>
|
|
||||||
|
|
||||||
<a
|
|
||||||
id="downloadButton"
|
|
||||||
href="https://git.waifuboard.app/ItsSkaiya/WaifuBoard/releases"
|
|
||||||
target="_blank"
|
|
||||||
>
|
|
||||||
Click To Download
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<script src="/src/scripts/updateNotifier.js"></script>
|
<script src="/src/scripts/updateNotifier.js"></script>
|
||||||
<script src="/src/scripts/rpc-inapp.js"></script>
|
|
||||||
<script src="/src/scripts/marketplace.js"></script>
|
<script src="/src/scripts/marketplace.js"></script>
|
||||||
<script src="/src/scripts/titlebar.js"></script>
|
<script src="/src/scripts/titlebar.js"></script>
|
||||||
|
<script src="/src/scripts/rpc-inapp.js"></script>
|
||||||
<script src="/src/scripts/auth-guard.js"></script>
|
<script src="/src/scripts/auth-guard.js"></script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
@@ -37,24 +37,33 @@ export async function getExtensionSettings(req: ExtensionNameRequest, reply: Fas
|
|||||||
}
|
}
|
||||||
|
|
||||||
export async function installExtension(req: any, reply: FastifyReply) {
|
export async function installExtension(req: any, reply: FastifyReply) {
|
||||||
const { fileName } = req.body;
|
const { url } = req.body;
|
||||||
|
|
||||||
if (!fileName || !fileName.endsWith('.js')) {
|
if (!url || typeof url !== 'string' || !url.endsWith('.js')) {
|
||||||
return reply.code(400).send({ error: "Invalid extension fileName provided" });
|
return reply.code(400).send({ error: "Invalid extension URL provided" });
|
||||||
}
|
}
|
||||||
|
|
||||||
try {
|
try {
|
||||||
|
const fileName = url.split('/').pop();
|
||||||
|
|
||||||
const downloadUrl = `https://git.waifuboard.app/ItsSkaiya/WaifuBoard-Extensions/raw/branch/main/${fileName}`
|
if (!fileName) {
|
||||||
|
return reply.code(400).send({ error: "Could not determine file name from URL" });
|
||||||
|
}
|
||||||
|
|
||||||
await saveExtensionFile(fileName, downloadUrl);
|
await saveExtensionFile(fileName, url);
|
||||||
|
|
||||||
req.server.log.info(`Extension installed: ${fileName}`);
|
req.server.log.info(`Extension installed: ${fileName}`);
|
||||||
return reply.code(200).send({ success: true, message: `Extension ${fileName} installed successfully.` });
|
return reply.code(200).send({
|
||||||
|
success: true,
|
||||||
|
message: `Extension ${fileName} installed successfully.`,
|
||||||
|
});
|
||||||
|
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
req.server.log.error(`Failed to install extension ${fileName}:`, error);
|
req.server.log.error(`Failed to install extension from ${url}:`, error);
|
||||||
return reply.code(500).send({ success: false, error: `Failed to install extension ${fileName}.` });
|
return reply.code(500).send({
|
||||||
|
success: false,
|
||||||
|
error: "Failed to install extension.",
|
||||||
|
});
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -1,422 +1,221 @@
|
|||||||
const GITEA_INSTANCE = 'https://git.waifuboard.app';
|
const ORIGINAL_MARKETPLACE_URL = 'https://git.waifuboard.app/ItsSkaiya/WaifuBoard-Extensions/raw/branch/main/marketplace.json';
|
||||||
const REPO_OWNER = 'ItsSkaiya';
|
const MARKETPLACE_JSON_URL = `/api/proxy?url=${encodeURIComponent(ORIGINAL_MARKETPLACE_URL)}`;
|
||||||
const REPO_NAME = 'WaifuBoard-Extensions';
|
|
||||||
let DETECTED_BRANCH = 'main';
|
|
||||||
const API_URL_BASE = `${GITEA_INSTANCE}/api/v1/repos/${REPO_OWNER}/${REPO_NAME}/contents`;
|
|
||||||
|
|
||||||
const INSTALLED_EXTENSIONS_API = '/api/extensions';
|
const INSTALLED_EXTENSIONS_API = '/api/extensions';
|
||||||
|
|
||||||
const extensionsGrid = document.getElementById('extensions-grid');
|
const marketplaceContent = document.getElementById('marketplace-content');
|
||||||
const filterSelect = document.getElementById('extension-filter');
|
const filterSelect = document.getElementById('extension-filter');
|
||||||
|
|
||||||
let allExtensionsData = [];
|
const modal = document.getElementById('customModal');
|
||||||
|
|
||||||
const customModal = document.getElementById('customModal');
|
|
||||||
const modalTitle = document.getElementById('modalTitle');
|
const modalTitle = document.getElementById('modalTitle');
|
||||||
const modalMessage = document.getElementById('modalMessage');
|
const modalMessage = document.getElementById('modalMessage');
|
||||||
|
const modalConfirmBtn = document.getElementById('modalConfirmButton');
|
||||||
|
const modalCloseBtn = document.getElementById('modalCloseButton');
|
||||||
|
|
||||||
function getRawUrl(filename) {
|
let marketplaceMetadata = {};
|
||||||
|
let installedExtensions = [];
|
||||||
|
let currentTab = 'marketplace';
|
||||||
|
|
||||||
const targetUrl = `${GITEA_INSTANCE}/${REPO_OWNER}/${REPO_NAME}/raw/branch/main/${filename}`;
|
async function loadMarketplace() {
|
||||||
|
showSkeletons();
|
||||||
const encodedUrl = encodeURIComponent(targetUrl);
|
|
||||||
|
|
||||||
return `/api/proxy?url=${encodedUrl}`;
|
|
||||||
}
|
|
||||||
|
|
||||||
function updateExtensionState(fileName, installed) {
|
|
||||||
const ext = allExtensionsData.find(e => e.fileName === fileName);
|
|
||||||
if (!ext) return;
|
|
||||||
|
|
||||||
ext.isInstalled = installed;
|
|
||||||
ext.isLocal = installed && ext.isLocal;
|
|
||||||
|
|
||||||
filterAndRenderExtensions(filterSelect?.value || 'All');
|
|
||||||
}
|
|
||||||
|
|
||||||
function formatExtensionName(fileName) {
|
|
||||||
return fileName.replace('.js', '')
|
|
||||||
.replace(/([a-z])([A-Z])/g, '$1 $2')
|
|
||||||
.replace(/^[a-z]/, (char) => char.toUpperCase());
|
|
||||||
}
|
|
||||||
|
|
||||||
function getIconUrl(extensionDetails) {
|
|
||||||
return extensionDetails;
|
|
||||||
}
|
|
||||||
|
|
||||||
async function getExtensionDetails(url) {
|
|
||||||
try {
|
try {
|
||||||
const res = await fetch(url);
|
const [metaRes, installedRes] = await Promise.all([
|
||||||
if (!res.ok) throw new Error(`Fetch failed: ${res.status}`);
|
fetch(MARKETPLACE_JSON_URL).then(res => res.json()),
|
||||||
const text = await res.text();
|
fetch(INSTALLED_EXTENSIONS_API).then(res => res.json())
|
||||||
|
]);
|
||||||
|
|
||||||
const regex = /(?:this\.|const\s+|let\s+|var\s+)?baseUrl\s*=\s*(["'`])(.*?)\1/i;
|
marketplaceMetadata = metaRes.extensions;
|
||||||
const match = text.match(regex);
|
installedExtensions = (installedRes.extensions || []).map(e => e.toLowerCase());
|
||||||
let finalHostname = null;
|
|
||||||
if (match && match[2]) {
|
initTabs();
|
||||||
let rawUrl = match[2].trim();
|
renderGroupedView();
|
||||||
if (!rawUrl.startsWith('http')) rawUrl = 'https://' + rawUrl;
|
|
||||||
try {
|
if (filterSelect) {
|
||||||
const urlObj = new URL(rawUrl);
|
filterSelect.addEventListener('change', () => renderGroupedView());
|
||||||
finalHostname = urlObj.hostname;
|
|
||||||
} catch(e) {
|
|
||||||
console.warn(`Could not parse baseUrl: ${rawUrl}`);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
} catch (error) {
|
||||||
const classMatch = text.match(/class\s+(\w+)/);
|
console.error('Error loading marketplace:', error);
|
||||||
const name = classMatch ? classMatch[1] : null;
|
marketplaceContent.innerHTML = `<div class="error-msg">Error al cargar el marketplace.</div>`;
|
||||||
|
|
||||||
let type = 'Image';
|
|
||||||
if (text.includes('type = "book-board"') || text.includes("type = 'book-board'")) type = 'Book';
|
|
||||||
else if (text.includes('type = "anime-board"') || text.includes("type = 'anime-board'")) type = 'Anime';
|
|
||||||
|
|
||||||
return { baseUrl: finalHostname, name, type };
|
|
||||||
} catch (e) {
|
|
||||||
return { baseUrl: null, name: null, type: 'Unknown' };
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
function showCustomModal(title, message, isConfirm = false) {
|
function initTabs() {
|
||||||
return new Promise(resolve => {
|
const tabs = document.querySelectorAll('.tab-button');
|
||||||
|
tabs.forEach(tab => {
|
||||||
modalTitle.textContent = title;
|
tab.onclick = () => {
|
||||||
modalMessage.textContent = message;
|
tabs.forEach(t => t.classList.remove('active'));
|
||||||
|
tab.classList.add('active');
|
||||||
const currentConfirmButton = document.getElementById('modalConfirmButton');
|
currentTab = tab.dataset.tab;
|
||||||
const currentCloseButton = document.getElementById('modalCloseButton');
|
renderGroupedView();
|
||||||
|
|
||||||
const newConfirmButton = currentConfirmButton.cloneNode(true);
|
|
||||||
currentConfirmButton.parentNode.replaceChild(newConfirmButton, currentConfirmButton);
|
|
||||||
|
|
||||||
const newCloseButton = currentCloseButton.cloneNode(true);
|
|
||||||
currentCloseButton.parentNode.replaceChild(newCloseButton, currentCloseButton);
|
|
||||||
|
|
||||||
if (isConfirm) {
|
|
||||||
|
|
||||||
newConfirmButton.classList.remove('hidden');
|
|
||||||
newConfirmButton.textContent = 'Confirm';
|
|
||||||
newCloseButton.textContent = 'Cancel';
|
|
||||||
} else {
|
|
||||||
|
|
||||||
newConfirmButton.classList.add('hidden');
|
|
||||||
newCloseButton.textContent = 'Close';
|
|
||||||
}
|
|
||||||
|
|
||||||
const closeModal = (confirmed) => {
|
|
||||||
customModal.classList.add('hidden');
|
|
||||||
resolve(confirmed);
|
|
||||||
};
|
};
|
||||||
|
|
||||||
newConfirmButton.onclick = () => closeModal(true);
|
|
||||||
newCloseButton.onclick = () => closeModal(false);
|
|
||||||
|
|
||||||
customModal.classList.remove('hidden');
|
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
function renderExtensionCard(extension, isInstalled, isLocalOnly = false) {
|
function renderGroupedView() {
|
||||||
|
marketplaceContent.innerHTML = '';
|
||||||
|
const activeFilter = filterSelect.value;
|
||||||
|
const groups = {};
|
||||||
|
|
||||||
const extensionName = formatExtensionName(extension.fileName || extension.name);
|
let listToRender = [];
|
||||||
const extensionType = extension.type || 'Unknown';
|
|
||||||
|
|
||||||
let iconUrl;
|
if (currentTab === 'marketplace') {
|
||||||
|
|
||||||
if (extension.baseUrl && extension.baseUrl !== 'Local Install') {
|
for (const [id, data] of Object.entries(marketplaceMetadata)) {
|
||||||
|
listToRender.push({
|
||||||
iconUrl = `https://www.google.com/s2/favicons?domain=${extension.baseUrl}&sz=128`;
|
id,
|
||||||
|
...data,
|
||||||
|
isInstalled: installedExtensions.includes(id.toLowerCase())
|
||||||
|
});
|
||||||
|
}
|
||||||
} else {
|
} else {
|
||||||
|
|
||||||
const displayName = extensionName.replace(/\s/g, '+');
|
for (const [id, data] of Object.entries(marketplaceMetadata)) {
|
||||||
iconUrl = `https://ui-avatars.com/api/?name=${displayName}&background=1f2937&color=fff&length=1`;
|
if (installedExtensions.includes(id.toLowerCase())) {
|
||||||
|
listToRender.push({ id, ...data, isInstalled: true });
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
installedExtensions.forEach(id => {
|
||||||
|
const existsInMeta = Object.keys(marketplaceMetadata).some(k => k.toLowerCase() === id);
|
||||||
|
if (!existsInMeta) {
|
||||||
|
listToRender.push({
|
||||||
|
id: id,
|
||||||
|
name: id.charAt(0).toUpperCase() + id.slice(1),
|
||||||
|
type: 'Local',
|
||||||
|
author: 'Unknown',
|
||||||
|
isInstalled: true
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
listToRender.forEach(ext => {
|
||||||
|
const type = ext.type || 'Other';
|
||||||
|
|
||||||
|
if (activeFilter !== 'All' && type !== activeFilter) return;
|
||||||
|
|
||||||
|
if (!groups[type]) groups[type] = [];
|
||||||
|
groups[type].push(ext);
|
||||||
|
});
|
||||||
|
|
||||||
|
const sortedTypes = Object.keys(groups).sort();
|
||||||
|
|
||||||
|
if (sortedTypes.length === 0) {
|
||||||
|
marketplaceContent.innerHTML = `<p class="empty-msg">No extensions found for this criteria.</p>`;
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
sortedTypes.forEach(type => {
|
||||||
|
const section = document.createElement('div');
|
||||||
|
section.className = 'category-group';
|
||||||
|
|
||||||
|
const title = document.createElement('h2');
|
||||||
|
title.className = 'marketplace-section-title';
|
||||||
|
title.innerText = type.replace('-', ' ');
|
||||||
|
|
||||||
|
const grid = document.createElement('div');
|
||||||
|
grid.className = 'marketplace-grid';
|
||||||
|
|
||||||
|
groups[type].forEach(ext => grid.appendChild(createCard(ext)));
|
||||||
|
|
||||||
|
section.appendChild(title);
|
||||||
|
section.appendChild(grid);
|
||||||
|
marketplaceContent.appendChild(section);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function createCard(ext) {
|
||||||
const card = document.createElement('div');
|
const card = document.createElement('div');
|
||||||
card.className = `extension-card grid-item extension-type-${extensionType.toLowerCase()}`;
|
card.className = `extension-card ${ext.nsfw ? 'nsfw-ext' : ''} ${ext.broken ? 'broken-ext' : ''}`;
|
||||||
card.dataset.path = extension.fileName || extension.name;
|
|
||||||
card.dataset.type = extensionType;
|
|
||||||
|
|
||||||
let buttonHtml;
|
const iconUrl = `https://www.google.com/s2/favicons?domain=${ext.domain}&sz=128`
|
||||||
let badgeHtml = '';
|
|
||||||
|
|
||||||
if (isInstalled) {
|
let buttonHtml = '';
|
||||||
|
if (ext.isInstalled) {
|
||||||
if (isLocalOnly) {
|
buttonHtml = `<button class="extension-action-button btn-uninstall">Uninstall</button>`;
|
||||||
badgeHtml = '<span class="extension-status-badge badge-local">Local</span>';
|
} else if (ext.broken) {
|
||||||
} else {
|
buttonHtml = `<button class="extension-action-button" style="background: #4b5563; cursor: not-allowed;" disabled>Broken</button>`;
|
||||||
badgeHtml = '<span class="extension-status-badge badge-installed">Installed</span>';
|
|
||||||
}
|
|
||||||
buttonHtml = `
|
|
||||||
<button class="extension-action-button btn-uninstall" data-action="uninstall">Uninstall</button>
|
|
||||||
`;
|
|
||||||
} else {
|
} else {
|
||||||
|
buttonHtml = `<button class="extension-action-button btn-install">Install</button>`;
|
||||||
buttonHtml = `
|
|
||||||
<button class="extension-action-button btn-install" data-action="install">Install</button>
|
|
||||||
`;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
card.innerHTML = `
|
card.innerHTML = `
|
||||||
<img class="extension-icon" src="${iconUrl}" alt="${extensionName} Icon" onerror="this.onerror=null; this.src='https://ui-avatars.com/api/?name=E&background=1f2937&color=fff&length=1'">
|
<img class="extension-icon" src="${iconUrl}" onerror="this.src='/public/assets/waifuboards.ico'">
|
||||||
<div class="card-content-wrapper">
|
<div class="card-content-wrapper">
|
||||||
<h3 class="extension-name" title="${extensionName}">${extensionName}</h3>
|
<h3 class="extension-name">${ext.name}</h3>
|
||||||
${badgeHtml}
|
<span class="extension-author">by ${ext.author || 'Unknown'}</span>
|
||||||
|
<p class="extension-description">${ext.description || 'No description available.'}</p>
|
||||||
|
<div class="extension-tags">
|
||||||
|
<span class="extension-status-badge badge-${ext.isInstalled ? 'installed' : (ext.broken ? 'local' : 'available')}">
|
||||||
|
${ext.isInstalled ? 'Installed' : (ext.broken ? 'Broken' : 'Available')}
|
||||||
|
</span>
|
||||||
|
${ext.nsfw ? '<span class="extension-status-badge badge-local">NSFW</span>' : ''}
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
${buttonHtml}
|
${buttonHtml}
|
||||||
`;
|
`;
|
||||||
|
|
||||||
const installButton = card.querySelector('[data-action="install"]');
|
const btn = card.querySelector('.extension-action-button');
|
||||||
const uninstallButton = card.querySelector('[data-action="uninstall"]');
|
if (!ext.broken || ext.isInstalled) {
|
||||||
|
btn.onclick = () => ext.isInstalled ? promptUninstall(ext) : handleInstall(ext);
|
||||||
if (installButton) {
|
|
||||||
installButton.addEventListener('click', async () => {
|
|
||||||
try {
|
|
||||||
const response = await fetch('/api/extensions/install', {
|
|
||||||
method: 'POST',
|
|
||||||
headers: { 'Content-Type': 'application/json' },
|
|
||||||
body: JSON.stringify({ fileName: extension.fileName }),
|
|
||||||
});
|
|
||||||
|
|
||||||
const result = await response.json();
|
|
||||||
|
|
||||||
if (response.ok) {
|
|
||||||
updateExtensionState(extension.fileName, true);
|
|
||||||
|
|
||||||
await showCustomModal(
|
|
||||||
'Installation Successful',
|
|
||||||
`${extensionName} has been successfully installed.`,
|
|
||||||
false
|
|
||||||
);
|
|
||||||
} else {
|
|
||||||
|
|
||||||
await showCustomModal(
|
|
||||||
'Installation Failed',
|
|
||||||
`Installation failed: ${result.error || 'Unknown error.'}`,
|
|
||||||
false
|
|
||||||
);
|
|
||||||
}
|
|
||||||
} catch (error) {
|
|
||||||
|
|
||||||
await showCustomModal(
|
|
||||||
'Installation Failed',
|
|
||||||
`Network error during installation.`,
|
|
||||||
false
|
|
||||||
);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
}
|
||||||
|
|
||||||
if (uninstallButton) {
|
return card;
|
||||||
uninstallButton.addEventListener('click', async () => {
|
|
||||||
|
|
||||||
const confirmed = await showCustomModal(
|
|
||||||
'Confirm Uninstallation',
|
|
||||||
`Are you sure you want to uninstall ${extensionName}?`,
|
|
||||||
true
|
|
||||||
);
|
|
||||||
|
|
||||||
if (!confirmed) return;
|
|
||||||
|
|
||||||
try {
|
|
||||||
const response = await fetch('/api/extensions/uninstall', {
|
|
||||||
method: 'POST',
|
|
||||||
headers: { 'Content-Type': 'application/json' },
|
|
||||||
body: JSON.stringify({ fileName: extension.fileName }),
|
|
||||||
});
|
|
||||||
|
|
||||||
const result = await response.json();
|
|
||||||
|
|
||||||
if (response.ok) {
|
|
||||||
updateExtensionState(extension.fileName, false);
|
|
||||||
|
|
||||||
await showCustomModal(
|
|
||||||
'Uninstallation Successful',
|
|
||||||
`${extensionName} has been successfully uninstalled.`,
|
|
||||||
false
|
|
||||||
);
|
|
||||||
} else {
|
|
||||||
|
|
||||||
await showCustomModal(
|
|
||||||
'Uninstallation Failed',
|
|
||||||
`Uninstallation failed: ${result.error || 'Unknown error.'}`,
|
|
||||||
false
|
|
||||||
);
|
|
||||||
}
|
|
||||||
} catch (error) {
|
|
||||||
|
|
||||||
await showCustomModal(
|
|
||||||
'Uninstallation Failed',
|
|
||||||
`Network error during uninstallation.`,
|
|
||||||
false
|
|
||||||
);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
extensionsGrid.appendChild(card);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
async function getInstalledExtensions() {
|
function showModal(title, message, showConfirm = false, onConfirm = null) {
|
||||||
console.log(`Fetching installed extensions from: ${INSTALLED_EXTENSIONS_API}`);
|
modalTitle.innerText = title;
|
||||||
|
modalMessage.innerText = message;
|
||||||
try {
|
if (showConfirm) {
|
||||||
const response = await fetch(INSTALLED_EXTENSIONS_API);
|
modalConfirmBtn.classList.remove('hidden');
|
||||||
|
modalConfirmBtn.onclick = () => { hideModal(); if (onConfirm) onConfirm(); };
|
||||||
if (!response.ok) {
|
|
||||||
console.error(`Error fetching installed extensions. Status: ${response.status}`);
|
|
||||||
return new Set();
|
|
||||||
}
|
|
||||||
|
|
||||||
const data = await response.json();
|
|
||||||
|
|
||||||
if (!data.extensions || !Array.isArray(data.extensions)) {
|
|
||||||
console.error("Invalid response format from /api/extensions: 'extensions' array missing or incorrect.");
|
|
||||||
return new Set();
|
|
||||||
}
|
|
||||||
|
|
||||||
const installedFileNames = data.extensions
|
|
||||||
.map(name => `${name.toLowerCase()}.js`);
|
|
||||||
|
|
||||||
return new Set(installedFileNames);
|
|
||||||
|
|
||||||
} catch (error) {
|
|
||||||
console.error('Network or JSON parsing error during fetch of installed extensions:', error);
|
|
||||||
return new Set();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function filterAndRenderExtensions(filterType) {
|
|
||||||
extensionsGrid.innerHTML = '';
|
|
||||||
|
|
||||||
if (!allExtensionsData || allExtensionsData.length === 0) {
|
|
||||||
console.log('No extension data to filter.');
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
const filteredExtensions = allExtensionsData.filter(ext =>
|
|
||||||
filterType === 'All' || ext.type === filterType || (ext.isLocal && filterType === 'Local')
|
|
||||||
);
|
|
||||||
|
|
||||||
filteredExtensions.forEach(ext => {
|
|
||||||
renderExtensionCard(ext, ext.isInstalled, ext.isLocal);
|
|
||||||
});
|
|
||||||
|
|
||||||
if (filteredExtensions.length === 0) {
|
|
||||||
extensionsGrid.innerHTML = `<p style="grid-column: 1 / -1; text-align: center; color: var(--text-secondary);">No extensions found for the selected filter (${filterType}).</p>`;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
async function loadMarketplace() {
|
|
||||||
extensionsGrid.innerHTML = '';
|
|
||||||
|
|
||||||
for (let i = 0; i < 6; i++) {
|
|
||||||
extensionsGrid.innerHTML += `
|
|
||||||
<div class="extension-card skeleton grid-item">
|
|
||||||
<div class="skeleton-icon skeleton" style="width: 50px; height: 50px;"></div>
|
|
||||||
<div class="card-content-wrapper">
|
|
||||||
<div class="skeleton-text title-skeleton skeleton" style="width: 80%; height: 1.1em;"></div>
|
|
||||||
<div class="skeleton-text text-skeleton skeleton" style="width: 50%; height: 0.7em; margin-top: 0.25rem;"></div>
|
|
||||||
</div>
|
|
||||||
<div class="skeleton-button skeleton" style="width: 100%; height: 32px; margin-top: 0.5rem;"></div>
|
|
||||||
</div>`;
|
|
||||||
}
|
|
||||||
|
|
||||||
try {
|
|
||||||
|
|
||||||
const [availableExtensionsRaw, installedExtensionsSet] = await Promise.all([
|
|
||||||
fetch(API_URL_BASE).then(res => {
|
|
||||||
if (!res.ok) throw new Error(`HTTP error! status: ${res.status}`);
|
|
||||||
return res.json();
|
|
||||||
}),
|
|
||||||
getInstalledExtensions()
|
|
||||||
]);
|
|
||||||
|
|
||||||
const availableExtensionsJs = availableExtensionsRaw.filter(ext => ext.type === 'file' && ext.name.endsWith('.js'));
|
|
||||||
const detailPromises = [];
|
|
||||||
|
|
||||||
const marketplaceFileNames = new Set(availableExtensionsJs.map(ext => ext.name.toLowerCase()));
|
|
||||||
|
|
||||||
for (const ext of availableExtensionsJs) {
|
|
||||||
|
|
||||||
const downloadUrl = getRawUrl(ext.name);
|
|
||||||
|
|
||||||
const detailsPromise = getExtensionDetails(downloadUrl).then(details => ({
|
|
||||||
...ext,
|
|
||||||
...details,
|
|
||||||
fileName: ext.name,
|
|
||||||
|
|
||||||
isInstalled: installedExtensionsSet.has(ext.name.toLowerCase()),
|
|
||||||
isLocal: false,
|
|
||||||
}));
|
|
||||||
detailPromises.push(detailsPromise);
|
|
||||||
}
|
|
||||||
|
|
||||||
const extensionsWithDetails = await Promise.all(detailPromises);
|
|
||||||
|
|
||||||
installedExtensionsSet.forEach(installedName => {
|
|
||||||
|
|
||||||
if (!marketplaceFileNames.has(installedName)) {
|
|
||||||
|
|
||||||
const localExt = {
|
|
||||||
name: formatExtensionName(installedName),
|
|
||||||
fileName: installedName,
|
|
||||||
type: 'Local',
|
|
||||||
isInstalled: true,
|
|
||||||
isLocal: true,
|
|
||||||
baseUrl: 'Local Install',
|
|
||||||
};
|
|
||||||
extensionsWithDetails.push(localExt);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
extensionsWithDetails.sort((a, b) => {
|
|
||||||
if (a.isInstalled !== b.isInstalled) {
|
|
||||||
return b.isInstalled - a.isInstalled;
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
const nameA = a.name || '';
|
|
||||||
const nameB = b.name || '';
|
|
||||||
|
|
||||||
return nameA.localeCompare(nameB);
|
|
||||||
|
|
||||||
});
|
|
||||||
|
|
||||||
allExtensionsData = extensionsWithDetails;
|
|
||||||
|
|
||||||
if (filterSelect) {
|
|
||||||
filterSelect.addEventListener('change', (event) => {
|
|
||||||
filterAndRenderExtensions(event.target.value);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
filterAndRenderExtensions('All');
|
|
||||||
|
|
||||||
} catch (error) {
|
|
||||||
console.error('Error loading the marketplace:', error);
|
|
||||||
extensionsGrid.innerHTML = `
|
|
||||||
<div style="grid-column: 1 / -1; color: #dc2626; text-align: center; padding: 2rem; background: rgba(220,38,38,0.1); border-radius: 12px; margin-top: 1rem;">
|
|
||||||
🚨 Error loading extensions.
|
|
||||||
<p>Could not connect to the extension repository or local endpoint. Detail: ${error.message}</p>
|
|
||||||
</div>
|
|
||||||
`;
|
|
||||||
allExtensionsData = [];
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
customModal.addEventListener('click', (e) => {
|
|
||||||
if (e.target === customModal || e.target.tagName === 'BUTTON') {
|
|
||||||
customModal.classList.add('hidden');
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
document.addEventListener('DOMContentLoaded', loadMarketplace);
|
|
||||||
|
|
||||||
window.addEventListener('scroll', () => {
|
|
||||||
const navbar = document.getElementById('navbar');
|
|
||||||
if (window.scrollY > 0) {
|
|
||||||
navbar.classList.add('scrolled');
|
|
||||||
} else {
|
} else {
|
||||||
navbar.classList.remove('scrolled');
|
modalConfirmBtn.classList.add('hidden');
|
||||||
}
|
}
|
||||||
});
|
modalCloseBtn.onclick = hideModal;
|
||||||
|
modal.classList.remove('hidden');
|
||||||
|
}
|
||||||
|
|
||||||
|
function hideModal() { modal.classList.add('hidden'); }
|
||||||
|
|
||||||
|
async function handleInstall(ext) {
|
||||||
|
try {
|
||||||
|
const res = await fetch('/api/extensions/install', {
|
||||||
|
method: 'POST',
|
||||||
|
headers: { 'Content-Type': 'application/json' },
|
||||||
|
body: JSON.stringify({ url: ext.entry })
|
||||||
|
});
|
||||||
|
if (res.ok) {
|
||||||
|
installedExtensions.push(ext.id.toLowerCase());
|
||||||
|
renderGroupedView();
|
||||||
|
showModal('Success', `${ext.name} installed!`);
|
||||||
|
}
|
||||||
|
} catch (e) { showModal('Error', 'Install failed.'); }
|
||||||
|
}
|
||||||
|
|
||||||
|
function promptUninstall(ext) {
|
||||||
|
showModal('Confirm', `Uninstall ${ext.name}?`, true, () => handleUninstall(ext));
|
||||||
|
}
|
||||||
|
|
||||||
|
async function handleUninstall(ext) {
|
||||||
|
try {
|
||||||
|
const res = await fetch('/api/extensions/uninstall', {
|
||||||
|
method: 'POST',
|
||||||
|
headers: { 'Content-Type': 'application/json' },
|
||||||
|
body: JSON.stringify({ fileName: ext.id + '.js' })
|
||||||
|
});
|
||||||
|
if (res.ok) {
|
||||||
|
installedExtensions = installedExtensions.filter(id => id !== ext.id.toLowerCase());
|
||||||
|
renderGroupedView();
|
||||||
|
}
|
||||||
|
} catch (e) { showModal('Error', 'Uninstall failed.'); }
|
||||||
|
}
|
||||||
|
|
||||||
|
function showSkeletons() {
|
||||||
|
marketplaceContent.innerHTML = `
|
||||||
|
<div class="marketplace-grid">
|
||||||
|
${Array(3).fill('<div class="extension-card skeleton"></div>').join('')}
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
}
|
||||||
|
|
||||||
|
document.addEventListener('DOMContentLoaded', loadMarketplace);
|
||||||
@@ -24,9 +24,9 @@
|
|||||||
<button class="nav-button" onclick="window.location.href='/anime'">Anime</button>
|
<button class="nav-button" onclick="window.location.href='/anime'">Anime</button>
|
||||||
<button class="nav-button" onclick="window.location.href='/books'">Books</button>
|
<button class="nav-button" onclick="window.location.href='/books'">Books</button>
|
||||||
<button class="nav-button" onclick="window.location.href='/gallery'">Gallery</button>
|
<button class="nav-button" onclick="window.location.href='/gallery'">Gallery</button>
|
||||||
<button class="nav-button" onclick="window.location.href='/schedule'">Schedule</button>
|
<button class="nav-button" onclick="window.location.href='/schedule.html'">Schedule</button>
|
||||||
<button class="nav-button" onclick="window.location.href='/my-list'">My List</button>
|
<button class="nav-button" onclick="window.location.href='/my-list'">My List</button>
|
||||||
<button class="nav-button active">Marketplace</button>
|
<button class="nav-button">Marketplace</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="nav-right">
|
<div class="nav-right">
|
||||||
@@ -78,47 +78,28 @@
|
|||||||
|
|
||||||
<main>
|
<main>
|
||||||
<section class="section">
|
<section class="section">
|
||||||
|
|
||||||
<header class="section-header">
|
<header class="section-header">
|
||||||
<p class="marketplace-subtitle">Explore, install, and manage all available data source extensions for WaifuBoard.</p>
|
<div class="tabs-container">
|
||||||
|
<button class="tab-button active" data-tab="marketplace">Marketplace</button>
|
||||||
|
<button class="tab-button" data-tab="installed">My Extensions</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class="filter-controls">
|
<div class="filter-controls">
|
||||||
<label for="extension-filter" class="filter-label">Filter by Type:</label>
|
<label for="extension-filter" class="filter-label">Filter by Type:</label>
|
||||||
<select id="extension-filter" class="filter-select">
|
<select id="extension-filter" class="filter-select">
|
||||||
<option value="All">All Extensions</option>
|
<option value="All">All Categories</option>
|
||||||
<option value="Image">Image Boards</option>
|
<option value="image-board">Image Boards</option>
|
||||||
<option value="Anime">Anime Boards</option>
|
<option value="anime-board">Anime Boards</option>
|
||||||
<option value="Book">Book Boards</option>
|
<option value="book-board">Book Boards</option>
|
||||||
<option value="Local">Local Only</option>
|
<option value="Local">Local/Manual</option>
|
||||||
</select>
|
</select>
|
||||||
</div>
|
</div>
|
||||||
</header>
|
</header>
|
||||||
<div class="marketplace-grid" id="extensions-grid">
|
|
||||||
<div class="extension-card skeleton grid-item">
|
<div id="marketplace-content">
|
||||||
<div class="skeleton-icon" style="width: 50px; height: 50px;"></div>
|
|
||||||
<div class="card-content-wrapper">
|
|
||||||
<div class="skeleton-text title-skeleton" style="width: 80%; height: 1.1em;"></div>
|
|
||||||
<div class="skeleton-text text-skeleton" style="width: 50%; height: 0.7em; margin-top: 0.25rem;"></div>
|
|
||||||
</div>
|
|
||||||
<div class="skeleton-button" style="width: 100%; height: 32px; margin-top: 0.5rem;"></div>
|
|
||||||
</div>
|
|
||||||
<div class="extension-card skeleton grid-item">
|
|
||||||
<div class="skeleton-icon" style="width: 50px; height: 50px;"></div>
|
|
||||||
<div class="card-content-wrapper">
|
|
||||||
<div class="skeleton-text title-skeleton" style="width: 80%; height: 1.1em;"></div>
|
|
||||||
<div class="skeleton-text text-skeleton" style="width: 50%; height: 0.7em; margin-top: 0.25rem;"></div>
|
|
||||||
</div>
|
|
||||||
<div class="skeleton-button" style="width: 100%; height: 32px; margin-top: 0.5rem;"></div>
|
|
||||||
</div>
|
|
||||||
<div class="extension-card skeleton grid-item">
|
|
||||||
<div class="skeleton-icon" style="width: 50px; height: 50px;"></div>
|
|
||||||
<div class="card-content-wrapper">
|
|
||||||
<div class="skeleton-text title-skeleton" style="width: 80%; height: 1.1em;"></div>
|
|
||||||
<div class="skeleton-text text-skeleton" style="width: 50%; height: 0.7em; margin-top: 0.25rem;"></div>
|
|
||||||
</div>
|
|
||||||
<div class="skeleton-button" style="width: 100%; height: 32px; margin-top: 0.5rem;"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<div id="customModal" class="modal-overlay hidden">
|
<div id="customModal" class="modal-overlay hidden">
|
||||||
<div class="modal-content">
|
<div class="modal-content">
|
||||||
<h3 id="modalTitle"></h3>
|
<h3 id="modalTitle"></h3>
|
||||||
@@ -131,22 +112,9 @@
|
|||||||
</div>
|
</div>
|
||||||
</main>
|
</main>
|
||||||
|
|
||||||
<div id="updateToast" class="hidden">
|
|
||||||
<p>Update available: <span id="latestVersionDisplay">v1.x</span></p>
|
|
||||||
|
|
||||||
<a
|
|
||||||
id="downloadButton"
|
|
||||||
href="https://git.waifuboard.app/ItsSkaiya/WaifuBoard/releases"
|
|
||||||
target="_blank"
|
|
||||||
>
|
|
||||||
Click To Download
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<script src="/src/scripts/updateNotifier.js"></script>
|
<script src="/src/scripts/updateNotifier.js"></script>
|
||||||
<script src="/src/scripts/rpc-inapp.js"></script>
|
|
||||||
<script src="/src/scripts/marketplace.js"></script>
|
<script src="/src/scripts/marketplace.js"></script>
|
||||||
<script src="/src/scripts/titlebar.js"></script>
|
<script src="/src/scripts/rpc-inapp.js"></script>
|
||||||
<script src="/src/scripts/auth-guard.js"></script>
|
<script src="/src/scripts/auth-guard.js"></script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
Reference in New Issue
Block a user