Michael/Menu
1
0 Fork 0
mirror of https://github.com/R0m1k3/Menu.git synced 2026-10-11 17:28:28 +02:00
Code Issues Packages Projects Releases Wiki Activity

feat: add IconPicker component and utility library for Lucide icon selection and color management

Browse Source
This commit is contained in:
Michael committed 2026-04-10 11:03:02 +02:00
1 parent 485aba96fd
commit c3d141402f
5 files changed
+272 -66
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

app/admin/page.tsx
+13 -20
View File
@@ -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>
components/AddButtonForm.tsx
+23 -17
View File
@@ -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',
components/IconPicker.tsx
+155
View File
@@ -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>
);
}
components/MenuButton.tsx
+7 -29
View File
@@ -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>
lib/lucideIcons.ts
+74
View File
@@ -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}`;
}