feat: Add desktop collapsed strip widgets

- Add new desktopStripWidgets settings in state.js with toggles for weather, clock, date, location, stats, and attributes
- Add strip widget container in template.html with animated clock face
- Add CSS styles for strip widgets with wider collapsed panel (5rem), vertical layout, and theme support
- Implement updateStripWidgets() in desktop.js to populate widgets from tracker data
- Wire up settings handlers in index.js for all strip widget toggles
- Call updateStripWidgets() on data updates in sillytavern.js integration
- Trigger widget update when panel is collapsed in layout.js

The strip widgets display compact stats/info in the collapsed panel strip on desktop, similar to mobile FAB widgets, eliminating the need to expand the panel to view basic data.
This commit is contained in:
tomt610
2026-01-13 00:08:00 +00:00
parent b18aaee0c0
commit 4644e0fd93
7 changed files with 763 additions and 11 deletions
+14 -6
View File
@@ -45,6 +45,7 @@ import { getSafeThumbnailUrl } from '../../utils/avatars.js';
// UI
import { setFabLoadingState, updateFabWidgets } from '../ui/mobile.js';
import { updateStripWidgets } from '../ui/desktop.js';
// Chapter checkpoint
import { updateAllCheckpointIndicators } from '../ui/checkpointUI.js';
@@ -232,8 +233,9 @@ export async function onMessageReceived(data) {
renderQuests();
renderMusicPlayer($musicPlayerContainer[0]);
// Update FAB widgets with newly parsed data
// Update FAB widgets and strip widgets with newly parsed data
updateFabWidgets();
updateStripWidgets();
// Then update the DOM to reflect the cleaned message
// Using updateMessageBlock to perform macro substitutions + regex formatting
@@ -266,9 +268,10 @@ export async function onMessageReceived(data) {
if (extensionSettings.autoUpdate && isAwaitingNewMessage) {
setTimeout(async () => {
await updateRPGData(renderUserStats, renderInfoBox, renderThoughts, renderInventory);
// Update FAB widgets after separate/external mode update completes
// Update FAB widgets and strip widgets after separate/external mode update completes
setFabLoadingState(false);
updateFabWidgets();
updateStripWidgets();
}, 500);
}
}
@@ -294,6 +297,7 @@ export async function onMessageReceived(data) {
// Stop FAB loading state and update widgets
setFabLoadingState(false);
updateFabWidgets();
updateStripWidgets();
// Re-apply checkpoint in case SillyTavern unhid messages during generation
await restoreCheckpointOnLoad();
@@ -332,8 +336,9 @@ export function onCharacterChanged() {
renderQuests();
renderMusicPlayer($musicPlayerContainer[0]);
// Update FAB widgets with loaded data
// Update FAB widgets and strip widgets with loaded data
updateFabWidgets();
updateStripWidgets();
// Update chat thought overlays
updateChatThoughts();
@@ -501,8 +506,9 @@ export function onMessageDeleted(messageIndex) {
renderQuests();
renderMusicPlayer($musicPlayerContainer[0]);
// Update FAB widgets
// Update FAB widgets and strip widgets
updateFabWidgets();
updateStripWidgets();
// Update chat thought overlays (removes any remaining)
updateChatThoughts();
@@ -555,8 +561,9 @@ export function onMessageDeleted(messageIndex) {
renderQuests();
renderMusicPlayer($musicPlayerContainer[0]);
// Update FAB widgets
// Update FAB widgets and strip widgets
updateFabWidgets();
updateStripWidgets();
// Update chat thought overlays
updateChatThoughts();
@@ -591,8 +598,9 @@ export function onMessageDeleted(messageIndex) {
renderQuests();
renderMusicPlayer($musicPlayerContainer[0]);
// Update FAB widgets
// Update FAB widgets and strip widgets
updateFabWidgets();
updateStripWidgets();
// Update chat thought overlays
updateChatThoughts();