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

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);
 }