226 lines
12 KiB
TypeScript
226 lines
12 KiB
TypeScript
'use client';
|
|
|
|
import React, { useState, useEffect } from 'react';
|
|
import { Document, DocumentActivity, docApi } from '@/lib/api-docs';
|
|
import {
|
|
ClockIcon,
|
|
DocumentIcon,
|
|
PlusIcon,
|
|
MagnifyingGlassIcon,
|
|
ChevronRightIcon,
|
|
HomeIcon,
|
|
ArrowUpIcon,
|
|
FolderIcon,
|
|
FolderOpenIcon
|
|
} from "@heroicons/react/24/outline";
|
|
import { format, parseISO } from 'date-fns';
|
|
import { ptBR } from 'date-fns/locale';
|
|
import { toast } from 'react-hot-toast';
|
|
|
|
interface DocumentSidebarProps {
|
|
documentId: string;
|
|
onNavigate: (doc: Document) => void;
|
|
}
|
|
|
|
export default function DocumentSidebar({ documentId, onNavigate }: DocumentSidebarProps) {
|
|
const [currentDoc, setCurrentDoc] = useState<Document | null>(null);
|
|
const [children, setChildren] = useState<Document[]>([]);
|
|
const [parentDoc, setParentDoc] = useState<Document | null>(null);
|
|
const [rootPages, setRootPages] = useState<Document[]>([]);
|
|
const [activities, setActivities] = useState<DocumentActivity[]>([]);
|
|
const [activeTab, setActiveTab] = useState<'subpages' | 'activities'>('subpages');
|
|
const [searchTerm, setSearchTerm] = useState('');
|
|
const [loading, setLoading] = useState(false);
|
|
|
|
useEffect(() => {
|
|
if (documentId) {
|
|
fetchData();
|
|
}
|
|
}, [documentId]);
|
|
|
|
const fetchData = async () => {
|
|
setLoading(true);
|
|
console.log('🔍 Sidebar fetching data for:', documentId);
|
|
|
|
const fetchSafely = async (promise: Promise<any>) => {
|
|
try { return await promise; }
|
|
catch (e) { console.warn('Sidebar part failed:', e); return null; }
|
|
};
|
|
|
|
try {
|
|
const [doc, roots, logs, subpages] = await Promise.all([
|
|
docApi.getDocument(documentId),
|
|
fetchSafely(docApi.getDocuments()),
|
|
fetchSafely(docApi.getActivities(documentId)),
|
|
fetchSafely(docApi.getSubpages(documentId))
|
|
]);
|
|
|
|
if (doc) {
|
|
setCurrentDoc(doc);
|
|
setChildren(subpages || []);
|
|
if (doc.parent_id) {
|
|
const parent = await fetchSafely(docApi.getDocument(doc.parent_id));
|
|
setParentDoc(parent);
|
|
} else {
|
|
setParentDoc(null);
|
|
}
|
|
}
|
|
|
|
setRootPages(roots || []);
|
|
setActivities(logs || []);
|
|
} catch (e) {
|
|
console.error('❌ Sidebar critical error:', e);
|
|
toast.error('Erro ao carregar estrutura');
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
const handleCreateSubpage = async () => {
|
|
try {
|
|
const newDoc = await docApi.createDocument({
|
|
title: 'Nova Subpágina',
|
|
parent_id: documentId as any,
|
|
content: '{"type":"doc","content":[{"type":"paragraph"}]}',
|
|
status: 'published'
|
|
});
|
|
toast.success('Página criada!');
|
|
// Refresh local para aparecer imediatamente
|
|
setChildren(prev => [...prev, newDoc]);
|
|
onNavigate(newDoc);
|
|
} catch (e) {
|
|
toast.error('Erro ao criar subpágina');
|
|
}
|
|
};
|
|
|
|
const filteredChildren = children.filter(p => p.title.toLowerCase().includes(searchTerm.toLowerCase()));
|
|
const rootWikis = rootPages.filter(p => !p.parent_id);
|
|
|
|
return (
|
|
<div className="w-72 border-r border-zinc-200 dark:border-zinc-800 bg-zinc-50 dark:bg-zinc-950 flex flex-col h-full overflow-hidden shrink-0">
|
|
{/* Tabs de Navegação */}
|
|
<div className="flex border-b border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-950">
|
|
<button
|
|
onClick={() => setActiveTab('subpages')}
|
|
className={`flex-1 px-4 py-4 text-[10px] font-black uppercase tracking-widest transition-all ${activeTab === 'subpages' ? 'text-brand-500 bg-brand-50/10 border-b-2 border-brand-500' : 'text-zinc-500'}`}
|
|
>
|
|
Estrutura
|
|
</button>
|
|
<button
|
|
onClick={() => setActiveTab('activities')}
|
|
className={`flex-1 px-4 py-4 text-[10px] font-black uppercase tracking-widest transition-all ${activeTab === 'activities' ? 'text-brand-500 bg-brand-50/10 border-b-2 border-brand-500' : 'text-zinc-500'}`}
|
|
>
|
|
Histórico
|
|
</button>
|
|
</div>
|
|
|
|
<div className="flex-1 overflow-y-auto custom-scrollbar p-4 space-y-6">
|
|
{activeTab === 'subpages' ? (
|
|
<>
|
|
{/* Status do Nível Atual */}
|
|
<div className="space-y-3">
|
|
{parentDoc && (
|
|
<button
|
|
onClick={() => onNavigate(parentDoc)}
|
|
className="w-full flex items-center gap-2 p-2 px-3 rounded-lg hover:bg-zinc-100 dark:hover:bg-zinc-900 text-zinc-400 hover:text-brand-500 transition-all group border border-dashed border-zinc-200 dark:border-zinc-800"
|
|
>
|
|
<ArrowUpIcon className="w-3 h-3 transition-transform group-hover:-translate-y-0.5" />
|
|
<span className="text-[9px] font-black uppercase tracking-widest truncate">Pai: {parentDoc.title}</span>
|
|
</button>
|
|
)}
|
|
|
|
<div className="p-3 rounded-xl bg-white dark:bg-zinc-900 border border-zinc-200 dark:border-zinc-800 shadow-sm flex items-center gap-3">
|
|
<div className="w-8 h-8 rounded-lg bg-brand-50 dark:bg-brand-500/10 flex items-center justify-center text-brand-500">
|
|
<FolderOpenIcon className="w-5 h-5" />
|
|
</div>
|
|
<div className="flex-1 min-w-0">
|
|
<p className="text-[10px] font-black text-zinc-400 uppercase tracking-tighter">Você está em</p>
|
|
<p className="text-xs font-bold text-zinc-900 dark:text-white truncate">{currentDoc?.title || 'Sem título'}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Search */}
|
|
<div className="relative">
|
|
<MagnifyingGlassIcon className={`absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 transition-colors ${loading ? 'text-brand-500 animate-pulse' : 'text-zinc-400'}`} />
|
|
<input
|
|
type="text"
|
|
placeholder="Filtrar subpáginas..."
|
|
value={searchTerm}
|
|
onChange={(e) => setSearchTerm(e.target.value)}
|
|
className="w-full bg-white dark:bg-zinc-900 border border-zinc-200 dark:border-zinc-800 rounded-xl pl-10 pr-4 py-2 text-xs outline-none focus:ring-2 ring-brand-500/20"
|
|
/>
|
|
</div>
|
|
|
|
{/* Subpages (Children) */}
|
|
<div className="space-y-1">
|
|
<div className="flex items-center justify-between px-2 mb-2">
|
|
<p className="text-[10px] font-black text-zinc-400 uppercase tracking-widest">Subpáginas ({children.length})</p>
|
|
<button
|
|
onClick={handleCreateSubpage}
|
|
className="p-1 text-zinc-400 hover:text-brand-500 bg-white dark:bg-zinc-900 border border-zinc-200 dark:border-zinc-800 rounded-md shadow-sm transition-all"
|
|
>
|
|
<PlusIcon className="w-3.5 h-3.5" />
|
|
</button>
|
|
</div>
|
|
|
|
{filteredChildren.length === 0 && (
|
|
<div className="text-center py-6 border border-dashed border-zinc-200 dark:border-zinc-800 rounded-xl">
|
|
<p className="text-[10px] text-zinc-400 uppercase font-black">Nenhuma subpágina</p>
|
|
</div>
|
|
)}
|
|
|
|
{filteredChildren.map(page => (
|
|
<button
|
|
key={page.id}
|
|
onClick={() => onNavigate(page)}
|
|
className={`w-full flex items-center gap-3 px-3 py-2.5 rounded-xl transition-all group border border-transparent hover:border-zinc-100 dark:hover:border-zinc-800 ${documentId === page.id ? 'bg-brand-500 text-white shadow-lg' : 'hover:bg-white dark:hover:bg-zinc-900 text-zinc-600 dark:text-zinc-400'}`}
|
|
>
|
|
<DocumentIcon className={`w-4 h-4 ${documentId === page.id ? 'text-white' : 'text-zinc-300 group-hover:text-brand-500'}`} />
|
|
<span className="text-xs font-bold truncate flex-1 text-left">{page.title || 'Subpágina'}</span>
|
|
<ChevronRightIcon className={`w-3 h-3 opacity-0 group-hover:opacity-100 ${documentId === page.id ? 'text-white' : ''}`} />
|
|
</button>
|
|
))}
|
|
</div>
|
|
|
|
{/* Root wikis */}
|
|
{!searchTerm && (
|
|
<div className="pt-4 border-t border-zinc-100 dark:border-zinc-800 space-y-1">
|
|
<p className="px-3 text-[10px] font-black text-zinc-400 uppercase tracking-widest mb-3">Todas as Wikis</p>
|
|
{rootWikis.map(page => (
|
|
<button
|
|
key={page.id}
|
|
onClick={() => onNavigate(page)}
|
|
className={`w-full flex items-center gap-3 px-3 py-2 rounded-xl transition-all group ${documentId === page.id ? 'text-brand-500 font-bold' : 'text-zinc-500 hover:bg-white dark:hover:bg-zinc-900'}`}
|
|
>
|
|
<HomeIcon className="w-3.5 h-3.5" />
|
|
<span className="text-[11px] font-semibold truncate flex-1 text-left">{page.title || 'Início'}</span>
|
|
</button>
|
|
))}
|
|
</div>
|
|
)}
|
|
</>
|
|
) : (
|
|
<div className="space-y-6">
|
|
{activities.map(log => (
|
|
<div key={log.id} className="flex gap-4">
|
|
<div className="w-8 h-8 rounded-full bg-zinc-100 dark:bg-zinc-800 flex items-center justify-center text-[10px] font-black text-zinc-400 shrink-0">
|
|
{log.user_name?.[0]?.toUpperCase()}
|
|
</div>
|
|
<div className="min-w-0 pt-0.5">
|
|
<p className="text-[11px] text-zinc-900 dark:text-zinc-100 leading-tight">
|
|
<span className="font-bold">{log.user_name}</span> {log.description}
|
|
</p>
|
|
<span className="text-[9px] text-zinc-400 uppercase font-black block mt-1">
|
|
{format(parseISO(log.created_at), "dd MMM, HH:mm", { locale: ptBR })}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|