From 72b69455e9f56acacbe810ac5f1b37d19d9946aa Mon Sep 17 00:00:00 2001
From: multipleof4 <planetrenox@protonmail.com>
Date: Fri, 20 Mar 2026 22:07:56 -0700
Subject: [PATCH] Feat: UI state management and DOM helpers

---
 ui.js | 87 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 87 insertions(+)
 create mode 100644 ui.js

diff --git a/ui.js b/ui.js
new file mode 100644
index 0000000..df03e68
--- /dev/null
+++ b/ui.js
@@ -0,0 +1,87 @@
+const $ = (s) => document.querySelector(s);
+
+export const el = {
+  setupScreen: $('#setup-screen'),
+  mainScreen: $('#main-screen'),
+  setupKey: $('#setup-key'),
+  setupSave: $('#setup-save'),
+  btnSettings: $('#btn-settings'),
+  modal: $('#modal-settings'),
+  modalKey: $('#modal-key'),
+  modalSave: $('#modal-save'),
+  btnCloseModal: $('#btn-close-modal'),
+  selModel: $('#sel-model'),
+  inpPrompt: $('#inp-prompt'),
+  inpFrames: $('#inp-frames'),
+  inpFps: $('#inp-fps'),
+  selSize: $('#sel-size'),
+  selRatio: $('#sel-ratio'),
+  btnGenerate: $('#btn-generate'),
+  progressArea: $('#progress-area'),
+  progressBar: $('#progress-bar'),
+  progressText: $('#progress-text'),
+  framesPreview: $('#frames-preview'),
+  resultArea: $('#result-area'),
+  resultGif: $('#result-gif'),
+  btnDownload: $('#btn-download'),
+};
+
+export function showSetup() {
+  el.setupScreen.classList.remove('hidden');
+  el.mainScreen.classList.add('hidden');
+}
+
+export function showMain() {
+  el.setupScreen.classList.add('hidden');
+  el.mainScreen.classList.remove('hidden');
+}
+
+export function showModal(currentKey) {
+  el.modalKey.value = currentKey;
+  el.modal.classList.remove('hidden');
+}
+
+export function hideModal() {
+  el.modal.classList.add('hidden');
+}
+
+export function setProgress(pct, text) {
+  el.progressArea.classList.remove('hidden');
+  el.progressArea.classList.add('flex-col');
+  el.progressBar.style.width = `${pct}%`;
+  el.progressText.textContent = text;
+}
+
+export function addFramePreview(base64, index) {
+  const img = document.createElement('img');
+  img.src = base64;
+  img.className = 'w-16 h-16 rounded-lg border border-neutral-200 object-cover';
+  img.title = `frame ${index + 1}`;
+  el.framesPreview.appendChild(img);
+}
+
+export function resetProgress() {
+  el.progressArea.classList.add('hidden');
+  el.progressArea.classList.remove('flex-col');
+  el.progressBar.style.width = '0%';
+  el.progressText.textContent = '';
+  el.framesPreview.innerHTML = '';
+}
+
+export function showResult(blobUrl) {
+  el.resultArea.classList.remove('hidden');
+  el.resultArea.classList.add('flex-col');
+  el.resultGif.src = blobUrl;
+  el.btnDownload.href = blobUrl;
+}
+
+export function hideResult() {
+  el.resultArea.classList.add('hidden');
+  el.resultArea.classList.remove('flex-col');
+}
+
+export function setGenerating(active) {
+  el.btnGenerate.disabled = active;
+  el.btnGenerate.classList.toggle('opacity-50', active);
+  el.btnGenerate.classList.toggle('cursor-not-allowed', active);
+}