| | | 1 | | @inject IJSRuntime JSRuntime |
| | | 2 | | |
| | | 3 | | <div class="chronicis-icon-picker-container" @onclick:stopPropagation="true"> |
| | | 4 | | <!-- Icon Button --> |
| | | 5 | | <button type="button" |
| | | 6 | | class="chronicis-icon-button @(HasIcon ? "has-icon" : "")" |
| | | 7 | | @onclick="TogglePicker" |
| | | 8 | | title="@(HasIcon ? "Change icon" : "Add icon")"> |
| | 0 | 9 | | @if (HasIcon) |
| | | 10 | | { |
| | | 11 | | <i class="@CurrentIcon"></i> |
| | | 12 | | } |
| | | 13 | | else |
| | | 14 | | { |
| | | 15 | | <i class="fa-solid fa-plus placeholder-icon"></i> |
| | | 16 | | } |
| | | 17 | | </button> |
| | | 18 | | |
| | | 19 | | <!-- Clear button (shown when icon exists) --> |
| | 0 | 20 | | @if (HasIcon) |
| | | 21 | | { |
| | | 22 | | <button type="button" |
| | | 23 | | class="chronicis-icon-clear-button" |
| | | 24 | | @onclick="ClearIcon" |
| | | 25 | | @onclick:stopPropagation="true" |
| | | 26 | | title="Remove icon"> |
| | | 27 | | <i class="fa-solid fa-xmark"></i> |
| | | 28 | | </button> |
| | | 29 | | } |
| | | 30 | | |
| | | 31 | | <!-- Picker Dropdown --> |
| | 0 | 32 | | @if (_isPickerOpen) |
| | | 33 | | { |
| | | 34 | | <div class="chronicis-icon-picker-dropdown"> |
| | | 35 | | <!-- Search Box --> |
| | | 36 | | <div class="chronicis-icon-picker-search"> |
| | | 37 | | <i class="fa-solid fa-magnifying-glass search-icon"></i> |
| | | 38 | | <input type="text" |
| | | 39 | | @bind="_searchQuery" |
| | | 40 | | @bind:event="oninput" |
| | | 41 | | @onkeyup="OnSearchKeyUp" |
| | | 42 | | placeholder="Search icons..." |
| | | 43 | | class="chronicis-icon-search-input" /> |
| | 0 | 44 | | @if (!string.IsNullOrEmpty(_searchQuery)) |
| | | 45 | | { |
| | | 46 | | <button type="button" class="clear-search" @onclick="ClearSearch"> |
| | | 47 | | <i class="fa-solid fa-xmark"></i> |
| | | 48 | | </button> |
| | | 49 | | } |
| | | 50 | | </div> |
| | | 51 | | |
| | | 52 | | <!-- Category Tabs --> |
| | | 53 | | <div class="chronicis-icon-picker-categories"> |
| | | 54 | | <button type="button" |
| | | 55 | | class="category-tab @(_selectedCategory == null ? "active" : "")" |
| | 0 | 56 | | @onclick="@(() => SelectCategory(null))" |
| | | 57 | | title="All Icons"> |
| | | 58 | | <i class="fa-solid fa-border-all"></i> |
| | | 59 | | </button> |
| | 0 | 60 | | @foreach (var category in FontAwesomeIcons.Categories) |
| | | 61 | | { |
| | | 62 | | <button type="button" |
| | | 63 | | class="category-tab @(_selectedCategory == category.Name ? "active" : "")" |
| | 0 | 64 | | @onclick="@(() => SelectCategory(category.Name))" |
| | | 65 | | title="@category.Name"> |
| | | 66 | | <i class="@category.Icon"></i> |
| | | 67 | | </button> |
| | | 68 | | } |
| | | 69 | | </div> |
| | | 70 | | |
| | | 71 | | <!-- Category Label --> |
| | | 72 | | <div class="chronicis-icon-picker-category-label"> |
| | 0 | 73 | | @if (!string.IsNullOrEmpty(_searchQuery)) |
| | | 74 | | { |
| | 0 | 75 | | <span>Search results for "@_searchQuery" (@FilteredIcons.Count)</span> |
| | | 76 | | } |
| | 0 | 77 | | else if (_selectedCategory != null) |
| | | 78 | | { |
| | 0 | 79 | | <span>@_selectedCategory (@FilteredIcons.Count)</span> |
| | | 80 | | } |
| | | 81 | | else |
| | | 82 | | { |
| | 0 | 83 | | <span>All Icons (@FilteredIcons.Count)</span> |
| | | 84 | | } |
| | | 85 | | </div> |
| | | 86 | | |
| | | 87 | | <!-- Icon Grid --> |
| | | 88 | | <div class="chronicis-icon-picker-grid"> |
| | 0 | 89 | | @if (FilteredIcons.Count == 0) |
| | | 90 | | { |
| | | 91 | | <div class="no-results"> |
| | | 92 | | <i class="fa-solid fa-face-meh"></i> |
| | | 93 | | <span>No icons found</span> |
| | | 94 | | </div> |
| | | 95 | | } |
| | | 96 | | else |
| | | 97 | | { |
| | 0 | 98 | | @foreach (var icon in FilteredIcons.Take(200)) |
| | | 99 | | { |
| | | 100 | | <button type="button" |
| | | 101 | | class="icon-option @(icon == CurrentIcon ? "selected" : "")" |
| | 0 | 102 | | @onclick="@(() => SelectIcon(icon))" |
| | | 103 | | title="@GetIconDisplayName(icon)"> |
| | | 104 | | <i class="@icon"></i> |
| | | 105 | | </button> |
| | | 106 | | } |
| | 0 | 107 | | @if (FilteredIcons.Count > 200) |
| | | 108 | | { |
| | | 109 | | <div class="more-results"> |
| | 0 | 110 | | <span>+@(FilteredIcons.Count - 200) more - refine your search</span> |
| | | 111 | | </div> |
| | | 112 | | } |
| | | 113 | | } |
| | | 114 | | </div> |
| | | 115 | | </div> |
| | | 116 | | } |
| | | 117 | | </div> |
| | | 118 | | |
| | | 119 | | @* Click-outside handler *@ |
| | 0 | 120 | | @if (_isPickerOpen) |
| | | 121 | | { |
| | | 122 | | <div class="chronicis-icon-picker-backdrop" |
| | | 123 | | @onclick="ClosePicker"></div> |
| | | 124 | | } |
| | | 125 | | |
| | | 126 | | @code { |
| | | 127 | | /// <summary> |
| | | 128 | | /// The current icon class (e.g., "fa-solid fa-dragon") |
| | | 129 | | /// </summary> |
| | | 130 | | [Parameter] |
| | 0 | 131 | | public string? CurrentIcon { get; set; } |
| | | 132 | | |
| | | 133 | | /// <summary> |
| | | 134 | | /// Callback when an icon is selected or cleared |
| | | 135 | | /// </summary> |
| | | 136 | | [Parameter] |
| | 0 | 137 | | public EventCallback<string?> OnIconChanged { get; set; } |
| | | 138 | | |
| | | 139 | | private bool _isPickerOpen = false; |
| | 0 | 140 | | private string _searchQuery = string.Empty; |
| | | 141 | | private string? _selectedCategory = null; |
| | | 142 | | |
| | 0 | 143 | | private bool HasIcon => !string.IsNullOrEmpty(CurrentIcon); |
| | | 144 | | |
| | | 145 | | private List<string> FilteredIcons |
| | | 146 | | { |
| | | 147 | | get |
| | | 148 | | { |
| | | 149 | | IEnumerable<string> icons; |
| | | 150 | | |
| | | 151 | | // Start with category filter or all icons |
| | 0 | 152 | | if (_selectedCategory != null) |
| | | 153 | | { |
| | 0 | 154 | | var category = FontAwesomeIcons.Categories.FirstOrDefault(c => c.Name == _selectedCategory); |
| | 0 | 155 | | icons = category?.Icons ?? Array.Empty<string>(); |
| | | 156 | | } |
| | | 157 | | else |
| | | 158 | | { |
| | 0 | 159 | | icons = FontAwesomeIcons.GetAllIcons(); |
| | | 160 | | } |
| | | 161 | | |
| | | 162 | | // Apply search filter |
| | 0 | 163 | | if (!string.IsNullOrWhiteSpace(_searchQuery)) |
| | | 164 | | { |
| | 0 | 165 | | var searchTerms = _searchQuery.ToLowerInvariant().Split(' ', StringSplitOptions.RemoveEmptyEntries); |
| | 0 | 166 | | icons = icons.Where(icon => |
| | 0 | 167 | | { |
| | 0 | 168 | | var iconName = icon.Replace("fa-solid fa-", "").Replace("-", " "); |
| | 0 | 169 | | return searchTerms.All(term => iconName.Contains(term)); |
| | 0 | 170 | | }); |
| | | 171 | | } |
| | | 172 | | |
| | 0 | 173 | | return icons.ToList(); |
| | | 174 | | } |
| | | 175 | | } |
| | | 176 | | |
| | | 177 | | private void TogglePicker() |
| | | 178 | | { |
| | 0 | 179 | | if (_isPickerOpen) |
| | | 180 | | { |
| | 0 | 181 | | ClosePicker(); |
| | | 182 | | } |
| | | 183 | | else |
| | | 184 | | { |
| | 0 | 185 | | OpenPicker(); |
| | | 186 | | } |
| | 0 | 187 | | } |
| | | 188 | | |
| | | 189 | | private void OpenPicker() |
| | | 190 | | { |
| | 0 | 191 | | _isPickerOpen = true; |
| | 0 | 192 | | _searchQuery = string.Empty; |
| | 0 | 193 | | _selectedCategory = null; |
| | 0 | 194 | | StateHasChanged(); |
| | 0 | 195 | | } |
| | | 196 | | |
| | | 197 | | private void ClosePicker() |
| | | 198 | | { |
| | 0 | 199 | | _isPickerOpen = false; |
| | 0 | 200 | | StateHasChanged(); |
| | 0 | 201 | | } |
| | | 202 | | |
| | | 203 | | private void SelectCategory(string? category) |
| | | 204 | | { |
| | 0 | 205 | | _selectedCategory = category; |
| | 0 | 206 | | StateHasChanged(); |
| | 0 | 207 | | } |
| | | 208 | | |
| | | 209 | | private async Task SelectIcon(string icon) |
| | | 210 | | { |
| | 0 | 211 | | ClosePicker(); |
| | 0 | 212 | | await OnIconChanged.InvokeAsync(icon); |
| | 0 | 213 | | } |
| | | 214 | | |
| | | 215 | | private async Task ClearIcon() |
| | | 216 | | { |
| | 0 | 217 | | await OnIconChanged.InvokeAsync(null); |
| | 0 | 218 | | } |
| | | 219 | | |
| | | 220 | | private void ClearSearch() |
| | | 221 | | { |
| | 0 | 222 | | _searchQuery = string.Empty; |
| | 0 | 223 | | StateHasChanged(); |
| | 0 | 224 | | } |
| | | 225 | | |
| | | 226 | | private void OnSearchKeyUp(KeyboardEventArgs e) |
| | | 227 | | { |
| | | 228 | | // Just trigger re-render for filtering |
| | 0 | 229 | | StateHasChanged(); |
| | 0 | 230 | | } |
| | | 231 | | |
| | | 232 | | private string GetIconDisplayName(string icon) |
| | | 233 | | { |
| | | 234 | | // Convert "fa-solid fa-dragon" to "Dragon" |
| | 0 | 235 | | var name = icon.Replace("fa-solid fa-", "").Replace("fa-regular fa-", "").Replace("fa-brands fa-", ""); |
| | 0 | 236 | | return string.Join(" ", name.Split('-').Select(word => |
| | 0 | 237 | | char.ToUpper(word[0]) + word.Substring(1))); |
| | | 238 | | } |
| | | 239 | | } |