From d39ddd0540aa8178635671bfdf8d2a18757b2a5d Mon Sep 17 00:00:00 2001
From: "[dyad]" <git@dyad.sh>
Date: Mon, 19 Jan 2026 08:11:45 +0100
Subject: [PATCH] [dyad] Adding a presets dropdown to settings - wrote 2
 file(s)

---
 src/components/settings-panel.tsx           | 94 +++++++++++----------
 src/components/settings/preset-settings.tsx | 67 +++++++++++++++
 2 files changed, 116 insertions(+), 45 deletions(-)
 create mode 100644 src/components/settings/preset-settings.tsx

diff --git a/src/components/settings-panel.tsx b/src/components/settings-panel.tsx
index 362ae82..62591e4 100644
--- a/src/components/settings-panel.tsx
+++ b/src/components/settings-panel.tsx
@@ -5,6 +5,7 @@ import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/
 import { ImageSettings } from "./settings/image-settings";
 import { FilenameSettings } from "./settings/filename-settings";
 import { QualitySettings } from "./settings/quality-settings";
+import { PresetSettings } from "./settings/preset-settings";
 
 interface SettingsPanelProps {
   settings: ConversionSettings;
@@ -24,52 +25,55 @@ export function SettingsPanel({
   hasImages,
 }: SettingsPanelProps) {
   return (
-    <Accordion type="single" collapsible defaultValue="image-settings" className="w-full space-y-4">
-      <AccordionItem value="image-settings" className="border rounded-lg bg-card">
-        <AccordionTrigger className="p-6 hover:no-underline">
-          <div className="text-left">
-            <h3 className="text-lg font-medium leading-none">Bildeinstellungen</h3>
-            <p className="text-sm text-muted-foreground mt-1">Auflösung und Skalierung für alle Bilder anpassen.</p>
-          </div>
-        </AccordionTrigger>
-        <AccordionContent className="px-6 pb-6">
-          <ImageSettings
-            settings={settings}
-            onSettingsChange={onSettingsChange}
-            onAspectRatioChange={onAspectRatioChange}
-            onSwapDimensions={onSwapDimensions}
-          />
-        </AccordionContent>
-      </AccordionItem>
+    <div className="space-y-4">
+      <PresetSettings onSettingsChange={onSettingsChange} />
+      <Accordion type="single" collapsible defaultValue="image-settings" className="w-full space-y-4">
+        <AccordionItem value="image-settings" className="border rounded-lg bg-card">
+          <AccordionTrigger className="p-6 hover:no-underline">
+            <div className="text-left">
+              <h3 className="text-lg font-medium leading-none">Bildeinstellungen</h3>
+              <p className="text-sm text-muted-foreground mt-1">Auflösung und Skalierung für alle Bilder anpassen.</p>
+            </div>
+          </AccordionTrigger>
+          <AccordionContent className="px-6 pb-6">
+            <ImageSettings
+              settings={settings}
+              onSettingsChange={onSettingsChange}
+              onAspectRatioChange={onAspectRatioChange}
+              onSwapDimensions={onSwapDimensions}
+            />
+          </AccordionContent>
+        </AccordionItem>
 
-      <AccordionItem value="filename-settings" className="border rounded-lg bg-card">
-        <AccordionTrigger className="p-6 hover:no-underline">
-          <div className="text-left">
-            <h3 className="text-lg font-medium leading-none">Dateinameneinstellungen</h3>
-            <p className="text-sm text-muted-foreground mt-1">Die Ausgabe-Dateinamen anpassen.</p>
-          </div>
-        </AccordionTrigger>
-        <AccordionContent className="px-6 pb-6">
-          <FilenameSettings
-            settings={settings}
-            onSettingsChange={onSettingsChange}
-            onApplyDefaultBaseNameToAll={onApplyDefaultBaseNameToAll}
-            hasImages={hasImages}
-          />
-        </AccordionContent>
-      </AccordionItem>
+        <AccordionItem value="filename-settings" className="border rounded-lg bg-card">
+          <AccordionTrigger className="p-6 hover:no-underline">
+            <div className="text-left">
+              <h3 className="text-lg font-medium leading-none">Dateinameneinstellungen</h3>
+              <p className="text-sm text-muted-foreground mt-1">Die Ausgabe-Dateinamen anpassen.</p>
+            </div>
+          </AccordionTrigger>
+          <AccordionContent className="px-6 pb-6">
+            <FilenameSettings
+              settings={settings}
+              onSettingsChange={onSettingsChange}
+              onApplyDefaultBaseNameToAll={onApplyDefaultBaseNameToAll}
+              hasImages={hasImages}
+            />
+          </AccordionContent>
+        </AccordionItem>
 
-      <AccordionItem value="quality-settings" className="border rounded-lg bg-card">
-        <AccordionTrigger className="p-6 hover:no-underline">
-          <div className="text-left">
-            <h3 className="text-lg font-medium leading-none">Qualitätseinstellungen</h3>
-            <p className="text-sm text-muted-foreground mt-1">Format und Komprimierungsstufe auswählen.</p>
-          </div>
-        </AccordionTrigger>
-        <AccordionContent className="px-6 pb-6">
-          <QualitySettings settings={settings} onSettingsChange={onSettingsChange} />
-        </AccordionContent>
-      </AccordionItem>
-    </Accordion>
+        <AccordionItem value="quality-settings" className="border rounded-lg bg-card">
+          <AccordionTrigger className="p-6 hover:no-underline">
+            <div className="text-left">
+              <h3 className="text-lg font-medium leading-none">Qualitätseinstellungen</h3>
+              <p className="text-sm text-muted-foreground mt-1">Format und Komprimierungsstufe auswählen.</p>
+            </div>
+          </AccordionTrigger>
+          <AccordionContent className="px-6 pb-6">
+            <QualitySettings settings={settings} onSettingsChange={onSettingsChange} />
+          </AccordionContent>
+        </AccordionItem>
+      </Accordion>
+    </div>
   );
 }
\ No newline at end of file
diff --git a/src/components/settings/preset-settings.tsx b/src/components/settings/preset-settings.tsx
new file mode 100644
index 0000000..cacaca5
--- /dev/null
+++ b/src/components/settings/preset-settings.tsx
@@ -0,0 +1,67 @@
+"use client";
+
+import { ConversionSettings } from "@/types";
+import { Label } from "@/components/ui/label";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { toast } from "sonner";
+
+type Preset = {
+  name: string;
+  settings: Partial<ConversionSettings>;
+};
+
+const presets: Preset[] = [
+  {
+    name: "Header",
+    settings: { width: "1920", height: "1080", quality: 100, scaleMode: 'cover', objectPosition: 'center center', aspectRatio: '16/9' },
+  },
+  {
+    name: "Normal",
+    settings: { width: "1000", height: "700", quality: 80, scaleMode: 'cover', objectPosition: 'center center', aspectRatio: 'custom' },
+  },
+  {
+    name: "Background",
+    settings: { width: "1500", height: "1500", quality: 90, scaleMode: 'cover', objectPosition: 'center center', aspectRatio: '1/1' },
+  },
+];
+
+interface PresetSettingsProps {
+  onSettingsChange: (settings: Partial<ConversionSettings>) => void;
+}
+
+export function PresetSettings({ onSettingsChange }: PresetSettingsProps) {
+  const handlePresetSelect = (presetName: string) => {
+    const selectedPreset = presets.find(p => p.name === presetName);
+    if (selectedPreset) {
+      onSettingsChange(selectedPreset.settings);
+      toast.success(`Preset "${selectedPreset.name}" angewendet.`);
+    }
+  };
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle className="text-lg font-medium leading-none">Presets</CardTitle>
+        <p className="text-sm text-muted-foreground mt-1">Schnell gängige Einstellungen anwenden.</p>
+      </CardHeader>
+      <CardContent>
+        <div className="space-y-2">
+          <Label htmlFor="presets">Preset auswählen</Label>
+          <Select onValueChange={handlePresetSelect}>
+            <SelectTrigger id="presets">
+              <SelectValue placeholder="Preset auswählen..." />
+            </SelectTrigger>
+            <SelectContent>
+              {presets.map((preset) => (
+                <SelectItem key={preset.name} value={preset.name}>
+                  {preset.name}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+        </div>
+      </CardContent>
+    </Card>
+  );
+}
\ No newline at end of file