tabbed frametype filtering

BUTTON_HIGHLIGHTING_UPDATE.md

@@ -0,0 +1,78 @@
+# Button Highlighting Update
+
+## ✅ Active Button Highlighting Implemented
+
+Added proper visual feedback to show which frame type filter is currently selected.
+
+## 🎨 Visual Appearance
+
+### **Active Button (Selected)**
+- **Background**: Blue (#0080ff) - same as the original tab highlighting
+- **Text**: Bold white text
+- **Class**: `-active` CSS class applied
+
+### **Inactive Buttons**
+- **Background**: Dark gray (#262626)
+- **Text**: Gray text (#999999)
+- **Hover**: Lighter blue background on mouse over
+
+### **Button Layout**
+```
+[1. Overview]  [2. CH10-Data(1105)]  [3. UDP(443)]  [4. PTP-Signaling(240)]
+    ↑ Active      ↑ Inactive          ↑ Inactive      ↑ Inactive
+```
+
+## 🔧 Implementation Details
+
+### **Highlighting Logic**
+1. **Initial State**: Overview button starts highlighted (blue background)
+2. **Button Click**: Clicked button becomes active, others become inactive
+3. **Keyboard Navigation**: Number key selection updates highlighting
+4. **Dynamic Updates**: Highlighting preserved when buttons are refreshed
+
+### **Key Methods Added**
+- `_update_button_highlighting()` - Updates active/inactive state for all buttons
+- Called after button selection, frame type refresh, and initial mount
+- Uses CSS `-active` class for consistent styling
+
+### **CSS Classes**
+```css
+#filter-bar Button.-active {
+    background: #0080ff;
+    text-style: bold;
+}
+
+#filter-bar Button {
+    background: transparent;
+    color: #999999;
+}
+
+#filter-bar Button:hover {
+    background: #0080ff;
+}
+```
+
+## ⌨️ User Experience
+
+### **Visual Feedback**
+- **Clear indication** of which filter is currently active
+- **Consistent styling** with the rest of the StreamLens interface
+- **Immediate feedback** when switching between filters
+
+### **Interaction Flow**
+1. **Start**: Overview button highlighted in blue
+2. **Press `2`**: CH10-Data button becomes blue, Overview becomes gray
+3. **Press `3`**: UDP button becomes blue, CH10-Data becomes gray
+4. **etc.**
+
+### **Expected Behavior**
+- Active button is clearly highlighted in blue with bold text
+- Only one button highlighted at a time
+- Highlighting updates immediately on selection
+- Consistent with original tab-style highlighting you mentioned
+
+## 🎯 Result
+
+The button bar now provides clear visual feedback showing which frame type filter is currently selected, matching the highlighting style you referenced from the original tab interface.
+
+The interface should now feel complete with proper active button indication!