v1.5: Integrated optional category feature, i18n stabilization, and documentation update

templates/components/sidebar.html

@@ -0,0 +1,60 @@
+<aside class="sidebar" id="sidebar">
+    <div class="sidebar-header" style="display: flex; align-items: center; justify-content: space-between; margin-bottom: 2.5rem;">
+        <h1 class="logo">🧠 <span class="text" data-i18n="app_name">Brain Dogfood</span></h1>
+        <button id="sidebarToggle" class="sidebar-toggle" data-i18n-title="nav_toggle">☰</button>
+    </div>
+    <div class="sidebar-content">
+        <ul class="nav" id="systemNav">
+            <li class="active" data-group="all" data-i18n-title="nav_all"><span class="icon">💡</span> <span class="text" data-i18n="nav_all">All Knowledge</span></li>
+            <li data-group="files" data-i18n-title="nav_files"><span class="icon">📂</span> <span class="text" data-i18n="nav_files">Files</span></li>
+            <li data-group="done" data-i18n-title="nav_done"><span class="icon">✅</span> <span class="text" data-i18n="nav_done">Done</span></li>
+        </ul>
+
+        <div class="sidebar-section" id="categorySidebarSection">
+            <div class="section-header" style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px;">
+                <span class="section-title" data-i18n="nav_categories">Categories</span>
+                <button id="manageCategoryBtn" class="action-btn" style="padding: 2px 8px; font-size: 0.75rem;" data-i18n-title="tooltip_add_category">⚙️</button>
+            </div>
+            <ul class="nav" id="categoryNav">
+                <!-- JS will render pinned categories here -->
+            </ul>
+        </div>
+        
+        <div class="sidebar-section">
+            <button id="openExplorerBtn" class="action-btn explorer-btn" style="width: 100%; justify-content: flex-start; margin-top: 15px; padding: 12px 15px; background: rgba(56, 189, 248, 0.1); border: 1px solid rgba(56, 189, 248, 0.2); color: var(--accent); font-weight: 600; border-radius: 12px;">
+                <span class="icon">🔍</span> <span class="text" data-i18n="nav_explorer">Knowledge Explorer</span>
+            </button>
+        </div>
+        
+        <div class="sidebar-section">
+            <div id="calendarHeader" class="section-title" style="cursor: pointer; display: flex; align-items: center; justify-content: space-between; padding: 10px 15px; border-radius: 8px; margin-top: 10px; transition: background 0.2s;">
+                <span style="font-size: 0.9rem; font-weight: 600; color: var(--muted);"><span class="icon">📅</span> <span class="text" data-i18n="nav_calendar">Calendar</span></span>
+                <span id="calendarToggleIcon" style="font-size: 0.8rem; color: var(--muted);">▲</span>
+            </div>
+            <div id="calendarContainer" class="calendar-content">
+                <!-- JS will render calendar here -->
+            </div>
+        </div>
+
+        <div class="sidebar-section">
+            <div id="heatmapContainer">
+                <!-- JS will render heatmap here -->
+            </div>
+        </div>
+        
+        <div class="sidebar-section">
+            <button id="openGraphBtn" class="action-btn" style="width: 100%; justify-content: flex-start; margin-top: 10px; padding: 10px 15px; background: rgba(139, 92, 246, 0.1); border: 1px solid rgba(139, 92, 246, 0.2); color: var(--ai-accent);">
+                <span class="icon">🕸️</span> <span class="text" data-i18n="nav_nebula">Knowledge Nebula</span>
+            </button>
+        </div>
+    </div>
+
+    <div class="sidebar-footer">
+        <button id="logoutBtn" class="action-btn" style="color: #ff4d4d;" data-i18n-tooltip="tooltip_logout">
+            <span class="icon">🚪</span> <span class="text" data-i18n="nav_logout">Logout</span>
+        </button>
+        <button id="settingsBtn" class="action-btn" data-i18n-tooltip="tooltip_settings">
+            <span class="icon">⚙️</span>
+        </button>
+    </div>
+</aside>