From e8e82c4b5a7026c27eec6c74974604ae40553a62 Mon Sep 17 00:00:00 2001
From: Gwadaking <gwawaking.dev@gmail.com>
Date: Wed, 1 Apr 2026 23:31:34 -0400
Subject: [PATCH] feat: display current date in timeline slider

---
 .../src/components/Timeline/TimelineSlider.css    | 15 +++++++++++++++
 .../src/components/Timeline/TimelineSlider.jsx    |  8 +++++++-
 2 files changed, 22 insertions(+), 1 deletion(-)

diff --git a/frontend/src/components/Timeline/TimelineSlider.css b/frontend/src/components/Timeline/TimelineSlider.css
index 34d06bc..d1b5189 100644
--- a/frontend/src/components/Timeline/TimelineSlider.css
+++ b/frontend/src/components/Timeline/TimelineSlider.css
@@ -24,6 +24,21 @@
   transition: background .15s, color .15s;
   white-space: nowrap;
 }
+.timeline__date {
+  padding: 6px 10px;
+  color: #64748b;
+  font-size: 12px;
+  font-weight: 600;
+  white-space: nowrap;
+  letter-spacing: 0.02em;
+}
+
+.timeline__separator {
+  width: 1px;
+  background: #334155;
+  margin: 4px 0;
+}
+
 .timeline__step:hover { background: #334155; color: #f1f5f9; }
 .timeline__step--active {
   background: #0ea5e9;
diff --git a/frontend/src/components/Timeline/TimelineSlider.jsx b/frontend/src/components/Timeline/TimelineSlider.jsx
index 19157a0..b4055dd 100644
--- a/frontend/src/components/Timeline/TimelineSlider.jsx
+++ b/frontend/src/components/Timeline/TimelineSlider.jsx
@@ -8,10 +8,16 @@ const STEPS = [
   { value: 'h48', label: '+48h' },
 ];
 
+const formatDate = () => new Date().toLocaleDateString('fr-FR', {
+  day: '2-digit', month: 'short', year: 'numeric',
+});
+
 export default function TimelineSlider({ activeStep, onChange }) {
   return (
     <div className="timeline">
-      {STEPS.map((step, i) => (
+      <span className="timeline__date">{formatDate()}</span>
+      <div className="timeline__separator" />
+      {STEPS.map((step) => (
         <button
           key={step.value}
           className={`timeline__step ${activeStep === step.value ? 'timeline__step--active' : ''}`}