900 lines
34 KiB
JavaScript
900 lines
34 KiB
JavaScript
import { icons as initialIcons, fetchAllIcons } from './icons.js';
|
||
import { iconSets } from './iconSets.js';
|
||
|
||
const bookmarkList = document.getElementById('bookmarkList');
|
||
const titleInput = document.getElementById('titleInput');
|
||
const urlInput = document.getElementById('urlInput');
|
||
const saveBookmarkBtn = document.getElementById('saveBookmarkBtn');
|
||
const cancelBtn = document.getElementById('cancelBtn');
|
||
const addPopup = document.getElementById('addPopup');
|
||
const searchBtn = document.getElementById('searchBtn');
|
||
const searchInput = document.getElementById('searchInput');
|
||
const searchEngineBtn = document.getElementById('searchEngineBtn');
|
||
const searchEngineDropdown = document.getElementById('searchEngineDropdown');
|
||
const searchEngineLogo = document.getElementById('searchEngineLogo');
|
||
const iconFilter = document.getElementById('iconFilter');
|
||
const iconGrid = document.getElementById('iconGrid');
|
||
const selectedIconInput= document.getElementById('selectedIcon');
|
||
const iconCategoryNav = document.getElementById('iconCategoryNav');
|
||
const useFaviconCheckbox = document.getElementById('useFavicon');
|
||
const greetingEl = document.getElementById('greeting');
|
||
const resetTopSitesBtn = document.getElementById('resetTopSites');
|
||
const clockEl = document.getElementById('clock');
|
||
const weatherEl = document.getElementById('weather');
|
||
const glanceEl = document.querySelector('.glance');
|
||
const searchContainerEl = document.querySelector('.search-container');
|
||
const topSitesEl = document.querySelector('.top-sites-card');
|
||
const editBtn = document.getElementById('editLayoutBtn');
|
||
const greetingTitleEl = document.getElementById('greeting');
|
||
const editToolbar = document.getElementById('editToolbar');
|
||
const saveEditBtn = document.getElementById('saveEditBtn');
|
||
const cancelEditBtn = document.getElementById('cancelEditBtn');
|
||
let selectedIcon = initialIcons[0];
|
||
let availableIcons = initialIcons;
|
||
let currentIconSetKey = 'material';
|
||
const loadedSetsCache = new Map(); // key -> array
|
||
let unifiedCatalog = []; // aggregated icons with categories
|
||
// Semantic icon categories (ordered) with predicate tests
|
||
const iconCategories = [
|
||
{ id: 'services', label: 'Services', test: (n, set) => set === 'simple' || /(github|gitlab|google|twitter|facebook|discord|slack|whatsapp|youtube|spotify|apple|microsoft|aws|azure|gcp|cloudflare|figma|notion|paypal|stripe|reddit|steam|xbox|playstation|nintendo|openai|vercel|netlify|docker|kubernetes)/.test(n), icon: 'cloud' },
|
||
{ id: 'settings', label: 'Settings', test: n => /(setting|settings|cog|gear|tools?|wrench|sliders?|command|preferences?)/.test(n), icon: 'settings' },
|
||
{ id: 'files', label: 'Files & Data', test: n => /(file|folder|archive|book|bookmark|save|upload|download|cloud|database|server)/.test(n), icon: 'folder' },
|
||
{ id: 'media', label: 'Media', test: n => /(camera|video|film|image|photo|music|play|pause|mic|microphone|volume|speaker)/.test(n), icon: 'video_camera_front' },
|
||
{ id: 'social', label: 'Social & Communication', test: n => /(chat|message|mail|envelope|phone|comment|share|rss)/.test(n), icon: 'chat' },
|
||
{ id: 'nav', label: 'Navigation', test: n => /(map|compass|globe|route|pin|location|world|earth)/.test(n), icon: 'explore' },
|
||
{ id: 'security', label: 'Security', test: n => /(lock|shield|key|alert|warning|info|question|bug)/.test(n), icon: 'security' },
|
||
{ id: 'commerce', label: 'Commerce', test: n => /(cart|shopping|wallet|credit|bank|price|tag|sale|bag|store|shop)/.test(n), icon: 'shopping_cart' },
|
||
{ id: 'status', label: 'Status', test: n => /(star|heart|award|trophy|badge|bell|notification)/.test(n), icon: 'star' },
|
||
{ id: 'food', label: 'Food', test: n => /(apple|cake|coffee|cookie|beer|wine|food|restaurant|cup|tea)/.test(n), icon: 'restaurant' },
|
||
{ id: 'devices', label: 'Devices', test: n => /(cpu|laptop|desktop|tablet|phone|smartphone|device|monitor|tv)/.test(n), icon: 'devices' },
|
||
{ id: 'other', label: 'Other', test: () => true, icon: 'more_horiz' }
|
||
];
|
||
|
||
const searchEngines = {
|
||
google: 'https://www.google.com/search?q=',
|
||
bing: 'https://www.bing.com/search?q=',
|
||
duckduckgo: 'https://duckduckgo.com/?q='
|
||
};
|
||
let selectedSearchEngine = 'google';
|
||
|
||
let bookmarks = [];
|
||
|
||
// Load bookmarks from main via Electron IPC
|
||
// Load bookmarks via contextBridge API
|
||
async function loadBookmarks() {
|
||
try {
|
||
let data = [];
|
||
// Use bookmarksAPI if available
|
||
if (window.bookmarksAPI && typeof window.bookmarksAPI.load === 'function') {
|
||
data = await window.bookmarksAPI.load();
|
||
} else if (window.electronAPI && typeof window.electronAPI.invoke === 'function') {
|
||
data = await window.electronAPI.invoke('load-bookmarks');
|
||
} else {
|
||
console.error('No API available to load bookmarks');
|
||
}
|
||
return Array.isArray(data) ? data : [];
|
||
} catch (error) {
|
||
console.error('Error loading bookmarks:', error);
|
||
return [];
|
||
}
|
||
}
|
||
|
||
// Save bookmarks to main process
|
||
// Save bookmarks via contextBridge API
|
||
async function saveBookmarks() {
|
||
try {
|
||
await window.bookmarksAPI.save(bookmarks);
|
||
} catch (error) {
|
||
console.error('Error saving bookmarks:', error);
|
||
}
|
||
}
|
||
|
||
// Render bookmarks
|
||
function renderBookmarks() {
|
||
bookmarkList.innerHTML = '';
|
||
|
||
// Render each bookmark
|
||
bookmarks.forEach((b, index) => {
|
||
const box = document.createElement('div');
|
||
box.className = 'bookmark';
|
||
|
||
// prepend icon
|
||
const iconVal = b.icon || 'bookmark';
|
||
let iconEl;
|
||
if (typeof iconVal === 'string' && /^(https?:|data:)/.test(iconVal)) {
|
||
// Treat as favicon/image URL
|
||
iconEl = document.createElement('img');
|
||
iconEl.src = iconVal;
|
||
iconEl.alt = 'favicon';
|
||
iconEl.className = 'bookmark-favicon';
|
||
iconEl.referrerPolicy = 'no-referrer';
|
||
// Apply filter for dark backgrounds to ensure visibility
|
||
if (isDarkBackground()) {
|
||
iconEl.style.filter = 'brightness(0) saturate(100%) invert(100%)';
|
||
}
|
||
box.appendChild(iconEl);
|
||
} else {
|
||
iconEl = document.createElement('span');
|
||
iconEl.className = 'material-symbols-outlined';
|
||
iconEl.textContent = iconVal;
|
||
box.appendChild(iconEl);
|
||
}
|
||
|
||
const label = document.createElement('span');
|
||
label.className = 'bookmark-title';
|
||
label.textContent = b.title;
|
||
|
||
const close = document.createElement('button');
|
||
close.textContent = '×';
|
||
close.className = 'delete-btn';
|
||
close.onclick = async (e) => {
|
||
e.stopPropagation();
|
||
bookmarks.splice(index, 1);
|
||
await saveBookmarks();
|
||
renderBookmarks();
|
||
};
|
||
|
||
// Navigate via IPC to host page
|
||
box.onclick = () => {
|
||
const url = b.url;
|
||
if (window.electronAPI && typeof window.electronAPI.sendToHost === 'function') {
|
||
window.electronAPI.sendToHost('navigate', url);
|
||
} else {
|
||
console.error('Unable to send navigation IPC to host');
|
||
}
|
||
// Fallback: post message to embedding page
|
||
if (window.parent && typeof window.parent.postMessage === 'function') {
|
||
window.parent.postMessage({ type: 'navigate', url }, '*');
|
||
}
|
||
};
|
||
|
||
box.appendChild(label);
|
||
box.appendChild(close);
|
||
bookmarkList.appendChild(box);
|
||
});
|
||
|
||
// Add "+" box
|
||
const addBox = document.createElement('div');
|
||
addBox.className = 'bookmark add-bookmark';
|
||
addBox.textContent = '+';
|
||
addBox.onclick = () => addPopup.classList.remove('hidden');
|
||
|
||
bookmarkList.appendChild(addBox);
|
||
}
|
||
|
||
// Reset Top Sites (bookmarks) to empty state
|
||
if (resetTopSitesBtn) {
|
||
resetTopSitesBtn.addEventListener('click', async (e) => {
|
||
e.preventDefault();
|
||
if (!bookmarks.length) return;
|
||
const yes = confirm('Clear all Top Sites?');
|
||
if (!yes) return;
|
||
bookmarks = [];
|
||
await saveBookmarks();
|
||
renderBookmarks();
|
||
});
|
||
}
|
||
|
||
// draw the icon‐grid, filtering by the search term
|
||
function renderIconGrid(filter = '') {
|
||
const f = filter.toLowerCase();
|
||
iconGrid.innerHTML = '';
|
||
const frag = document.createDocumentFragment();
|
||
let lastCat = null;
|
||
const filtered = unifiedCatalog.filter(e => !f || e.name.includes(f));
|
||
filtered.forEach(entry => {
|
||
if (entry.category !== lastCat) {
|
||
lastCat = entry.category;
|
||
const anchor = document.createElement('div');
|
||
anchor.className = 'icon-section-anchor';
|
||
anchor.id = `section-${entry.category}`;
|
||
frag.appendChild(anchor);
|
||
}
|
||
const span = document.createElement('span');
|
||
span.className = 'icon-item';
|
||
const def = iconSets[entry.set];
|
||
if (entry.set === 'material') {
|
||
span.classList.add('material-symbols-outlined');
|
||
span.textContent = entry.name;
|
||
} else if (def && def.fontClass) {
|
||
const i = document.createElement('i');
|
||
i.className = def.fontClass(entry.name);
|
||
span.appendChild(i);
|
||
} else if (entry.dataUrl) {
|
||
const img = document.createElement('img');
|
||
img.src = entry.dataUrl; img.alt = entry.name; img.className = 'grid-svg';
|
||
span.appendChild(img);
|
||
} else {
|
||
span.textContent = '…';
|
||
(async () => {
|
||
if (def && def.fetchIcon) {
|
||
const dataUrl = await def.fetchIcon(entry.name);
|
||
if (dataUrl) {
|
||
entry.dataUrl = dataUrl;
|
||
if (span.isConnected) {
|
||
span.textContent='';
|
||
const img=document.createElement('img');
|
||
img.src=dataUrl; img.alt=entry.name; img.className='grid-svg';
|
||
span.appendChild(img);
|
||
}
|
||
} else {
|
||
// If SVG fetch fails, try font class or show truncated name
|
||
if (def.fontClass && span.isConnected) {
|
||
span.textContent='';
|
||
const i = document.createElement('i');
|
||
i.className = def.fontClass(entry.name);
|
||
span.appendChild(i);
|
||
} else {
|
||
span.textContent = entry.name.slice(0,3);
|
||
}
|
||
}
|
||
} else {
|
||
// No fetchIcon available, show name
|
||
span.textContent = entry.name.slice(0,3);
|
||
}
|
||
})();
|
||
}
|
||
span.onclick = () => {
|
||
const currentSelected = iconGrid.querySelector('.icon-item.selected');
|
||
if (currentSelected) currentSelected.classList.remove('selected');
|
||
span.classList.add('selected');
|
||
selectedIcon = entry.name;
|
||
selectedIconInput.value = entry.name;
|
||
selectedIconInput.dataset.iconSet = entry.set;
|
||
if (entry.dataUrl) selectedIconInput.dataset.dataUrl = entry.dataUrl; else delete selectedIconInput.dataset.dataUrl;
|
||
};
|
||
frag.appendChild(span);
|
||
});
|
||
iconGrid.appendChild(frag);
|
||
// Don't auto-select first icon to allow favicon usage
|
||
}
|
||
|
||
// filter as the user types
|
||
iconFilter.addEventListener('input', () => renderIconGrid(iconFilter.value.trim()));
|
||
|
||
// initial render
|
||
renderIconGrid();
|
||
|
||
// Asynchronously fetch all icons and update the grid
|
||
async function buildUnifiedCatalog() {
|
||
const keys = Object.keys(iconSets);
|
||
for (const k of keys) {
|
||
if (!loadedSetsCache.has(k)) {
|
||
try { loadedSetsCache.set(k, await iconSets[k].loader()); }
|
||
catch(e) { console.warn('Icon set load failed', k, e); loadedSetsCache.set(k, []); }
|
||
}
|
||
}
|
||
const temp = [];
|
||
for (const k of keys) {
|
||
const arr = loadedSetsCache.get(k) || [];
|
||
for (const name of arr) {
|
||
const lower = name.toLowerCase();
|
||
const category = iconCategories.find(c => c.test(lower, k)).id;
|
||
temp.push({ set: k, name, category });
|
||
}
|
||
}
|
||
// order by category then by name
|
||
unifiedCatalog = temp.sort((a,b)=> {
|
||
if (a.category === b.category) return a.name.localeCompare(b.name);
|
||
return iconCategories.findIndex(c=>c.id===a.category) - iconCategories.findIndex(c=>c.id===b.category);
|
||
});
|
||
buildCategoryNav();
|
||
renderIconGrid(iconFilter.value.trim());
|
||
}
|
||
buildUnifiedCatalog();
|
||
|
||
// --- Favicon resolution helpers ---
|
||
async function resolveFavicon(rawUrl) {
|
||
if (!rawUrl) return null;
|
||
let url = rawUrl.trim();
|
||
if (!/^https?:\/\//i.test(url)) {
|
||
url = 'https://' + url; // assume https if protocol missing
|
||
}
|
||
try {
|
||
const u = new URL(url);
|
||
// Prefer Google favicon service for simplicity & size; fall back to /favicon.ico
|
||
const googleService = `https://www.google.com/s2/favicons?sz=64&domain_url=${encodeURIComponent(u.origin)}`;
|
||
// We'll optimisticly use google service; optionally we could verify it loads, but browsers will handle 404 gracefully.
|
||
return googleService;
|
||
} catch (_) {
|
||
return null;
|
||
}
|
||
}
|
||
|
||
// Helper function to detect if background is dark
|
||
function isDarkBackground() {
|
||
// For SVG color modification, check if we have a dark theme
|
||
const rootStyles = window.getComputedStyle(document.documentElement);
|
||
const bgVar = rootStyles.getPropertyValue('--bg').trim();
|
||
|
||
if (bgVar && bgVar.startsWith('#')) {
|
||
const hex = bgVar.slice(1);
|
||
const r = parseInt(hex.substr(0, 2), 16);
|
||
const g = parseInt(hex.substr(2, 2), 16);
|
||
const b = parseInt(hex.substr(4, 2), 16);
|
||
const luminance = (0.299 * r + 0.587 * g + 0.114 * b) / 255;
|
||
return luminance < 0.5;
|
||
}
|
||
|
||
// Fallback: assume dark theme for this app
|
||
return true;
|
||
}
|
||
|
||
saveBookmarkBtn.onclick = async () => {
|
||
const title = titleInput.value.trim();
|
||
const url = urlInput.value.trim();
|
||
let icon = selectedIcon;
|
||
if (!title || !url) return;
|
||
|
||
// Check if user wants to use favicon via checkbox
|
||
const wantFavicon = useFaviconCheckbox.checked;
|
||
|
||
if (wantFavicon) {
|
||
try {
|
||
const faviconUrl = await resolveFavicon(url);
|
||
if (faviconUrl) icon = faviconUrl;
|
||
} catch (e) {
|
||
console.warn('Favicon fetch failed, falling back to icon symbol:', e);
|
||
}
|
||
} else {
|
||
// Use selected icon if available
|
||
const hasSelectedIcon = document.querySelector('.icon-item.selected');
|
||
if (hasSelectedIcon) {
|
||
if (selectedIconInput.dataset.iconSet && selectedIconInput.dataset.iconSet !== 'material') {
|
||
if (selectedIconInput.dataset.dataUrl) {
|
||
icon = selectedIconInput.dataset.dataUrl;
|
||
|
||
// For SVG icons, modify color based on background
|
||
if (icon.startsWith('data:image/svg+xml') && isDarkBackground()) {
|
||
try {
|
||
// Decode the SVG and modify its color
|
||
const svgData = decodeURIComponent(icon.split(',')[1]);
|
||
const modifiedSvg = svgData.replace(/fill="[^"]*"/g, 'fill="white"')
|
||
.replace(/stroke="[^"]*"/g, 'stroke="white"')
|
||
.replace(/<svg([^>]*)>/, '<svg$1 style="color: white;">');
|
||
icon = 'data:image/svg+xml;utf8,' + encodeURIComponent(modifiedSvg);
|
||
} catch (e) {
|
||
console.warn('Failed to modify SVG color:', e);
|
||
}
|
||
}
|
||
} else {
|
||
const def = iconSets[selectedIconInput.dataset.iconSet];
|
||
if (def && def.fetchIcon) {
|
||
const dataUrl = await def.fetchIcon(selectedIcon);
|
||
if (dataUrl) {
|
||
icon = dataUrl;
|
||
|
||
// Apply same color modification for fetched SVGs
|
||
if (icon.startsWith('data:image/svg+xml') && isDarkBackground()) {
|
||
try {
|
||
const svgData = decodeURIComponent(icon.split(',')[1]);
|
||
const modifiedSvg = svgData.replace(/fill="[^"]*"/g, 'fill="white"')
|
||
.replace(/stroke="[^"]*"/g, 'stroke="white"')
|
||
.replace(/<svg([^>]*)>/, '<svg$1 style="color: white;">');
|
||
icon = 'data:image/svg+xml;utf8,' + encodeURIComponent(modifiedSvg);
|
||
} catch (e) {
|
||
console.warn('Failed to modify fetched SVG color:', e);
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
} else {
|
||
// For Material icons, just use the icon name - CSS will handle color
|
||
icon = selectedIcon;
|
||
}
|
||
} else {
|
||
// No icon selected and no favicon requested, use default bookmark icon
|
||
icon = 'bookmark';
|
||
}
|
||
}
|
||
|
||
bookmarks.push({ title, url, icon, iconSet: selectedIconInput.dataset.iconSet || 'material' });
|
||
await saveBookmarks();
|
||
renderBookmarks();
|
||
|
||
titleInput.value = '';
|
||
urlInput.value = '';
|
||
iconFilter.value = '';
|
||
useFaviconCheckbox.checked = false;
|
||
// Clear any selected icon
|
||
const selected = document.querySelector('.icon-item.selected');
|
||
if (selected) selected.classList.remove('selected');
|
||
addPopup.classList.add('hidden');
|
||
};
|
||
|
||
// Disable icon selection when favicon toggle is checked
|
||
useFaviconCheckbox.addEventListener('change', () => {
|
||
const iconItems = document.querySelectorAll('.icon-item');
|
||
if (useFaviconCheckbox.checked) {
|
||
iconItems.forEach(item => {
|
||
item.style.opacity = '0.5';
|
||
item.style.pointerEvents = 'none';
|
||
});
|
||
// Clear any selection
|
||
const selected = document.querySelector('.icon-item.selected');
|
||
if (selected) selected.classList.remove('selected');
|
||
} else {
|
||
iconItems.forEach(item => {
|
||
item.style.opacity = '';
|
||
item.style.pointerEvents = '';
|
||
});
|
||
}
|
||
});
|
||
|
||
cancelBtn.onclick = () => {
|
||
addPopup.classList.add('hidden');
|
||
};
|
||
|
||
// --- Search Engine Dropdown Logic ---
|
||
searchEngineBtn.addEventListener('click', (e) => {
|
||
e.stopPropagation();
|
||
searchEngineDropdown.classList.toggle('hidden');
|
||
});
|
||
|
||
document.addEventListener('click', () => {
|
||
if (!searchEngineDropdown.classList.contains('hidden')) {
|
||
searchEngineDropdown.classList.add('hidden');
|
||
}
|
||
});
|
||
|
||
searchEngineDropdown.addEventListener('click', (e) => {
|
||
const option = e.target.closest('.search-engine-option');
|
||
if (option) {
|
||
selectedSearchEngine = option.dataset.engine;
|
||
const newLogoSrc = option.querySelector('img').src;
|
||
searchEngineLogo.src = newLogoSrc;
|
||
searchEngineDropdown.classList.add('hidden');
|
||
}
|
||
});
|
||
// --- End Search Engine Dropdown Logic ---
|
||
|
||
searchBtn.addEventListener('click', () => {
|
||
const input = searchInput.value.trim();
|
||
const hasProtocol = /^https?:\/\//i.test(input);
|
||
const looksLikeUrl = hasProtocol || /\./.test(input);
|
||
let target;
|
||
if (looksLikeUrl) {
|
||
target = hasProtocol ? input : `https://${input}`;
|
||
} else {
|
||
const searchEngineUrl = searchEngines[selectedSearchEngine];
|
||
target = `${searchEngineUrl}${encodeURIComponent(input)}`;
|
||
}
|
||
// Always send navigation request to host
|
||
if (window.electronAPI && typeof window.electronAPI.sendToHost === 'function') {
|
||
window.electronAPI.sendToHost('navigate', target);
|
||
return;
|
||
}
|
||
// Fallback: post message to embedding page
|
||
if (window.parent && typeof window.parent.postMessage === 'function') {
|
||
window.parent.postMessage({ type: 'navigate', url: target }, '*');
|
||
return;
|
||
}
|
||
});
|
||
|
||
searchInput.addEventListener('keydown', e => {
|
||
if (e.key === 'Enter') searchBtn.click();
|
||
});
|
||
|
||
function buildCategoryNav() {
|
||
iconCategoryNav.innerHTML = '';
|
||
const usedCategories = [...new Set(unifiedCatalog.map(e=>e.category))];
|
||
iconCategories.filter(c=>usedCategories.includes(c.id)).forEach(cat => {
|
||
const btn = document.createElement('button');
|
||
btn.type = 'button';
|
||
btn.className = 'icon-cat-btn';
|
||
|
||
// Create icon element
|
||
const iconSpan = document.createElement('span');
|
||
iconSpan.className = 'material-symbols-outlined';
|
||
iconSpan.textContent = cat.icon;
|
||
|
||
// Create text element
|
||
const textSpan = document.createElement('span');
|
||
textSpan.textContent = cat.label;
|
||
|
||
btn.appendChild(iconSpan);
|
||
btn.appendChild(textSpan);
|
||
|
||
btn.onclick = () => {
|
||
const target = document.getElementById(`section-${cat.id}`);
|
||
if (target) {
|
||
const top = target.offsetTop;
|
||
iconGrid.scrollTo({ top: top - 4, behavior: 'smooth' });
|
||
iconCategoryNav.querySelectorAll('.icon-cat-btn').forEach(b => b.classList.toggle('active', b === btn));
|
||
}
|
||
};
|
||
iconCategoryNav.appendChild(btn);
|
||
});
|
||
setupSectionObserver();
|
||
}
|
||
|
||
function setupSectionObserver() {
|
||
const observer = new IntersectionObserver(entries => {
|
||
entries.forEach(entry => {
|
||
if (entry.isIntersecting) {
|
||
const id = entry.target.id.replace('section-','');
|
||
const cat = iconCategories.find(c=>c.id===id);
|
||
if (!cat) return;
|
||
iconCategoryNav.querySelectorAll('.icon-cat-btn').forEach(b => {
|
||
const isActive = b.querySelector('span:last-child').textContent === cat.label;
|
||
b.classList.toggle('active', isActive);
|
||
});
|
||
}
|
||
});
|
||
}, { root: iconGrid, threshold: 0, rootMargin: '0px 0px -85% 0px' });
|
||
// Observe after grid populated
|
||
const watch = () => {
|
||
iconGrid.querySelectorAll('.icon-section-anchor').forEach(l => observer.observe(l));
|
||
};
|
||
// Re-run after each render
|
||
const origRender = renderIconGrid;
|
||
renderIconGrid = function(filter='') { origRender(filter); watch(); };
|
||
watch();
|
||
}
|
||
|
||
// Load and render bookmarks immediately
|
||
(async () => {
|
||
bookmarks = await loadBookmarks();
|
||
// Wait a bit for styles to load before rendering
|
||
setTimeout(() => {
|
||
renderBookmarks();
|
||
}, 100);
|
||
})();
|
||
|
||
// ---- Greeting / Clock / Weather widgets ----
|
||
function computeGreeting(d = new Date()) {
|
||
const h = d.getHours();
|
||
if (h < 5) return 'Good Night';
|
||
if (h < 12) return 'Good Morning';
|
||
if (h < 18) return 'Good Afternoon';
|
||
return 'Good Evening';
|
||
}
|
||
|
||
function startClock() {
|
||
const tick = () => {
|
||
const now = new Date();
|
||
if (greetingEl) greetingEl.textContent = computeGreeting(now);
|
||
if (clockEl) clockEl.textContent = now.toLocaleTimeString([], { hour12: true });
|
||
};
|
||
tick();
|
||
setInterval(tick, 1000);
|
||
}
|
||
|
||
// Unit helpers
|
||
const WEATHER_UNIT_KEY = 'nebula-weather-unit'; // 'auto' | 'c' | 'f'
|
||
const COUNTRIES_FAHRENHEIT = new Set(['US','BS','KY','LR','PW','FM','MH']);
|
||
function useFahrenheit() {
|
||
try {
|
||
const pref = localStorage.getItem(WEATHER_UNIT_KEY);
|
||
if (pref === 'c') return false; if (pref === 'f') return true;
|
||
} catch {}
|
||
try {
|
||
const loc = Intl.DateTimeFormat().resolvedOptions().locale || navigator.language || '';
|
||
const region = loc.split('-')[1];
|
||
return region ? COUNTRIES_FAHRENHEIT.has(region.toUpperCase()) : false;
|
||
} catch { return false; }
|
||
}
|
||
|
||
function getPosition(timeoutMs = 6000) {
|
||
return new Promise((resolve, reject) => {
|
||
if (!('geolocation' in navigator)) return reject(new Error('geolocation unavailable'));
|
||
const opts = { enableHighAccuracy: false, timeout: timeoutMs, maximumAge: 60_000 };
|
||
navigator.geolocation.getCurrentPosition(
|
||
pos => resolve({ lat: pos.coords.latitude, lon: pos.coords.longitude }),
|
||
err => reject(err),
|
||
opts
|
||
);
|
||
});
|
||
}
|
||
|
||
async function geoByIP() {
|
||
// Try a couple of CORS-friendly IP services
|
||
try {
|
||
const r = await fetch('https://ipapi.co/json/');
|
||
if (r.ok) {
|
||
const j = await r.json();
|
||
if (j && typeof j.latitude === 'number' && typeof j.longitude === 'number') {
|
||
return { lat: j.latitude, lon: j.longitude, city: j.city, country: j.country_code };
|
||
}
|
||
}
|
||
} catch {}
|
||
try {
|
||
const r = await fetch('https://ipwho.is/');
|
||
if (r.ok) {
|
||
const j = await r.json();
|
||
if (j && j.success && j.latitude && j.longitude) {
|
||
return { lat: j.latitude, lon: j.longitude, city: j.city, country: j.country_code };
|
||
}
|
||
}
|
||
} catch {}
|
||
return null;
|
||
}
|
||
|
||
async function fetchOpenMeteo(lat, lon, fahrenheit) {
|
||
const tUnit = fahrenheit ? 'fahrenheit' : 'celsius';
|
||
const wUnit = fahrenheit ? 'mph' : 'kmh';
|
||
const url = `https://api.open-meteo.com/v1/forecast?latitude=${lat}&longitude=${lon}¤t=temperature_2m,weather_code,wind_speed_10m&temperature_unit=${tUnit}&windspeed_unit=${wUnit}&timezone=auto`;
|
||
const r = await fetch(url);
|
||
if (!r.ok) throw new Error('weather fetch failed');
|
||
const j = await r.json();
|
||
return {
|
||
temp: j?.current?.temperature_2m,
|
||
wind: j?.current?.wind_speed_10m,
|
||
code: j?.current?.weather_code,
|
||
tUnit: fahrenheit ? '°F' : '°C',
|
||
wUnit: fahrenheit ? 'mph' : 'km/h',
|
||
};
|
||
}
|
||
|
||
function codeToSummary(code) {
|
||
// Minimal Open‑Meteo WMO code mapping
|
||
const m = new Map([
|
||
[0,'Clear'], [1,'Mainly clear'], [2,'Partly cloudy'], [3,'Cloudy'],
|
||
[45,'Fog'], [48,'Rime fog'], [51,'Drizzle'], [53,'Drizzle'], [55,'Drizzle'],
|
||
[56,'Freezing drizzle'], [57,'Freezing drizzle'],
|
||
[61,'Rain'], [63,'Rain'], [65,'Rain'],
|
||
[66,'Freezing rain'], [67,'Freezing rain'],
|
||
[71,'Snow'], [73,'Snow'], [75,'Snow'], [77,'Snow grains'],
|
||
[80,'Showers'], [81,'Showers'], [82,'Heavy showers'],
|
||
[85,'Snow showers'], [86,'Snow showers'],
|
||
[95,'Thunderstorm'], [96,'Storm'], [99,'Severe storm']
|
||
]);
|
||
return m.get(Number(code)) || 'Weather';
|
||
}
|
||
|
||
async function loadWeather() {
|
||
if (!weatherEl) return;
|
||
// Prefer an app-provided IPC source if available
|
||
try {
|
||
if (window.electronAPI && typeof window.electronAPI.invoke === 'function') {
|
||
const res = await window.electronAPI.invoke('get-weather');
|
||
if (res && (res.temp || res.summary)) {
|
||
const summaryText = res.summary || '';
|
||
const tempText = typeof res.temp === 'number' ? `${Math.round(res.temp)}°` : '';
|
||
const windText = res.wind ? ` · Wind ${Math.round(res.wind)} ${res.wUnit || 'km/h'}` : '';
|
||
weatherEl.textContent = `${tempText}${summaryText ? ' · ' + summaryText : ''}${windText}`.trim() || '—';
|
||
return;
|
||
}
|
||
}
|
||
} catch (e) { console.warn('IPC weather failed', e); }
|
||
|
||
try {
|
||
// 1) Try browser geolocation
|
||
let loc = null;
|
||
try { loc = await getPosition(); } catch {}
|
||
if (!loc) loc = await geoByIP();
|
||
if (!loc) throw new Error('no location');
|
||
const f = useFahrenheit();
|
||
const data = await fetchOpenMeteo(loc.lat, loc.lon, f);
|
||
const summary = codeToSummary(data.code);
|
||
const temp = typeof data.temp === 'number' ? Math.round(data.temp) : data.temp;
|
||
const wind = typeof data.wind === 'number' ? Math.round(data.wind) : data.wind;
|
||
weatherEl.textContent = `${temp}${data.tUnit} · Wind ${wind} ${data.wUnit}`;
|
||
} catch (err) {
|
||
console.warn('Weather fetch failed', err);
|
||
weatherEl.textContent = '—';
|
||
}
|
||
}
|
||
|
||
startClock();
|
||
loadWeather();
|
||
|
||
// Refresh weather when unit preference changes
|
||
window.addEventListener('storage', (e) => {
|
||
if (e && e.key === WEATHER_UNIT_KEY) {
|
||
loadWeather();
|
||
}
|
||
});
|
||
|
||
// ---- Home layout preferences ----
|
||
const HOME_SEARCH_Y_KEY = 'nebula-home-search-y';
|
||
const HOME_BOOKMARKS_Y_KEY = 'nebula-home-bookmarks-y';
|
||
const HOME_GLANCE_CORNER_KEY = 'nebula-home-glance-corner';
|
||
const HOME_GREETING_Y_KEY = 'nebula-home-greeting-y';
|
||
|
||
function applyHomeLayoutPrefs() {
|
||
try {
|
||
const root = document.documentElement;
|
||
const greetY = Number(localStorage.getItem(HOME_GREETING_Y_KEY) || 12);
|
||
const searchY = Number(localStorage.getItem(HOME_SEARCH_Y_KEY) || 22);
|
||
const bmY = Number(localStorage.getItem(HOME_BOOKMARKS_Y_KEY) || 40);
|
||
root.style.setProperty('--home-greeting-y', `${greetY}vh`);
|
||
root.style.setProperty('--home-search-y', `${searchY}vh`);
|
||
root.style.setProperty('--home-bookmarks-y', `${bmY}vh`);
|
||
const corner = localStorage.getItem(HOME_GLANCE_CORNER_KEY) || 'br';
|
||
if (glanceEl) {
|
||
glanceEl.classList.remove('pos-br','pos-bl','pos-tr','pos-tl');
|
||
glanceEl.classList.add(`pos-${corner}`);
|
||
}
|
||
// Position edit controls at the opposite horizontal side of glance (X-only move)
|
||
const oppositeHorizontal = (c) => ({ br:'bl', bl:'br', tr:'tl', tl:'tr' }[c] || 'tr');
|
||
const editCorner = oppositeHorizontal(corner);
|
||
[editBtn, editToolbar].forEach(ctrl => {
|
||
if (!ctrl) return;
|
||
ctrl.classList.remove('pos-br','pos-bl','pos-tr','pos-tl');
|
||
ctrl.classList.add(`pos-${editCorner}`);
|
||
});
|
||
} catch (e) { console.warn('applyHomeLayoutPrefs failed', e); }
|
||
}
|
||
|
||
applyHomeLayoutPrefs();
|
||
|
||
// React to settings updates via storage or host messages
|
||
window.addEventListener('storage', (e) => {
|
||
if (!e) return;
|
||
if ([HOME_SEARCH_Y_KEY, HOME_BOOKMARKS_Y_KEY, HOME_GLANCE_CORNER_KEY].includes(e.key)) {
|
||
applyHomeLayoutPrefs();
|
||
}
|
||
});
|
||
|
||
if (window.electronAPI && typeof window.electronAPI.on === 'function') {
|
||
window.electronAPI.on('settings-update', (payload) => {
|
||
if (!payload) return;
|
||
if (payload.searchY != null) document.documentElement.style.setProperty('--home-search-y', `${payload.searchY}vh`);
|
||
if (payload.bookmarksY != null) document.documentElement.style.setProperty('--home-bookmarks-y', `${payload.bookmarksY}vh`);
|
||
if (payload.glanceCorner && glanceEl) {
|
||
glanceEl.classList.remove('pos-br','pos-bl','pos-tr','pos-tl');
|
||
glanceEl.classList.add(`pos-${payload.glanceCorner}`);
|
||
// Update edit controls to opposite horizontal side (X-only)
|
||
const oppositeHorizontal = (c) => ({ br:'bl', bl:'br', tr:'tl', tl:'tr' }[c] || 'tr');
|
||
const editCorner = oppositeHorizontal(payload.glanceCorner);
|
||
[editBtn, editToolbar].forEach(ctrl => {
|
||
if (!ctrl) return;
|
||
ctrl.classList.remove('pos-br','pos-bl','pos-tr','pos-tl');
|
||
ctrl.classList.add(`pos-${editCorner}`);
|
||
});
|
||
}
|
||
});
|
||
}
|
||
|
||
// ---- Edit mode drag support ----
|
||
let editMode = false;
|
||
let snapshot = null; // stores values before edits
|
||
function setEditMode(on) {
|
||
editMode = !!on;
|
||
document.body.classList.toggle('edit-mode', editMode);
|
||
if (editBtn) editBtn.setAttribute('aria-pressed', String(editMode));
|
||
if (editToolbar) editToolbar.hidden = !editMode;
|
||
if (editMode) {
|
||
// Take a snapshot of current persisted values
|
||
snapshot = {
|
||
greetY: Number(localStorage.getItem('nebula-home-greeting-y') || 12),
|
||
searchY: Number(localStorage.getItem('nebula-home-search-y') || 22),
|
||
bmY: Number(localStorage.getItem('nebula-home-bookmarks-y') || 40),
|
||
corner: localStorage.getItem('nebula-home-glance-corner') || 'br'
|
||
};
|
||
} else {
|
||
snapshot = null;
|
||
}
|
||
}
|
||
|
||
if (editBtn) {
|
||
editBtn.addEventListener('click', () => setEditMode(!editMode));
|
||
}
|
||
|
||
function vhFromPx(px) { return (px / window.innerHeight) * 100; }
|
||
function clamp(n, min, max) { return Math.max(min, Math.min(max, n)); }
|
||
|
||
function makeDragY(el, storageKey, cssVar) {
|
||
if (!el) return;
|
||
let startY = 0; let startTop = 0; let dragging = false;
|
||
const onDown = (ev) => {
|
||
if (!editMode) return; dragging = true;
|
||
startY = (ev.touches ? ev.touches[0].clientY : ev.clientY);
|
||
// current computed var
|
||
const current = Number((getComputedStyle(document.documentElement).getPropertyValue(cssVar) || '0vh').replace('vh',''));
|
||
startTop = isNaN(current) ? 0 : current;
|
||
ev.preventDefault();
|
||
};
|
||
const onMove = (ev) => {
|
||
if (!dragging) return;
|
||
const y = (ev.touches ? ev.touches[0].clientY : ev.clientY);
|
||
const deltaPx = y - startY;
|
||
const deltaVh = vhFromPx(deltaPx);
|
||
const next = clamp(startTop + deltaVh, 0, 90);
|
||
document.documentElement.style.setProperty(cssVar, `${next}vh`);
|
||
};
|
||
const onUp = () => {
|
||
if (!dragging) return; dragging = false;
|
||
// Don't persist here; only on Save. Values still applied via CSS var.
|
||
};
|
||
el.addEventListener('mousedown', onDown);
|
||
el.addEventListener('touchstart', onDown, { passive:false });
|
||
window.addEventListener('mousemove', onMove);
|
||
window.addEventListener('touchmove', onMove, { passive:false });
|
||
window.addEventListener('mouseup', onUp);
|
||
window.addEventListener('touchend', onUp);
|
||
}
|
||
|
||
function makeDragGlance(el) {
|
||
if (!el) return;
|
||
let dragging = false; let start;
|
||
const onDown = (ev) => {
|
||
if (!editMode) return; dragging = true; el.classList.add('dragging');
|
||
const p = ev.touches?ev.touches[0]:ev; start = { x:p.clientX, y:p.clientY };
|
||
// reset any prior drag offsets
|
||
el.style.setProperty('--drag-x','0px'); el.style.setProperty('--drag-y','0px');
|
||
ev.preventDefault();
|
||
};
|
||
const onMove = (ev) => {
|
||
if (!dragging) return; const p = ev.touches?ev.touches[0]:ev;
|
||
const dx = p.clientX - start.x; const dy = p.clientY - start.y;
|
||
el.style.setProperty('--drag-x', `${dx}px`);
|
||
el.style.setProperty('--drag-y', `${dy}px`);
|
||
};
|
||
const onUp = (ev) => {
|
||
if (!dragging) return; dragging = false; el.classList.remove('dragging');
|
||
el.style.removeProperty('--drag-x'); el.style.removeProperty('--drag-y');
|
||
const p = ev.changedTouches?ev.changedTouches[0]:ev;
|
||
const x = p.clientX; const y = p.clientY;
|
||
// snap to nearest corner
|
||
const left = x < window.innerWidth/2;
|
||
const top = y < window.innerHeight/2;
|
||
const corner = top ? (left ? 'tl' : 'tr') : (left ? 'bl' : 'br');
|
||
// Only store corner on Save; temporarily apply class for preview
|
||
if (glanceEl) {
|
||
glanceEl.classList.remove('pos-br','pos-bl','pos-tr','pos-tl');
|
||
glanceEl.classList.add(`pos-${corner}`);
|
||
// Stash pending corner choice on the element during edit mode
|
||
glanceEl.dataset.pendingCorner = corner;
|
||
}
|
||
// Also move edit controls to opposite corner during preview
|
||
const opposite = (c) => ({ br:'tl', bl:'tr', tr:'bl', tl:'br' }[c] || 'tl');
|
||
const editCorner = opposite(corner);
|
||
[editBtn, editToolbar].forEach(ctrl => {
|
||
if (!ctrl) return;
|
||
ctrl.classList.remove('pos-br','pos-bl','pos-tr','pos-tl');
|
||
ctrl.classList.add(`pos-${editCorner}`);
|
||
});
|
||
};
|
||
el.addEventListener('mousedown', onDown);
|
||
el.addEventListener('touchstart', onDown, { passive:false });
|
||
window.addEventListener('mousemove', onMove);
|
||
window.addEventListener('touchmove', onMove, { passive:false });
|
||
window.addEventListener('mouseup', onUp);
|
||
window.addEventListener('touchend', onUp);
|
||
}
|
||
|
||
makeDragY(searchContainerEl, 'nebula-home-search-y', '--home-search-y');
|
||
makeDragY(topSitesEl, 'nebula-home-bookmarks-y', '--home-bookmarks-y');
|
||
makeDragGlance(glanceEl);
|
||
// Restore greeting to Y-only drag
|
||
makeDragY(greetingTitleEl, 'nebula-home-greeting-y', '--home-greeting-y');
|
||
|
||
// Save/Cancel handlers
|
||
if (saveEditBtn) saveEditBtn.addEventListener('click', () => {
|
||
// Persist current CSS variable values and pending corner
|
||
const rootStyle = getComputedStyle(document.documentElement);
|
||
const getVh = (v) => Math.round(Number((v || '0vh').replace('vh','')));
|
||
const gy = getVh(rootStyle.getPropertyValue('--home-greeting-y'));
|
||
const sy = getVh(rootStyle.getPropertyValue('--home-search-y'));
|
||
const by = getVh(rootStyle.getPropertyValue('--home-bookmarks-y'));
|
||
try {
|
||
localStorage.setItem('nebula-home-greeting-y', String(gy));
|
||
localStorage.setItem('nebula-home-search-y', String(sy));
|
||
localStorage.setItem('nebula-home-bookmarks-y', String(by));
|
||
} catch {}
|
||
const corner = glanceEl?.dataset?.pendingCorner || localStorage.getItem(HOME_GLANCE_CORNER_KEY) || 'br';
|
||
try { localStorage.setItem(HOME_GLANCE_CORNER_KEY, corner); } catch {}
|
||
if (glanceEl) delete glanceEl.dataset.pendingCorner;
|
||
setEditMode(false);
|
||
});
|
||
|
||
if (cancelEditBtn) cancelEditBtn.addEventListener('click', () => {
|
||
// Revert CSS vars and glance corner to snapshot
|
||
if (snapshot) {
|
||
document.documentElement.style.setProperty('--home-greeting-y', `${snapshot.greetY}vh`);
|
||
document.documentElement.style.setProperty('--home-search-y', `${snapshot.searchY}vh`);
|
||
document.documentElement.style.setProperty('--home-bookmarks-y', `${snapshot.bmY}vh`);
|
||
if (glanceEl) {
|
||
glanceEl.classList.remove('pos-br','pos-bl','pos-tr','pos-tl');
|
||
glanceEl.classList.add(`pos-${snapshot.corner}`);
|
||
delete glanceEl.dataset.pendingCorner;
|
||
}
|
||
} else {
|
||
applyHomeLayoutPrefs();
|
||
}
|
||
setEditMode(false);
|
||
});
|