[TWIG] Restructure user settings template, making it much easier to use and extend

components/Avatar/Avatar.php

@@ -50,15 +50,16 @@ class Avatar extends Component
     /**
      * @throws \App\Util\Exception\ClientException
      */
-    public function onPopulateProfileSettingsTabs(Request $request, &$tabs): bool
+    public function onPopulateSettingsTabs(Request $request, string $section, &$tabs): bool
     {
-        // TODO avatar template shouldn't be on settings folder
+        if ($section === 'profile') {
             $tabs[] = [
                 'title'      => 'Avatar',
                 'desc'       => 'Change your avatar.',
+                'id'         => 'settings-avatar',
                 'controller' => C\Avatar::settings_avatar($request),
             ];
-
+        }
         return Event::next;
     }
 

components/Avatar/Controller/Avatar.php

@@ -127,6 +127,6 @@ class Avatar extends Controller
             }
         }
 
-        return ['_template' => 'settings/avatar.html.twig', 'avatar' => $form->createView()];
+        return ['_template' => 'avatar/settings.html.twig', 'avatar' => $form->createView()];
     }
 }

plugins/Cover/Cover.php

@@ -54,14 +54,16 @@ class Cover extends Plugin
         return Event::next;
     }
 
-    public function onPopulateProfileSettingsTabs(Request $request, &$tabs)
+    public function onPopulateSettingsTabs(Request $request, string $section, &$tabs)
     {
+        if ($section === 'profile') {
             $tabs[] = [
                 'title'      => 'Cover',
                 'desc'       => 'Change your cover.',
+                'id'         => 'settings-cover',
                 'controller' => C\Cover::coverSettings($request),
             ];
-
+        }
         return Event::next;
     }
 

plugins/EmailNotifications/EmailNotifications.php

@@ -41,9 +41,9 @@ class EmailNotifications extends Plugin
 {
     public function onAddNotificationTransport(&$form_defs): bool
     {
-        $form_defs['email']   = $form_defs['placeholder'];
+        $form_defs['Email']   = $form_defs['placeholder'];
-        $form_defs['email'][] = $form_defs['placeholder']['save']('Email', 'save_email');
+        $form_defs['Email'][] = $form_defs['placeholder']['save']('Email', 'save_email');
-        unset($form_defs['email']['post_on_status_change']);
+        unset($form_defs['Email']['post_on_status_change']);
         return Event::next;
     }
 }

plugins/Oomox/Oomox.php

@@ -28,17 +28,13 @@ use App\Core\Event;
 use App\Core\Modules\Plugin;
 use App\Core\Router\RouteLoader;
 use App\Core\Router\Router;
-use App\Entity\Actor;
 use App\Entity\LocalUser;
 use App\Util\Common;
-use App\Util\Exception\ClientException;
 use App\Util\Exception\NotFoundException;
 use App\Util\Exception\RedirectException;
 use App\Util\Exception\ServerException;
-use App\Util\Formatting;
 use Plugin\Oomox\Controller as C;
 use Symfony\Component\HttpFoundation\Request;
-use function App\Core\I18n\_m;
 
 /**
  * Profile Colour plugin main class
@@ -52,12 +48,8 @@ use function App\Core\I18n\_m;
  */
 class Oomox extends Plugin
 {
-
     /**
      * Map URLs to actions
-     *
-     * @param RouteLoader $r
-     * @return bool
      */
     public function onAddRoute(RouteLoader $r): bool
     {
@@ -66,50 +58,44 @@ class Oomox extends Plugin
         return Event::next;
     }
 
-
     /**
      * Populates an additional profile user panel section
      * Used in templates/settings/base.html.twig
      *
-     * @param Request $request
+     * @throws \App\Util\Exception\NoLoggedInUser
-     * @param array $tabs
-     * @return bool
      * @throws RedirectException
      * @throws ServerException
-     * @throws \App\Util\Exception\NoLoggedInUser
      */
-    public function onPopulateProfileSettingsTabs(Request $request, array &$tabs): bool
+    public function onPopulateSettingsTabs(Request $request, string $section, array &$tabs): bool
     {
+        if ($section === 'colours') {
             $tabs[] = [
                 'title'      => 'Light theme colours',
                 'desc'       => 'Change the theme colours.',
+                'id'         => 'settings-light-theme-colours-details',
                 'controller' => C\Oomox::oomoxSettingsLight($request),
             ];
 
             $tabs[] = [
                 'title'      => 'Dark theme colours',
                 'desc'       => 'Change the theme colours.',
+                'id'         => 'settings-dark-theme-colours-details',
                 'controller' => C\Oomox::oomoxSettingsDark($request),
             ];
-
+        }
         return Event::next;
     }
 
     /**
      * Returns Oomox cache key for the given user.
-     *
-     * @param LocalUser $user
-     * @return string
      */
-    public static function cacheKey(LocalUser $user) :string {
+    public static function cacheKey(LocalUser $user): string
+    {
         return "oomox-css-{$user->getId()}";
     }
 
     /**
      * Returns Entity\Oomox if it already exists
-     *
-     * @param LocalUser $user
-     * @return Entity\Oomox|null
      */
     public static function getEntity(LocalUser $user): ?Entity\Oomox
     {
@@ -123,14 +109,12 @@ class Oomox extends Plugin
     /**
      * Adds to array $styles the generated CSS according to user settings, if any are present.
      *
-     * @param array $styles
-     * @param string $route
      * @return bool
      */
     public function onEndShowStyles(array &$styles, string $route)
     {
         $user = Common::user();
-        if (!is_null($user) && !is_null(Cache::get(self::cacheKey($user), fn () => self::getEntity($user)))) {
+        if (!\is_null($user) && !\is_null(Cache::get(self::cacheKey($user), fn () => self::getEntity($user)))) {
             $styles[] = Router::url('oomox_css');
         }
         return Event::next;

plugins/ProfileColor/ProfileColor.php

@@ -61,15 +61,16 @@ class ProfileColor extends Plugin
      * @throws RedirectException
      * @throws ServerException
      */
-    public function onPopulateProfileSettingsTabs(Request $request, array &$tabs): bool
+    public function onPopulateSettingsTabs(Request $request, string $section, array &$tabs): bool
     {
-        // TODO avatar template shouldn't be on settings folder
+        if ($section === 'colours') {
             $tabs[] = [
-            'title'      => 'Color',
+                'title'      => 'Profile Colour',
-            'desc'       => 'Change your profile color.',
+                'desc'       => 'Change your profile colour.',
+                'id'         => 'settings-profile-colour-details',
                 'controller' => C\ProfileColor::profileColorSettings($request),
             ];
-
+        }
         return Event::next;
     }
 

plugins/XMPPNotifications/XMPPNotifications.php

@@ -41,8 +41,8 @@ class XMPPNotifications extends Plugin
 {
     public function onAddNotificationTransport(&$form_defs): bool
     {
-        $form_defs['xmpp']   = $form_defs['placeholder'];
+        $form_defs['XMPP']   = $form_defs['placeholder'];
-        $form_defs['xmpp'][] = $form_defs['placeholder']['save']('XMMP', 'save_xmpp');
+        $form_defs['XMPP'][] = $form_defs['placeholder']['save']('XMMP', 'save_xmpp');
         return Event::next;
     }
 }

src/Controller/UserPanel.php

@@ -95,10 +95,10 @@ class UserPanel extends Controller
 
         return [
             '_template'           => 'settings/base.html.twig',
-            'profile'             => $personal_form->createView(),
+            'personal_info_form'  => $personal_form->createView(),
-            'email'               => $email_form->createView(),
+            'email_form'          => $email_form->createView(),
-            'password'            => $password_form->createView(),
+            'password_form'       => $password_form->createView(),
-            'language'            => $language_form->createView(),
+            'language_form'       => $language_form->createView(),
             'tabbed_forms_notify' => $notifications_form_array,
             'open_details_query'  => $this->string('open'),
         ];
@@ -328,7 +328,10 @@ class UserPanel extends Controller
         foreach ($form_defs as $transport_name => $f) {
             unset($f['save']);
             $form                                   = Form::create($f);
-            $tabbed_forms[$transport_name] = $form;
+            $tabbed_forms[$transport_name]['title'] = $transport_name;
+            $tabbed_forms[$transport_name]['desc']  = _m('{transport} notification settings', ['transport' => $transport_name]);
+            $tabbed_forms[$transport_name]['id']    = "settings-notifications-{$transport_name}";
+            $tabbed_forms[$transport_name]['form']  = $form->createView();
 
             $form->handleRequest($request);
             if ($form->isSubmitted() && $form->isValid()) {
@@ -353,7 +356,6 @@ class UserPanel extends Controller
             }
         }
 
-        $tabbed_forms = F\map($tabbed_forms, fn ($f) => $f->createView());
         return $tabbed_forms;
     }
 

templates/settings/base.html.twig

@@ -8,8 +8,11 @@
     <link rel="stylesheet" href="{{ asset('assets/default_theme/css/pages/settings.css') }}">
 {% endblock stylesheets %}
 
-{% macro settings_details_element(title, summary, form_name, context) %}
+{% macro settings_details_element(title, summary, id, details_content, context, details_ids) %}
-    <details class="section-title-settings" {{ open_details(context.open_details_query, [ form_name ]) }} id={{ form_name ~ '-details' }}>
+    {% if details_ids is null %}
+        {% set details_ids = [id] %}
+    {% endif %}
+    <details class="section-title-settings" {{ open_details(context.open_details_query, details_ids) }} id={{ id }}>
         <summary>
             <h3>
                 {{ title | trans }}
@@ -20,87 +23,37 @@
             </em>
         </summary>
 
-
+        {% if details_content is instanceof('Twig\\Markup') %}
-        {{ form(attribute(context, form_name) | default) }}
+            {{ details_content }}
+        {% else %}
+            {{ form(details_content) }}
+        {% endif %}
     </details>
 {% endmacro settings_details_element %}
 
-{% macro settings_details_container(title, summary, tabs, context) %}
+{% macro settings_details_container(title, summary, container_id, tabs, context) %}
-    <details class="section-title-settings" {{ open_details(context.open_details_query, tabs) }} id={{ tabs[0] ~ '-details' }}>
+    {% set children_ids = [container_id] %}
-        <summary>
+    {% set details_content %}
-            <h3>
-                {{ title | trans }}
-                {{ icon('arrow-down', 'icon icon-details-open') | raw }}
-            </h3>
-            <em>
-                {{ summary | trans }}
-            </em>
-        </summary>
-
-
-        {% if title == 'Profile' %}
-            <li>
         <nav class='section-settings-nav'>
             <ul>
-                        <li>
+                {% for tab in tabs %}
-                            {{ _self.settings_details_element('Personal Info', 'Nickname, Homepage, Bio, Self Tags and more.', 'profile', context) }}
-                        </li>
-
                     <hr>
-
-                        {% for tab in context.profile_tabs %}
                     <li>
-                                <details class="section-title-settings">  {# TODO: add ID and open_details and to parent #}
+                        {% set content %}
-                                <summary>
+                        {% if tab['controller'] is defined %}
-                                    <h3>{{ tab['title'] }}{{ icon('arrow-down', 'icon icon-details-open') | raw }}</h3>
-                                    <em>{{ tab['desc'] }}</em>
-                                </summary>
-
                             {% include tab['controller']['_template'] with tab['controller'] only %}
-                                </details>
+                        {% else %}
-                            </li>
+                            {{ form(tab['form']) }}
-
-                            <hr>
-                        {% endfor %}
-                    </ul>
-                </nav>
-            </li>
-        {% elseif title == 'Email' %}
-            <li>
-                {{ form(context.email) }}
-            </li>
-        {% elseif title == 'Password' %}
-            <li>
-                {{ form(context.password) }}
-            </li>
-        {% elseif title == 'Language' %}
-            <li>
-                {{ form(context.language) }}
-            </li>
-        {% elseif title == 'Notifications' %}
-            <li>
-                <nav class='section-settings-nav'>
-                    <ul>
-                        {% for transport, form_transport in context.tabbed_forms_notify %}
-                            <li>
-                                <details class="section-title-settings">
-                                    <summary>
-                                        <h3>{{ transport }}{{ icon('arrow-down', 'icon icon-details-open') | raw }}</h3>
-                                        <em>{{ transport }}'s notification options.</em>
-                                    </summary>
-
-                                    <div id="form_{{ transport }}" class='form'>
-                                        {{ form(form_transport) }}
-                                    </div>
-                                </details>
-                            </li>
-                            <hr>
-                        {% endfor %}
-                    </ul>
-                </nav>
-            </li>
                         {% endif %}
-    </details>
+                    {% endset %}
+                    {{ _self.settings_details_element(tab['title'], tab['desc'], tab['id'] ~ '-details', content, context) }}
+                    {% set children_ids = children_ids|merge([tab['id'] ~ '-details']) %}
+                    </li>
+                {% endfor %}
+            </ul>
+        </nav>
+    {% endset %}
+    {{ _self.settings_details_element(title, summary, container_id, details_content, context, children_ids) }}
 {% endmacro settings_details_container %}
 
 {% block body %}
@@ -108,22 +61,28 @@
         <h2>Settings</h2>
         <ul>
             <li>
-                {% set profile_tabs = handle_event('PopulateProfileSettingsTabs', app.request) %}
+                {% set profile_tabs = [{'title': 'Personal Info', 'desc': 'Nickname, Homepage, Bio, Self Tags and more.', 'id': 'settings-personal-info', 'form': personal_info_form}] %}
-                {{ _self.settings_details_container('Profile', 'Personal Information, Avatar and Profile', ['profile', 'personal-info'], _context) }}
+                {% set profile_tabs = profile_tabs|merge(handle_event('PopulateSettingsTabs', app.request, 'profile')) %}
+                {{ _self.settings_details_container('Profile', 'Personal Information, Avatar and Profile', 'settings-profile-details', profile_tabs, _context) }}
             </li>
             <hr>
             <li>
-                {{ _self.settings_details_container('Email', 'Set incoming and outgoing email settings', ['email'], _context) }}
+                {{ _self.settings_details_element('Email', 'Set incoming and outgoing email settings', 'settings-email-details', email_form, _context) }}
             </li>
             <li>
-                {{ _self.settings_details_container('Password', 'Change current password', ['password'], _context) }}
+                {{ _self.settings_details_element('Password', 'Change current password', 'settings-password-details', password_form, _context) }}
             </li>
             <li>
-                {{ _self.settings_details_container('Language', 'Select and set language preferences', ['language'], _context) }}
+                {{ _self.settings_details_element('Language', 'Select and set language preferences', 'settings-language-details', language_form, _context) }}
             </li>
             <hr>
             <li>
-                {{ _self.settings_details_container('Notifications', 'Enable/disable notifications (Email, XMPP, Replies...)', ['notifications'], _context) }}
+                {% set colour_tabs = handle_event('PopulateSettingsTabs', app.request, 'colours') %}
+                {{ _self.settings_details_container('Colours', 'Customize your interface colours', 'settings-colour-details', colour_tabs, _context) }}
+            </li>
+            <hr>
+            <li>
+                {{ _self.settings_details_container('Notifications', 'Enable/disable notifications (Email, XMPP, Replies...)', 'notifications', tabbed_forms_notify, _context) }}
             </li>
         </ul>
     </nav>