From 132334d500e88b0cff359a51ac4217fa961b20cc Mon Sep 17 00:00:00 2001 From: Will Miao <13051207myq@gmail.com> Date: Thu, 10 Jul 2025 17:39:59 +0800 Subject: [PATCH] feat: Add new content indicators for Documentation tab and update links in modals --- static/css/components/modal.css | 54 +++++++++++++++++++++++++++++++ static/js/managers/HelpManager.js | 17 ++++++++-- templates/components/modals.html | 17 +++++++++- 3 files changed, 85 insertions(+), 3 deletions(-) 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 @@

Recipes

@@ -585,6 +585,21 @@
  • Configuration Options (WIP)
    • + +
    +

    + Extensions + NEW +

    + +