2ff5467475
When the sidebar is hidden (editor-list view mode), the NoteList becomes the leftmost panel and its header title overlaps with macOS traffic lights. Add 80px left padding to the NoteList header when sidebarCollapsed is true, matching the sidebar title bar's existing traffic light clearance. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
1 line
5.4 KiB
Plaintext
1 line
5.4 KiB
Plaintext
{"children":[{"type":"frame","id":"AeVO5","name":"Sidebar Collapsed — NoteList Title Position","x":0,"y":0,"width":600,"fill":"$--background","layout":"vertical","gap":12,"padding":16,"children":[{"type":"text","id":"ryDyy","name":"label","content":"Sidebar Collapsed — NoteList with traffic light clearance","fill":"$--muted-foreground","fontFamily":"Inter","fontSize":11,"fontWeight":"600","letterSpacing":1},{"type":"frame","id":"xZMtO","name":"App Window (sidebar collapsed)","clip":true,"width":"fill_container","cornerRadius":8,"stroke":{"align":"inside","thickness":1,"fill":"$--border"},"layout":"vertical","children":[{"type":"frame","id":"ymeIo","name":"Content Row","width":"fill_container","height":320,"layout":"none","children":[{"type":"frame","id":"VOhi9","name":"Panel: NoteList","x":0,"y":0,"width":300,"height":320,"fill":"$--card","stroke":{"align":"inside","fill":"$--border","thickness":{"right":1}},"layout":"vertical","children":[{"type":"frame","id":"Q884J","name":"NoteList Header (padded for traffic lights)","width":"fill_container","height":52,"alignItems":"center","justifyContent":"space_between","padding":[0,16,0,80],"stroke":{"align":"inside","fill":"$--border","thickness":{"bottom":1}},"children":[{"type":"text","id":"Ra8AY","content":"All Notes","fill":"$--foreground","fontFamily":"Inter","fontSize":14,"fontWeight":"600"},{"type":"frame","id":"0TYpG","name":"actions","alignItems":"center","gap":12,"children":[{"type":"icon_font","id":"v4VUg","iconFontFamily":"phosphor","iconFontName":"magnifying-glass","width":16,"height":16,"fill":"$--muted-foreground"},{"type":"icon_font","id":"y4CYF","iconFontFamily":"phosphor","iconFontName":"plus","width":16,"height":16,"fill":"$--muted-foreground"}]}]},{"type":"frame","id":"OCJxT","name":"Note Item 1","layout":"vertical","width":"fill_container","gap":4,"padding":[14,16],"stroke":{"align":"inside","fill":"$--border","thickness":{"bottom":1}},"children":[{"type":"text","id":"OThF7","content":"Build Laputa App","fill":"$--foreground","fontFamily":"Inter","fontSize":13,"fontWeight":"600"},{"type":"text","id":"rwqIZ","content":"Personal knowledge management app built with Tauri.","fill":"$--muted-foreground","fontFamily":"Inter","fontSize":12,"lineHeight":1.5,"textGrowth":"fixed-width","width":"fill_container"},{"type":"text","id":"0phHO","content":"2m ago","fill":"$--muted-foreground","fontFamily":"Inter","fontSize":11}]},{"type":"frame","id":"YmjMb","name":"Note Item 2","layout":"vertical","width":"fill_container","gap":4,"padding":[14,16],"stroke":{"align":"inside","fill":"$--border","thickness":{"bottom":1}},"children":[{"type":"text","id":"gh2fT","content":"Facebook Ads Strategy","fill":"$--foreground","fontFamily":"Inter","fontSize":13,"fontWeight":"600"},{"type":"text","id":"Yn5dO","content":"Lookalike audiences convert 3x better than cold.","fill":"$--muted-foreground","fontFamily":"Inter","fontSize":12,"lineHeight":1.5,"textGrowth":"fixed-width","width":"fill_container"},{"type":"text","id":"5AKHZ","content":"1h ago","fill":"$--muted-foreground","fontFamily":"Inter","fontSize":11}]}]},{"type":"frame","id":"V4qF5","name":"Panel: Editor","x":300,"y":0,"width":300,"height":320,"fill":"$--background","layout":"vertical","children":[{"type":"frame","id":"ztw3q","name":"Tab Bar","width":"fill_container","height":45,"fill":"$--sidebar","alignItems":"center","stroke":{"align":"inside","fill":"$--border","thickness":{"bottom":1}},"children":[{"type":"text","id":"NGfeH","content":" Build Laputa App","fill":"$--foreground","fontFamily":"Inter","fontSize":13,"fontWeight":"500"}]},{"type":"frame","id":"DXXof","name":"Editor Body","width":"fill_container","height":"fill_container","fill":"$--background","padding":[24,32],"children":[{"type":"text","id":"Hgsg7","content":"Build Laputa App","fill":"$--foreground","fontFamily":"Inter","fontSize":28,"fontWeight":"700"}]}]},{"type":"frame","id":"aSWvV","name":"Traffic Lights","x":0,"y":0,"gap":8,"padding":[18,0,0,14],"children":[{"type":"ellipse","id":"wwhm9","width":12,"height":12,"fill":"$--traffic-red"},{"type":"ellipse","id":"vYx2N","width":12,"height":12,"fill":"$--traffic-yellow"},{"type":"ellipse","id":"eRAiC","width":12,"height":12,"fill":"$--traffic-green"}]}]}]},{"type":"frame","id":"u5rgz","name":"Annotation","layout":"horizontal","gap":8,"alignItems":"center","padding":[8,12],"fill":"#E8F4FE","cornerRadius":6,"children":[{"type":"text","id":"hDyxd","content":"→","fill":"$--primary","fontFamily":"Inter","fontSize":14,"fontWeight":"700"},{"type":"text","id":"EtBGq","content":"paddingLeft: 80px clears traffic lights when sidebar is hidden (matches sidebar title bar padding)","fill":"$--foreground","fontFamily":"Inter","fontSize":12,"lineHeight":1.4,"textGrowth":"fixed-width","width":520}]}]}],"variables":{"--background":{"type":"color","value":"#FFFFFF"},"--foreground":{"type":"color","value":"#37352F"},"--card":{"type":"color","value":"#FFFFFF"},"--border":{"type":"color","value":"#E9E9E7"},"--muted":{"type":"color","value":"#F0F0EF"},"--muted-foreground":{"type":"color","value":"#787774"},"--sidebar":{"type":"color","value":"#F7F6F3"},"--sidebar-border":{"type":"color","value":"#E9E9E7"},"--primary":{"type":"color","value":"#155DFF"},"--destructive":{"type":"color","value":"#E03E3E"},"--accent-red-light":{"type":"color","value":"#E03E3E18"},"--traffic-red":{"type":"color","value":"#FF5F57"},"--traffic-yellow":{"type":"color","value":"#FEBC2E"},"--traffic-green":{"type":"color","value":"#28C840"}}} |