diff --git a/components/contacts/contact-list.tsx b/components/contacts/contact-list.tsx index a72e9390..c8445fe6 100644 --- a/components/contacts/contact-list.tsx +++ b/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(); const [filtersOpen, setFiltersOpen] = useState(false); const [filters, setFilters] = useState(EMPTY_FILTERS); @@ -528,43 +529,50 @@ export function ContactList({ )} ) : ( -
- {groupedSections.map(({ letter, items }) => ( -
-
- {letter} -
- {items.map((contact) => ( - { - if (e.ctrlKey || e.metaKey) { - e.preventDefault(); - onToggleSelection(contact.id); - } else if (e.shiftKey) { - e.preventDefault(); - onSelectRangeContacts(contact.id, sortedIds); - } else { - if (hasSelection) onClearSelection(); - onSelectContact(contact.id); - } - }} - onCheckboxClick={(e) => { - e.stopPropagation(); - onToggleSelection(contact.id); - }} - onContextMenu={(e, c) => openContextMenu(e, c)} - /> + (() => { + const renderItem = (contact: ContactCard) => ( + { + if (e.ctrlKey || e.metaKey) { + e.preventDefault(); + onToggleSelection(contact.id); + } else if (e.shiftKey) { + e.preventDefault(); + onSelectRangeContacts(contact.id, sortedIds); + } else { + if (hasSelection) onClearSelection(); + onSelectContact(contact.id); + } + }} + onCheckboxClick={(e) => { + e.stopPropagation(); + onToggleSelection(contact.id); + }} + onContextMenu={(e, c) => openContextMenu(e, c)} + /> + ); + return groupByLetter ? ( +
+ {groupedSections.map(({ letter, items }) => ( +
+
+ {letter} +
+ {items.map(renderItem)} +
))} -
- ))} -
+ + ) : ( +
{sorted.map(renderItem)}
+ ); + })() )} diff --git a/components/settings/contacts-settings.tsx b/components/settings/contacts-settings.tsx index e3e247db..a79d4779 100644 --- a/components/settings/contacts-settings.tsx +++ b/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")} > + + updateSetting("groupContactsByLetter", checked)} + /> + + ()( showTasksOnCalendar: state.showTasksOnCalendar, showBirthdayCalendar: state.showBirthdayCalendar, birthdayCalendarColor: state.birthdayCalendarColor, + groupContactsByLetter: state.groupContactsByLetter, expandedFilterView: state.expandedFilterView, showTimeInMonthView: state.showTimeInMonthView, showWeekNumbers: state.showWeekNumbers,