From 23fbd0a2cfcaae6957dd8c7bcfe0d949c3130266 Mon Sep 17 00:00:00 2001
From: "gpt-engineer-app[bot]"
 <159125892+gpt-engineer-app[bot]@users.noreply.github.com>
Date: Sun, 19 Apr 2026 17:08:35 +0000
Subject: [PATCH] Changes

Co-authored-by: renee-png <262607627+renee-png@users.noreply.github.com>
---
 src/components/forms/letter-generator.tsx | 69 +++++++++++------------
 src/routes/documents.pleading.new.tsx     | 44 ++++++++-------
 2 files changed, 56 insertions(+), 57 deletions(-)

diff --git a/src/components/forms/letter-generator.tsx b/src/components/forms/letter-generator.tsx
index 3e2cdc1..bb9754a 100644
--- a/src/components/forms/letter-generator.tsx
+++ b/src/components/forms/letter-generator.tsx
@@ -349,22 +349,21 @@ export function LetterGenerator() {
           <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
             <div>
               <Label>Case (optional)</Label>
-              <Select
+              <SearchableSelect
                 value={caseId || "__none"}
                 onValueChange={(v) => setCaseId(v === "__none" ? "" : v)}
-              >
-                <SelectTrigger>
-                  <SelectValue placeholder="Link to a case" />
-                </SelectTrigger>
-                <SelectContent>
-                  <SelectItem value="__none">— No case —</SelectItem>
-                  {cases.map((c) => (
-                    <SelectItem key={c.id} value={c.id}>
-                      {c.case_number} — {c.title}
-                    </SelectItem>
-                  ))}
-                </SelectContent>
-              </Select>
+                placeholder="Link to a case"
+                searchPlaceholder="Search cases…"
+                emptyText="No cases found."
+                options={[
+                  { value: "__none", label: "— No case —" },
+                  ...cases.map((c) => ({
+                    value: c.id,
+                    label: `${c.case_number} — ${c.title}`,
+                    keywords: `${c.case_number} ${c.title}`,
+                  })),
+                ]}
+              />
             </div>
             <div>
               <Label>
@@ -375,29 +374,25 @@ export function LetterGenerator() {
                   </span>
                 ) : null}
               </Label>
-              <Select value={recipientId} onValueChange={setRecipientId}>
-                <SelectTrigger>
-                  <SelectValue placeholder="Select a contact" />
-                </SelectTrigger>
-                <SelectContent>
-                  {sortedContacts.linked.length > 0 && (
-                    <>
-                      {sortedContacts.linked.map((c) => (
-                        <SelectItem key={c.id} value={c.id}>
-                          ★ {c.name}
-                          {c.company ? ` — ${c.company}` : ""}
-                        </SelectItem>
-                      ))}
-                    </>
-                  )}
-                  {sortedContacts.others.map((c) => (
-                    <SelectItem key={c.id} value={c.id}>
-                      {c.name}
-                      {c.company ? ` — ${c.company}` : ""}
-                    </SelectItem>
-                  ))}
-                </SelectContent>
-              </Select>
+              <SearchableSelect
+                value={recipientId}
+                onValueChange={setRecipientId}
+                placeholder="Select a contact"
+                searchPlaceholder="Search contacts…"
+                emptyText="No contacts found."
+                options={[
+                  ...sortedContacts.linked.map((c) => ({
+                    value: c.id,
+                    label: `★ ${c.name}${c.company ? ` — ${c.company}` : ""}`,
+                    keywords: `${c.name} ${c.company ?? ""}`,
+                  })),
+                  ...sortedContacts.others.map((c) => ({
+                    value: c.id,
+                    label: `${c.name}${c.company ? ` — ${c.company}` : ""}`,
+                    keywords: `${c.name} ${c.company ?? ""}`,
+                  })),
+                ]}
+              />
             </div>
           </div>
           <div>
diff --git a/src/routes/documents.pleading.new.tsx b/src/routes/documents.pleading.new.tsx
index c305f70..c908e63 100644
--- a/src/routes/documents.pleading.new.tsx
+++ b/src/routes/documents.pleading.new.tsx
@@ -333,6 +333,7 @@ function PleadingNewPage() {
               <div className="space-y-1.5">
                 <Label className="text-xs">Client</Label>
                 <Select
+                <SearchableSelect
                   value={clientId || "__none__"}
                   onValueChange={(v) => {
                     const next = v === "__none__" ? "" : v;
@@ -342,29 +343,32 @@ function PleadingNewPage() {
                       if (k && k.client_id !== next) setCaseId("");
                     }
                   }}
-                >
-                  <SelectTrigger><SelectValue placeholder="None" /></SelectTrigger>
-                  <SelectContent className="max-h-72">
-                    <SelectItem value="__none__">— None —</SelectItem>
-                    {clientOptions.map((c) => (
-                      <SelectItem key={c.id} value={c.id}>{c.name}</SelectItem>
-                    ))}
-                  </SelectContent>
-                </Select>
+                  placeholder="None"
+                  searchPlaceholder="Search clients…"
+                  emptyText="No clients found."
+                  options={[
+                    { value: "__none__", label: "— None —" },
+                    ...clientOptions.map((c) => ({ value: c.id, label: c.name, keywords: c.name })),
+                  ]}
+                />
               </div>
               <div className="space-y-1.5">
                 <Label className="text-xs">Case</Label>
-                <Select value={caseId || "__none__"} onValueChange={(v) => setCaseId(v === "__none__" ? "" : v)}>
-                  <SelectTrigger><SelectValue placeholder="None" /></SelectTrigger>
-                  <SelectContent className="max-h-72">
-                    <SelectItem value="__none__">— None —</SelectItem>
-                    {filteredCases.map((k) => (
-                      <SelectItem key={k.id} value={k.id}>
-                        {k.case_number} — {k.title}
-                      </SelectItem>
-                    ))}
-                  </SelectContent>
-                </Select>
+                <SearchableSelect
+                  value={caseId || "__none__"}
+                  onValueChange={(v) => setCaseId(v === "__none__" ? "" : v)}
+                  placeholder="None"
+                  searchPlaceholder="Search cases…"
+                  emptyText="No cases found."
+                  options={[
+                    { value: "__none__", label: "— None —" },
+                    ...filteredCases.map((k) => ({
+                      value: k.id,
+                      label: `${k.case_number} — ${k.title}`,
+                      keywords: `${k.case_number} ${k.title}`,
+                    })),
+                  ]}
+                />
               </div>
             </div>