Leopoldadmin/leocrm
1
0
Fork 0
Code Issues 363 Pull Requests Actions 1 Packages Projects Releases 1 Wiki Activity

feat: left panel accordions (Views + Folders), remove middle filter bar

Browse Source
This commit is contained in:
Agent Zero
2026-07-28 12:09:02 +02:00
parent 05cc51609b
commit 5f02330b2f
1 changed files with 65 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/pages/ContactsList.tsx
+59 -25
View File
@@ -48,6 +48,8 @@ export function ContactsListPage() {
const [filterState, setFilterState] = useState<FilterState>(emptyFilterState);
const [sortState, setSortState] = useState<SortState>(emptySortState);
const [groupState, setGroupState] = useState<GroupState>(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() {
<div className="flex flex-col h-full" data-testid="contacts-list-page">
{/* Desktop: three-pane layout with resizable panels */}
<div className="hidden md:flex flex-1 overflow-hidden">
{/* Left: Folder tree — resizable */}
{/* Left: Views + Folder tree as accordions — resizable */}
<ResizablePanel
initialWidth={240}
minWidth={150}
@@ -346,7 +348,59 @@ export function ContactsListPage() {
className="border-r border-secondary-200 bg-white"
data-testid="contact-folder-pane"
>
<div className="p-3">
<div className="flex flex-col h-full overflow-y-auto">
{/* Accordion 1: Views */}
<div className="border-b border-secondary-200">
<button
onClick={() => setViewsOpen(!viewsOpen)}
className="w-full flex items-center justify-between px-3 py-2 text-xs font-semibold text-secondary-700 hover:bg-secondary-50 transition-colors"
>
<span className="flex items-center gap-1.5">
<LayoutGrid className="w-3.5 h-3.5" strokeWidth={2} />
Ansichten
</span>
<svg className={`w-3.5 h-3.5 transition-transform ${viewsOpen ? 'rotate-90' : ''}`} fill="none" stroke="currentColor" strokeWidth={2} viewBox="0 0 24 24">
<polyline points="9 18 15 12 9 6" />
</svg>
</button>
{viewsOpen && (
<div className="px-3 pb-2 space-y-0.5">
{[
{ value: 'list', label: t('contacts.viewList'), icon: <List className="w-3.5 h-3.5" strokeWidth={2} /> },
{ value: 'table', label: t('contacts.viewTable'), icon: <Table2 className="w-3.5 h-3.5" strokeWidth={2} /> },
{ value: 'cards', label: t('contacts.viewCards'), icon: <LayoutGrid className="w-3.5 h-3.5" strokeWidth={2} /> },
].map((opt) => (
<button
key={opt.value}
onClick={() => setViewMode(opt.value as ContactViewMode)}
className={`
w-full flex items-center gap-2 px-2 py-1.5 rounded text-xs text-left transition-colors
${viewMode === opt.value ? 'bg-primary-100 text-primary-700 font-medium' : 'text-secondary-600 hover:bg-secondary-100'}
`}
>
{opt.icon}
{opt.label}
</button>
))}
</div>
)}
</div>
{/* Accordion 2: Folders */}
<div className="flex-1">
<button
onClick={() => setFoldersOpen(!foldersOpen)}
className="w-full flex items-center justify-between px-3 py-2 text-xs font-semibold text-secondary-700 hover:bg-secondary-50 transition-colors"
>
<span className="flex items-center gap-1.5">
<Bookmark className="w-3.5 h-3.5" strokeWidth={2} />
Ordner
</span>
<svg className={`w-3.5 h-3.5 transition-transform ${foldersOpen ? 'rotate-90' : ''}`} fill="none" stroke="currentColor" strokeWidth={2} viewBox="0 0 24 24">
<polyline points="9 18 15 12 9 6" />
</svg>
</button>
{foldersOpen && (
<div className="px-3 pb-3">
<ContactFolderTree
selectedFilter={selectedFilter}
onSelect={handleSelectFilter}
@@ -354,6 +408,9 @@ export function ContactsListPage() {
contacts={contacts}
/>
</div>
)}
</div>
</div>
</ResizablePanel>
{/* Middle: Contact list — resizable */}
@@ -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 */}
<div className="flex items-center gap-2 px-3 py-2 border-b border-secondary-200 bg-secondary-50 flex-wrap" data-testid="contacts-filter-bar">
<SavedFilterBar
entityType="contacts"
currentFilters={{ search: debouncedSearch, type: contactType, sortBy, sortOrder, folderId, tagFilter }}
onApplyFilter={(criteria) => {
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);
}}
/>
<div className="flex-1 min-w-[180px]" data-testid="contacts-tag-selector">
<TagSelector
entityType="contact"
entityId={selectedContactId ?? ''}
selectedTags={selectedTags}
onChange={setSelectedTags}
placeholder={t('tags.selectPlaceholder', 'Tags filtern...')}
/>
</div>
</div>
{/* List — no inline toolbar, all controls are in the plugin toolbar */}
<div className="flex-1 min-h-0" id="contacts-table">
<ContactList