💩(frontend) display tag on thread details and list view

Implementation need to be review. It's a first implementation.
the visual rendering is good but not necessarily the implementation :D

Author: sdemagny

src/features/layouts/components/thread-view/components/thread-action-bar/index.tsx

@@ -0,0 +1,71 @@
+import { useTranslation } from "react-i18next"
+import { Button } from "@openfun/cunningham-react"
+import { Tooltip } from "@gouvfr-lasuite/ui-kit"
+import { useMailboxContext } from "@/features/providers/mailbox"
+import { ThreadAccessesWidget } from "../thread-accesses-widget"
+import { useRead } from "@/features/message/use-read"
+import { useTrash } from "@/features/message/use-trash"
+import { ThreadAccessRoleEnum } from "@/features/api/gen/models"
+import { LabelBadge } from "@/features/layouts/components/label-badge"
+
+export const ActionBar = () => {
+    const { t } = useTranslation()
+    const { selectedThread, unselectThread } = useMailboxContext()
+    const { markAsUnread } = useRead()
+    const { markAsTrashed, markAsUntrashed } = useTrash()
+
+    if (!selectedThread) return null
+
+    const hasOnlyOneEditor = selectedThread.accesses.filter(
+        (access) => access.role === ThreadAccessRoleEnum.editor
+    ).length === 1
+
+    return (
+        <div className="thread-action-bar">
+            <div className="thread-action-bar__left">
+                {selectedThread.labels && selectedThread.labels.length > 0 && (
+                    <div className="thread-action-bar__labels">
+                        {selectedThread.labels.map((label) => (
+                            <LabelBadge key={label.id} label={label} />
+                        ))}
+                    </div>
+                )}
+            </div>
+            <div className="thread-action-bar__right">
+                <ThreadAccessesWidget accesses={selectedThread.accesses} />
+                <Tooltip content={t('actions.mark_as_unread')}>
+                    <Button
+                        color="primary-text"
+                        aria-label={t('actions.mark_as_unread')}
+                        size="small"
+                        icon={<span className="material-icons">mark_email_unread</span>}
+                        onClick={() => markAsUnread({ threadIds: [selectedThread.id], onSuccess: unselectThread })}
+                    />
+                </Tooltip>
+                {
+                    selectedThread.count_trashed < selectedThread.count_messages ? (
+                        <Tooltip content={t('actions.delete')}>
+                            <Button
+                                color="primary-text"
+                                aria-label={t('actions.delete')}
+                                size="small"
+                                icon={<span className="material-icons">delete</span>}
+                                onClick={() => markAsTrashed({ threadIds: [selectedThread.id], onSuccess: unselectThread })}
+                            />
+                        </Tooltip>
+                    ) : (
+                        <Tooltip content={t('actions.undelete')}>
+                            <Button
+                                color="primary-text"
+                                aria-label={t('actions.undelete')}
+                                size="small"
+                                icon={<span className="material-icons">restore</span>}
+                                onClick={() => markAsUntrashed({ threadIds: [selectedThread.id], onSuccess: unselectThread })}
+                            />
+                        </Tooltip>
+                    )
+                }
+            </div>
+        </div>
+    )
+} 

src/frontend/src/features/api/gen/models/label.ts

@@ -0,0 +1,25 @@
+/**
+ * Generated by orval v7.9.0 🍺
+ * Do not edit manually.
+ * messages API
+ * This is the messages API schema.
+ * OpenAPI spec version: 1.0.0 (v1.0)
+ */
+
+/**
+ * Serializer for Label model.
+ */
+export interface Label {
+  /** primary key for the record as UUID */
+  readonly id: string;
+  /** Name of the label/folder (can use slashes for hierarchy, e.g. 'Work/Projects') */
+  readonly name: string;
+  /** URL-friendly version of the name */
+  readonly slug: string;
+  /** Color of the label in hex format (e.g. #FF0000) */
+  readonly color: string;
+  /** Mailbox that owns this label */
+  readonly mailbox: string;
+  /** Threads that have this label */
+  readonly threads?: readonly string[];
+} 

src/frontend/src/features/api/gen/models/thread.ts

@@ -6,6 +6,7 @@
  * OpenAPI spec version: 1.0.0 (v1.0)
  */
 import type { ThreadAccessDetail } from "./thread_access_detail";
+import type { Label } from "./label";
 
 /**
  * Serialize threads.
@@ -29,4 +30,5 @@ export interface Thread {
   readonly updated_at: string;
   readonly user_role: string;
   readonly accesses: readonly ThreadAccessDetail[];
+  readonly labels: readonly Label[];
 }

src/frontend/src/features/layouts/components/label-badge/index.tsx

@@ -0,0 +1,44 @@
+import { Badge } from "@/features/ui/components/badge"
+import { Label } from "@/features/api/gen/models/label"
+
+type LabelBadgeProps = {
+    label: Label
+    size?: "small" | "medium"
+}
+
+export const LabelBadge = ({ label, size = "medium" }: LabelBadgeProps) => {
+    return (
+        <Badge>
+            <span
+                style={{
+                    backgroundColor: label.color,
+                    color: getContrastColor(label.color),
+                    padding: size === "small" ? "0.125rem 0.375rem" : "0.25rem 0.5rem",
+                    borderRadius: "4px",
+                    fontSize: size === "small" ? "0.75rem" : "0.875rem",
+                    fontWeight: 600,
+                    display: "inline-block",
+                }}
+            >
+                {label.name}
+            </span>
+        </Badge>
+    )
+}
+
+// Helper function to determine if text should be black or white based on background color
+function getContrastColor(hexColor: string): string {
+    // Remove the # if present
+    const hex = hexColor.replace("#", "")
+    
+    // Convert to RGB
+    const r = parseInt(hex.substring(0, 2), 16)
+    const g = parseInt(hex.substring(2, 4), 16)
+    const b = parseInt(hex.substring(4, 6), 16)
+    
+    // Calculate relative luminance
+    const luminance = (0.299 * r + 0.587 * g + 0.114 * b) / 255
+    
+    // Return black for light colors, white for dark colors
+    return luminance > 0.5 ? "#000000" : "#FFFFFF"
+} 

src/frontend/src/features/layouts/components/thread-panel/components/thread-item/_index.scss

@@ -134,3 +134,18 @@
     width: 76px;
     text-align: right;
 }
+
+.thread-item__metadata {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: var(--c--theme--spacings--2xs);
+}
+
+.thread-item__labels {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    gap: var(--c--theme--spacings--2xs);
+    margin-top: var(--c--theme--spacings--2xs);
+}

src/frontend/src/features/layouts/components/thread-panel/components/thread-item/index.tsx

@@ -5,6 +5,7 @@ import { useParams, useSearchParams } from "next/navigation"
 import { Thread } from "@/features/api/gen/models"
 import { ThreadItemSenders } from "./thread-item-senders"
 import ThreadHelper from "@/features/utils/thread-helper"
+import { LabelBadge } from "@/features/layouts/components/label-badge"
 
 type ThreadItemProps = {
     thread: Thread
@@ -34,13 +35,13 @@ export const ThreadItem = ({ thread }: ThreadItemProps) => {
                             />
                         )}
                         <div className="thread-item__metadata">
-                            {/* {thread.has_attachments ? (
-                                <span className="thread-item__metadata-attachments">
-                                    <Tooltip placement="bottom" content={t('tooltips.has_attachments')}>
-                                        <span className="material-icons">attachment</span>
-                                    </Tooltip>
-                                </span>
-                            ) : null} */}
+                            {thread.labels && thread.labels.length > 0 && (
+                                <div className="thread-item__labels">
+                                    {thread.labels.map((label) => (
+                                        <LabelBadge key={label.id} label={label} size="small" />
+                                    ))}
+                                </div>
+                            )}
                         </div>
                     </div>
                     <p className="thread-item__subject">{thread.subject}</p>

src/frontend/src/features/layouts/components/thread-view/components/thread-action-bar/_index.scss

@@ -1,18 +1,29 @@
 .thread-action-bar {
+    display: flex;
+    flex-direction: row;
     justify-content: space-between;
+    align-items: center;
+    padding: var(--c--theme--spacings--xs);
+    border-bottom: 1px solid var(--c--theme--colors--greyscale-200);
 }
 
-.thread-action-bar > div {
+.thread-action-bar__left {
     display: flex;
     flex-direction: row;
     align-items: center;
-    gap: var(--c--theme--spacings--2xs);
+    gap: var(--c--theme--spacings--base);
 }
 
-.thread-action-bar__left {
-    justify-content: flex-start;
+.thread-action-bar__labels {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    gap: var(--c--theme--spacings--2xs);
 }
 
 .thread-action-bar__right {
-    justify-content: flex-end;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: var(--c--theme--spacings--2xs);
 }

src/frontend/src/features/layouts/components/thread-view/components/thread-message/_index.scss

@@ -57,6 +57,13 @@
     color: var(--c--theme--colors--greyscale-500);
 }
 
+.thread-message__labels {
+    display: flex;
+    flex-direction: row;
+    gap: var(--c--theme--spacings--2xs);
+    flex-wrap: wrap;
+}
+
 .thread-message__date {
     text-align: right;
 }

src/frontend/src/features/layouts/components/thread-view/components/thread-message/index.tsx

@@ -10,6 +10,7 @@ import { useMailboxContext } from "@/features/providers/mailbox";
 import { Badge } from "@/features/ui/components/badge";
 import useTrash from "@/features/message/use-trash";
 import { AttachmentList } from "../thread-attachment-list";
+import { LabelBadge } from "@/features/layouts/components/label-badge";
 type ThreadMessageProps = {
     message: Message,
     isLatest: boolean,
@@ -61,6 +62,13 @@ export const ThreadMessage = forwardRef<HTMLElement, ThreadMessageProps>(
                         </div>
                         <div className="thread-message__header-column thread-message__header-column--right flex-row flex-align-center">
                             <div className="thread-message__metadata">
+                                {selectedThread?.labels && selectedThread.labels.length > 0 && (
+                                    <div className="thread-message__labels">
+                                        {selectedThread.labels.map((label) => (
+                                            <LabelBadge key={label.id} label={label} size="small" />
+                                        ))}
+                                    </div>
+                                )}
                                 {message.sent_at && (
                                     <p className="thread-message__date">{
                                         new Date(message.sent_at).toLocaleString(i18n.language, {

src/frontend/src/styles/custom.css

@@ -0,0 +1,19 @@
+/* Override badge color with thread label color */
+.badge {
+  background-color: transparent !important;
+  padding: 0 !important;
+}
+
+.badge > span {
+  display: inline-block !important;
+  padding: 0.25rem 0.5rem !important;
+  border-radius: 4px !important;
+  font-size: 0.875rem !important;
+  font-weight: 600 !important;
+}
+
+/* For small badges */
+.badge--small > span {
+  padding: 0.125rem 0.375rem !important;
+  font-size: 0.75rem !important;
+}