Adopt shared WebUI layout primitives

This commit is contained in:
2026-08-18 10:42:53 +02:00
parent 3fbbb84267
commit da29de71e5
@@ -3,6 +3,7 @@ import { useEffect, useMemo, useState } from "react";
import { import {
Button, Button,
DismissibleAlert, DismissibleAlert,
FormSection,
IconButton, IconButton,
i18nMessage, i18nMessage,
LoadingFrame, LoadingFrame,
@@ -208,9 +209,7 @@ export default function QuickAccessSettingsPanel({
) : null} ) : null}
<LoadingFrame loading={loading} label="i18n:govoplan-quick-access.loading"> <LoadingFrame loading={loading} label="i18n:govoplan-quick-access.loading">
<section className="quick-access-settings-section"> <FormSection className="quick-access-settings-section" title="i18n:govoplan-quick-access.categories" contentClassName="quick-access-preference-list">
<h3>i18n:govoplan-quick-access.categories</h3>
<div className="quick-access-preference-list">
{categories.map((category, index) => ( {categories.map((category, index) => (
<PreferenceRow <PreferenceRow
key={category.id} key={category.id}
@@ -228,12 +227,9 @@ export default function QuickAccessSettingsPanel({
last={index === categories.length - 1} last={index === categories.length - 1}
/> />
))} ))}
</div> </FormSection>
</section>
<section className="quick-access-settings-section"> <FormSection className="quick-access-settings-section" title="i18n:govoplan-quick-access.registered_tools" contentClassName="quick-access-preference-list">
<h3>i18n:govoplan-quick-access.registered_tools</h3>
<div className="quick-access-preference-list">
{categories.flatMap((category) => { {categories.flatMap((category) => {
const categoryTools = tools.filter((tool) => tool.category_id === category.id); const categoryTools = tools.filter((tool) => tool.category_id === category.id);
const toolIds = categoryTools.map((tool) => tool.id); const toolIds = categoryTools.map((tool) => tool.id);
@@ -257,8 +253,7 @@ export default function QuickAccessSettingsPanel({
)); ));
})} })}
{!tools.length ? <p className="quick-access-empty">i18n:govoplan-quick-access.no_registered_tools</p> : null} {!tools.length ? <p className="quick-access-empty">i18n:govoplan-quick-access.no_registered_tools</p> : null}
</div> </FormSection>
</section>
</LoadingFrame> </LoadingFrame>
</div> </div>
); );