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

templates/modals/category.html

@@ -0,0 +1,19 @@
+<!-- Category Management Modal -->
+<div id="categoryModal" class="modal">
+    <div class="modal-content glass-panel" style="max-width: 420px; padding: 18px 22px; background: var(--bg); border: 1px solid rgba(255,255,255,0.1);">
+        <div class="modal-header" style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; border-bottom: 1px solid rgba(255,255,255,0.05); padding-bottom: 12px;">
+            <h2 style="margin: 0; font-size: 1.15rem; color: white;" data-i18n="nav_category_manage">Manage Categories</h2>
+            <button id="closeCategoryBtn" style="background: none; border: none; color: var(--muted); font-size: 1.35rem; cursor: pointer; line-height: 1;">&times;</button>
+        </div>
+        <div class="modal-body">
+            <div style="display: flex; gap: 8px; margin-bottom: 15px;">
+                <input type="text" id="newCategoryInput" data-i18n-placeholder="prompt_category_name" 
+                       style="flex: 1; padding: 10px; border-radius: 8px; background: rgba(0,0,0,0.2); border: 1px solid rgba(255,255,255,0.1); color: white; outline: none; font-size: 0.9rem;">
+                <button id="addCategoryBtn" class="primary-btn" style="padding: 0 15px; height: 38px;">+</button>
+            </div>
+            <div id="categoryListContainer" style="max-height: 320px; overflow-y: auto; padding-right: 5px;">
+                <!-- JS will render category list here -->
+            </div>
+        </div>
+    </div>
+</div>

templates/modals/explorer.html

@@ -0,0 +1,10 @@
+<!-- Knowledge Explorer Drawer -->
+<div id="knowledgeDrawer" class="drawer">
+    <div class="drawer-header">
+        <h3 data-i18n="nav_explorer">🔍 Knowledge Explorer</h3>
+        <button id="closeDrawerBtn" class="close-btn">×</button>
+    </div>
+    <div id="drawerContent" class="drawer-body">
+        <!-- Groups/Tags will be injected here -->
+    </div>
+</div>

templates/modals/graph.html

@@ -0,0 +1,7 @@
+<!-- Graph Modal -->
+<div id="graphModal" class="modal">
+    <div class="modal-content glass-panel" style="width: 90%; height: 90%; max-width: none; overflow: hidden; position: relative; padding: 0; background: radial-gradient(circle at center, #1e293b 0%, #0f172a 100%);">
+        <div id="graphContainer" style="width: 100%; height: 100%; background-image: radial-gradient(circle, rgba(255,255,255,0.05) 1px, transparent 1px); background-size: 50px 50px;"></div>
+        <button id="closeGraphBtn" style="position: absolute; top: 20px; right: 20px; z-index: 100; background: rgba(0,0,0,0.5); border: none; color: white; border-radius: 50%; width: 40px; height: 40px; cursor: pointer; font-size: 20px;">×</button>
+    </div>
+</div>

templates/modals/memo_detail.html

@@ -0,0 +1,4 @@
+<!-- Modal for viewing memo details/links -->
+<div id="memoModal" class="modal">
+    <div class="modal-content glass-panel" id="modalContent"></div>
+</div>

templates/modals/overlays.html

@@ -0,0 +1,8 @@
+<!-- AI Loading Overlay (Optional but nice) -->
+<div id="loadingOverlay" style="display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.5); backdrop-filter:blur(5px); z-index:2000; flex-direction:column; justify-content:center; align-items:center;">
+    <div class="spinner"></div>
+    <p style="margin-top:20px; font-weight:800; color:var(--accent);" data-i18n="msg_ai_loading">AI is analyzing the memo...</p>
+</div>
+
+<!-- Sidebar Overlay for mobile -->
+<div id="sidebarOverlay" style="display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.4); z-index:900; backdrop-filter:blur(2px);"></div>

templates/modals/settings.html

@@ -0,0 +1,43 @@
+<!-- Settings Modal -->
+<div id="settingsModal" class="modal">
+    <div class="modal-content glass-panel" style="max-width: 400px; padding: 25px;">
+        <h2 style="margin-bottom: 20px; font-weight: 800; background: linear-gradient(135deg, #38bdf8, #8b5cf6); -webkit-background-clip: text; -webkit-text-fill-color: transparent;" data-i18n="settings_title">⚙️ Settings</h2>
+        
+        <div class="settings-grid">
+            <label data-i18n="settings_bg">전체 배경색</label>
+            <input type="color" id="set-bg" data-var="--bg">
+            
+            <label data-i18n="settings_sidebar">사이드바 색상</label>
+            <input type="color" id="set-sidebar" data-var="--sidebar">
+            
+            <label data-i18n="settings_card">메모지 색상</label>
+            <input type="color" id="set-card" data-var="--card">
+            
+            <label data-i18n="settings_security">보안 테두리색</label>
+            <input type="color" id="set-encrypted" data-var="--encrypted-border">
+            
+            <label data-i18n="settings_ai_accent">AI 분석 강조색</label>
+            <input type="color" id="set-ai" data-var="--ai-accent">
+
+            <label style="font-weight: 800; color: var(--ai-accent);" data-i18n="settings_ai_enable">AI 기능 활성화</label>
+            <input type="checkbox" id="set-enable-ai" style="width: 20px; height: 20px; cursor: pointer;">
+
+            <label style="font-weight: 800; color: #38bdf8;" data-i18n="settings_category_enable">카테고리 기능 활성화 (고급)</label>
+            <input type="checkbox" id="set-enable-categories" style="width: 20px; height: 20px; cursor: pointer;">
+        </div>
+
+        <div class="settings-grid">
+            <label data-i18n="settings_lang">언어 설정</label>
+            <select id="set-lang" class="meta-field" style="width: 100px;">
+                <option value="ko">한국어</option>
+                <option value="en">English</option>
+            </select>
+        </div>
+
+        <div class="settings-actions">
+            <button id="resetThemeBtn" class="action-btn" style="font-size: 0.85rem;" data-i18n="settings_reset">Reset</button>
+            <button id="saveThemeBtn" class="primary-btn" data-i18n="settings_save">Save</button>
+            <button id="closeSettingsBtn" class="action-btn" data-i18n="settings_close">Close</button>
+        </div>
+    </div>
+</div>