From 1d41f871eed8f754656414c9330c14c008f87d9e Mon Sep 17 00:00:00 2001
From: "[dyad]" <git@dyad.sh>
Date: Sun, 18 Jan 2026 12:30:42 +0100
Subject: [PATCH] [dyad] Added info icons to settings - wrote 1 file(s)

---
 src/components/image-converter.tsx | 266 +++++++++++++++++------------
 1 file changed, 154 insertions(+), 112 deletions(-)

diff --git a/src/components/image-converter.tsx b/src/components/image-converter.tsx
index a7eb76a..760def6 100644
--- a/src/components/image-converter.tsx
+++ b/src/components/image-converter.tsx
@@ -381,14 +381,17 @@ export function ImageConverter() {
               <AccordionContent className="px-6 pb-6">
                 <div className="space-y-4">
                   <div>
-                    <Tooltip>
-                      <TooltipTrigger asChild>
-                        <Label htmlFor="aspect-ratio">Aspect Ratio</Label>
-                      </TooltipTrigger>
-                      <TooltipContent>
-                        <p>Choose a preset aspect ratio or select 'Custom' to enter dimensions manually.</p>
-                      </TooltipContent>
-                    </Tooltip>
+                    <div className="flex items-center gap-1.5">
+                      <Label htmlFor="aspect-ratio">Aspect Ratio</Label>
+                      <Tooltip>
+                        <TooltipTrigger>
+                          <HelpCircle className="h-4 w-4 text-muted-foreground" />
+                        </TooltipTrigger>
+                        <TooltipContent>
+                          <p>Choose a preset aspect ratio or select 'Custom' to enter dimensions manually.</p>
+                        </TooltipContent>
+                      </Tooltip>
+                    </div>
                     <Select value={aspectRatio} onValueChange={handleAspectRatioChange}>
                       <SelectTrigger id="aspect-ratio" className="mt-2">
                         <SelectValue placeholder="Select aspect ratio" />
@@ -404,14 +407,17 @@ export function ImageConverter() {
                   </div>
                   <div className="flex items-end gap-2">
                     <div className="space-y-2 flex-1">
-                      <Tooltip>
-                        <TooltipTrigger asChild>
-                          <Label htmlFor="width">Width (px)</Label>
-                        </TooltipTrigger>
-                        <TooltipContent>
-                          <p>Set the output width in pixels. Leave blank to use the original width.</p>
-                        </TooltipContent>
-                      </Tooltip>
+                      <div className="flex items-center gap-1.5">
+                        <Label htmlFor="width">Width (px)</Label>
+                        <Tooltip>
+                          <TooltipTrigger>
+                            <HelpCircle className="h-4 w-4 text-muted-foreground" />
+                          </TooltipTrigger>
+                          <TooltipContent>
+                            <p>Set the output width in pixels. Leave blank to use the original width.</p>
+                          </TooltipContent>
+                        </Tooltip>
+                      </div>
                       <Input id="width" type="number" placeholder="Original" value={width} onChange={handleWidthChange} />
                     </div>
                     <Tooltip>
@@ -425,38 +431,47 @@ export function ImageConverter() {
                       </TooltipContent>
                     </Tooltip>
                     <div className="space-y-2 flex-1">
-                      <Tooltip>
-                        <TooltipTrigger asChild>
-                          <Label htmlFor="height">Height (px)</Label>
-                        </TooltipTrigger>
-                        <TooltipContent>
-                          <p>Set the output height in pixels. Leave blank to use the original height.</p>
-                        </TooltipContent>
-                      </Tooltip>
+                      <div className="flex items-center gap-1.5">
+                        <Label htmlFor="height">Height (px)</Label>
+                        <Tooltip>
+                          <TooltipTrigger>
+                            <HelpCircle className="h-4 w-4 text-muted-foreground" />
+                          </TooltipTrigger>
+                          <TooltipContent>
+                            <p>Set the output height in pixels. Leave blank to use the original height.</p>
+                          </TooltipContent>
+                        </Tooltip>
+                      </div>
                       <Input id="height" type="number" placeholder="Original" value={height} onChange={handleHeightChange} />
                     </div>
                   </div>
                   <div className="flex items-center space-x-2 pt-2">
                     <Checkbox id="keep-orientation" checked={keepOrientation} onCheckedChange={(checked) => setKeepOrientation(Boolean(checked))} />
-                    <Tooltip>
-                      <TooltipTrigger asChild>
-                        <Label htmlFor="keep-orientation" className="cursor-pointer">Keep original orientation</Label>
-                      </TooltipTrigger>
-                      <TooltipContent>
-                        <p>Automatically swaps width and height to match the original image's orientation.</p>
-                      </TooltipContent>
-                    </Tooltip>
+                    <Label htmlFor="keep-orientation" className="cursor-pointer flex items-center gap-1.5">
+                      Keep original orientation
+                      <Tooltip>
+                        <TooltipTrigger onClick={(e) => e.preventDefault()}>
+                          <HelpCircle className="h-4 w-4 text-muted-foreground" />
+                        </TooltipTrigger>
+                        <TooltipContent>
+                          <p>Automatically swaps width and height to match the original image's orientation.</p>
+                        </TooltipContent>
+                      </Tooltip>
+                    </Label>
                   </div>
                 </div>
                 <div className="mt-4 space-y-2">
-                  <Tooltip>
-                    <TooltipTrigger asChild>
-                      <Label htmlFor="scale-mode">Scaling</Label>
-                    </TooltipTrigger>
-                    <TooltipContent>
-                      <p>Determines how the image fits into the new dimensions.</p>
-                    </TooltipContent>
-                  </Tooltip>
+                  <div className="flex items-center gap-1.5">
+                    <Label htmlFor="scale-mode">Scaling</Label>
+                    <Tooltip>
+                      <TooltipTrigger>
+                        <HelpCircle className="h-4 w-4 text-muted-foreground" />
+                      </TooltipTrigger>
+                      <TooltipContent>
+                        <p>Determines how the image fits into the new dimensions.</p>
+                      </TooltipContent>
+                    </Tooltip>
+                  </div>
                   <Select value={scaleMode} onValueChange={(value: 'fill' | 'cover' | 'contain') => setScaleMode(value)}>
                     <SelectTrigger id="scale-mode"><SelectValue placeholder="Select scaling mode" /></SelectTrigger>
                     <SelectContent>
@@ -468,14 +483,17 @@ export function ImageConverter() {
                 </div>
                 {scaleMode !== 'fill' && (
                   <div className="mt-4 space-y-2">
-                    <Tooltip>
-                      <TooltipTrigger asChild>
-                        <Label>Position</Label>
-                      </TooltipTrigger>
-                      <TooltipContent>
-                        <p>Sets the anchor point for 'Cover' or 'Contain' scaling.</p>
-                      </TooltipContent>
-                    </Tooltip>
+                    <div className="flex items-center gap-1.5">
+                      <Label>Position</Label>
+                      <Tooltip>
+                        <TooltipTrigger>
+                          <HelpCircle className="h-4 w-4 text-muted-foreground" />
+                        </TooltipTrigger>
+                        <TooltipContent>
+                          <p>Sets the anchor point for 'Cover' or 'Contain' scaling.</p>
+                        </TooltipContent>
+                      </Tooltip>
+                    </div>
                     <ObjectPositionControl value={objectPosition} onChange={(pos) => setObjectPosition(pos)} />
                   </div>
                 )}
@@ -493,14 +511,17 @@ export function ImageConverter() {
                 <div className="space-y-6">
                   <div className="flex items-center space-x-2">
                     <Switch id="use-default-base-name" checked={useDefaultBaseName} onCheckedChange={setUseDefaultBaseName} />
-                    <Tooltip>
-                      <TooltipTrigger asChild>
-                        <Label htmlFor="use-default-base-name">Use default base name</Label>
-                      </TooltipTrigger>
-                      <TooltipContent>
-                        <p>When enabled, all newly uploaded images will use the specified default base name.</p>
-                      </TooltipContent>
-                    </Tooltip>
+                    <Label htmlFor="use-default-base-name" className="flex items-center gap-1.5 cursor-pointer">
+                      Use default base name
+                      <Tooltip>
+                        <TooltipTrigger onClick={(e) => e.preventDefault()}>
+                          <HelpCircle className="h-4 w-4 text-muted-foreground" />
+                        </TooltipTrigger>
+                        <TooltipContent>
+                          <p>When enabled, all newly uploaded images will use the specified default base name.</p>
+                        </TooltipContent>
+                      </Tooltip>
+                    </Label>
                   </div>
                   {useDefaultBaseName && (
                     <div className="space-y-2">
@@ -526,49 +547,61 @@ export function ImageConverter() {
                     </div>
                   )}
                   <div className="space-y-2">
-                    <Tooltip>
-                      <TooltipTrigger asChild>
-                        <Label htmlFor="prefix">Prefix</Label>
-                      </TooltipTrigger>
-                      <TooltipContent>
-                        <p>Add text to the beginning of every filename.</p>
-                      </TooltipContent>
-                    </Tooltip>
+                    <div className="flex items-center gap-1.5">
+                      <Label htmlFor="prefix">Prefix</Label>
+                      <Tooltip>
+                        <TooltipTrigger>
+                          <HelpCircle className="h-4 w-4 text-muted-foreground" />
+                        </TooltipTrigger>
+                        <TooltipContent>
+                          <p>Add text to the beginning of every filename.</p>
+                        </TooltipContent>
+                      </Tooltip>
+                    </div>
                     <Input id="prefix" placeholder="e.g., travel-" value={prefix} onChange={(e) => setPrefix(e.target.value)} />
                   </div>
                   <div className="space-y-2">
-                    <Tooltip>
-                      <TooltipTrigger asChild>
-                        <Label htmlFor="suffix">Suffix</Label>
-                      </TooltipTrigger>
-                      <TooltipContent>
-                        <p>Add text to the end of every filename (before the number).</p>
-                      </TooltipContent>
-                    </Tooltip>
+                    <div className="flex items-center gap-1.5">
+                      <Label htmlFor="suffix">Suffix</Label>
+                      <Tooltip>
+                        <TooltipTrigger>
+                          <HelpCircle className="h-4 w-4 text-muted-foreground" />
+                        </TooltipTrigger>
+                        <TooltipContent>
+                          <p>Add text to the end of every filename (before the number).</p>
+                        </TooltipContent>
+                      </Tooltip>
+                    </div>
                     <Input id="suffix" placeholder="e.g., -edit" value={suffix} onChange={(e) => setSuffix(e.target.value)} />
                   </div>
                   <div className="flex items-center space-x-2 pt-2">
                     <Switch id="use-counter" checked={useCounter} onCheckedChange={setUseCounter} />
-                    <Tooltip>
-                      <TooltipTrigger asChild>
-                        <Label htmlFor="use-counter">Add sequential number</Label>
-                      </TooltipTrigger>
-                      <TooltipContent>
-                        <p>Append a numbered sequence to each filename.</p>
-                      </TooltipContent>
-                    </Tooltip>
+                    <Label htmlFor="use-counter" className="flex items-center gap-1.5 cursor-pointer">
+                      Add sequential number
+                      <Tooltip>
+                        <TooltipTrigger onClick={(e) => e.preventDefault()}>
+                          <HelpCircle className="h-4 w-4 text-muted-foreground" />
+                        </TooltipTrigger>
+                        <TooltipContent>
+                          <p>Append a numbered sequence to each filename.</p>
+                        </TooltipContent>
+                      </Tooltip>
+                    </Label>
                   </div>
                   {useCounter && (
                     <div className="grid grid-cols-2 gap-4 pt-2">
                       <div className="space-y-2">
-                        <Tooltip>
-                          <TooltipTrigger asChild>
-                            <Label htmlFor="counter-start">Start number</Label>
-                          </TooltipTrigger>
-                          <TooltipContent>
-                            <p>The first number to use in the sequence.</p>
-                          </TooltipContent>
-                        </Tooltip>
+                        <div className="flex items-center gap-1.5">
+                          <Label htmlFor="counter-start">Start number</Label>
+                          <Tooltip>
+                            <TooltipTrigger>
+                              <HelpCircle className="h-4 w-4 text-muted-foreground" />
+                            </TooltipTrigger>
+                            <TooltipContent>
+                              <p>The first number to use in the sequence.</p>
+                            </TooltipContent>
+                          </Tooltip>
+                        </div>
                         <Input
                           id="counter-start"
                           type="number"
@@ -578,14 +611,17 @@ export function ImageConverter() {
                         />
                       </div>
                       <div className="space-y-2">
-                        <Tooltip>
-                          <TooltipTrigger asChild>
-                            <Label htmlFor="counter-digits">Padding digits</Label>
-                          </TooltipTrigger>
-                          <TooltipContent>
-                            <p>Total number of digits for the counter, padded with leading zeros (e.g., 3 for 001).</p>
-                          </TooltipContent>
-                        </Tooltip>
+                        <div className="flex items-center gap-1.5">
+                          <Label htmlFor="counter-digits">Padding digits</Label>
+                          <Tooltip>
+                            <TooltipTrigger>
+                              <HelpCircle className="h-4 w-4 text-muted-foreground" />
+                            </TooltipTrigger>
+                            <TooltipContent>
+                              <p>Total number of digits for the counter, padded with leading zeros (e.g., 3 for 001).</p>
+                            </TooltipContent>
+                          </Tooltip>
+                        </div>
                         <Input
                           id="counter-digits"
                           type="number"
@@ -610,14 +646,17 @@ export function ImageConverter() {
               <AccordionContent className="px-6 pb-6">
                 <div className="space-y-6">
                   <div className="space-y-2">
-                    <Tooltip>
-                      <TooltipTrigger asChild>
-                        <Label htmlFor="format">Format</Label>
-                      </TooltipTrigger>
-                      <TooltipContent>
-                        <p>Choose the output file format for the images.</p>
-                      </TooltipContent>
-                    </Tooltip>
+                    <div className="flex items-center gap-1.5">
+                      <Label htmlFor="format">Format</Label>
+                      <Tooltip>
+                        <TooltipTrigger>
+                          <HelpCircle className="h-4 w-4 text-muted-foreground" />
+                        </TooltipTrigger>
+                        <TooltipContent>
+                          <p>Choose the output file format for the images.</p>
+                        </TooltipContent>
+                      </Tooltip>
+                    </div>
                     <Select value={format} onValueChange={(value: "png" | "jpeg" | "webp") => setFormat(value)}>
                       <SelectTrigger id="format"><SelectValue placeholder="Select format" /></SelectTrigger>
                       <SelectContent>
@@ -629,14 +668,17 @@ export function ImageConverter() {
                   </div>
                   <div className="space-y-2">
                     <div className="flex justify-between items-center">
-                      <Tooltip>
-                        <TooltipTrigger asChild>
-                          <Label htmlFor="quality">Quality</Label>
-                        </TooltipTrigger>
-                        <TooltipContent>
-                          <p>Set compression quality for JPEG/WEBP. Higher is better quality but larger file size.</p>
-                        </TooltipContent>
-                      </Tooltip>
+                      <div className="flex items-center gap-1.5">
+                        <Label htmlFor="quality">Quality</Label>
+                        <Tooltip>
+                          <TooltipTrigger>
+                            <HelpCircle className="h-4 w-4 text-muted-foreground" />
+                          </TooltipTrigger>
+                          <TooltipContent>
+                            <p>Set compression quality for JPEG/WEBP. Higher is better quality but larger file size.</p>
+                          </TooltipContent>
+                        </Tooltip>
+                      </div>
                       <span className="text-sm text-muted-foreground">{quality}%</span>
                     </div>
                     <Slider