discord-presence/ui/main.js

const { invoke } = window.__TAURI__.core;

let connected = false;
let timerStart = null;
let timerInterval = null;

const appIdInput     = document.getElementById("appId");
const statusInput    = document.getElementById("statusInput");
const detailsInput   = document.getElementById("detailsInput");
const showTimeCheck  = document.getElementById("showTime");
const connectBtn     = document.getElementById("connectBtn");
const setBtn         = document.getElementById("setBtn");
const clearBtn       = document.getElementById("clearBtn");
const statusDot      = document.getElementById("statusDot");
const statusLabel    = document.getElementById("statusLabel");
const previewTitle   = document.getElementById("previewTitle");
const previewStatus  = document.getElementById("previewStatus");
const previewDetails = document.getElementById("previewDetails");
const previewTime    = document.getElementById("previewTime");

async function toggleConnection() {
  if (connected) {
    try {
      await invoke("disconnect");
      setConnected(false);
      toast("Disconnected", "neutral");
    } catch (e) {
      toast(e, "error");
    }
  } else {
    const appId = appIdInput.value.trim();
    if (!appId) {
      toast("Paste your Application ID first", "error");
      appIdInput.focus();
      return;
    }
    connectBtn.textContent = "Connecting…";
    connectBtn.disabled = true;
    try {
      await invoke("connect", { appId });
      setConnected(true);
      toast("Connected to Discord", "success");
    } catch (e) {
      toast(e, "error");
    } finally {
      connectBtn.disabled = false;
    }
  }
}

function setConnected(state) {
  connected = state;
  connectBtn.textContent = state ? "Disconnect" : "Connect";
  statusDot.className = `status-dot ${state ? "on" : "off"}`;
  statusLabel.textContent = state ? "Connected" : "Disconnected";
  setBtn.disabled = !state;
  clearBtn.disabled = !state;
  appIdInput.disabled = state;

  if (state) {
    timerStart = Date.now();
    startTimer();
  } else {
    stopTimer();
    timerStart = null;
  }
}

async function setActivity() {
  const status  = statusInput.value.trim();
  const details = detailsInput.value.trim();
  const showTime = showTimeCheck.checked;
  const hours = parseInt(document.getElementById("elapsedHours").value) || 0;
  const mins  = parseInt(document.getElementById("elapsedMins").value) || 0;
  const elapsedSeconds = (hours * 3600) + (mins * 60);

  try {
    await invoke("set_activity", { status, details, showTime, elapsedSeconds });
    if (elapsedSeconds > 0) {
      timerStart = Date.now() - (elapsedSeconds * 1000);
    }
    updatePreview(status, details, showTime);
    toast("Status updated", "success");
  } catch (e) {
    toast(e, "error");
  }
}

async function clearActivity() {
  try {
    await invoke("clear_activity");
    resetPreview();
    toast("Presence cleared", "neutral");
  } catch (e) {
    toast(e, "error");
  }
}

function updatePreview(status, details, showTime) {
  previewTitle.textContent = appIdInput.value ? "Your App Name" : "—";

  if (status) {
    previewStatus.textContent = status;
    previewStatus.classList.remove("hidden");
  } else {
    previewStatus.classList.add("hidden");
  }

  if (details) {
    previewDetails.textContent = details;
    previewDetails.classList.remove("hidden");
  } else {
    previewDetails.classList.add("hidden");
  }

  if (showTime) {
    previewTime.classList.remove("hidden");
  } else {
    previewTime.classList.add("hidden");
  }
}

function resetPreview() {
  previewTitle.textContent = "—";
  previewStatus.classList.add("hidden");
  previewDetails.classList.add("hidden");
  previewTime.classList.add("hidden");
}

statusInput.addEventListener("input", () => {
  if (previewStatus.textContent || statusInput.value) {
    previewStatus.textContent = statusInput.value || "";
    previewStatus.classList.toggle("hidden", !statusInput.value);
  }
});
detailsInput.addEventListener("input", () => {
  if (previewDetails.textContent || detailsInput.value) {
    previewDetails.textContent = detailsInput.value || "";
    previewDetails.classList.toggle("hidden", !detailsInput.value);
  }
});

statusInput.addEventListener("keydown", (e) => { if (e.key === "Enter" && connected) setActivity(); });
detailsInput.addEventListener("keydown", (e) => { if (e.key === "Enter" && connected) setActivity(); });
appIdInput.addEventListener("keydown", (e) => { if (e.key === "Enter" && !connected) toggleConnection(); });

function startTimer() {
  stopTimer();
  timerInterval = setInterval(() => {
    if (!timerStart) return;
    const elapsed = Math.floor((Date.now() - timerStart) / 1000);
    const h = Math.floor(elapsed / 3600);
    const m = Math.floor((elapsed % 3600) / 60);
    const s = elapsed % 60;
    const parts = [];
    if (h > 0) parts.push(String(h).padStart(2, "0"));
    parts.push(String(m).padStart(2, "0"));
    parts.push(String(s).padStart(2, "0"));
    previewTime.textContent = parts.join(":") + " elapsed";
  }, 1000);
}

function stopTimer() {
  if (timerInterval) {
    clearInterval(timerInterval);
    timerInterval = null;
  }
}

function openHelp() {
  document.getElementById("helpModal").classList.remove("hidden");
}

function closeHelp() {
  document.getElementById("helpModal").classList.add("hidden");
}

document.addEventListener("keydown", (e) => {
  if (e.key === "Escape") closeHelp();
});

function toast(msg, type = "neutral") {
  const container = document.getElementById("toastContainer");
  const colors = {
    success: "bg-emerald-900/80 border-emerald-700/50 text-emerald-200",
    error:   "bg-rose-900/80 border-rose-700/50 text-rose-200",
    neutral: "bg-surface-700/90 border-surface-600/50 text-slate-300",
  };
  const el = document.createElement("div");
  el.className = `toast text-xs px-4 py-2 rounded-lg border backdrop-blur-sm ${colors[type] || colors.neutral}`;
  el.textContent = msg;
  container.appendChild(el);
  setTimeout(() => el.remove(), 2600);
}