Skip to content
This repository was archived by the owner on Jul 28, 2026. It is now read-only.

Commit ba73b20

Browse files
committed
feat: add SVG icon picker for nest/egg logos using Simple Icons
- Add toggle between Logo URL and Choose SVG in nest edit modal and egg settings - Add searchable SVG picker grid with ~130 curated tech/gaming brand icons - Store SVG icons as si:iconname prefix in existing logo field (no DB changes) - Update admin tables, nest wizard, and egg wizard to render SVG icons - Icons loaded from Simple Icons CDN (cdn.simpleicons.org)
1 parent 454d9a8 commit ba73b20

3 files changed

Lines changed: 518 additions & 17 deletions

File tree

public/css/style.css

Lines changed: 157 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2755,4 +2755,161 @@ tbody tr:hover {
27552755
background: #fff;
27562756
}
27572757

2758+
/* Logo Type Toggle */
2759+
.logo-type-toggle {
2760+
display: flex;
2761+
gap: 0;
2762+
margin-bottom: 12px;
2763+
border: 1px solid var(--border);
2764+
border-radius: var(--radius-md);
2765+
overflow: hidden;
2766+
}
2767+
.logo-type-toggle button {
2768+
flex: 1;
2769+
padding: 8px 12px;
2770+
border: none;
2771+
background: var(--bg-secondary);
2772+
color: var(--text-secondary);
2773+
font-size: 0.82rem;
2774+
font-weight: 600;
2775+
cursor: pointer;
2776+
transition: var(--transition);
2777+
font-family: inherit;
2778+
}
2779+
.logo-type-toggle button:first-child {
2780+
border-right: 1px solid var(--border);
2781+
}
2782+
.logo-type-toggle button.active {
2783+
background: var(--accent-1);
2784+
color: #fff;
2785+
}
2786+
.logo-type-toggle button:hover:not(.active) {
2787+
background: var(--bg-tertiary);
2788+
}
2789+
2790+
/* SVG Picker */
2791+
.svg-picker {
2792+
border: 1px solid var(--border);
2793+
border-radius: var(--radius-md);
2794+
overflow: hidden;
2795+
background: var(--bg-secondary);
2796+
}
2797+
.svg-picker-search {
2798+
width: 100%;
2799+
padding: 10px 12px;
2800+
border: none;
2801+
border-bottom: 1px solid var(--border);
2802+
background: var(--bg-tertiary);
2803+
color: var(--text-primary);
2804+
font-size: 0.85rem;
2805+
font-family: inherit;
2806+
outline: none;
2807+
box-sizing: border-box;
2808+
}
2809+
.svg-picker-search::placeholder {
2810+
color: var(--text-secondary);
2811+
}
2812+
.svg-picker-search:focus {
2813+
border-bottom-color: var(--accent-1);
2814+
}
2815+
.svg-picker-grid {
2816+
display: grid;
2817+
grid-template-columns: repeat(auto-fill, minmax(44px, 1fr));
2818+
gap: 4px;
2819+
padding: 8px;
2820+
max-height: 220px;
2821+
overflow-y: auto;
2822+
}
2823+
.svg-picker-grid::-webkit-scrollbar {
2824+
width: 6px;
2825+
}
2826+
.svg-picker-grid::-webkit-scrollbar-track {
2827+
background: transparent;
2828+
}
2829+
.svg-picker-grid::-webkit-scrollbar-thumb {
2830+
background: var(--border);
2831+
border-radius: 3px;
2832+
}
2833+
.svg-picker-item {
2834+
display: flex;
2835+
flex-direction: column;
2836+
align-items: center;
2837+
justify-content: center;
2838+
gap: 3px;
2839+
padding: 6px 2px;
2840+
border-radius: 6px;
2841+
cursor: pointer;
2842+
transition: var(--transition);
2843+
border: 2px solid transparent;
2844+
background: transparent;
2845+
}
2846+
.svg-picker-item:hover {
2847+
background: var(--bg-tertiary);
2848+
}
2849+
.svg-picker-item.selected {
2850+
border-color: var(--accent-1);
2851+
background: color-mix(in srgb, var(--accent-1) 15%, var(--bg-secondary));
2852+
}
2853+
.svg-picker-item img {
2854+
width: 24px;
2855+
height: 24px;
2856+
object-fit: contain;
2857+
filter: grayscale(100%);
2858+
transition: var(--transition);
2859+
}
2860+
.svg-picker-item:hover img,
2861+
.svg-picker-item.selected img {
2862+
filter: grayscale(0%);
2863+
}
2864+
.svg-picker-item span {
2865+
font-size: 0.6rem;
2866+
color: var(--text-secondary);
2867+
text-align: center;
2868+
line-height: 1.1;
2869+
overflow: hidden;
2870+
text-overflow: ellipsis;
2871+
white-space: nowrap;
2872+
max-width: 44px;
2873+
}
2874+
.svg-picker-empty {
2875+
text-align: center;
2876+
padding: 20px 12px;
2877+
color: var(--text-secondary);
2878+
font-size: 0.82rem;
2879+
}
2880+
.logo-preview-box {
2881+
margin-top: 8px;
2882+
display: flex;
2883+
align-items: center;
2884+
gap: 10px;
2885+
padding: 8px 12px;
2886+
background: var(--bg-tertiary);
2887+
border-radius: var(--radius-md);
2888+
border: 1px solid var(--border);
2889+
}
2890+
.logo-preview-box img {
2891+
max-width: 48px;
2892+
max-height: 48px;
2893+
object-fit: contain;
2894+
border-radius: 4px;
2895+
}
2896+
.logo-preview-box .logo-preview-label {
2897+
font-size: 0.8rem;
2898+
color: var(--text-secondary);
2899+
}
2900+
.logo-preview-box .logo-preview-clear {
2901+
margin-left: auto;
2902+
background: none;
2903+
border: none;
2904+
color: var(--text-secondary);
2905+
cursor: pointer;
2906+
padding: 4px;
2907+
border-radius: 4px;
2908+
display: flex;
2909+
align-items: center;
2910+
}
2911+
.logo-preview-box .logo-preview-clear:hover {
2912+
color: var(--accent-red);
2913+
background: rgba(239, 68, 68, 0.1);
2914+
}
27582915

0 commit comments

Comments
 (0)