Separate panel settings from services

src/App.test.tsx

@@ -149,7 +149,8 @@ describe('App login gate', () => {
     await loginIntoPanel(user);
     await user.click(screen.getByRole('button', { name: /settings/i }));
 
-    expect(screen.queryByText(/panel settings/i)).not.toBeInTheDocument();
+    expect(screen.getByRole('heading', { name: /panel settings/i })).toBeInTheDocument();
+    expect(screen.getByRole('heading', { name: /^services$/i })).toBeInTheDocument();
     expect(screen.queryByLabelText(/public host/i)).not.toBeInTheDocument();
     expect(screen.queryByLabelText(/command/i)).not.toBeInTheDocument();
     expect(screen.queryByLabelText(/protocol/i)).not.toBeInTheDocument();

src/SystemTab.tsx

@@ -73,52 +73,58 @@ export default function SystemTab({
         <section className="page-grid single-column system-grid">
           <article className="panel-card">
             <div className="card-header">
-              <h2>{text.settings.title}</h2>
-              <div className="settings-toolbar">
-                <label className="field-group compact-field">
-                  <span>{text.common.language}</span>
-                  <select
-                    value={preferences.language}
-                    onChange={(event) =>
-                      onPreferencesChange({
-                        ...preferences,
-                        language: event.target.value as PanelLanguage,
-                      })
-                    }
-                  >
-                    <option value="en">{text.common.english}</option>
-                    <option value="ru">{text.common.russian}</option>
-                  </select>
-                </label>
-                <label className="field-group compact-field">
-                  <span>{text.common.theme}</span>
-                  <select
-                    value={preferences.theme}
-                    onChange={(event) =>
-                      onPreferencesChange({
-                        ...preferences,
-                        theme: event.target.value as PanelTheme,
-                      })
-                    }
-                  >
-                    <option value="light">{getThemeLabel(preferences.language, 'light')}</option>
-                    <option value="dark">{getThemeLabel(preferences.language, 'dark')}</option>
-                    <option value="system">{getThemeLabel(preferences.language, 'system')}</option>
-                  </select>
-                </label>
-                <button
-                  type="button"
-                  className="button-secondary"
-                  onClick={() =>
-                    setDraft((current) => ({
-                      ...current,
-                      services: [...current.services, createServiceDraft(current.services)],
-                    }))
+              <h2>{text.settings.panelTitle}</h2>
+            </div>
+            <div className="settings-toolbar">
+              <label className="field-group compact-field">
+                <span>{text.common.language}</span>
+                <select
+                  value={preferences.language}
+                  onChange={(event) =>
+                    onPreferencesChange({
+                      ...preferences,
+                      language: event.target.value as PanelLanguage,
+                    })
                   }
                 >
-                  {text.common.addService}
-                </button>
-              </div>
+                  <option value="en">{text.common.english}</option>
+                  <option value="ru">{text.common.russian}</option>
+                </select>
+              </label>
+              <label className="field-group compact-field">
+                <span>{text.common.theme}</span>
+                <select
+                  value={preferences.theme}
+                  onChange={(event) =>
+                    onPreferencesChange({
+                      ...preferences,
+                      theme: event.target.value as PanelTheme,
+                    })
+                  }
+                >
+                  <option value="light">{getThemeLabel(preferences.language, 'light')}</option>
+                  <option value="dark">{getThemeLabel(preferences.language, 'dark')}</option>
+                  <option value="system">{getThemeLabel(preferences.language, 'system')}</option>
+                </select>
+              </label>
+            </div>
+          </article>
+
+          <article className="panel-card">
+            <div className="card-header">
+              <h2>{text.settings.title}</h2>
+              <button
+                type="button"
+                className="button-secondary"
+                onClick={() =>
+                  setDraft((current) => ({
+                    ...current,
+                    services: [...current.services, createServiceDraft(current.services)],
+                  }))
+                }
+              >
+                {text.common.addService}
+              </button>
             </div>
             <div className="service-editor-list">
               {draft.services.map((service, index) => (

src/lib/panelText.ts

@@ -92,6 +92,7 @@ const text = {
       deleteAction: 'Delete user',
     },
     settings: {
+      panelTitle: 'Panel settings',
       title: 'Services',
       generatedConfig: 'Generated config',
       serviceLabel: 'Service',
@@ -207,6 +208,7 @@ const text = {
       deleteAction: 'Удалить пользователя',
     },
     settings: {
+      panelTitle: 'Настройки панели',
       title: 'Сервисы',
       generatedConfig: 'Сгенерированный конфиг',
       serviceLabel: 'Сервис',