nebula-project/NebulaBrowser
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

Add multi-library icon picker and favicon support

Browse Source 
Introduces a unified icon picker supporting Material, Lucide, Tabler, Phosphor, Remix, Bootstrap, Heroicons, Feather, Simple Icons, and Radix, with category navigation and search. Adds option to use site favicon for bookmarks, updates bookmark rendering to support SVG and image icons, and refines popup and icon grid UI. Includes new iconSets.js for icon set management and updates CSS/HTML for improved icon selection experience.
This commit is contained in:
Andrew Zambazos
2025-08-14 11:57:32 +12:00
parent da7f871d69
commit f54ed2164d
7 changed files with 576 additions and 118 deletions
Download Patch File Download Diff File Expand all files Collapse all files
renderer/home.html
+20 -5
View File
@@ -7,6 +7,8 @@
<link rel="stylesheet" href="home.css">
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined"
rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/remixicon@3/fonts/remixicon.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1/font/bootstrap-icons.css" rel="stylesheet">
</head>
<body>
<div class="home-container">
@@ -59,11 +61,24 @@
<input type="url" id="urlInput" placeholder="https://example.com">
<!-- Icon picker -->
<label for="iconFilter">Icon</label>
<input type="text" id="iconFilter" class="icon-filter"
placeholder="Search for icon or enter emoji">
<div id="iconGrid" class="icon-grid"></div>
<input type="hidden" id="selectedIcon">
<div class="icon-picker-layout">
<nav class="icon-side-nav" id="iconCategoryNav" aria-label="Icon Categories">
<!-- Category nav buttons injected here -->
</nav>
<div class="icon-main">
<div class="icon-header">
<label for="iconFilter" class="icon-filter-label">Icon</label>
<div class="favicon-toggle">
<input type="checkbox" id="useFavicon" class="favicon-checkbox">
<label for="useFavicon" class="favicon-label">Use site favicon</label>
</div>
</div>
<input type="text" id="iconFilter" class="icon-filter"
placeholder="Search for icon, enter emoji, or type 'favicon'">
<div id="iconGrid" class="icon-grid" tabindex="0" aria-label="Icon selection list"></div>
<input type="hidden" id="selectedIcon">
</div>
</div>
<!-- action buttons -->
<div class="popup-buttons">