feat: add setting to toggle alphabetical grouping in contacts list

components/contacts/contact-list.tsx

@@ -137,6 +137,7 @@ export function ContactList({
   const t = useTranslations("contacts");
   const locale = useLocale();
   const density = useSettingsStore((state) => state.density);
+  const groupByLetter = useSettingsStore((state) => state.groupContactsByLetter);
   const { contextMenu, openContextMenu, closeContextMenu, menuRef } = useContextMenu<ContactCard>();
   const [filtersOpen, setFiltersOpen] = useState(false);
   const [filters, setFilters] = useState<ListFilters>(EMPTY_FILTERS);
@@ -528,43 +529,50 @@ export function ContactList({
             )}
           </div>
         ) : (
-          <div>
+          (() => {
-            {groupedSections.map(({ letter, items }) => (
+            const renderItem = (contact: ContactCard) => (
-              <section key={letter}>
+              <ContactListItem
-                <div className="sticky top-0 z-10 px-4 py-0.5 bg-background/90 backdrop-blur-sm text-[11px] font-medium text-muted-foreground/70 uppercase tracking-wide">
+                key={contact.id}
-                  {letter}
+                contact={contact}
-                </div>
+                isSelected={contact.id === selectedContactId}
-                {items.map((contact) => (
+                isChecked={selectedContactIds.has(contact.id)}
-                  <ContactListItem
+                hasSelection={hasSelection}
-                    key={contact.id}
+                density={density}
-                    contact={contact}
+                selectedContactIds={selectedContactIds}
-                    isSelected={contact.id === selectedContactId}
+                onClick={(e) => {
-                    isChecked={selectedContactIds.has(contact.id)}
+                  if (e.ctrlKey || e.metaKey) {
-                    hasSelection={hasSelection}
+                    e.preventDefault();
-                    density={density}
+                    onToggleSelection(contact.id);
-                    selectedContactIds={selectedContactIds}
+                  } else if (e.shiftKey) {
-                    onClick={(e) => {
+                    e.preventDefault();
-                      if (e.ctrlKey || e.metaKey) {
+                    onSelectRangeContacts(contact.id, sortedIds);
-                        e.preventDefault();
+                  } else {
-                        onToggleSelection(contact.id);
+                    if (hasSelection) onClearSelection();
-                      } else if (e.shiftKey) {
+                    onSelectContact(contact.id);
-                        e.preventDefault();
+                  }
-                        onSelectRangeContacts(contact.id, sortedIds);
+                }}
-                      } else {
+                onCheckboxClick={(e) => {
-                        if (hasSelection) onClearSelection();
+                  e.stopPropagation();
-                        onSelectContact(contact.id);
+                  onToggleSelection(contact.id);
-                      }
+                }}
-                    }}
+                onContextMenu={(e, c) => openContextMenu(e, c)}
-                    onCheckboxClick={(e) => {
+              />
-                      e.stopPropagation();
+            );
-                      onToggleSelection(contact.id);
+            return groupByLetter ? (
-                    }}
+              <div>
-                    onContextMenu={(e, c) => openContextMenu(e, c)}
+                {groupedSections.map(({ letter, items }) => (
-                  />
+                  <section key={letter}>
+                    <div className="sticky top-0 z-10 px-4 py-0.5 bg-background/90 backdrop-blur-sm text-[11px] font-medium text-muted-foreground/70 uppercase tracking-wide">
+                      {letter}
+                    </div>
+                    {items.map(renderItem)}
+                  </section>
                 ))}
-              </section>
+              </div>
-            ))}
+            ) : (
-          </div>
+              <div>{sorted.map(renderItem)}</div>
+            );
+          })()
         )}
       </div>
 

components/settings/contacts-settings.tsx

@@ -4,11 +4,12 @@ import { useState, useCallback } from "react";
 import { useTranslations } from "next-intl";
 import { Upload, Download } from "lucide-react";
 import { Button } from "@/components/ui/button";
-import { SettingsSection, SettingItem } from "./settings-section";
+import { SettingsSection, SettingItem, ToggleSwitch } from "./settings-section";
 import { ContactImportDialog } from "@/components/contacts/contact-import-dialog";
 import { exportContacts } from "@/components/contacts/contact-export";
 import { useContactStore } from "@/stores/contact-store";
 import { useAuthStore } from "@/stores/auth-store";
+import { useSettingsStore } from "@/stores/settings-store";
 import { toast } from "@/stores/toast-store";
 
 export function ContactsSettings() {
@@ -20,6 +21,8 @@ export function ContactsSettings() {
     supportsSync,
     importContacts,
   } = useContactStore();
+  const groupContactsByLetter = useSettingsStore((s) => s.groupContactsByLetter);
+  const updateSetting = useSettingsStore((s) => s.updateSetting);
   const [showImport, setShowImport] = useState(false);
 
   const individuals = contacts.filter(c => c.kind !== "group");
@@ -55,6 +58,16 @@ export function ContactsSettings() {
       title={tSettings("title")}
       description={tSettings("description")}
     >
+      <SettingItem
+        label={tSettings("group_by_letter_label")}
+        description={tSettings("group_by_letter_description")}
+      >
+        <ToggleSwitch
+          checked={groupContactsByLetter}
+          onChange={(checked) => updateSetting("groupContactsByLetter", checked)}
+        />
+      </SettingItem>
+
       <SettingItem
         label={tSettings("import_label")}
         description={tSettings("import_description")}

locales/en/common.json

@@ -1322,6 +1322,8 @@
     "contacts": {
       "title": "Contacts",
       "description": "Import and export your contacts",
+      "group_by_letter_label": "Group by first letter",
+      "group_by_letter_description": "Show alphabetical section headers in the contact list",
       "import_label": "Import Contacts",
       "import_description": "Import contacts from a vCard (.vcf) file",
       "export_label": "Export Contacts",

stores/settings-store.ts

@@ -160,6 +160,9 @@ interface SettingsState {
   showBirthdayCalendar: boolean;
   birthdayCalendarColor: string;
 
+  // Contacts Display
+  groupContactsByLetter: boolean;
+
   // Email Notifications
   emailNotificationsEnabled: boolean;
   emailNotificationSound: boolean;
@@ -304,6 +307,9 @@ const DEFAULT_SETTINGS = {
   showBirthdayCalendar: false,
   birthdayCalendarColor: '#eab308',
 
+  // Contacts Display
+  groupContactsByLetter: true,
+
   // Email Notifications
   emailNotificationsEnabled: true,
   emailNotificationSound: true,
@@ -459,6 +465,7 @@ export const useSettingsStore = create<SettingsState>()(
           showTasksOnCalendar: state.showTasksOnCalendar,
           showBirthdayCalendar: state.showBirthdayCalendar,
           birthdayCalendarColor: state.birthdayCalendarColor,
+          groupContactsByLetter: state.groupContactsByLetter,
           expandedFilterView: state.expandedFilterView,
           showTimeInMonthView: state.showTimeInMonthView,
           showWeekNumbers: state.showWeekNumbers,