diff --git a/static/css/components/modal.css b/static/css/components/modal.css index 5e3bf739..8ac0f56d 100644 --- a/static/css/components/modal.css +++ b/static/css/components/modal.css @@ -751,6 +751,29 @@ input:checked + .toggle-slider:before { opacity: 1; } +/* Add styles for tab with new content indicator */ +.tab-btn.has-new-content { + position: relative; +} + +.tab-btn.has-new-content::after { + content: ""; + position: absolute; + top: 4px; + right: 4px; + width: 8px; + height: 8px; + background-color: var(--lora-accent); + border-radius: 50%; + animation: pulse 2s infinite; +} + +@keyframes pulse { + 0% { opacity: 1; transform: scale(1); } + 50% { opacity: 0.7; transform: scale(1.1); } + 100% { opacity: 1; transform: scale(1); } +} + /* Tab content styles */ .help-content { padding: var(--space-1) 0; @@ -817,6 +840,37 @@ input:checked + .toggle-slider:before { text-decoration: underline; } +/* New content badge styles */ +.new-content-badge { + display: inline-flex; + align-items: center; + justify-content: center; + font-size: 0.7em; + font-weight: 600; + background-color: var(--lora-accent); + color: var(--lora-text); + padding: 2px 6px; + border-radius: 10px; + margin-left: 8px; + vertical-align: middle; + animation: fadeIn 0.5s ease-in-out; + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); + text-transform: uppercase; + letter-spacing: 0.5px; +} + +.new-content-badge.inline { + font-size: 0.65em; + padding: 1px 4px; + margin-left: 6px; + border-radius: 8px; +} + +/* Dark theme adjustments for new content badge */ +[data-theme="dark"] .new-content-badge { + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4); +} + /* Update video list styles */ .video-list { display: flex; diff --git a/static/js/managers/HelpManager.js b/static/js/managers/HelpManager.js index 59ab819e..ec422ec2 100644 --- a/static/js/managers/HelpManager.js +++ b/static/js/managers/HelpManager.js @@ -6,7 +6,7 @@ import { getStorageItem, setStorageItem } from '../utils/storageHelpers.js'; export class HelpManager { constructor() { this.lastViewedTimestamp = getStorageItem('help_last_viewed', 0); - this.latestContentTimestamp = 0; // Will be updated from server or config + this.latestContentTimestamp = new Date('2025-07-09').getTime(); // Will be updated from server or config this.isInitialized = false; // Default latest content data - could be fetched from server @@ -81,6 +81,9 @@ export class HelpManager { if (window.modalManager) { window.modalManager.toggleModal('helpModal'); + // Add visual indicator to Documentation tab if there's new content + this.updateDocumentationTabIndicator(); + // Update the last viewed timestamp this.markContentAsViewed(); @@ -88,6 +91,16 @@ export class HelpManager { this.hideHelpBadge(); } } + + /** + * Add visual indicator to Documentation tab for new content + */ + updateDocumentationTabIndicator() { + const docTab = document.querySelector('.tab-btn[data-tab="documentation"]'); + if (docTab && this.hasNewContent()) { + docTab.classList.add('has-new-content'); + } + } /** * Mark content as viewed by saving current timestamp @@ -105,7 +118,7 @@ export class HelpManager { // For now, we'll just use the hardcoded data from constructor // Update the timestamp with the latest data - this.latestContentTimestamp = this.latestVideoData.timestamp; + this.latestContentTimestamp = Math.max(this.latestContentTimestamp, this.latestVideoData.timestamp); // Check again if we need to show the badge with this new data this.updateHelpBadge(); diff --git a/templates/components/modals.html b/templates/components/modals.html index 68940e47..71c85d67 100644 --- a/templates/components/modals.html +++ b/templates/components/modals.html @@ -575,7 +575,7 @@