+
+
+ {/* User menu */}
+
+
+
+ {menuOpen && (
+ <>
+
setMenuOpen(false)}
+ />
+
+
+ {userName}
+
+
setMenuOpen(false)}
+ >
+
+ Se déconnecter
+
+
+
+ )}
+
+
+
+ );
+}
diff --git a/web/src/components/Sidebar.tsx b/web/src/components/Sidebar.tsx
new file mode 100644
index 0000000..014f854
--- /dev/null
+++ b/web/src/components/Sidebar.tsx
@@ -0,0 +1,188 @@
+"use client";
+
+import { useState } from "react";
+import Link from "next/link";
+import { usePathname, useRouter } from "next/navigation";
+import {
+ Inbox,
+ List,
+ Plus,
+ Tag,
+ Menu,
+ X,
+ ChevronDown,
+ ChevronRight,
+} from "lucide-react";
+import type { List as ListType, Tag as TagType } from "@/lib/types";
+
+interface SidebarProps {
+ lists: ListType[];
+ tags: TagType[];
+}
+
+export function Sidebar({ lists, tags }: SidebarProps) {
+ const pathname = usePathname();
+ const router = useRouter();
+ const [mobileOpen, setMobileOpen] = useState(false);
+ const [showNewList, setShowNewList] = useState(false);
+ const [newListName, setNewListName] = useState("");
+ const [tagsExpanded, setTagsExpanded] = useState(false);
+
+ const handleCreateList = async () => {
+ const name = newListName.trim();
+ if (!name) return;
+ await fetch("/api/lists", {
+ method: "POST",
+ headers: { "Content-Type": "application/json" },
+ body: JSON.stringify({ name }),
+ });
+ setNewListName("");
+ setShowNewList(false);
+ router.refresh();
+ };
+
+ const sidebarContent = (
+
+ {/* Header */}
+
+
Simpl-Liste
+
+
+ {/* Lists */}
+
+
+ {/* Sign out */}
+
+
+
+ Se déconnecter
+
+
+
+ );
+
+ return (
+ <>
+ {/* Mobile hamburger */}
+
+
+ {/* Mobile overlay */}
+ {mobileOpen && (
+
setMobileOpen(false)}
+ />
+ )}
+
+ {/* Mobile sidebar */}
+
+
+ {/* Desktop sidebar */}
+
+
+ );
+}
diff --git a/web/src/components/TaskForm.tsx b/web/src/components/TaskForm.tsx
new file mode 100644
index 0000000..ecf017a
--- /dev/null
+++ b/web/src/components/TaskForm.tsx
@@ -0,0 +1,164 @@
+"use client";
+
+import { useState } from "react";
+import { useRouter } from "next/navigation";
+import { Plus, X } from "lucide-react";
+
+const PRIORITY_LABELS = [
+ { value: 0, label: "Aucune", color: "" },
+ { value: 1, label: "Basse", color: "text-vert" },
+ { value: 2, label: "Moyenne", color: "text-sable" },
+ { value: 3, label: "Haute", color: "text-rouge" },
+];
+
+interface TaskFormProps {
+ listId: string;
+ parentId?: string;
+ onClose?: () => void;
+}
+
+export function TaskForm({ listId, parentId, onClose }: TaskFormProps) {
+ const router = useRouter();
+ const [title, setTitle] = useState("");
+ const [notes, setNotes] = useState("");
+ const [priority, setPriority] = useState(0);
+ const [dueDate, setDueDate] = useState("");
+ const [recurrence, setRecurrence] = useState("");
+ const [expanded, setExpanded] = useState(false);
+ const [submitting, setSubmitting] = useState(false);
+
+ const handleSubmit = async (e: React.FormEvent) => {
+ e.preventDefault();
+ if (!title.trim() || submitting) return;
+
+ setSubmitting(true);
+ try {
+ await fetch("/api/tasks", {
+ method: "POST",
+ headers: { "Content-Type": "application/json" },
+ body: JSON.stringify({
+ title: title.trim(),
+ notes: notes || undefined,
+ priority,
+ dueDate: dueDate || undefined,
+ recurrence: recurrence || undefined,
+ listId,
+ parentId: parentId || undefined,
+ }),
+ });
+ setTitle("");
+ setNotes("");
+ setPriority(0);
+ setDueDate("");
+ setRecurrence("");
+ setExpanded(false);
+ router.refresh();
+ onClose?.();
+ } finally {
+ setSubmitting(false);
+ }
+ };
+
+ if (!expanded && !parentId) {
+ return (
+
+ );
+ }
+
+ return (
+