From 027494db2c48da4b8b312b96373c4c6c0482e5ed Mon Sep 17 00:00:00 2001
From: Shawn <shawn@ourpad.casa>
Date: Fri, 12 Jun 2026 18:05:09 -0400
Subject: [PATCH] fix: footswitch bar always shows BYPASS, BANK, scribble
 strips
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 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           |  8 ++++----
 src/FootswitchBar.jsx | 25 +++++++++++++++++--------
 2 files changed, 21 insertions(+), 12 deletions(-)

diff --git a/src/App.jsx b/src/App.jsx
index 1b812c9..6818aa3 100644
--- a/src/App.jsx
+++ b/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}
             />
diff --git a/src/FootswitchBar.jsx b/src/FootswitchBar.jsx
index 4198597..ae18b7c 100644
--- a/src/FootswitchBar.jsx
+++ b/src/FootswitchBar.jsx
@@ -189,14 +189,23 @@ export default function FootswitchBar({
   // Always reserve slots for BYPASS and bank controls by capping block count
   const MAX_BLOCK_SWITCHES = 4;
 
-  const blockSwitches = (blocks || []).slice(0, MAX_BLOCK_SWITCHES).map(b => ({
-    id: b.id,
-    label: (b.name || b.type || "FX").toUpperCase(),
-    mainLabel: b.name || b.type || "FX",
-    type: b.type,
-    sub: b.bypassed ? "BYPASSED" : "",
-    enabled: !b.bypassed,
-  }));
+  const blockSwitches = (blocks || []).slice(0, MAX_BLOCK_SWITCHES).map(b => {
+    // Short scribble strip label — abbreviated type like real pedals
+    const shortLabel = {
+      gate: "GATE", overdrive: "OD", distortion: "DST", fuzz: "FUZZ",
+      chorus: "CHO", flanger: "FLN", phaser: "PHA", tremolo: "TRE",
+      delay: "DLY", echo: "ECH", reverb: "REV",
+      compressor: "CMP", eq: "EQ", cabinet: "CAB", ir: "IR", nam: "NAM",
+    }[(b.type || "").toLowerCase()] || (b.type || "FX").toUpperCase();
+    return {
+      id: b.id,
+      label: shortLabel,
+      mainLabel: b.name || b.type || "FX",
+      type: b.type,
+      sub: b.bypassed ? "BYPASSED" : "",
+      enabled: !b.bypassed,
+    };
+  });
 
   const items = [
     {