From 8fbfa90b55078681e060823b458ad76cb1896998 Mon Sep 17 00:00:00 2001
From: alex289 <mccr4fthd@gmail.com>
Date: Thu, 4 Jun 2026 17:47:46 +0200
Subject: [PATCH] feat: Icon picker

---
 frontend/messages/de.json                     |   3 +
 frontend/messages/en.json                     |   3 +
 .../src/components/dialogs/upsert-agent.tsx   |  21 +++
 .../src/components/lucide-icon-picker.tsx     | 137 ++++++++++++++++++
 4 files changed, 164 insertions(+)
 create mode 100644 frontend/src/components/lucide-icon-picker.tsx

diff --git a/frontend/messages/de.json b/frontend/messages/de.json
index 1ef5537d..34db81d8 100644
--- a/frontend/messages/de.json
+++ b/frontend/messages/de.json
@@ -215,6 +215,9 @@
 	"addAgentDescription": "Füge einen neuen Agenten hinzu, um Docker-Hosts und Server zu verwalten.",
 	"editAgentDescription": "Aktualisiere die Agentenkonfiguration.",
 	"agentNamePlaceholder": "z. B. \"prod-server-01\"",
+	"icon": "Icon",
+	"selectIcon": "Icon auswählen",
+	"noIconsFound": "Keine Icons gefunden",
 	"agentUpdated": "Agent aktualisiert",
 	"agentConnected": "Agent verbunden",
 	"failedSaveAgent": "Agent konnte nicht gespeichert werden",
diff --git a/frontend/messages/en.json b/frontend/messages/en.json
index 6250b2e8..21ec11a6 100644
--- a/frontend/messages/en.json
+++ b/frontend/messages/en.json
@@ -215,6 +215,9 @@
 	"addAgentDescription": "Add a new agent to manage Docker hosts and servers.",
 	"editAgentDescription": "Update the agent configuration.",
 	"agentNamePlaceholder": "e.g. \"prod-server-01\"",
+	"icon": "Icon",
+	"selectIcon": "Select an icon",
+	"noIconsFound": "No icons found",
 	"agentUpdated": "Agent updated",
 	"agentConnected": "Agent connected",
 	"failedSaveAgent": "Failed to save agent",
diff --git a/frontend/src/components/dialogs/upsert-agent.tsx b/frontend/src/components/dialogs/upsert-agent.tsx
index a1098ac7..778ef56b 100644
--- a/frontend/src/components/dialogs/upsert-agent.tsx
+++ b/frontend/src/components/dialogs/upsert-agent.tsx
@@ -20,6 +20,7 @@ import { Input } from "../ui/input";
 import { createAgent, updateAgent, type Agent } from "@/lib/agents";
 import CopyValueDialog from "./copy-value-dialog";
 import { m } from "@/lib/paraglide/messages";
+import LucideIconPicker, { type LucideIconName } from "@/components/lucide-icon-picker";
 
 const agentSchema = z.object({
 	name: z
@@ -27,8 +28,11 @@ const agentSchema = z.object({
 		.trim()
 		.min(1, m.validationAgentNameRequired())
 		.max(128, m.validationAgentNameMaxLength()),
+	icon: z.string(),
 });
 
+const defaultAgentIcon: LucideIconName = "server";
+
 export default function UpsertAgentDialog({
 	agent,
 	asDropdownItem = false,
@@ -45,6 +49,7 @@ export default function UpsertAgentDialog({
 	const form = useForm({
 		defaultValues: {
 			name: agent?.name ?? "",
+			icon: defaultAgentIcon as string,
 		},
 		validators: {
 			onSubmit: agentSchema,
@@ -68,6 +73,7 @@ export default function UpsertAgentDialog({
 					toast.success(m.agentConnected());
 				}
 				setOpen(false);
+				form.reset();
 			} catch (err) {
 				toast.error(err instanceof Error ? err.message : m.failedSaveAgent());
 			} finally {
@@ -134,6 +140,21 @@ export default function UpsertAgentDialog({
 								}}
 							/>
 
+							<form.Field
+								name="icon"
+								children={(field) => (
+									<Field>
+										<Label>{m.icon()}</Label>
+										<LucideIconPicker
+											value={field.state.value as LucideIconName}
+											onValueChange={field.handleChange}
+											placeholder={m.selectIcon()}
+											emptyMessage={m.noIconsFound()}
+										/>
+									</Field>
+								)}
+							/>
+
 							<div className="flex gap-2 pt-2">
 								<Button type="submit" disabled={isSubmitting}>
 									{isSubmitting ? m.savingDots() : isEditing ? m.update() : m.addAgent()}
diff --git a/frontend/src/components/lucide-icon-picker.tsx b/frontend/src/components/lucide-icon-picker.tsx
new file mode 100644
index 00000000..5b931c67
--- /dev/null
+++ b/frontend/src/components/lucide-icon-picker.tsx
@@ -0,0 +1,137 @@
+import { DynamicIcon, iconNames, type IconName } from "lucide-react/dynamic";
+import { useMemo, useState } from "react";
+import {
+	Combobox,
+	ComboboxContent,
+	ComboboxEmpty,
+	ComboboxInput,
+	ComboboxItem,
+	ComboboxList,
+} from "@/components/ui/combobox";
+import { cn } from "@/lib/utils";
+
+type LucideIconPickerProps = {
+	value: IconName;
+	onValueChange: (value: IconName) => void;
+	placeholder: string;
+	emptyMessage: string;
+	className?: string;
+};
+
+const visibleIconLimit = 84;
+const preferredIcons = [
+	"server",
+	"container",
+	"box",
+	"boxes",
+	"hard-drive",
+	"database",
+	"cloud",
+	"network",
+	"router",
+	"workflow",
+	"git-branch",
+	"git-pull-request",
+	"package",
+	"rocket",
+	"terminal",
+	"monitor",
+	"cpu",
+	"settings",
+	"shield",
+	"key-round",
+	"lock",
+	"activity",
+	"gauge",
+	"webhook",
+] satisfies IconName[];
+
+function formatIconName(name: IconName) {
+	return name
+		.split("-")
+		.map((part) => part.charAt(0).toUpperCase() + part.slice(1))
+		.join(" ");
+}
+
+const iconOptions = iconNames.map((name) => {
+	const label = formatIconName(name);
+
+	return {
+		name,
+		label,
+		searchText: `${name} ${label}`.toLocaleLowerCase(),
+	};
+});
+
+const preferredIconSet = new Set<IconName>(preferredIcons);
+const iconLabelByName = new Map(iconOptions.map((option) => [option.name, option.label]));
+
+function getIconLabel(name: IconName) {
+	return iconLabelByName.get(name) ?? name;
+}
+
+function getVisibleIcons(query: string, value: IconName) {
+	const normalizedQuery = query.trim().toLocaleLowerCase();
+	const matchingIcons = normalizedQuery
+		? iconOptions
+				.filter((option) => option.searchText.includes(normalizedQuery))
+				.map((option) => option.name)
+		: [
+				...preferredIcons,
+				...iconOptions
+					.filter((option) => !preferredIconSet.has(option.name))
+					.map((option) => option.name),
+			];
+
+	return Array.from(new Set([value, ...matchingIcons])).slice(0, visibleIconLimit);
+}
+
+export default function LucideIconPicker({
+	value,
+	onValueChange,
+	placeholder,
+	emptyMessage,
+	className,
+}: LucideIconPickerProps) {
+	const [query, setQuery] = useState("");
+	const visibleIcons = useMemo(() => getVisibleIcons(query, value), [query, value]);
+
+	return (
+		<Combobox
+			items={visibleIcons}
+			filter={null}
+			itemToStringLabel={getIconLabel}
+			value={value}
+			onInputValueChange={setQuery}
+			onValueChange={(nextValue) => {
+				if (nextValue) {
+					onValueChange(nextValue);
+					setQuery("");
+				}
+			}}
+		>
+			<ComboboxInput
+				className={cn("w-full", className)}
+				placeholder={placeholder}
+				aria-label={placeholder}
+			>
+				<div className="pointer-events-none order-first flex h-full items-center pl-2 text-muted-foreground">
+					<DynamicIcon name={value} className="size-4" />
+				</div>
+			</ComboboxInput>
+			<ComboboxContent className="min-w-72 pointer-events-auto">
+				<ComboboxEmpty>{emptyMessage}</ComboboxEmpty>
+				<ComboboxList className="grid max-h-72 grid-cols-2 gap-1 sm:grid-cols-3">
+					{(name) => (
+						<ComboboxItem key={name} value={name} className="h-9 min-w-0 pr-2">
+							<DynamicIcon name={name} className="size-4" />
+							<span className="truncate">{getIconLabel(name)}</span>
+						</ComboboxItem>
+					)}
+				</ComboboxList>
+			</ComboboxContent>
+		</Combobox>
+	);
+}
+
+export type { IconName as LucideIconName };