feat: integrate tag management into session data and enhance tag display in navigation

Author: murdercode

src/core/pomodoro-timer.js

@@ -1862,13 +1862,17 @@ export class PomodoroTimer {
         const startHour = Math.max(0, Math.floor(startTotalMinutes / 60));
         const startMinute = Math.max(0, startTotalMinutes % 60);
 
+        // Get current tags from TagManager
+        const currentTags = window.tagManager ? window.tagManager.getCurrentTags() : [];
+        
         const sessionData = {
             id: `timer_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`,
             session_type: 'focus',
             duration: durationMinutes,
             start_time: `${startHour.toString().padStart(2, '0')}:${startMinute.toString().padStart(2, '0')}`,
             end_time: `${endHour.toString().padStart(2, '0')}:${endMinute.toString().padStart(2, '0')}`,
             notes: this.currentTask && this.currentTask.trim() ? this.currentTask.trim() : null,
+            tags: currentTags, // Include current tags from TagManager
             created_at: now.toISOString()
         };
 

src/managers/navigation-manager.js

@@ -1563,9 +1563,26 @@ export class NavigationManager {
 
         // Get session tags (if tag system is available)
         const tags = await this.getSessionTags(session.id);
-        const tagsHtml = tags.length > 0 
-            ? tags.map(tag => `<span class="session-tag">${tag.name}</span>`).join('')
-            : '<span class="text-muted">-</span>';
+        let tagsHtml;
+        
+        if (tags.length === 0) {
+            tagsHtml = '<span class="text-muted">-</span>';
+        } else if (tags.length === 1) {
+            // Single tag - show normally
+            tagsHtml = `<span class="session-tag">${tags[0].name}</span>`;
+        } else {
+            // Multiple tags - show first + count indicator with tooltip
+            const firstTag = tags[0];
+            const remainingCount = tags.length - 1;
+            const allTagNames = tags.map(tag => tag.name).join(', ');
+            
+            tagsHtml = `
+                <div class="session-tags-compact" title="${allTagNames}">
+                    <span class="session-tag">${firstTag.name}</span>
+                    <span class="session-tag-count">+${remainingCount}</span>
+                </div>
+            `;
+        }
 
         // Create type badge
         const typeBadge = `<span class="session-type-badge ${session.session_type}">${session.session_type}</span>`;
@@ -1589,10 +1606,19 @@ export class NavigationManager {
     }
 
     async getSessionTags(sessionId) {
-        // If tag system is available, get tags for this session
-        if (window.tagManager) {
+        // Get tags directly from session data
+        if (window.sessionManager) {
             try {
-                return await window.tagManager.getSessionTags(sessionId);
+                // Find the session in all dates
+                for (const dateString in window.sessionManager.sessions) {
+                    const dateSessions = window.sessionManager.sessions[dateString];
+                    if (dateSessions) {
+                        const session = dateSessions.find(s => s.id === sessionId);
+                        if (session && session.tags) {
+                            return session.tags;
+                        }
+                    }
+                }
             } catch (error) {
                 console.log('Tags not available for session:', sessionId);
             }

src/styles/calendar.css

@@ -739,6 +739,24 @@
   font-weight: 500;
 }
 
+.session-tags-compact {
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+  cursor: help;
+}
+
+.session-tag-count {
+  display: inline-block;
+  padding: 0.125rem 0.375rem;
+  background: var(--bg-secondary);
+  color: var(--text-muted);
+  border-radius: 6px;
+  font-size: 0.625rem;
+  font-weight: 500;
+  border: 1px solid var(--border-color);
+}
+
 .session-actions {
   display: flex;
   gap: 0.5rem;

src/styles/timer.css

@@ -52,7 +52,7 @@
   cursor: pointer;
   position: relative;
   transition: background-color 0.2s ease;
-  gap: 8px;
+  gap: 4px;
 }
 
 
@@ -62,13 +62,11 @@
 
 .tag-dropdown-arrow {
   font-size: 18px;
-  opacity: 0.7;
   transition: transform 0.2s ease, opacity 0.2s ease;
 }
 
 .timer-status.active .tag-dropdown-arrow {
   transform: rotate(180deg);
-  opacity: 1;
 }
 
 .tag-dropdown-menu {