carnet uix layout
This commit is contained in:
parent
5a6f87227d
commit
d52fe0f064
@ -33,12 +33,11 @@ interface NextcloudStatus {
|
||||
|
||||
export default function CarnetPage() {
|
||||
const { data: session, status } = useSession();
|
||||
const [layout, setLayout] = useState<PaneLayout>(PaneLayout.ItemSelection);
|
||||
const [nextcloudFolders, setNextcloudFolders] = useState<string[]>([]);
|
||||
const [selectedFolder, setSelectedFolder] = useState<string | null>(null);
|
||||
const [isLoading, setIsLoading] = useState(true);
|
||||
const [nextcloudStatus, setNextcloudStatus] = useState<NextcloudStatus>({
|
||||
isConnected: false,
|
||||
folders: []
|
||||
});
|
||||
const [layoutMode, setLayoutMode] = useState<PaneLayout>(PaneLayout.ItemSelection);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [selectedNote, setSelectedNote] = useState<Note | null>(null);
|
||||
const [isMobile, setIsMobile] = useState(false);
|
||||
const [showNav, setShowNav] = useState(true);
|
||||
@ -54,36 +53,26 @@ export default function CarnetPage() {
|
||||
const isSmallScreen = useMediaQuery("(max-width: 768px)");
|
||||
const isMediumScreen = useMediaQuery("(max-width: 1024px)");
|
||||
|
||||
// Check Nextcloud connection and get folders
|
||||
useEffect(() => {
|
||||
async function checkNextcloudConnection() {
|
||||
const fetchNextcloudFolders = async () => {
|
||||
try {
|
||||
const response = await fetch('/api/nextcloud/status');
|
||||
const data = await response.json();
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error(data.error || 'Failed to connect to Nextcloud');
|
||||
throw new Error('Failed to fetch Nextcloud folders');
|
||||
}
|
||||
|
||||
setNextcloudStatus({
|
||||
isConnected: true,
|
||||
folders: data.folders || []
|
||||
});
|
||||
} catch (error) {
|
||||
console.error('Nextcloud connection error:', error);
|
||||
setNextcloudStatus({
|
||||
isConnected: false,
|
||||
folders: [],
|
||||
error: error instanceof Error ? error.message : 'Failed to connect to Nextcloud'
|
||||
});
|
||||
toast.error("Impossible de se connecter à Nextcloud. Veuillez vérifier votre connexion.");
|
||||
const data = await response.json();
|
||||
setNextcloudFolders(data.folders || []);
|
||||
setError(null);
|
||||
} catch (err) {
|
||||
setError(err instanceof Error ? err.message : 'An error occurred');
|
||||
setNextcloudFolders([]);
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
if (session?.user) {
|
||||
checkNextcloudConnection();
|
||||
}
|
||||
}, [session]);
|
||||
fetchNextcloudFolders();
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
if (status === "unauthenticated") {
|
||||
@ -139,99 +128,50 @@ export default function CarnetPage() {
|
||||
console.log('Saving note:', note);
|
||||
};
|
||||
|
||||
const handleFolderSelect = (folder: string) => {
|
||||
setSelectedFolder(folder);
|
||||
setLayout(PaneLayout.ItemSelection);
|
||||
};
|
||||
|
||||
if (isLoading) {
|
||||
return (
|
||||
<div className="flex h-screen items-center justify-center">
|
||||
<div className="h-32 w-32 animate-spin rounded-full border-t-2 border-b-2 border-gray-900"></div>
|
||||
<div className="flex items-center justify-center h-screen">
|
||||
<div className="animate-spin rounded-full h-8 w-8 border-b-2 border-carnet-primary"></div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (!nextcloudStatus.isConnected) {
|
||||
if (error) {
|
||||
return (
|
||||
<div className="flex h-[calc(100vh-3.5rem)] mt-14 items-center justify-center bg-carnet-bg">
|
||||
<div className="text-center">
|
||||
<h2 className="text-xl font-semibold text-carnet-text-primary mb-2">
|
||||
Connexion à Nextcloud impossible
|
||||
</h2>
|
||||
<p className="text-carnet-text-muted mb-4">
|
||||
{nextcloudStatus.error || "Veuillez vérifier votre connexion et réessayer."}
|
||||
</p>
|
||||
<button
|
||||
onClick={() => window.location.reload()}
|
||||
className="px-4 py-2 bg-primary text-white rounded-md hover:bg-primary/90"
|
||||
>
|
||||
Réessayer
|
||||
</button>
|
||||
</div>
|
||||
<div className="flex items-center justify-center h-screen">
|
||||
<div className="text-red-500">{error}</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<main className="flex h-[calc(100vh-3.5rem)] mt-14 bg-carnet-bg">
|
||||
{/* Navigation Panel */}
|
||||
{showNav && (
|
||||
<>
|
||||
<div
|
||||
className="flex flex-col h-full bg-carnet-sidebar"
|
||||
style={{ width: `${navWidth}px` }}
|
||||
>
|
||||
<Navigation onLayoutChange={setLayoutMode} nextcloudFolders={nextcloudStatus.folders} />
|
||||
</div>
|
||||
|
||||
{/* Navigation Resizer */}
|
||||
<PanelResizer
|
||||
isDragging={isDraggingNav}
|
||||
onDragStart={() => setIsDraggingNav(true)}
|
||||
onDragEnd={() => setIsDraggingNav(false)}
|
||||
onDrag={handleNavResize}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
|
||||
{/* Notes Panel */}
|
||||
{showNotes && (
|
||||
<>
|
||||
<div
|
||||
className="flex flex-col h-full bg-carnet-bg"
|
||||
style={{ width: `${notesWidth}px` }}
|
||||
>
|
||||
<NotesView onNoteSelect={handleNoteSelect} />
|
||||
</div>
|
||||
|
||||
{/* Notes Resizer */}
|
||||
<PanelResizer
|
||||
isDragging={isDraggingNotes}
|
||||
onDragStart={() => setIsDraggingNotes(true)}
|
||||
onDragEnd={() => setIsDraggingNotes(false)}
|
||||
onDrag={handleNotesResize}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
|
||||
{/* Editor Panel */}
|
||||
<div className="flex-1 flex flex-col h-full bg-carnet-bg">
|
||||
<Editor note={selectedNote} onSave={handleNoteSave} />
|
||||
</div>
|
||||
|
||||
{/* Mobile Navigation Toggle */}
|
||||
{isMobile && (
|
||||
<div className="fixed bottom-4 right-4 flex space-x-2">
|
||||
<button
|
||||
className="p-2 rounded-full bg-primary text-white"
|
||||
onClick={() => setShowNav(!showNav)}
|
||||
>
|
||||
{showNav ? 'Hide Nav' : 'Show Nav'}
|
||||
</button>
|
||||
<button
|
||||
className="p-2 rounded-full bg-primary text-white"
|
||||
onClick={() => setShowNotes(!showNotes)}
|
||||
>
|
||||
{showNotes ? 'Hide Notes' : 'Show Notes'}
|
||||
</button>
|
||||
<div className="flex h-screen bg-carnet-background">
|
||||
<Navigation
|
||||
layout={layout}
|
||||
onLayoutChange={setLayout}
|
||||
nextcloudFolders={nextcloudFolders}
|
||||
onFolderSelect={handleFolderSelect}
|
||||
/>
|
||||
<div className="flex-1 flex flex-col">
|
||||
<Header />
|
||||
<div className="flex-1 overflow-hidden">
|
||||
{selectedFolder ? (
|
||||
<div className="p-6">
|
||||
<h2 className="text-2xl font-semibold mb-4">{selectedFolder}</h2>
|
||||
{/* Add your folder content here */}
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex items-center justify-center h-full">
|
||||
<p className="text-carnet-text-muted">Select a folder to view its contents</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
11
components/carnet/header.tsx
Normal file
11
components/carnet/header.tsx
Normal file
@ -0,0 +1,11 @@
|
||||
interface HeaderProps {
|
||||
title: string;
|
||||
}
|
||||
|
||||
export default function Header({ title }: HeaderProps) {
|
||||
return (
|
||||
<div className="h-16 border-b border-carnet-border flex items-center px-6">
|
||||
<h1 className="text-xl font-semibold text-carnet-text-primary">{title}</h1>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@ -5,11 +5,13 @@ import { Search, BookOpen, Tag, Trash2, Star, Archive, X, Folder } from 'lucide-
|
||||
import { PaneLayout } from '@/app/carnet/page';
|
||||
|
||||
interface NavigationProps {
|
||||
onLayoutChange?: (layout: PaneLayout) => void;
|
||||
nextcloudFolders?: string[];
|
||||
layout: PaneLayout;
|
||||
onLayoutChange: (layout: PaneLayout) => void;
|
||||
nextcloudFolders: string[];
|
||||
onFolderSelect: (folder: string) => void;
|
||||
}
|
||||
|
||||
export const Navigation: React.FC<NavigationProps> = ({ onLayoutChange, nextcloudFolders = [] }) => {
|
||||
export default function Navigation({ layout, onLayoutChange, nextcloudFolders, onFolderSelect }: NavigationProps) {
|
||||
const [searchQuery, setSearchQuery] = useState('');
|
||||
|
||||
return (
|
||||
@ -75,29 +77,10 @@ export const Navigation: React.FC<NavigationProps> = ({ onLayoutChange, nextclou
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Favorites Section */}
|
||||
<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">
|
||||
<div className="flex items-center px-3 py-2 rounded-md hover:bg-carnet-hover cursor-pointer">
|
||||
<span className="text-sm text-carnet-text-primary">Journal</span>
|
||||
<span className="ml-auto text-xs text-carnet-text-muted">2</span>
|
||||
</div>
|
||||
<div className="flex items-center px-3 py-2 rounded-md hover:bg-carnet-hover cursor-pointer">
|
||||
<span className="text-sm text-carnet-text-primary">Santé</span>
|
||||
<span className="ml-auto text-xs text-carnet-text-muted">1</span>
|
||||
</div>
|
||||
<div className="flex items-center px-3 py-2 rounded-md hover:bg-carnet-hover cursor-pointer">
|
||||
<span className="text-sm text-carnet-text-primary">Daily Notes</span>
|
||||
<span className="ml-auto text-xs text-carnet-text-muted">7</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Nextcloud Folders */}
|
||||
{/* Nextcloud Folders Section */}
|
||||
{nextcloudFolders.length > 0 && (
|
||||
<div className="mt-6 px-3">
|
||||
<h3 className="px-3 mb-2 text-xs font-medium text-carnet-text-muted uppercase">Dossiers Nextcloud</h3>
|
||||
<h3 className="px-3 mb-2 text-xs font-medium text-carnet-text-muted uppercase">Vues</h3>
|
||||
<div className="space-y-0.5">
|
||||
{nextcloudFolders.map((folder) => (
|
||||
<div
|
||||
@ -114,4 +97,4 @@ export const Navigation: React.FC<NavigationProps> = ({ onLayoutChange, nextclou
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user