julienfroidefond/towercontrol
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: improve emoji extraction and display logic in TaskCard

Browse Source 
- Updated emoji regex to capture more emoji variations, including ZWJ sequences.
- Refactored emoji handling to display the first emoji from tags if no title emojis are found, enhancing visual representation.
- Adjusted rendering logic to use the new displayEmojis array for consistent emoji display in the TaskCard component.
This commit is contained in:
Julien Froidefond
2025-09-15 16:49:07 +02:00
parent addd57cd50
commit 83cf4ce06b
1 changed files with 19 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
components/kanban/TaskCard.tsx
View File

@@ -88,10 +88,22 @@ export function TaskCard({ task, onDelete, onEdit, onUpdateTitle, compactView =
transform: `translate3d(${transform.x}px, ${transform.y}px, 0)`, transform: `translate3d(${transform.x}px, ${transform.y}px, 0)`,
} : undefined; } : undefined;
// Extraire les emojis du titre pour les afficher comme tags visuels // Extraire les emojis du titre pour les afficher comme tags visuels
const emojiRegex = /[\u{1F600}-\u{1F64F}]|[\u{1F300}-\u{1F5FF}]|[\u{1F680}-\u{1F6FF}]|[\u{1F1E0}-\u{1F1FF}]|[\u{2600}-\u{26FF}]|[\u{2700}-\u{27BF}]/gu; const emojiRegex = /(?:[\u{1F600}-\u{1F64F}]|[\u{1F300}-\u{1F5FF}]|[\u{1F680}-\u{1F6FF}]|[\u{1F900}-\u{1F9FF}]|[\u{1F1E0}-\u{1F1FF}]|[\u{2600}-\u{26FF}]|[\u{2700}-\u{27BF}])(?:[\u{200D}][\u{1F600}-\u{1F64F}]|[\u{1F300}-\u{1F5FF}]|[\u{1F680}-\u{1F6FF}]|[\u{1F900}-\u{1F9FF}]|[\u{1F1E0}-\u{1F1FF}]|[\u{2600}-\u{26FF}]|[\u{2700}-\u{27BF}]|[\u{FE0F}])*/gu;
const emojis = task.title.match(emojiRegex) || []; const titleEmojis = task.title.match(emojiRegex) || [];
const titleWithoutEmojis = task.title.replace(emojiRegex, '').trim(); const titleWithoutEmojis = task.title.replace(emojiRegex, '').trim();
// Si pas d'emoji dans le titre, utiliser l'emoji du premier tag
let displayEmojis: string[] = titleEmojis;
if (displayEmojis.length === 0 && task.tags && task.tags.length > 0) {
const firstTag = availableTags.find(tag => tag.name === task.tags[0]);
if (firstTag) {
const tagEmojis = firstTag.name.match(emojiRegex);
if (tagEmojis && tagEmojis.length > 0) {
displayEmojis = [tagEmojis[0]]; // Prendre seulement le premier emoji du tag
}
}
}
// Vue compacte : seulement le titre // Vue compacte : seulement le titre
@@ -107,9 +119,9 @@ export function TaskCard({ task, onDelete, onEdit, onUpdateTitle, compactView =
{...(isEditingTitle ? {} : listeners)} {...(isEditingTitle ? {} : listeners)}
> >
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
{emojis.length > 0 && ( {displayEmojis.length > 0 && (
<div className="flex gap-1 flex-shrink-0"> <div className="flex gap-1 flex-shrink-0">
{emojis.slice(0, 1).map((emoji, index) => ( {displayEmojis.slice(0, 1).map((emoji, index) => (
<span <span
key={index} key={index}
className="text-sm opacity-80 font-emoji" className="text-sm opacity-80 font-emoji"
@@ -190,9 +202,9 @@ export function TaskCard({ task, onDelete, onEdit, onUpdateTitle, compactView =
> >
{/* Header tech avec titre et status */} {/* Header tech avec titre et status */}
<div className="flex items-start gap-2 mb-2"> <div className="flex items-start gap-2 mb-2">
{emojis.length > 0 && ( {displayEmojis.length > 0 && (
<div className="flex gap-1 flex-shrink-0"> <div className="flex gap-1 flex-shrink-0">
{emojis.slice(0, 2).map((emoji, index) => ( {displayEmojis.slice(0, 2).map((emoji, index) => (
<span <span
key={index} key={index}
className="text-sm opacity-80 font-emoji" className="text-sm opacity-80 font-emoji"