128 lines
4.2 KiB
JavaScript
128 lines
4.2 KiB
JavaScript
import React from "react";
|
||
import { useModalStore } from "../../../stores/modalStore.js";
|
||
import { usePresenceStore } from "../../../stores/presenceStore.js";
|
||
|
||
export function StatusSelectorModal() {
|
||
const { isOpen, type, onClose } = useModalStore();
|
||
const { currentStatus, setStatus } = usePresenceStore();
|
||
|
||
const isModalOpen = isOpen && type === "statusSelector";
|
||
|
||
if (!isModalOpen) return null;
|
||
|
||
const statuses = [
|
||
{ value: "online", label: "Online", icon: "🟢", description: "Available to chat" },
|
||
{ value: "idle", label: "Idle", icon: "🟡", description: "Away from keyboard" },
|
||
{ value: "dnd", label: "Do Not Disturb", icon: "🔴", description: "Focused - no notifications" },
|
||
{ value: "invisible", label: "Invisible", icon: "⚫", description: "Appear offline" },
|
||
];
|
||
|
||
const handleStatusChange = (status) => {
|
||
setStatus(status);
|
||
onClose();
|
||
};
|
||
|
||
return (
|
||
<div
|
||
className="modal-overlay"
|
||
onClick={onClose}
|
||
style={{
|
||
position: "fixed",
|
||
inset: 0,
|
||
backgroundColor: "transparent",
|
||
display: "flex",
|
||
alignItems: "flex-start",
|
||
justifyContent: "flex-start",
|
||
zIndex: 1000,
|
||
padding: "60px 0 0 80px",
|
||
}}
|
||
>
|
||
<div
|
||
className="modal-content"
|
||
onClick={(e) => e.stopPropagation()}
|
||
style={{
|
||
background: "#1a1a1a",
|
||
border: "1px solid #2a2a2a",
|
||
borderRadius: "8px",
|
||
width: "280px",
|
||
boxShadow: "0 8px 32px rgba(0,0,0,0.4)",
|
||
}}
|
||
>
|
||
<div style={{ padding: "12px 16px", borderBottom: "1px solid #2a2a2a" }}>
|
||
<h3 style={{ fontSize: "0.875rem", fontWeight: "bold", color: "#999", textTransform: "uppercase", letterSpacing: "1px" }}>
|
||
Set Status
|
||
</h3>
|
||
</div>
|
||
|
||
<div style={{ padding: "8px" }}>
|
||
{statuses.map((status) => (
|
||
<div
|
||
key={status.value}
|
||
onClick={() => handleStatusChange(status.value)}
|
||
style={{
|
||
padding: "12px",
|
||
borderRadius: "4px",
|
||
cursor: "pointer",
|
||
background: currentStatus === status.value ? "#0066ff20" : "transparent",
|
||
transition: "background 0.2s",
|
||
marginBottom: "4px",
|
||
}}
|
||
onMouseEnter={(e) => {
|
||
if (currentStatus !== status.value) {
|
||
e.currentTarget.style.background = "#2a2a2a";
|
||
}
|
||
}}
|
||
onMouseLeave={(e) => {
|
||
if (currentStatus !== status.value) {
|
||
e.currentTarget.style.background = "transparent";
|
||
}
|
||
}}
|
||
>
|
||
<div style={{ display: "flex", alignItems: "center", gap: "12px", marginBottom: "4px" }}>
|
||
<span style={{ fontSize: "1.25rem" }}>{status.icon}</span>
|
||
<span style={{ color: "#e0e0e0", fontWeight: currentStatus === status.value ? "bold" : "normal" }}>
|
||
{status.label}
|
||
</span>
|
||
</div>
|
||
<div style={{ fontSize: "0.75rem", color: "#666", marginLeft: "36px" }}>
|
||
{status.description}
|
||
</div>
|
||
</div>
|
||
))}
|
||
|
||
{/* Custom Status Button */}
|
||
<div
|
||
onClick={() => {
|
||
onClose();
|
||
setTimeout(() => {
|
||
const { onOpen } = useModalStore.getState();
|
||
onOpen("customStatus");
|
||
}, 100);
|
||
}}
|
||
style={{
|
||
padding: "12px",
|
||
borderRadius: "4px",
|
||
cursor: "pointer",
|
||
background: "transparent",
|
||
borderTop: "1px solid #2a2a2a",
|
||
marginTop: "8px",
|
||
paddingTop: "16px",
|
||
color: "#0066ff",
|
||
fontWeight: "500",
|
||
textAlign: "center",
|
||
transition: "background 0.2s",
|
||
}}
|
||
onMouseEnter={(e) => {
|
||
e.currentTarget.style.background = "#2a2a2a";
|
||
}}
|
||
onMouseLeave={(e) => {
|
||
e.currentTarget.style.background = "transparent";
|
||
}}
|
||
>
|
||
✏️ Set Custom Status
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|