alma/Neah
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

carnet panel

Browse Source
This commit is contained in:
alma 2025-04-20 19:02:45 +02:00
parent a5e51cdd6b
commit 1cd3b63d53
1 changed files with 71 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

121
components/carnet/navigation.tsx
View File

@ -1,13 +1,28 @@
"use client"; "use client";
import React, { useState } from 'react'; import React, { useState } from 'react';
import { Search, FileText, Calendar, Heart, Users, ChevronRight, Folder } from 'lucide-react'; import { Search, BookOpen, Tag, Trash2, Star, Archive, X, Folder, FileText, Calendar, Heart, Users, LucideIcon, ChevronRight } from 'lucide-react';
interface NavigationProps { interface NavigationProps {
nextcloudFolders: string[]; nextcloudFolders: string[];
onFolderSelect: (folder: string) => void; onFolderSelect: (folder: string) => void;
} }
type FolderType = 'Notes' | 'Diary' | 'Health' | 'Contacts';
interface FolderConfig {
icon: LucideIcon;
order: number;
}
// Define folder order and icons
const FOLDER_CONFIG: Record<FolderType, FolderConfig> = {
'Notes': { icon: FileText, order: 1 },
'Diary': { icon: Calendar, order: 2 },
'Health': { icon: Heart, order: 3 },
'Contacts': { icon: Users, order: 4 }
};
interface ContactGroup { interface ContactGroup {
name: string; name: string;
contacts: string[]; contacts: string[];
@ -48,82 +63,88 @@ export default function Navigation({ nextcloudFolders, onFolderSelect }: Navigat
} }
}; };
// Sort folders according to the specified order
const sortedFolders = [...nextcloudFolders].sort((a, b) => {
const orderA = (FOLDER_CONFIG[a as FolderType]?.order) || 999;
const orderB = (FOLDER_CONFIG[b as FolderType]?.order) || 999;
return orderA - orderB;
});
return ( return (
<div className="flex flex-col h-full bg-carnet-bg border-r border-carnet-border"> <div className="flex flex-col h-full bg-carnet-sidebar">
{/* Search Bar */} {/* Search */}
<div className="p-4 border-b border-carnet-border"> <div className="p-4">
<div className="relative"> <div className="relative">
<input <input
type="text" type="text"
value={searchQuery} value={searchQuery}
onChange={(e) => setSearchQuery(e.target.value)} onChange={(e) => setSearchQuery(e.target.value)}
placeholder="Rechercher..." placeholder="Recherché..."
className="w-full pl-9 pr-4 py-2 bg-white border border-carnet-border rounded-md text-sm text-carnet-text-primary placeholder-carnet-text-muted focus:outline-none focus:ring-1 focus:ring-primary" className="w-full pl-9 pr-4 py-2 bg-white border border-carnet-border rounded-md text-sm text-carnet-text-primary placeholder-carnet-text-muted focus:outline-none focus:ring-1 focus:ring-primary"
/> />
<Search className="absolute left-3 top-2.5 h-4 w-4 text-carnet-text-muted" /> <Search className="absolute left-3 top-2.5 h-4 w-4 text-carnet-text-muted" />
{searchQuery && (
<button
onClick={() => setSearchQuery('')}
className="absolute right-3 top-2.5 text-carnet-text-muted hover:text-carnet-text-primary"
>
<X className="h-4 w-4" />
</button>
)}
</div> </div>
</div> </div>
{/* Folders List */} {/* Folders */}
<div className="flex-1 overflow-y-auto"> <div className="flex-1 overflow-y-auto p-4">
<ul className="py-2"> <div className="space-y-1">
{nextcloudFolders.map((folder) => ( {sortedFolders.map((folder) => {
<li key={folder}> const Icon = getFolderIcon(folder);
{folder === 'Contacts' ? ( return (
<> <div key={folder}>
<button <button
onClick={() => onFolderSelect(folder)} onClick={() => onFolderSelect(folder)}
className="w-full flex items-center px-4 py-2 text-sm text-carnet-text-primary hover:bg-carnet-hover" className="w-full flex items-center space-x-2 px-3 py-2 text-sm rounded-md text-carnet-text-primary hover:bg-carnet-hover"
> >
<Users className="h-4 w-4 mr-2" /> <Icon className="h-4 w-4" />
<span>{folder}</span> <span>{folder}</span>
</button> </button>
{/* Contact Groups */} {folder === 'Contacts' && (
<ul className="ml-6"> <div className="ml-4 mt-1 space-y-1">
{contactGroups.map((group) => ( {contactGroups.map((group) => (
<li key={group.name}> <div key={group.name}>
<button <button
onClick={() => toggleGroup(group.name)} onClick={() => toggleGroup(group.name)}
className="w-full flex items-center px-4 py-2 text-sm text-carnet-text-primary hover:bg-carnet-hover" className="w-full flex items-center space-x-2 px-3 py-2 text-sm rounded-md text-carnet-text-primary hover:bg-carnet-hover"
> >
<ChevronRight <ChevronRight
className={`h-4 w-4 mr-2 transition-transform ${ className={`h-4 w-4 transition-transform ${
expandedGroups.has(group.name) ? 'transform rotate-90' : '' expandedGroups.has(group.name) ? 'transform rotate-90' : ''
}`} }`}
/> />
<Folder className="h-4 w-4 mr-2" /> <Folder className="h-4 w-4" />
<span>{group.name}</span> <span>{group.name}</span>
</button> </button>
{expandedGroups.has(group.name) && ( {expandedGroups.has(group.name) && (
<ul className="ml-4"> <div className="ml-4 space-y-1">
{group.contacts.map((contact) => ( {group.contacts.map((contact) => (
<li key={contact}> <button
<button key={contact}
onClick={() => onFolderSelect(`${folder}/${group.name}/${contact}`)} onClick={() => onFolderSelect(`${folder}/${group.name}/${contact}`)}
className="w-full flex items-center px-4 py-2 text-sm text-carnet-text-muted hover:bg-carnet-hover" className="w-full flex items-center space-x-2 px-3 py-2 text-sm rounded-md text-carnet-text-muted hover:bg-carnet-hover"
> >
<span className="ml-6">{contact}</span> <span>{contact}</span>
</button> </button>
</li>
))} ))}
</ul> </div>
)} )}
</li> </div>
))} ))}
</ul> </div>
</> )}
) : ( </div>
<button );
onClick={() => onFolderSelect(folder)} })}
className="w-full flex items-center px-4 py-2 text-sm text-carnet-text-primary hover:bg-carnet-hover" </div>
>
{React.createElement(getFolderIcon(folder), { className: "h-4 w-4 mr-2" })}
<span>{folder}</span>
</button>
)}
</li>
))}
</ul>
</div> </div>
</div> </div>
); );