diff --git a/index.js b/index.js
index 160c515..89839c3 100644
--- a/index.js
+++ b/index.js
@@ -297,7 +297,8 @@ async function initUI() {
toggleAnimations();
});
- $('#rpg-manual-update').on('click', async function() {
+ // Bind to both desktop and mobile refresh buttons
+ $('#rpg-manual-update, #rpg-manual-update-mobile').on('click', async function() {
if (!extensionSettings.enabled) {
// console.log('[RPG Companion] Extension is disabled. Please enable it in the Extensions tab.');
return;
diff --git a/src/systems/rendering/userStats.js b/src/systems/rendering/userStats.js
index eed3789..5e59bac 100644
--- a/src/systems/rendering/userStats.js
+++ b/src/systems/rendering/userStats.js
@@ -61,6 +61,9 @@ export function renderUserStats() {
|
LVL
${extensionSettings.level}
+
diff --git a/src/systems/ui/layout.js b/src/systems/ui/layout.js
index 9993154..aff3fd5 100644
--- a/src/systems/ui/layout.js
+++ b/src/systems/ui/layout.js
@@ -267,10 +267,13 @@ export function applyPanelPosition() {
*/
export function updateGenerationModeUI() {
if (extensionSettings.generationMode === 'together') {
- // In "together" mode, manual update button is hidden
+ // In "together" mode, both update buttons are hidden
$('#rpg-manual-update').hide();
+ $('#rpg-manual-update-mobile').hide();
} else {
- // In "separate" mode, manual update button is visible
+ // In "separate" mode, both update buttons are visible
+ // (CSS media queries will control which one is displayed)
$('#rpg-manual-update').show();
+ $('#rpg-manual-update-mobile').show();
}
}
diff --git a/style.css b/style.css
index 8b906b1..08ac9f0 100644
--- a/style.css
+++ b/style.css
@@ -2670,7 +2670,7 @@ body:has(.rpg-panel.rpg-position-left) #sheld {
}
/* ============================================
- MANUAL UPDATE BUTTON
+ MANUAL UPDATE BUTTON (Desktop)
============================================ */
.rpg-manual-update-btn {
width: 100%;
@@ -2707,6 +2707,42 @@ body:has(.rpg-panel.rpg-position-left) #sheld {
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}
+/* ============================================
+ REFRESH ICON BUTTON (Mobile)
+ ============================================ */
+.rpg-refresh-icon-btn {
+ display: none; /* Hidden by default, shown on mobile */
+ width: 36px;
+ height: 36px;
+ padding: 0;
+ margin-left: auto; /* Push to right side */
+ background: var(--rpg-highlight);
+ border: 2px solid var(--rpg-highlight);
+ border-radius: 50%;
+ color: var(--rpg-text);
+ font-size: 0.875rem;
+ cursor: pointer;
+ transition: all 0.3s ease;
+ align-items: center;
+ justify-content: center;
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
+ flex-shrink: 0;
+}
+
+.rpg-refresh-icon-btn:hover {
+ transform: scale(1.1);
+ box-shadow: 0 4px 12px var(--rpg-highlight);
+ background: var(--rpg-accent);
+}
+
+.rpg-refresh-icon-btn:active {
+ transform: scale(0.95);
+}
+
+.rpg-refresh-icon-btn i {
+ pointer-events: none;
+}
+
/* ============================================
SETTINGS BUTTON
============================================ */
@@ -3292,6 +3328,17 @@ body:has(.rpg-panel.rpg-position-left) #sheld {
/* Mobile-specific panel behavior - matches SillyTavern's 1000px breakpoint */
/* CACHE BUST v2025-01-16 */
+/* Mobile: Show icon button, hide desktop button */
+@media (max-width: 1000px) {
+ .rpg-refresh-icon-btn {
+ display: flex !important; /* Show mobile icon button */
+ }
+
+ .rpg-manual-update-btn {
+ display: none !important; /* Hide desktop button */
+ }
+}
+
@media (max-width: 1000px) {
/* ========================================
MOBILE PANEL FOUNDATION