update README

Bumps [ra-language-english](https://github.com/marmelab/react-admin) from 5.3.0 to 5.3.1.
- [Release notes](https://github.com/marmelab/react-admin/releases)
- [Changelog](https://github.com/marmelab/react-admin/blob/master/CHANGELOG.md)
- [Commits](https://github.com/marmelab/react-admin/compare/v5.3.0...v5.3.1)

---
updated-dependencies:
- dependency-name: ra-language-english
  dependency-type: direct:production
  update-type: version-update:semver-patch
...

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

.github/dependabot.yml

@@ -4,13 +4,16 @@ updates:
     directory: "/"
     schedule:
       interval: "weekly"
+    open-pull-requests-limit: 10
 
   - package-ecosystem: "docker"
     directory: "/"
     schedule:
       interval: "weekly"
+    open-pull-requests-limit: 10
 
   - package-ecosystem: "github-actions"
     directory: "/"
     schedule:
       interval: "weekly"
+    open-pull-requests-limit: 10

.github/workflows/workflow.yml

@@ -25,10 +25,6 @@ jobs:
           cache: yarn
       - name: Install dependencies
         run: yarn install --immutable --network-timeout=300000
-      - name: Set version into manifest.json
-        run: |
-          TAG=$(git describe --tags --abbrev=0 || echo "latest")
-          sed -i "s|\"icons\"|\"version\": \"$TAG\",\\n  \"icons\"|g" public/manifest.json
       - name: Build
         run: yarn build --base=${{ env.base_path }}
       - uses: actions/upload-artifact@v4

README.md

@@ -1,4 +1,16 @@
-# Synapse Admin UI [![GitHub license](https://img.shields.io/github/license/Awesome-Technologies/synapse-admin)](https://github.com/Awesome-Technologies/synapse-admin/blob/master/LICENSE)
+<p align="center">
+  <img alt="Synapse Admin Logo" src="./public/images/logo.webp" height="140" />
+  <h3 align="center">
+    Synapse Admin<br>
+    <a href="https://matrix.to/#/#synapse-admin:etke.cc">
+      <img alt="Community room" src="https://img.shields.io/badge/room-community_room-green?logo=matrix&label=%23synapse-admin%3Aetke.cc">
+    </a><br>
+    <img alt="License" src="https://img.shields.io/github/license/etkecc/synapse-admin">
+  </h3>
+  <p align="center">Manager your Synapse homeserver with ease</p>
+</p>
+
+---
 
 ![Screenshots](./screenshots.jpg)
 
@@ -23,7 +35,7 @@ This project is built using [react-admin](https://marmelab.com/react-admin/).
     * [Steps for 1)](#steps-for-1)
     * [Steps for 2)](#steps-for-2)
     * [Steps for 3)](#steps-for-3)
-  * [Serving Synapse-Admin on a different path](#serving-synapse-admin-on-a-different-path)
+  * [Serving Synapse Admin on a different path](#serving-synapse-admin-on-a-different-path)
 * [Development](#development-1)
 
 <!-- vim-markdown-toc -->
@@ -54,8 +66,9 @@ The following changes are already implemented:
 * [Fix redirect URL after user creation](https://github.com/etkecc/synapse-admin/pull/16)
 * [Display actual Synapse errors](https://github.com/etkecc/synapse-admin/pull/17)
 * [Fix base_url being undefined on unsuccessful login](https://github.com/etkecc/synapse-admin/pull/18)
-* [Put the version into manifest.json](https://github.com/Awesome-Technologies/synapse-admin/issues/507) (CI only)
-* [Federation page improvements](https://github.com/Awesome-Technologies/synapse-admin/pull/583) (using theme colors)
+* [Put the version into manifest.json](https://github.com/Awesome-Technologies/synapse-admin/issues/507) (later replaced
+with a proper manifest.json generation on build)
+* [Federation page improvements](https://github.com/Awesome-Technologies/synapse-admin/pull/583) (using icons)
 * [Add UI option to block deleted rooms from being rejoined](https://github.com/etkecc/synapse-admin/pull/26)
 * [Fix required fields check on Bulk registration CSV upload](https://github.com/etkecc/synapse-admin/pull/32)
 * [Fix requests with invalid MXIDs on Bulk registration](https://github.com/etkecc/synapse-admin/pull/33)
@@ -70,6 +83,9 @@ The following changes are already implemented:
 * [Fix footer causing vertical scrollbar](https://github.com/etkecc/synapse-admin/pull/60)
 * [Custom Menu Items](https://github.com/etkecc/synapse-admin/pull/79)
 * [Add user profile to the top menu](https://github.com/etkecc/synapse-admin/pull/80)
+* [Enable visual customization](https://github.com/etkecc/synapse-admin/pull/81)
+* [Fix room state events display](https://github.com/etkecc/synapse-admin/pull/100)
+* [Sanitize CSV on import](https://github.com/etkecc/synapse-admin/pull/101)
 
 _the list will be updated as new changes are added_
 
@@ -154,7 +170,7 @@ Where `icon` is one of the [preloaded icons](./src/components/icons.ts)
 
 **Deprecated**: use `menu` config option described above. Automatically migrated to the `menu` if the `supportURL` is present.
 
-~~Synapse-Admin provides a support link in the main menu - `Contact support`. By default, the link points to the GitHub issues page of the project. You can change this link by providing a `supportURL` in the `config.json`.~~
+~~Synapse Admin provides a support link in the main menu - `Contact support`. By default, the link points to the GitHub issues page of the project. You can change this link by providing a `supportURL` in the `config.json`.~~
 
 ```json
 {
@@ -241,7 +257,7 @@ You have three options:
 
 - browse to http://localhost:8080
 
-### Serving Synapse-Admin on a different path
+### Serving Synapse Admin on a different path
 
 The path prefix where synapse-admin is served can only be changed during the build step.
 
@@ -249,7 +265,7 @@ If you downloaded the source code, use `yarn build --base=/my-prefix` to set a p
 
 If you want to build your own Docker container, use the `BASE_PATH` argument.
 
-We do not support directly changing the path where Synapse-Admin is served in the pre-built Docker container. Instead please use a reverse proxy if you need to move Synapse-Admin to a different base path. If you want to serve multiple applications with different paths on the same domain, you need a reverse proxy anyway.
+We do not support directly changing the path where Synapse Admin is served in the pre-built Docker container. Instead please use a reverse proxy if you need to move Synapse Admin to a different base path. If you want to serve multiple applications with different paths on the same domain, you need a reverse proxy anyway.
 
 Example for Traefik:
 

index.html

@@ -4,17 +4,14 @@
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
-    <meta
-      name="description"
-      content="Synapse-Admin"
-    />
+    <meta name="description" content="Synapse Admin" />
     <!--
       manifest.json provides metadata used when your web app is installed on a
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
     -->
     <link rel="manifest" href="./manifest.json" />
     <link rel="shortcut icon" href="./favicon.ico" />
-    <title>Synapse-Admin</title>
+    <title>Synapse Admin</title>
     <style>
       body {
         margin: 0;

package.json

@@ -11,25 +11,25 @@
     "url": "https://github.com/etkecc/synapse-admin"
   },
   "devDependencies": {
-    "@eslint/js": "^9.7.0",
+    "@eslint/js": "^9.13.0",
     "@testing-library/dom": "^10.0.0",
     "@testing-library/jest-dom": "^6.6.2",
     "@testing-library/react": "^16.0.0",
     "@testing-library/user-event": "^14.5.2",
-    "@types/jest": "^29.5.13",
-    "@types/lodash": "^4.17.7",
-    "@types/node": "^22.7.7",
+    "@types/jest": "^29.5.14",
+    "@types/lodash": "^4.17.12",
+    "@types/node": "^22.8.1",
     "@types/papaparse": "^5.3.15",
-    "@types/react": "^18.3.3",
-    "@typescript-eslint/eslint-plugin": "^8.10.0",
-    "@typescript-eslint/parser": "^8.10.0",
-    "@vitejs/plugin-react": "^4.3.2",
-    "eslint": "^8.57.0",
+    "@types/react": "^18.3.12",
+    "@typescript-eslint/eslint-plugin": "^8.11.0",
+    "@typescript-eslint/parser": "^8.11.0",
+    "@vitejs/plugin-react": "^4.3.3",
+    "eslint": "^9.13.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-import": "^2.31.0",
-    "eslint-plugin-jsx-a11y": "^6.9.0",
+    "eslint-plugin-jsx-a11y": "^6.10.2",
     "eslint-plugin-prettier": "^5.2.1",
-    "eslint-plugin-unused-imports": "^3.2.0",
+    "eslint-plugin-unused-imports": "^4.1.4",
     "eslint-plugin-yaml": "^1.0.3",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
@@ -39,8 +39,8 @@
     "ts-jest": "^29.2.5",
     "ts-node": "^10.9.2",
     "typescript": "^5.6.3",
-    "typescript-eslint": "^8.10.0",
-    "vite": "^5.4.6",
+    "typescript-eslint": "^8.11.0",
+    "vite": "^5.4.10",
     "vite-plugin-version-mark": "^0.1.2"
   },
   "dependencies": {
@@ -48,22 +48,22 @@
     "@emotion/styled": "^11.13.0",
     "@haleos/ra-language-german": "^1.0.0",
     "@haxqer/ra-language-chinese": "^4.16.2",
-    "@mui/icons-material": "^6.1.1",
-    "@mui/material": "^6.1.1",
+    "@mui/icons-material": "^6.1.5",
+    "@mui/material": "^6.1.5",
     "@mui/utils": "^5.16.6",
-    "@tanstack/react-query": "^5.56.2",
+    "@tanstack/react-query": "^5.59.16",
     "history": "^5.3.0",
     "lodash": "^4.17.21",
     "papaparse": "^5.4.1",
-    "ra-core": "^5.3.0",
+    "ra-core": "^5.3.1",
     "ra-i18n-polyglot": "^5.3.0",
-    "ra-language-english": "^5.3.0",
+    "ra-language-english": "^5.3.1",
     "ra-language-farsi": "^5.0.0",
-    "ra-language-french": "^5.2.0",
+    "ra-language-french": "^5.3.1",
     "ra-language-italian": "^3.13.1",
     "ra-language-russian": "^4.14.2",
     "react": "^18.3.1",
-    "react-admin": "^5.3.0",
+    "react-admin": "^5.3.1",
     "react-dom": "^18.3.1",
     "react-hook-form": "^7.53.1",
     "react-is": "^18.3.1",
@@ -73,7 +73,7 @@
   "scripts": {
     "start": "vite serve",
     "build": "vite build",
-    "lint": "eslint --ignore-path .gitignore --ext .ts,.tsx,.yml,.yaml .",
+    "lint": "ESLINT_USE_FLAT_CONFIG=false eslint --ignore-path .gitignore --ignore-pattern testdata/ --ext .ts,.tsx,.yml,.yaml .",
     "fix": "yarn lint --fix",
     "test": "yarn jest",
     "test:watch": "yarn jest --watch"

public/manifest.json

@@ -1,15 +0,0 @@
-{
-  "short_name": "Synapse-Admin",
-  "name": "Synapse-Admin",
-  "icons": [
-    {
-      "src": "favicon.ico",
-      "sizes": "64x64 32x32 24x24 16x16",
-      "type": "image/x-icon"
-    }
-  ],
-  "start_url": ".",
-  "display": "standalone",
-  "theme_color": "#000000",
-  "background_color": "#ffffff"
-}

src/components/AdminLayout.tsx

@@ -1,4 +1,4 @@
-import { AppBar, Confirm, Layout, Logout, Menu, useLogout, UserMenu } from "react-admin";
+import { AppBar, TitlePortal, InspectorButton, Confirm, Layout, Logout, Menu, useLogout, UserMenu } from "react-admin";
 import { LoginMethod } from "../pages/LoginPage";
 import { useEffect, useState, Suspense } from "react";
 import { Icons, DefaultIcon } from "./icons";
@@ -44,7 +44,12 @@ const AdminUserMenu = () => {
   );
 };
 
-const AdminAppBar = () => <AppBar userMenu={<AdminUserMenu />} />;
+const AdminAppBar = () => {
+  return (<AppBar userMenu={<AdminUserMenu />}>
+    <TitlePortal />
+    <InspectorButton />
+  </AppBar>);
+};
 
 const AdminMenu = (props) => {
   const [menu, setMenu] = useState([]);

src/components/Footer.tsx

@@ -1,4 +1,4 @@
-import { Box, Link, Typography } from "@mui/material";
+import { Avatar, Box, Link, Typography } from "@mui/material";
 import { useEffect, useState } from "react";
 
 const Footer = () => {
@@ -23,15 +23,16 @@ const Footer = () => {
       p: 1,
     }}>
     <Typography variant="body2">
+      <Avatar src="./images/logo.webp" sx={{ width: "1rem", height: "1rem", display: "inline-block", verticalAlign: "sub" }} />
       <Link sx={{ color: "#888", textDecoration: 'none' }} href="https://github.com/etkecc/synapse-admin" target="_blank">
-        Synapse-Admin
+        Synapse Admin
       </Link> <Link href={`https://github.com/etkecc/synapse-admin/releases/tag/`+version} target="_blank">
         <span style={{ fontWeight: 'bold', color: "#000" }}>{version}</span>
       </Link> <Link sx={{ color: "#888", textDecoration: 'none' }} href="https://etke.cc/?utm_source=synapse-admin&utm_medium=footer&utm_campaign=synapse-admin" target="_blank">
         by etke.cc
       </Link> <Link sx={{ color: "#888", textDecoration: 'none' }} href="https://github.com/awesome-technologies/synapse-admin" target="_blank">
-        (originally developed by Awesome Technologies Innovationslabor GmbH)
-      </Link>
+        (originally developed by Awesome Technologies Innovationslabor GmbH).
+      </Link> <Link sx={{ fontWeight: 'bold', color: "#000", textDecoration: 'none' }} href="https://matrix.to/#/#synapse-admin:etke.cc" target="_blank">#synapse-admin:etke.cc</Link>
     </Typography>
   </Box>
   );

src/components/ImportFeature.tsx

@@ -121,6 +121,7 @@ const FilePicker = () => {
 
   const verifyCsv = ({ data, meta, errors }: ParseResult<ImportLine>, { setValues, setStats, setError }) => {
     /* First, verify the presence of required fields */
+    meta.fields = meta.fields?.map(f => f.trim().toLowerCase());
     const missingFields = expectedFields.filter(eF => !meta.fields?.find(mF => eF === mF));
 
     if (missingFields.length > 0) {
@@ -147,6 +148,15 @@ const FilePicker = () => {
     };
 
     const errorMessages = errors.map(e => e.message);
+    // sanitize the data first
+    data = data.map(line => {
+      const newLine = {} as ImportLine;
+      for (const [key, value] of Object.entries(line)) {
+        newLine[key.trim().toLowerCase()] = value;
+      }
+      return newLine;
+    });
+    // process the data
     data.forEach((line, idx) => {
       if (line.user_type === undefined || line.user_type === "") {
         stats.user_types.default++;
@@ -173,6 +183,7 @@ const FilePicker = () => {
           line[f] = true; // we need true booleans instead of strings
         } else {
           if (line[f] !== "false" && line[f] !== "") {
+            console.log("invalid value", line[f], "for field " + f + " in row " + idx);
             errorMessages.push(
               translate("import_users.error.invalid_value", {
                 field: f,

src/pages/LoginPage.tsx

@@ -1,6 +1,5 @@
 import { useState, useEffect } from "react";
 
-import LockIcon from "@mui/icons-material/Lock";
 import { Avatar, Box, Button, Card, CardActions, CircularProgress, MenuItem, Select, Tab, Tabs, Typography } from "@mui/material";
 import {
   Form,
@@ -249,9 +248,7 @@ const LoginPage = () => {
             {loading ? (
               <CircularProgress size={25} thickness={2} />
             ) : (
-              <Avatar className="icon">
-                <LockIcon />
-              </Avatar>
+              <Avatar sx={{ width: "120px", height: "120px" }} src="./images/logo.webp"/>
             )}
           </Box>
           <Box className="hint">{translate("synapseadmin.auth.welcome")}</Box>

src/resources/destinations.tsx

@@ -8,6 +8,7 @@ import ErrorIcon from '@mui/icons-material/Error';
 import {
   Button,
   Datagrid,
+  DatagridConfigurable,
   DateField,
   List,
   ListProps,
@@ -123,14 +124,14 @@ export const DestinationList = (props: ListProps) => {
       pagination={<DestinationPagination />}
       sort={{ field: "destination", order: "ASC" }}
     >
-      <Datagrid rowClick={id => `${id}/show/rooms`} bulkActionButtons={false}>
+      <DatagridConfigurable rowClick={id => `${id}/show/rooms`} bulkActionButtons={false}>
         <FunctionField source="destination" render={destinationFieldRender} />
         <DateField source="failure_ts" showTime options={DATE_FORMAT} />
         <RetryDateField source="retry_last_ts" showTime options={DATE_FORMAT} />
         <TextField source="retry_interval" />
         <TextField source="last_successful_stream_ordering" />
         <DestinationReconnectButton />
-      </Datagrid>
+      </DatagridConfigurable>
     </List>
   );
 };

src/resources/registration_tokens.tsx

@@ -4,6 +4,7 @@ import {
   Create,
   CreateProps,
   Datagrid,
+  DatagridConfigurable,
   DateField,
   DateTimeInput,
   Edit,
@@ -39,13 +40,13 @@ export const RegistrationTokenList = (props: ListProps) => (
     pagination={false}
     perPage={500}
   >
-    <Datagrid rowClick="edit">
+    <DatagridConfigurable rowClick="edit">
       <TextField source="token" sortable={false} />
       <NumberField source="uses_allowed" sortable={false} />
       <NumberField source="pending" sortable={false} />
       <NumberField source="completed" sortable={false} />
       <DateField source="expiry_time" showTime options={DATE_FORMAT} sortable={false} />
-    </Datagrid>
+    </DatagridConfigurable>
   </List>
 );
 

src/resources/reports.tsx

@@ -3,6 +3,7 @@ import ViewListIcon from "@mui/icons-material/ViewList";
 import ReportIcon from "@mui/icons-material/Warning";
 import {
   Datagrid,
+  DatagridConfigurable,
   DateField,
   DeleteButton,
   List,
@@ -90,13 +91,13 @@ const ReportShowActions = () => {
 
 export const ReportList = (props: ListProps) => (
   <List {...props} pagination={<ReportPagination />} sort={{ field: "received_ts", order: "DESC" }}>
-    <Datagrid rowClick="show" bulkActionButtons={false}>
+    <DatagridConfigurable rowClick="show" bulkActionButtons={false}>
       <TextField source="id" sortable={false} />
       <DateField source="received_ts" showTime options={DATE_FORMAT} sortable={true} />
       <TextField sortable={false} source="user_id" />
       <TextField sortable={false} source="name" />
       <TextField sortable={false} source="score" />
-    </Datagrid>
+    </DatagridConfigurable>
   </List>
 );
 

src/resources/rooms.tsx

@@ -187,7 +187,7 @@ export const RoomShow = (props: ShowProps) => {
             <Datagrid style={{ width: "100%" }} bulkActionButtons={false}>
               <TextField source="type" sortable={false} />
               <DateField source="origin_server_ts" showTime options={DATE_FORMAT} sortable={false} />
-              <TextField source="content" sortable={false} />
+              <FunctionField source="content" sortable={false} render={record => `${JSON.stringify(record.content, null, 2)}`} />
               <ReferenceField source="sender" reference="users" sortable={false}>
                 <TextField source="id" />
               </ReferenceField>

src/resources/user_media_statistics.tsx

@@ -1,6 +1,7 @@
 import PermMediaIcon from "@mui/icons-material/PermMedia";
 import {
   Datagrid,
+  DatagridConfigurable,
   ExportButton,
   List,
   ListProps,
@@ -37,12 +38,12 @@ export const UserMediaStatsList = (props: ListProps) => (
     pagination={<UserMediaStatsPagination />}
     sort={{ field: "media_length", order: "DESC" }}
   >
-    <Datagrid rowClick={id => "/users/" + id + "/media"} bulkActionButtons={false}>
+    <DatagridConfigurable rowClick={id => "/users/" + id + "/media"} bulkActionButtons={false}>
       <TextField source="user_id" label="resources.users.fields.id" />
       <TextField source="displayname" label="resources.users.fields.displayname" />
       <NumberField source="media_count" />
       <NumberField source="media_length" />
-    </Datagrid>
+    </DatagridConfigurable>
   </List>
 );
 

src/resources/users.tsx

@@ -15,6 +15,7 @@ import {
   ArrayField,
   Button,
   Datagrid,
+  DatagridConfigurable,
   DateField,
   Create,
   CreateProps,
@@ -156,7 +157,7 @@ export const UserList = (props: ListProps) => (
     actions={<UserListActions />}
     pagination={<UserPagination />}
   >
-    <Datagrid
+    <DatagridConfigurable
       rowClick={(id: Identifier, resource: string) => `/${resource}/${id}`}
       bulkActionButtons={<UserBulkActionButtons />}
     >
@@ -169,7 +170,7 @@ export const UserList = (props: ListProps) => (
       <BooleanField source="locked" />
       <BooleanField source="erased" sortable={false} />
       <DateField source="creation_ts" label="resources.users.fields.creation_ts_ms" showTime options={DATE_FORMAT} />
-    </Datagrid>
+    </DatagridConfigurable>
   </List>
 );
 

src/synapse/authProvider.ts

@@ -75,7 +75,7 @@ const authProvider: AuthProvider = {
 
       response = await fetchUtils.fetchJson(login_api_url, options);
       const json = response.json;
-      storage.setItem("home_server", accessToken ? base_url : json.home_server);
+      storage.setItem("home_server", accessToken ? json.user_id.split(":")[1] : json.home_server);
       storage.setItem("user_id", json.user_id);
       storage.setItem("access_token", accessToken ? accessToken : json.access_token);
       storage.setItem("device_id", json.device_id);

src/synapse/dataProvider.ts

@@ -575,13 +575,28 @@ const baseDataProvider: SynapseDataProvider = {
 
   getMany: async (resource, params) => {
     console.log("getMany " + resource);
-    const homeserver = storage.getItem("base_url");
-    if (!homeserver || !(resource in resourceMap)) throw Error("Homerserver not set");
+    const base_url = storage.getItem("base_url");
+    const homeserver = storage.getItem("home_server");
+    if (!base_url || !(resource in resourceMap)) throw Error("base_url not set");
 
     const res = resourceMap[resource];
 
-    const endpoint_url = homeserver + res.path;
-    const responses = await Promise.all(params.ids.map(id => jsonClient(`${endpoint_url}/${encodeURIComponent(id)}`)));
+    const endpoint_url = base_url + res.path;
+    const responses = await Promise.all(params.ids.map(id => {
+      // edge case: when user is external / federated, homeserver will return error, as querying external users via
+      // /_synapse/admin/v2/users is not allowed.
+      // That leads to an issue when a user is referenced (e.g., in room state datagrid) - the user cell is just empty.
+      // To avoid that, we fake the response with one specific field (name) which is used in the datagrid.
+      if (homeserver && resource === "users") {
+        if (!(<string>id).endsWith(homeserver)) {
+          const json = {
+              name: id,
+          };
+          return Promise.resolve({ json });
+        }
+      }
+      return jsonClient(`${endpoint_url}/${encodeURIComponent(id)}`);
+    }));
     return {
       data: responses.map(({ json }) => res.map(json)),
       total: responses.length,

vite.config.ts

@@ -8,10 +8,35 @@ export default defineConfig({
   plugins: [
     react(),
     vitePluginVersionMark({
+      name: "Synapse Admin",
       command: "git describe --tags || git rev-parse --short HEAD",
-      ifMeta: true,
-      ifLog: true,
+      ifMeta: false,
+      ifLog: false,
       ifGlobal: true,
+      outputFile: (version) => ({
+        path: "manifest.json",
+        content: JSON.stringify({
+          name: "Synapse Admin",
+          version: version,
+          description: "Synapse Admin is an admin console for synapse Matrix homeserver with additional features.",
+          categories: ["productivity", "utilities"],
+          orientation: "landscape",
+          icons: [{
+            src: "favicon.ico",
+            sizes: "32x32",
+            type: "image/x-icon"
+          },{
+            src: "images/logo.webp",
+            sizes: "512x512",
+            type: "image/webp",
+            purpose: "any maskable"
+          }],
+          start_url: ".",
+          display: "standalone",
+          theme_color: "#000000",
+          background_color: "#ffffff"
+        }),
+      }),
     }),
   ],
 });