Fix extension loading, enhance theming, add horizontal scrolling, improve emoji parsing, rename to Main Quests

src/systems/ui/desktop.js

@@ -22,9 +22,10 @@ export function setupDesktopTabs() {
     const $infoBox = $('#rpg-info-box');
     const $thoughts = $('#rpg-thoughts');
     const $inventory = $('#rpg-inventory');
+    const $quests = $('#rpg-quests');
 
     // If no sections exist, nothing to organize
-    if ($userStats.length === 0 && $infoBox.length === 0 && $thoughts.length === 0 && $inventory.length === 0) {
+    if ($userStats.length === 0 && $infoBox.length === 0 && $thoughts.length === 0 && $inventory.length === 0 && $quests.length === 0) {
         return;
     }
 
@@ -39,12 +40,17 @@ export function setupDesktopTabs() {
                 <i class="fa-solid fa-box"></i>
                 <span>Inventory</span>
             </button>
+            <button class="rpg-tab-btn" data-tab="quests">
+                <i class="fa-solid fa-scroll"></i>
+                <span>Quests</span>
+            </button>
         </div>
     `);
 
     // Create tab content containers
     const $statusTab = $('<div class="rpg-tab-content active" data-tab-content="status"></div>');
     const $inventoryTab = $('<div class="rpg-tab-content" data-tab-content="inventory"></div>');
+    const $questsTab = $('<div class="rpg-tab-content" data-tab-content="quests"></div>');
 
     // Move sections into their respective tabs (detach to preserve event handlers)
     if ($userStats.length > 0) {
@@ -63,6 +69,10 @@ export function setupDesktopTabs() {
         $inventoryTab.append($inventory.detach());
         $inventory.show();
     }
+    if ($quests.length > 0) {
+        $questsTab.append($quests.detach());
+        $quests.show();
+    }
 
     // Hide dividers on desktop tabs (tabs separate content naturally)
     $('.rpg-divider').hide();
@@ -72,6 +82,7 @@ export function setupDesktopTabs() {
     $tabsContainer.append($tabNav);
     $tabsContainer.append($statusTab);
     $tabsContainer.append($inventoryTab);
+    $tabsContainer.append($questsTab);
 
     // Replace content box with tabs container
     $contentBox.html('').append($tabsContainer);
@@ -102,6 +113,7 @@ export function removeDesktopTabs() {
     const $infoBox = $('#rpg-info-box').detach();
     const $thoughts = $('#rpg-thoughts').detach();
     const $inventory = $('#rpg-inventory').detach();
+    const $quests = $('#rpg-quests').detach();
 
     // Remove tabs container
     $('.rpg-tabs-container').remove();
@@ -114,18 +126,20 @@ export function removeDesktopTabs() {
     // Restore original sections to content box in correct order
     const $contentBox = $('.rpg-content-box');
 
-    // Re-insert sections in original order: User Stats, Info Box, Thoughts, Inventory
+    // Re-insert sections in original order: User Stats, Info Box, Thoughts, Inventory, Quests
     if ($dividerStats.length) {
         $dividerStats.before($userStats);
         $dividerInfo.before($infoBox);
         $dividerThoughts.before($thoughts);
         $contentBox.append($inventory);
+        $contentBox.append($quests);
     } else {
         // Fallback if dividers don't exist
         $contentBox.append($userStats);
         $contentBox.append($infoBox);
         $contentBox.append($thoughts);
         $contentBox.append($inventory);
+        $contentBox.append($quests);
     }
 
     // Show sections and dividers