[SETTINGS][ROUTES][CONTROLLER] Settings overhaul, refactoring to accommodate new global settings view. WIP, component settings aren't shown at the moment.

Signed-off-by: Eliseu Amaro <mail@eliseuama.ro>

plugins/ImageEncoder/templates/imageEncoder/imageEncoderView.html.twig

@@ -1,8 +1,7 @@
-<div>
 <figure>
-        <img class="u-photo" src="{{ path('attachment_thumbnail', thumbnail_parameters) }}" alt="{{ attachment.getTitle() }}">
+    <img class="u-photo" src="{{ path('attachment_thumbnail', thumbnail_parameters) }}"
+         alt="{{ attachment.getTitle() }}">
     <figcaption><a
                 href="{{ path('attachment_show', {'id': attachment.getId()}) }}">{{ attachment.getTitle() }}</a>
     </figcaption>
 </figure>
-</div>

public/assets/css/base.css

@@ -274,26 +274,23 @@ html {
 .note-attachments {
     display: flex;
 }
-.note-attachments > div {
-    margin: var(--small-size) 0 0 0;
-    border-radius: var(--unit-size);
-    background-color: var(--translucent);
-}
 
-.note-attachments > div figure {
+.note-attachments > figure {
     display: flex;
     flex-direction: column;
     margin: 0;
+    border-radius: var(--unit-size);
+    background-color: var(--translucent);
     padding: var(--small-size);
 }
 
-.note-attachments > div figure figcaption {
+.note-attachments > figure figcaption {
     display: flex;
     padding-top: var(--small-size);
 }
 
-.note-attachments > div figure img,
+.note-attachments > figure img,
-.note-attachments > div figure video {
+.note-attachments > figure video {
     width: 100%;
     height: auto;
 }

public/assets/css/settings/settings.css

@@ -10,43 +10,61 @@
     background-blend-mode: multiply;
 }
 
+.main-nav h1 {
+    margin-bottom: var(--unit-size);
+}
+
+.main-nav hr {
+    all: unset;
+    display: block;
+    height: 2px;
+    background-image: linear-gradient(to right, var(--translucent-light), transparent 90%);
+    margin-top: var(--unit-size);
+    margin-bottom: var(--unit-size);
+}
+
 .main-nav ul {
-    margin-top: var(--main-size);
+    background-color: var(--translucent);
+    border: 2px solid var(--bg2);
+    border-radius: var(--unit-size);
+    padding: var(--unit-size);
+    box-sizing: border-box;
 }
 
 .main-nav ul li {
     font-size: var(--medium-size);
-
     border-radius: var(--unit-size);
     box-sizing: border-box;
 
     padding: var(--unit-size);
-    margin-bottom: var(--small-size);
-
-    background-color: var(--translucent);
 }
 
 .form {
+    display: flex;
     font-size: var(--main-size);
     border-radius: var(--unit-size);
     padding: var(--unit-size);
     box-sizing: border-box;
+}
 
-    background-image: radial-gradient(ellipse at 10% 10%, var(--bg3), var(--accent-blue)),
+.form .separator {
-    url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgBAMAAACBVGfHAAAAElBMVEUAAACUkpSEhoSMioyMjoyEgoRr6djFAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAU1JREFUKJEVUcl1xTAIpAVLSgECXIAYUoCAX0Bi919LlCPLm5ValiOUUe2+ZRVFuYpKXFsUX9aIp0V6GtC8VRhNL0X2fikvswhKrNDhes7pbpPkufFAtI0B76LEjfc2bgdHDk6RX4A/sjt6LCylfoYpNYYJx/9COhIugsjluzN9VGZ/Hnl51jIH2ba+Ywsy2RJCFdoDe8Obw61TXGAv+ewExMRJs7gd7YcimPuk42uMqY2VJ1fK+bDL32rb7kwok/la/u7Mrz7Xf0DTssSP2Btp1ZS0zw35tM/SsJKgWNLcRh+/th1QqntwtM3Tx0LNosoBYbM3qjJFiMeLsMH2i5BcQdU3n9sJHOE1Hoqn1GA/bm4s0YkVB/y4r0PbltF32FpljXmdlOOwbDvFWkoDYLppSG4pnM6UxX3Src1lhXeU36FOu3o+R2vNaHME/wESUl9/3zMniwAAAABJRU5ErkJggg==);
+    all: unset;
-    background-blend-mode: multiply;
+    display: flex;
+    width: 2px;
+    background-image: linear-gradient(to bottom, var(--accent-blue), transparent 90%);
+    margin-right: var(--unit-size);
+}
+
+.form form {
+    width: 100%;
 }
 
 .form #save {
-    margin-top: var(--main-size);
-
     display: flex;
     flex-direction: column;
     font-size: var(--medium-size);
-    border-radius: var(--unit-size);
     padding: var(--unit-size);
     box-sizing: border-box;
-    background-color: var(--translucent);
 }
 
 .form #save div {
@@ -68,6 +86,7 @@
     border-radius: var(--unit-size);
     padding: var(--unit-size);
     box-sizing: border-box;
+    border: 2px solid var(--bg2);
     background-color: var(--translucent);
 }
 
@@ -87,16 +106,17 @@
     fill: var(--white);
 }
 
+.section-title-settings section {
+    margin-top: var(--unit-size);
+}
+
 .section-title-settings summary:focus,
 .section-title-settings summary:hover {
     border-radius: var(--unit-size) !important;
     background: var(--white) !important;
     color: var(--bg1) !important;
-    transition: var(--cubic-transition);
-}
-
-.section-title-settings summary:focus {
     padding: var(--unit-size) var(--small-size) var(--unit-size) var(--small-size) !important;
+    transition: var(--cubic-transition);
 }
 
 .section-title-settings summary:focus .icon-details-open,
@@ -112,7 +132,6 @@
 }
 
 .section-title-settings[open] .set-nav li:first-of-type {
-    margin-top: var(--unit-size);
 }
 
 .section-title-settings[open] .set-nav li:last-of-type {

src/Controller/UserPanel.php

@@ -57,6 +57,28 @@ use Symfony\Component\HttpFoundation\Request;
 
 class UserPanel extends AbstractController
 {
+    /**
+     * Return main settings page forms
+     *
+     * @param Request $request
+     *
+     * @throws Exception
+     *
+     * @return array
+     */
+    public function all_settings(Request $request)
+    {
+        $personal_form      = $this->personal_info($request);
+        $account_form       = $this->account($request);
+        $notifications_form = $this->notifications($request);
+
+        return ['_template'       => 'settings/base.html.twig',
+            'prof'                => $personal_form->createView(),
+            'acc'                 => $account_form->createView(),
+            'tabbed_forms_notify' => $notifications_form,
+        ];
+    }
+
     /**
      * Local user personal information panel
      */
@@ -74,10 +96,13 @@ class UserPanel extends AbstractController
             ['self_tags', TextType::class, ['label' => _m('Self Tags'), 'required' => false, 'transformer' => ArrayTransformer::class, 'help' => _m('Tags for yourself (letters, numbers, -, ., and _), comma- or space-separated.')]],
             ['save', SubmitType::class, ['label' => _m('Save')]],
         ];
-        $extra_step = function ($data, $extra_args) use ($user) { $user->setNickname($data['nickname']); };
+        $extra_step = function ($data, $extra_args) use ($user) {
+            $user->setNickname($data['nickname']);
+        };
         $form = Form::handle($form_definition, $request, $user, $extra, $extra_step, [['self_tags' => $extra['self_tags']]]);
 
-        return ['_template' => 'settings/profile.html.twig', 'prof' => $form->createView()];
+        return $form;
+        //return ['_template' => 'settings/profile.html.twig', 'prof' => $form->createView()];
     }
 
     /**
@@ -98,7 +123,8 @@ class UserPanel extends AbstractController
 
         $form = Form::handle($form_definition, $request, $user);
 
-        return ['_template' => 'settings/account.html.twig', 'acc' => $form->createView()];
+        return $form;
+        //return ['_template' => 'settings/account.html.twig', 'acc' => $form->createView()];
     }
 
     /**
@@ -157,10 +183,13 @@ class UserPanel extends AbstractController
             $tabbed_forms[$transport_name] = Form::create($f);
         }
 
-        $tabbed_forms = F\map($tabbed_forms, function ($f) { return $f->createView(); });
+        $tabbed_forms = F\map($tabbed_forms, function ($f) {
-        return [
+            return $f->createView();
+        });
+        return $tabbed_forms;
+        /*return [
             '_template'    => 'settings/notifications.html.twig',
             'tabbed_forms' => $tabbed_forms,
-        ];
+        ];*/
     }
 }

src/Routes/Main.php

@@ -65,9 +65,10 @@ abstract class Main
         }
 
         // Settings pages
-        $r->connect('settings', '/settings', RedirectController::class, ['defaults' => ['route' => 'settings_personal_info']]);
+        //$r->connect('settings', '/settings', RedirectController::class, ['defaults' => ['route' => 'settings']]);
-        foreach (['personal_info', 'notifications', 'account'] as $s) {
+        $r->connect('settings', '/settings/', [C\UserPanel::class, 'all_settings']);
-            $r->connect('settings_' . $s, '/settings/' . $s, [C\UserPanel::class, $s]);
+        /*foreach (['personal_info', 'notifications', 'account'] as $s) {
-        }
+            $r->connect('settings', '/settings/', [C\UserPanel::class, $s]);
+        }*/
     }
 }

templates/actor/actor.html.twig

@@ -1,31 +0,0 @@
-<div class="actor">
-    <div class="actor-content">
-        <div class="actor-info">
-            {% set nickname = actor.getNickname() %}
-            <div class="actor-avatar">
-                <img class="icon icon-avatar" src="{{ actor.getAvatarUrl() }}" alt="{{ nickname }}'s avatar">
-            </div>
-            <div class="actor-nickname-and-tags">
-                <b id="nick">{{ nickname }}</b>
-                {% set actor_tags = actor.getSelfTags() %}
-                <div class="tags">
-                    {% if actor_tags %}
-                        {% for tag in actor_tags %}
-                            <a href='#'><i> #{{ tag }} </i></a>
-                        {% endfor %}
-                    {% else %}
-                        <i> {{ '(No tags)' | trans }} </i>
-                    {% endif %}
-                </div>
-            </div>
-        </div>
-        {% set actor_bio = actor.getBio() %}
-        <div class="actor-bio">
-            {% if actor_bio %}
-                <p>{{ actor_bio }}</p>
-            {% else %}
-                <p>{{ '(No bio)' | trans }}</p>
-            {% endif %}
-        </div>
-    </div>
-</div>

templates/attachments/show.html.twig

@@ -12,10 +12,7 @@
 
 {% block body %}
     <div class="content">
-        <div style="display: block">
-            <p> {{ title | escape }} </p>
         <a href="{{ download }}"> {{ 'Download link' | trans }}</a>
         {% include '/attachments/view.html.twig' with {'attachment': attachment} only %}
     </div>
-    </div>
 {% endblock body %}

templates/network/actors.html.twig

@@ -1,117 +0,0 @@
-{% extends 'stdgrid.html.twig' %}
-
-{% block meta %}
-    {{ parent() }}
-{% endblock %}
-
-{% block title %}Actors{% endblock %}
-
-{% block stylesheets %}
-    {{ parent() }}
-    <link rel='stylesheet' type='text/css' href="{{ asset('assets/css/network/public.css') }}"
-          media="screen and (min-width: 1300px)">
-    <link rel='stylesheet' type='text/css' href="{{ asset('assets/css/network/public_mid.css') }}"
-          media="screen and (max-width: 1300px)">
-    <link rel='stylesheet' type='text/css' href="{{ asset('assets/css/network/public_small.css') }}"
-          media="screen and (max-width: 750px)">
-{% endblock %}
-
-{% block header %}
-    {{ parent() }}
-{% endblock %}
-
-{% block left %}
-    {{ parent() }}
-{% endblock %}
-
-{% block body %}
-    <div class="content">
-        {% if post_form is defined %}
-            {{ form_start(post_form) }}
-            <div class="create-notice">
-                <div class="target">
-                    <div class="target-top">
-                        {{ form_label(post_form.to) }}
-                    </div>
-                    <div class="target-bot">
-                        {{ form_widget(post_form.to) }}
-                    </div>
-                </div>
-                <div class="create-right">
-                    <div class="create-top-right">
-                        <div class="scope">
-                            {{ form_row(post_form.visibility) }}
-                        </div>
-                        <div class="tabs">
-                            {% for tab in tabs %}
-                                <a href={{ path(tab['href']) }}>{{ tab['title'] }}</a>
-                            {% endfor %}
-                        </div>
-                    </div>
-                    <div class="input-wrapper">
-                        <div class="content-input">
-                            {{ form_row(post_form.content) }}
-                        </div>
-                    </div>
-                    <div class="notice-options">
-                        <div class="attachments">
-                            {{ form_widget(post_form.attachments) }}
-                            <label for="{{ post_form.attachments.vars.id }}">
-                                {{ icon('attach', 'icon icon-attach') | raw }}
-                            </label>
-                        </div>
-                        <div class="post">
-                            {{ form_row(post_form.post) }}
-                        </div>
-                    </div>
-                </div>
-            </div>
-            {{ form_end(post_form) }}
-        {% endif %}
-        <div class="main">
-            <nav class='main-nav'>
-                <ul>
-                    <li>
-                        <a href="{{ path('main_public') }}"
-                           class='hover-effect {{ active('main_public', 'main_all', "home_all") }}'>Timeline</a>
-                    </li>
-                </ul>
-            </nav>
-            <div class="nav-content">
-                <nav class='main-nav'>
-                    <ul>
-                        <li>
-                            <a href="{{ path('main_public') }}"
-                               class='hover-effect {{ active('main_public') }}'>Public</a>
-                        </li>
-                        {% if user_nickname is defined %}
-                            <li>
-                                <a href="{{ path("home_all", {'nickname' : user_nickname}) }}"
-                                   class='hover-effect {{ active("home_all") }}'>Home</a>
-                            </li>
-                        {% endif %}
-                        <li>
-                            <a href="{{ path('main_all') }}" class='hover-effect {{ active('main_all') }}'>Network</a>
-                        </li>
-                        <li>
-                            <a href="{{ path('actors') }}" class='hover-effect {{ active('actors') }}'>Actors</a>
-                        </li>
-                    </ul>
-                </nav>
-                <div class="timeline">
-                    <div class="actors">
-                        {% if actors is defined and actors is not empty %}
-                            {% for actor in actors %}
-                                {% include '/actor/actor.html.twig' with {'actor': actor, 'have_user': have_user} only %}
-                            {% endfor %}
-                        {% else %}
-                            <h1>{% trans %}No actors here.{% endtrans %}</h1>
-                        {% endif %}
-                    </div>
-                </div>
-            </div>
-        </div>
-    </div>
-{% endblock body %}
-
-{% block javascripts %}{% endblock %}

templates/network/public.html.twig

@@ -1,9 +1,5 @@
 {% extends 'stdgrid.html.twig' %}
 
-{% block meta %}
-    {{ parent() }}
-{% endblock %}
-
 {% block title %}Welcome!{% endblock %}
 
 {% block stylesheets %}
@@ -11,14 +7,6 @@
     <link rel='stylesheet' type='text/css' href="{{ asset('assets/css/network/public.css') }}">
 {% endblock %}
 
-{% block header %}
-    {{ parent() }}
-{% endblock %}
-
-{% block left %}
-    {{ parent() }}
-{% endblock %}
-
 {% block body %}
 
     <div class="content">

templates/settings/account.html.twig

@@ -1,12 +1,6 @@
-{% extends 'settings/base.html.twig' %}
+{% block form_account %}
-
-{% block title %}Account Settings{% endblock %}
-
-{% block page_name %}Account{% endblock %}
-
-{% block form %}
     <div class='form'>
-        <h1>Settings / Account</h1>
+        <div class="separator"></div>
         {{ form(acc) }}
     </div>
-{% endblock form %}
+{% endblock %}

templates/settings/account/bak.html.twig

@@ -1,53 +0,0 @@
-{% extends 'base.html.twig' %}
-{% block stylesheets %}
-    {{ parent() }}
-    <link rel='stylesheet' type='text/css' href="{{ asset('assets/css/settings/settings.css') }}"
-          media="screen and (min-width: 1300px)">
-    <link rel='stylesheet' type='text/css' href="{{ asset('assets/css/settings/settings_mid.css') }}"
-          media="screen and (max-width: 1300px)">
-    <link rel='stylesheet' type='text/css' href="{{ asset('assets/css/settings/settings_small.css') }}"
-          media="screen and (max-width: 750px)">
-{% endblock %}
-
-{% block nav %}
-    <nav class='set-nav'>
-        <ul>
-            <li>
-                <a href="{{ path('settings_profile') }}"
-                   class='hover-effect {% if app.request.attributes.get('_route') starts with 'settings_' %}active{% endif %}'>Settings</a>
-            </li>
-            <li>
-                <a href="{{ path('account_email') }}"
-                   class='hover-effect {% if app.request.attributes.get('_route') starts with 'account_' %}active{% endif %}'>Account</a>
-            </li>
-            <li>
-                <a href="{{ path('doc_tags') }}"
-                   class='hover-effect {% if app.request.attributes.get('_route') starts with 'doc_tags' %}active{% endif %}'>Misc</a>
-            </li>
-        </ul>
-    </nav>
-
-    <nav class='set-nav2'>
-        <ul>
-            <li>
-                <a href="{{ path('account_email') }}"
-                   class='hover-effect {% if app.request.attributes.get('_route') starts with 'account_email' %}active{% endif %}'>Email</a>
-            </li>
-            <li>
-                <a href="{{ path('account_pass') }}"
-                   class='hover-effect {% if app.request.attributes.get('_route') starts with 'account_pass' %}active{% endif %}'>Password</a>
-            </li>
-            <li>
-                <a href="{{ path('account_bak') }}"
-                   class='hover-effect {% if app.request.attributes.get('_route') starts with 'account_bak' %}active{% endif %}'>Backup
-                    and Restore</a>
-            </li>
-        </ul>
-    </nav>
-{% endblock %}
-
-{% block body %}
-    <div class="content">
-        {{ form(form) }}
-    </div>
-{% endblock %}

templates/settings/account/email.html.twig

@@ -1,53 +0,0 @@
-{% extends 'base.html.twig' %}
-{% block stylesheets %}
-    {{ parent() }}
-    <link rel='stylesheet' type='text/css' href="{{ asset('assets/css/settings/settings.css') }}"
-          media="screen and (min-width: 1300px)">
-    <link rel='stylesheet' type='text/css' href="{{ asset('assets/css/settings/settings_mid.css') }}"
-          media="screen and (max-width: 1300px)">
-    <link rel='stylesheet' type='text/css' href="{{ asset('assets/css/settings/settings_small.css') }}"
-          media="screen and (max-width: 750px)">
-{% endblock %}
-
-{% block nav %}
-    <nav class='set-nav'>
-        <ul>
-            <li>
-                <a href="{{ path('settings_profile') }}"
-                   class='hover-effect {% if app.request.attributes.get('_route') starts with 'settings_' %}active{% endif %}'>Settings</a>
-            </li>
-            <li>
-                <a href="{{ path('account_email') }}"
-                   class='hover-effect {% if app.request.attributes.get('_route') starts with 'account_' %}active{% endif %}'>Account</a>
-            </li>
-            <li>
-                <a href="{{ path('doc_tags') }}"
-                   class='hover-effect {% if app.request.attributes.get('_route') starts with 'doc_tags' %}active{% endif %}'>Misc</a>
-            </li>
-        </ul>
-    </nav>
-
-    <nav class='set-nav2'>
-        <ul>
-            <li>
-                <a href="{{ path('account_email') }}"
-                   class='hover-effect {% if app.request.attributes.get('_route') starts with 'account_email' %}active{% endif %}'>Email</a>
-            </li>
-            <li>
-                <a href="{{ path('account_pass') }}"
-                   class='hover-effect {% if app.request.attributes.get('_route') starts with 'account_pass' %}active{% endif %}'>Password</a>
-            </li>
-            <li>
-                <a href="{{ path('account_bak') }}"
-                   class='hover-effect {% if app.request.attributes.get('_route') starts with 'account_bak' %}active{% endif %}'>Backup
-                    and Restore</a>
-            </li>
-        </ul>
-    </nav>
-{% endblock %}
-
-{% block body %}
-    <div class="content">
-        {{ form(form) }}
-    </div>
-{% endblock %}

templates/settings/account/pass.html.twig

@@ -1,53 +0,0 @@
-{% extends 'base.html.twig' %}
-{% block stylesheets %}
-    {{ parent() }}
-    <link rel='stylesheet' type='text/css' href="{{ asset('assets/css/settings/settings.css') }}"
-          media="screen and (min-width: 1300px)">
-    <link rel='stylesheet' type='text/css' href="{{ asset('assets/css/settings/settings_mid.css') }}"
-          media="screen and (max-width: 1300px)">
-    <link rel='stylesheet' type='text/css' href="{{ asset('assets/css/settings/settings_small.css') }}"
-          media="screen and (max-width: 750px)">
-{% endblock %}
-
-{% block nav %}
-    <nav class='set-nav'>
-        <ul>
-            <li>
-                <a href="{{ path('settings_profile') }}"
-                   class='hover-effect {% if app.request.attributes.get('_route') starts with 'settings_' %}active{% endif %}'>Settings</a>
-            </li>
-            <li>
-                <a href="{{ path('account_email') }}"
-                   class='hover-effect {% if app.request.attributes.get('_route') starts with 'account_' %}active{% endif %}'>Account</a>
-            </li>
-            <li>
-                <a href="{{ path('doc_tags') }}"
-                   class='hover-effect {% if app.request.attributes.get('_route') starts with 'doc_tags' %}active{% endif %}'>Misc</a>
-            </li>
-        </ul>
-    </nav>
-
-    <nav class='set-nav2'>
-        <ul>
-            <li>
-                <a href="{{ path('account_email') }}"
-                   class='hover-effect {% if app.request.attributes.get('_route') starts with 'account_email' %}active{% endif %}'>Email</a>
-            </li>
-            <li>
-                <a href="{{ path('account_pass') }}"
-                   class='hover-effect {% if app.request.attributes.get('_route') starts with 'account_pass' %}active{% endif %}'>Password</a>
-            </li>
-            <li>
-                <a href="{{ path('account_bak') }}"
-                   class='hover-effect {% if app.request.attributes.get('_route') starts with 'account_bak' %}active{% endif %}'>Backup
-                    and Restore</a>
-            </li>
-        </ul>
-    </nav>
-{% endblock %}
-
-{% block body %}
-    <div class="content">
-        {{ form(form) }}
-    </div>
-{% endblock %}

templates/settings/base.html.twig

@@ -1,4 +1,4 @@
-{% extends 'stdgrid.html.twig' %}
+{% extends '/stdgrid.html.twig' %}
 
 {% block meta %}
     {{ parent() }}
@@ -18,6 +18,7 @@
 
 {% block body %}
     <div class="content">
+
         <nav class='main-nav'>
             <h1>Settings</h1>
             <ul>
@@ -33,9 +34,22 @@
                             <nav class='set-nav'>
                                 <ul>
                                     <li>
-                                        <a href="{{ path('settings_personal_info') }}"
+                                        <details class="section-title-settings">
-                                           class='hover-effect {{ active('settings_personal_info') }}'>Personal Info</a>
+                                            <summary>
+                                                <h1>Personal
+                                                    Info{{ icon('arrow-down', 'icon icon-details-open') | raw }}</h1>
+
+                                                <em>Nickname, Homepage, Bio, Self Tags and more.</em>
+                                            </summary>
+
+                                            {% block form_profile %}
+                                                {% include '/settings/profile.html.twig' %}
+                                            {% endblock %}
+                                        </details>
                                     </li>
+
+                                    <hr>
+
                                     <li>
                                         <a href="{{ path('settings_avatar') }}"
                                            class='hover-effect {{ active('settings_avatar') }}'>Avatar</a>
@@ -50,50 +64,43 @@
                             </nav>
                         </section>
                     </details>
-                    {# <a href="{{ path('settings_personal_info') }}" #}
-                    {# class='hover-effect {{ active('settings_personal_info', 'settings_avatar', 'settings_profile_') }}'>Profile</a> #}
                 </li>
 
-                <li>
-                    <details class="section-title-settings">
-                        <summary>
-                            <a href="{{ path('settings_account') }}"
-                               class='hover-effect {{ active('settings_account') }}'>
-                                <h1>Account</h1>
-                                <em>Email, Password and Language</em>
-                            </a>
-                        </summary>
-
-                        <section>
-
-                        </section>
-                    </details>
-                </li>
-
-                <li>
-                    <details class="section-title-settings">
-                        <summary>
-                            <a href="{{ path('settings_notifications') }}"
-                               class='hover-effect {{ active('settings_notifications') }}'>
-                                <h1>Notifications</h1>
-                                <em>Enable/disable notifications (Email, XMPP, Replies...)</em>
-                            </a>
-                        </summary>
-
-                        <section>
-
-                        </section>
-                    </details>
-                    {# <a href="{{ path('settings_notifications') }}"
-                       class='hover-effect {{ active('settings_notifications') }}'>Notifications</a> #}
-                </li>
-            </ul>
-        </nav>
-
                 <hr>
 
-        {% block form %}
+                <li>
+                    <details class="section-title-settings">
+                        <summary>
+                            <h1>Account{{ icon('arrow-down', 'icon icon-details-open') | raw }}</h1>
+                            <em>Email, Password and Language</em>
+                        </summary>
+
+                        <section>
+                            {% block form_account %}
+                                {% include '/settings/account.html.twig' %}
                             {% endblock %}
+                        </section>
+                    </details>
+                </li>
+
+                <hr>
+
+                <li>
+                    <details class="section-title-settings">
+                        <summary>
+                            <h1>Notifications{{ icon('arrow-down', 'icon icon-details-open') | raw }}</h1>
+                            <em>Enable/disable notifications (Email, XMPP, Replies...)</em>
+                        </summary>
+
+                        <section>
+                            {% block form_notify %}
+                                {% include '/settings/notifications.html.twig' %}
+                            {% endblock %}
+                        </section>
+                    </details>
+                </li>
+            </ul>
+        </nav>
     </div>
 {% endblock body %}
 

templates/settings/notifications.html.twig

@@ -1,26 +1,17 @@
-{% extends 'settings/base.html.twig' %}
+{% block form_notify %}
-
-{% block title %}Notification Settings{% endblock %}
-
-{% block stylesheets %}
-    {{ parent() }}
-{% endblock %}
-
-{% block form %}
     <div class='form'>
-        <h1>Settings / Notifications </h1>
+        <div class="separator"></div>
-
         <ul>
-            {% for transport, form in tabbed_forms %}
+            {% for transport, form_transport in tabbed_forms_notify %}
                 <input type="radio" id="toggle-{{ transport }}" name="tabs"
                        value="toggle-{{ transport }}" {% if transport == "email" %} checked {% endif %}>
                 <label for="toggle-{{ transport }}" id='tabs'>
                     {{ transport }}
                 </label>
                 <div id="form_{{ transport }}" class='form'>
-                    {{ form(form) }}
+                    {{ form(form_transport) }}
                 </div>
             {% endfor %}
         </ul>
     </div>
-{% endblock form %}
+{% endblock %}

templates/settings/profile.html.twig

@@ -1,12 +1,6 @@
-{% extends 'settings/base.html.twig' %}
+{% block form_profile %}
-
-{% block title %}Profile Settings{% endblock %}
-
-{% block form %}
     <div class='form'>
-        <h1>Settings / Profile</h1>
+        <div class="separator"></div>
-
         {{ form(prof) }}
     </div>
-{% endblock form %}
+{% endblock %}
-

templates/sidepanel/left/left.html.twig

@@ -4,12 +4,12 @@
         {% if app.user %}
             <section class='profile'>
                 <section id="profile-links">
-                    <a id="user-avatar" href="{{ path('settings_avatar') }}">
+                    <a id="user-avatar" href="{{ path('settings') }}">
                         <img src='{{ user_avatar }}' alt="Your avatar." class="icon icon-avatar">
                     </a>
 
                     <span id="user-info">
-                        <a id="user-nick" href="{{ path('settings_personal_info') }}">
+                        <a id="user-nick" href="{{ path('settings') }}">
                             <h2>{{ user_nickname }}</h2>
                         </a>
                         <div id="user-tags">
@@ -41,7 +41,7 @@
                 {% for link in handle_event('InsertLeftPanelLink', user_nickname) %}
                     {{ link | raw }}
                 {% endfor %}
-                <a href="{{ path('settings_personal_info') }}"
+                <a href="{{ path('settings') }}"
                    class='hover-effect {{ active('settings_') }}'>Settings</a>
                 <a href='{{ path('logout') }}'>Logout</a>
             </nav>