From 21010807194bee6a224545f89659756cfaa3e2d6 Mon Sep 17 00:00:00 2001
From: Lars <Lars@stommer.de>
Date: Sat, 4 Apr 2026 14:17:35 +0200
Subject: [PATCH] feat: Expand EmojiIconPicker with additional curated emoji
 groups and enhance functionality for custom groups

---
 frontend/src/components/EmojiIconPicker.jsx | 204 ++++++++++++++++++--
 1 file changed, 185 insertions(+), 19 deletions(-)

diff --git a/frontend/src/components/EmojiIconPicker.jsx b/frontend/src/components/EmojiIconPicker.jsx
index 8de5068..618cf1b 100644
--- a/frontend/src/components/EmojiIconPicker.jsx
+++ b/frontend/src/components/EmojiIconPicker.jsx
@@ -2,37 +2,197 @@ import { useState, useId } from 'react'
 import { ChevronDown, ChevronUp } from 'lucide-react'
 
 /**
- * Kuratierte Emoji-Gruppen für Sport, Körper, Ernährung usw.
- * Kann bei Bedarf erweitert werden (z. B. prop `extraGroups`).
+ * Kuratierte Emoji-Gruppen (viele Einzel-Glyphen für breite OS-Unterstützung).
+ * Erste Sport-Gruppe: typische Vereins-/Breitensportarten in Deutschland (DOSB/Nischensport mit abgedeckt).
+ * Erweiterbar: prop `extraGroups` an EmojiIconPicker, oder diese Konstante editieren.
  */
 export const EMOJI_ICON_GROUPS = [
   {
-    label: 'Training & Sport',
+    label: 'Sportarten (typisch Deutschland)',
     emojis: [
-      '🏃', '🚴', '🏊', '🧘', '🏋️', '⛷️', '🤸', '🥊', '🎾', '⚽', '🏀', '🤺',
-      '🚶', '🧗', '⛰️', '🏄', '🤿', '🥋', '🤼', '⛹️', '🤾', '🏌️', '🎿', '🧗‍♂️'
+      // Vereins- & Breitensport (Reihenfolge: Fußball, Handball, Kampfsport Gi = Karate/Judo/…, …)
+      '⚽',
+      '🤾',
+      '🤾‍♂️',
+      '🤾‍♀️',
+      '🥋',
+      '🏐',
+      '🏀',
+      '🎾',
+      '🏓',
+      '🏸',
+      '🏒',
+      '🏑',
+      '🥍',
+      '🏈',
+      '🏉',
+      '⚾',
+      '🥎',
+      '⛹️',
+      '⛹️‍♂️',
+      '⛹️‍♀️',
+      '🥅',
+      '⛷️',
+      '🎿',
+      '🏂',
+      '🛷',
+      '⛸️',
+      '🥌',
+      '🚴',
+      '🚴‍♂️',
+      '🚴‍♀️',
+      '🚵',
+      '🚵‍♂️',
+      '🚵‍♀️',
+      '🏃',
+      '🏃‍♂️',
+      '🏃‍♀️',
+      '🏃‍➡️',
+      '🚶',
+      '🥾',
+      '🏊',
+      '🏊‍♂️',
+      '🏊‍♀️',
+      '🤽',
+      '🤽‍♂️',
+      '🤽‍♀️',
+      '🤿',
+      '🏄',
+      '🏄‍♂️',
+      '🏄‍♀️',
+      '🚣',
+      '🚣‍♂️',
+      '🚣‍♀️',
+      '⛵',
+      '🧗',
+      '🧗‍♂️',
+      '🧗‍♀️',
+      '🏋️',
+      '🏋️‍♂️',
+      '🏋️‍♀️',
+      '🤸',
+      '🤸‍♂️',
+      '🤸‍♀️',
+      '🥊',
+      '🤼',
+      '🤺',
+      '🏇',
+      '⛳',
+      '🏌️',
+      '🏌️‍♂️',
+      '🏌️‍♀️',
+      '💃',
+      '🕺',
+      '🧘',
+      '🧘‍♂️',
+      '🧘‍♀️',
+      '🛼',
+      '🛹',
+      '🎯',
+      '🎳',
+      '🏟️',
+      '🏆',
+      '🥇',
+      '🥈',
+      '🥉'
     ]
   },
   {
-    label: 'Körper & Gesundheit',
+    label: 'Weitere Sportarten & Hobbysport',
     emojis: [
-      '💪', '❤️', '🫀', '🦵', '🧠', '👁️', '⚖️', '📏', '🩺', '💊', '🌡️', '🫁'
+      '🎱',
+      '🎣',
+      '🤹',
+      '🪁',
+      '🥏',
+      '🛶',
+      '🏹',
+      '🌊',
+      '🏖️',
+      '🛣️',
+      '🧭',
+      '🏕️',
+      '⛺'
     ]
   },
   {
-    label: 'Ernährung',
+    label: 'Yoga, Geist, Balance',
     emojis: [
-      '🍎', '🥩', '🥗', '🍽️', '💧', '☕', '🥤', '🥛', '🍌', '🥑', '🍞', '🐟'
+      '🧘', '🧘‍♂️', '🧘‍♀️', '🪷', '☯️', '🕉️', '🙏', '🧎', '🧍', '💭', '📿', '🎼',
+      '🎹', '🥁', '🎸', '🎺', '🔔', '✨', '🌟', '💫', '🔮'
+    ]
+  },
+  {
+    label: 'Outdoor & Natur',
+    emojis: [
+      '⛰️', '🏔️', '🗻', '🌋', '🏕️', '⛺', '🧭', '🗺️', '🌲', '🌳', '🌴', '🍃',
+      '🍂', '🌿', '☘️', '🪨', '🏞️', '🏜️', '🏖️', '🌅', '🌄', '🌈', '⛅', '🌤️',
+      '☀️', '🌙', '⭐', '🌠', '❄️', '☃️', '⛄'
+    ]
+  },
+  {
+    label: 'Körper & Medizin',
+    emojis: [
+      '💪', '🦾', '🦵', '🦶', '🖐️', '✋', '👣', '❤️', '🩷', '💙', '💚', '🫀',
+      '🫁', '🧠', '👁️', '👂', '🦷', '🦴', '🧬', '⚕️', '🩺', '🩹', '🩼', '💊',
+      '🌡️', '🔬', '🧪', '🧫', '♿', '⚖️', '📏', '📐'
+    ]
+  },
+  {
+    label: 'Ernährung & Getränke',
+    emojis: [
+      '🍎', '🍐', '🍊', '🍋', '🍌', '🍉', '🍇', '🍓', '🫐', '🍒', '🍑', '🥭',
+      '🍍', '🥝', '🍅', '🥑', '🥦', '🥬', '🥒', '🌶️', '🫑', '🌽', '🥕', '🫒',
+      '🧄', '🧅', '🥔', '🍠', '🥐', '🍞', '🥖', '🥨', '🧀', '🥚', '🍳', '🧈',
+      '🥞', '🧇', '🥓', '🥩', '🍗', '🍖', '🌭', '🍔', '🍟', '🍕', '🫓', '🥙',
+      '🌮', '🌯', '🥗', '🍝', '🍜', '🍲', '🍛', '🍣', '🍱', '🥟', '🦪', '🍤',
+      '🍙', '🍚', '🍘', '🍥', '🥠', '🥮', '🍢', '🍡', '🍧', '🍨', '🍦', '🥧',
+      '🧁', '🍰', '🎂', '🍮', '🍭', '🍬', '🍫', '🍿', '🍩', '🍪', '🌰', '🥜',
+      '🍯', '🥛', '🍼', '🫖', '☕', '🍵', '🧃', '🥤', '🧋', '🍶', '🍺', '🍻',
+      '🥂', '🍷', '🥃', '🍸', '🍹', '🧉', '🍾', '💧', '🧊'
     ]
   },
   {
     label: 'Schlaf & Erholung',
-    emojis: ['😴', '🌙', '🛌', '💤', '🧖', '☀️', '🌿']
+    emojis: [
+      '😴', '🛌', '🛏️', '💤', '🌙', '🌛', '🌜', '💆', '💆‍♂️', '💆‍♀️', '🧖', '🧖‍♂️',
+      '🧖‍♀️', '🧴', '🛁', '🚿', '🪥', '🩴', '🧘', '🕯️'
+    ]
   },
   {
-    label: 'Allgemein',
+    label: 'Stimmung & Motivation Smileys',
     emojis: [
-      '🎯', '📊', '🔥', '⭐', '✨', '🎵', '📌', '🧭', '📝', '✅', '💡', '🪄'
+      '😊', '🙂', '😌', '😎', '🤩', '🥳', '😤', '💯', '🙌', '👏', '🤝', '👍',
+      '👎', '✊', '🤛', '🤜', '💪', '🦵', '🧗', '🔥', '💥', '⚡', '🎉', '🏆',
+      '🥇', '🥈', '🥉', '🎖️', '🏅', '😅', '🤔', '🧐', '😇'
+    ]
+  },
+  {
+    label: 'Tiere (Maskottchen)',
+    emojis: [
+      '🐶', '🐱', '🐭', '🐹', '🐰', '🦊', '🐻', '🐼', '🐨', '🐯', '🦁', '🐮',
+      '🐷', '🐸', '🐵', '🐔', '🐧', '🐦', '🐤', '🦆', '🦅', '🦉', '🦇', '🐺',
+      '🐗', '🐴', '🦄', '🐝', '🐛', '🦋', '🐌', '🐞', '🐜', '🦗', '🕷️', '🦂',
+      '🐢', '🐍', '🦎', '🦖', '🦕', '🐙', '🦑', '🦐', '🦞', '🐠', '🐟', '🐬',
+      '🐳', '🐋', '🦈', '🐊'
+    ]
+  },
+  {
+    label: 'Symbole & Pointers',
+    emojis: [
+      '🎯', '📊', '📈', '📉', '🧮', '📋', '📌', '📍', '🔖', '🏷️', '✏️', '✒️',
+      '🖊️', '📎', '🔗', '⛓️', '🔒', '🔓', '🔑', '🗝️', '🔨', '🛠️', '⚙️', '🧰',
+      '💡', '🔦', '🏮', '🪔', '📣', '📢', '🔔', '🔕', '⏱️', '⏰', '🕐', '📅',
+      '🗓️', '✅', '☑️', '✔️', '❌', '⭕', '❗', '❓', '💬', '🗨️', '📝', '📖',
+      '🪄', '🎪', '🎭', '🎬', '🎨', '🖼️', '🧩', '♟️', '🎲', '🧸'
+    ]
+  },
+  {
+    label: 'Fahrzeuge & Weg',
+    emojis: [
+      '🚗', '🚕', '🚙', '🚌', '🚎', '🏎️', '🚓', '🚑', '🚒', '🚐', '🛻', '🚚',
+      '🚛', '🚜', '🛵', '🏍️', '🛺', '🚲', '🛴', '🛹', '🚁', '✈️', '🛫', '🛬',
+      '🪂', '🚀', '🛶', '⛵', '🚤', '🛥️', '🛳️', '⛴️', '🚢', '⚓', '🗼', '🏟️'
     ]
   }
 ]
@@ -48,6 +208,7 @@ export const EMOJI_ICON_GROUPS = [
  * @param {boolean} [disabled]
  * @param {string} [id] – optionale ID für das Textfeld (Label for=)
  * @param {boolean} [defaultExpanded=false] – Vorschlags-Bereich initial offen
+ * @param {{ label: string, emojis: string[] }[]} [extraGroups=[]] – eigene Gruppe(n) anhängen (z. B. Projekt-Favoriten)
  */
 export default function EmojiIconPicker({
   value,
@@ -56,11 +217,14 @@ export default function EmojiIconPicker({
   maxLength = 10,
   disabled = false,
   id: idProp,
-  defaultExpanded = false
+  defaultExpanded = false,
+  extraGroups = []
 }) {
   const uid = useId()
   const inputId = idProp || `emoji-icon-${uid}`
   const [open, setOpen] = useState(defaultExpanded)
+  const groups =
+    extraGroups.length > 0 ? [...EMOJI_ICON_GROUPS, ...extraGroups] : EMOJI_ICON_GROUPS
 
   const handleInput = (e) => {
     onChange(e.target.value.slice(0, maxLength))
@@ -144,12 +308,12 @@ export default function EmojiIconPicker({
             background: 'var(--surface2)',
             borderRadius: 12,
             border: '1px solid var(--border)',
-            maxHeight: 280,
+            maxHeight: 'min(72vh, 420px)',
             overflowY: 'auto'
           }}
         >
-          {EMOJI_ICON_GROUPS.map((group) => (
-            <div key={group.label} style={{ marginBottom: 14 }}>
+          {groups.map((group, gi) => (
+            <div key={`${group.label}-${gi}`} style={{ marginBottom: 14 }}>
               <div
                 style={{
                   fontSize: 11,
@@ -169,9 +333,9 @@ export default function EmojiIconPicker({
                   gap: 6
                 }}
               >
-                {group.emojis.map((em) => (
+                {group.emojis.map((em, ei) => (
                   <button
-                    key={`${group.label}-${em}`}
+                    key={`${group.label}-${gi}-${ei}-${em}`}
                     type="button"
                     onClick={() => pick(em)}
                     disabled={disabled}
@@ -197,7 +361,9 @@ export default function EmojiIconPicker({
           ))}
           <p style={{ fontSize: 11, color: 'var(--text3)', margin: 0, lineHeight: 1.5 }}>
             Du kannst auch direkt in das Feld tippen oder das Betriebssystem-Emoji-Menü nutzen
-            (z.&nbsp;B. Win + . unter Windows).
+            (z.&nbsp;B. Win + . unter Windows).{' '}
+            <strong>Inline Skating:</strong> Es gibt kein separates Inliner-Emoji; 🛼 (Rollschuh) wird dafür oft genutzt.{' '}
+            <strong>Karate / Kampfsport mit Gi:</strong> 🥋 (gemeinsames Unicode-Symbol für u. a. Karate, Judo, Ju-Jitsu).
           </p>
         </div>
       )}