diff --git a/frontend/src/pages/ContactsList.tsx b/frontend/src/pages/ContactsList.tsx index 78b99df..dd82fc6 100644 --- a/frontend/src/pages/ContactsList.tsx +++ b/frontend/src/pages/ContactsList.tsx @@ -48,6 +48,8 @@ export function ContactsListPage() { const [filterState, setFilterState] = useState(emptyFilterState); const [sortState, setSortState] = useState(emptySortState); const [groupState, setGroupState] = useState(emptyGroupState); + const [viewsOpen, setViewsOpen] = useState(true); + const [foldersOpen, setFoldersOpen] = useState(true); const openWindow = useWindowStore((s) => s.openWindow); // Debounce search @@ -338,7 +340,7 @@ export function ContactsListPage() {
{/* Desktop: three-pane layout with resizable panels */}
- {/* Left: Folder tree — resizable */} + {/* Left: Views + Folder tree as accordions — resizable */} -
- +
+ {/* Accordion 1: Views */} +
+ + {viewsOpen && ( +
+ {[ + { value: 'list', label: t('contacts.viewList'), icon: }, + { value: 'table', label: t('contacts.viewTable'), icon: }, + { value: 'cards', label: t('contacts.viewCards'), icon: }, + ].map((opt) => ( + + ))} +
+ )} +
+ {/* Accordion 2: Folders */} +
+ + {foldersOpen && ( +
+ +
+ )} +
@@ -364,29 +421,6 @@ export function ContactsListPage() { className="border-r border-secondary-200 bg-white" data-testid="contact-list-pane" > - {/* Saved filter bar + tag selector */} -
- { - if (criteria.search) setSearch(criteria.search); else setSearch(''); - if (criteria.sortBy) setSortBy(criteria.sortBy); - if (criteria.sortOrder) setSortOrder(criteria.sortOrder); - if (criteria.type) setSelectedFilter(criteria.type as ContactFilter); - setPage(1); - }} - /> -
- -
-
{/* List — no inline toolbar, all controls are in the plugin toolbar */}