admin: parsed JSONC settings editor (takes over #7666, closes #7603)

admin/package.json

@@ -16,6 +16,7 @@
     "@radix-ui/react-switch": "^1.2.6",
     "@tanstack/react-query": "^5.100.9",
     "@tanstack/react-query-devtools": "^5.100.9",
+    "jsonc-parser": "^3.3.1",
     "openapi-fetch": "^0.17.0",
     "openapi-react-query": "^0.5.4"
   },

admin/src/App.css

@@ -0,0 +1,275 @@
+/* Raw textarea (kept dark to signal "this is code") */
+textarea.settings {
+  font-family: "Fira Code", "Cascadia Code", "Source Code Pro", monospace;
+  font-size: 14px;
+  white-space: pre;
+  overflow-wrap: normal;
+  overflow-x: auto;
+  width: 100%;
+  height: 500px;
+  padding: 15px;
+  background-color: #1e1e1e;
+  color: #d4d4d4;
+  line-height: 1.5;
+  border: 1px solid #333;
+  resize: vertical;
+}
+textarea.settings:focus {
+  outline: 2px solid #007acc;
+  outline-offset: -1px;
+}
+
+.settings-button-bar {
+  display: flex;
+  flex-shrink: 0;
+  gap: 10px;
+  margin-top: 15px;
+}
+
+.settings-links {
+  display: flex;
+  gap: 20px;
+  margin-top: 20px;
+  padding-top: 20px;
+  border-top: 1px solid #ddd;
+}
+
+/* --- mode toggle --- */
+.settings-mode-toggle {
+  display: inline-flex;
+  flex-shrink: 0;
+  border: 1px solid #ccc;
+  border-radius: 6px;
+  overflow: hidden;
+  margin-bottom: 16px;
+  background: #fff;
+}
+.settings-mode-toggle button {
+  padding: 6px 14px;
+  border: 0;
+  background: transparent;
+  color: #555;
+  font: inherit;
+  cursor: pointer;
+}
+.settings-mode-toggle button.active {
+  background: var(--etherpad-color, #0f775b);
+  color: #fff;
+}
+
+/* --- form (light, two-column) --- */
+.settings-form {
+  font-family: inherit;
+  font-size: 14px;
+  color: #333;
+}
+
+.settings-section {
+  background: #fff;
+  border: 1px solid #ddd;
+  border-radius: 6px;
+  margin-bottom: 18px;
+  overflow: hidden;
+}
+.settings-section-header {
+  padding: 14px 18px;
+  border-bottom: 1px solid #eee;
+  background: #fafafa;
+}
+.settings-section-header h2 {
+  margin: 0;
+  font-size: 15px;
+  font-weight: 600;
+  color: #222;
+  letter-spacing: 0.01em;
+  text-transform: uppercase;
+}
+.settings-section-header p {
+  margin: 4px 0 0;
+  font-size: 13px;
+  color: #666;
+  white-space: pre-wrap;
+}
+.settings-section-body {
+  padding: 4px 0;
+}
+
+/* Two-column row: label | control, with help below spanning column 2.
+ * Single-column on narrow widths. */
+.settings-row {
+  display: grid;
+  grid-template-columns: minmax(180px, 220px) minmax(0, 1fr);
+  gap: 6px 18px;
+  padding: 10px 18px;
+  align-items: center;
+  border-top: 1px solid #f4f4f4;
+}
+.settings-row:first-child {
+  border-top: 0;
+}
+.settings-row-label {
+  font-weight: 600;
+  color: #333;
+  word-break: break-word;
+}
+.settings-row-control {
+  min-width: 0;
+}
+.settings-row-help {
+  grid-column: 2;
+  margin: 2px 0 0;
+  font-size: 12.5px;
+  color: #666;
+  white-space: pre-wrap;
+  line-height: 1.4;
+}
+
+@media (max-width: 600px) {
+  .settings-row {
+    grid-template-columns: 1fr;
+  }
+  .settings-row-help {
+    grid-column: 1;
+  }
+}
+
+/* --- nested subsections (objects/arrays inside a section) --- */
+.settings-subsection {
+  grid-column: 1 / -1;
+  margin: 8px 18px;
+  border-left: 3px solid #e2e2e2;
+  padding-left: 14px;
+}
+.settings-subsection-header {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  padding: 8px 0;
+}
+.settings-subsection-title {
+  font-weight: 600;
+  color: #444;
+  font-size: 13.5px;
+  text-transform: uppercase;
+  letter-spacing: 0.01em;
+}
+.settings-subsection-help {
+  color: #777;
+  font-size: 12.5px;
+  white-space: pre-wrap;
+}
+.settings-subsection-body .settings-row {
+  padding-left: 0;
+  padding-right: 0;
+}
+
+/* --- leaf widgets (light) --- */
+.settings-widget-string,
+.settings-widget-number {
+  width: 100%;
+  background: #fff;
+  color: #222;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  padding: 6px 10px;
+  font-family: inherit;
+  font-size: inherit;
+}
+.settings-widget-string:focus,
+.settings-widget-number:focus {
+  outline: none;
+  border-color: var(--etherpad-color, #0f775b);
+  box-shadow: 0 0 0 3px rgba(15, 119, 91, 0.15);
+}
+.settings-widget-number.invalid {
+  border-color: #ce5050;
+}
+.settings-widget-null {
+  display: inline-block;
+  padding: 2px 8px;
+  border-radius: 10px;
+  background: #f0f0f0;
+  color: #888;
+  font-style: italic;
+  font-size: 12.5px;
+}
+.settings-widget-env {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  background: #f4f8ff;
+  color: #335;
+  border: 1px dashed #88a;
+  border-radius: 12px;
+  padding: 2px 10px;
+  font-size: 13px;
+  cursor: help;
+}
+.settings-widget-env-icon {
+  font-style: normal;
+  color: #557;
+}
+.settings-widget-env-name {
+  font-family: "Fira Code", monospace;
+  font-weight: 600;
+}
+.settings-widget-env code {
+  background: transparent;
+  color: #804;
+  font-family: "Fira Code", monospace;
+}
+
+/* Radix switch (boolean) */
+.settings-widget-boolean {
+  appearance: none;
+  width: 36px;
+  height: 20px;
+  border-radius: 999px;
+  background: #ccc;
+  border: 0;
+  position: relative;
+  cursor: pointer;
+  transition: background 120ms ease;
+  padding: 0;
+}
+.settings-widget-boolean[data-state="checked"] {
+  background: var(--etherpad-color, #0f775b);
+}
+.settings-widget-boolean-thumb {
+  display: block;
+  width: 16px;
+  height: 16px;
+  background: #fff;
+  border-radius: 50%;
+  transform: translateX(2px);
+  transition: transform 120ms ease;
+  box-shadow: 0 1px 2px rgba(0,0,0,0.2);
+}
+.settings-widget-boolean[data-state="checked"] .settings-widget-boolean-thumb {
+  transform: translateX(18px);
+}
+
+/* --- parse error --- */
+.settings-parse-error {
+  border: 1px solid #d99;
+  background: #fff5f5;
+  color: #842;
+  padding: 14px 18px;
+  border-radius: 6px;
+}
+.settings-parse-error-detail {
+  margin: 8px 0;
+  white-space: pre-wrap;
+  font-family: "Fira Code", monospace;
+  font-size: 12.5px;
+}
+.settings-parse-error button {
+  margin-top: 4px;
+  background: var(--etherpad-color, #0f775b);
+  color: #fff;
+  border: 0;
+  padding: 6px 14px;
+  border-radius: 4px;
+  cursor: pointer;
+  font: inherit;
+}

admin/src/App.tsx

@@ -77,8 +77,14 @@ export const App = () => {
       useStore.getState().setShowLoading(false);
     });
 
-    settingSocket.on('saveprogress', (status) => {
-      console.log(status)
+    settingSocket.on('saveprogress', (status: string, payload?: {message?: string}) => {
+      const {setToastState} = useStore.getState();
+      if (status === 'saved') {
+        setToastState({open: true, title: t('admin_settings.toast.saved'), success: true});
+      } else {
+        const detail = payload?.message ?? '';
+        setToastState({open: true, title: t('admin_settings.toast.save_failed') + (detail ? ` (${detail})` : ''), success: false});
+      }
     })
 
     return () => {

admin/src/components/IconButton.tsx

@@ -1,17 +1,14 @@
-import {FC, JSX, ReactElement} from "react";
+import {ButtonHTMLAttributes, FC, JSX, ReactElement} from "react";
 
-export type IconButtonProps = {
-  style?: React.CSSProperties,
+export type IconButtonProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'title' | 'onClick'> & {
   icon: JSX.Element,
   title: string|ReactElement,
   onClick: ()=>void,
-  className?: string,
-  disabled?: boolean
 }
 
-export const IconButton:FC<IconButtonProps> = ({icon,className,onClick,title, disabled, style})=>{
-  return <button style={style}  onClick={onClick} className={"icon-button "+ className} disabled={disabled}>
+export const IconButton: FC<IconButtonProps> = ({icon, className, onClick, title, type = 'button', ...rest}) => (
+  <button {...rest} type={type} onClick={onClick} className={"icon-button " + (className ?? "")}>
     {icon}
     <span>{title}</span>
-    </button>
-}
+  </button>
+);