From 0cdf26dc34a7cb1bc274d8ba990c76f6680df894 Mon Sep 17 00:00:00 2001
From: koko210Serve <koko.yordanov@proton.me>
Date: Sun, 1 Mar 2026 00:28:07 +0200
Subject: [PATCH] feat: populate all mood dropdowns dynamically from API

Replace hardcoded <option> lists in #mood (tab1 DM mood) and
#chat-mood-select (tab7 chat mood) with empty selects populated
by populateMoodDropdowns(). Respects evil mode emoji mapping.
Called on DOMContentLoaded and after server cards render.
---
 bot/static/index.html | 64 +++++++++++++++++++++----------------------
 1 file changed, 32 insertions(+), 32 deletions(-)

diff --git a/bot/static/index.html b/bot/static/index.html
index 6b3b492..badec3a 100644
--- a/bot/static/index.html
+++ b/bot/static/index.html
@@ -690,20 +690,7 @@
   <div class="section">
     <label for="mood">Mood:</label>
     <select id="mood">
-      <option value="angry">💢 angry</option>
-      <option value="asleep">💤 asleep</option>
-      <option value="bubbly">🫧 bubbly</option>
-      <option value="curious">👀 curious</option>
-      <option value="excited">✨ excited</option>
-      <option value="flirty">🫦 flirty</option>
-      <option value="irritated">😒 irritated</option>
-      <option value="melancholy">🍷 melancholy</option>
-      <option value="neutral" selected>neutral</option>
-      <option value="romantic">💌 romantic</option>
-      <option value="serious">👔 serious</option>
-      <option value="shy">👉👈 shy</option>
-      <option value="silly">🪿 silly</option>
-      <option value="sleepy">🌙 sleepy</option>
+      <option value="">Loading moods...</option>
     </select>
     <button onclick="setMood()">Set Mood</button>
     <button onclick="resetMood()">Reset Mood</button>
@@ -1408,19 +1395,6 @@
               <label style="display: block; margin-bottom: 0.5rem; font-weight: bold;">😊 Miku's Mood:</label>
               <select id="chat-mood-select" style="width: 100%; padding: 0.5rem; background: #333; color: #fff; border: 1px solid #555; border-radius: 4px;">
                 <option value="neutral" selected>neutral</option>
-                <option value="angry">💢 angry</option>
-                <option value="asleep">💤 asleep</option>
-                <option value="bubbly">🫧 bubbly</option>
-                <option value="curious">👀 curious</option>
-                <option value="excited">✨ excited</option>
-                <option value="flirty">🫦 flirty</option>
-                <option value="irritated">😒 irritated</option>
-                <option value="melancholy">🍷 melancholy</option>
-                <option value="romantic">💌 romantic</option>
-                <option value="serious">👔 serious</option>
-                <option value="shy">👉👈 shy</option>
-                <option value="silly">🪿 silly</option>
-                <option value="sleepy">🌙 sleepy</option>
               </select>
               <div style="font-size: 0.85rem; color: #aaa; margin-top: 0.3rem;">
                 Choose Miku's emotional state for this conversation
@@ -1990,6 +1964,7 @@ document.addEventListener('DOMContentLoaded', function() {
   // Load initial data
   loadStatus();
   loadServers();
+  populateMoodDropdowns(); // Populate DM and chat mood dropdowns immediately
   loadLastPrompt();
   loadLogs();
   checkEvilModeStatus();
@@ -2465,8 +2440,35 @@ async function populateMoodDropdowns() {
     
     if (data.moods) {
       console.log(`🎭 Found ${data.moods.length} moods:`, data.moods);
+      const emojiMap = evilMode ? EVIL_MOOD_EMOJIS : MOOD_EMOJIS;
       
-      // Clear existing mood options from all dropdowns (keep "Select Mood..." option)
+      // Populate the DM mood dropdown (#mood on tab1)
+      const dmMoodSelect = document.getElementById('mood');
+      if (dmMoodSelect) {
+        dmMoodSelect.innerHTML = '';
+        data.moods.forEach(mood => {
+          const opt = document.createElement('option');
+          opt.value = mood;
+          opt.textContent = `${emojiMap[mood] || ''} ${mood}`.trim();
+          if (mood === 'neutral') opt.selected = true;
+          dmMoodSelect.appendChild(opt);
+        });
+      }
+
+      // Populate the chat mood dropdown (#chat-mood-select on tab7)
+      const chatMoodSelect = document.getElementById('chat-mood-select');
+      if (chatMoodSelect) {
+        chatMoodSelect.innerHTML = '';
+        data.moods.forEach(mood => {
+          const opt = document.createElement('option');
+          opt.value = mood;
+          opt.textContent = `${emojiMap[mood] || ''} ${mood}`.trim();
+          if (mood === 'neutral') opt.selected = true;
+          chatMoodSelect.appendChild(opt);
+        });
+      }
+
+      // Populate per-server mood dropdowns (mood-select-{guildId})
       document.querySelectorAll('[id^="mood-select-"]').forEach(select => {
         // Keep only the first option ("Select Mood...")
         while (select.children.length > 1) {
@@ -2474,19 +2476,17 @@ async function populateMoodDropdowns() {
         }
       });
       
-      // Update all mood dropdowns
       data.moods.forEach(mood => {
         const moodOption = document.createElement('option');
         moodOption.value = mood;
-        moodOption.textContent = `${mood} ${MOOD_EMOJIS[mood] || ''}`;
+        moodOption.textContent = `${mood} ${emojiMap[mood] || ''}`;
         
-        // Add to all mood dropdowns
         document.querySelectorAll('[id^="mood-select-"]').forEach(select => {
           select.appendChild(moodOption.cloneNode(true));
         });
       });
       
-      console.log('🎭 Mood dropdowns populated successfully');
+      console.log('🎭 All mood dropdowns populated successfully');
     } else {
       console.warn('🎭 No moods found in response');
     }