feat: compact Neovim toolbar controls

react/src/main.tsx

@@ -298,13 +298,61 @@ function Topbar({
           </div>
         </details>
         <div className="topbar-nvim-section" aria-label="Panel Neovima">
+          <span className="nvim-toolbar-boundary" aria-hidden="true">|</span>
+          <span className="nvim-toolbar-context">NVIM</span>
+          <div className="nvim-toolbar-actions" aria-label="Narzędzia okna Neovima">
             <button
-            className="viewer-nvim-toggle"
+              className="viewer-nvim-toggle nvim-toolbar-button"
+              aria-label={nvimVisible ? "Alt+1: ukryj Neovim" : "Alt+1: pokaż Neovim"}
+              title={nvimVisible ? "Alt+1 · Ukryj Neovim" : "Alt+1 · Pokaż Neovim"}
               aria-pressed={nvimVisible}
               onClick={() => setNvimVisible(!nvimVisible)}
             >
-            {nvimVisible ? "Alt+1 · Ukryj Neovim" : "Alt+1 · Pokaż Neovim"}
+              <kbd className="nvim-toolbar-key">A1</kbd><span className="nvim-toolbar-label">PANEL</span>
             </button>
+            <button
+              type="button"
+              className={`nvim-control-indicator nvim-toolbar-button${nvimSummary.syncMode ? " is-active" : ""}${nvimSummary.syncReady ? " is-engaged" : ""}`}
+              aria-label={`Alt+2: synchronizacja ${nvimSyncMode ? "włączona" : "wyłączona"}`}
+              title={`Alt+2 · SYNC ${nvimSyncMode ? "ON" : "OFF"}`}
+              aria-pressed={nvimSyncMode}
+              onClick={() => setNvimSyncMode(!nvimSyncMode)}
+            >
+              <kbd className="nvim-toolbar-key">A2</kbd><span className="nvim-toolbar-label">SYNC</span>
+            </button>
+            <button
+              type="button"
+              className={`nvim-work-indicator nvim-toolbar-button${nvimControlMode ? " is-active" : ""}${nvimSummary.controlEnabled ? " is-engaged" : ""}`}
+              aria-label={`Alt+3: sterowanie ${!nvimSyncMode ? "niedostępne" : nvimControlMode ? "włączone" : "wyłączone"}`}
+              title={!nvimSyncMode ? "Alt+3 · Sterowanie wymaga SYNC ON" : `Alt+3 · Sterowanie ${nvimControlMode ? "ON" : "OFF"}`}
+              aria-pressed={nvimControlMode}
+              disabled={!nvimSyncMode}
+              onClick={() => setNvimControlMode(!nvimControlMode)}
+            >
+              <kbd className="nvim-toolbar-key">A3</kbd><span className="nvim-toolbar-label">CTRL</span>
+            </button>
+            <button
+              type="button"
+              className={`nvim-height-toggle nvim-toolbar-button${nvimExpanded ? " is-active" : ""}`}
+              aria-label={`Alt+4: ${nvimExpanded ? "przywróć normalną wysokość" : "ustaw wysoki panel"}`}
+              title={nvimExpanded ? "Alt+4 · Normalna wysokość" : "Alt+4 · Wysoki panel 90%"}
+              aria-pressed={nvimExpanded}
+              onClick={() => setNvimExpanded(!nvimExpanded)}
+            >
+              <kbd className="nvim-toolbar-key">A4</kbd><span className="nvim-toolbar-label">HIGH</span>
+            </button>
+            <button
+              type="button"
+              className={`nvim-height-toggle nvim-toolbar-button${nvimFit ? " is-active" : ""}`}
+              aria-label={`Alt+5: automatyczne dopasowanie ${nvimFit ? "włączone" : "wyłączone"}`}
+              title={nvimFit ? "Alt+5 · Wyłącz auto-fit" : "Alt+5 · Pokaż cały Neovim"}
+              aria-pressed={nvimFit}
+              onClick={() => setNvimFit(!nvimFit)}
+            >
+              <kbd className="nvim-toolbar-key">A5</kbd><span className="nvim-toolbar-label">FIT</span>
+            </button>
+          </div>
+          <span className="nvim-toolbar-boundary" aria-hidden="true">|</span>
           {nvimVisible && (
             <>
               <span className={`nvim-status nvim-status--${nvimSummary.state}`}>
@@ -314,43 +362,6 @@ function Topbar({
                 <strong>{nvimSummary.instance ?? "Neovim MCP"}</strong>
                 {nvimSummary.detail && <small>{nvimSummary.detail}</small>}
               </span>
-              <button
-                type="button"
-                className={`nvim-control-indicator${nvimSummary.syncMode ? " is-active" : ""}${nvimSummary.syncReady ? " is-engaged" : ""}`}
-                aria-pressed={nvimSyncMode}
-                onClick={() => setNvimSyncMode(!nvimSyncMode)}
-              >
-                {nvimSyncMode ? "Alt+2 · SYNC ON" : "Alt+2 · SYNC OFF"}
-              </button>
-              <button
-                type="button"
-                className={`nvim-work-indicator${nvimControlMode ? " is-active" : ""}${nvimSummary.controlEnabled ? " is-engaged" : ""}`}
-                aria-pressed={nvimControlMode}
-                disabled={!nvimSyncMode}
-                onClick={() => setNvimControlMode(!nvimControlMode)}
-              >
-                {!nvimSyncMode
-                  ? "Alt+3 · STEROWANIE NIEDOSTĘPNE"
-                  : nvimControlMode
-                    ? "Alt+3 · STEROWANIE ON"
-                    : "Alt+3 · STEROWANIE OFF"}
-              </button>
-              <button
-                type="button"
-                className={`nvim-height-toggle${nvimExpanded ? " is-active" : ""}`}
-                aria-pressed={nvimExpanded}
-                onClick={() => setNvimExpanded(!nvimExpanded)}
-              >
-                {nvimExpanded ? "Alt+4 · NORMALNA WYSOKOŚĆ" : "Alt+4 · WYSOKI PANEL"}
-              </button>
-              <button
-                type="button"
-                className={`nvim-height-toggle${nvimFit ? " is-active" : ""}`}
-                aria-pressed={nvimFit}
-                onClick={() => setNvimFit(!nvimFit)}
-              >
-                {nvimFit ? "Alt+5 · AUTO-FIT OFF" : "Alt+5 · POKAŻ CAŁY NVIM"}
-              </button>
               <span className="nvim-shortcut-strip" aria-label="Skróty panelu Neovima">
                 <kbd>Alt+W</kbd> okna · <kbd>F12</kbd> skróty
               </span>

react/src/react.css

@@ -69,6 +69,41 @@
   min-width: 0;
   gap: 6px;
 }
+.nvim-toolbar-boundary {
+  flex: none;
+  color: #6f7d83;
+  font: 700 14px/1 ui-monospace, monospace;
+}
+.nvim-toolbar-context {
+  flex: none;
+  width: 5ch;
+  color: #263238;
+  font: 800 12px/1 ui-monospace, monospace;
+  letter-spacing: .08em;
+  text-align: center;
+}
+.nvim-toolbar-actions {
+  display: flex;
+  align-items: center;
+  gap: 3px;
+}
+.nvim-toolbar-button {
+  display: inline-flex;
+  align-items: center;
+}
+.nvim-toolbar-key {
+  flex: 0 0 2ch;
+  color: #267697;
+  font: inherit;
+  text-align: center;
+}
+.nvim-toolbar-label {
+  flex: 0 0 5ch;
+  max-width: 5ch;
+  overflow: hidden;
+  text-align: left;
+  white-space: nowrap;
+}
 .topbar-nvim-meta {
   display: flex;
   align-items: baseline;
@@ -206,6 +241,19 @@
   background: #eaf6fb;
   color: #174d64;
 }
+.topbar-nvim-section .nvim-toolbar-button {
+  flex: 0 0 9.5ch;
+  width: 9.5ch;
+  min-width: 9.5ch;
+  max-width: 9.5ch;
+  height: 24px;
+  box-sizing: border-box;
+  justify-content: flex-start;
+  gap: .55ch;
+  padding: 2px .55ch;
+  font: 750 12px/1 ui-monospace, monospace;
+  letter-spacing: 0;
+}
 .nvim-shortcut-strip {
   flex: none;
   color: #536168;