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 18:02:20 +02:00
parent ff7fb74a82
commit 06a1f87422
1 changed files with 70 additions and 63 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

133
components/carnet/navigation.tsx
View File

@ -1,12 +1,12 @@
"use client";
import React, { useState } from 'react';
import { Search, BookOpen, Tag, Trash2, Star, Archive, X, Folder, FileText, Calendar, Heart, Users, LucideIcon } from 'lucide-react';
import { Search, BookOpen, Tag, Trash2, Star, Archive, X, Folder, FileText, Calendar, Heart, Users, LucideIcon, Layout } from 'lucide-react';
import { PaneLayout } from '@/app/carnet/page';
interface NavigationProps {
layout: PaneLayout;
onLayoutChange: (layout: PaneLayout) => void;
layout: string;
onLayoutChange: (layout: string) => void;
nextcloudFolders: string[];
onFolderSelect: (folder: string) => void;
}
@ -26,9 +26,29 @@ const FOLDER_CONFIG: Record<FolderType, FolderConfig> = {
'Contacts': { icon: Users, order: 4 }
};
export default function Navigation({ layout, onLayoutChange, nextcloudFolders, onFolderSelect }: NavigationProps) {
export const Navigation: React.FC<NavigationProps> = ({
layout,
onLayoutChange,
nextcloudFolders,
onFolderSelect,
}) => {
const [searchQuery, setSearchQuery] = useState('');
const getFolderIcon = (folder: string) => {
switch (folder) {
case 'Notes':
return FileText;
case 'Diary':
return Calendar;
case 'Health':
return Heart;
case 'Contacts':
return Users;
default:
return FileText;
}
};
// Sort folders according to the specified order
const sortedFolders = [...nextcloudFolders].sort((a, b) => {
const orderA = (FOLDER_CONFIG[a as FolderType]?.order) || 999;
@ -60,67 +80,54 @@ export default function Navigation({ layout, onLayoutChange, nextcloudFolders, o
</div>
</div>
{/* Navigation Items */}
<div className="flex-1 overflow-y-auto">
<div className="px-3">
<div className="space-y-0.5">
<div
className="flex items-center px-3 py-2 rounded-md hover:bg-carnet-hover cursor-pointer text-carnet-text-primary"
onClick={() => onLayoutChange?.(PaneLayout.ItemSelection)}
>
<BookOpen className="w-4 h-4 mr-3" />
<span className="text-sm">Page</span>
<span className="ml-auto text-xs text-carnet-text-muted">54</span>
</div>
<div
className="flex items-center px-3 py-2 rounded-md hover:bg-carnet-hover cursor-pointer text-carnet-text-primary"
onClick={() => onLayoutChange?.(PaneLayout.TagSelection)}
>
<Star className="w-4 h-4 mr-3" />
<span className="text-sm">Important</span>
</div>
<div
className="flex items-center px-3 py-2 rounded-md hover:bg-carnet-hover cursor-pointer text-carnet-text-primary"
>
<Archive className="w-4 h-4 mr-3" />
<span className="text-sm">Archivé</span>
<span className="ml-auto text-xs text-carnet-text-muted">18</span>
</div>
<div
className="flex items-center px-3 py-2 rounded-md hover:bg-carnet-hover cursor-pointer text-carnet-text-primary"
onClick={() => onLayoutChange?.(PaneLayout.TableView)}
>
<Trash2 className="w-4 h-4 mr-3" />
<span className="text-sm">Corbeille</span>
</div>
</div>
{/* Layout Selection */}
<div className="p-4 border-b border-carnet-border">
<div className="flex items-center space-x-2">
<Layout className="h-4 w-4 text-carnet-text-muted" />
<span className="text-sm font-medium text-carnet-text-primary">Vues</span>
</div>
<div className="mt-2 space-y-1">
<button
onClick={() => onLayoutChange('item-selection')}
className={`w-full px-3 py-2 text-sm rounded-md ${
layout === 'item-selection'
? 'bg-primary text-white'
: 'text-carnet-text-primary hover:bg-carnet-hover'
}`}
>
Liste
</button>
<button
onClick={() => onLayoutChange('table-view')}
className={`w-full px-3 py-2 text-sm rounded-md ${
layout === 'table-view'
? 'bg-primary text-white'
: 'text-carnet-text-primary hover:bg-carnet-hover'
}`}
>
Tableau
</button>
</div>
</div>
{/* Nextcloud Folders Section */}
{sortedFolders.length > 0 && (
<div className="mt-6 px-3">
<h3 className="px-3 mb-2 text-xs font-medium text-carnet-text-muted uppercase">Vues</h3>
<div className="space-y-0.5">
{sortedFolders.map((folder) => {
const Icon = FOLDER_CONFIG[folder as FolderType]?.icon || Folder;
return (
<div
key={folder}
className="flex items-center px-3 py-2 rounded-md hover:bg-carnet-hover cursor-pointer"
onClick={() => onFolderSelect(folder)}
>
<Icon className="w-4 h-4 mr-3 text-carnet-text-muted" />
<span className="text-sm text-carnet-text-primary">{folder}</span>
</div>
);
})}
</div>
</div>
)}
{/* Folders */}
<div className="flex-1 overflow-y-auto p-4">
<div className="space-y-1">
{nextcloudFolders.map((folder) => {
const Icon = getFolderIcon(folder);
return (
<button
key={folder}
onClick={() => onFolderSelect(folder)}
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"
>
<Icon className="h-4 w-4" />
<span>{folder}</span>
</button>
);
})}
</div>
</div>
</div>
);
}
};