Xor290/projet_gestion_commande
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

chore: build

Browse Source
This commit is contained in:
Xor290
2026-06-12 18:02:24 +02:00
parent ce45314c78
commit ab6092ae82
2 changed files with 150 additions and 90 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend-prep/src/components/Navbar.css
+87 -38
View File
@@ -443,59 +443,106 @@ body {
} }
/* ============================================================ /* ============================================================
Notification panel Notification bottom-sheet modal
============================================================ */ ============================================================ */
.notif-panel { .notif-modal-overlay {
position: absolute; position: fixed;
top: calc(var(--topbar-h) - 4px); inset: 0;
right: 0; z-index: 1100;
width: 300px; background: rgba(0, 0, 0, 0.55);
max-height: 380px; backdrop-filter: blur(3px);
-webkit-backdrop-filter: blur(3px);
display: flex;
align-items: flex-end;
justify-content: center;
animation: fadeIn 0.18s ease;
}
.notif-modal {
width: 100%;
max-width: 640px;
height: 70vh;
background: var(--surface); background: var(--surface);
border: 1px solid var(--border); border-top-left-radius: 20px;
border-radius: 14px; border-top-right-radius: 20px;
overflow: hidden;
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.55);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
animation: slideDown 0.18s ease; overflow: hidden;
box-shadow: 0 -8px 40px rgba(0, 0, 0, 0.5);
animation: slideUp 0.26s cubic-bezier(0.4, 0, 0.2, 1);
} }
@keyframes slideDown { @keyframes slideUp {
from { opacity: 0; transform: translateY(-6px); } from { transform: translateY(100%); }
to { opacity: 1; transform: translateY(0); } to { transform: translateY(0); }
} }
.notif-panel-header { .notif-modal-header {
padding: 0.7rem 1rem; display: flex;
align-items: center;
justify-content: space-between;
padding: 1.1rem 1.25rem;
border-bottom: 1px solid var(--border); border-bottom: 1px solid var(--border);
color: var(--text); flex-shrink: 0;
font-weight: 600;
font-size: 0.85rem;
letter-spacing: 0.02em;
} }
.notif-modal-title {
color: var(--text);
font-size: 1.05rem;
font-weight: 700;
}
.notif-modal-close {
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
background: transparent;
border: 1px solid var(--border);
border-radius: 8px;
color: var(--text-muted);
font-size: 0.9rem;
cursor: pointer;
transition: all var(--transition);
}
.notif-modal-close:hover {
background: var(--surface-2);
color: var(--text);
}
.notif-modal-body {
flex: 1;
overflow-y: auto;
scrollbar-width: thin;
scrollbar-color: var(--border) transparent;
}
.notif-modal-body::-webkit-scrollbar { width: 4px; }
.notif-modal-body::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }
.notif-empty { .notif-empty {
padding: 1.5rem; display: flex;
text-align: center; flex-direction: column;
align-items: center;
justify-content: center;
padding: 3rem 1.5rem;
color: var(--text-muted); color: var(--text-muted);
font-size: 0.85rem; font-size: 0.9rem;
gap: 0.5rem;
height: 100%;
} }
.notif-list { .notif-empty p { margin: 0; }
list-style: none;
margin: 0;
padding: 0;
overflow-y: auto;
max-height: 320px;
}
.notif-item { .notif-item {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 0.2rem; gap: 0.3rem;
padding: 0.7rem 1rem; padding: 0.9rem 1.25rem;
border-bottom: 1px solid var(--border); border-bottom: 1px solid var(--border);
border-left: 3px solid transparent;
transition: background var(--transition); transition: background var(--transition);
} }
@@ -503,20 +550,22 @@ body {
.notif-unread { .notif-unread {
background: var(--primary-soft); background: var(--primary-soft);
border-left: 3px solid var(--primary); border-left-color: var(--primary);
} }
.notif-read { opacity: 0.55; } .notif-read {
opacity: 0.55;
}
.notif-message { .notif-message {
color: var(--text); color: var(--text);
font-size: 0.83rem; font-size: 0.88rem;
line-height: 1.45; line-height: 1.5;
} }
.notif-time { .notif-time {
color: var(--text-muted); color: var(--text-muted);
font-size: 0.72rem; font-size: 0.74rem;
} }
/* ============================================================ /* ============================================================
frontend-prep/src/components/Navbar.tsx
+63 -52
View File
@@ -31,6 +31,22 @@ interface MenuItem {
path: string; path: string;
} }
function formatNotifDate(dateStr: string): string {
try {
const diffMs = Date.now() - new Date(dateStr).getTime();
const diffMin = Math.floor(diffMs / 60000);
if (diffMin < 1) return "À l'instant";
if (diffMin < 60) return `Il y a ${diffMin} min`;
const diffH = Math.floor(diffMin / 60);
if (diffH < 24) return `Il y a ${diffH}h`;
const diffD = Math.floor(diffH / 24);
if (diffD === 1) return "Hier";
return `Il y a ${diffD} jours`;
} catch {
return "";
}
}
function Navbar() { function Navbar() {
const { theme, toggleTheme } = useTheme(); const { theme, toggleTheme } = useTheme();
const [isMenuOpen, setIsMenuOpen] = useState<boolean>(false); const [isMenuOpen, setIsMenuOpen] = useState<boolean>(false);
@@ -42,7 +58,6 @@ function Navbar() {
const [shopName, setShopName] = useState("Milieu-Nantais"); const [shopName, setShopName] = useState("Milieu-Nantais");
const seenKeysRef = useRef<Set<string>>(new Set()); const seenKeysRef = useRef<Set<string>>(new Set());
const isFirstLoadRef = useRef(true); const isFirstLoadRef = useRef(true);
const notifPanelRef = useRef<HTMLDivElement>(null);
const { cartCount } = useCart(); const { cartCount } = useCart();
const navigate = useNavigate(); const navigate = useNavigate();
const location = useLocation(); const location = useLocation();
@@ -81,25 +96,17 @@ function Navbar() {
}); });
}, []); }, []);
useEffect(() => {
const handleClickOutside = (e: MouseEvent) => {
if (notifPanelRef.current && !notifPanelRef.current.contains(e.target as Node)) {
setShowNotifPanel(false);
}
};
document.addEventListener("mousedown", handleClickOutside);
return () => document.removeEventListener("mousedown", handleClickOutside);
}, []);
const handleNotifBellClick = async () => { const handleNotifBellClick = async () => {
setShowNotifPanel((prev) => !prev); setShowNotifPanel(true);
if (!showNotifPanel && unreadCount > 0) { if (unreadCount > 0) {
await markNotificationsRead(); await markNotificationsRead();
setUnreadCount(0); setUnreadCount(0);
setNotifications((prev) => prev.map((n) => ({ ...n, read: true }))); setNotifications((prev) => prev.map((n) => ({ ...n, read: true })));
} }
}; };
const closeNotifPanel = () => setShowNotifPanel(false);
const menuItems: MenuItem[] = [ const menuItems: MenuItem[] = [
{ id: "accueil", label: "Accueil", icon: faHome, path: "/user/accueil" }, { id: "accueil", label: "Accueil", icon: faHome, path: "/user/accueil" },
{ id: "produits", label: "Nos Produits", icon: faBox, path: "/user/nos-produits" }, { id: "produits", label: "Nos Produits", icon: faBox, path: "/user/nos-produits" },
@@ -173,46 +180,18 @@ function Navbar() {
</button> </button>
{/* Notifications */} {/* Notifications */}
<div className="notif-wrapper" ref={notifPanelRef}> <button
<button className="topbar-icon-btn"
className="topbar-icon-btn" onClick={handleNotifBellClick}
onClick={handleNotifBellClick} aria-label="Notifications"
aria-label="Notifications" >
> <FontAwesomeIcon icon={faBell} />
<FontAwesomeIcon icon={faBell} /> {unreadCount > 0 && (
{unreadCount > 0 && ( <span className="topbar-badge">
<span className="topbar-badge"> {unreadCount > 99 ? "99+" : unreadCount}
{unreadCount > 99 ? "99+" : unreadCount} </span>
</span>
)}
</button>
{showNotifPanel && (
<div className="notif-panel">
<div className="notif-panel-header">Notifications</div>
{notifications.length === 0 ? (
<div className="notif-empty">Aucune notification</div>
) : (
<ul className="notif-list">
{notifications.map((n, i) => (
<li
key={i}
className={`notif-item ${n.read ? "notif-read" : "notif-unread"}`}
>
<span className="notif-message">{n.message}</span>
<span className="notif-time">
{new Date(n.created_at).toLocaleTimeString("fr-FR", {
hour: "2-digit",
minute: "2-digit",
})}
</span>
</li>
))}
</ul>
)}
</div>
)} )}
</div> </button>
{/* Panier */} {/* Panier */}
<button <button
@@ -228,6 +207,38 @@ function Navbar() {
</div> </div>
</header> </header>
{/* ── Notifications modal ─────────────────────── */}
{showNotifPanel && (
<div className="notif-modal-overlay" onClick={closeNotifPanel}>
<div className="notif-modal" onClick={(e) => e.stopPropagation()}>
<div className="notif-modal-header">
<span className="notif-modal-title">Notifications</span>
<button className="notif-modal-close" onClick={closeNotifPanel} aria-label="Fermer">
<FontAwesomeIcon icon={faTimes} />
</button>
</div>
<div className="notif-modal-body">
{notifications.length === 0 ? (
<div className="notif-empty">
<FontAwesomeIcon icon={faBell} style={{ fontSize: "2rem", marginBottom: "0.75rem", opacity: 0.3 }} />
<p>Aucune notification</p>
</div>
) : (
notifications.map((n, i) => (
<div
key={i}
className={`notif-item ${n.read ? "notif-read" : "notif-unread"}`}
>
<span className="notif-message">{n.message}</span>
<span className="notif-time">{formatNotifDate(n.created_at)}</span>
</div>
))
)}
</div>
</div>
</div>
)}
{/* ── Overlay ─────────────────────────────────── */} {/* ── Overlay ─────────────────────────────────── */}
{isMenuOpen && <div className="sidebar-overlay" onClick={closeMenu} />} {isMenuOpen && <div className="sidebar-overlay" onClick={closeMenu} />}