diff --git a/bookmarks.backup.json b/bookmarks.backup.json index c9c513b..15807e2 100644 --- a/bookmarks.backup.json +++ b/bookmarks.backup.json @@ -1,3 +1,8 @@ [ - + { + "title": "Apple", + "url": "apple.com", + "icon": "data:image/svg+xml;utf8,%3Csvg%20role%3D%22img%22%20viewBox%3D%220%200%2024%2024%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20style%3D%22color%3A%20white%3B%22%3E%3Ctitle%3EApple%3C%2Ftitle%3E%3Cpath%20d%3D%22M12.152%206.896c-.948%200-2.415-1.078-3.96-1.04-2.04.027-3.91%201.183-4.961%203.014-2.117%203.675-.546%209.103%201.519%2012.09%201.013%201.454%202.208%203.09%203.792%203.039%201.52-.065%202.09-.987%203.935-.987%201.831%200%202.35.987%203.96.948%201.637-.026%202.676-1.48%203.676-2.948%201.156-1.688%201.636-3.325%201.662-3.415-.039-.013-3.182-1.221-3.22-4.857-.026-3.04%202.48-4.494%202.597-4.559-1.429-2.09-3.623-2.324-4.39-2.376-2-.156-3.675%201.09-4.61%201.09zM15.53%203.83c.843-1.012%201.4-2.427%201.245-3.83-1.207.052-2.662.805-3.532%201.818-.78.896-1.454%202.338-1.273%203.714%201.338.104%202.715-.688%203.559-1.701%22%2F%3E%3C%2Fsvg%3E", + "iconSet": "simple" + } ] \ No newline at end of file diff --git a/bookmarks.json b/bookmarks.json index c44dc44..0637a08 100644 --- a/bookmarks.json +++ b/bookmarks.json @@ -1,3 +1 @@ -[ - -] \ No newline at end of file +[] \ No newline at end of file diff --git a/renderer/home.css b/renderer/home.css index 3dbad4d..93627da 100644 --- a/renderer/home.css +++ b/renderer/home.css @@ -227,6 +227,51 @@ body, html { color: var(--accent); } +/* Favicon image in bookmark tile */ +.bookmark-favicon { + width: 28px; + height: 28px; + object-fit: contain; + margin-bottom: 0.25rem; + image-rendering: -webkit-optimize-contrast; + filter: drop-shadow(0 0 2px rgba(0,0,0,0.4)); +} + +/* SVG icons in picker grid */ +.icon-item .grid-svg { + width: 24px; + height: 24px; + display: block; + pointer-events: none; +} + +/* Icon category navigation */ +.icon-categories-bar { + display: flex; + flex-wrap: wrap; + gap: 0.4rem; + margin: 0.25rem 0 0.75rem; +} +.icon-picker-layout { display:flex; gap:1rem; align-items:stretch; background:#f6f7f9; border:1px solid #e2e5ea; border-radius:14px; padding:0.85rem 0.85rem 0.85rem 0.75rem; box-shadow:inset 0 0 0 1px #ffffff, 0 2px 4px rgba(0,0,0,0.05); min-height:280px; max-height:320px; overflow:hidden; } +.icon-side-nav { width:200px; display:flex; flex-direction:column; gap:0.3rem; overflow-y:auto; padding:0.3rem; background:linear-gradient(180deg,#fff,#f4f5f7); border:1px solid #d9dde2; border-radius:10px; max-height:100%; } +.icon-main { flex:1; min-width:0; display:flex; flex-direction:column; } +.icon-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:0.5rem; } +.icon-filter-label { font-size:0.875rem; color:#555; font-weight:600; } +.favicon-toggle { display:flex; align-items:center; gap:0.4rem; } +.favicon-checkbox { width:16px; height:16px; accent-color:var(--accent); } +.favicon-label { font-size:0.75rem; color:#666; cursor:pointer; user-select:none; } +.icon-filter { margin-bottom:0.5rem; background:#fff; border:1px solid #d4d9df; border-radius:8px; padding:0.5rem 0.7rem; font-size:0.8rem; } +.icon-filter:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 2px rgba(123,46,255,0.25); } +.icon-cat-btn { width:100%; text-align:left; padding:0.55rem 0.65rem 0.55rem 0.55rem; font-size:0.7rem; font-weight:600; letter-spacing:.5px; background:transparent; border:1px solid transparent; border-radius:8px; cursor:pointer; color:#4a4f55; display:flex; align-items:center; gap:0.55rem; transition: background .18s, color .18s, border-color .2s; position:relative; } +.icon-cat-btn .material-symbols-outlined { font-size:18px; width:30px; height:30px; background:#e9edf1; border:1px solid #d4d9df; border-radius:8px; flex-shrink:0; display:flex; align-items:center; justify-content:center; box-shadow:0 0 0 1px #fff inset; } +.icon-cat-btn::before { display:none; } +.icon-cat-btn:hover { background:#eef2f6; } +.icon-cat-btn.active { background:linear-gradient(135deg,var(--accent),var(--primary)); color:#fff; border-color:rgba(255,255,255,0.35); box-shadow:0 2px 6px -2px rgba(0,0,0,0.35); } +.icon-cat-btn.active .material-symbols-outlined { background:rgba(255,255,255,0.22); border-color:rgba(255,255,255,0.4); color:#fff; } + +.icon-section-label { display:none; } +.icon-section-anchor { height:1px; width:100%; margin-top:4px; } + .bookmark-title { font-size: 0.8rem; white-space: nowrap; @@ -245,6 +290,18 @@ body, html { cursor: pointer; } +/* Dynamic bookmark icon colors based on theme */ +.bookmark .material-symbols-outlined { + color: var(--text, #E0E0E0) !important; + transition: color 0.2s ease; +} + +/* Ensure dark theme compatibility - fallback rules */ +body[data-theme="dark"] .bookmark .material-symbols-outlined, +.bookmark .material-symbols-outlined[style*="color: white"] { + color: white !important; +} + /* Add button style */ .add-bookmark { display: flex; @@ -286,29 +343,10 @@ body, html { } /* Popup inner as white Material card */ -.popup-inner { - display: flex; - flex-direction: column; - gap: 1.5rem; - color: #222222; - min-width: 320px; - /* existing styling */ - background: #ffffff; - border-radius: 8px; - box-shadow: 0 8px 24px rgba(0,0,0,0.3); - padding: 1.5rem; - transition: transform 0.3s ease-out, opacity 0.3s ease-out; - transform: translateY(-10px) scale(0.95); - opacity: 0; - width: 500px; /* make popup wider */ - max-width: 90vw; /* keep it responsive on small screens */ -} +.popup-inner { display:flex; flex-direction:column; gap:1.1rem; color:#222; min-width:400px; background:#ffffff; border-radius:16px; box-shadow:0 12px 40px -8px rgba(0,0,0,0.35), 0 0 0 1px rgba(0,0,0,0.06); padding:1.5rem 1.5rem 1.25rem; transition:transform .35s cubic-bezier(.16,.84,.44,1), opacity .35s; transform:translateY(14px) scale(.94); opacity:0; width:760px; max-width:90vw; max-height:85vh; overflow:hidden; } /* animate in when not hidden */ -.popup:not(.hidden) .popup-inner { - transform: translateY(0) scale(1); - opacity: 1; -} +.popup:not(.hidden) .popup-inner { transform:translateY(0) scale(1); opacity:1; } /* dialog title */ .popup-inner h2 { @@ -347,34 +385,7 @@ body, html { box-shadow: 0 0 0 2px rgba(123,46,255,0.2); } -/* icon-grid container */ -.icon-grid { - display: grid; - grid-template-columns: repeat(auto-fill, minmax(40px, 1fr)); - gap: 8px; - max-height: 200px; - overflow-y: auto; - margin: 0 -0.5rem 1rem; - padding: 0.5rem; - background: #fafafa; - border: 1px solid #eee; - border-radius: 4px; -} - -/* individual icon items */ -.icon-item { - background: #ffffff; - border: 1px solid #ddd; - box-shadow: 0 1px 2px rgba(0,0,0,0.05); - border-radius: 4px; - cursor: pointer; - padding: 4px; - text-align: center; -} - -.icon-item:hover { - background: #f0f0f0; -} +/* Removed earlier duplicate icon-grid + icon-item block (consolidated below) */ /* action buttons container */ .popup-buttons { @@ -422,26 +433,21 @@ body, html { --text: #E0E0E0; } -/* Icon grid styling */ -.icon-grid { - display: grid; - grid-template-columns: repeat(auto-fill, minmax(40px, 1fr)); - gap: 8px; - max-height: 200px; - overflow-y: auto; - margin-bottom: 8px; -} -.icon-item { - cursor: pointer; - padding: 4px; - border: 1px solid transparent; - border-radius: 4px; - text-align: center; -} -.icon-item:hover { - background: rgba(0, 0, 0, 0.1); -} -.icon-item.selected { - border-color: #0078d4; - background: rgba(0, 120, 212, 0.1); +/* Unified icon grid styling */ +.icon-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(42px,1fr)); gap:5px; flex:1 1 auto; min-height:160px; max-height:260px; overflow-y:auto; overflow-x:hidden; padding:0.6rem 0.6rem 0.7rem; background:rgba(255,255,255,0.45); backdrop-filter:blur(6px); border:1px solid rgba(0,0,0,0.08); border-radius:10px; position:relative; scroll-behavior:smooth; } +.icon-main { flex:1; min-height:300px; } +.icon-item { cursor:pointer; padding:6px; border:1px solid rgba(255,255,255,0.06); border-radius:10px; text-align:center; display:flex; align-items:center; justify-content:center; background:rgba(255,255,255,0.05); transition: background .15s, transform .15s, box-shadow .2s; font-size:0.65rem; line-height:1; font-weight:500; position:relative; } +.icon-item::after { content:""; position:absolute; inset:0; border-radius:inherit; box-shadow:0 0 0 0 rgba(0,0,0,0); transition:box-shadow .25s; } +.icon-item:hover { background:rgba(255,255,255,0.12); } +.icon-item:active { transform:scale(.92); } +.icon-item.selected { background:linear-gradient(135deg,var(--accent),var(--primary)); color:#fff; border-color:transparent; box-shadow:0 4px 10px -3px rgba(0,0,0,.6); } +.icon-item.selected::after { box-shadow:0 0 0 2px rgba(255,255,255,0.65); } + +/* Icon set selector row */ +.icon-set-row { + display: flex; + align-items: center; + gap: 0.5rem; + margin-top: 0.75rem; } +.icon-section-label { display:none; } diff --git a/renderer/home.html b/renderer/home.html index b7c6125..1532689 100644 --- a/renderer/home.html +++ b/renderer/home.html @@ -7,6 +7,8 @@ + +
@@ -59,11 +61,24 @@ - - -
- +
+ +
+
+ +
+ + +
+
+ +
+ +
+
diff --git a/renderer/home.js b/renderer/home.js index ef5c738..0dcd42f 100644 --- a/renderer/home.js +++ b/renderer/home.js @@ -1,4 +1,5 @@ import { icons as initialIcons, fetchAllIcons } from './icons.js'; +import { iconSets } from './iconSets.js'; const bookmarkList = document.getElementById('bookmarkList'); const titleInput = document.getElementById('titleInput'); @@ -14,8 +15,28 @@ 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'); 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=', @@ -66,10 +87,26 @@ function renderBookmarks() { box.className = 'bookmark'; // prepend icon - const iconEl = document.createElement('span'); - iconEl.className = 'material-symbols-outlined'; - iconEl.textContent = b.icon || 'bookmark'; - box.appendChild(iconEl); + 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'; @@ -115,63 +152,251 @@ function renderBookmarks() { // draw the icon‐grid, filtering by the search term function renderIconGrid(filter = '') { + const f = filter.toLowerCase(); iconGrid.innerHTML = ''; - availableIcons - .filter(name => name.includes(filter)) - .forEach(name => { - const span = document.createElement('span'); - span.className = 'material-symbols-outlined icon-item'; - span.textContent = name; - span.onclick = () => { - const currentSelected = iconGrid.querySelector('.icon-item.selected'); - if (currentSelected) { - currentSelected.classList.remove('selected'); + 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.classList.add('selected'); - selectedIcon = name; - selectedIconInput.value = name; - }; - iconGrid.appendChild(span); - }); - const first = iconGrid.querySelector('.icon-item'); - if (first) first.click(); + })(); + } + 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().toLowerCase()) -); +iconFilter.addEventListener('input', () => renderIconGrid(iconFilter.value.trim())); // initial render renderIconGrid(); // Asynchronously fetch all icons and update the grid -(async () => { - try { - const allIcons = await fetchAllIcons(); - availableIcons = allIcons; - // Re-render with the full list, preserving any filter text - renderIconGrid(iconFilter.value.trim().toLowerCase()); - } catch (error) { - console.error('Failed to fetch all icons:', error); +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(); - const icon = selectedIcon; + let icon = selectedIcon; if (!title || !url) return; - bookmarks.push({ title, url, icon }); + // 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(/]*)>/, ''); + 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(/]*)>/, ''); + 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'); }; @@ -226,8 +451,68 @@ 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(); - renderBookmarks(); + // Wait a bit for styles to load before rendering + setTimeout(() => { + renderBookmarks(); + }, 100); })(); diff --git a/renderer/iconSets.js b/renderer/iconSets.js new file mode 100644 index 0000000..302c032 --- /dev/null +++ b/renderer/iconSets.js @@ -0,0 +1,148 @@ +// Unified icon set loaders with graceful fallbacks. +// Each loader returns an array of string icon names (NOT SVG markup) suitable for name-based selection. +// Some libraries don't have an easy metadata endpoint; we attempt a fetch and fall back to a small curated subset. + +import { fetchAllIcons as fetchMaterialIcons, icons as materialFallback } from './icons.js'; + +async function attemptJSON(url, transform) { + try { + const res = await fetch(url, { cache: 'no-store' }); + if (!res.ok) throw new Error(res.status + ' ' + res.statusText); + const data = await res.json(); + return transform ? transform(data) : data; + } catch (e) { + console.warn('[IconSets] Failed to fetch', url, e); + return null; + } +} + +// --- SVG helpers --- +async function attemptText(url) { + try { + const res = await fetch(url, { cache: 'force-cache' }); + if (!res.ok) throw new Error(res.status + ' ' + res.statusText); + const txt = await res.text(); + if (!/^$/i.test(txt.trim())) throw new Error('Not SVG'); + return txt; + } catch { + return null; + } +} +function svgToDataUrl(svg) { + return 'data:image/svg+xml;utf8,' + encodeURIComponent(svg.replace(//gi, '')); +} + +const staticFallbacks = { + lucide: ['activity','airplay','alarm-clock','align-center','anchor','apple','archive','arrow-big-up','at-sign','award','battery','bell','bluetooth','book','bookmark','briefcase','calendar','camera','cast','check','chevron-down','chrome','cloud','code','command','compass','cpu','database','download','edit','external-link','eye','file','folder','gamepad','globe','heart','help-circle','home','image','info','keyboard','layers','link','list','lock','mail','map','menu','mic','moon','music','package','pie-chart','play','plus','pocket','power','refresh-ccw','rss','save','scissors','search','settings','share','shield','smartphone','speaker','star','sun','tablet','tag','terminal','thumbs-up','trash','tv','twitter','upload','user','video','wifi','x','zap'], + tabler: ['activity','alarm','affiliate','anchor','api','app-window','apple','archive','armchair','arrow-down','at','award','backspace','ballon','battery','bell','bluetooth','bolt','book','bookmark','briefcase','browser','bug','building','calendar','camera','car','chart-area','chart-bar','chart-pie','chart-scatter','check','chevron-down','cloud','code','coffee','color-swatch','command','compass','cpu','credit-card','dashboard','database','device-desktop','device-mobile','dice','dna','download','drop','edit','file','filter','flag','flame','folder','gift','globe','grid','hash','headphones','heart','help','home','id','inbox','info-circle','key','keyboard','language','layers','layout','layout-grid','letter-a','link','lock','login','logout','mail','map','menu','message','microphone','mood-happy','moon','music','news','note','package','password','phone','photo','player-play','plug','plus','power','printer','puzzle','refresh','rocket','route','rss','school','search','server','settings','share','shield','smart-home','snowflake','sparkles','star','sun','switch','tag','thumb-up','tool','trash','trophy','typography','upload','user','video','wifi','world','x'], + phosphor: ['activity','airplane','anchor','apple-logo','archive','arrow-down','arrow-up','at','bag','bell','book','bookmark','bounding-box','briefcase','browser','bug','calendar','camera','car','check','clipboard','cloud','code','command','compass','cpu','credit-card','database','device-mobile','device-tablet','door','download','drop','envelope','eye','eyedropper','file','film-strip','flag','flame','folder','funnel','game-controller','gear','globe','hand','hash','headphones','heart','house','image','info','key','keyboard','leaf','link','lock','magnet','magnifying-glass','map-pin','microphone','moon','music-note','note','nut','package','paper-plane','paperclip','path','pen','phone','plug','plus','power','printer','question','rocket','rss','scissors','share','shield','shopping-cart','sketch-logo','smiley','sparkle','speaker-high','star','sun','swatches','tag','terminal','thumbs-up','toolbox','trash','trophy','tv','user','users','video-camera','wifi-high','x','yarn','youtube-logo','zap'], + remix: ['add','alarm','alert','anchor','apps','archive','arrow-down','arrow-right','arrow-up','at','award','bank','bar-chart','battery','bell','bluetooth','book','bookmark','briefcase','bug','building','calendar','camera','car','chat','chrome','clipboard','cloud','code','command','compass','copyleft','copyright','cpu','dashboard','database','delete-bin','device','dice','download','dribbble','drive','earth','edge','edit','facebook','file','filter','fire','flag','folder','gamepad','gift','github','gitlab','global','google','group','hard-drive','heart','home','image','inbox','instagram','keyboard','keynote','layout','links','list','lock','login','logout','mac','mail','map','menu','message','mic','moon','music','notification','paragraph','pause','phone','picture-in-picture','play','plug','price-tag','print','qr-code','question','reddit','refresh','restart','rocket','rss','scales','search','secure-payment','send','settings','share','shield','shopping-bag','slack','smartphone','sound-module','star','sun','t-box','tablet','tag','telegram','thumb-up','timer','tool','trophy','twitter','tv','upload','usb','user','video','visa','voicemail','volume-up','wallet','wifi','windows','xbox','youtube','zoom-in'], + bootstrap: ['alarm','android','apple','archive','arrow-down','arrow-up','arrow-left','arrow-right','at','award','backspace','badge-4k','bag','bank','bar-chart','battery','bell','bluetooth','book','bookmark','box','briefcase','brush','bug','calendar','camera','card-image','card-list','cart','chat','check','chevron-down','circle','cloud','code','command','compass','cpu','credit-card','database','device-hdd','device-ssd','display','download','droplet','earbuds','emoji-smile','envelope','exclamation','eye','facebook','file','filter','flag','folder','funnel','gear','gift','globe','google','graph-up','grid','hammer','hand-thumbs-up','hash','headphones','heart','house','image','info','instagram','joystick','keyboard','laptop','layers','layout-split','lightning','link','lock','mailbox','map','megaphone','menu-button','mic','moon','music-note','nut','palette','paperclip','patch-check','pen','pencil','people','phone','pin','play','plug','plus','power','printer','qr-code','question','rocket','rss','save','scissors','search','server','share','shield','shop','skip-forward','slack','speaker','speedometer','star','sun','tablet','tag','terminal','tools','trash','trophy','truck','twitch','twitter','type','ui-checks','upload','usb','vector-pen','wallet','whatsapp','wifi','windows','wrench','x','youtube'], + heroicons: ['academic-cap','adjustments-horizontal','adjustments-vertical','archive-box','arrow-down','arrow-up','arrow-right','arrow-left','at-symbol','backspace','banknotes','bars-2','bars-3','battery-100','beaker','bell','bookmark','briefcase','cake','calendar','camera','chart-bar','chat-bubble-bottom-center','chat-bubble-left','check','chevron-down','chip','circle-stack','cloud','code-bracket','cog','command-line','computer-desktop','cpu-chip','cube','currency-dollar','device-phone-mobile','device-tablet','document','document-text','ellipsis-horizontal','envelope','exclamation-circle','eye','film','finger-print','fire','flag','folder','gift','globe-alt','hand-thumb-up','heart','home','identification','inbox','information-circle','key','language','lifebuoy','light-bulb','link','lock-closed','magnifying-glass','map','megaphone','microphone','moon','musical-note','newspaper','paint-brush','paper-airplane','paper-clip','phone','photo','play','plus','power','printer','puzzle-piece','qr-code','question-mark-circle','rocket-launch','rss','scale','scissors','server','share','shield-check','sparkles','square-3-stack-3d','star','sun','swatch','tag','trophy','tv','user','users','video-camera','wallet','wifi','wrench','x-mark'], + feather: ['activity','airplay','alert-circle','alert-triangle','anchor','aperture','archive','at-sign','award','bar-chart','battery','bell','bluetooth','book','bookmark','box','briefcase','calendar','camera','cast','check','chevron-down','chrome','circle','clipboard','cloud','code','command','compass','cpu','database','download','droplet','edit','eye','facebook','file','film','filter','flag','folder','gift','git-branch','git-commit','git-merge','github','gitlab','globe','grid','hash','headphones','heart','help-circle','home','image','info','instagram','key','layers','layout','link','lock','mail','map','menu','mic','monitor','moon','music','package','paperclip','pause','pen-tool','phone','play','plus','pocket','power','printer','radio','refresh-ccw','refresh-cw','repeat','rewind','rss','save','scissors','search','send','server','settings','share','shield','shopping-bag','shopping-cart','shuffle','slack','smartphone','speaker','square','star','sun','tablet','tag','target','terminal','thumbs-up','tool','trash','trello','trending-up','triangle','truck','tv','twitter','type','umbrella','unlock','upload','user','users','video','voicemail','volume','watch','wifi','wind','x','zap'], + simple: ['github','gitlab','google','youtube','twitter','facebook','twitch','discord','spotify','apple','microsoft','android','linux','ubuntu','x','linkedin','npm','pypi','docker','kubernetes','aws','azure','gcp','cloudflare','figma','notion','slack','whatsapp','meta','paypal','stripe','reddit','snapchat','steam','xbox','playstation','nintendo','instagram','pinterest','soundcloud','openai','vercel','netlify','digitalocean'], + radix: ['activity-log','airplane','backpack','bell','bookmark','calendar','camera','card-stack','caret-down','caret-up','chat-bubble','chat-dots','check','chevron-down','chevron-left','chevron-right','chevron-up','clock','code','component-1','component-2','cookie','copy','cube','discord-logo','double-arrow-down','double-arrow-left','double-arrow-right','double-arrow-up','drag-handle-dots-2','envelope-closed','envelope-open','exclamation-triangle','external-link','eye-open','file','file-text','file-plus','gear','globe','heart','home','image','info-circled','keyboard','laptop','layers','link-1','link-2','lock-closed','magic-wand','magnifying-glass','moon','notebook','open-in-new-window','paper-plane','pencil-1','person','pie-chart','pin-left','pin-right','plus','question-mark-circled','reload','rocket','rows','scissors','share-1','share-2','shield','speaker-loud','star','sun','target','trash','upload','video','zoom-in','zoom-out'] +}; + +export const iconSets = { + material: { + label: 'Material', + loader: async () => { try { return await fetchMaterialIcons(); } catch { return materialFallback; } }, + fetchIcon: async () => null + }, + lucide: { + label: 'Lucide', + loader: async () => { + const data = await attemptJSON('https://cdn.jsdelivr.net/npm/lucide@latest/dist/metadata.json', d => Object.keys(d)); + return data && data.length ? data : staticFallbacks.lucide; + }, + fetchIcon: async (name) => { + const svg = await attemptText(`https://cdn.jsdelivr.net/npm/lucide-static@latest/icons/${name}.svg`); + return svg ? svgToDataUrl(svg) : null; + } + }, + tabler: { + label: 'Tabler', + loader: async () => { + const data = await attemptJSON('https://cdn.jsdelivr.net/gh/tabler/tabler-icons@latest/icons.json', d => d.map(o => o.name)); + return data && data.length ? data : staticFallbacks.tabler; + }, + fetchIcon: async (name) => { + const urls = [ + `https://cdn.jsdelivr.net/npm/@tabler/icons@latest/icons/outline/${name}.svg`, + `https://cdn.jsdelivr.net/npm/@tabler/icons@latest/icons/filled/${name}.svg` + ]; + for (const u of urls) { const svg = await attemptText(u); if (svg) return svgToDataUrl(svg); } + return null; + } + }, + phosphor: { + label: 'Phosphor', + loader: async () => staticFallbacks.phosphor, + fetchIcon: async (name) => { + const styles = ['regular','bold','duotone','fill','light','thin']; + for (const style of styles) { + const svg = await attemptText(`https://cdn.jsdelivr.net/npm/@phosphor-icons/core@2/assets/${style}/${name}.svg`); + if (svg) return svgToDataUrl(svg); + } + return null; + } + }, + remix: { + label: 'Remix', + loader: async () => staticFallbacks.remix, + fetchIcon: async () => null, + fontClass: (name) => `ri-${name}-line` // use line style font sprite + }, + bootstrap: { + label: 'Bootstrap', + loader: async () => staticFallbacks.bootstrap, + fetchIcon: async (name) => { + const svg = await attemptText(`https://cdn.jsdelivr.net/npm/bootstrap-icons@latest/icons/${name}.svg`); + return svg ? svgToDataUrl(svg) : null; + }, + fontClass: (name) => `bi-${name}` + }, + heroicons: { + label: 'Heroicons', + loader: async () => staticFallbacks.heroicons, + fetchIcon: async (name) => { + const urls = [ + `https://cdn.jsdelivr.net/npm/heroicons@2/24/outline/${name}.svg`, + `https://cdn.jsdelivr.net/npm/heroicons@2/24/solid/${name}.svg` + ]; + for (const u of urls) { const svg = await attemptText(u); if (svg) return svgToDataUrl(svg); } + return null; + } + }, + feather: { + label: 'Feather', + loader: async () => staticFallbacks.feather, + fetchIcon: async (name) => { + const svg = await attemptText(`https://cdn.jsdelivr.net/npm/feather-icons@4/dist/icons/${name}.svg`); + return svg ? svgToDataUrl(svg) : null; + }, + fontClass: (name) => `icon-${name}` // fallback for display + }, + simple: { + label: 'Simple Icons', + loader: async () => staticFallbacks.simple, + fetchIcon: async (name) => { + const svg = await attemptText(`https://cdn.jsdelivr.net/npm/simple-icons@latest/icons/${name}.svg`); + return svg ? svgToDataUrl(svg) : null; + } + }, + radix: { + label: 'Radix', + loader: async () => staticFallbacks.radix, + fetchIcon: async (name) => { + const svg = await attemptText(`https://cdn.jsdelivr.net/npm/@radix-ui/icons@latest/icons/${name}.svg`); + return svg ? svgToDataUrl(svg) : null; + } + } +}; + +// Utility: get list of set keys + label for UI +export function listIconSets() { + return Object.entries(iconSets).map(([key, val]) => ({ key, label: val.label })); +} diff --git a/site-history.json b/site-history.json index c44dc44..e458261 100644 --- a/site-history.json +++ b/site-history.json @@ -1,3 +1,4 @@ [ - + "https://discord.com/", + "https://nebula.zambazosmedia.group/" ] \ No newline at end of file