48cf359eaa
* feat: show note type in relations autocomplete dropdown Replace HTML datalist in InlineAddNote and AddRelationshipForm with custom NoteAutocomplete component that displays note types as colored badges, matching the wiki-link autocomplete UX. Supports keyboard navigation, scrollable results, and graceful truncation. Also extract ref-group helpers to improve InspectorPanels code health (8.99 → 9.38). Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * design: add relations autocomplete dropdown wireframe Shows the autocomplete dropdown with note type badges (Project, Topic, Procedure, Person) matching the wiki-link autocomplete UX. Includes edge case of note with no type badge. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> --------- Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>
1 line
3.5 KiB
Plaintext
1 line
3.5 KiB
Plaintext
{"children":[{"children":[{"content":"RELATIONS","fill":"#999999","fontFamily":"Inter","fontSize":9,"fontWeight":"600","id":"aOkAp","letterSpacing":1.2,"name":"header","type":"text"},{"content":"Belongs to","fill":"#999999","fontFamily":"Inter","fontSize":9,"fontWeight":"600","id":"palDD","letterSpacing":1.2,"name":"label","type":"text"},{"alignItems":"center","children":[{"content":"Personal CRM","fill":"#B45309","fontFamily":"Inter","fontSize":12,"fontWeight":"500","id":"dzajO","name":"chip1label","type":"text"}],"cornerRadius":6,"fill":"#FEF3C7","gap":8,"id":"ZLIJt","name":"chip1","padding":[6,10],"type":"frame","width":"fill_container"},{"alignItems":"center","children":[{"alignItems":"center","children":[{"content":"Pro","fill":"#1A1A1A","fontFamily":"Inter","fontSize":12,"fontWeight":"normal","id":"ZO1lM","name":"inputText","type":"text"}],"cornerRadius":4,"height":28,"id":"fcJ6c","name":"inputBg","padding":[4,8],"stroke":{"fill":"#E5E7EB","thickness":1},"type":"frame","width":"fill_container"}],"gap":4,"id":"RVAL8","name":"addRow","type":"frame","width":"fill_container"},{"children":[{"alignItems":"center","children":[{"content":"Product Roadmap Q2","fill":"#1A1A1A","fontFamily":"Inter","fontSize":13,"fontWeight":"normal","id":"BozT4","name":"item1title","type":"text"},{"content":"Project","fill":"#DC2626","fontFamily":"Inter","fontSize":11,"fontWeight":"500","id":"TbNe8","name":"item1type","type":"text"}],"cornerRadius":4,"fill":"rgba(21,93,255,0.08)","gap":12,"id":"FXHSH","name":"item1","padding":[6,10],"type":"frame","width":"fill_container"},{"alignItems":"center","children":[{"content":"Protocol Design Patterns","fill":"#1A1A1A","fontFamily":"Inter","fontSize":13,"fontWeight":"normal","id":"U6Jnd","name":"item2title","type":"text"},{"content":"Topic","fill":"#16A34A","fontFamily":"Inter","fontSize":11,"fontWeight":"500","id":"OQBkd","name":"item2type","type":"text"}],"cornerRadius":4,"gap":12,"id":"vUiUx","name":"item2","padding":[6,10],"type":"frame","width":"fill_container"},{"alignItems":"center","children":[{"content":"Provisioning Automation","fill":"#1A1A1A","fontFamily":"Inter","fontSize":13,"fontWeight":"normal","id":"rlySR","name":"item3title","type":"text"},{"content":"Procedure","fill":"#9333EA","fontFamily":"Inter","fontSize":11,"fontWeight":"500","id":"OWj1v","name":"item3type","type":"text"}],"cornerRadius":4,"gap":12,"id":"wEPgh","name":"item3","padding":[6,10],"type":"frame","width":"fill_container"},{"alignItems":"center","children":[{"content":"Profile Settings","fill":"#1A1A1A","fontFamily":"Inter","fontSize":13,"fontWeight":"normal","id":"zUrLN","name":"item4title","type":"text"}],"cornerRadius":4,"gap":12,"id":"y60L6","name":"item4","padding":[6,10],"type":"frame","width":"fill_container"},{"alignItems":"center","children":[{"content":"Prof. Chen","fill":"#1A1A1A","fontFamily":"Inter","fontSize":13,"fontWeight":"normal","id":"QhYup","name":"item5title","type":"text"},{"content":"Person","fill":"#CA8A04","fontFamily":"Inter","fontSize":11,"fontWeight":"500","id":"hCb2Z","name":"item5type","type":"text"}],"cornerRadius":4,"gap":12,"id":"L5imN","name":"item5","padding":[6,10],"type":"frame","width":"fill_container"}],"cornerRadius":6,"fill":"#FFFFFF","id":"P6JT8","layout":"vertical","name":"Autocomplete Dropdown","padding":4,"stroke":{"fill":"rgba(0,0,0,0.1)","thickness":1},"type":"frame","width":"fill_container"}],"fill":"#FFFFFF","gap":12,"height":420,"id":"KhBuP","layout":"vertical","name":"Relations Autocomplete — Dropdown with Types","padding":16,"type":"frame","width":320,"x":0,"y":0}],"variables":{}} |