/* ============ ATHARV.OS — System Tray ============ */
/* ===== Tooltip wrapper ===== */
function Tip({ label, children, delay = 600 }) {
const [show, setShow] = React.useState(false);
const [pos, setPos] = React.useState({ x: 0, y: 0 });
const tref = React.useRef();
const enter = (e) => {
const r = e.currentTarget.getBoundingClientRect();
setPos({ x: r.left + r.width/2, y: r.top - 4 });
tref.current = setTimeout(() => setShow(true), delay);
};
const leave = () => { clearTimeout(tref.current); setShow(false); };
return (
{children}
{show && (
{label}
)}
);
}
/* ===== Pixel-art tray icons (16x16) ===== */
const TrayIcons = {
speaker: (muted) => ``,
network: (active) => ``,
note: (pulse) => ``,
langEn: () => ``,
onlineDot: () => ``,
};
/* ===== Volume slider popup ===== */
function VolumePopup({ value, muted, onChange, onMute, onClose }) {
const ref = React.useRef();
React.useEffect(() => {
const onDoc = (e) => { if (ref.current && !ref.current.contains(e.target)) onClose(); };
setTimeout(() => document.addEventListener('mousedown', onDoc), 0);
return () => document.removeEventListener('mousedown', onDoc);
}, [onClose]);
return (
);
}
/* ===== Date/Time Properties dialog ===== */
function DateTimeDialog({ onClose, zIndex }) {
const [pos, setPos] = React.useState({ x: window.innerWidth/2 - 180, y: window.innerHeight/2 - 200 });
const [drag, setDrag] = React.useState(null);
const [now, setNow] = React.useState(new Date());
React.useEffect(() => {
const id = setInterval(() => setNow(new Date()), 1000);
return () => clearInterval(id);
}, []);
React.useEffect(() => {
if (!drag) return;
const onMove = (e) => setPos({ x: e.clientX - drag.dx, y: e.clientY - drag.dy });
const onUp = () => setDrag(null);
window.addEventListener('mousemove', onMove);
window.addEventListener('mouseup', onUp);
return () => { window.removeEventListener('mousemove', onMove); window.removeEventListener('mouseup', onUp); };
}, [drag]);
const month = now.toLocaleString('en-US', { month: 'long' });
const year = now.getFullYear();
const day = now.getDate();
const dim = new Date(year, now.getMonth()+1, 0).getDate();
const firstDow = new Date(year, now.getMonth(), 1).getDay();
const cells = [];
for (let i = 0; i < firstDow; i++) cells.push(null);
for (let d = 1; d <= dim; d++) cells.push(d);
const h = now.getHours(); const m = now.getMinutes(); const s = now.getSeconds();
const ampm = h >= 12 ? 'PM' : 'AM';
const h12 = ((h+11)%12)+1;
return (
setDrag({ dx: e.clientX - pos.x, dy: e.clientY - pos.y })}>
Date/Time Properties
Date
{['S','M','T','W','T','F','S'].map((d,i) =>
{d}
)}
{cells.map((c,i) => (
{c || ''}
))}
Time
{String(h12).padStart(2,'0')}:{String(m).padStart(2,'0')}:{String(s).padStart(2,'0')} {ampm}
);
}
/* ===== Context menu ===== */
function TrayContextMenu({ x, y, items, onClose }) {
const ref = React.useRef();
React.useEffect(() => {
const onDoc = (e) => { if (ref.current && !ref.current.contains(e.target)) onClose(); };
setTimeout(() => document.addEventListener('mousedown', onDoc), 0);
return () => document.removeEventListener('mousedown', onDoc);
}, [onClose]);
return (
{items.map((it, i) => it === '-'
?
:
{ it.onClick && it.onClick(); onClose(); }}>{it.label}
)}
setShowVol(s => !s)}
onContextMenu={e => rightClick(e, [
{ label: 'Open Volume Control', onClick: () => setShowVol(true) },
{ label: muted ? 'Unmute' : 'Mute', onClick: () => setMuted(!muted) },
'-',
{ label: 'Properties', onClick: () => {} },
])}
dangerouslySetInnerHTML={{__html: TrayIcons.speaker(muted)}}/>
rightClick(e, [
{ label: 'Open Network Neighborhood', onClick: onOpenNetwork },
{ label: 'About', onClick: () => {} },
])}
dangerouslySetInnerHTML={{__html: TrayIcons.network(netActive)}}/>
rightClick(e, [
{ label: 'Open Media Player', onClick: onOpenMedia },
{ label: 'Properties', onClick: () => {} },
])}
dangerouslySetInnerHTML={{__html: TrayIcons.note(mp && mp.playing)}}/>
rightClick(e, [
{ label: 'Properties', onClick: () => {} },
])} dangerouslySetInnerHTML={{__html: TrayIcons.langEn()}}/>
setShowDt(s => !s)}>
{String(h12).padStart(2,'0')}:{String(m).padStart(2,'0')} {ampm}
{showVol && (
{ setVolume(v); if (muted && v > 0) setMuted(false); }}
onMute={() => setMuted(!muted)}
onClose={() => setShowVol(false)}
/>
)}
{showDt && setShowDt(false)}/>}
{ctx && setCtx(null)}/>}
);
}
Object.assign(window, { SystemTray, Tip });