Added extended dialog: https://github.com/ioBroker/ioBroker.matter/is…

package.json

@@ -28,29 +28,29 @@
   "dependencies": {
     "@iobroker/adapter-core": "^3.2.3",
     "@iobroker/i18n": "^0.3.1",
-    "@iobroker/dm-utils": "^0.6.9",
+    "@iobroker/dm-utils": "^0.6.11",
     "@iobroker/type-detector": "^4.1.0",
     "@matter/main": "0.11.9-alpha.0-20241208-09ad57f78",
     "@matter/nodejs": "0.11.9-alpha.0-20241208-09ad57f78",
     "@project-chip/matter.js": "0.11.9-alpha.0-20241208-09ad57f78",
-    "axios": "^1.7.8",
+    "axios": "^1.7.9",
     "jsonwebtoken": "^9.0.2"
   },
   "devDependencies": {
     "@alcalzone/release-script": "^3.8.0",
     "@alcalzone/release-script-plugin-iobroker": "^3.7.2",
     "@alcalzone/release-script-plugin-license": "^3.7.0",
-    "@iobroker/build-tools": "^2.0.9",
+    "@iobroker/build-tools": "^2.0.11",
     "@iobroker/dev-server": "^0.7.3",
     "@iobroker/eslint-config": "^1.0.0",
     "@iobroker/legacy-testing": "^2.0.1",
-    "@iobroker/types": "^7.0.5",
+    "@iobroker/types": "^7.0.6",
     "@types/jsonwebtoken": "^9.0.7",
     "@types/node": "^22.10.1",
     "chai": "^4.5.0",
     "colorette": "^2.0.20",
-    "mocha": "^10.8.2",
-    "puppeteer": "^23.9.0",
+    "mocha": "^11.0.1",
+    "puppeteer": "^23.10.2",
     "typescript": "~5.7.2"
   },
   "bugs": {

src-admin/package.json

@@ -6,17 +6,17 @@
         "@rollup/rollup-linux-x64-gnu": "*"
     },
     "dependencies": {
-        "@foxriver76/iob-component-lib": "^0.1.6",
-        "@iobroker/adapter-react-v5": "^7.4.2",
-        "@iobroker/dm-gui-components": "~7.4.2",
+        "@foxriver76/iob-component-lib": "^0.2.0",
+        "@iobroker/adapter-react-v5": "^7.4.4",
+        "@iobroker/dm-gui-components": "~7.4.4",
         "@iobroker/type-detector": "^4.1.0",
-        "@types/react-dom": "^18.3.1",
+        "@types/react-dom": "^18.3.3",
         "@types/uuid": "^10.0.0",
         "@vitejs/plugin-react": "^4.3.4",
         "qr-scanner": "^1.4.2",
         "react": "^18.3.1",
         "react-dom": "^18.3.1",
-        "react-icons": "^5.3.0",
+        "react-icons": "^5.4.0",
         "react-qr-code": "^2.0.15",
         "uuid": "^11.0.3"
     },
@@ -51,4 +51,4 @@
             }
         ]
     ]
-}
+}

src-admin/src/App.tsx

@@ -2,7 +2,17 @@ import { StyledEngineProvider, ThemeProvider } from '@mui/material/styles';
 import React from 'react';
 
 import { IconButton } from '@foxriver76/iob-component-lib';
-import { AppBar, Tab, Tabs, Tooltip } from '@mui/material';
+import {
+    AppBar,
+    Dialog,
+    DialogContent,
+    DialogContentText,
+    DialogTitle,
+    LinearProgress,
+    Tab,
+    Tabs,
+    Tooltip,
+} from '@mui/material';
 
 import { SignalCellularOff as IconNotAlive } from '@mui/icons-material';
 
@@ -15,7 +25,7 @@ import {
     type GenericAppState,
     type IobTheme,
 } from '@iobroker/adapter-react-v5';
-import { clone } from './Utils';
+import { clone, getText } from './Utils';
 
 import ConfigHandler from './components/ConfigHandler';
 import BridgesTab from './Tabs/Bridges';
@@ -83,6 +93,12 @@ interface AppState extends GenericAppState {
     /** Undefined if no detection ran yet */
     detectedDevices?: DetectedRoom[];
     ready: boolean;
+    progress: {
+        title?: ioBroker.StringOrTranslated;
+        text?: ioBroker.StringOrTranslated;
+        indeterminate?: boolean;
+        value?: number;
+    } | null;
 }
 
 class App extends GenericApp<GenericAppProps, AppState> {
@@ -138,6 +154,7 @@ class App extends GenericApp<GenericAppProps, AppState> {
                 devices: {},
             },
             ready: false,
+            progress: null,
         });
 
         this.alert = window.alert;
@@ -253,9 +270,11 @@ class App extends GenericApp<GenericAppProps, AppState> {
             this.setState({ alive: true });
             this.refreshBackendSubscription(true);
         } else if (!state?.val && this.state.alive) {
-            this.refreshTimer && clearTimeout(this.refreshTimer);
-            this.refreshTimer = null;
-            this.setState({ alive: false });
+            if (this.refreshTimer) {
+                clearTimeout(this.refreshTimer);
+                this.refreshTimer = null;
+            }
+            this.setState({ alive: false, progress: null });
         }
     };
 
@@ -264,7 +283,32 @@ class App extends GenericApp<GenericAppProps, AppState> {
             return;
         }
 
-        if (update.command === 'bridgeStates') {
+        if (update.command === 'progress') {
+            if (update.progress) {
+                if (update.progress.close) {
+                    if (this.state.progress) {
+                        this.setState({ progress: null });
+                    }
+                } else {
+                    const progress = { ...this.state.progress };
+                    if (update.progress.title !== undefined) {
+                        progress.title = update.progress.title;
+                    }
+                    if (update.progress.value !== undefined) {
+                        progress.value = update.progress.value;
+                    }
+                    if (update.progress.text !== undefined) {
+                        progress.text = update.progress.text;
+                    }
+                    if (update.progress.indeterminate !== undefined) {
+                        progress.indeterminate = update.progress.indeterminate;
+                    }
+                    this.setState({ progress });
+                }
+            } else if (this.state.progress) {
+                this.setState({ progress: null });
+            }
+        } else if (update.command === 'bridgeStates') {
             // all states at once
             const nodeStates: { [uuid: string]: NodeStateResponse } = {};
             if (update.states) {
@@ -420,6 +464,7 @@ class App extends GenericApp<GenericAppProps, AppState> {
                     this.setState({ nodeStates: _nodeStates });
                 }}
                 nodeStates={this.state.nodeStates}
+                themeName={this.state.themeName}
                 themeType={this.state.themeType}
                 theme={this.state.theme}
                 detectedDevices={this.state.detectedDevices}
@@ -454,6 +499,7 @@ class App extends GenericApp<GenericAppProps, AppState> {
                 nodeStates={this.state.nodeStates}
                 commissioning={this.state.commissioning?.devices || {}}
                 socket={this.socket}
+                themeName={this.state.themeName}
                 themeType={this.state.themeType}
                 theme={this.state.theme}
                 detectedDevices={this.state.detectedDevices}
@@ -538,6 +584,31 @@ class App extends GenericApp<GenericAppProps, AppState> {
         }
     }
 
+    renderProgressDialog(): React.JSX.Element | null {
+        if (!this.state.progress) {
+            return null;
+        }
+
+        return (
+            <Dialog
+                open={!0}
+                onClose={() => {}}
+                maxWidth="md"
+            >
+                {this.state.progress.title ? <DialogTitle>{getText(this.state.progress.title)}</DialogTitle> : null}
+                <DialogContent>
+                    <LinearProgress
+                        variant={this.state.progress.indeterminate ? 'indeterminate' : 'determinate'}
+                        value={this.state.progress.value}
+                    />
+                    {this.state.progress.text ? (
+                        <DialogContentText>{getText(this.state.progress.text)}</DialogContentText>
+                    ) : null}
+                </DialogContent>
+            </Dialog>
+        );
+    }
+
     render(): React.JSX.Element {
         if (!this.state.ready) {
             return (
@@ -553,6 +624,7 @@ class App extends GenericApp<GenericAppProps, AppState> {
             <StyledEngineProvider injectFirst>
                 <ThemeProvider theme={this.state.theme}>
                     {this.renderToast()}
+                    {this.renderProgressDialog()}
                     <div
                         className="App"
                         style={{

src-admin/src/Tabs/Bridges.tsx

@@ -43,7 +43,7 @@ import {
 
 import { I18n, SelectID, type IobTheme } from '@iobroker/adapter-react-v5';
 
-import { InfoBox } from '@foxriver76/iob-component-lib';
+import InfoBox from '../components/InfoBox';
 import DeviceDialog, { DEVICE_ICONS, SUPPORTED_DEVICES } from '../components/DeviceDialog';
 import type {
     BridgeDescription,
@@ -219,6 +219,7 @@ interface BridgesState extends BridgesAndDevicesState {
 
 export class Bridges extends BridgesAndDevices<BridgesProps, BridgesState> {
     private bridgeIndex: number | null = null;
+    protected readonly isDevice = false;
 
     constructor(props: BridgesProps) {
         super(props);
@@ -711,7 +712,7 @@ export class Bridges extends BridgesAndDevices<BridgesProps, BridgesState> {
                                 onChange={e => this.setState({ suppressDeleteEnabled: e.target.checked })}
                             />
                         }
-                        label={I18n.t('Suppress question for 2 minutes')}
+                        label={I18n.t('Suppress question for 5 minutes')}
                     />
                 </DialogContent>
                 <DialogActions>
@@ -731,7 +732,7 @@ export class Bridges extends BridgesAndDevices<BridgesProps, BridgesState> {
                             this.setState(
                                 {
                                     deleteDialog: null,
-                                    suppressDeleteTime: this.state.suppressDeleteEnabled ? Date.now() + 120_000 : 0,
+                                    suppressDeleteTime: this.state.suppressDeleteEnabled ? Date.now() + 300_000 : 0,
                                 },
                                 () => this.props.updateConfig(matter),
                             );
@@ -1323,7 +1324,13 @@ export class Bridges extends BridgesAndDevices<BridgesProps, BridgesState> {
                         >
                             <span>
                                 <IconButton
-                                    sx={styles.bridgeButtonsAndTitleColor}
+                                    style={{
+                                        color: this.isDevice
+                                            ? this.props.themeType === 'dark'
+                                                ? 'white'
+                                                : '#00000080'
+                                            : 'white',
+                                    }}
                                     disabled={bridge.enabled && !allowDisable}
                                     onClick={e => {
                                         e.stopPropagation();
@@ -1451,7 +1458,15 @@ export class Bridges extends BridgesAndDevices<BridgesProps, BridgesState> {
                 {this.renderQrCodeDialog()}
                 {this.renderDebugDialog()}
                 {this.renderResetDialog()}
-                <InfoBox type="info">{I18n.t('Matter Bridges Infotext')}</InfoBox>
+                {this.renderJsonConfigDialog()}
+                <InfoBox
+                    type="info"
+                    closeable
+                    storeId="matter.bridge"
+                    iconPosition="top"
+                >
+                    {I18n.t('Matter Bridges Infotext')}
+                </InfoBox>
                 <Tooltip
                     title={I18n.t('Add bridge')}
                     slotProps={{ popper: { sx: { pointerEvents: 'none' } } }}