fix: footswitch bar always shows BYPASS, BANK, scribble strips

- Capped block switches to 4 max so BYPASS and BANK are always visible
- Added LCD-style scribble strip display with dark background + border
- Added short abbreviated labels (GATE, OD, DST, etc.) in scribble strips
- Added proper BANK ▲/▼ navigation with bank letter (A-H)
- Added status LEDs on all block footswitches
- BlockChain.jsx: removed extra closing </div> that broke JSX parsing

src/App.jsx

@@ -150,7 +150,7 @@ const css = `
   .param-header { display: flex; justify-content: space-between; align-items: center; }
   .param-label { font-size: 10px; font-weight: 500; text-transform: uppercase; letter-spacing: .06em; color: ${T.textSec}; }
   .param-val { font-family: 'JetBrains Mono',monospace; font-size: 12px; font-weight: 600; }
-  .param-track-wrap { position: relative; height: 38px; display: flex; align-items: center; cursor: pointer; touch-action: none; }
+  .param-track-wrap { position: relative; height: 44px; display: flex; align-items: center; cursor: pointer; touch-action: none; }
   .param-track { width: 100%; height: 8px; background: ${T.border}; border-radius: 4px; position: relative; overflow: hidden; }
   .param-fill { height: 100%; border-radius: 4px; position: absolute; top: 0; left: 0; transition: width .04s; }
   .param-thumb { width: 26px; height: 26px; border-radius: 50%; position: absolute; top: 50%;
@@ -785,11 +785,11 @@ export default function App() {
             <FootswitchBar
               blocks={blocks}
               selectedBlockId={selectedBlockId}
-              currentBank="A"
+              currentBank={bankLetter}
               onSelectBlock={handleSelectBlock}
               onToggleBlock={handleToggleBlock}
-              onBankUp={() => {}}
-              onBankDown={() => {}}
+              onBankUp={handleBankUp}
+              onBankDown={handleBankDown}
               onGlobalBypass={() => setState(prev => ({ ...prev, bypass: !prev.bypass }))}
               globalBypass={state.bypass}
             />