Fix hidden tabs issue

virtweb_frontend/src/widgets/TabsWidget.tsx

@@ -0,0 +1,35 @@
+import { Box, Tab, Tabs } from "@mui/material";
+
+export interface TabWidgetOption<E> {
+  label: string;
+  value: E;
+  visible: boolean;
+  color?: string;
+}
+
+export function TabsWidget<E>(p: {
+  currTab: E;
+  options: TabWidgetOption<E>[];
+  onValueChange: (v: E) => void;
+}): React.ReactElement {
+  const activeOptions = p.options.filter((v) => v.visible);
+
+  const currTabIndex = activeOptions.findIndex((v) => v.value === p.currTab);
+
+  const updateActiveTab = (index: number) => {
+    p.onValueChange(activeOptions[index].value);
+  };
+
+  return (
+    <Box sx={{ borderBottom: 1, borderColor: "divider" }}>
+      <Tabs
+        value={currTabIndex}
+        onChange={(_ev, newVal) => updateActiveTab(newVal)}
+      >
+        {activeOptions.map((o, index) => (
+          <Tab key={index} label={o.label} style={{ color: o.color }} />
+        ))}
+      </Tabs>
+    </Box>
+  );
+}