Revert inputProps things

web/.eslintrc

@@ -20,6 +20,12 @@
     "react/destructuring-assignment": "off",
     "react/jsx-no-useless-fragment": "off",
     "react/jsx-props-no-spreading": "off",
+    "react/jsx-no-duplicate-props": [
+      "error",
+      {
+        "ignoreCase": false // For <TextField>'s [iI]nputProps
+      }
+    ],
     "react/function-component-definition": [
       "error",
       {

web/src/components/Account.jsx

@@ -994,6 +994,7 @@ const TokenDialog = (props) => {
 
 const TokenDeleteDialog = (props) => {
   const { t } = useTranslation();
+  const [error, setError] = useState("");
 
   const handleSubmit = async () => {
     try {
@@ -1003,6 +1004,8 @@ const TokenDeleteDialog = (props) => {
       console.log(`[Account] Error deleting token`, e);
       if (e instanceof UnauthorizedError) {
         session.resetAndRedirect(routes.login);
+      } else {
+        setError(e.message);
       }
     }
   };
@@ -1015,7 +1018,7 @@ const TokenDeleteDialog = (props) => {
           <Trans i18nKey="account_tokens_delete_dialog_description" />
         </DialogContentText>
       </DialogContent>
-      <DialogFooter status>
+      <DialogFooter status={error}>
         <Button onClick={props.onClose}>{t("common_cancel")}</Button>
         <Button onClick={handleSubmit} color="error">
           {t("account_tokens_delete_dialog_submit_button")}

web/src/components/App.jsx

@@ -30,14 +30,13 @@ export const AccountContext = createContext(null);
 
 const App = () => {
   const [account, setAccount] = useState(null);
-
+  const accountMemo = useMemo(() => ({ account, setAccount }), [account, setAccount]);
-  const contextValue = useMemo(() => ({ account, setAccount }), [account, setAccount]);
 
   return (
     <Suspense fallback={<Loader />}>
       <BrowserRouter>
         <ThemeProvider theme={theme}>
-          <AccountContext.Provider value={contextValue}>
+          <AccountContext.Provider value={accountMemo}>
             <CssBaseline />
             <ErrorBoundary>
               <Routes>

web/src/components/EmojiPicker.jsx

@@ -76,11 +76,11 @@ const EmojiPicker = (props) => {
                 variant="standard"
                 fullWidth
                 sx={{ marginTop: 0, marginBottom: "12px", paddingRight: 2 }}
+                inputProps={{
+                  role: "searchbox",
+                  "aria-label": t("emoji_picker_search_placeholder"),
+                }}
                 InputProps={{
-                  inputProps: {
-                    role: "searchbox",
-                    "aria-label": t("emoji_picker_search_placeholder"),
-                  },
                   endAdornment: (
                     <InputAdornment position="end" sx={{ display: search ? "" : "none" }}>
                       <IconButton size="small" onClick={handleSearchClear} edge="end" aria-label={t("emoji_picker_search_clear")}>

web/src/components/ErrorBoundary.jsx

@@ -46,9 +46,10 @@ class ErrorBoundaryImpl extends React.Component {
     // Fetch additional info and a better stack trace
     StackTrace.fromError(error).then((stack) => {
       console.error("[ErrorBoundary] Stacktrace fetched", stack);
-      const niceStack = `${error.toString()}\n${stack
+      const stackString = stack
-        .map((el) => `  at ${el.functionName} (${el.fileName}:${el.columnNumber}:${el.lineNumber})`)
+          .map((el) => `  at ${el.functionName} (${el.fileName}:${el.columnNumber}:${el.lineNumber})`)
-        .join("\n")}`;
+          .join("\n");
+      const niceStack = `${error.toString()}\n${stackString}`;
       this.setState({ niceStack });
     });
   }

web/src/components/PublishDialog.jsx

@@ -373,23 +373,23 @@ const PublishDialog = (props) => {
                   "aria-label": t("publish_dialog_priority_label"),
                 }}
               >
-                {[5, 4, 3, 2, 1].map((priorityMenuItem) => (
+                {[5, 4, 3, 2, 1].map((p) => (
                   <MenuItem
-                    key={`priorityMenuItem${priorityMenuItem}`}
+                    key={`priorityMenuItem${p}`}
-                    value={priorityMenuItem}
+                    value={p}
                     aria-label={t("notifications_priority_x", {
-                      priority: priorityMenuItem,
+                      priority: p,
                     })}
                   >
                     <div style={{ display: "flex", alignItems: "center" }}>
                       <img
-                        src={priorities[priorityMenuItem].file}
+                        src={priorities[p].file}
                         style={{ marginRight: "8px" }}
                         alt={t("notifications_priority_x", {
-                          priority: priorityMenuItem,
+                          priority: p,
                         })}
                       />
-                      <div>{priorities[priorityMenuItem].label}</div>
+                      <div>{priorities[p].label}</div>
                     </div>
                   </MenuItem>
                 ))}
@@ -823,10 +823,10 @@ const ExpandingTextField = (props) => {
         sx={{ width: `${textWidth}px`, borderBottom: "none" }}
         InputProps={{
           style: { fontSize: theme.typography[props.variant].fontSize },
-          inputProps: {
+        }}
-            style: { paddingBottom: 0, paddingTop: 0 },
+        inputProps={{
-            "aria-label": props.placeholder,
+          style: { paddingBottom: 0, paddingTop: 0 },
-          },
+          "aria-label": props.placeholder,
         }}
         disabled={props.disabled}
       />

web/src/components/SubscriptionPopup.jsx

@@ -241,6 +241,8 @@ const DisplayNameDialog = (props) => {
           inputProps={{
             maxLength: 64,
             "aria-label": t("display_name_dialog_placeholder"),
+          }}
+          InputProps={{
             endAdornment: (
               <InputAdornment position="end">
                 <IconButton onClick={() => setDisplayName("")} edge="end">