From 269a7461ad0e67427d2f52928b0037b0bb41a62e Mon Sep 17 00:00:00 2001
From: "Mark A. Donohoe" <Mark@MarkDonohoe.com>
Date: Thu, 19 Feb 2026 08:25:42 -0500
Subject: [PATCH] Increased the layer count from 4 to 8 and reworked the UI to
 support it.

---
 config-tool-web/index.html | 60 +++++++++++++++++++++-----------------
 firmware/src/remapper.cc   |  2 +-
 2 files changed, 34 insertions(+), 28 deletions(-)
diff --git a/config-tool-web/index.html b/config-tool-web/index.html
index 43d396bc..8d9c1117 100644
--- a/config-tool-web/index.html
+++ b/config-tool-web/index.html
@@ -13,7 +13,7 @@
 
 <body>
 
-    <div class="container d-flex flex-column" style="max-width: 720px; min-height: 100vh;">
+    <div class="container d-flex flex-column" style="min-width: 880px; max-width: 880px; min-height: 100vh;">
 
         <h1 class="mt-sm-5 mt-3">HID Remapper Configuration</h1>
 
@@ -49,12 +49,17 @@ <h1 class="mt-sm-5 mt-3">HID Remapper Configuration</h1>
             <div class="tab-pane active" id="nav-mappings" role="tabpanel" tabindex="0">
 
                 <div class="row pb-2 mt-3" style="overflow-x: auto;">
-                    <div style="min-width: 720px; width: 100%;">
+                    <div>
                         <div class="row my-2 align-items-end">
                             <div class="col-1"></div>
-                            <div class="col-3 text-center"><a href="#" id="input-column-header" class="text-decoration-none text-reset d-block">Input</a></div>
-                            <div class="col-3 text-center"><a href="#" id="output-column-header" class="text-decoration-none text-reset d-block">Output</a></div>
-                            <div class="col-3">
+                            <div class="col-5 text-center">
+                                <div class="d-flex gap-1 align-items-center">
+                                    <div class="w-50 text-center"><a href="#" id="input-column-header" class="text-decoration-none text-reset d-block">Input</a></div>
+                                    <span class="text-muted">&rarr;</span>
+                                    <div class="w-50 text-center"><a href="#" id="output-column-header" class="text-decoration-none text-reset d-block">Output</a></div>
+                                </div>
+                            </div>
+                            <div class="col-4">
                                 <div class="d-flex align-items-end">
                                     <div class="flex-fill text-center"><a href="#" id="layer-column-header" class="text-decoration-none text-reset d-block">Layer</a></div>
                                     <div class="text-start pt-1" style="writing-mode: vertical-rl; transform: rotate(180deg); line-height: 1.2em;">Sticky<br>Tap<br>Hold</div>
@@ -97,19 +102,19 @@ <h1 class="mt-sm-5 mt-3">HID Remapper Configuration</h1>
                             <input type="checkbox" id="unmapped_passthrough_checkbox3" class="form-check-input">
                             <label for="unmapped_passthrough_checkbox3" class="form-check-label">3</label>
                         </div>
-                        <div class="form-check form-check-inline d-none">
+                        <div class="form-check form-check-inline">
                             <input type="checkbox" id="unmapped_passthrough_checkbox4" class="form-check-input">
                             <label for="unmapped_passthrough_checkbox4" class="form-check-label">4</label>
                         </div>
-                        <div class="form-check form-check-inline d-none">
+                        <div class="form-check form-check-inline">
                             <input type="checkbox" id="unmapped_passthrough_checkbox5" class="form-check-input">
                             <label for="unmapped_passthrough_checkbox5" class="form-check-label">5</label>
                         </div>
-                        <div class="form-check form-check-inline d-none">
+                        <div class="form-check form-check-inline">
                             <input type="checkbox" id="unmapped_passthrough_checkbox6" class="form-check-input">
                             <label for="unmapped_passthrough_checkbox6" class="form-check-label">6</label>
                         </div>
-                        <div class="form-check form-check-inline d-none">
+                        <div class="form-check form-check-inline">
                             <input type="checkbox" id="unmapped_passthrough_checkbox7" class="form-check-input">
                             <label for="unmapped_passthrough_checkbox7" class="form-check-label">7</label>
                         </div>
@@ -337,23 +342,24 @@ <h5 class="mt-4">Custom usages</h5>
     </div>
 
     <template id="mapping_template">
-        <div class="row mb-1 mapping_container">
+        <div class="row mb-1 mapping_container align-items-center">
             <div class="col-1"><button type="button" class="btn btn-primary delete_button">×</button></div>
-            <div class="col-3">
-                <button type="button" class="btn btn-primary w-100 source_button position-relative">
-                    <span class="position-absolute top-50 start-0 translate-middle badge bg-info rounded-pill hub_port_badge">0</span>
-                    <span class="button_label">source</span>
-                </button>
-            </div>
-            <div class="col-3">
-                <button type="button" class="btn btn-primary w-100 target_button position-relative">
-                    <span class="position-absolute top-50 start-0 translate-middle badge bg-info rounded-pill hub_port_badge">0</span>
-                    <span class="button_label">target</span>
-                </button>
+            <div class="col-5">
+                <div class="d-flex gap-1 align-items-center">
+                    <button type="button" class="btn btn-primary w-50 source_button position-relative">
+                        <span class="position-absolute top-50 start-0 translate-middle badge bg-info rounded-pill hub_port_badge">0</span>
+                        <span class="button_label">source</span>
+                    </button>
+                    <span class="text-muted">&rarr;</span>
+                    <button type="button" class="btn btn-primary w-50 target_button position-relative">
+                        <span class="position-absolute top-50 start-0 translate-middle badge bg-info rounded-pill hub_port_badge">0</span>
+                        <span class="button_label">target</span>
+                    </button>
+                </div>
             </div>
-            <div class="col-3">
+            <div class="col-4">
                 <div class="d-flex lh-1 text-center">
-                    <div class="flex-fill row gx-1 justify-content-center">
+                    <div class="flex-fill row gx-1 justify-content-center me-3">
                         <div class="col-auto">
                             <input class="form-check-input layer_checkbox0" type="checkbox" value="">
                             <br><span class="text-muted small">0</span>
@@ -370,19 +376,19 @@ <h5 class="mt-4">Custom usages</h5>
                             <input class="form-check-input layer_checkbox3" type="checkbox" value="">
                             <br><span class="text-muted small">3</span>
                         </div>
-                        <div class="col-auto d-none">
+                        <div class="col-auto">
                             <input class="form-check-input layer_checkbox4" type="checkbox" value="">
                             <br><span class="text-muted small">4</span>
                         </div>
-                        <div class="col-auto d-none">
+                        <div class="col-auto">
                             <input class="form-check-input layer_checkbox5" type="checkbox" value="">
                             <br><span class="text-muted small">5</span>
                         </div>
-                        <div class="col-auto d-none">
+                        <div class="col-auto">
                             <input class="form-check-input layer_checkbox6" type="checkbox" value="">
                             <br><span class="text-muted small">6</span>
                         </div>
-                        <div class="col-auto d-none">
+                        <div class="col-auto">
                             <input class="form-check-input layer_checkbox7" type="checkbox" value="">
                             <br><span class="text-muted small">7</span>
                         </div>
diff --git a/firmware/src/remapper.cc b/firmware/src/remapper.cc
index c1a50734..0b4b48f2 100644
--- a/firmware/src/remapper.cc
+++ b/firmware/src/remapper.cc
@@ -28,7 +28,7 @@ const uint8_t H_RESOLUTION_BITMASK = (1 << 2);
 const uint32_t V_SCROLL_USAGE = 0x00010038;
 const uint32_t H_SCROLL_USAGE = 0x000C0238;
 
-const uint8_t NLAYERS = 4;
+const uint8_t NLAYERS = 8;
 const uint32_t LAYERS_USAGE_PAGE = 0xFFF10000;
 const uint32_t MACRO_USAGE_PAGE = 0xFFF20000;
 const uint32_t EXPR_USAGE_PAGE = 0xFFF30000;
