[FEAT-001] Icon Picker f�r Trainingstypen #14

New Issue

Lars · 2026-03-23T09:01:25+01:00

Lars commented

2026-03-23 09:01:25 +01:00

Status: ? Ausstehend
Priorit�t: Low (UX)
Branch: develop

Beschreibung

Admin-UI zum Erstellen/Bearbeiten von Trainingstypen erfordert manuelle Emoji-Eingabe im Icon-Feld. Ein visueller Emoji-Picker w�rde die UX verbessern.

Aktuelles Verhalten

Textfeld: "Icon (Emoji)" ? User muss Emoji manuell eingeben oder kopieren
Fehleranf�llig (falsches Format, kein Emoji)

Erwartetes Verhalten

Button "Icon ausw�hlen" ? Emoji-Picker �ffnet sich
Kategorien: Sport, Natur, Objekte, etc.
Klick auf Emoji ? �bernimmt in Feld
Alternativ: Weiterhin manuelle Eingabe m�glich

Implementierung

Frontend-Library: emoji-picker-react oder emoji-mart
Komponente: <EmojiPicker onSelect={(emoji) => setIcon(emoji.native)}/>
Modal/Dropdown neben Icon-Textfeld

Betroffene Dateien

frontend/src/pages/SettingsPage.jsx (Admin Training Types Form)
Optional: Neue Komponente frontend/src/components/EmojiPicker.jsx

To-Do

Library evaluieren (Bundle-Size, React 18 Kompatibilit�t)
Komponente integrieren
UX testen (Mobile + Desktop)

**Status:** ? Ausstehend **Priorit�t:** Low (UX) **Branch:** develop ## Beschreibung Admin-UI zum Erstellen/Bearbeiten von Trainingstypen erfordert manuelle Emoji-Eingabe im Icon-Feld. Ein visueller Emoji-Picker w�rde die UX verbessern. ## Aktuelles Verhalten - Textfeld: "Icon (Emoji)" ? User muss Emoji manuell eingeben oder kopieren - Fehleranf�llig (falsches Format, kein Emoji) ## Erwartetes Verhalten - Button "Icon ausw�hlen" ? Emoji-Picker �ffnet sich - Kategorien: Sport, Natur, Objekte, etc. - Klick auf Emoji ? �bernimmt in Feld - Alternativ: Weiterhin manuelle Eingabe m�glich ## Implementierung - Frontend-Library: `emoji-picker-react` oder `emoji-mart` - Komponente: `<EmojiPicker onSelect={(emoji) => setIcon(emoji.native)}/>` - Modal/Dropdown neben Icon-Textfeld ## Betroffene Dateien - `frontend/src/pages/SettingsPage.jsx` (Admin Training Types Form) - Optional: Neue Komponente `frontend/src/components/EmojiPicker.jsx` ## To-Do - [ ] Library evaluieren (Bundle-Size, React 18 Kompatibilit�t) - [ ] Komponente integrieren - [ ] UX testen (Mobile + Desktop)

Lars added the

feature

low

develop

labels 2026-03-23 09:01:25 +01:00

Lars commented

2026-04-04 14:26:02 +02:00

Lösung / Umsetzung

Status: Erledigt auf develop (ohne zusätzliche npm-Library wie emoji-picker-react; stattdessen kuratierte Emoji-Gruppen + natives Textfeld / OS-Emoji-Picker).

Was umgesetzt wurde

Wiederverwendbare Komponente EmojiIconPicker (frontend/src/components/EmojiIconPicker.jsx): Vorschau, Freitext, aufklappbare Vorschläge nach Gruppen (Sport, Ernährung, Tiere, …), Button Leeren, optionale Zusatzgruppen per extraGroups.
Suche in den Vorschlägen: Suchfeld filtert die Emoji-Buttons; Gruppenüberschriften werden zusätzlich durchsucht. Mehrere Wörter verfeinern die Suche (jedes muss in den Stichworten vorkommen). Umlaute werden robust behandelt (Normalisierung).
emojiIconPickerKeywords.js (neu): Zusätzliche DE/EN-Suchbegriffe pro Emoji. Für Inline Skating / Rollschuh ist u. a. 🛼 mit Begriffen wie rollschuh, inline, inliner, skates verknüpft (Unicode „Roller Skate“; es gibt kein separates reines Inliner-Emoji).

Einbindung in der App

u. a. AdminTrainingTypesPage.jsx, AdminGoalTypesPage.jsx, AdminFocusAreasPage.jsx.

Abweichung von der ursprünglichen Issue-Spez

Das Issue schlug emoji-picker-react / emoji-mart vor. Gewählt wurde: keine neue Dependency, geringeres Bundle, volle Kontrolle über Sport-Mapping (inkl. deutscher Kontext) und Suchbegriffe. Manuelle Emoji-Eingabe und OS-Picker (z. B. Win + .) bleiben möglich.

Schließen: Feature aus Sicht Admin-UX (Icon/Emoji für Trainingstypen u. a.) erfüllt.

## Lösung / Umsetzung **Status:** Erledigt auf `develop` (ohne zusätzliche npm-Library wie `emoji-picker-react`; stattdessen kuratierte Emoji-Gruppen + natives Textfeld / OS-Emoji-Picker). ### Was umgesetzt wurde - **Wiederverwendbare Komponente** `EmojiIconPicker` (`frontend/src/components/EmojiIconPicker.jsx`): Vorschau, Freitext, aufklappbare **Vorschläge** nach Gruppen (Sport, Ernährung, Tiere, …), Button **Leeren**, optionale Zusatzgruppen per `extraGroups`. - **Suche in den Vorschlägen:** Suchfeld filtert die Emoji-Buttons; **Gruppenüberschriften** werden zusätzlich durchsucht. Mehrere Wörter verfeinern die Suche (jedes muss in den Stichworten vorkommen). Umlaute werden robust behandelt (Normalisierung). - **`emojiIconPickerKeywords.js` (neu):** Zusätzliche DE/EN-Suchbegriffe pro Emoji. Für **Inline Skating / Rollschuh** ist u. a. **🛼** mit Begriffen wie `rollschuh`, `inline`, `inliner`, `skates` verknüpft (Unicode „Roller Skate“; es gibt kein separates reines Inliner-Emoji). ### Einbindung in der App - u. a. `AdminTrainingTypesPage.jsx`, `AdminGoalTypesPage.jsx`, `AdminFocusAreasPage.jsx`. ### Abweichung von der ursprünglichen Issue-Spez Das Issue schlug `emoji-picker-react` / `emoji-mart` vor. **Gewählt wurde:** keine neue Dependency, geringeres Bundle, volle Kontrolle über **Sport-Mapping** (inkl. deutscher Kontext) und **Suchbegriffe**. Manuelle Emoji-Eingabe und OS-Picker (z. B. Win + .) bleiben möglich. --- **Schließen:** Feature aus Sicht Admin-UX (Icon/Emoji für Trainingstypen u. a.) erfüllt.

Lars closed this issue

2026-04-04 14:26:12 +02:00

Lars commented

2026-04-05 11:22:48 +02:00

Erledigt im Code: AdminTrainingTypesPage nutzt EmojiIconPicker (frontend/src/components/EmojiIconPicker.jsx) fÃ¼r Icon-Auswahl bei Trainingstypen. icon bleibt String in DB. Geschlossen auf Wunsch 2026-04-04.

Sign in to join this conversation.