+
${api.settings.get('authentication') === ANONYMOUS
? ''
diff --git a/src/plugins/roomslist/templates/roomslist.js b/src/plugins/roomslist/templates/roomslist.js
index 2c3b98c28e..94d78507aa 100644
--- a/src/plugins/roomslist/templates/roomslist.js
+++ b/src/plugins/roomslist/templates/roomslist.js
@@ -3,85 +3,14 @@
* @typedef {import('@converse/headless').MUC} MUC
*/
import { html } from 'lit';
-import { api, u, constants } from '@converse/headless';
+import { api, constants } from '@converse/headless';
import 'plugins/muc-views/modals/add-muc.js';
import 'plugins/muc-views/modals/muc-list.js';
import { __ } from 'i18n';
-import { getUnreadMsgsDisplay } from 'shared/chat/utils.js';
-
import '../styles/roomsgroups.scss';
+import { tplRoomItem } from 'shared/roomslist/templates/room-item.js';
const { CLOSED } = constants;
-const { isUniView } = u;
-
-/** @param {MUC} room */
-function isCurrentlyOpen(room) {
- return isUniView() && !room.get('hidden');
-}
-
-/** @param {MUC} room */
-function tplUnreadIndicator(room) {
- return html`
${getUnreadMsgsDisplay(room)}`;
-}
-
-function tplActivityIndicator() {
- return html`
`;
-}
-
-/**
- * @param {RoomsList} el
- * @param {MUC} room
- */
-function tplRoomItem(el, room) {
- const i18n_leave_room = __('Leave this groupchat');
- const has_unread_msgs = room.get('num_unread_general') || room.get('has_activity');
- return html`
- el.openRoom(ev)}
- >
-
- ${room.get('num_unread')
- ? tplUnreadIndicator(room)
- : room.get('has_activity')
- ? tplActivityIndicator()
- : ''}
- ${room.getDisplayName()}
-
-
- el.closeRoom(ev)}
- >
-
-
- `;
-}
/**
* @param {RoomsList} el
diff --git a/src/plugins/roomslist/tests/grouplists.js b/src/plugins/roomslist/tests/grouplists.js
index cf281e0d19..659a078cfe 100644
--- a/src/plugins/roomslist/tests/grouplists.js
+++ b/src/plugins/roomslist/tests/grouplists.js
@@ -108,7 +108,7 @@ describe('A MUC domain group', function () {
await mock.waitForRoster(_converse, 'current', 0);
await mock.openControlBox(_converse);
const controlbox = _converse.chatboxviews.get('controlbox');
- const list = controlbox.querySelector('.list-container--openrooms');
+ const list = controlbox.querySelector('converse-rooms-list .list-container--openrooms');
const nick = 'JC';
const muc_jid = 'room@conference.shakespeare.lit';
_converse.api.rooms.open(muc_jid, { nick });
diff --git a/src/plugins/roomslist/view.js b/src/plugins/roomslist/view.js
index 1b14e515c6..7241b6180c 100644
--- a/src/plugins/roomslist/view.js
+++ b/src/plugins/roomslist/view.js
@@ -19,6 +19,12 @@ export class RoomsList extends CustomElement {
initStorage(this.model, id);
this.model.fetch();
+ this.addEventListeners();
+
+ this.requestUpdate();
+ }
+
+ addEventListeners() {
const { chatboxes } = _converse.state;
this.listenTo(chatboxes, 'add', this.renderIfChatRoom);
this.listenTo(chatboxes, 'remove', this.renderIfChatRoom);
@@ -26,9 +32,8 @@ export class RoomsList extends CustomElement {
this.listenTo(chatboxes, 'change', this.renderIfRelevantChange);
this.listenTo(chatboxes, 'vcard:add', () => this.requestUpdate());
this.listenTo(chatboxes, 'vcard:change', () => this.requestUpdate());
+ this.listenTo(chatboxes, 'bookmark:change', () => this.requestUpdate());
this.listenTo(this.model, 'change', () => this.requestUpdate());
-
- this.requestUpdate();
}
render() {
@@ -42,7 +47,7 @@ export class RoomsList extends CustomElement {
/** @param {import('@converse/headless').Model} model */
renderIfRelevantChange(model) {
- const attrs = ['bookmarked', 'hidden', 'name', 'num_unread', 'num_unread_general', 'has_activity'];
+ const attrs = ['hidden', 'name', 'num_unread', 'num_unread_general', 'has_activity'];
const changed = model.changed || {};
if (u.muc.isChatRoom(model) && Object.keys(changed).filter((m) => attrs.includes(m)).length) {
this.requestUpdate();
@@ -52,7 +57,7 @@ export class RoomsList extends CustomElement {
/** @returns {import('@converse/headless').MUC[]} */
getRoomsToShow() {
const { chatboxes } = _converse.state;
- const rooms = chatboxes.filter((m) => m.get('type') === CHATROOMS_TYPE && !m.get('closed'));
+ const rooms = chatboxes.filter((m) => m.get('type') === CHATROOMS_TYPE && !m.get('closed') && !m.bookmark?.get('pinned'));
rooms.sort((a, b) => (a.getDisplayName().toLowerCase() <= b.getDisplayName().toLowerCase() ? -1 : 1));
return rooms;
}
@@ -82,6 +87,22 @@ export class RoomsList extends CustomElement {
}
}
+ /** @param {Event} ev */
+ pinRoom(ev) {
+ ev.preventDefault();
+ const target = /** @type {HTMLElement} */ (ev.currentTarget);
+ const jid = target.getAttribute('data-room-jid');
+ _converse.state.bookmarks.pinRoom(jid);
+ }
+
+ /** @param {Event} ev */
+ unpinRoom(ev) {
+ ev.preventDefault();
+ const target = /** @type {HTMLElement} */ (ev.currentTarget);
+ const jid = target.getAttribute('data-room-jid');
+ _converse.state.bookmarks.unpinRoom(jid);
+ }
+
/** @param {Event} [ev] */
toggleRoomsList(ev) {
ev?.preventDefault?.();
diff --git a/src/shared/roomslist/templates/room-item.js b/src/shared/roomslist/templates/room-item.js
new file mode 100644
index 0000000000..aab1716ef2
--- /dev/null
+++ b/src/shared/roomslist/templates/room-item.js
@@ -0,0 +1,114 @@
+/**
+ * @typedef {import('plugins/roomslist/view').RoomsList} RoomsList
+ * @typedef {import('plugins/bookmark-views/components/bookmarks-pin-list').PinnedBookmarksView} PinnedBookmarksView
+ * @typedef {import('@converse/headless').MUC} MUC
+ */
+import { html } from "lit";
+import { api, u } from "@converse/headless";
+import { __ } from 'i18n';
+import { getUnreadMsgsDisplay } from "shared/chat/utils.js";
+
+const { isUniView } = u;
+
+/** @param {MUC} room */
+function isCurrentlyOpen (room) {
+ return isUniView() && !room.get('hidden');
+}
+
+/** @param {MUC} room */
+function tplUnreadIndicator (room) {
+ return html`
${ getUnreadMsgsDisplay(room) }`;
+}
+
+function tplActivityIndicator () {
+ return html`
`;
+}
+
+/**
+ * @param {RoomsList|PinnedBookmarksView} el
+ * @param {MUC} room
+ */
+export function tplRoomItem (el, room) {
+ const i18n_leave_room = __('Leave this groupchat');
+ const has_unread_msgs = room.get('num_unread_general') || room.get('has_activity');
+
+ const buttons = [
+ tplRoomMenuItem({
+ room,
+ alt_text: i18n_leave_room,
+ text: __('Leave'),
+ icon_class: 'fa-sign-out-alt',
+ btn_class: 'close-room',
+ handler: (ev) => el.closeRoom(ev)
+ }),
+ ];
+
+ if (api.settings.get('allow_bookmarks')) {
+ if (!room.bookmark?.get('pinned')) {
+ buttons.push(tplRoomMenuItem({
+ room,
+ alt_text: __('Pin this groupchat to the top of the list'),
+ text: __('Pin'),
+ icon_class: 'fa-bookmark',
+ btn_class: 'pin-room',
+ handler: (ev) => el.pinRoom(ev)
+ }))
+ } else {
+ buttons.push(tplRoomMenuItem({
+ room,
+ alt_text: __('Unpin this groupchat from the top of the list'),
+ text: __('Unpin'),
+ icon_class: 'fa-bookmark-empty',
+ btn_class: 'unpin-room',
+ handler: (ev) => el.unpinRoom(ev)
+ }))
+ }
+ }
+
+ return html`
+
+
+ el.openRoom(ev)}>
+
+ ${ room.get('num_unread') ?
+ tplUnreadIndicator(room) :
+ (room.get('has_activity') ? tplActivityIndicator() : '') }
+ ${room.getDisplayName()}
+
+
+
+ `;
+}
+
+/**
+ * @param {Object} config
+ * @param {MUC} config.room
+ * @param {string} config.alt_text
+ * @param {string} config.text
+ * @param {function} config.handler
+ * @param {string} config.icon_class
+ * @param {string} config.btn_class
+ * @returns
+ */
+function tplRoomMenuItem (config) {
+ const { room, alt_text, text, handler, icon_class, btn_class } = config;
+ return html`
+
+ ${text}
+ `;
+}
diff --git a/src/types/plugins/bookmark-views/components/bookmarks-pin-list.d.ts b/src/types/plugins/bookmark-views/components/bookmarks-pin-list.d.ts
new file mode 100644
index 0000000000..a4e7c4b1cf
--- /dev/null
+++ b/src/types/plugins/bookmark-views/components/bookmarks-pin-list.d.ts
@@ -0,0 +1,5 @@
+export class PinnedBookmarksView extends RoomsList {
+ model: any;
+}
+import { RoomsList } from 'plugins/roomslist/view';
+//# sourceMappingURL=bookmarks-pin-list.d.ts.map
\ No newline at end of file
diff --git a/src/types/plugins/bookmark-views/components/templates/pin-list.d.ts b/src/types/plugins/bookmark-views/components/templates/pin-list.d.ts
new file mode 100644
index 0000000000..8a29663ba1
--- /dev/null
+++ b/src/types/plugins/bookmark-views/components/templates/pin-list.d.ts
@@ -0,0 +1,3 @@
+declare function _default(el: import("plugins/bookmark-views/components/bookmarks-pin-list").PinnedBookmarksView): import("lit-html").TemplateResult<1>;
+export default _default;
+//# sourceMappingURL=pin-list.d.ts.map
\ No newline at end of file
diff --git a/src/types/plugins/bookmark-views/mixins.d.ts b/src/types/plugins/bookmark-views/mixins.d.ts
index 6b5ebfd04a..0520f7c2c1 100644
--- a/src/types/plugins/bookmark-views/mixins.d.ts
+++ b/src/types/plugins/bookmark-views/mixins.d.ts
@@ -1,9 +1,4 @@
export namespace BookmarkableChatRoomView {
- /**
- * Set whether the groupchat is bookmarked or not.
- * @private
- */
- function setBookmarkState(): void;
function renderBookmarkForm(): void;
function showBookmarkModal(ev: Event): void;
}
diff --git a/src/types/plugins/controlbox/model.d.ts b/src/types/plugins/controlbox/model.d.ts
index 9dafc68b5d..50551599eb 100644
--- a/src/types/plugins/controlbox/model.d.ts
+++ b/src/types/plugins/controlbox/model.d.ts
@@ -9,7 +9,6 @@ export default ControlBox;
declare class ControlBox extends Model
{
constructor(attributes?: Partial, options?: import("@converse/skeletor").ModelOptions);
defaults(): {
- bookmarked: boolean;
box_id: string;
chat_state: any;
closed: boolean;
diff --git a/src/types/plugins/roomslist/view.d.ts b/src/types/plugins/roomslist/view.d.ts
index dfd7c82bf6..973ddac74b 100644
--- a/src/types/plugins/roomslist/view.d.ts
+++ b/src/types/plugins/roomslist/view.d.ts
@@ -1,5 +1,6 @@
export class RoomsList extends CustomElement {
model: RoomsListModel;
+ addEventListeners(): void;
render(): import("lit-html").TemplateResult<1>;
/** @param {import('@converse/headless').Model} model */
renderIfChatRoom(model: import("@converse/headless").Model): void;
@@ -11,6 +12,10 @@ export class RoomsList extends CustomElement {
openRoom(ev: Event): Promise;
/** @param {Event} ev */
closeRoom(ev: Event): Promise;
+ /** @param {Event} ev */
+ pinRoom(ev: Event): void;
+ /** @param {Event} ev */
+ unpinRoom(ev: Event): void;
/** @param {Event} [ev] */
toggleRoomsList(ev?: Event): void;
/**
diff --git a/src/types/shared/roomslist/templates/room-item.d.ts b/src/types/shared/roomslist/templates/room-item.d.ts
new file mode 100644
index 0000000000..cacb282c56
--- /dev/null
+++ b/src/types/shared/roomslist/templates/room-item.d.ts
@@ -0,0 +1,9 @@
+/**
+ * @param {RoomsList|PinnedBookmarksView} el
+ * @param {MUC} room
+ */
+export function tplRoomItem(el: RoomsList | PinnedBookmarksView, room: MUC): import("lit-html").TemplateResult<1>;
+export type RoomsList = import("plugins/roomslist/view").RoomsList;
+export type PinnedBookmarksView = import("plugins/bookmark-views/components/bookmarks-pin-list").PinnedBookmarksView;
+export type MUC = import("@converse/headless").MUC;
+//# sourceMappingURL=room-item.d.ts.map
\ No newline at end of file