Refactor bookmark modal

- Use `getDisplayName` to have proper fallback for the MUC name
- Don't use the term "Unbookmark". There might be other reasons for
opening the bookmark modal besides removing a bookmark.

dev.html

@@ -28,7 +28,6 @@
     });
 
     converse.initialize({
-        i18n: 'ug',
         theme: 'dracula',
         auto_away: 300,
         enable_smacks: true,

src/plugins/bookmark-views/components/bookmark-form.js

@@ -18,13 +18,7 @@ class MUCBookmarkForm extends CustomElement {
     }
 
     render () {
-        return tpl_muc_bookmark_form(
-            Object.assign(this.model.toJSON(), {
-                'bookmark': this.bookmark,
-                'onCancel': ev => this.removeBookmark(ev),
-                'onSubmit': ev => this.onBookmarkFormSubmitted(ev)
-            })
-        );
+        return tpl_muc_bookmark_form(this)
     }
 
     onBookmarkFormSubmitted (ev) {

src/plugins/bookmark-views/components/templates/form.js

@@ -2,17 +2,19 @@ import { html } from "lit";
 import { __ } from 'i18n';
 
 
-export default (o) => {
-    const name = o.bookmark?.get('name') ?? o.name;
-    const nick = o.bookmark?.get('nick') ?? o.nick;
+export default (el) => {
+    const name = el.model.getDisplayName();
+    const nick = el.bookmark?.get('nick') ?? el.model.get('nick');
+
     const i18n_heading = __('Bookmark for "%1$s"', name);
     const i18n_autojoin = __('Would you like this groupchat to be automatically joined upon startup?');
     const i18n_remove = __('Remove');
     const i18n_name = __('The name for this bookmark:');
     const i18n_nick = __('What should your nickname for this groupchat be?');
-    const i18n_submit = o.bookmark ? __('Update') : __('Save');
+    const i18n_submit = el.bookmark ? __('Update') : __('Save');
+
     return html`
-        <form class="converse-form chatroom-form" @submit=${o.onSubmit}>
+        <form class="converse-form chatroom-form" @submit=${(ev) => el.onBookmarkFormSubmitted(ev)}>
             <legend>${i18n_heading}</legend>
             <fieldset class="form-group">
                 <label for="converse_muc_bookmark_name">${i18n_name}</label>
@@ -28,7 +30,7 @@ export default (o) => {
             </fieldset>
             <fieldset class="form-group">
                 <input class="btn btn-primary" type="submit" value="${i18n_submit}">
-                ${o.bookmark ? html`<input class="btn btn-secondary button-remove" type="button" value="${i18n_remove}" @click=${o.onCancel}>` : '' }
+                    ${el.bookmark ? html`<input class="btn btn-secondary button-remove" type="button" value="${i18n_remove}" @click=${(ev) => el.removeBookmark(ev)}>` : '' }
             </fieldset>
         </form>
     `;

src/plugins/bookmark-views/utils.js

@@ -7,18 +7,17 @@ import { checkBookmarksSupport } from '@converse/headless/plugins/bookmarks/util
 
 export function getHeadingButtons (view, buttons) {
     if (api.settings.get('allow_bookmarks') && view.model.get('type') === _converse.CHATROOMS_TYPE) {
-        const bookmarked = view.model.get('bookmarked');
         const data = {
-            'i18n_title': bookmarked ? __('Unbookmark this groupchat') : __('Bookmark this groupchat'),
-            'i18n_text': bookmarked ? __('Unbookmark') : __('Bookmark'),
-            'handler': ev => view.showBookmarkModal(ev),
+            'i18n_title': __('Bookmark this groupchat'),
+            'i18n_text': __('Bookmark'),
+            'handler': (ev) => view.showBookmarkModal(ev),
             'a_class': 'toggle-bookmark',
             'icon_class': 'fa-bookmark',
             'name': 'bookmark'
         };
         const names = buttons.map(t => t.name);
         const idx = names.indexOf('details');
-        const data_promise = checkBookmarksSupport().then(s => (s ? data : null));
+        const data_promise = checkBookmarksSupport().then((s) => (s ? data : null));
         return idx > -1 ? [...buttons.slice(0, idx), data_promise, ...buttons.slice(idx)] : [data_promise, ...buttons];
     }
     return buttons;