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

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' }}>
-      <GlassCard style={{ width: '100%', maxWidth: '400px' }}>
-        <h1 style={{ marginBottom: '2rem', fontSize: '1.8rem' }}>Accès Admin</h1>
-        
-        <form onSubmit={handleSubmit} style={{ display: 'flex', flexDirection: 'column', gap: '1.5rem' }}>
-          <div>
-            <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={{
+      minHeight: '100vh',
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      padding: '2rem',
+    }}>
+      <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 
-            type="submit" 
-            disabled={loading}
-            style={{
-              background: 'var(--accent)',
-              color: 'white',
-              padding: '1rem',
-              borderRadius: '12px',
-              fontWeight: 600,
-              marginTop: '1rem',
-              opacity: loading ? 0.7 : 1
-            }}
-          >
-            {loading ? 'Connexion...' : 'Se connecter'}
-          </button>
-        </form>
-      </GlassCard>
+            {error && (
+              <p style={{ color: 'var(--error)', fontSize: '0.85rem', textAlign: 'center', background: 'rgba(255,59,48,0.08)', padding: '0.6rem', borderRadius: '8px' }}>
+                {error}
+              </p>
+            )}
+
+            <button type="submit" disabled={loading} className="btn-primary" style={{ marginTop: '0.4rem', width: '100%' }}>
+              {loading ? 'Connexion...' : 'Se connecter →'}
+            </button>
+          </form>
+        </GlassCard>
+      </div>
     </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">
-      <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 className="page-container" style={{ maxWidth: '900px' }}>
 
-      <div style={{ display: 'grid', gridTemplateColumns: 'minmax(300px, 1fr) 2fr', gap: '3rem', alignItems: 'start' }}>
-        {/* Form to add button */}
-        <GlassCard>
-          <h2 style={{ fontSize: '1.25rem', marginBottom: '1.5rem', display: 'flex', alignItems: 'center', gap: '0.5rem' }}>
-            <PlusCircle size={20} color="var(--accent)" /> Ajouter un bouton
-          </h2>
-          <form action={addButton} style={{ display: 'flex', flexDirection: 'column', gap: '1.2rem' }}>
-            <div>
-              <label style={{ display: 'block', marginBottom: '0.4rem', fontSize: '0.85rem', fontWeight: 600 }}>Nom de l'application</label>
-              <input name="name" type="text" placeholder="Ex: Slack, Jira..." required />
-            </div>
-            <div>
-              <label style={{ display: 'block', marginBottom: '0.4rem', fontSize: '0.85rem', fontWeight: 600 }}>Lien (URL)</label>
-              <input name="url" type="url" placeholder="https://..." required />
-            </div>
-            <button 
-              type="submit" 
-              style={{ background: 'var(--accent)', color: 'white', padding: '0.8rem', borderRadius: '10px', fontWeight: 600, marginTop: '0.5rem' }}
-            >
-              Ajouter au menu
+      {/* Header */}
+      <header style={{
+        display: 'flex',
+        justifyContent: 'space-between',
+        alignItems: 'center',
+        marginBottom: '2.5rem',
+      }}>
+        <div style={{ display: 'flex', alignItems: 'center', gap: '1rem' }}>
+          <Link href="/" aria-label="Retour" style={{
+            background: 'var(--glass-bg)',
+            backdropFilter: 'blur(20px)',
+            WebkitBackdropFilter: 'blur(20px)',
+            border: '1px solid var(--glass-border)',
+            borderRadius: '50%',
+            width: '38px',
+            height: '38px',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+          }}>
+            <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 */}
-        <div>
-          <h2 style={{ fontSize: '1.25rem', marginBottom: '1.5rem' }}>Boutons configurés</h2>
-          {buttons.length === 0 ? (
-            <p style={{ opacity: 0.5 }}>Aucun bouton configuré pour le moment.</p>
-          ) : (
-            <div style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>
-              {buttons.map((btn: any) => (
-                <GlassCard key={btn.id} style={{ padding: '1.2rem', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
-                  <div style={{ display: 'flex', alignItems: 'center', gap: '1rem' }}>
-                    <div style={{ background: 'var(--accent)', padding: '0.5rem', borderRadius: '8px', color: 'white' }}>
-                      <Globe size={18} />
+      {/* Add form */}
+      <GlassCard style={{ padding: '1.75rem', marginBottom: '2rem' }}>
+        <h2 style={{
+          fontSize: '1rem',
+          fontWeight: 600,
+          marginBottom: '1.25rem',
+          display: 'flex',
+          alignItems: 'center',
+          gap: '0.5rem',
+        }}>
+          <PlusCircle size={18} color="var(--accent)" />
+          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={{ fontWeight: 600 }}>{btn.name}</div>
-                      <div style={{ fontSize: '0.8rem', opacity: 0.6 }}>{btn.url}</div>
+                    <div style={{ fontSize: '0.78rem', color: 'var(--fg-secondary)', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>
+                      {btn.url}
                     </div>
                   </div>
-                  
-                  <form action={async () => {
-                    'use server';
-                    await deleteButton(btn.id);
-                  }}>
-                    <button 
-                      type="submit"
-                      style={{ background: 'transparent', color: 'var(--error)', padding: '0.5rem', borderRadius: '8px' }}
-                    >
-                      <Trash2 size={20} />
-                    </button>
-                  </form>
-                </GlassCard>
-              ))}
-            </div>
-          )}
+                </div>
+
+                <form action={async () => {
+                  'use server';
+                  await deleteButton(btn.id);
+                }}>
+                  <button type="submit" style={{
+                    background: 'transparent',
+                    color: 'var(--fg-secondary)',
+                    padding: '0.4rem',
+                    borderRadius: '8px',
+                    display: 'flex',
+                    alignItems: 'center',
+                    flexShrink: 0,
+                    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>
   );
 }