/* ============================================================
AI EXPRESS — Shared UI primitives
============================================================ */
const { useState, useRef, useEffect, useCallback } = React;
/* ---------- Icons (stroke, 24x24) ---------- */
const Ic = {
bolt: (p) => ,
send: (p) => ,
text: (p) => ,
image: (p) => ,
code: (p) => ,
plus: (p) => ,
copy: (p) => ,
check: (p) => ,
refresh: (p) => ,
fuel: (p) => ,
user: (p) => ,
logout: (p) => ,
google: (p) => ,
close: (p) => ,
spark: (p) => ,
lock: (p) => ,
};
/* ---------- Logo ---------- */
function Brand({ size = 19, onClick }) {
return (
AI Express
);
}
/* ---------- Language toggle ---------- */
function LangToggle({ lang, setLang }) {
return (
{['fr', 'en'].map((l) => (
))}
);
}
/* ---------- KB formatter ---------- */
function fmtKB(kb) {
if (kb >= 1024) return (kb / 1024).toFixed(kb >= 10240 ? 0 : 1) + ' Mo';
return Math.round(kb) + ' Ko';
}
/* ---------- Data Tank Gauge ----------
ratio 0..1 of how FULL the tank is (1 = full, 0 = empty) */
function DataTank({ usedKB, quotaKB, t, compact, onRefill }) {
const remaining = Math.max(0, quotaKB - usedKB);
const fillRatio = Math.max(0, Math.min(1, remaining / quotaKB));
const pct = Math.round(fillRatio * 100);
const low = fillRatio <= 0.18;
const empty = remaining <= 0;
const color = empty ? 'var(--danger)' : low ? 'var(--warn)' : 'var(--accent)';
return (
{/* Segmented gauge */}
{Array.from({ length: 16 }).map((_, i) => {
const on = i < Math.round(fillRatio * 16);
return
;
})}
{fmtKB(usedKB)} {t.used}
{fmtKB(remaining)} {t.remaining}
{(low || empty) && (
)}
);
}
Object.assign(window, { Ic, Brand, LangToggle, DataTank, fmtKB });