Changes

Co-authored-by: renee-png <262607627+renee-png@users.noreply.github.com>

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">