Improve notification profile form design

[Simrayz]

Scope and purpose

Resolves issue #1796, based on PR #1797 and PR #1799

This pull request

Reworks notification profile forms to match the accordion card pattern from #1794.

• Replace flat list of pre-rendered forms with collapsible accordion cards (lazy-loaded on open)
• Use Choices.js <select multiple> for filters and destinations instead of custom DropdownMultiSelect
• Rearrange form layout: name + actions inline at top, 2-column grid for remaining fields
• Collapsed "preview" card gets updated when form is saved, so the collapsed card always shows the latest state.

Screenshots

Contributor Checklist

• Added a changelog fragment for towncrier
• Added/amended tests for new/changed code
• Added/changed documentation, including updates to the user manual if feature flow or UI is considerably changed
• Linted/formatted the code with ruff and djLint, easiest by using pre-commit
• The first line of the commit message continues the sentence "If applied, this commit will ...", starts with a capital letter, does not end with punctuation and is 50 characters or less long. See our how-to
• If applicable: Created new issues if this PR does not fix the issue completely/there is further work to be done
• If this results in changes in the UI: Added screenshots of the before and after
• If this results in changes to the database model: Updated the ER diagram

[github-actions]

Test results

    6 files    990 suites   1m 56s ⏱️
  747 tests   746 ✅ 1 💤 0 ❌
4 482 runs  4 476 ✅ 6 💤 0 ❌

Results for commit 546b63a.

♻️ This comment has been updated with latest results.

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 86.72%. Comparing base (703f731) to head (9458503).
⚠️ Report is 1 commits behind head on main.

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #1804      +/-   ##
==========================================
+ Coverage   86.18%   86.72%   +0.53%     
==========================================
  Files         137      137              
  Lines        6711     6705       -6     
==========================================
+ Hits         5784     5815      +31     
+ Misses        927      890      -37     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[Simrayz]

Update:
Moved "New profile" button to the same row as the tabs, to avoid unnecessary vertical whitespace.

[aleksfl]

Has the same bug as the timeslots PR with the expand arrow, but otherwise it works as intended. Given that the bug was fixed for the related PRs and my comments are tiny, am approving anyways.

[lunkwill42]

Looks very nice! 😃

Only small nitpicks (no code deep-dive from me today):

1. When I click the button to create my first profile, the message "No profiles yet." remains visible below the form card. While technically true, it seems somewhat confusing as I am currently adding a profile..
2. The "active" checkbox moves around when I add destinations:

simplescreenrecorder-2026-02-25_14.33.10.mp4

[sonarqubecloud]

❌ The last analysis has failed.

See analysis details on SonarQube Cloud

[johannaengland]

When I click the New Profile button I get some errors in the console:

'#no-profiles-message' is null hyperscript-0.9.13.min.js:1:54742

,

hypertrace /// hyperscript-0.9.13.min.js:1:23402

and

  -> on click   - 
<button class="btn btn-primary htmx-request" hx-get="/notifications/profiles/create/" hx-target="#notificationprofile-create" hx-swap="outerHTML" _="on click remove #no-profiles-message">
hyperscript-0.9.13.min.js:1:23549

[Simrayz]

When I click the New Profile button I get some errors in the console:

'#no-profiles-message' is null hyperscript-0.9.13.min.js:1:54742

,

hypertrace /// hyperscript-0.9.13.min.js:1:23402

and

  -> on click   - 
<button class="btn btn-primary htmx-request" hx-get="/notifications/profiles/create/" hx-target="#notificationprofile-create" hx-swap="outerHTML" _="on click remove #no-profiles-message">
hyperscript-0.9.13.min.js:1:23549

This is fixed now :) The issue was that the hyperscript did not account for the element possibly missing from the page.

[Simrayz]

Looks very nice! 😃

Only small nitpicks (no code deep-dive from me today):

1. When I click the button to create my first profile, the message "No profiles yet." remains visible below the form card. While technically true, it seems somewhat confusing as I am currently adding a profile..
2. The "active" checkbox moves around when I add destinations:

simplescreenrecorder-2026-02-25_14.33.10.mp4

These visual bugs are now fixed 😄

[johannaengland]

I noticed that if I have multiple destinations selected in the form instead of moving one of them into a new line I get newlines within the destination label and some are then hidden:

With two destinations:

With three:

With four:

Is that intended like that?

[sonarqubecloud]

Quality Gate passed

Issues
1 New issue
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud