feat: add icon and description to preset dropdown (#21694)

Closes #20598 

This pull-request implements a very basic change to also render the
`icon` of the `Preset` when we've specifically defined one within the
template. Furthermore, theres a `ⓘ` icon with a description.

### Preview

<img width="984" height="442" alt="CleanShot 2026-01-27 at 20 15 29@2x"
src="https://github.com/user-attachments/assets/d4ceebf9-a5fe-4df4-a8b2-a8355d6bb25e"
/>

site/src/modules/tasks/TaskPrompt/TaskPrompt.tsx

@@ -27,7 +27,7 @@ import {
 } from "components/Tooltip/Tooltip";
 import { useAuthenticated } from "hooks/useAuthenticated";
 import { useExternalAuth } from "hooks/useExternalAuth";
-import { ArrowUpIcon, RedoIcon, RotateCcwIcon } from "lucide-react";
+import { ArrowUpIcon, InfoIcon, RedoIcon, RotateCcwIcon } from "lucide-react";
 import { type FC, useEffect, useState } from "react";
 import { useMutation, useQuery, useQueryClient } from "react-query";
 import TextareaAutosize, {
@@ -294,7 +294,7 @@ const CreateTaskForm: FC<CreateTaskFormProps> = ({ templates, onSuccess }) => {
 							</div>
 						)}
 
-						<div>
+						<div className="flex-1 overflow-hidden min-w-0">
 							<label htmlFor="presetID" className="sr-only">
 								Preset
 							</label>
@@ -310,15 +310,43 @@ const CreateTaskForm: FC<CreateTaskFormProps> = ({ templates, onSuccess }) => {
 										value={selectedPresetId}
 										onValueChange={setSelectedPresetId}
 									>
-										<PromptSelectTrigger id="presetID" tooltip="Preset">
+										<PromptSelectTrigger
+											id="presetID"
+											tooltip="Preset"
+											className="w-full max-w-full [&_span]:flex [&_span]:items-center [&_span]:gap-2 [&_span]:min-w-0 [&_span]:overflow-hidden [&_span>span]:truncate [&_svg[data-slot='preset-description']]:hidden"
+										>
 											<SelectValue placeholder="Select a preset" />
 										</PromptSelectTrigger>
 										<SelectContent>
 											{presets?.toSorted(sortByDefault).map((preset) => (
-												<SelectItem value={preset.ID} key={preset.ID}>
-													<span className="overflow-hidden text-ellipsis block">
+												<SelectItem
+													value={preset.ID}
+													key={preset.ID}
+													className="[&_span]:flex [&_span]:items-center [&_span]:gap-2"
+												>
+													{preset.Icon && (
+														<img
+															src={preset.Icon}
+															alt={preset.Name}
+															className="size-icon-sm flex-shrink-0"
+														/>
+													)}
+													<span>
 														{preset.Name} {preset.Default && "(Default)"}
 													</span>
+													{preset.Description && (
+														<Tooltip>
+															<TooltipTrigger asChild>
+																<InfoIcon
+																	className="size-4"
+																	data-slot="preset-description"
+																/>
+															</TooltipTrigger>
+															<TooltipContent>
+																{preset.Description}
+															</TooltipContent>
+														</Tooltip>
+													)}
 												</SelectItem>
 											))}
 										</SelectContent>