Files
NebulaBrowser/renderer/settings.html
T
andrew 0b61f86dd4 Refactor site history to use localStorage and improve UI
Site history is now managed in localStorage for faster access and better cross-tab experience, with file sync for persistence. Added a dropdown for quick site history access in the address bar, updated settings page to display and manage site history from localStorage, and improved history recording logic in both main and renderer processes. Also added debug info and test data utilities for development.
2025-07-26 14:15:13 +12:00

232 lines
8.3 KiB
HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Settings</title>
<link rel="stylesheet" href="settings.css" />
<link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>⚙️</text></svg>">
<style>
body { font-family: sans-serif; padding: 20px; }
section { margin-bottom: 30px; }
h2 { border-bottom: 1px solid #ccc; padding-bottom: 5px; }
ul { list-style: none; padding-left: 0; }
li { padding: 5px 0; border-bottom: 1px solid #eee; }
.debug-info { background: #f0f0f0; padding: 10px; margin: 10px 0; font-family: monospace; font-size: 12px; }
</style>
</head>
<body>
<div class="container">
<h1>⚙️ Browser Settings</h1>
<div class="setting-group">
<label for="clear-data-btn">Clear All Cookies &amp; Data</label>
<button id="clear-data-btn">Clear Data</button>
</div>
<p class="note">Settings are stored locally on this device.</p>
<div class="debug-info" id="debug-info">Loading debug info...</div>
<!-- add history views -->
<section>
<h2>Search History</h2>
<ul id="search-history-list"></ul>
<button id="clear-search-history-btn" style="margin-top: 10px;">Clear Search History</button>
</section>
<section>
<h2>Site History</h2>
<ul id="site-history-list"></ul>
<button id="clear-site-history-btn" style="margin-top: 10px;">Clear Site History</button>
<button id="add-test-history-btn" style="margin-top: 10px; margin-left: 10px;">Add Test History</button>
</section>
</div>
<!-- status overlay moved outside of .container -->
<div id="status" class="status hidden">
<div class="spinner"></div>
<span id="status-text"></span>
</div>
<script src="settings.js"></script>
<script>
// Update debug info
function updateDebugInfo() {
const debugDiv = document.getElementById('debug-info');
const localStorage = window.localStorage;
const hasElectronAPI = !!window.electronAPI;
const siteHistory = localStorage ? localStorage.getItem('siteHistory') : 'N/A';
debugDiv.innerHTML = `
localStorage available: ${!!localStorage}<br>
electronAPI available: ${hasElectronAPI}<br>
siteHistory in localStorage: ${siteHistory || 'null'}<br>
Current domain: ${window.location.hostname}<br>
Current protocol: ${window.location.protocol}
`;
}
// Get site history from localStorage in this webview context
function getSiteHistoryFromLocalStorage() {
try {
const history = localStorage.getItem('siteHistory');
console.log('[SETTINGS DEBUG] localStorage siteHistory:', history);
return history ? JSON.parse(history) : [];
} catch (err) {
console.error('[SETTINGS DEBUG] Error reading from localStorage:', err);
return [];
}
}
// Sync site history from main browser's localStorage to this webview's localStorage
function syncSiteHistoryFromMain() {
try {
// Try to get the parent window's localStorage
if (window.parent && window.parent !== window) {
const parentHistory = window.parent.localStorage.getItem('siteHistory');
if (parentHistory) {
localStorage.setItem('siteHistory', parentHistory);
console.log('[SETTINGS DEBUG] Synced history from parent window');
return JSON.parse(parentHistory);
}
}
return [];
} catch (err) {
console.log('[SETTINGS DEBUG] Could not sync from parent:', err.message);
return [];
}
}
function addTestHistory() {
const testSites = [
'https://www.google.com',
'https://github.com',
'https://stackoverflow.com',
'https://developer.mozilla.org',
'https://www.wikipedia.org'
];
testSites.forEach(site => {
try {
let history = getSiteHistoryFromLocalStorage();
history = history.filter(item => item !== site);
history.unshift(site);
localStorage.setItem('siteHistory', JSON.stringify(history));
console.log('[SETTINGS DEBUG] Added test site:', site);
} catch (err) {
console.error('Error adding test history:', err);
}
});
loadHistories();
}
async function loadHistories() {
try {
console.log('[SETTINGS DEBUG] Loading histories...');
updateDebugInfo();
// First try to sync from parent window
let siteHistory = syncSiteHistoryFromMain();
// If that didn't work, get from local storage
if (siteHistory.length === 0) {
siteHistory = getSiteHistoryFromLocalStorage();
}
// Try to get search history via message passing to parent or direct file access
let searchHistory = [];
const searchList = document.getElementById('search-history-list');
const siteList = document.getElementById('site-history-list');
// Clear existing content
searchList.innerHTML = '';
siteList.innerHTML = '';
// Populate search history
const searchLi = document.createElement('li');
searchLi.textContent = 'Search history not available in webview context';
searchLi.style.fontStyle = 'italic';
searchLi.style.color = '#666';
searchList.appendChild(searchLi);
// Populate site history
if (siteHistory && siteHistory.length > 0) {
console.log('[SETTINGS DEBUG] Displaying', siteHistory.length, 'site history items');
siteHistory.forEach(item => {
const li = document.createElement('li');
li.textContent = item;
li.style.wordBreak = 'break-all';
siteList.appendChild(li);
});
} else {
console.log('[SETTINGS DEBUG] No site history to display');
const li = document.createElement('li');
li.textContent = 'No browsing history found. Browse some websites first!';
li.style.fontStyle = 'italic';
li.style.color = '#666';
siteList.appendChild(li);
}
} catch(err) {
console.error('[SETTINGS DEBUG] Error loading histories:', err);
const searchList = document.getElementById('search-history-list');
const siteList = document.getElementById('site-history-list');
const errorLi1 = document.createElement('li');
errorLi1.textContent = 'Error loading search history: ' + err.message;
errorLi1.style.color = 'red';
searchList.appendChild(errorLi1);
const errorLi2 = document.createElement('li');
errorLi2.textContent = 'Error loading site history: ' + err.message;
errorLi2.style.color = 'red';
siteList.appendChild(errorLi2);
}
}
async function clearSiteHistory() {
try {
// Clear from localStorage
localStorage.removeItem('siteHistory');
console.log('[SETTINGS DEBUG] Cleared site history from localStorage');
loadHistories(); // Refresh the display
} catch (err) {
console.error('Error clearing site history:', err);
}
}
async function clearSearchHistory() {
console.log('Search history clearing not available in webview context');
}
// Load histories on page load
window.addEventListener('DOMContentLoaded', () => {
console.log('[SETTINGS DEBUG] DOM loaded, window.electronAPI:', !!window.electronAPI);
loadHistories();
// Refresh history every few seconds to pick up new browsing
setInterval(loadHistories, 3000);
// Add test history button functionality
const addTestBtn = document.getElementById('add-test-history-btn');
if (addTestBtn) {
addTestBtn.addEventListener('click', addTestHistory);
}
// Add clear buttons functionality
const clearSiteBtn = document.getElementById('clear-site-history-btn');
const clearSearchBtn = document.getElementById('clear-search-history-btn');
if (clearSiteBtn) {
clearSiteBtn.addEventListener('click', clearSiteHistory);
}
if (clearSearchBtn) {
clearSearchBtn.addEventListener('click', clearSearchHistory);
}
});
</script>
</body>
</html>