feat: implement admin dashboard and main menu interface with global theme support

app/admin/page.tsx

@@ -5,8 +5,7 @@ import { ThemeToggle } from '@/components/ThemeToggle';
 import { LogOut, ArrowLeft, Trash2 } from 'lucide-react';
 import Link from 'next/link';
 import { AddButtonForm } from '@/components/AddButtonForm';
-import { ICON_MAP, parseIcon } from '@/lib/lucideIcons';
-import { Globe } from 'lucide-react';
+import { AdminButtonRow } from '@/components/AdminButtonRow';
 
 export const dynamic = 'force-dynamic';
 
@@ -69,66 +68,14 @@ export default async function AdminPage() {
 
       {/* Button list */}
       {buttons.length === 0 ? (
-        <div style={{ textAlign: 'center', padding: '4rem', color: 'rgba(255,255,255,0.3)', fontSize: '0.9rem' }}>
+        <div style={{ textAlign: 'center', padding: '4rem', color: 'var(--fg-muted)', fontSize: '0.95rem' }}>
           Aucun bouton configuré.
         </div>
       ) : (
-        <div style={{ display: 'flex', flexDirection: 'column', gap: '0.5rem' }}>
-          {(buttons as any[]).map((btn) => {
-            const { name: iconName, color } = parseIcon(btn.icon);
-            const IconComponent = ICON_MAP[iconName] || Globe;
-
-            return (
-              <div key={btn.id} style={{
-                background: 'rgba(255,255,255,0.06)',
-                backdropFilter: 'blur(16px)',
-                border: '1px solid rgba(255,255,255,0.10)',
-                borderRadius: '14px',
-                padding: '0.85rem 1.2rem',
-                display: 'flex',
-                alignItems: 'center',
-                justifyContent: 'space-between',
-                gap: '1rem',
-              }}>
-                <div style={{ display: 'flex', alignItems: 'center', gap: '0.85rem', minWidth: 0 }}>
-                  <div style={{
-                    width: '40px', height: '40px',
-                    borderRadius: '10px',
-                    background: 'rgba(255,255,255,0.08)',
-                    display: 'flex', alignItems: 'center', justifyContent: 'center',
-                    flexShrink: 0,
-                  }}>
-                    <IconComponent size={22} color={color} strokeWidth={1.7} />
-                  </div>
-                  <div style={{ minWidth: 0 }}>
-                    <div style={{ fontWeight: 600, fontSize: '0.9rem', color: '#fff', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>
-                      {btn.name}
-                    </div>
-                    <div style={{ fontSize: '0.76rem', color: 'rgba(255,255,255,0.38)', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis', maxWidth: '380px' }}>
-                      {btn.url}
-                    </div>
-                  </div>
-                </div>
-
-                <form action={async () => {
-                  'use server';
-                  await deleteButton(btn.id);
-                }}>
-                  <button type="submit" style={{
-                    background: 'transparent',
-                    color: 'rgba(255,255,255,0.3)',
-                    padding: '0.4rem',
-                    borderRadius: '8px',
-                    flexShrink: 0,
-                    transition: 'color 200ms',
-                    cursor: 'pointer',
-                  }}>
-                    <Trash2 size={16} />
-                  </button>
-                </form>
-              </div>
-            );
-          })}
+        <div style={{ display: 'flex', flexDirection: 'column', gap: '0.6rem' }}>
+          {(buttons as any[]).map((btn) => (
+            <AdminButtonRow key={btn.id} button={btn} />
+          ))}
         </div>
       )}
     </div>

app/globals.css

@@ -1,88 +1,139 @@
-@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
 
 :root {
   --font: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
-  --ease: cubic-bezier(0.4, 0, 0.2, 1);
+  --ease-elastic: cubic-bezier(0.4, 0, 0.2, 1);
 
-  /* Dark (default) */
-  --bg-from: #2c0a30;
-  --bg-mid:  #5a0f28;
-  --bg-to:   #8c1525;
+  /* DARK THEME (Obsidian with subtle violet glow) */
+  --bg-color: #050505;
+  --fg: #ffffff;
+  --fg-secondary: rgba(255, 255, 255, 0.6);
+  --fg-muted: rgba(255, 255, 255, 0.4);
 
-  --fg:             #ffffff;
-  --fg-secondary:   rgba(255, 255, 255, 0.5);
+  --card-bg: rgba(255, 255, 255, 0.04);
+  --card-border: rgba(255, 255, 255, 0.08);
+  --card-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
+  --card-hover-bg: rgba(255, 255, 255, 0.08);
+  --card-hover-border: rgba(255, 255, 255, 0.15);
 
-  --card-bg:           rgba(255, 255, 255, 0.09);
-  --card-border:       rgba(255, 255, 255, 0.13);
-  --card-shadow:       0 2px 12px rgba(0,0,0,0.3), 0 1px 0 rgba(255,255,255,0.06) inset;
-  --card-hover-bg:     rgba(255, 255, 255, 0.14);
-  --card-hover-shadow: 0 16px 48px rgba(0,0,0,0.5), 0 1px 0 rgba(255,255,255,0.10) inset;
+  --accent-btn-bg: rgba(255, 255, 255, 0.12);
+  --accent-btn-hover: rgba(255, 255, 255, 0.2);
+
+  --error: #ff453a;
+  --success: #32d74b;
+
+  --glow-1: rgba(140, 50, 255, 0.15);
+  --glow-2: rgba(50, 140, 255, 0.15);
 }
 
 [data-theme='light'] {
-  --bg-from: #e0c4ef;
-  --bg-mid:  #e8b8cc;
-  --bg-to:   #f0b8be;
+  /* LIGHT THEME (Apple Pearl) */
+  --bg-color: #f5f5f7;
+  --fg: #1d1d1f;
+  --fg-secondary: rgba(29, 29, 31, 0.65);
+  --fg-muted: rgba(29, 29, 31, 0.45);
 
-  --fg:           #1c0a22;
-  --fg-secondary: rgba(28, 10, 34, 0.5);
+  --card-bg: rgba(255, 255, 255, 0.6);
+  --card-border: rgba(0, 0, 0, 0.05);
+  --card-shadow: 0 8px 30px rgba(0, 0, 0, 0.04);
+  --card-hover-bg: rgba(255, 255, 255, 0.9);
+  --card-hover-border: rgba(0, 0, 0, 0.1);
 
-  --card-bg:           rgba(255, 255, 255, 0.50);
-  --card-border:       rgba(255, 255, 255, 0.85);
-  --card-shadow:       0 2px 12px rgba(120,30,60,0.08), 0 1px 0 rgba(255,255,255,0.9) inset;
-  --card-hover-bg:     rgba(255, 255, 255, 0.70);
-  --card-hover-shadow: 0 16px 48px rgba(120,30,60,0.15), 0 1px 0 rgba(255,255,255,0.9) inset;
+  --accent-btn-bg: rgba(0, 0, 0, 0.06);
+  --accent-btn-hover: rgba(0, 0, 0, 0.12);
+
+  --error: #ff3b30;
+  --success: #34c759;
+
+  --glow-1: rgba(140, 50, 255, 0.05);
+  --glow-2: rgba(50, 140, 255, 0.05);
 }
 
-*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
-html, body { height: 100%; }
+*, *::before, *::after {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+html, body {
+  height: 100%;
+}
 
 body {
   min-height: 100vh;
   font-family: var(--font);
   color: var(--fg);
+  background-color: var(--bg-color);
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   overflow-x: hidden;
-  /* Multi-stop radial mesh gradient pour plus de profondeur */
-  background:
-    radial-gradient(ellipse at 10% 10%, rgba(120, 30, 180, 0.35) 0%, transparent 55%),
-    radial-gradient(ellipse at 90% 85%, rgba(160, 20, 40, 0.4) 0%, transparent 50%),
-    radial-gradient(ellipse at 50% 50%, rgba(80, 10, 50, 0.6) 0%, transparent 80%),
-    linear-gradient(160deg, var(--bg-from) 0%, var(--bg-mid) 50%, var(--bg-to) 100%);
-  background-attachment: fixed;
-  transition: background var(--ease) 260ms;
+  transition: background-color 300ms ease, color 300ms ease;
+  position: relative;
+}
+
+/* Premium Ambient Glow Orbs */
+body::before, body::after {
+  content: '';
+  position: fixed;
+  width: 60vw;
+  height: 60vw;
+  border-radius: 50%;
+  filter: blur(140px);
+  z-index: -1;
+  pointer-events: none;
+  opacity: 0.8;
+  transition: background 300ms ease;
+}
+
+body::before {
+  top: -20vw;
+  left: -10vw;
+  background: var(--glow-1);
+}
+
+body::after {
+  bottom: -20vw;
+  right: -10vw;
+  background: var(--glow-2);
 }
 
 a { text-decoration: none; color: inherit; }
 button { cursor: pointer; border: none; outline: none; font-family: var(--font); }
 
 /* Scrollbar */
-::-webkit-scrollbar { width: 6px; }
+::-webkit-scrollbar { width: 8px; }
 ::-webkit-scrollbar-track { background: transparent; }
-::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.18); border-radius: 10px; }
+::-webkit-scrollbar-thumb { background: var(--card-border); border-radius: 10px; }
+::-webkit-scrollbar-thumb:hover { background: var(--fg-muted); }
 
-/* Inputs */
+/* Premium Input Styles */
 input[type="text"],
 input[type="password"],
 input[type="url"],
 input[type="email"] {
   width: 100%;
-  padding: 0.82rem 1rem;
-  background: rgba(255,255,255,0.07);
-  backdrop-filter: blur(16px);
-  -webkit-backdrop-filter: blur(16px);
-  border: 1px solid rgba(255,255,255,0.13);
+  padding: 0.85rem 1.1rem;
+  background: var(--card-bg);
+  backdrop-filter: blur(20px);
+  -webkit-backdrop-filter: blur(20px);
+  border: 1px solid var(--card-border);
   border-radius: 12px;
   color: var(--fg);
   font-family: var(--font);
-  font-size: 0.92rem;
+  font-size: 0.95rem;
+  font-weight: 500;
   outline: none;
-  transition: all 240ms var(--ease);
+  transition: all 250ms ease;
+  box-shadow: inset 0 2px 4px rgba(0,0,0,0.02);
 }
+
 input:focus {
-  border-color: rgba(255,255,255,0.45);
-  box-shadow: 0 0 0 3px rgba(255,255,255,0.08);
-  background: rgba(255,255,255,0.11);
+  border-color: var(--fg-muted);
+  background: var(--card-hover-bg);
+  box-shadow: 0 0 0 3px rgba(140, 50, 255, 0.15), inset 0 2px 4px rgba(0,0,0,0.02);
+}
+
+input::placeholder {
+  color: var(--fg-muted);
+  font-weight: 400;
 }
-input::placeholder { color: var(--fg-secondary); }

app/page.tsx

@@ -27,17 +27,24 @@ export default async function Home() {
         padding: '1.5rem 2rem',
         gap: '0.6rem',
       }}>
-        <Link href="/admin" aria-label="Administration" style={{
-          background: 'rgba(255,255,255,0.10)',
+        <Link href="/admin" aria-label="Administration" className="settings-btn" style={{
+          background: 'var(--card-bg)',
           backdropFilter: 'blur(16px)',
           WebkitBackdropFilter: 'blur(16px)',
-          border: '1px solid rgba(255,255,255,0.15)',
+          border: '1px solid var(--card-border)',
           borderRadius: '50%',
           width: '36px', height: '36px',
           display: 'flex', alignItems: 'center', justifyContent: 'center',
+          transition: 'all 200ms ease'
         }}>
-          <Settings size={15} color="rgba(255,255,255,0.7)" />
+          <Settings size={15} color="var(--fg-secondary)" />
         </Link>
+        <style>{`
+          .settings-btn:hover {
+            background: var(--card-hover-bg) !important;
+            border-color: var(--card-hover-border) !important;
+          }
+        `}</style>
         <ThemeToggle />
       </header>
 
@@ -57,13 +64,12 @@ export default async function Home() {
             fontSize: 'clamp(1.8rem, 4vw, 2.8rem)',
             fontWeight: 800,
             letterSpacing: '-0.04em',
-            color: '#fff',
-            textShadow: '0 2px 20px rgba(0,0,0,0.3)',
+            color: 'var(--fg)',
           }}>
             Menu Application
           </h1>
           {buttons.length > 0 && (
-            <p style={{ color: 'rgba(255,255,255,0.45)', fontSize: '0.9rem', marginTop: '0.4rem', fontWeight: 400 }}>
+            <p style={{ color: 'var(--fg-muted)', fontSize: '0.9rem', marginTop: '0.4rem', fontWeight: 500 }}>
               {buttons.length} application{buttons.length > 1 ? 's' : ''} disponible{buttons.length > 1 ? 's' : ''}
             </p>
           )}
@@ -71,9 +77,9 @@ export default async function Home() {
 
         {/* Grid */}
         {buttons.length === 0 ? (
-          <div style={{ textAlign: 'center', color: 'rgba(255,255,255,0.5)' }}>
+          <div style={{ textAlign: 'center', color: 'var(--fg-muted)' }}>
             <div style={{ fontSize: '3rem', marginBottom: '1rem' }}>🔗</div>
-            <p style={{ fontWeight: 600, fontSize: '1.05rem', color: '#fff', marginBottom: '0.5rem' }}>
+            <p style={{ fontWeight: 600, fontSize: '1.05rem', color: 'var(--fg)', marginBottom: '0.5rem' }}>
               Aucune application
             </p>
             <p style={{ fontSize: '0.88rem', marginBottom: '1.75rem' }}>
@@ -81,10 +87,10 @@ export default async function Home() {
             </p>
             <Link href="/admin" style={{
               padding: '0.65rem 1.4rem',
-              background: 'rgba(255,255,255,0.15)',
-              border: '1px solid rgba(255,255,255,0.22)',
+              background: 'var(--card-bg)',
+              border: '1px solid var(--card-border)',
               borderRadius: '50px',
-              color: '#fff',
+              color: 'var(--fg)',
               fontWeight: 600,
               fontSize: '0.88rem',
               backdropFilter: 'blur(12px)',

components/AdminButtonRow.tsx

@@ -0,0 +1,162 @@
+'use client';
+
+import React, { useState } from 'react';
+import { deleteButton, updateButton } from '@/app/actions/admin';
+import { ICON_MAP, parseIcon, serializeIcon } from '@/lib/lucideIcons';
+import { Globe, Trash2, Edit2, Check, X } from 'lucide-react';
+import { IconPicker } from '@/components/IconPicker';
+
+interface AdminButtonRowProps {
+  button: {
+    id: number;
+    name: string;
+    url: string;
+    icon: string | null;
+  };
+}
+
+export function AdminButtonRow({ button }: AdminButtonRowProps) {
+  const [isEditing, setIsEditing] = useState(false);
+  const [loading, setLoading] = useState(false);
+  
+  const parsed = parseIcon(button.icon);
+  const [iconName, setIconName] = useState(parsed.name);
+  const [iconColor, setIconColor] = useState(parsed.color);
+  const [name, setName] = useState(button.name);
+  const [url, setUrl] = useState(button.url);
+
+  const IconComponent = ICON_MAP[parsed.name] || Globe;
+
+  const handleSave = async () => {
+    if (!name || !url) return;
+    setLoading(true);
+    const formData = new FormData();
+    formData.set('id', button.id.toString());
+    formData.set('name', name);
+    formData.set('url', url);
+    formData.set('icon', serializeIcon(iconName, iconColor));
+    
+    try {
+      await updateButton(formData);
+      setIsEditing(false);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleCancel = () => {
+    setName(button.name);
+    setUrl(button.url);
+    setIconName(parsed.name);
+    setIconColor(parsed.color);
+    setIsEditing(false);
+  };
+
+  if (isEditing) {
+    return (
+      <div style={{
+        background: 'var(--card-bg)',
+        backdropFilter: 'blur(20px)',
+        border: '1px solid var(--card-hover-border)',
+        borderRadius: '16px',
+        padding: '1rem 1.25rem',
+        display: 'flex',
+        flexWrap: 'wrap',
+        gap: '0.8rem',
+        alignItems: 'center',
+        boxShadow: '0 8px 30px rgba(0,0,0,0.1)',
+      }}>
+         <IconPicker iconName={iconName} color={iconColor} onIconChange={setIconName} onColorChange={setIconColor} />
+         
+         <div style={{ flex: '1 1 120px' }}>
+            <input type="text" value={name} onChange={(e) => setName(e.target.value)} placeholder="Nom" required style={{ padding: '0.6rem 0.8rem' }} />
+         </div>
+         
+         <div style={{ flex: '2 1 200px' }}>
+            <input type="url" value={url} onChange={(e) => setUrl(e.target.value)} placeholder="https://..." required style={{ padding: '0.6rem 0.8rem' }} />
+         </div>
+
+         <div style={{ display: 'flex', gap: '0.5rem', marginLeft: 'auto' }}>
+            <button onClick={handleCancel} disabled={loading} style={{
+              background: 'var(--card-bg)', border: '1px solid var(--card-border)', color: 'var(--fg-secondary)', borderRadius: '10px', padding: '0.5rem', transition: 'background 200ms'
+            }} onMouseEnter={(e) => e.currentTarget.style.background = 'var(--card-hover-bg)'} onMouseLeave={(e) => e.currentTarget.style.background = 'var(--card-bg)'}>
+              <X size={18} />
+            </button>
+            <button onClick={handleSave} disabled={loading} style={{
+              background: 'var(--success)', border: 'none', color: '#fff', borderRadius: '10px', padding: '0.5rem', cursor: 'pointer', transition: 'opacity 200ms', opacity: loading ? 0.6 : 1
+            }}>
+              <Check size={18} />
+            </button>
+         </div>
+      </div>
+    );
+  }
+
+  return (
+    <div style={{
+      background: 'var(--card-bg)',
+      backdropFilter: 'blur(20px)',
+      border: '1px solid var(--card-border)',
+      borderRadius: '16px',
+      padding: '0.85rem 1.2rem',
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'space-between',
+      gap: '1rem',
+      transition: 'all 200ms ease',
+    }}
+    onMouseEnter={(e) => { e.currentTarget.style.background = 'var(--card-hover-bg)'; e.currentTarget.style.borderColor = 'var(--card-hover-border)'; }}
+    onMouseLeave={(e) => { e.currentTarget.style.background = 'var(--card-bg)'; e.currentTarget.style.borderColor = 'var(--card-border)'; }}
+    >
+      <div style={{ display: 'flex', alignItems: 'center', gap: '1rem', minWidth: 0 }}>
+        <div style={{
+          width: '42px', height: '42px',
+          borderRadius: '12px',
+          background: 'var(--accent-btn-bg)',
+          display: 'flex', alignItems: 'center', justifyContent: 'center',
+          flexShrink: 0,
+        }}>
+          <IconComponent size={22} color={parsed.color} strokeWidth={1.7} />
+        </div>
+        <div style={{ minWidth: 0 }}>
+          <div style={{ fontWeight: 600, fontSize: '0.92rem', color: 'var(--fg)', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>
+            {button.name}
+          </div>
+          <div style={{ fontSize: '0.8rem', color: 'var(--fg-secondary)', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis', maxWidth: '380px' }}>
+            {button.url}
+          </div>
+        </div>
+      </div>
+
+      <div style={{ display: 'flex', alignItems: 'center', gap: '0.4rem', flexShrink: 0 }}>
+        <button onClick={() => setIsEditing(true)} style={{
+          background: 'transparent',
+          color: 'var(--fg-muted)',
+          padding: '0.45rem',
+          borderRadius: '8px',
+          transition: 'all 200ms',
+        }}
+          onMouseEnter={(e) => (e.currentTarget.style.color = 'var(--fg)')}
+          onMouseLeave={(e) => (e.currentTarget.style.color = 'var(--fg-muted)')}
+        >
+          <Edit2 size={16} />
+        </button>
+        
+        <form action={async () => { await deleteButton(button.id); }}>
+          <button type="submit" style={{
+            background: 'transparent',
+            color: 'var(--fg-muted)',
+            padding: '0.45rem',
+            borderRadius: '8px',
+            transition: 'all 200ms',
+          }}
+            onMouseEnter={(e) => (e.currentTarget.style.color = 'var(--error)')}
+            onMouseLeave={(e) => (e.currentTarget.style.color = 'var(--fg-muted)')}
+          >
+            <Trash2 size={16} />
+          </button>
+        </form>
+      </div>
+    </div>
+  );
+}

components/MenuButton.module.css

@@ -3,68 +3,64 @@
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  gap: 1rem;
-  padding: 2rem 1.25rem 1.75rem;
+  gap: 1.1rem;
+  padding: 1.5rem 1rem;
   text-decoration: none;
   color: var(--fg);
-  width: 160px;
-  aspect-ratio: 1 / 1;
+  width: 150px;
+  height: 150px;
   cursor: pointer;
   background: var(--card-bg);
-  backdrop-filter: blur(24px) saturate(1.4);
-  -webkit-backdrop-filter: blur(24px) saturate(1.4);
+  backdrop-filter: blur(24px);
+  -webkit-backdrop-filter: blur(24px);
   border: 1px solid var(--card-border);
   box-shadow: var(--card-shadow);
-  border-radius: 22px;
-  transition: all 240ms cubic-bezier(0.4, 0, 0.2, 1);
+  border-radius: 28px; /* Apple squircle-like */
+  transition: all 300ms cubic-bezier(0.25, 1, 0.5, 1);
   position: relative;
   overflow: hidden;
 }
 
 .menuButton:hover {
   background: var(--card-hover-bg);
-  box-shadow: var(--card-hover-shadow);
-  transform: translateY(-5px) scale(1.02);
+  border-color: var(--card-hover-border);
+  transform: translateY(-4px) scale(1.02);
+  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15);
 }
 
 .menuButton:active {
-  transform: scale(0.97);
-  transition-duration: 80ms;
+  transform: scale(0.96);
+  transition-duration: 100ms;
 }
 
-/* Favicon */
+/* Icon Container */
 .faviconWrapper {
-  width: 56px;
-  height: 56px;
+  width: 54px;
+  height: 54px;
   border-radius: 14px;
   display: flex;
   align-items: center;
   justify-content: center;
-  overflow: hidden;
+  background: var(--accent-btn-bg);
+  box-shadow: inset 0 2px 4px rgba(255,255,255,0.05);
+  transition: transform 300ms cubic-bezier(0.25, 1, 0.5, 1);
 }
 
-.favicon {
-  width: 48px;
-  height: 48px;
-  object-fit: contain;
-}
-
-.faviconFallback {
-  color: rgba(255,255,255,0.7);
-  display: flex;
-  align-items: center;
-  justify-content: center;
+.menuButton:hover .faviconWrapper {
+  transform: scale(1.08);
+  background: var(--accent-btn-hover);
 }
 
 /* Label */
 .label {
-  font-size: 0.82rem;
+  font-size: 0.85rem;
   font-weight: 600;
   text-align: center;
   letter-spacing: -0.01em;
   color: var(--fg);
-  max-width: 130px;
+  max-width: 125px;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
+  text-shadow: 0 1px 2px rgba(0,0,0,0.1);
 }