From 7db35d8556c5b297fe7b64f7982f5b986d107ffc Mon Sep 17 00:00:00 2001
From: "gpt-engineer-app[bot]"
 <159125892+gpt-engineer-app[bot]@users.noreply.github.com>
Date: Sat, 18 Apr 2026 04:25:41 +0000
Subject: [PATCH] Changes

Co-authored-by: renee-png <262607627+renee-png@users.noreply.github.com>
---
 src/routes/contacts.index.tsx | 27 +++++++++++++++++++++++++++
 1 file changed, 27 insertions(+)

diff --git a/src/routes/contacts.index.tsx b/src/routes/contacts.index.tsx
index 98bdce3..5ce2e07 100644
--- a/src/routes/contacts.index.tsx
+++ b/src/routes/contacts.index.tsx
@@ -284,6 +284,33 @@ function ContactsIndex() {
         ))}
       </div>
 
+      <div className="mb-4 flex flex-wrap gap-1">
+        <Button
+          size="sm"
+          variant={letter === "all" ? "default" : "outline"}
+          className="h-8 px-2.5"
+          onClick={() => setLetter("all")}
+        >
+          All ({letterCounts.all ?? 0})
+        </Button>
+        {"ABCDEFGHIJKLMNOPQRSTUVWXYZ".split("").concat("#").map((L) => {
+          const count = letterCounts[L] ?? 0;
+          const disabled = count === 0;
+          return (
+            <Button
+              key={L}
+              size="sm"
+              variant={letter === L ? "default" : "outline"}
+              className="h-8 w-8 p-0 text-xs"
+              disabled={disabled}
+              onClick={() => setLetter(L)}
+              title={`${L} (${count})`}
+            >
+              {L}
+            </Button>
+          );
+        })}
+
       {selected.size > 0 && (
         <Card className="mb-4 border-primary/50 bg-primary/5">
           <CardContent className="p-3 flex flex-wrap items-center gap-2">