web/settings: show every layer of settings objects

This commit is contained in:
Tulir Asokan 2024-11-17 17:37:43 +02:00
parent 216d16dccb
commit 1041ebc232
3 changed files with 37 additions and 5 deletions

View file

@ -3,10 +3,14 @@ div.settings-view {
display: flex;
flex-direction: column;
h2, h3 {
h2, h3, h4 {
margin: 0;
}
summary > h3, summary > h4 {
display: inline;
}
table {
text-align: left;

View file

@ -176,6 +176,34 @@ const CustomCSSInput = ({ setPref, room }: { setPref: SetPrefFunc, room: RoomSta
</div>
}
const AppliedSettingsView = ({ room }: SettingsViewProps) => {
const client = use(ClientContext)!
return <div className="applied-settings">
<h3>Raw settings data</h3>
<details>
<summary><h4>Applied settings in this room</h4></summary>
<JSONView data={room.preferences}/>
</details>
<details open>
<summary><h4>Global account settings</h4></summary>
<JSONView data={client.store.serverPreferenceCache}/>
</details>
<details open>
<summary><h4>Global local settings</h4></summary>
<JSONView data={client.store.localPreferenceCache}/>
</details>
<details open>
<summary><h4>Room account settings</h4></summary>
<JSONView data={room.serverPreferenceCache}/>
</details>
<details open>
<summary><h4>Room local settings</h4></summary>
<JSONView data={room.localPreferenceCache}/>
</details>
</div>
}
const SettingsView = ({ room }: SettingsViewProps) => {
const client = use(ClientContext)!
const setPref = useCallback((context: PreferenceContext, key: keyof Preferences, value: PreferenceValueType | undefined) => {
@ -236,7 +264,7 @@ const SettingsView = ({ room }: SettingsViewProps) => {
</tbody>
</table>
<CustomCSSInput setPref={setPref} room={room} />
<JSONView data={room.preferences} />
<AppliedSettingsView room={room} />
</>
}

View file

@ -54,9 +54,9 @@ function renderJSONValue(data: unknown, collapsed: boolean) {
}
return <ul className="json-object-children">
{entries.map(([key, value], index, arr) =>
<li key={key} className="json-object-entry">
value !== undefined ? <li key={key} className="json-object-entry">
<JSONValueWithKey data={value} objectKey={key} trailingComma={index < arr.length - 1}/>
</li>)}
</li> : null)}
</ul>
}
case "string":