Make profile editing collapsible

app/templates/profile.html

@@ -42,7 +42,12 @@
         .patch-dialog-reason { padding-top:10px; border-top:1px solid var(--border); color:var(--muted); }
         .patch-dialog-preview { max-width:150px; max-height:150px; object-fit:contain; }
         .patch-dialog-close { float:right; margin:0; }
-        .profile-edit { margin-top: 24px; }
+        .profile-edit { margin-top: 24px; padding: 0; overflow: hidden; }
+        .profile-edit-summary { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:16px 22px; color:#fca5a5; cursor:pointer; list-style:none; font-size:1.15rem; font-weight:700; }
+        .profile-edit-summary::-webkit-details-marker { display:none; }
+        .profile-edit-summary::after { content:"+"; color:var(--muted); font-size:1.4rem; line-height:1; }
+        .profile-edit[open] > .profile-edit-summary::after { content:"−"; }
+        .profile-edit-content { padding:0 22px 22px; }
         .account-actions { display:flex; align-items:flex-start; justify-content:space-between; gap:20px; margin-top:22px; padding-top:16px; border-top:1px solid var(--border); }
         .account-delete { flex:1; color:var(--muted); }
         .account-delete summary { color:#fca5a5; cursor:pointer; font-weight:700; }
@@ -228,8 +233,9 @@
         </section>
     {% endif %}
     {% if is_own_profile %}
-        <section class="profile-edit">
+        <details class="profile-edit"{% if form_error or form_success %} open{% endif %}>
-            <h2>{{ _('Profil bearbeiten') }}</h2>
+            <summary class="profile-edit-summary">{{ _('Profil bearbeiten') }}</summary>
+            <div class="profile-edit-content">
             {% if form_error %}<p class="profile-error" role="alert">{{ form_error | t }}</p>{% endif %}
             {% if form_success %}<p class="profile-success" role="status">{{ form_success }}</p>{% endif %}
             <form method="post" action="/profile" enctype="multipart/form-data" id="profile-form">
@@ -271,7 +277,8 @@
                 </details>
                 <p class="data-export"><a href="/profile/export">{{ _('Meine gespeicherten Daten exportieren (JSON)') }}</a></p>
             </div>
-        </section>
+            </div>
+        </details>
     {% endif %}
 </main>
 <script>

app/tests/test_i18n.py

@@ -148,6 +148,11 @@ class TranslationTests(unittest.TestCase):
                         self.assertIn('This patch recognizes you as part of the first crew' if language == 'en' else 'Dieser Patch würdigt dich als Teil der ersten Crew', page)
                         self.assertIn('Reason:' if language == 'en' else 'Grund:', page)
                         self.assertEqual(page.count('class="patch-button"'), len(profile_badges))
+                        self.assertIn('<details class="profile-edit"', page)
+                        self.assertIn('<summary class="profile-edit-summary">' + ('Edit profile' if language == 'en' else 'Profil bearbeiten') + '</summary>', page)
+                        self.assertLess(page.index('<details class="profile-edit"'), page.index('id="profile-form"'))
+                        expanded_profile = env.get_template('profile.html').render(**context, form_error='validation error', form_success=None)
+                        self.assertIn('<details class="profile-edit" open>', expanded_profile)
                     if os.environ.get('I18N_RENDER_DIR'):
                         target = Path(os.environ['I18N_RENDER_DIR'], language)
                         target.mkdir(parents=True, exist_ok=True)