Tab styling and navigation shortcuts.

Signed-off-by: ubi de feo <me@ubidefeo.com>

Author: ubidefeo

backend/menu.js

@@ -180,6 +180,18 @@ module.exports = function registerMenu(win, state = {}) {
           enabled: state.isConnected && state.view === 'editor',
           click: () => win.webContents.send('shortcut-cmd', shortcuts.global.CLEAR_TERMINAL)
         },
+        {
+          label: 'Next Tab',
+          accelerator: shortcuts.menu.TAB_NEXT,
+          enabled: state.view === 'editor',
+          click: () => win.webContents.send('shortcut-cmd', shortcuts.global.TAB_NEXT)
+        },
+        {
+          label: 'Previous Tab',
+          accelerator: shortcuts.menu.TAB_PREV,
+          enabled: state.view === 'editor',
+          click: () => win.webContents.send('shortcut-cmd', shortcuts.global.TAB_PREV)
+        },
         { type: 'separator' },
         { role: 'resetZoom' },
         { role: 'zoomIn' },

backend/shortcuts.js

@@ -17,6 +17,8 @@ const shortcuts = {
     FILES_VIEW: 'CommandOrControl+Alt+2',
     SELECT_FUNCTION: 'CommandOrControl+Alt+A',
     SELECT_LINE: 'CommandOrControl+Alt+L',
+    TAB_NEXT: 'Control+Tab',
+    TAB_PREV: 'Control+Shift+Tab',
   },
   menu: {
     CLOSE: 'CmdOrCtrl+W',
@@ -34,6 +36,8 @@ const shortcuts = {
     FILES_VIEW: 'CmdOrCtrl+Alt+2',
     SELECT_FUNCTION: 'CmdOrCtrl+Alt+A',
     SELECT_LINE: 'CmdOrCtrl+Alt+L',
+    TAB_NEXT: 'Ctrl+Tab',
+    TAB_PREV: 'Ctrl+Shift+Tab',
   },
   // Shortcuts
 }

ui/arduino/main.css

@@ -240,6 +240,7 @@ button.small .icon {
   background: #ECF1F1;
   font-size: 14px;
   position: relative;
+  border-bottom: 1px solid #008184;
 }
 
 .tab {
@@ -254,6 +255,9 @@ button.small .icon {
   background: #DAE3E3;
   overflow: hidden;
   transition: all 0.1s;
+  position: relative;
+  top: 1px
+  border-bottom: 1px solid #008184;;
 }
 
 .tab:hover {
@@ -262,6 +266,11 @@ button.small .icon {
 
 .tab.active {
   background: #FFF;
+  border-width: 1px 1px 0 1px;
+  border-color: #008184;;
+  border-style: solid;
+  position: relative;
+  bottom: -1px;
 }
 
 .tab .icon {

ui/arduino/store.js

@@ -1848,6 +1848,14 @@ async function store(state, emitter) {
       if (state.view != 'editor') return
       emitter.emit('change-view', 'file-manager')
     }
+    if (key === shortcuts.TAB_NEXT || key === shortcuts.TAB_PREV) {
+      if (state.view !== 'editor' || state.openFiles.length < 2) return
+      const idx = state.openFiles.findIndex(f => f.id === state.editingFile)
+      const next = key === shortcuts.TAB_NEXT
+        ? (idx + 1) % state.openFiles.length
+        : (idx - 1 + state.openFiles.length) % state.openFiles.length
+      emitter.emit('select-tab', state.openFiles[next].id)
+    }
     // if (key === shortcuts.ESC) {
     //   if (state.isConnectionDialogOpen) {
     //     emitter.emit('close-connection-dialog')

ui/arduino/views/components/tabs.js

@@ -2,6 +2,7 @@ let _emit = null
 let _containerWidth = 0
 let _dropdownOpen = false
 let _resizeObserver = null
+let _windowStart = 0
 
 // Each tab: 140px min-width + 20px padding + 6px gap = 166px slot
 const TAB_SLOT = 166
@@ -38,14 +39,20 @@ function Tabs(state, emit) {
     ? calcVisibleCount(_containerWidth, files.length)
     : files.length
 
-  // Slide window so active tab is always visible
-  let start = 0
-  let end = Math.min(visibleCount, files.length)
-  if (activeIndex >= end) {
-    end = activeIndex + 1
-    start = Math.max(0, end - visibleCount)
+  // Clamp _windowStart so it never leaves trailing empty slots after resize/close
+  _windowStart = Math.min(_windowStart, Math.max(0, files.length - visibleCount))
+  _windowStart = Math.max(0, _windowStart)
+
+  // Scroll only when active tab falls outside the current window
+  if (activeIndex < _windowStart) {
+    _windowStart = activeIndex
+  } else if (activeIndex >= _windowStart + visibleCount) {
+    _windowStart = activeIndex - visibleCount + 1
   }
 
+  const start = _windowStart
+  const end = Math.min(start + visibleCount, files.length)
+
   const visibleFiles = files.slice(start, end)
   const overflowFiles = [...files.slice(0, start), ...files.slice(end)]
   const hasOverflow = overflowFiles.length > 0