From c3d141402fcbb663f7227ca01f87aa375a68ac39 Mon Sep 17 00:00:00 2001
From: R0m1k3 <michaelschal@gmail.com>
Date: Fri, 10 Apr 2026 11:03:02 +0200
Subject: [PATCH] feat: add IconPicker component and utility library for Lucide
 icon selection and color management

---
 app/admin/page.tsx           |  33 +++-----
 components/AddButtonForm.tsx |  40 +++++----
 components/IconPicker.tsx    | 155 +++++++++++++++++++++++++++++++++++
 components/MenuButton.tsx    |  36 ++------
 lib/lucideIcons.ts           |  74 +++++++++++++++++
 5 files changed, 272 insertions(+), 66 deletions(-)
 create mode 100644 components/IconPicker.tsx
 create mode 100644 lib/lucideIcons.ts

diff --git a/app/admin/page.tsx b/app/admin/page.tsx
index bcf3f6f..972dd16 100644
--- a/app/admin/page.tsx
+++ b/app/admin/page.tsx
@@ -2,17 +2,14 @@ import { prisma } from '@/lib/db';
 import { isAuthenticated, logoutAdmin, deleteButton } from '@/app/actions/admin';
 import { redirect } from 'next/navigation';
 import { ThemeToggle } from '@/components/ThemeToggle';
-import { LogOut, ArrowLeft, Trash2, Globe } from 'lucide-react';
-import Image from 'next/image';
+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';
 
 export const dynamic = 'force-dynamic';
 
-function getDomain(url: string): string {
-  try { return new URL(url).hostname; } catch { return url; }
-}
-
 export default async function AdminPage() {
   const auth = await isAuthenticated();
   if (!auth) redirect('/admin/login');
@@ -41,7 +38,7 @@ export default async function AdminPage() {
             <h1 style={{ fontSize: '1.4rem', fontWeight: 700, letterSpacing: '-0.02em', color: '#fff' }}>
               Administration
             </h1>
-            <p style={{ fontSize: '0.8rem', color: 'rgba(255,255,255,0.45)', marginTop: '0.1rem' }}>
+            <p style={{ fontSize: '0.8rem', color: 'rgba(255,255,255,0.4)', marginTop: '0.1rem' }}>
               {buttons.length} application{buttons.length !== 1 ? 's' : ''} configurée{buttons.length !== 1 ? 's' : ''}
             </p>
           </div>
@@ -56,7 +53,7 @@ export default async function AdminPage() {
               border: '1px solid rgba(255,255,255,0.12)',
               borderRadius: '50px',
               padding: '0.45rem 0.9rem',
-              color: 'rgba(255,255,255,0.7)',
+              color: 'rgba(255,255,255,0.6)',
               fontSize: '0.82rem',
               fontWeight: 500,
               display: 'flex', alignItems: 'center', gap: '0.4rem',
@@ -72,14 +69,14 @@ export default async function AdminPage() {
 
       {/* Button list */}
       {buttons.length === 0 ? (
-        <div style={{ textAlign: 'center', padding: '4rem', color: 'rgba(255,255,255,0.35)', fontSize: '0.9rem' }}>
+        <div style={{ textAlign: 'center', padding: '4rem', color: 'rgba(255,255,255,0.3)', fontSize: '0.9rem' }}>
           Aucun bouton configuré.
         </div>
       ) : (
         <div style={{ display: 'flex', flexDirection: 'column', gap: '0.5rem' }}>
           {(buttons as any[]).map((btn) => {
-            const domain = getDomain(btn.url);
-            const faviconUrl = `https://www.google.com/s2/favicons?domain=${domain}&sz=32`;
+            const { name: iconName, color } = parseIcon(btn.icon);
+            const IconComponent = ICON_MAP[iconName] || Globe;
 
             return (
               <div key={btn.id} style={{
@@ -94,25 +91,20 @@ export default async function AdminPage() {
                 gap: '1rem',
               }}>
                 <div style={{ display: 'flex', alignItems: 'center', gap: '0.85rem', minWidth: 0 }}>
-                  {/* Icon: emoji or favicon */}
                   <div style={{
                     width: '40px', height: '40px',
                     borderRadius: '10px',
                     background: 'rgba(255,255,255,0.08)',
                     display: 'flex', alignItems: 'center', justifyContent: 'center',
                     flexShrink: 0,
-                    fontSize: '1.3rem',
                   }}>
-                    {btn.icon ? btn.icon : (
-                      <Image src={faviconUrl} alt={btn.name} width={20} height={20} unoptimized />
-                    )}
+                    <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.4)', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis', maxWidth: '360px' }}>
+                    <div style={{ fontSize: '0.76rem', color: 'rgba(255,255,255,0.38)', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis', maxWidth: '380px' }}>
                       {btn.url}
                     </div>
                   </div>
@@ -124,13 +116,14 @@ export default async function AdminPage() {
                 }}>
                   <button type="submit" style={{
                     background: 'transparent',
-                    color: 'rgba(255,255,255,0.3)',
+                    color: 'rgba(255,255,255,0.25)',
                     padding: '0.4rem',
                     borderRadius: '8px',
                     flexShrink: 0,
+                    transition: 'color 200ms',
                   }}
                     onMouseEnter={(e) => (e.currentTarget.style.color = '#ff6b7a')}
-                    onMouseLeave={(e) => (e.currentTarget.style.color = 'rgba(255,255,255,0.3)')}
+                    onMouseLeave={(e) => (e.currentTarget.style.color = 'rgba(255,255,255,0.25)')}
                   >
                     <Trash2 size={16} />
                   </button>
diff --git a/components/AddButtonForm.tsx b/components/AddButtonForm.tsx
index 881c0e3..67b4767 100644
--- a/components/AddButtonForm.tsx
+++ b/components/AddButtonForm.tsx
@@ -2,22 +2,25 @@
 
 import React, { useState } from 'react';
 import { addButton } from '@/app/actions/admin';
-import { EmojiPicker } from '@/components/EmojiPicker';
+import { IconPicker } from '@/components/IconPicker';
+import { serializeIcon } from '@/lib/lucideIcons';
 import { PlusCircle } from 'lucide-react';
 
 export function AddButtonForm() {
-  const [icon, setIcon] = useState('🔗');
+  const [iconName, setIconName] = useState('Globe');
+  const [iconColor, setIconColor] = useState('#22d3ee');
   const [loading, setLoading] = useState(false);
 
   const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault();
     setLoading(true);
     const formData = new FormData(e.currentTarget);
-    formData.set('icon', icon);
+    formData.set('icon', serializeIcon(iconName, iconColor));
     try {
       await addButton(formData);
       (e.target as HTMLFormElement).reset();
-      setIcon('🔗');
+      setIconName('Globe');
+      setIconColor('#22d3ee');
     } finally {
       setLoading(false);
     }
@@ -34,30 +37,35 @@ export function AddButtonForm() {
       marginBottom: '2rem',
     }}>
       <h2 style={{
-        fontSize: '0.85rem',
+        fontSize: '0.78rem',
         fontWeight: 700,
-        color: 'rgba(255,255,255,0.5)',
+        color: 'rgba(255,255,255,0.4)',
         marginBottom: '1.25rem',
         letterSpacing: '0.08em',
         display: 'flex',
         alignItems: 'center',
         gap: '0.5rem',
       }}>
-        <PlusCircle size={15} /> AJOUTER UNE APPLICATION
+        <PlusCircle size={14} /> AJOUTER UNE APPLICATION
       </h2>
 
       <form onSubmit={handleSubmit} style={{ display: 'flex', gap: '0.75rem', flexWrap: 'wrap', alignItems: 'flex-end' }}>
-        {/* Emoji picker */}
+        {/* Icon picker */}
         <div>
-          <label style={{ display: 'block', fontSize: '0.75rem', fontWeight: 600, color: 'rgba(255,255,255,0.45)', marginBottom: '0.45rem' }}>
+          <label style={{ display: 'block', fontSize: '0.72rem', fontWeight: 700, color: 'rgba(255,255,255,0.4)', marginBottom: '0.45rem', letterSpacing: '0.06em' }}>
             ICÔNE
           </label>
-          <EmojiPicker value={icon} onChange={setIcon} />
+          <IconPicker
+            iconName={iconName}
+            color={iconColor}
+            onIconChange={setIconName}
+            onColorChange={setIconColor}
+          />
         </div>
 
         {/* Name */}
         <div style={{ flex: '1 1 140px' }}>
-          <label style={{ display: 'block', fontSize: '0.75rem', fontWeight: 600, color: 'rgba(255,255,255,0.45)', marginBottom: '0.45rem' }}>
+          <label style={{ display: 'block', fontSize: '0.72rem', fontWeight: 700, color: 'rgba(255,255,255,0.4)', marginBottom: '0.45rem', letterSpacing: '0.06em' }}>
             NOM
           </label>
           <input name="name" type="text" placeholder="Ex: Slack, Notion…" required />
@@ -65,22 +73,20 @@ export function AddButtonForm() {
 
         {/* URL */}
         <div style={{ flex: '2 1 240px' }}>
-          <label style={{ display: 'block', fontSize: '0.75rem', fontWeight: 600, color: 'rgba(255,255,255,0.45)', marginBottom: '0.45rem' }}>
+          <label style={{ display: 'block', fontSize: '0.72rem', fontWeight: 700, color: 'rgba(255,255,255,0.4)', marginBottom: '0.45rem', letterSpacing: '0.06em' }}>
             URL
           </label>
           <input name="url" type="url" placeholder="https://…" required />
         </div>
 
-        {/* Submit */}
         <button
           type="submit"
           disabled={loading}
           style={{
-            background: 'rgba(255,255,255,0.16)',
-            backdropFilter: 'blur(12px)',
-            border: '1px solid rgba(255,255,255,0.22)',
+            background: 'rgba(255,255,255,0.14)',
+            border: '1px solid rgba(255,255,255,0.2)',
             color: '#fff',
-            padding: '0.75rem 1.25rem',
+            padding: '0.78rem 1.25rem',
             borderRadius: '12px',
             fontWeight: 600,
             fontSize: '0.88rem',
diff --git a/components/IconPicker.tsx b/components/IconPicker.tsx
new file mode 100644
index 0000000..db4ef87
--- /dev/null
+++ b/components/IconPicker.tsx
@@ -0,0 +1,155 @@
+'use client';
+
+import React, { useState, useMemo } from 'react';
+import { ICON_MAP, ICON_NAMES, ICON_COLORS } from '@/lib/lucideIcons';
+import { Search } from 'lucide-react';
+
+interface IconPickerProps {
+  iconName: string;
+  color: string;
+  onIconChange: (name: string) => void;
+  onColorChange: (color: string) => void;
+}
+
+export function IconPicker({ iconName, color, onIconChange, onColorChange }: IconPickerProps) {
+  const [open, setOpen] = useState(false);
+  const [query, setQuery] = useState('');
+
+  const filteredIcons = useMemo(
+    () => ICON_NAMES.filter((n) => n.toLowerCase().includes(query.toLowerCase())),
+    [query]
+  );
+
+  const SelectedIcon = ICON_MAP[iconName] || ICON_MAP['Globe'];
+
+  return (
+    <div style={{ position: 'relative' }}>
+      {/* Trigger */}
+      <button
+        type="button"
+        onClick={() => setOpen(!open)}
+        title="Choisir une icône"
+        style={{
+          width: '56px', height: '56px',
+          borderRadius: '14px',
+          background: 'rgba(255,255,255,0.08)',
+          border: '1px solid rgba(255,255,255,0.15)',
+          cursor: 'pointer',
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          flexShrink: 0,
+          transition: 'background 200ms ease',
+        }}
+      >
+        <SelectedIcon size={28} color={color} strokeWidth={1.8} />
+      </button>
+
+      {/* Picker panel */}
+      {open && (
+        <>
+          {/* Backdrop */}
+          <div
+            style={{ position: 'fixed', inset: 0, zIndex: 99 }}
+            onClick={() => setOpen(false)}
+          />
+          <div style={{
+            position: 'absolute',
+            top: '64px',
+            left: 0,
+            zIndex: 100,
+            width: '320px',
+            background: 'rgba(25, 5, 35, 0.95)',
+            backdropFilter: 'blur(30px)',
+            WebkitBackdropFilter: 'blur(30px)',
+            border: '1px solid rgba(255,255,255,0.12)',
+            borderRadius: '18px',
+            padding: '1.1rem',
+            boxShadow: '0 20px 60px rgba(0,0,0,0.6)',
+          }}>
+            {/* Search */}
+            <div style={{ position: 'relative', marginBottom: '0.85rem' }}>
+              <Search size={14} color="rgba(255,255,255,0.4)" style={{ position: 'absolute', left: '10px', top: '50%', transform: 'translateY(-50%)' }} />
+              <input
+                type="text"
+                placeholder="Rechercher…"
+                value={query}
+                onChange={(e) => setQuery(e.target.value)}
+                style={{ paddingLeft: '30px', fontSize: '0.85rem' }}
+                onClick={(e) => e.stopPropagation()}
+              />
+            </div>
+
+            {/* Icon grid */}
+            <div style={{
+              display: 'grid',
+              gridTemplateColumns: 'repeat(7, 1fr)',
+              gap: '4px',
+              maxHeight: '220px',
+              overflowY: 'auto',
+              marginBottom: '0.85rem',
+            }}>
+              {filteredIcons.map((name) => {
+                const Icon = ICON_MAP[name];
+                const isSelected = name === iconName;
+                return (
+                  <button
+                    key={name}
+                    type="button"
+                    title={name}
+                    onClick={() => { onIconChange(name); }}
+                    style={{
+                      background: isSelected ? 'rgba(255,255,255,0.18)' : 'transparent',
+                      border: isSelected ? '1px solid rgba(255,255,255,0.3)' : '1px solid transparent',
+                      borderRadius: '8px',
+                      padding: '6px',
+                      cursor: 'pointer',
+                      display: 'flex',
+                      alignItems: 'center',
+                      justifyContent: 'center',
+                      transition: 'background 120ms',
+                    }}
+                    onMouseEnter={(e) => { if (!isSelected) e.currentTarget.style.background = 'rgba(255,255,255,0.1)'; }}
+                    onMouseLeave={(e) => { if (!isSelected) e.currentTarget.style.background = 'transparent'; }}
+                  >
+                    <Icon size={18} color={isSelected ? color : 'rgba(255,255,255,0.65)'} strokeWidth={1.7} />
+                  </button>
+                );
+              })}
+            </div>
+
+            {/* Color palette */}
+            <div style={{ borderTop: '1px solid rgba(255,255,255,0.08)', paddingTop: '0.85rem' }}>
+              <p style={{ fontSize: '0.7rem', color: 'rgba(255,255,255,0.35)', fontWeight: 700, letterSpacing: '0.06em', marginBottom: '0.6rem' }}>
+                COULEUR
+              </p>
+              <div style={{ display: 'flex', flexWrap: 'wrap', gap: '6px' }}>
+                {ICON_COLORS.map((c) => (
+                  <button
+                    key={c.value}
+                    type="button"
+                    title={c.label}
+                    onClick={() => onColorChange(c.value)}
+                    style={{
+                      width: '26px', height: '26px',
+                      borderRadius: '50%',
+                      background: c.value,
+                      border: color === c.value
+                        ? '2px solid white'
+                        : '2px solid transparent',
+                      boxShadow: color === c.value ? '0 0 0 2px rgba(255,255,255,0.3)' : 'none',
+                      cursor: 'pointer',
+                      transition: 'transform 150ms',
+                    }}
+                    onMouseEnter={(e) => (e.currentTarget.style.transform = 'scale(1.15)')}
+                    onMouseLeave={(e) => (e.currentTarget.style.transform = 'scale(1)')}
+                  />
+                ))}
+              </div>
+            </div>
+          </div>
+        </>
+      )}
+    </div>
+  );
+}
diff --git a/components/MenuButton.tsx b/components/MenuButton.tsx
index d96af41..6d39879 100644
--- a/components/MenuButton.tsx
+++ b/components/MenuButton.tsx
@@ -1,9 +1,9 @@
 'use client';
 
-import React, { useState } from 'react';
+import React from 'react';
 import Link from 'next/link';
-import Image from 'next/image';
 import { Globe } from 'lucide-react';
+import { ICON_MAP, parseIcon } from '@/lib/lucideIcons';
 import styles from './MenuButton.module.css';
 
 interface MenuButtonProps {
@@ -12,40 +12,18 @@ interface MenuButtonProps {
   icon?: string | null;
 }
 
-function getDomain(url: string): string {
-  try { return new URL(url).hostname; } catch { return url; }
-}
-
 /**
- * MenuButton — displays emoji icon if set, falls back to Google favicon.
+ * MenuButton — renders a Lucide icon (with color) if set,
+ * otherwise falls back to the Globe icon.
  */
 export const MenuButton: React.FC<MenuButtonProps> = ({ name, url, icon }) => {
-  const domain = getDomain(url);
-  const faviconUrl = `https://www.google.com/s2/favicons?domain=${domain}&sz=64`;
-  const [faviconError, setFaviconError] = useState(false);
+  const { name: iconName, color } = parseIcon(icon);
+  const IconComponent = ICON_MAP[iconName] || Globe;
 
   return (
     <Link href={url} target="_blank" rel="noopener noreferrer" className={styles.menuButton}>
       <div className={styles.faviconWrapper}>
-        {icon ? (
-          // Custom emoji icon
-          <span style={{ fontSize: '2.2rem', lineHeight: 1 }}>{icon}</span>
-        ) : !faviconError ? (
-          // Auto favicon from Google CDN
-          <Image
-            src={faviconUrl}
-            alt={`${name} favicon`}
-            width={48}
-            height={48}
-            className={styles.favicon}
-            onError={() => setFaviconError(true)}
-            unoptimized
-          />
-        ) : (
-          <div className={styles.faviconFallback}>
-            <Globe size={32} />
-          </div>
-        )}
+        <IconComponent size={44} color={color} strokeWidth={1.6} />
       </div>
       <span className={styles.label}>{name}</span>
     </Link>
diff --git a/lib/lucideIcons.ts b/lib/lucideIcons.ts
new file mode 100644
index 0000000..86d77bc
--- /dev/null
+++ b/lib/lucideIcons.ts
@@ -0,0 +1,74 @@
+import {
+  Globe, Layers, Share2, Cloud, CloudDownload, Server,
+  Database, Code, Terminal, Cpu, HardDrive,
+  Monitor, Tablet, Smartphone,
+  BarChart2, BarChart, PieChart, TrendingUp,
+  Mail, MessageSquare, MessageCircle, Send,
+  Calendar, Clock, Bell, Star, Bookmark,
+  FileText, File, Folder, FolderOpen,
+  Settings, Settings2, Wrench,
+  Users, User, UserCheck, UserPlus, Lock, Unlock, Key, Shield,
+  Home, Building, Building2,
+  ShoppingCart, Package, Truck, Tag,
+  Search, Zap, Wifi, Link2, ExternalLink,
+  Image, Video, Music, Headphones, Camera,
+  MapPin,
+  CheckSquare, CheckCircle, AlertCircle, Info,
+  Download, Upload, ArrowUpRight, RefreshCw,
+  Printer, Paperclip, Edit, Edit3, Trash2,
+  Plus, Minus, X, Check,
+  Play, Pause,
+  Sun, Moon, Eye,
+} from 'lucide-react';
+import type { LucideIcon } from 'lucide-react';
+
+export const ICON_MAP: Record<string, LucideIcon> = {
+  Globe, Layers, Share2, Cloud, CloudDownload, Server,
+  Database, Code, Terminal, Cpu, HardDrive,
+  Monitor, Tablet, Smartphone,
+  BarChart2, BarChart, PieChart, TrendingUp,
+  Mail, MessageSquare, MessageCircle, Send,
+  Calendar, Clock, Bell, Star, Bookmark,
+  FileText, File, Folder, FolderOpen,
+  Settings, Settings2, Wrench,
+  Users, User, UserCheck, UserPlus, Lock, Unlock, Key, Shield,
+  Home, Building, Building2,
+  ShoppingCart, Package, Truck, Tag,
+  Search, Zap, Wifi, Link2, ExternalLink,
+  Image, Video, Music, Headphones, Camera,
+  MapPin,
+  CheckSquare, CheckCircle, AlertCircle, Info,
+  Download, Upload, ArrowUpRight, RefreshCw,
+  Printer, Paperclip, Edit, Edit3, Trash2,
+  Plus, Minus, X, Check,
+  Play, Pause,
+  Sun, Moon, Eye,
+};
+
+export const ICON_NAMES = Object.keys(ICON_MAP);
+
+export const ICON_COLORS = [
+  { label: 'Cyan',   value: '#22d3ee' },
+  { label: 'Blue',   value: '#3b82f6' },
+  { label: 'Purple', value: '#a855f7' },
+  { label: 'Pink',   value: '#ec4899' },
+  { label: 'Red',    value: '#ef4444' },
+  { label: 'Orange', value: '#f97316' },
+  { label: 'Amber',  value: '#f59e0b' },
+  { label: 'Green',  value: '#22c55e' },
+  { label: 'Teal',   value: '#14b8a6' },
+  { label: 'White',  value: '#ffffff' },
+  { label: 'Gray',   value: '#94a3b8' },
+];
+
+/** Parse "IconName:color" stored in DB */
+export function parseIcon(raw: string | null | undefined): { name: string; color: string } {
+  if (!raw) return { name: 'Globe', color: '#ffffff' };
+  const [name, color] = raw.split(':');
+  return { name: name || 'Globe', color: color || '#ffffff' };
+}
+
+/** Serialize icon name + color to DB string */
+export function serializeIcon(name: string, color: string): string {
+  return `${name}:${color}`;
+}