From ee503c338f3efbe4e8fcca72bd6343c06dab24d0 Mon Sep 17 00:00:00 2001
From: mirivlad <mirvtop@yandex.ru>
Date: Sun, 31 May 2026 19:54:07 +0800
Subject: [PATCH] =?UTF-8?q?gui:=20fix=20layout=20=E2=80=94=20full=20viewpo?=
 =?UTF-8?q?rt,=20dark=20theme,=20sidebar+main?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Problem: UI appeared as narrow dark panel on white background with scrollbar.

Root causes:
- html/body had no reset — default browser margin/padding = white borders
- index.html referenced non-existent /style.css
- .app used height:100vh but no width:100vw or overflow:hidden
- sidebar used fixed width instead of flexbox

Fixed:
- index.html: added critical CSS reset (html/body/#app = 100%, margin:0, overflow:hidden, dark bg)
- index.html: removed /style.css ref, changed lang to ru, title to Верстак
- App.svelte: complete layout rewrite
  - .app = flex, 100vw x 100vh, overflow:hidden
  - sidebar = 260px width, full height, flex column
  - main = flex:1, full height, flex column (header + content)
  - sidebar nav with sections + nodes using <button> elements
  - content area fills remaining space
  - proper dark theme colors throughout
- Rebuilt frontend/dist and cmd/verstak-gui/frontend-dist
---
 .../frontend-dist/assets/index-C37GEF9W.js    |   1 -
 .../frontend-dist/assets/index-D3NJ53hP.css   |   1 -
 cmd/verstak-gui/frontend-dist/index.html      |  36 +-
 frontend/index.html                           |  34 +-
 frontend/src/App.svelte                       | 348 ++++++++++++++----
 5 files changed, 317 insertions(+), 103 deletions(-)
 delete mode 100644 cmd/verstak-gui/frontend-dist/assets/index-C37GEF9W.js
 delete mode 100644 cmd/verstak-gui/frontend-dist/assets/index-D3NJ53hP.css

diff --git a/cmd/verstak-gui/frontend-dist/assets/index-C37GEF9W.js b/cmd/verstak-gui/frontend-dist/assets/index-C37GEF9W.js
deleted file mode 100644
index 8b60b1f..0000000
--- a/cmd/verstak-gui/frontend-dist/assets/index-C37GEF9W.js
+++ /dev/null
@@ -1 +0,0 @@
-var _e=Object.defineProperty;var me=(e,t,n)=>t in e?_e(e,t,{enumerable:!0,configurable:!0,writable:!0,value:n}):e[t]=n;var H=(e,t,n)=>me(e,typeof t!="symbol"?t+"":t,n);(function(){const t=document.createElement("link").relList;if(t&&t.supports&&t.supports("modulepreload"))return;for(const i of document.querySelectorAll('link[rel="modulepreload"]'))l(i);new MutationObserver(i=>{for(const s of i)if(s.type==="childList")for(const c of s.addedNodes)c.tagName==="LINK"&&c.rel==="modulepreload"&&l(c)}).observe(document,{childList:!0,subtree:!0});function n(i){const s={};return i.integrity&&(s.integrity=i.integrity),i.referrerPolicy&&(s.referrerPolicy=i.referrerPolicy),i.crossOrigin==="use-credentials"?s.credentials="include":i.crossOrigin==="anonymous"?s.credentials="omit":s.credentials="same-origin",s}function l(i){if(i.ep)return;i.ep=!0;const s=n(i);fetch(i.href,s)}})();function W(){}function ae(e){return e()}function ee(){return Object.create(null)}function z(e){e.forEach(ae)}function de(e){return typeof e=="function"}function ge(e,t){return e!=e?t==t:e!==t||e&&typeof e=="object"||typeof e=="function"}function ve(e){return Object.keys(e).length===0}function o(e,t){e.appendChild(t)}function S(e,t,n){e.insertBefore(t,n||null)}function A(e){e.parentNode&&e.parentNode.removeChild(e)}function te(e,t){for(let n=0;n<e.length;n+=1)e[n]&&e[n].d(t)}function g(e){return document.createElement(e)}function v(e){return document.createTextNode(e)}function E(){return v(" ")}function pe(e,t,n,l){return e.addEventListener(t,n,l),()=>e.removeEventListener(t,n,l)}function _(e,t,n){n==null?e.removeAttribute(t):e.getAttribute(t)!==n&&e.setAttribute(t,n)}function be(e){return Array.from(e.childNodes)}function I(e,t){t=""+t,e.data!==t&&(e.data=t)}function we(e,t,n,l){e.style.setProperty(t,n,"")}let T;function G(e){T=e}function ye(){if(!T)throw new Error("Function called outside component initialization");return T}function ke(e){ye().$$.on_mount.push(e)}const R=[],ne=[];let V=[];const le=[],$e=Promise.resolve();let Q=!1;function Ee(){Q||(Q=!0,$e.then(he))}function X(e){V.push(e)}const J=new Set;let M=0;function he(){if(M!==0)return;const e=T;do{try{for(;M<R.length;){const t=R[M];M++,G(t),Ce(t.$$)}}catch(t){throw R.length=0,M=0,t}for(G(null),R.length=0,M=0;ne.length;)ne.pop()();for(let t=0;t<V.length;t+=1){const n=V[t];J.has(n)||(J.add(n),n())}V.length=0}while(R.length);for(;le.length;)le.pop()();Q=!1,J.clear(),G(e)}function Ce(e){if(e.fragment!==null){e.update(),z(e.before_update);const t=e.dirty;e.dirty=[-1],e.fragment&&e.fragment.p(e.ctx,t),e.after_update.forEach(X)}}function Ae(e){const t=[],n=[];V.forEach(l=>e.indexOf(l)===-1?t.push(l):n.push(l)),n.forEach(l=>l()),V=t}const Ne=new Set;function Oe(e,t){e&&e.i&&(Ne.delete(e),e.i(t))}function q(e){return(e==null?void 0:e.length)!==void 0?e:Array.from(e)}function Se(e,t,n){const{fragment:l,after_update:i}=e.$$;l&&l.m(t,n),X(()=>{const s=e.$$.on_mount.map(ae).filter(de);e.$$.on_destroy?e.$$.on_destroy.push(...s):z(s),e.$$.on_mount=[]}),i.forEach(X)}function Le(e,t){const n=e.$$;n.fragment!==null&&(Ae(n.after_update),z(n.on_destroy),n.fragment&&n.fragment.d(t),n.on_destroy=n.fragment=null,n.ctx=[])}function Pe(e,t){e.$$.dirty[0]===-1&&(R.push(e),Ee(),e.$$.dirty.fill(0)),e.$$.dirty[t/31|0]|=1<<t%31}function Ie(e,t,n,l,i,s,c=null,h=[-1]){const p=T;G(e);const r=e.$$={fragment:null,ctx:[],props:s,update:W,not_equal:i,bound:ee(),on_mount:[],on_destroy:[],on_disconnect:[],before_update:[],after_update:[],context:new Map(t.context||(p?p.$$.context:[])),callbacks:ee(),dirty:h,skip_bound:!1,root:t.target||p.$$.root};c&&c(r.root);let b=!1;if(r.ctx=n?n(e,t.props||{},(m,u,...d)=>{const w=d.length?d[0]:u;return r.ctx&&i(r.ctx[m],r.ctx[m]=w)&&(!r.skip_bound&&r.bound[m]&&r.bound[m](w),b&&Pe(e,m)),u}):[],r.update(),b=!0,z(r.before_update),r.fragment=l?l(r.ctx):!1,t.target){if(t.hydrate){const m=be(t.target);r.fragment&&r.fragment.l(m),m.forEach(A)}else r.fragment&&r.fragment.c();t.intro&&Oe(e.$$.fragment),Se(e,t.target,t.anchor),he()}G(p)}class je{constructor(){H(this,"$$");H(this,"$$set")}$destroy(){Le(this,1),this.$destroy=W}$on(t,n){if(!de(n))return W;const l=this.$$.callbacks[t]||(this.$$.callbacks[t]=[]);return l.push(n),()=>{const i=l.indexOf(n);i!==-1&&l.splice(i,1)}}$set(t){this.$$set&&!ve(t)&&(this.$$.skip_bound=!0,this.$$set(t),this.$$.skip_bound=!1)}}const Be="4";typeof window<"u"&&(window.__svelte||(window.__svelte={v:new Set})).v.add(Be);function ie(e,t,n){const l=e.slice();return l[10]=t[n],l}function se(e,t,n){const l=e.slice();return l[13]=t[n],l}function oe(e){let t,n,l;return{c(){t=g("div"),n=v("Error: "),l=v(e[3]),_(t,"class","error-banner svelte-10a60fp")},m(i,s){S(i,t,s),o(t,n),o(t,l)},p(i,s){s&8&&I(l,i[3])},d(i){i&&A(t)}}}function re(e){let t,n=e[13].label+"",l,i,s,c;function h(){return e[8](e[13])}return{c(){t=g("div"),l=v(n),_(t,"class",i="sidebar-item "+(e[4]===e[13].id?"selected":"")+" svelte-10a60fp")},m(p,r){S(p,t,r),o(t,l),s||(c=pe(t,"click",h),s=!0)},p(p,r){e=p,r&1&&n!==(n=e[13].label+"")&&I(l,n),r&17&&i!==(i="sidebar-item "+(e[4]===e[13].id?"selected":"")+" svelte-10a60fp")&&_(t,"class",i)},d(p){p&&A(t),s=!1,c()}}}function fe(e){let t,n=e[10].title+"",l,i,s,c;function h(){return e[9](e[10])}return{c(){t=g("div"),l=v(n),_(t,"class",i="sidebar-item "+(e[5]&&e[5].id===e[10].id?"selected":"")+" svelte-10a60fp")},m(p,r){S(p,t,r),o(t,l),s||(c=pe(t,"click",h),s=!0)},p(p,r){e=p,r&2&&n!==(n=e[10].title+"")&&I(l,n),r&34&&i!==(i="sidebar-item "+(e[5]&&e[5].id===e[10].id?"selected":"")+" svelte-10a60fp")&&_(t,"class",i)},d(p){p&&A(t),s=!1,c()}}}function ce(e){let t;return{c(){t=g("div"),t.textContent="Нет дел. Создайте первое дело.",_(t,"class","sidebar-empty svelte-10a60fp")},m(n,l){S(n,t,l)},d(n){n&&A(t)}}}function Me(e){let t;return{c(){t=g("div"),t.textContent="Загрузка...",_(t,"class","loading svelte-10a60fp")},m(n,l){S(n,t,l)},p:W,d(n){n&&A(t)}}}function Re(e){let t,n,l,i,s,c=e[0].length+"",h,p,r=e[1].length+"",b,m,u=e[3]&&ue(e);return{c(){t=g("div"),n=g("p"),n.textContent="Wails v2 Desktop GUI работает.",l=E(),i=g("p"),s=v("Sections: "),h=v(c),p=v(", Root nodes: "),b=v(r),m=E(),u&&u.c(),_(n,"class","svelte-10a60fp"),_(i,"class","svelte-10a60fp"),_(t,"class","welcome svelte-10a60fp")},m(d,w){S(d,t,w),o(t,n),o(t,l),o(t,i),o(i,s),o(i,h),o(i,p),o(i,b),o(t,m),u&&u.m(t,null)},p(d,w){w&1&&c!==(c=d[0].length+"")&&I(h,c),w&2&&r!==(r=d[1].length+"")&&I(b,r),d[3]?u?u.p(d,w):(u=ue(d),u.c(),u.m(t,null)):u&&(u.d(1),u=null)},d(d){d&&A(t),u&&u.d()}}}function Ve(e){let t,n,l=e[5].title+"",i,s,c,h,p=e[5].id+"",r,b,m,u,d=e[5].type+"",w;return{c(){t=g("div"),n=g("h2"),i=v(l),s=E(),c=g("p"),h=v("ID: "),r=v(p),b=E(),m=g("p"),u=v("Type: "),w=v(d),_(n,"class","svelte-10a60fp"),_(c,"class","svelte-10a60fp"),_(m,"class","svelte-10a60fp"),_(t,"class","node-view svelte-10a60fp")},m(N,O){S(N,t,O),o(t,n),o(n,i),o(t,s),o(t,c),o(c,h),o(c,r),o(t,b),o(t,m),o(m,u),o(m,w)},p(N,O){O&32&&l!==(l=N[5].title+"")&&I(i,l),O&32&&p!==(p=N[5].id+"")&&I(r,p),O&32&&d!==(d=N[5].type+"")&&I(w,d)},d(N){N&&A(t)}}}function ue(e){let t,n,l,i,s;return{c(){t=g("p"),n=v("Wails bindings error: "),l=v(e[3]),i=E(),s=g("p"),s.textContent="Window opens but Go bindings not connected yet.",_(t,"class","error-text svelte-10a60fp"),_(s,"class","hint svelte-10a60fp")},m(c,h){S(c,t,h),o(t,n),o(t,l),S(c,i,h),S(c,s,h)},p(c,h){h&8&&I(l,c[3])},d(c){c&&(A(t),A(i),A(s))}}}function We(e){let t,n,l,i,s,c,h,p,r,b,m,u,d,w,N,O,Y,K,Z,D,$=e[3]&&oe(e),j=q(e[0]),y=[];for(let f=0;f<j.length;f+=1)y[f]=re(se(e,j,f));let B=q(e[1]),k=[];for(let f=0;f<B.length;f+=1)k[f]=fe(ie(e,B,f));let C=e[1].length===0&&e[0].length>0&&ce();function x(f,P){return f[5]?Ve:f[0].length>0?Re:Me}let U=x(e),L=U(e);return{c(){t=g("div"),n=g("div"),l=g("span"),l.textContent="⚒",i=E(),s=g("h1"),s.textContent="Верстак",c=E(),h=g("span"),p=v(e[2]),r=E(),$&&$.c(),b=E(),m=g("div"),u=g("div"),d=g("div"),d.textContent="Разделы",w=E();for(let f=0;f<y.length;f+=1)y[f].c();N=E(),O=g("div"),O.textContent="Корневые дела",Y=E();for(let f=0;f<k.length;f+=1)k[f].c();K=E(),C&&C.c(),Z=E(),D=g("div"),L.c(),_(l,"class","logo svelte-10a60fp"),_(s,"class","svelte-10a60fp"),_(h,"class","version svelte-10a60fp"),_(n,"class","topbar svelte-10a60fp"),_(d,"class","sidebar-header svelte-10a60fp"),_(O,"class","sidebar-header svelte-10a60fp"),we(O,"margin-top","16px"),_(u,"class","sidebar svelte-10a60fp"),_(D,"class","content svelte-10a60fp"),_(m,"class","main svelte-10a60fp"),_(t,"class","app svelte-10a60fp")},m(f,P){S(f,t,P),o(t,n),o(n,l),o(n,i),o(n,s),o(n,c),o(n,h),o(h,p),o(t,r),$&&$.m(t,null),o(t,b),o(t,m),o(m,u),o(u,d),o(u,w);for(let a=0;a<y.length;a+=1)y[a]&&y[a].m(u,null);o(u,N),o(u,O),o(u,Y);for(let a=0;a<k.length;a+=1)k[a]&&k[a].m(u,null);o(u,K),C&&C.m(u,null),o(m,Z),o(m,D),L.m(D,null)},p(f,[P]){if(P&4&&I(p,f[2]),f[3]?$?$.p(f,P):($=oe(f),$.c(),$.m(t,b)):$&&($.d(1),$=null),P&81){j=q(f[0]);let a;for(a=0;a<j.length;a+=1){const F=se(f,j,a);y[a]?y[a].p(F,P):(y[a]=re(F),y[a].c(),y[a].m(u,N))}for(;a<y.length;a+=1)y[a].d(1);y.length=j.length}if(P&162){B=q(f[1]);let a;for(a=0;a<B.length;a+=1){const F=ie(f,B,a);k[a]?k[a].p(F,P):(k[a]=fe(F),k[a].c(),k[a].m(u,K))}for(;a<k.length;a+=1)k[a].d(1);k.length=B.length}f[1].length===0&&f[0].length>0?C||(C=ce(),C.c(),C.m(u,null)):C&&(C.d(1),C=null),U===(U=x(f))&&L?L.p(f,P):(L.d(1),L=U(f),L&&(L.c(),L.m(D,null)))},i:W,o:W,d(f){f&&A(t),$&&$.d(),te(y,f),te(k,f),C&&C.d(),L.d()}}}function De(e,t,n){let l=[],i=[],s="",c="",h="",p=null;ke(async()=>{try{n(2,s="verstak-gui"),window.go&&window.go.main&&window.go.main.App&&(n(2,s=await window.go.main.App.VerstakVersion()),n(0,l=await window.go.main.App.ListSections()),n(1,i=await window.go.main.App.ListRootNodes()))}catch(d){n(3,c=String(d))}});function r(d){n(4,h=d)}function b(d){n(5,p=d)}return[l,i,s,c,h,p,r,b,d=>r(d.id),d=>b(d)]}class Fe extends je{constructor(t){super(),Ie(this,t,De,We,ge,{})}}new Fe({target:document.getElementById("app")});
diff --git a/cmd/verstak-gui/frontend-dist/assets/index-D3NJ53hP.css b/cmd/verstak-gui/frontend-dist/assets/index-D3NJ53hP.css
deleted file mode 100644
index 85844e3..0000000
--- a/cmd/verstak-gui/frontend-dist/assets/index-D3NJ53hP.css
+++ /dev/null
@@ -1 +0,0 @@
-.svelte-10a60fp.svelte-10a60fp{box-sizing:border-box;margin:0;padding:0}.app.svelte-10a60fp.svelte-10a60fp{display:flex;flex-direction:column;height:100vh;background:#13131f;color:#e4e4ef;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}.topbar.svelte-10a60fp.svelte-10a60fp{padding:12px 20px;border-bottom:1px solid #2a2a3c;display:flex;align-items:center;gap:12px}.logo.svelte-10a60fp.svelte-10a60fp{font-size:20px}.topbar.svelte-10a60fp h1.svelte-10a60fp{font-size:18px;font-weight:600}.version.svelte-10a60fp.svelte-10a60fp{color:#666;font-size:12px;margin-left:auto}.error-banner.svelte-10a60fp.svelte-10a60fp{background:#422;color:#f88;padding:8px 20px;font-size:13px}.main.svelte-10a60fp.svelte-10a60fp{display:flex;flex:1;overflow:hidden}.sidebar.svelte-10a60fp.svelte-10a60fp{width:240px;border-right:1px solid #2a2a3c;padding:12px;overflow-y:auto;flex-shrink:0}.sidebar-header.svelte-10a60fp.svelte-10a60fp{font-size:11px;text-transform:uppercase;color:#666;margin-bottom:8px;padding:0 12px}.sidebar-item.svelte-10a60fp.svelte-10a60fp{padding:8px 12px;border-radius:6px;cursor:pointer;margin-bottom:2px;color:#ccc}.sidebar-item.svelte-10a60fp.svelte-10a60fp:hover{background:#1e1e2e}.sidebar-item.selected.svelte-10a60fp.svelte-10a60fp{background:#2a2a3c;color:#fff}.sidebar-empty.svelte-10a60fp.svelte-10a60fp{color:#666;font-size:12px;padding:8px 12px}.content.svelte-10a60fp.svelte-10a60fp{flex:1;padding:20px;overflow-y:auto}.welcome.svelte-10a60fp.svelte-10a60fp{color:#8888a4;font-size:14px;line-height:1.6}.error-text.svelte-10a60fp.svelte-10a60fp{color:#f88}.hint.svelte-10a60fp.svelte-10a60fp{color:#666;margin-top:8px}.loading.svelte-10a60fp.svelte-10a60fp{color:#888;font-size:14px}.node-view.svelte-10a60fp h2.svelte-10a60fp{font-size:24px;margin-bottom:16px}.node-view.svelte-10a60fp p.svelte-10a60fp{color:#888;font-size:13px;margin-bottom:8px}
diff --git a/cmd/verstak-gui/frontend-dist/index.html b/cmd/verstak-gui/frontend-dist/index.html
index af89053..fe3a465 100644
--- a/cmd/verstak-gui/frontend-dist/index.html
+++ b/cmd/verstak-gui/frontend-dist/index.html
@@ -1,15 +1,25 @@
 <!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/wails.png" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <link rel="stylesheet" href="/style.css" />
-    <title>Wails + Svelte</title>
-    <script type="module" crossorigin src="/assets/index-C37GEF9W.js"></script>
-    <link rel="stylesheet" crossorigin href="/assets/index-D3NJ53hP.css">
-  </head>
-  <body>
-    <div id="app"></div>
-  </body>
+<html lang="ru">
+<head>
+  <meta charset="UTF-8" />
+  <link rel="icon" type="image/svg+xml" href="/wails.png" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Верстак</title>
+  <style>
+    /* Critical reset — no white borders, full viewport */
+    html, body, #app {
+      width: 100%;
+      height: 100%;
+      margin: 0;
+      padding: 0;
+      overflow: hidden;
+      background: #13131f;
+    }
+  </style>
+  <script type="module" crossorigin src="/assets/index-COs6tJEl.js"></script>
+  <link rel="stylesheet" crossorigin href="/assets/index-ClxkTvdE.css">
+</head>
+<body>
+  <div id="app"></div>
+</body>
 </html>
diff --git a/frontend/index.html b/frontend/index.html
index 20f11c0..8903b4b 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -1,14 +1,24 @@
 <!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/wails.png" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <link rel="stylesheet" href="/style.css" />
-    <title>Wails + Svelte</title>
-  </head>
-  <body>
-    <div id="app"></div>
-    <script type="module" src="/src/main.js"></script>
-  </body>
+<html lang="ru">
+<head>
+  <meta charset="UTF-8" />
+  <link rel="icon" type="image/svg+xml" href="/wails.png" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Верстак</title>
+  <style>
+    /* Critical reset — no white borders, full viewport */
+    html, body, #app {
+      width: 100%;
+      height: 100%;
+      margin: 0;
+      padding: 0;
+      overflow: hidden;
+      background: #13131f;
+    }
+  </style>
+</head>
+<body>
+  <div id="app"></div>
+  <script type="module" src="/src/main.js"></script>
+</body>
 </html>
diff --git a/frontend/src/App.svelte b/frontend/src/App.svelte
index af82fbd..94283ae 100644
--- a/frontend/src/App.svelte
+++ b/frontend/src/App.svelte
@@ -8,19 +8,9 @@
   let selectedSection = ''
   let selectedNode = null
 
-  // Wails v2 bindings — generated by wails
-  // For now, use window.wails or import from wailsjs
-  async function callGo(method, ...args) {
-    if (window.go && window.go.main && window.go.main.App) {
-      return window.go.main.App[method](...args)
-    }
-    throw new Error('Wails bindings not loaded')
-  }
-
   onMount(async () => {
     try {
       version = 'verstak-gui'
-      // Try Wails bindings
       if (window.go && window.go.main && window.go.main.App) {
         version = await window.go.main.App.VerstakVersion()
         sections = await window.go.main.App.ListSections()
@@ -33,7 +23,6 @@
 
   function selectSection(id) {
     selectedSection = id
-    // TODO: load nodes for section
   }
 
   function selectNode(node) {
@@ -42,88 +31,295 @@
 </script>
 
 <div class="app">
-  <!-- Top bar -->
-  <div class="topbar">
-    <span class="logo">&#9874;</span>
-    <h1>Верстак</h1>
-    <span class="version">{version}</span>
-  </div>
-
-  <!-- Error banner -->
-  {#if error}
-    <div class="error-banner">
-      Error: {error}
-    </div>
-  {/if}
-
-  <!-- Main content -->
-  <div class="main">
-    <!-- Sidebar -->
-    <div class="sidebar">
-      <div class="sidebar-header">Разделы</div>
-      {#each sections as section}
-        <div class="sidebar-item {selectedSection === section.id ? 'selected' : ''}"
-             on:click={() => selectSection(section.id)}>
-          {section.label}
-        </div>
-      {/each}
-
-      <div class="sidebar-header" style="margin-top:16px">Корневые дела</div>
-      {#each nodes as node}
-        <div class="sidebar-item {selectedNode && selectedNode.id === node.id ? 'selected' : ''}"
-             on:click={() => selectNode(node)}>
-          {node.title}
-        </div>
-      {/each}
-      {#if nodes.length === 0 && sections.length > 0}
-        <div class="sidebar-empty">Нет дел. Создайте первое дело.</div>
-      {/if}
+  <!-- Sidebar -->
+  <aside class="sidebar">
+    <div class="sidebar-top">
+      <span class="logo">&#9874;</span>
+      <span class="app-name">Верстак</span>
     </div>
 
-    <!-- Content panel -->
+    <nav class="sidebar-nav">
+      <div class="nav-group">
+        <div class="nav-label">Разделы</div>
+        {#each sections as section}
+          <button class="nav-item {selectedSection === section.id ? 'selected' : ''}"
+                  on:click={() => selectSection(section.id)}>
+            {section.label}
+          </button>
+        {/each}
+      </div>
+
+      <div class="nav-group">
+        <div class="nav-label">Корневые дела</div>
+        {#each nodes as node}
+          <button class="nav-item {selectedNode && selectedNode.id === node.id ? 'selected' : ''}"
+                  on:click={() => selectNode(node)}>
+            {node.title}
+          </button>
+        {/each}
+        {#if nodes.length === 0 && sections.length > 0}
+          <div class="nav-empty">Нет дел</div>
+        {/if}
+      </div>
+    </nav>
+
+    <div class="sidebar-bottom">
+      <span class="version">{version}</span>
+    </div>
+  </aside>
+
+  <!-- Main area -->
+  <main class="main">
+    <!-- Header -->
+    <header class="header">
+      <div class="header-left">
+        {#if selectedNode}
+          <span class="crumb">{selectedNode.title}</span>
+        {:else if selectedSection}
+          <span class="crumb">{#each sections as section}{section.id === selectedSection ? section.label : ''}{/each}</span>
+        {:else}
+          <span class="crumb placeholder">Выберите раздел или дело</span>
+        {/if}
+      </div>
+      <div class="header-right">
+        <!-- Search placeholder -->
+        <div class="search-hint">Поиск...</div>
+      </div>
+    </header>
+
+    <!-- Error banner -->
+    {#if error}
+      <div class="error-banner">
+        Wails bindings: {error}
+      </div>
+    {/if}
+
+    <!-- Content -->
     <div class="content">
       {#if selectedNode}
         <div class="node-view">
           <h2>{selectedNode.title}</h2>
-          <p>ID: {selectedNode.id}</p>
-          <p>Type: {selectedNode.type}</p>
+          <div class="node-meta">
+            <span>ID: {selectedNode.id}</span>
+            <span>Type: {selectedNode.type}</span>
+          </div>
         </div>
       {:else if sections.length > 0}
         <div class="welcome">
-          <p>Wails v2 Desktop GUI работает.</p>
-          <p>Sections: {sections.length}, Root nodes: {nodes.length}</p>
+          <h2>Верстак</h2>
+          <p>Разделы: {sections.length} · Дел: {nodes.length}</p>
           {#if error}
-            <p class="error-text">Wails bindings error: {error}</p>
-            <p class="hint">Window opens but Go bindings not connected yet.</p>
+            <p class="error-text">Go bindings не подключены: {error}</p>
           {/if}
         </div>
       {:else}
         <div class="loading">Загрузка...</div>
       {/if}
     </div>
-  </div>
+  </main>
 </div>
 
 <style>
-  * { box-sizing: border-box; margin: 0; padding: 0; }
-  .app { display: flex; flex-direction: column; height: 100vh; background: #13131f; color: #e4e4ef; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; }
-  .topbar { padding: 12px 20px; border-bottom: 1px solid #2a2a3c; display: flex; align-items: center; gap: 12px; }
-  .logo { font-size: 20px; }
-  .topbar h1 { font-size: 18px; font-weight: 600; }
-  .version { color: #666; font-size: 12px; margin-left: auto; }
-  .error-banner { background: #442222; color: #ff8888; padding: 8px 20px; font-size: 13px; }
-  .main { display: flex; flex: 1; overflow: hidden; }
-  .sidebar { width: 240px; border-right: 1px solid #2a2a3c; padding: 12px; overflow-y: auto; flex-shrink: 0; }
-  .sidebar-header { font-size: 11px; text-transform: uppercase; color: #666; margin-bottom: 8px; padding: 0 12px; }
-  .sidebar-item { padding: 8px 12px; border-radius: 6px; cursor: pointer; margin-bottom: 2px; color: #ccc; }
-  .sidebar-item:hover { background: #1e1e2e; }
-  .sidebar-item.selected { background: #2a2a3c; color: #fff; }
-  .sidebar-empty { color: #666; font-size: 12px; padding: 8px 12px; }
-  .content { flex: 1; padding: 20px; overflow-y: auto; }
-  .welcome { color: #8888a4; font-size: 14px; line-height: 1.6; }
-  .error-text { color: #ff8888; }
-  .hint { color: #666; margin-top: 8px; }
-  .loading { color: #888; font-size: 14px; }
-  .node-view h2 { font-size: 24px; margin-bottom: 16px; }
-  .node-view p { color: #888; font-size: 13px; margin-bottom: 8px; }
+  /* Reset */
+  *, *::before, *::after {
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+  }
+
+  /* App shell — full viewport */
+  .app {
+    display: flex;
+    width: 100vw;
+    height: 100vh;
+    overflow: hidden;
+    background: #13131f;
+    color: #e4e4ef;
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+    font-size: 14px;
+  }
+
+  /* ===== SIDEBAR ===== */
+  .sidebar {
+    width: 260px;
+    min-width: 200px;
+    height: 100vh;
+    display: flex;
+    flex-direction: column;
+    background: #1a1a28;
+    border-right: 1px solid #2a2a3c;
+    flex-shrink: 0;
+    overflow: hidden;
+  }
+
+  .sidebar-top {
+    padding: 16px 20px;
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    border-bottom: 1px solid #2a2a3c;
+    flex-shrink: 0;
+  }
+
+  .logo {
+    font-size: 20px;
+    line-height: 1;
+  }
+
+  .app-name {
+    font-size: 16px;
+    font-weight: 600;
+    color: #e4e4ef;
+  }
+
+  .sidebar-nav {
+    flex: 1;
+    overflow-y: auto;
+    padding: 12px 0;
+  }
+
+  .nav-group {
+    margin-bottom: 16px;
+  }
+
+  .nav-label {
+    font-size: 10px;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+    color: #666;
+    padding: 4px 20px;
+    margin-bottom: 4px;
+  }
+
+  .nav-item {
+    display: block;
+    width: 100%;
+    padding: 8px 20px;
+    border: none;
+    background: none;
+    color: #ccc;
+    font-size: 13px;
+    text-align: left;
+    cursor: pointer;
+    border-radius: 0;
+    font-family: inherit;
+  }
+
+  .nav-item:hover {
+    background: #222233;
+  }
+
+  .nav-item.selected {
+    background: #2a2a4a;
+    color: #fff;
+    font-weight: 500;
+  }
+
+  .nav-empty {
+    padding: 8px 20px;
+    color: #555;
+    font-size: 12px;
+  }
+
+  .sidebar-bottom {
+    padding: 12px 20px;
+    border-top: 1px solid #2a2a3c;
+    flex-shrink: 0;
+  }
+
+  .version {
+    font-size: 11px;
+    color: #555;
+  }
+
+  /* ===== MAIN AREA ===== */
+  .main {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    height: 100vh;
+    min-width: 0;
+    overflow: hidden;
+    background: #13131f;
+  }
+
+  .header {
+    padding: 12px 24px;
+    border-bottom: 1px solid #2a2a3c;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    flex-shrink: 0;
+    min-height: 48px;
+  }
+
+  .crumb {
+    font-size: 14px;
+    font-weight: 500;
+    color: #e4e4ef;
+  }
+
+  .crumb.placeholder {
+    color: #666;
+  }
+
+  .search-hint {
+    padding: 6px 12px;
+    background: #1e1e2e;
+    border: 1px solid #2a2a3c;
+    border-radius: 4px;
+    color: #666;
+    font-size: 12px;
+    cursor: text;
+  }
+
+  .error-banner {
+    background: #3a2222;
+    color: #ff8888;
+    padding: 8px 24px;
+    font-size: 12px;
+    border-bottom: 1px solid #4a2222;
+    flex-shrink: 0;
+  }
+
+  /* ===== CONTENT ===== */
+  .content {
+    flex: 1;
+    overflow-y: auto;
+    padding: 24px;
+  }
+
+  .welcome h2 {
+    font-size: 28px;
+    font-weight: 300;
+    margin-bottom: 12px;
+    color: #8888a4;
+  }
+
+  .welcome p {
+    color: #666;
+    font-size: 13px;
+    margin-bottom: 4px;
+  }
+
+  .error-text {
+    color: #ff8888;
+    margin-top: 12px;
+  }
+
+  .loading {
+    color: #666;
+  }
+
+  .node-view h2 {
+    font-size: 24px;
+    margin-bottom: 16px;
+  }
+
+  .node-meta {
+    display: flex;
+    gap: 16px;
+    color: #666;
+    font-size: 12px;
+  }
 </style>