Use new TabWidget for VM route

virtweb_frontend/src/widgets/TabsWidget.tsx

@@ -10,14 +10,14 @@ export interface TabWidgetOption<E> {
 export function TabsWidget<E>(p: {
   currTab: E;
   options: TabWidgetOption<E>[];
-  onValueChange: (v: E) => void;
+  onTabChange: (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);
+    p.onTabChange(activeOptions[index].value);
   };
 
   return (

virtweb_frontend/src/widgets/net/NetworkDetails.tsx

@@ -55,7 +55,7 @@ function NetworkDetailsInner(p: DetailsInnerProps): React.ReactElement {
     <>
       <TabsWidget
         currTab={currTab}
-        onValueChange={setCurrTab}
+        onTabChange={setCurrTab}
         options={[
           { label: "General", value: NetTab.General, visible: true },
           {

virtweb_frontend/src/widgets/vms/VMDetails.tsx

@@ -20,6 +20,7 @@ import { useNavigate } from "react-router-dom";
 import { useAlert } from "../../hooks/providers/AlertDialogProvider";
 import { useConfirm } from "../../hooks/providers/ConfirmDialogProvider";
 import { useSnackbar } from "../../hooks/providers/SnackbarProvider";
+import { TabsWidget } from "../TabsWidget";
 
 interface DetailsProps {
   vm: VMInfo;
@@ -82,20 +83,21 @@ function VMDetailsInner(p: DetailsInnerProps): React.ReactElement {
 
   return (
     <>
-      <Box sx={{ borderBottom: 1, borderColor: "divider" }}>
-        <Tabs value={currTab} onChange={(_ev, newVal) => setCurrTab(newVal)}>
-          <Tab label="General" tabIndex={VMTab.General} />
-          <Tab label="Storage" tabIndex={VMTab.Storage} />
-          <Tab label="Network" tabIndex={VMTab.Network} />
-          {!p.editable && (
-            <Tab
-              label="Danger zone"
-              style={{ color: "red" }}
-              tabIndex={VMTab.Danger}
+      <TabsWidget
+        currTab={currTab}
+        onTabChange={setCurrTab}
+        options={[
+          { label: "General", value: VMTab.General, visible: true },
+          { label: "Storage", value: VMTab.Storage, visible: true },
+          { label: "Network", value: VMTab.Network, visible: true },
+          {
+            label: "Danger zone",
+            value: VMTab.Danger,
+            visible: !p.editable,
+            color: "red",
+          },
+        ]}
       />
-          )}
-        </Tabs>
-      </Box>
 
       {currTab === VMTab.General && <VMDetailsTabGeneral {...p} />}
       {currTab === VMTab.Storage && <VMDetailsTabStorage {...p} />}