feat: implement admin dashboard with authentication, menu management, and responsive UI components

app/actions/admin.ts

@@ -4,6 +4,7 @@ import { prisma } from '@/lib/db';
 import { verifyPassword } from '@/lib/auth';
 import { cookies } from 'next/headers';
 import { redirect } from 'next/navigation';
+import { revalidatePath } from 'next/cache';
 
 /**
  * Handle admin login.
@@ -67,6 +68,10 @@ export async function addButton(formData: FormData) {
   await prisma.button.create({
     data: { name, url, order: 0 },
   });
+
+  // Revalidate both admin and home pages to reflect new button immediately
+  revalidatePath('/admin');
+  revalidatePath('/');
 }
 
 /**
@@ -75,4 +80,8 @@ export async function addButton(formData: FormData) {
 export async function deleteButton(id: number) {
   if (!(await isAuthenticated())) throw new Error('Non autorisé');
   await prisma.button.delete({ where: { id } });
+
+  // Revalidate both admin and home pages to reflect deletion immediately
+  revalidatePath('/admin');
+  revalidatePath('/');
 }

app/admin/login/page.tsx

@@ -3,6 +3,7 @@
 import React, { useState } from 'react';
 import { GlassCard } from '@/components/GlassCard';
 import { loginAdmin } from '@/app/actions/admin';
+import { Lock } from 'lucide-react';
 
 export default function AdminLoginPage() {
   const [error, setError] = useState<string | null>(null);
@@ -23,35 +24,59 @@ export default function AdminLoginPage() {
   };
 
   return (
-    <div className="container" style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', minHeight: '100vh' }}>
+    <div style={{
-      <GlassCard style={{ width: '100%', maxWidth: '400px' }}>
+      minHeight: '100vh',
-        <h1 style={{ marginBottom: '2rem', fontSize: '1.8rem' }}>Accès Admin</h1>
+      display: 'flex',
-        
+      alignItems: 'center',
-        <form onSubmit={handleSubmit} style={{ display: 'flex', flexDirection: 'column', gap: '1.5rem' }}>
+      justifyContent: 'center',
-          <div>
+      padding: '2rem',
-            <label style={{ display: 'block', marginBottom: '0.5rem', fontSize: '0.9rem', fontWeight: 600 }}>Mot de passe</label>
+    }}>
-            <input name="password" type="password" required placeholder="••••••••" />
+      <div style={{ width: '100%', maxWidth: '380px' }}>
+
+        {/* Logo */}
+        <div style={{ textAlign: 'center', marginBottom: '2rem' }}>
+          <div style={{
+            width: '60px',
+            height: '60px',
+            borderRadius: '18px',
+            background: 'var(--accent)',
+            display: 'inline-flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            marginBottom: '1rem',
+            boxShadow: '0 8px 24px var(--accent-glow)',
+          }}>
+            <Lock size={26} color="white" />
           </div>
+          <h1 style={{ fontSize: '1.6rem', fontWeight: 700, letterSpacing: '-0.03em' }}>
+            Administration
+          </h1>
+          <p style={{ color: 'var(--fg-secondary)', fontSize: '0.88rem', marginTop: '0.4rem' }}>
+            Accès restreint aux administrateurs
+          </p>
+        </div>
 
-          {error && <p style={{ color: 'var(--error)', fontSize: '0.85rem', textAlign: 'center' }}>{error}</p>}
+        <GlassCard style={{ padding: '2rem' }}>
+          <form onSubmit={handleSubmit} style={{ display: 'flex', flexDirection: 'column', gap: '1.2rem' }}>
+            <div>
+              <label style={{ display: 'block', fontSize: '0.82rem', fontWeight: 600, color: 'var(--fg-secondary)', marginBottom: '0.5rem' }}>
+                Mot de passe
+              </label>
+              <input name="password" type="password" required placeholder="••••••••" />
+            </div>
 
-          <button 
+            {error && (
-            type="submit" 
+              <p style={{ color: 'var(--error)', fontSize: '0.85rem', textAlign: 'center', background: 'rgba(255,59,48,0.08)', padding: '0.6rem', borderRadius: '8px' }}>
-            disabled={loading}
+                {error}
-            style={{
+              </p>
-              background: 'var(--accent)',
+            )}
-              color: 'white',
+
-              padding: '1rem',
+            <button type="submit" disabled={loading} className="btn-primary" style={{ marginTop: '0.4rem', width: '100%' }}>
-              borderRadius: '12px',
+              {loading ? 'Connexion...' : 'Se connecter →'}
-              fontWeight: 600,
+            </button>
-              marginTop: '1rem',
+          </form>
-              opacity: loading ? 0.7 : 1
+        </GlassCard>
-            }}
+      </div>
-          >
-            {loading ? 'Connexion...' : 'Se connecter'}
-          </button>
-        </form>
-      </GlassCard>
     </div>
   );
 }

app/admin/page.tsx

@@ -2,10 +2,21 @@ import { prisma } from '@/lib/db';
 import { isAuthenticated, logoutAdmin, addButton, deleteButton } from '@/app/actions/admin';
 import { redirect } from 'next/navigation';
 import { GlassCard } from '@/components/GlassCard';
-import { Trash2, LogOut, PlusCircle, Globe } from 'lucide-react';
+import { ThemeToggle } from '@/components/ThemeToggle';
+import { Trash2, LogOut, PlusCircle, Globe, ArrowLeft } from 'lucide-react';
+import Image from 'next/image';
+import Link from 'next/link';
 
 export const dynamic = 'force-dynamic';
 
+function getDomainFromUrl(url: string): string {
+  try {
+    return new URL(url).hostname;
+  } catch {
+    return url;
+  }
+}
+
 export default async function AdminPage() {
   const auth = await isAuthenticated();
 
@@ -18,76 +29,164 @@ export default async function AdminPage() {
   });
 
   return (
-    <main className="container">
+    <div className="page-container" style={{ maxWidth: '900px' }}>
-      <header style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '3rem' }}>
-        <h1 style={{ marginBottom: 0, fontSize: '2rem' }}>Panel d'Administration</h1>
-        <form action={logoutAdmin}>
-          <button type="submit" style={{ display: 'flex', alignItems: 'center', gap: '0.5rem', background: 'transparent', color: 'var(--foreground)', opacity: 0.7 }}>
-            <LogOut size={20} /> Déconnexion
-          </button>
-        </form>
-      </header>
 
-      <div style={{ display: 'grid', gridTemplateColumns: 'minmax(300px, 1fr) 2fr', gap: '3rem', alignItems: 'start' }}>
+      {/* Header */}
-        {/* Form to add button */}
+      <header style={{
-        <GlassCard>
+        display: 'flex',
-          <h2 style={{ fontSize: '1.25rem', marginBottom: '1.5rem', display: 'flex', alignItems: 'center', gap: '0.5rem' }}>
+        justifyContent: 'space-between',
-            <PlusCircle size={20} color="var(--accent)" /> Ajouter un bouton
+        alignItems: 'center',
-          </h2>
+        marginBottom: '2.5rem',
-          <form action={addButton} style={{ display: 'flex', flexDirection: 'column', gap: '1.2rem' }}>
+      }}>
-            <div>
+        <div style={{ display: 'flex', alignItems: 'center', gap: '1rem' }}>
-              <label style={{ display: 'block', marginBottom: '0.4rem', fontSize: '0.85rem', fontWeight: 600 }}>Nom de l'application</label>
+          <Link href="/" aria-label="Retour" style={{
-              <input name="name" type="text" placeholder="Ex: Slack, Jira..." required />
+            background: 'var(--glass-bg)',
-            </div>
+            backdropFilter: 'blur(20px)',
-            <div>
+            WebkitBackdropFilter: 'blur(20px)',
-              <label style={{ display: 'block', marginBottom: '0.4rem', fontSize: '0.85rem', fontWeight: 600 }}>Lien (URL)</label>
+            border: '1px solid var(--glass-border)',
-              <input name="url" type="url" placeholder="https://..." required />
+            borderRadius: '50%',
-            </div>
+            width: '38px',
-            <button 
+            height: '38px',
-              type="submit" 
+            display: 'flex',
-              style={{ background: 'var(--accent)', color: 'white', padding: '0.8rem', borderRadius: '10px', fontWeight: 600, marginTop: '0.5rem' }}
+            alignItems: 'center',
-            >
+            justifyContent: 'center',
-              Ajouter au menu
+          }}>
+            <ArrowLeft size={16} color="var(--fg-secondary)" />
+          </Link>
+          <div>
+            <h1 style={{ fontSize: '1.6rem', fontWeight: 700, letterSpacing: '-0.03em' }}>
+              Administration
+            </h1>
+            <p style={{ fontSize: '0.85rem', color: 'var(--fg-secondary)', marginTop: '0.1rem' }}>
+              Gérez vos raccourcis d'applications
+            </p>
+          </div>
+        </div>
+
+        <div style={{ display: 'flex', alignItems: 'center', gap: '0.75rem' }}>
+          <ThemeToggle />
+          <form action={logoutAdmin}>
+            <button type="submit" style={{
+              background: 'var(--glass-bg)',
+              backdropFilter: 'blur(20px)',
+              WebkitBackdropFilter: 'blur(20px)',
+              border: '1px solid var(--glass-border)',
+              borderRadius: '50px',
+              padding: '0.5rem 1rem',
+              display: 'flex',
+              alignItems: 'center',
+              gap: '0.4rem',
+              fontSize: '0.85rem',
+              fontWeight: 500,
+              color: 'var(--fg-secondary)',
+            }}>
+              <LogOut size={15} /> Déconnexion
             </button>
           </form>
-        </GlassCard>
+        </div>
+      </header>
 
-        {/* List of buttons */}
+      {/* Add form */}
-        <div>
+      <GlassCard style={{ padding: '1.75rem', marginBottom: '2rem' }}>
-          <h2 style={{ fontSize: '1.25rem', marginBottom: '1.5rem' }}>Boutons configurés</h2>
+        <h2 style={{
-          {buttons.length === 0 ? (
+          fontSize: '1rem',
-            <p style={{ opacity: 0.5 }}>Aucun bouton configuré pour le moment.</p>
+          fontWeight: 600,
-          ) : (
+          marginBottom: '1.25rem',
-            <div style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>
+          display: 'flex',
-              {buttons.map((btn: any) => (
+          alignItems: 'center',
-                <GlassCard key={btn.id} style={{ padding: '1.2rem', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
+          gap: '0.5rem',
-                  <div style={{ display: 'flex', alignItems: 'center', gap: '1rem' }}>
+        }}>
-                    <div style={{ background: 'var(--accent)', padding: '0.5rem', borderRadius: '8px', color: 'white' }}>
+          <PlusCircle size={18} color="var(--accent)" />
-                      <Globe size={18} />
+          Ajouter une application
+        </h2>
+
+        <form action={addButton} style={{ display: 'flex', gap: '0.75rem', flexWrap: 'wrap' }}>
+          <div style={{ flex: '1 1 180px' }}>
+            <label style={{ display: 'block', fontSize: '0.8rem', fontWeight: 600, color: 'var(--fg-secondary)', marginBottom: '0.4rem' }}>Nom</label>
+            <input name="name" type="text" placeholder="Ex: Slack, Notion..." required />
+          </div>
+          <div style={{ flex: '2 1 280px' }}>
+            <label style={{ display: 'block', fontSize: '0.8rem', fontWeight: 600, color: 'var(--fg-secondary)', marginBottom: '0.4rem' }}>URL</label>
+            <input name="url" type="url" placeholder="https://..." required />
+          </div>
+          <div style={{ alignSelf: 'flex-end' }}>
+            <button type="submit" className="btn-primary" style={{ whiteSpace: 'nowrap' }}>
+              Ajouter →
+            </button>
+          </div>
+        </form>
+      </GlassCard>
+
+      {/* Button list */}
+      {buttons.length === 0 ? (
+        <div style={{ textAlign: 'center', padding: '4rem', color: 'var(--fg-secondary)', fontSize: '0.9rem' }}>
+          Aucun bouton configuré. Ajoutez-en un ci-dessus.
+        </div>
+      ) : (
+        <div style={{ display: 'flex', flexDirection: 'column', gap: '0.6rem' }}>
+          {buttons.map((btn: any) => {
+            const domain = getDomainFromUrl(btn.url);
+            const faviconUrl = `https://www.google.com/s2/favicons?domain=${domain}&sz=32`;
+
+            return (
+              <GlassCard key={btn.id} style={{
+                padding: '0.9rem 1.25rem',
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'space-between',
+                gap: '1rem',
+                borderRadius: '14px',
+              }}>
+                <div style={{ display: 'flex', alignItems: 'center', gap: '0.85rem', minWidth: 0 }}>
+                  <div style={{
+                    width: '36px',
+                    height: '36px',
+                    borderRadius: '10px',
+                    background: 'var(--bg-base)',
+                    border: '1px solid var(--glass-border)',
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    flexShrink: 0,
+                    overflow: 'hidden',
+                  }}>
+                    <Image src={faviconUrl} alt={btn.name} width={20} height={20} unoptimized />
+                  </div>
+                  <div style={{ minWidth: 0 }}>
+                    <div style={{ fontWeight: 600, fontSize: '0.9rem', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>
+                      {btn.name}
                     </div>
-                    <div>
+                    <div style={{ fontSize: '0.78rem', color: 'var(--fg-secondary)', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>
-                      <div style={{ fontWeight: 600 }}>{btn.name}</div>
+                      {btn.url}
-                      <div style={{ fontSize: '0.8rem', opacity: 0.6 }}>{btn.url}</div>
                     </div>
                   </div>
-                  
+                </div>
-                  <form action={async () => {
+
-                    'use server';
+                <form action={async () => {
-                    await deleteButton(btn.id);
+                  'use server';
-                  }}>
+                  await deleteButton(btn.id);
-                    <button 
+                }}>
-                      type="submit"
+                  <button type="submit" style={{
-                      style={{ background: 'transparent', color: 'var(--error)', padding: '0.5rem', borderRadius: '8px' }}
+                    background: 'transparent',
-                    >
+                    color: 'var(--fg-secondary)',
-                      <Trash2 size={20} />
+                    padding: '0.4rem',
-                    </button>
+                    borderRadius: '8px',
-                  </form>
+                    display: 'flex',
-                </GlassCard>
+                    alignItems: 'center',
-              ))}
+                    flexShrink: 0,
-            </div>
+                    transition: 'color 200ms',
-          )}
+                  }}
+                  onMouseEnter={(e) => (e.currentTarget.style.color = 'var(--error)')}
+                  onMouseLeave={(e) => (e.currentTarget.style.color = 'var(--fg-secondary)')}
+                  >
+                    <Trash2 size={17} />
+                  </button>
+                </form>
+              </GlassCard>
+            );
+          })}
         </div>
-      </div>
+      )}
-    </main>
+    </div>
   );
 }

app/globals.css

@@ -1,105 +1,173 @@
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
+
 :root {
-  /* Common */
+  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
-  --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  --ease: cubic-bezier(0.4, 0, 0.2, 1);
-  --transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  --duration: 280ms;
-  
+
-  /* Light Theme */
+  /* Light */
-  --background: #f5f5f7;
+  --bg-base: #f2f2f7;
-  --foreground: #1d1d1f;
+  --fg: #1c1c1e;
-  --glass-bg: rgba(255, 255, 255, 0.7);
+  --fg-secondary: #6c6c70;
-  --glass-border: rgba(255, 255, 255, 0.3);
+  --glass-bg: rgba(255, 255, 255, 0.62);
-  --card-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.07);
+  --glass-border: rgba(255, 255, 255, 0.8);
-  --accent: #0071e3;
+  --glass-shadow: 0 8px 40px rgba(0, 0, 0, 0.08), 0 1px 0 rgba(255,255,255,0.9) inset;
-  --error: #ff3b30;
+  --glass-hover-shadow: 0 20px 60px rgba(0, 0, 0, 0.12), 0 1px 0 rgba(255,255,255,0.9) inset;
-  --bg-gradient: radial-gradient(circle at 0% 0%, #fff 0%, #f5f5f7 100%);
+  --accent: #007AFF;
+  --accent-glow: rgba(0, 122, 255, 0.25);
+  --error: #FF3B30;
+  --success: #34C759;
+
+  --orb-1: radial-gradient(ellipse at 20% 20%, rgba(0, 122, 255, 0.15) 0%, transparent 60%);
+  --orb-2: radial-gradient(ellipse at 80% 80%, rgba(88, 86, 214, 0.12) 0%, transparent 60%);
+  --orb-3: radial-gradient(ellipse at 60% 10%, rgba(52, 199, 89, 0.08) 0%, transparent 50%);
 }
 
 [data-theme='dark'] {
-  /* Dark Theme */
+  --bg-base: #000000;
-  --background: #000000;
+  --fg: #f5f5f7;
-  --foreground: #f5f5f7;
+  --fg-secondary: #8e8e93;
-  --glass-bg: rgba(28, 28, 30, 0.7);
+  --glass-bg: rgba(28, 28, 30, 0.72);
-  --glass-border: rgba(255, 255, 255, 0.1);
+  --glass-border: rgba(255, 255, 255, 0.08);
-  --card-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.4);
+  --glass-shadow: 0 8px 40px rgba(0, 0, 0, 0.4), 0 1px 0 rgba(255,255,255,0.05) inset;
-  --accent: #0a84ff;
+  --glass-hover-shadow: 0 20px 60px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(0, 122, 255, 0.3);
-  --error: #ff453a;
+  --accent: #0A84FF;
-  --bg-gradient: radial-gradient(circle at 100% 100%, #1c1c1e 0%, #000 100%);
+  --accent-glow: rgba(10, 132, 255, 0.35);
+  --error: #FF453A;
+  --success: #30D158;
+
+  --orb-1: radial-gradient(ellipse at 20% 20%, rgba(10, 132, 255, 0.18) 0%, transparent 60%);
+  --orb-2: radial-gradient(ellipse at 80% 80%, rgba(94, 92, 230, 0.18) 0%, transparent 60%);
+  --orb-3: radial-gradient(ellipse at 60% 10%, rgba(48, 209, 88, 0.08) 0%, transparent 50%);
 }
 
-* {
+*, *::before, *::after {
   box-sizing: border-box;
-  padding: 0;
   margin: 0;
+  padding: 0;
+}
+
+html {
+  height: 100%;
 }
 
 body {
-  background: var(--bg-gradient);
-  background-attachment: fixed;
-  color: var(--foreground);
-  font-family: var(--font-family);
   min-height: 100vh;
-  transition: var(--transition-smooth);
+  background-color: var(--bg-base);
+  color: var(--fg);
+  font-family: var(--font);
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
   overflow-x: hidden;
+  transition: background-color var(--duration) var(--ease), color var(--duration) var(--ease);
 }
 
-/* Custom Scrollbar */
+/* Ambient background orbs */
-::-webkit-scrollbar {
+body::before {
-  width: 10px;
+  content: '';
+  position: fixed;
+  inset: 0;
+  background: var(--orb-1), var(--orb-2), var(--orb-3);
+  pointer-events: none;
+  z-index: 0;
 }
-::-webkit-scrollbar-track {
+
-  background: transparent;
+#__next, main {
+  position: relative;
+  z-index: 1;
 }
+
+/* Scrollbar */
+::-webkit-scrollbar { width: 8px; }
+::-webkit-scrollbar-track { background: transparent; }
 ::-webkit-scrollbar-thumb {
-  background: rgba(125, 125, 125, 0.3);
+  background: rgba(128, 128, 128, 0.25);
   border-radius: 10px;
-  border: 3px solid transparent;
+  border: 2px solid transparent;
   background-clip: padding-box;
 }
-::-webkit-scrollbar-thumb:hover {
+::-webkit-scrollbar-thumb:hover { background: rgba(128, 128, 128, 0.4); background-clip: padding-box; }
-  background: rgba(125, 125, 125, 0.5);
-}
 
+/* Glass utility */
 .glass {
   background: var(--glass-bg);
-  backdrop-filter: blur(20px);
+  backdrop-filter: blur(24px) saturate(1.8);
-  -webkit-backdrop-filter: blur(20px);
+  -webkit-backdrop-filter: blur(24px) saturate(1.8);
   border: 1px solid var(--glass-border);
-  box-shadow: var(--card-shadow);
+  box-shadow: var(--glass-shadow);
   border-radius: 20px;
 }
 
-.container {
+/* Page layout */
-  max-width: 1200px;
+.page-container {
+  max-width: 1400px;
   margin: 0 auto;
   padding: 2rem;
+  min-height: 100vh;
 }
 
-h1 {
+/* Forms */
-  font-size: 2.5rem;
+input[type="text"],
-  font-weight: 700;
+input[type="password"],
-  letter-spacing: -0.022em;
+input[type="url"],
-  margin-bottom: 2rem;
+input[type="email"] {
-  text-align: center;
+  width: 100%;
-}
+  padding: 0.85rem 1rem;
-
-button, .button {
-  cursor: pointer;
-  border: none;
-  outline: none;
-  font-family: inherit;
-  transition: var(--transition-smooth);
-}
-
-input {
   background: var(--glass-bg);
   border: 1px solid var(--glass-border);
   border-radius: 12px;
-  padding: 0.8rem 1rem;
+  color: var(--fg);
-  color: var(--foreground);
+  font-family: var(--font);
-  font-family: inherit;
+  font-size: 0.95rem;
-  width: 100%;
+  transition: all var(--duration) var(--ease);
+  backdrop-filter: blur(12px);
+  outline: none;
 }
 
 input:focus {
-  outline: 2px solid var(--accent);
+  border-color: var(--accent);
+  box-shadow: 0 0 0 3px var(--accent-glow);
+}
+
+input::placeholder {
+  color: var(--fg-secondary);
+}
+
+button {
+  cursor: pointer;
+  border: none;
+  outline: none;
+  font-family: var(--font);
+  transition: all var(--duration) var(--ease);
+}
+
+a {
+  text-decoration: none;
+  color: inherit;
+}
+
+/* Btn primary */
+.btn-primary {
+  background: var(--accent);
+  color: white;
+  padding: 0.85rem 1.5rem;
+  border-radius: 12px;
+  font-size: 0.95rem;
+  font-weight: 600;
+  letter-spacing: -0.01em;
+}
+
+.btn-primary:hover {
+  filter: brightness(1.1);
+  transform: translateY(-1px);
+  box-shadow: 0 8px 20px var(--accent-glow);
+}
+
+.btn-primary:active {
+  transform: translateY(0);
+}
+
+.btn-primary:disabled {
+  opacity: 0.6;
+  pointer-events: none;
 }

app/page.tsx

@@ -3,6 +3,8 @@ import { isConfigured } from '@/app/actions/setup';
 import { redirect } from 'next/navigation';
 import { MenuButton } from '@/components/MenuButton';
 import { ThemeToggle } from '@/components/ThemeToggle';
+import { Settings } from 'lucide-react';
+import Link from 'next/link';
 
 export const dynamic = 'force-dynamic';
 
@@ -18,33 +20,103 @@ export default async function Home() {
   });
 
   return (
-    <main className="container">
+    <div className="page-container">
-      <header style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '4rem' }}>
+      {/* Header */}
-        <h1 style={{ marginBottom: 0 }}>Application Menu</h1>
+      <header style={{
-        <ThemeToggle />
+        display: 'flex',
+        justifyContent: 'space-between',
+        alignItems: 'center',
+        marginBottom: '3.5rem',
+        paddingTop: '0.5rem',
+      }}>
+        <div>
+          <h1 style={{
+            fontSize: 'clamp(1.6rem, 3vw, 2.4rem)',
+            fontWeight: 700,
+            letterSpacing: '-0.035em',
+            lineHeight: 1.1,
+          }}>
+            Applications
+          </h1>
+          {buttons.length > 0 && (
+            <p style={{ color: 'var(--fg-secondary)', fontSize: '0.9rem', marginTop: '0.3rem', fontWeight: 400 }}>
+              {buttons.length} {buttons.length > 1 ? 'liens configurés' : 'lien configuré'}
+            </p>
+          )}
+        </div>
+
+        <div style={{ display: 'flex', alignItems: 'center', gap: '0.75rem' }}>
+          <Link href="/admin" aria-label="Administration" style={{
+            background: 'var(--glass-bg)',
+            backdropFilter: 'blur(20px)',
+            WebkitBackdropFilter: 'blur(20px)',
+            border: '1px solid var(--glass-border)',
+            boxShadow: 'var(--glass-shadow)',
+            borderRadius: '50%',
+            width: '40px',
+            height: '40px',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+          }}>
+            <Settings size={18} color="var(--fg-secondary)" />
+          </Link>
+          <ThemeToggle />
+        </div>
       </header>
 
+      {/* Button grid */}
       {buttons.length === 0 ? (
-        <div style={{ textAlign: 'center', marginTop: '4rem' }}>
+        <div style={{
-          <p style={{ opacity: 0.6 }}>Aucune application configurée. Rendez-vous dans le panel admin.</p>
+          textAlign: 'center',
-          <a href="/admin" style={{ color: 'var(--accent)', marginTop: '1rem', display: 'inline-block' }}>Accéder à l'administration</a>
+          padding: '8rem 2rem',
+          display: 'flex',
+          flexDirection: 'column',
+          alignItems: 'center',
+          gap: '1.5rem',
+        }}>
+          <div style={{
+            width: '72px',
+            height: '72px',
+            borderRadius: '20px',
+            background: 'var(--glass-bg)',
+            backdropFilter: 'blur(20px)',
+            border: '1px solid var(--glass-border)',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            fontSize: '2rem',
+          }}>
+            🔗
+          </div>
+          <div>
+            <p style={{ fontWeight: 600, marginBottom: '0.4rem' }}>Aucune application</p>
+            <p style={{ color: 'var(--fg-secondary)', fontSize: '0.9rem' }}>
+              Ajoutez vos premiers liens depuis le panel d'administration.
+            </p>
+          </div>
+          <Link href="/admin" style={{
+            padding: '0.7rem 1.4rem',
+            background: 'var(--accent)',
+            color: 'white',
+            borderRadius: '50px',
+            fontSize: '0.9rem',
+            fontWeight: 600,
+          }}>
+            Configurer →
+          </Link>
         </div>
       ) : (
-        <div style={{ 
+        <div style={{
-          display: 'grid', 
+          display: 'grid',
-          gridTemplateColumns: 'repeat(auto-fill, minmax(240px, 1fr))', 
+          gridTemplateColumns: 'repeat(auto-fill, minmax(160px, 1fr))',
-          gap: '2.5rem' 
+          gap: '1.25rem',
         }}>
           {buttons.map((btn: any) => (
-            <MenuButton 
+            <MenuButton key={btn.id} name={btn.name} url={btn.url} />
-              key={btn.id} 
-              name={btn.name} 
-              url={btn.url} 
-              iconName="ExternalLink" 
-            />
           ))}
         </div>
       )}
-    </main>
+    </div>
   );
 }

app/setup/page.tsx

@@ -3,6 +3,7 @@
 import React, { useState } from 'react';
 import { GlassCard } from '@/components/GlassCard';
 import { setupAdmin } from '@/app/actions/setup';
+import { Lock } from 'lucide-react';
 
 export default function SetupPage() {
   const [error, setError] = useState<string | null>(null);
@@ -23,42 +24,65 @@ export default function SetupPage() {
   };
 
   return (
-    <div className="container" style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', minHeight: '100vh' }}>
+    <div style={{
-      <GlassCard style={{ width: '100%', maxWidth: '450px' }}>
+      minHeight: '100vh',
-        <h1 style={{ marginBottom: '1rem', fontSize: '1.8rem' }}>Configuration Initiale</h1>
+      display: 'flex',
-        <p style={{ textAlign: 'center', marginBottom: '2rem', color: 'var(--foreground)', opacity: 0.8 }}>
+      alignItems: 'center',
-          Définissez le mot de passe maître pour accéder au panel d'administration.
+      justifyContent: 'center',
-        </p>
+      padding: '2rem',
+    }}>
+      <div style={{ width: '100%', maxWidth: '420px' }}>
 
-        <form onSubmit={handleSubmit} style={{ display: 'flex', flexDirection: 'column', gap: '1.5rem' }}>
+        {/* Logo */}
-          <div>
+        <div style={{ textAlign: 'center', marginBottom: '2rem' }}>
-            <label style={{ display: 'block', marginBottom: '0.5rem', fontSize: '0.9rem', fontWeight: 600 }}>Mot de passe Admin</label>
+          <div style={{
-            <input name="password" type="password" required placeholder="••••••••" />
+            width: '64px',
-          </div>
+            height: '64px',
-          <div>
+            borderRadius: '18px',
-            <label style={{ display: 'block', marginBottom: '0.5rem', fontSize: '0.9rem', fontWeight: 600 }}>Confirmer le mot de passe</label>
+            background: 'var(--accent)',
-            <input name="confirm" type="password" required placeholder="••••••••" />
+            display: 'inline-flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            marginBottom: '1rem',
+            boxShadow: '0 8px 24px var(--accent-glow)',
+          }}>
+            <Lock size={28} color="white" />
           </div>
+          <h1 style={{ fontSize: '1.7rem', fontWeight: 700, letterSpacing: '-0.03em' }}>
+            Configuration
+          </h1>
+          <p style={{ color: 'var(--fg-secondary)', fontSize: '0.9rem', marginTop: '0.4rem' }}>
+            Définissez votre mot de passe administrateur
+          </p>
+        </div>
 
-          {error && <p style={{ color: 'var(--error)', fontSize: '0.85rem', textAlign: 'center' }}>{error}</p>}
+        <GlassCard style={{ padding: '2rem' }}>
+          <form onSubmit={handleSubmit} style={{ display: 'flex', flexDirection: 'column', gap: '1.2rem' }}>
+            <div>
+              <label style={{ display: 'block', fontSize: '0.82rem', fontWeight: 600, color: 'var(--fg-secondary)', marginBottom: '0.5rem' }}>
+                Mot de passe
+              </label>
+              <input name="password" type="password" required placeholder="••••••••" />
+            </div>
+            <div>
+              <label style={{ display: 'block', fontSize: '0.82rem', fontWeight: 600, color: 'var(--fg-secondary)', marginBottom: '0.5rem' }}>
+                Confirmer
+              </label>
+              <input name="confirm" type="password" required placeholder="••••••••" />
+            </div>
 
-          <button 
+            {error && (
-            type="submit" 
+              <p style={{ color: 'var(--error)', fontSize: '0.85rem', textAlign: 'center', background: 'rgba(255,59,48,0.08)', padding: '0.6rem', borderRadius: '8px' }}>
-            disabled={loading}
+                {error}
-            style={{
+              </p>
-              background: 'var(--accent)',
+            )}
-              color: 'white',
+
-              padding: '1rem',
+            <button type="submit" disabled={loading} className="btn-primary" style={{ marginTop: '0.4rem', width: '100%' }}>
-              borderRadius: '12px',
+              {loading ? 'Configuration...' : 'Créer le compte admin →'}
-              fontWeight: 600,
+            </button>
-              marginTop: '1rem',
+          </form>
-              opacity: loading ? 0.7 : 1
+        </GlassCard>
-            }}
+      </div>
-          >
-            {loading ? 'Configuration...' : 'Finaliser la configuration'}
-          </button>
-        </form>
-      </GlassCard>
     </div>
   );
 }

components/GlassCard.module.css

@@ -1,16 +1,19 @@
 .card {
   background: var(--glass-bg);
-  backdrop-filter: blur(20px);
+  backdrop-filter: blur(24px) saturate(1.8);
-  -webkit-backdrop-filter: blur(20px);
+  -webkit-backdrop-filter: blur(24px) saturate(1.8);
   border: 1px solid var(--glass-border);
-  box-shadow: var(--card-shadow);
+  box-shadow: var(--glass-shadow);
-  border-radius: 24px;
+  border-radius: 20px;
-  padding: 2rem;
+  transition: all 280ms cubic-bezier(0.4, 0, 0.2, 1);
-  transition: var(--transition-smooth);
 }
 
 .hoverable:hover {
+  box-shadow: var(--glass-hover-shadow);
   transform: translateY(-4px);
-  box-shadow: 0 12px 40px 0 rgba(0, 0, 0, 0.15);
+}
-  border-color: var(--accent);
+
+.hoverable:active {
+  transform: translateY(-2px);
+  transition-duration: 80ms;
 }

components/MenuButton.module.css

@@ -3,35 +3,91 @@
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  padding: 2.5rem;
+  gap: 1rem;
+  padding: 2rem 1.5rem;
   text-decoration: none;
-  text-align: center;
+  color: var(--fg);
-  color: var(--foreground);
+  min-height: 180px;
-  gap: 1.5rem;
-  font-size: 1.25rem;
-  font-weight: 600;
   cursor: pointer;
-  aspect-ratio: 1 / 1;
+  position: relative;
+  overflow: hidden;
 }
 
-.iconWrapper {
+/* Glow accent on hover */
-  background: var(--accent);
+.menuButton::after {
-  color: white;
+  content: '';
-  padding: 1rem;
+  position: absolute;
-  border-radius: 18px;
+  inset: 0;
+  border-radius: inherit;
+  background: radial-gradient(ellipse at center, var(--accent-glow) 0%, transparent 70%);
+  opacity: 0;
+  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1);
+  pointer-events: none;
+}
+
+.menuButton:hover::after {
+  opacity: 1;
+}
+
+/* Favicon wrapper */
+.faviconWrapper {
+  width: 64px;
+  height: 64px;
+  border-radius: 16px;
+  background: var(--glass-bg);
+  border: 1px solid var(--glass-border);
   display: flex;
   align-items: center;
   justify-content: center;
-  width: 64px;
+  overflow: hidden;
-  height: 64px;
+  transition: transform 280ms cubic-bezier(0.4, 0, 0.2, 1), box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1);
-  transition: var(--transition-smooth);
+  flex-shrink: 0;
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
 }
 
-.menuButton:hover .iconWrapper {
+.menuButton:hover .faviconWrapper {
-  transform: scale(1.1);
+  transform: scale(1.08);
-  box-shadow: 0 0 20px var(--accent);
+  box-shadow: 0 8px 24px var(--accent-glow);
 }
 
+.favicon {
+  width: 40px;
+  height: 40px;
+  object-fit: contain;
+}
+
+.faviconFallback {
+  color: var(--accent);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+/* Label */
 .label {
-  letter-spacing: -0.01em;
+  font-size: 0.95rem;
+  font-weight: 600;
+  letter-spacing: -0.02em;
+  text-align: center;
+  line-height: 1.3;
+  max-width: 160px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/* Arrow indicator */
+.arrowIcon {
+  position: absolute;
+  top: 12px;
+  right: 14px;
+  color: var(--fg-secondary);
+  opacity: 0;
+  transform: translate(-4px, 4px);
+  transition: all 280ms cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.menuButton:hover .arrowIcon {
+  opacity: 1;
+  transform: translate(0, 0);
 }

components/MenuButton.tsx

@@ -1,26 +1,61 @@
 'use client';
 
-import React from 'react';
+import React, { useState } from 'react';
 import Link from 'next/link';
-import * as Icons from 'lucide-react';
+import Image from 'next/image';
+import { ArrowUpRight, Globe } from 'lucide-react';
 import { GlassCard } from './GlassCard';
 import styles from './MenuButton.module.css';
 
 interface MenuButtonProps {
   name: string;
   url: string;
-  iconName?: keyof typeof Icons;
 }
 
-export const MenuButton: React.FC<MenuButtonProps> = ({ name, url, iconName = 'ExternalLink' }) => {
+/**
-  const Icon = (Icons[iconName] as React.ElementType) || Icons.ExternalLink;
+ * Extract base domain from URL for favicon fetch.
+ */
+function getDomain(url: string): string {
+  try {
+    const { hostname } = new URL(url);
+    return hostname;
+  } catch {
+    return url;
+  }
+}
+
+/**
+ * MenuButton component displaying a favicon and app name.
+ * Favicons are fetched from Google's favicon CDN.
+ */
+export const MenuButton: React.FC<MenuButtonProps> = ({ name, url }) => {
+  const domain = getDomain(url);
+  const faviconUrl = `https://www.google.com/s2/favicons?domain=${domain}&sz=64`;
+  const [faviconError, setFaviconError] = useState(false);
 
   return (
-    <Link href={url} target="_blank" rel="noopener noreferrer" style={{ textDecoration: 'none' }}>
+    <Link href={url} target="_blank" rel="noopener noreferrer" className={styles.menuButton}>
       <GlassCard hoverable className={styles.menuButton}>
-        <div className={styles.iconWrapper}>
+        <ArrowUpRight size={16} className={styles.arrowIcon} />
-          <Icon size={32} />
+
+        <div className={styles.faviconWrapper}>
+          {!faviconError ? (
+            <Image
+              src={faviconUrl}
+              alt={`${name} icon`}
+              width={40}
+              height={40}
+              className={styles.favicon}
+              onError={() => setFaviconError(true)}
+              unoptimized
+            />
+          ) : (
+            <div className={styles.faviconFallback}>
+              <Globe size={28} />
+            </div>
+          )}
         </div>
+
         <span className={styles.label}>{name}</span>
       </GlassCard>
     </Link>

components/ThemeToggle.tsx

@@ -3,33 +3,43 @@
 import * as React from 'react';
 import { Moon, Sun } from 'lucide-react';
 import { useTheme } from 'next-themes';
-import { GlassCard } from './GlassCard';
 
 export function ThemeToggle() {
   const { theme, setTheme } = useTheme();
   const [mounted, setMounted] = React.useState(false);
 
-  // Avoid hydration mismatch
   React.useEffect(() => {
     setMounted(true);
   }, []);
 
   if (!mounted) {
-    return (
+    return <div style={{ width: '40px', height: '40px' }} />;
-      <GlassCard className="glass" style={{ padding: '0.6rem', border: 'none' }}>
-        <div style={{ width: '24px', height: '24px' }}></div>
-      </GlassCard>
-    );
   }
 
   return (
-    <GlassCard 
+    <button
-      as="button"
-      className="glass" 
-      style={{ padding: '0.6rem', cursor: 'pointer' }}
       onClick={() => setTheme(theme === 'dark' ? 'light' : 'dark')}
+      aria-label="Basculer le thème"
+      style={{
+        background: 'var(--glass-bg)',
+        backdropFilter: 'blur(20px)',
+        WebkitBackdropFilter: 'blur(20px)',
+        border: '1px solid var(--glass-border)',
+        boxShadow: 'var(--glass-shadow)',
+        borderRadius: '50%',
+        width: '40px',
+        height: '40px',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        cursor: 'pointer',
+        flexShrink: 0,
+      }}
     >
-      {theme === 'dark' ? <Sun size={24} /> : <Moon size={24} />}
+      {theme === 'dark'
-    </GlassCard>
+        ? <Sun size={18} color="var(--fg)" />
+        : <Moon size={18} color="var(--fg)" />
+      }
+    </button>
   );
 }

next.config.ts

@@ -9,6 +9,19 @@ const nextConfig: NextConfig = {
     'bcrypt',
     'prisma'
   ],
+  images: {
+    remotePatterns: [
+      {
+        protocol: 'https',
+        hostname: 'www.google.com',
+        pathname: '/s2/favicons/**',
+      },
+      {
+        protocol: 'https',
+        hostname: 't0.gstatic.com',
+      },
+    ],
+  },
 };
 
 export default nextConfig;