[dyad] wrote 6 file(s), added @tanstack/react-query package(s)

package.json

@@ -9,6 +9,8 @@
     "build:css": "tailwindcss -i ./public/css/styles.css -o ./public/css/dist/styles.css --minify"
   },
   "dependencies": {
+    "@tanstack/react-query": "^5.90.7",
+    "autoprefixer": "^10.4.16",
     "bcrypt": "^5.1.1",
     "cors": "^2.8.5",
     "express": "^4.18.2",
@@ -17,13 +19,12 @@
     "helmet": "^7.1.0",
     "jsonwebtoken": "^9.0.2",
     "multer": "^1.4.5-lts.1",
-    "sqlite3": "^5.1.7",
-    "uuid": "^9.0.1",
-    "winston": "^3.11.0",
-    "tailwindcss": "^3.3.5",
-    "autoprefixer": "^10.4.16",
     "postcss": "^8.4.31",
-    "postcss-cli": "^10.1.0"
+    "postcss-cli": "^10.1.0",
+    "sqlite3": "^5.1.7",
+    "tailwindcss": "^3.3.5",
+    "uuid": "^9.0.1",
+    "winston": "^3.11.0"
   },
   "devDependencies": {
     "nodemon": "^3.0.3"

src/App.tsx

@@ -1,6 +1,7 @@
 import { Toaster } from "@/components/ui/toaster";
 import { Toaster as Sonner } from "@/components/ui/sonner";
 import { TooltipProvider } from "@/components/ui/tooltip";
+import { ThemeProvider } from "@/components/theme-provider";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { BrowserRouter, Routes, Route, Navigate } from "react-router-dom";
 import { useEffect, useState } from "react";
@@ -45,29 +46,35 @@ const App = () => {
   }, []);
 
   if (isLoading) {
-    return <div>Chargement...</div>;
+    return (
+      <div className="min-h-screen flex items-center justify-center">
+        <div className="animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-primary"></div>
+      </div>
+    );
   }
 
   return (
     <QueryClientProvider client={queryClient}>
-      <TooltipProvider>
-        <Toaster />
-        <Sonner />
-        <BrowserRouter>
-          <Routes>
-            <Route path="/login" element={<Login />} />
-            <Route
-              path="/"
-              element={
-                <ProtectedRoute>
-                  <Index />
-                </ProtectedRoute>
-              }
-            />
-            <Route path="*" element={<NotFound />} />
-          </Routes>
-        </BrowserRouter>
-      </TooltipProvider>
+      <ThemeProvider defaultTheme="light" storageKey="notes-theme">
+        <TooltipProvider>
+          <Toaster />
+          <Sonner />
+          <BrowserRouter>
+            <Routes>
+              <Route path="/login" element={<Login />} />
+              <Route
+                path="/"
+                element={
+                  <ProtectedRoute>
+                    <Index />
+                  </ProtectedRoute>
+                }
+              />
+              <Route path="*" element={<NotFound />} />
+            </Routes>
+          </BrowserRouter>
+        </TooltipProvider>
+      </ThemeProvider>
     </QueryClientProvider>
   );
 };

src/components/theme-provider.tsx

@@ -0,0 +1,76 @@
+"use client";
+
+import * as React from "react";
+import { createContext, useContext, useEffect, useState } from "react";
+
+type Theme = "dark" | "light" | "system";
+
+type ThemeProviderProps = {
+  children: React.ReactNode;
+  defaultTheme?: Theme;
+  storageKey?: string;
+};
+
+type ThemeProviderState = {
+  theme: Theme;
+  setTheme: (theme: Theme) => void;
+};
+
+const initialState: ThemeProviderState = {
+  theme: "system",
+  setTheme: () => null,
+};
+
+const ThemeProviderContext = createContext<ThemeProviderState>(initialState);
+
+export function ThemeProvider({
+  children,
+  defaultTheme = "system",
+  storageKey = "ui-theme",
+  ...props
+}: ThemeProviderProps) {
+  const [theme, setTheme] = useState<Theme>(
+    () => (localStorage.getItem(storageKey) as Theme) || defaultTheme
+  );
+
+  useEffect(() => {
+    const root = window.document.documentElement;
+
+    root.classList.remove("light", "dark");
+
+    if (theme === "system") {
+      const systemTheme = window.matchMedia("(prefers-color-scheme: dark)")
+        .matches
+        ? "dark"
+        : "light";
+
+      root.classList.add(systemTheme);
+      return;
+    }
+
+    root.classList.add(theme);
+  }, [theme]);
+
+  const value = {
+    theme,
+    setTheme: (theme: Theme) => {
+      localStorage.setItem(storageKey, theme);
+      setTheme(theme);
+    },
+  };
+
+  return (
+    <ThemeProviderContext.Provider {...props} value={value}>
+      {children}
+    </ThemeProviderContext.Provider>
+  );
+}
+
+export const useTheme = () => {
+  const context = useContext(ThemeProviderContext);
+
+  if (context === undefined)
+    throw new Error("useTheme must be used within a ThemeProvider");
+
+  return context;
+};

src/pages/Index.tsx

@@ -1,12 +1,20 @@
 import { useEffect, useState } from "react";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
+import { Card, CardContent } from "@/components/ui/card";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription } from "@/components/ui/dialog";
+import { Avatar, AvatarFallback } from "@/components/ui/avatar";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger } from "@/components/ui/dropdown-menu";
 import { showSuccess } from "@/utils/toast";
 import { MadeWithDyad } from "@/components/made-with-dyad";
+import { PlusCircle, Search, User, LogOut, Settings, ChevronDown, Plus, Archive, Trash2, Image, CheckSquare } from "lucide-react";
 
 const Index = () => {
   const [user, setUser] = useState<any>(null);
   const [showAdmin, setShowAdmin] = useState(false);
+  const [activeTab, setActiveTab] = useState("all");
+  const [searchQuery, setSearchQuery] = useState("");
 
   useEffect(() => {
     const userStr = localStorage.getItem("user");
@@ -23,94 +31,239 @@ const Index = () => {
   };
 
   return (
-    <div className="min-h-screen bg-gray-50">
+    <div className="min-h-screen bg-gray-50 dark:bg-gray-900">
       {/* Top Navigation */}
-      <nav className="bg-white border-b border-gray-200 fixed w-full z-30 top-0">
-        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-          <div className="flex justify-between h-16">
-            <div className="flex">
-              <div className="flex-shrink-0 flex items-center">
-                <span className="text-xl font-semibold">Notes App</span>
-              </div>
-            </div>
-            <div className="flex items-center space-x-4">
-              <span className="text-sm text-gray-500">
-                Connecté en tant que <span className="font-medium">{user?.username}</span>
-              </span>
-              {user?.is_admin && (
-                <Button
-                  variant="outline"
-                  onClick={() => setShowAdmin(true)}
+      <header className="bg-white dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700 sticky top-0 z-30">
+        <div className="max-w-screen-2xl mx-auto px-4">
+          <div className="flex h-16 items-center justify-between">
+            <div className="flex items-center gap-2">
+              <div className="h-8 w-8 rounded-full bg-primary/10 flex items-center justify-center">
+                <svg 
+                  xmlns="http://www.w3.org/2000/svg" 
+                  viewBox="0 0 24 24" 
+                  fill="none" 
+                  stroke="currentColor" 
+                  strokeWidth="2" 
+                  strokeLinecap="round" 
+                  strokeLinejoin="round" 
+                  className="h-4 w-4 text-primary"
                 >
-                  Administration
-                </Button>
-              )}
-              <Button
-                variant="outline"
-                onClick={handleLogout}
-              >
-                Déconnexion
-              </Button>
+                  <path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"></path>
+                </svg>
+              </div>
+              <span className="text-xl font-semibold">Notes App</span>
+            </div>
+            
+            <div className="flex items-center gap-4">
+              <DropdownMenu>
+                <DropdownMenuTrigger asChild>
+                  <Button variant="ghost" className="flex items-center gap-2">
+                    <Avatar className="h-8 w-8">
+                      <AvatarFallback className="bg-primary/10 text-primary">
+                        {user?.username?.charAt(0).toUpperCase() || "U"}
+                      </AvatarFallback>
+                    </Avatar>
+                    <span className="font-medium">{user?.username}</span>
+                    <ChevronDown className="h-4 w-4 text-muted-foreground" />
+                  </Button>
+                </DropdownMenuTrigger>
+                <DropdownMenuContent align="end" className="w-56">
+                  <DropdownMenuLabel>Mon compte</DropdownMenuLabel>
+                  <DropdownMenuSeparator />
+                  {user?.is_admin && (
+                    <DropdownMenuItem onClick={() => setShowAdmin(true)}>
+                      <Settings className="mr-2 h-4 w-4" />
+                      <span>Administration</span>
+                    </DropdownMenuItem>
+                  )}
+                  <DropdownMenuItem onClick={handleLogout}>
+                    <LogOut className="mr-2 h-4 w-4" />
+                    <span>Déconnexion</span>
+                  </DropdownMenuItem>
+                </DropdownMenuContent>
+              </DropdownMenu>
             </div>
           </div>
         </div>
-      </nav>
+      </header>
 
       {/* Main Content */}
-      <div className="pt-16 grid grid-cols-[300px_1fr] h-screen">
-        {/* Sidebar */}
-        <aside className="bg-white border-r border-gray-200 p-4">
-          <div className="space-y-4">
-            <Input
-              type="search"
-              placeholder="Rechercher une note..."
-              className="w-full"
-            />
-            <Button className="w-full">
+      <div className="max-w-screen-2xl mx-auto px-4 py-6">
+        <div className="grid grid-cols-1 md:grid-cols-[300px_1fr] gap-6">
+          {/* Sidebar */}
+          <div className="space-y-6">
+            <div className="relative">
+              <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
+              <Input
+                type="search"
+                placeholder="Rechercher une note..."
+                className="pl-9"
+                value={searchQuery}
+                onChange={(e) => setSearchQuery(e.target.value)}
+              />
+            </div>
+            
+            <Button className="w-full flex items-center gap-2" size="lg">
+              <PlusCircle className="h-4 w-4" />
               Nouvelle Note
             </Button>
+            
+            <Tabs defaultValue="all" value={activeTab} onValueChange={setActiveTab}>
+              <TabsList className="grid grid-cols-2 w-full">
+                <TabsTrigger value="all">Toutes</TabsTrigger>
+                <TabsTrigger value="archived">Archivées</TabsTrigger>
+              </TabsList>
+            </Tabs>
+            
             <div className="space-y-2">
-              {/* Notes list will go here */}
+              {/* Notes list placeholder */}
+              <Card className="cursor-pointer hover:shadow-md transition-shadow">
+                <CardContent className="p-4">
+                  <h3 className="font-medium">Note d'exemple</h3>
+                  <p className="text-sm text-muted-foreground line-clamp-2">
+                    Ceci est un exemple de contenu de note. Cliquez pour éditer.
+                  </p>
+                </CardContent>
+              </Card>
             </div>
           </div>
-        </aside>
 
-        {/* Note Editor */}
-        <main className="p-6 bg-gray-50">
-          <div className="bg-white rounded-lg shadow p-6">
-            <Input
-              type="text"
-              placeholder="Titre de la note"
-              className="text-xl font-semibold mb-4"
-            />
-            <div
-              className="min-h-[500px] p-4 border rounded-lg"
-              contentEditable
-              suppressContentEditableWarning
-            />
+          {/* Note Editor */}
+          <div className="space-y-4">
+            <div className="flex items-center justify-between">
+              <Input
+                type="text"
+                placeholder="Titre de la note"
+                className="text-xl font-semibold border-none shadow-none text-2xl h-auto px-0 focus-visible:ring-0"
+              />
+              
+              <div className="flex items-center gap-2">
+                <Button variant="outline" size="icon">
+                  <Archive className="h-4 w-4" />
+                </Button>
+                <Button variant="outline" size="icon">
+                  <Trash2 className="h-4 w-4" />
+                </Button>
+              </div>
+            </div>
+            
+            <Tabs defaultValue="content">
+              <TabsList>
+                <TabsTrigger value="content">Contenu</TabsTrigger>
+                <TabsTrigger value="todos">Tâches</TabsTrigger>
+                <TabsTrigger value="images">Images</TabsTrigger>
+              </TabsList>
+              
+              <TabsContent value="content" className="mt-4">
+                <Card>
+                  <CardContent className="p-4">
+                    <div
+                      className="min-h-[500px] outline-none"
+                      contentEditable
+                      suppressContentEditableWarning
+                      placeholder="Commencez à écrire..."
+                    />
+                  </CardContent>
+                </Card>
+              </TabsContent>
+              
+              <TabsContent value="todos" className="mt-4">
+                <Card>
+                  <CardContent className="p-4 space-y-4">
+                    <div className="flex items-center gap-2">
+                      <Button variant="outline" size="sm" className="flex items-center gap-2">
+                        <Plus className="h-4 w-4" />
+                        Ajouter une tâche
+                      </Button>
+                    </div>
+                    
+                    <div className="space-y-2">
+                      <div className="flex items-center gap-2 p-2 border rounded-md">
+                        <CheckSquare className="h-4 w-4 text-muted-foreground" />
+                        <span>Exemple de tâche</span>
+                      </div>
+                    </div>
+                  </CardContent>
+                </Card>
+              </TabsContent>
+              
+              <TabsContent value="images" className="mt-4">
+                <Card>
+                  <CardContent className="p-4 space-y-4">
+                    <div className="flex items-center gap-2">
+                      <Button variant="outline" size="sm" className="flex items-center gap-2">
+                        <Image className="h-4 w-4" />
+                        Ajouter une image
+                      </Button>
+                    </div>
+                    
+                    <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-4">
+                      {/* Image placeholders */}
+                    </div>
+                  </CardContent>
+                </Card>
+              </TabsContent>
+            </Tabs>
           </div>
-        </main>
+        </div>
       </div>
 
       {/* Admin Modal */}
-      {showAdmin && (
-        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
-          <div className="bg-white rounded-lg p-6 w-[600px] max-h-[80vh] overflow-y-auto">
-            <div className="flex justify-between items-center mb-4">
-              <h2 className="text-xl font-semibold">Administration</h2>
-              <Button
-                variant="ghost"
-                onClick={() => setShowAdmin(false)}
-              >
-                ✕
+      <Dialog open={showAdmin} onOpenChange={setShowAdmin}>
+        <DialogContent className="max-w-3xl max-h-[80vh] overflow-y-auto">
+          <DialogHeader>
+            <DialogTitle>Administration</DialogTitle>
+            <DialogDescription>
+              Gérez les utilisateurs et les paramètres de l'application
+            </DialogDescription>
+          </DialogHeader>
+          
+          <Tabs defaultValue="users">
+            <TabsList className="grid grid-cols-2 w-full">
+              <TabsTrigger value="users">Utilisateurs</TabsTrigger>
+              <TabsTrigger value="settings">Paramètres</TabsTrigger>
+            </TabsList>
+            
+            <TabsContent value="users" className="mt-4 space-y-4">
+              <Button className="flex items-center gap-2">
+                <User className="h-4 w-4" />
+                Ajouter un utilisateur
               </Button>
-            </div>
-            {/* Admin content will go here */}
-          </div>
-        </div>
-      )}
+              
+              <div className="space-y-2">
+                <Card>
+                  <CardContent className="p-4 flex items-center justify-between">
+                    <div className="flex items-center gap-3">
+                      <Avatar>
+                        <AvatarFallback>AD</AvatarFallback>
+                      </Avatar>
+                      <div>
+                        <p className="font-medium">admin</p>
+                        <p className="text-sm text-muted-foreground">Administrateur</p>
+                      </div>
+                    </div>
+                    <div className="flex items-center gap-2">
+                      <Button variant="outline" size="sm">Modifier</Button>
+                    </div>
+                  </CardContent>
+                </Card>
+              </div>
+            </TabsContent>
+            
+            <TabsContent value="settings" className="mt-4">
+              <Card>
+                <CardContent className="p-4">
+                  <p>Paramètres de l'application</p>
+                </CardContent>
+              </Card>
+            </TabsContent>
+          </Tabs>
+        </DialogContent>
+      </Dialog>
 
-      <MadeWithDyad />
+      <div className="fixed bottom-4 right-4">
+        <MadeWithDyad />
+      </div>
     </div>
   );
 };

src/pages/Login.tsx

@@ -1,15 +1,18 @@
 import { useState } from "react";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Card, CardContent, CardHeader, CardTitle, CardDescription, CardFooter } from "@/components/ui/card";
 import { showError, showSuccess } from "@/utils/toast";
+import { MadeWithDyad } from "@/components/made-with-dyad";
 
 const Login = () => {
   const [username, setUsername] = useState("");
   const [password, setPassword] = useState("");
+  const [isLoading, setIsLoading] = useState(false);
 
   const handleLogin = async (e: React.FormEvent) => {
     e.preventDefault();
+    setIsLoading(true);
     
     try {
       const response = await fetch("/api/auth/login", {
@@ -30,47 +33,86 @@ const Login = () => {
       window.location.href = "/";
     } catch (error) {
       showError(error instanceof Error ? error.message : "Erreur de connexion");
+    } finally {
+      setIsLoading(false);
     }
   };
 
   return (
-    <div className="min-h-screen flex items-center justify-center bg-gray-50">
-      <Card className="w-[400px]">
-        <CardHeader>
-          <CardTitle className="text-2xl text-center">Notes App</CardTitle>
-        </CardHeader>
-        <CardContent>
-          <form onSubmit={handleLogin} className="space-y-4">
-            <div className="space-y-2">
-              <label htmlFor="username" className="text-sm font-medium">
-                Nom d'utilisateur
-              </label>
-              <Input
-                id="username"
-                type="text"
-                value={username}
-                onChange={(e) => setUsername(e.target.value)}
-                required
-              />
+    <div className="min-h-screen flex flex-col items-center justify-center bg-gradient-to-br from-gray-50 to-gray-100 dark:from-gray-900 dark:to-gray-800 p-4">
+      <div className="w-full max-w-md">
+        <Card className="border-none shadow-xl">
+          <CardHeader className="space-y-1 text-center">
+            <div className="flex justify-center mb-2">
+              <div className="h-12 w-12 rounded-full bg-primary/10 flex items-center justify-center">
+                <svg 
+                  xmlns="http://www.w3.org/2000/svg" 
+                  viewBox="0 0 24 24" 
+                  fill="none" 
+                  stroke="currentColor" 
+                  strokeWidth="2" 
+                  strokeLinecap="round" 
+                  strokeLinejoin="round" 
+                  className="h-6 w-6 text-primary"
+                >
+                  <path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"></path>
+                </svg>
+              </div>
             </div>
-            <div className="space-y-2">
-              <label htmlFor="password" className="text-sm font-medium">
-                Mot de passe
-              </label>
-              <Input
-                id="password"
-                type="password"
-                value={password}
-                onChange={(e) => setPassword(e.target.value)}
-                required
-              />
-            </div>
-            <Button type="submit" className="w-full">
-              Se connecter
-            </Button>
-          </form>
-        </CardContent>
-      </Card>
+            <CardTitle className="text-2xl font-bold">Notes App</CardTitle>
+            <CardDescription>
+              Connectez-vous pour accéder à vos notes
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <form onSubmit={handleLogin} className="space-y-4">
+              <div className="space-y-2">
+                <label htmlFor="username" className="text-sm font-medium">
+                  Nom d'utilisateur
+                </label>
+                <Input
+                  id="username"
+                  type="text"
+                  value={username}
+                  onChange={(e) => setUsername(e.target.value)}
+                  placeholder="Entrez votre nom d'utilisateur"
+                  required
+                  className="h-11"
+                  autoComplete="username"
+                />
+              </div>
+              <div className="space-y-2">
+                <div className="flex items-center justify-between">
+                  <label htmlFor="password" className="text-sm font-medium">
+                    Mot de passe
+                  </label>
+                </div>
+                <Input
+                  id="password"
+                  type="password"
+                  value={password}
+                  onChange={(e) => setPassword(e.target.value)}
+                  placeholder="Entrez votre mot de passe"
+                  required
+                  className="h-11"
+                  autoComplete="current-password"
+                />
+              </div>
+              <Button type="submit" className="w-full h-11" disabled={isLoading}>
+                {isLoading ? "Connexion en cours..." : "Se connecter"}
+              </Button>
+            </form>
+          </CardContent>
+          <CardFooter className="text-center text-sm text-muted-foreground">
+            <p className="w-full">
+              Par défaut: <span className="font-medium">admin / admin</span>
+            </p>
+          </CardFooter>
+        </Card>
+      </div>
+      <div className="mt-8">
+        <MadeWithDyad />
+      </div>
     </div>
   );
 };