From 00923e8898ed5ee2e47a3c2f13a8e00e2a5929ab Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Wed, 25 Mar 2026 02:23:45 +0000
Subject: [PATCH] refactor: use shared FormHelpers in SummaryTemplateDialog
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Remove 4 duplicated CSS class constants and replace manual Select/Switch
blocks with SelectField and SwitchField from FormHelpers.

225 → 185 lines (-18%)

https://claude.ai/code/session_01YMyUwpk577EradV93tMMqS
---
 .../components/SummaryTemplateDialog.tsx      | 63 ++++---------------
 1 file changed, 12 insertions(+), 51 deletions(-)

diff --git a/web/frontend/src/features/settings/components/SummaryTemplateDialog.tsx b/web/frontend/src/features/settings/components/SummaryTemplateDialog.tsx
index 6ab2eb42..8594380f 100644
--- a/web/frontend/src/features/settings/components/SummaryTemplateDialog.tsx
+++ b/web/frontend/src/features/settings/components/SummaryTemplateDialog.tsx
@@ -3,10 +3,8 @@ import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, D
 import { Input } from "@/components/ui/input";
 import { Textarea } from "@/components/ui/textarea";
 import { Button } from "@/components/ui/button";
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
-import { Switch } from "@/components/ui/switch";
 import { useAuth } from "@/features/auth/hooks/useAuth";
-import { FormField } from "@/components/transcription/FormHelpers";
+import { FormField, SelectField, SwitchField, inputClassName } from "@/components/transcription/FormHelpers";
 import { Loader2 } from "lucide-react";
 
 export interface SummaryTemplate {
@@ -27,30 +25,6 @@ interface SummaryTemplateDialogProps {
   initial?: SummaryTemplate | null;
 }
 
-// Styled class constants
-const inputClassName = `
-  h-11 bg-[var(--bg-main)] border border-[var(--border-subtle)] rounded-xl
-  text-[var(--text-primary)] placeholder:text-[var(--text-tertiary)]
-  focus:border-[var(--brand-solid)] focus:ring-2 focus:ring-[var(--brand-solid)]/20
-  transition-all duration-200
-  [color-scheme:light] dark:[color-scheme:dark]
-`;
-
-const selectTriggerClassName = `
-  h-11 bg-[var(--bg-main)] border border-[var(--border-subtle)] rounded-xl
-  text-[var(--text-primary)] shadow-none
-  focus:border-[var(--brand-solid)] focus:ring-2 focus:ring-[var(--brand-solid)]/20
-`;
-
-const selectContentClassName = `
-  bg-[var(--bg-card)] border border-[var(--border-subtle)] rounded-xl
-`;
-
-const selectItemClassName = `
-  text-[var(--text-primary)] rounded-lg mx-1 cursor-pointer
-  focus:bg-[var(--brand-light)] focus:text-[var(--brand-solid)]
-`;
-
 export function SummaryTemplateDialog({ open, onOpenChange, onSave, initial }: SummaryTemplateDialogProps) {
   const [name, setName] = useState("");
   const [description, setDescription] = useState("");
@@ -134,23 +108,13 @@ export function SummaryTemplateDialog({ open, onOpenChange, onSave, initial }: S
           </FormField>
 
           {/* Model Selection */}
-          <FormField
+          <SelectField
             label="Model"
             description="Choose the LLM model to use for generating summaries."
-          >
-            <Select value={model} onValueChange={setModel}>
-              <SelectTrigger className={selectTriggerClassName}>
-                <SelectValue placeholder={models.length ? 'Select a model' : 'No models available'} />
-              </SelectTrigger>
-              <SelectContent className={selectContentClassName}>
-                {models.map((m) => (
-                  <SelectItem key={m} value={m} className={selectItemClassName}>
-                    {m}
-                  </SelectItem>
-                ))}
-              </SelectContent>
-            </Select>
-          </FormField>
+            value={model}
+            onValueChange={setModel}
+            options={models}
+          />
 
           {/* Description Field */}
           <FormField label="Description" htmlFor="templateDesc" optional>
@@ -183,15 +147,12 @@ Summarize the following transcript into concise bullet points. Focus on key deci
           </FormField>
 
           {/* Include Speaker Info Toggle */}
-          <FormField
-            label="Include Speaker Identification"
-            description="When enabled, speaker labels will be included in the transcript sent to the model. Useful for meeting notes and multi-speaker content."
-          >
-            <Switch
-              checked={includeSpeakerInfo}
-              onCheckedChange={setIncludeSpeakerInfo}
-            />
-          </FormField>
+          <SwitchField
+            id="includeSpeakerInfo"
+            label="Include speaker identification in transcript"
+            checked={includeSpeakerInfo}
+            onCheckedChange={setIncludeSpeakerInfo}
+          />
         </div>
 
         {/* Footer */}