From 8d5451829f920002e9cfbd0787a20ec4dfce635e 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 20:12:05 +0000
Subject: [PATCH] Changes

Co-authored-by: renee-png <262607627+renee-png@users.noreply.github.com>
---
 .../quick-add/quick-add-call-log.tsx          | 97 ++++++++++++++-----
 1 file changed, 75 insertions(+), 22 deletions(-)

diff --git a/src/components/quick-add/quick-add-call-log.tsx b/src/components/quick-add/quick-add-call-log.tsx
index 709e414..7a9df58 100644
--- a/src/components/quick-add/quick-add-call-log.tsx
+++ b/src/components/quick-add/quick-add-call-log.tsx
@@ -249,28 +249,81 @@ export function QuickAddCallLog() {
 
           <div>
             <Label>Contact (optional)</Label>
-            <SearchableSelect
-              value={contactId}
-              onValueChange={(id) => {
-                setContactId(id);
-                const c = contacts.find((x) => x.id === id);
-                if (c) {
-                  if (!callerName) setCallerName(c.name);
-                  if (!callerPhone && c.phone) setCallerPhone(c.phone);
-                }
-              }}
-              placeholder="Select contact or enter manually below"
-              searchPlaceholder="Search contacts…"
-              emptyText="No contacts found."
-              options={[
-                { value: "", label: "— None —", keywords: "none" },
-                ...contacts.map((c) => ({
-                  value: c.id,
-                  label: c.phone ? `${c.name} (${c.phone})` : c.name,
-                  keywords: `${c.name} ${c.phone ?? ""}`,
-                })),
-              ]}
-            />
+            <Popover open={contactPopoverOpen} onOpenChange={setContactPopoverOpen}>
+              <PopoverTrigger asChild>
+                <Button
+                  type="button"
+                  variant="outline"
+                  className="w-full justify-between font-normal"
+                >
+                  {selectedContact ? (
+                    <span className="truncate">
+                      {selectedContact.name}
+                      {selectedContact.phone ? ` (${selectedContact.phone})` : ""}
+                    </span>
+                  ) : (
+                    <span className="text-muted-foreground">Search contacts…</span>
+                  )}
+                  <Search className="h-3.5 w-3.5 ml-2 opacity-50 shrink-0" />
+                </Button>
+              </PopoverTrigger>
+              <PopoverContent className="w-[var(--radix-popover-trigger-width)] p-0" align="start">
+                <div className="p-2 border-b">
+                  <Input
+                    autoFocus
+                    value={contactQuery}
+                    onChange={(e) => setContactQuery(e.target.value)}
+                    placeholder="Type to search all contacts…"
+                    className="h-8 text-sm"
+                  />
+                </div>
+                <div className="max-h-72 overflow-auto">
+                  {selectedContact && (
+                    <button
+                      type="button"
+                      onClick={() => {
+                        setSelectedContact(null);
+                        setContactId("");
+                        setContactPopoverOpen(false);
+                      }}
+                      className="w-full text-left px-3 py-2 text-xs text-muted-foreground hover:bg-muted/60 border-b"
+                    >
+                      Clear selection
+                    </button>
+                  )}
+                  {contactSearching ? (
+                    <p className="text-xs text-muted-foreground p-3">Searching…</p>
+                  ) : contactResults.length === 0 ? (
+                    <p className="text-xs text-muted-foreground p-3">
+                      {contactQuery.trim() ? "No matching contacts." : "Start typing to search."}
+                    </p>
+                  ) : (
+                    <ul className="divide-y">
+                      {contactResults.map((c) => (
+                        <li key={c.id}>
+                          <button
+                            type="button"
+                            onClick={() => {
+                              setContactId(c.id);
+                              setSelectedContact(c);
+                              if (!callerName) setCallerName(c.name);
+                              if (!callerPhone && c.phone) setCallerPhone(c.phone);
+                              setContactPopoverOpen(false);
+                            }}
+                            className="w-full text-left px-3 py-2 hover:bg-muted/60"
+                          >
+                            <div className="text-sm font-medium truncate">{c.name}</div>
+                            {c.phone && (
+                              <div className="text-[11px] text-muted-foreground truncate">{c.phone}</div>
+                            )}
+                          </button>
+                        </li>
+                      ))}
+                    </ul>
+                  )}
+                </div>
+              </PopoverContent>
+            </Popover>
           </div>
 
           <div className="grid grid-cols-2 gap-3">