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

2026-04-25 03:48:38 +09:00 · 2026-04-16 15:42:02 +09:00
parent df8ae62b0e
commit aef0179c56
47 changed files with 1699 additions and 544 deletions
@@ -0,0 +1,51 @@
+<div class="composer-wrapper">
+    <!-- Accordion default closed state -->
+    <div id="composerTrigger" class="glass-panel" style="cursor: text;">
+        <span style="color: var(--muted); font-size: 1.1rem; font-weight: 600;" data-i18n="composer_placeholder_trigger">Capture knowledge or drop files...</span>
+    </div>
+
+    <!-- Actual Composer -->
+    <form id="composer" class="glass-panel" style="display: none;">
+        <input type="hidden" id="editingMemoId" value="">
+        
+        <div style="display: flex; gap:10px; align-items:center; margin-bottom: 10px;">
+            <input type="text" id="memoTitle" data-i18n-placeholder="composer_title" autocomplete="off" style="flex: 1;">
+            <button type="button" id="foldBtn" class="action-btn" style="height:35px; width:35px; padding:0;" data-i18n-title="tooltip_fold">▲</button>
+        </div>
+
+        <div class="meta-inputs" style="display: flex; gap: 10px; margin-bottom: 10px; align-items: center;">
+            <input type="text" id="memoGroup" data-i18n-placeholder="composer_group" class="meta-field" style="width: 120px;">
+            <input type="text" id="memoTags" data-i18n-placeholder="composer_tags" class="meta-field" style="flex: 1;">
+            <button type="button" id="encryptionToggle" class="action-btn" data-i18n-title="composer_encrypt" style="height:34px; padding:0 10px;">🔓</button>
+            <input type="password" id="memoPassword" data-i18n-placeholder="composer_password" class="meta-field" style="width: 120px; display: none;">
+        </div>
+        
+        <div class="editor-resize-wrapper">
+            <div id="editor"></div>
+        </div>
+        <!-- Pending Attachments list in Composer -->
+        <div id="editorAttachments" class="memo-attachments" style="margin-top: 15px;"></div>
+
+        <!-- Category Slots (Quick Assign) -->
+        <div id="composerCategoryBar">
+            <!-- JS will render category chips here -->
+        </div>
+
+        <!-- 키보드 단축키 힌트 (토글) -->
+        <div id="shortcutHint" class="shortcut-hint-bar">
+            <button type="button" id="shortcutToggle" class="shortcut-toggle-btn" data-i18n="shortcuts_label">⌨️ Shortcuts</button>
+            <div id="shortcutDetails" class="shortcut-details" style="display: none;">
+                <span class="sk"><kbd>Ctrl</kbd>+<kbd>Enter</kbd> <span data-i18n="shortcut_save">Save</span></span>
+                <span class="sk"><kbd>Ctrl</kbd>+<kbd>Shift</kbd>+<kbd>N</kbd> / <kbd>Alt</kbd>+<kbd>`</kbd> <span data-i18n="shortcut_new">New Memo</span></span>
+                <span class="sk"><kbd>Ctrl</kbd>+<kbd>Shift</kbd>+<kbd>G</kbd> <span data-i18n="shortcut_nebula">Nebula</span></span>
+                <span class="sk"><kbd>/</kbd> <span data-i18n="shortcut_slash">Slash Commands</span></span>
+                <span class="sk"><kbd>Alt</kbd>+<kbd>Click</kbd> <span data-i18n="shortcut_edit">Quick Edit</span></span>
+            </div>
+        </div>
+
+        <div class="composer-actions" style="display: flex; gap: 10px; margin-top: 15px; justify-content: flex-end;">
+            <button type="button" id="discardBtn" class="action-btn" style="background: rgba(255, 77, 77, 0.1); color: #ff4d4d; border-color: rgba(255, 77, 77, 0.2);" data-i18n="composer_discard">Discard (Delete)</button>
+            <button type="submit" id="submitBtn" class="primary-btn" data-i18n="composer_save">Save Memo</button>
+        </div>
+    </form>
+</div>
@@ -0,0 +1,5 @@
+<div class="masonry-grid" id="memoGrid">
+    <!-- Memos loaded here -->
+</div>
+<div id="scrollSentinel" style="height: 50px; display: flex; align-items: center; justify-content: center; color: var(--muted); font-size: 0.9rem;">
+</div>
@@ -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>
@@ -0,0 +1,7 @@
+<div class="topbar">
+    <button id="mobileMenuBtn" class="sidebar-toggle" style="display: none; margin-right: 15px;">☰</button>
+    <div class="search-bar">
+        <span class="search-icon">🔍</span>
+        <input type="text" id="searchInput" data-i18n-placeholder="search_placeholder">
+    </div>
+</div>