personal memory agent
0
fork

Configure Feed

Select the types of activity you want to include in your feed.

feat: move entities input to app bar

- Create app_bar.html with pill-shaped input following todos pattern
- Remove Entity Assistant gradient box from workspace (~70 lines)
- Remove Add Entity button from Facet Entities header
- Input auto-disables when no facet selected with helpful placeholder
- Pencil edit icons now only visible on hover for cleaner UI
- Uses facet CSS variables for theming consistency

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

+94 -106
+80
apps/entities/app_bar.html
··· 1 + <style> 2 + .entity-add-input { 3 + flex: 1; 4 + min-width: 0; 5 + padding: 0.75em 1em; 6 + border: 1px solid #d1d5db; 7 + border-radius: 20px; 8 + font-family: inherit; 9 + font-size: 14px; 10 + line-height: 1.5; 11 + transition: border-color 0.15s, box-shadow 0.15s; 12 + } 13 + 14 + .entity-add-input:focus { 15 + outline: none; 16 + border-color: var(--facet-color, #667eea); 17 + box-shadow: 0 0 0 3px var(--facet-bg, rgba(102, 126, 234, 0.1)); 18 + } 19 + 20 + .entity-add-input::placeholder { 21 + color: #9ca3af; 22 + } 23 + 24 + .entity-add-input:disabled { 25 + background: #f3f4f6; 26 + color: #9ca3af; 27 + cursor: not-allowed; 28 + opacity: 0.7; 29 + } 30 + 31 + .entity-add-input:disabled::placeholder { 32 + color: #d1d5db; 33 + } 34 + </style> 35 + 36 + <form id="entity-add-form" style="display: contents;"> 37 + <input 38 + type="text" 39 + id="entity-assist-input" 40 + class="entity-add-input" 41 + placeholder="Add entity with AI (e.g., 'OpenAI', 'Claude')..." 42 + autocomplete="off" 43 + > 44 + </form> 45 + 46 + <script> 47 + (function() { 48 + const input = document.getElementById('entity-assist-input'); 49 + if (!input) return; 50 + 51 + // Check if facet is selected and update input state 52 + function updateInputState() { 53 + const facet = window.selectedFacet; 54 + if (!facet) { 55 + input.disabled = true; 56 + input.placeholder = 'Select a facet to add entities'; 57 + } else { 58 + input.disabled = false; 59 + input.placeholder = "Add entity with AI (e.g., 'OpenAI', 'Claude')..."; 60 + } 61 + } 62 + 63 + // Initial state - wait for DOM to ensure window.selectedFacet is set 64 + if (document.readyState === 'loading') { 65 + document.addEventListener('DOMContentLoaded', updateInputState); 66 + } else { 67 + updateInputState(); 68 + } 69 + 70 + // Listen for facet changes 71 + window.addEventListener('facet.switch', updateInputState); 72 + 73 + // Focus input if nothing else is focused 74 + setTimeout(() => { 75 + if (document.activeElement === document.body && !input.disabled) { 76 + input.focus(); 77 + } 78 + }, 100); 79 + })(); 80 + </script>
+14 -106
apps/entities/workspace.html
··· 130 130 background: #c82333; 131 131 } 132 132 133 - .add-entity-btn { 134 - display: inline-flex; 135 - align-items: center; 136 - gap: 6px; 137 - } 138 - 139 133 /* Description modal styling */ 140 134 .description-modal { 141 135 display: none; ··· 290 284 margin-left: 8px; 291 285 } 292 286 293 - .entity-edit-btn:hover { 294 - opacity: 1 !important; 295 - } 296 - 297 - .has-entity-desc .entity-edit-btn { 298 - opacity: 0.4; 287 + .entity-desc:hover .entity-edit-btn { 288 + opacity: 0.6; 299 289 } 300 290 301 - .has-entity-desc:hover .entity-edit-btn { 302 - opacity: 1; 291 + .entity-edit-btn:hover { 292 + opacity: 1 !important; 303 293 } 304 294 305 295 .no-entity-desc { ··· 311 301 .no-entity-desc:hover { 312 302 color: #667eea; 313 303 text-decoration: underline; 314 - } 315 - 316 - .no-entity-desc-cell .entity-edit-btn { 317 - opacity: 0.3; 318 - } 319 - 320 - .no-entity-desc-cell:hover .entity-edit-btn { 321 - opacity: 1; 322 304 } 323 305 324 306 /* Delete modal styling */ ··· 517 499 margin-bottom: 0.5em; 518 500 } 519 501 520 - /* Entity assistant styling */ 521 - .entity-assistant { 522 - background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); 523 - color: white; 524 - padding: 1.5em; 525 - border-radius: 12px; 526 - margin-bottom: 2em; 527 - } 528 - 529 - .entity-assistant h4 { 530 - margin: 0 0 0.5em 0; 531 - display: flex; 532 - align-items: center; 533 - gap: 8px; 534 - } 535 - 536 - .entity-assistant-input { 537 - display: flex; 538 - gap: 8px; 539 - margin-top: 1em; 540 - } 541 - 542 - .entity-assistant-input input { 543 - flex: 1; 544 - padding: 10px 14px; 545 - border: none; 546 - border-radius: 6px; 547 - font-size: 14px; 548 - } 549 - 550 - .entity-assistant-input button { 551 - padding: 10px 20px; 552 - background: white; 553 - color: #667eea; 554 - border: none; 555 - border-radius: 6px; 556 - font-weight: 600; 557 - cursor: pointer; 558 - transition: all 0.2s; 559 - } 560 - 561 - .entity-assistant-input button:hover { 562 - transform: translateY(-1px); 563 - box-shadow: 0 4px 12px rgba(0,0,0,0.2); 564 - } 565 - 566 - .entity-assistant-input button:disabled { 567 - opacity: 0.6; 568 - cursor: not-allowed; 569 - } 570 - 571 502 .entities-loading { 572 503 text-align: center; 573 504 padding: 4em; ··· 602 533 </div> 603 534 604 535 <div id="entities-content" style="display: none;"> 605 - <!-- Entity Assistant --> 606 - <div class="entity-assistant"> 607 - <h4> 608 - <span>🤖</span> 609 - <span>Entity Assistant</span> 610 - </h4> 611 - <p style="margin: 0; opacity: 0.9;">Quickly add an entity with AI-generated type and description.</p> 612 - <div class="entity-assistant-input"> 613 - <input type="text" id="entity-assist-input" placeholder="Enter entity name (e.g., 'OpenAI', 'Claude', 'GPT-4')..." /> 614 - <button id="entity-assist-submit" onclick="submitEntityAssist()">Add</button> 615 - </div> 616 - </div> 617 - 618 536 <!-- Facet Entities Section --> 619 537 <div class="entities-section"> 620 538 <div class="entities-container" id="facet-entities-section"> 621 539 <h3> 622 540 <span>Facet Entities</span> 623 - <button class="btn btn-primary add-entity-btn" onclick="openEntityAssistInput()"> 624 - <span>+</span> 625 - <span>Add Entity</span> 626 - </button> 627 541 </h3> 628 542 <table class="entities-table"> 629 543 <thead> ··· 792 706 }); 793 707 } 794 708 795 - // Entity assistant input Enter key 709 + // Entity assistant input Enter key (input is now in app bar) 796 710 const assistInput = document.getElementById('entity-assist-input'); 797 711 if (assistInput) { 798 712 assistInput.addEventListener('keypress', function(e) { 799 713 if (e.key === 'Enter') { 714 + e.preventDefault(); 800 715 submitEntityAssist(); 801 716 } 802 717 }); ··· 1213 1128 }); 1214 1129 } 1215 1130 1216 - function openEntityAssistInput() { 1217 - const input = document.getElementById('entity-assist-input'); 1218 - if (input) { 1219 - input.focus(); 1220 - } 1221 - } 1222 - 1223 1131 function submitEntityAssist() { 1224 1132 const input = document.getElementById('entity-assist-input'); 1225 - const button = document.getElementById('entity-assist-submit'); 1226 1133 const name = input.value.trim(); 1227 1134 1228 1135 if (!name) { 1229 - alert('Please enter an entity name'); 1230 1136 return; 1231 1137 } 1232 1138 1233 - button.disabled = true; 1234 - button.textContent = 'Processing...'; 1139 + // Disable input during processing 1140 + input.disabled = true; 1141 + const originalPlaceholder = input.placeholder; 1142 + input.placeholder = 'Processing...'; 1235 1143 1236 1144 fetch(`api/${encodeURIComponent(currentFacet)}/assist`, { 1237 1145 method: 'POST', ··· 1249 1157 // Reload entities to show the newly added entity 1250 1158 loadEntities(); 1251 1159 } 1252 - button.disabled = false; 1253 - button.textContent = 'Add'; 1160 + input.disabled = false; 1161 + input.placeholder = originalPlaceholder; 1254 1162 }); 1255 1163 } else { 1256 1164 throw new Error(data.error || 'Failed to start assistant'); ··· 1259 1167 .catch(error => { 1260 1168 console.error('Error with entity assistant:', error); 1261 1169 alert('Error: ' + error.message); 1262 - button.disabled = false; 1263 - button.textContent = 'Add'; 1170 + input.disabled = false; 1171 + input.placeholder = originalPlaceholder; 1264 1172 }); 1265 1173 } 1266 1174