From 9535296919fa00a1b56a2a799e84ed187be20ecb Mon Sep 17 00:00:00 2001
From: Aleix Soler <aleixsoler64@gmail.com>
Date: Fri, 21 Nov 2025 08:39:40 +0100
Subject: [PATCH] chore: show all lucide icons

---
 components/SettingsUI/LucideIconPicker.tsx | 11 +++++++++--
 styles/components/settings.css             | 13 ++++++++++---
 2 files changed, 19 insertions(+), 5 deletions(-)

diff --git a/components/SettingsUI/LucideIconPicker.tsx b/components/SettingsUI/LucideIconPicker.tsx
index 641db9e..a3c7b40 100644
--- a/components/SettingsUI/LucideIconPicker.tsx
+++ b/components/SettingsUI/LucideIconPicker.tsx
@@ -19,7 +19,7 @@ export interface LucideIconPickerProps {
 	maxResults?: number;
 }
 
-const DEFAULT_MAX_RESULTS = 80;
+const DEFAULT_MAX_RESULTS = Infinity;
 
 export const LucideIconPicker: React.FC<LucideIconPickerProps> = ({
 	value = "",
@@ -53,7 +53,10 @@ export const LucideIconPicker: React.FC<LucideIconPickerProps> = ({
 		const matches = normalized.length
 			? iconIds.filter((name) => name.toLowerCase().includes(normalized))
 			: iconIds;
-		return matches.slice(0, maxResults);
+		if (Number.isFinite(maxResults)) {
+			return matches.slice(0, maxResults);
+		}
+		return matches;
 	}, [iconIds, maxResults, query]);
 
 	const closePicker = useCallback(() => {
@@ -164,6 +167,10 @@ export const LucideIconPicker: React.FC<LucideIconPickerProps> = ({
 								placeholder="Search Lucide icons…"
 								className="lucide-icon-picker__search"
 							/>
+							<div className="lucide-icon-picker__count">
+								Showing {filteredIcons.length} of{" "}
+								{iconIds.length} icons
+							</div>
 							<div className="lucide-icon-picker__options">
 								{filteredIcons.map((iconName) => (
 									<button
diff --git a/styles/components/settings.css b/styles/components/settings.css
index 309fefb..c923332 100644
--- a/styles/components/settings.css
+++ b/styles/components/settings.css
@@ -306,12 +306,18 @@
 	width: 100%;
 }
 
+.lucide-icon-picker__count {
+	font-size: var(--font-ui-smaller);
+	color: var(--text-muted);
+}
+
 .lucide-icon-picker__options {
-	display: flex;
-	flex-direction: column;
+	display: grid;
+	grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
 	gap: var(--size-2-1);
-	max-height: 220px;
+	max-height: 280px;
 	overflow-y: auto;
+	padding-right: var(--size-2-1);
 }
 
 .lucide-icon-picker__option {
@@ -323,6 +329,7 @@
 	border: 1px solid transparent;
 	cursor: pointer;
 	font-size: var(--font-ui-smaller);
+	background: var(--background-secondary);
 }
 
 .lucide-icon-picker__option:hover {