WIP: Add an app switcher widget

Author: jcbrand

src/plugins/chatboxviews/index.js

@@ -2,25 +2,56 @@
  * @copyright 2024, the Converse.js contributors
  * @license Mozilla Public License (MPLv2)
  */
+import { html } from 'lit';
 import { _converse, api, converse } from '@converse/headless';
 import './view.js';
 import ChatBoxViews from './container.js';
 import { calculateViewportHeightUnit } from './utils.js';
+import '../rootview/index.js';
 
 import './styles/chats.scss';
 
-
 converse.plugins.add('converse-chatboxviews', {
-    dependencies: ['converse-chatboxes', 'converse-vcard'],
+    dependencies: ['converse-rootview', 'converse-chatboxes', 'converse-vcard'],
 
-    initialize () {
+    initialize() {
         api.promises.add(['chatBoxViewsInitialized']);
 
         // Configuration values for this plugin
         // ====================================
         // Refer to docs/source/configuration.rst for explanations of these
         // configuration settings.
-        api.settings.extend({ 'animate': true });
+        api.settings.extend({ animate: true });
+
+        api.apps.add({
+            name: 'chat',
+            render: () => {
+                const extra_classes = api.settings.get('singleton') ? ['converse-singleton'] : [];
+                extra_classes.push(`converse-${api.settings.get('view_mode')}`);
+                return html`<converse-chats
+                    class="converse-chatboxes row justify-content-start g-0 ${extra_classes.join(' ')}"
+                ></converse-chats>`;
+            },
+            active: true,
+        });
+
+        // TODO: move to own plugin
+        api.apps.add({
+            name: 'todo',
+            render: () => {
+                return html`<p>hello world: todo</p>`;
+            },
+            active: false,
+        });
+
+        // TODO: move to own plugin
+        api.apps.add({
+            name: 'timetracker',
+            render: () => {
+                return html`<p>hello world: timetracker</p>`;
+            },
+            active: false,
+        });
 
         const chatboxviews = new ChatBoxViews();
         Object.assign(_converse, { chatboxviews }); // XXX DEPRECATED
@@ -53,14 +84,14 @@ converse.plugins.add('converse-chatboxviews', {
              * @example
              * converse.insertInto(document.querySelector('#converse-container'));
              */
-            insertInto (container) {
+            insertInto(container) {
                 const el = chatboxviews.el;
                 if (el && !container.contains(el)) {
                     container.insertAdjacentElement('afterbegin', el);
                 } else if (!el) {
                     throw new Error('Cannot insert non-existing #conversejs element into the DOM');
                 }
-            }
+            },
         });
-    }
+    },
 });

src/plugins/chatboxviews/styles/chats.scss

@@ -2,6 +2,21 @@
 @import 'bootstrap/scss/variables';
 @import 'bootstrap/scss/mixins';
 
+.conversejs {
+    &.converse-fullscreen {
+        converse-app-container {
+            display: flex;
+            justify-content: flex-start;
+            height: 100%;
+            position: fixed;
+            bottom: 0;
+            right: 0;
+            left: 0;
+        }
+    }
+}
+
+
 .conversejs {
     converse-chats {
         &.converse-overlayed {
@@ -18,14 +33,9 @@
 
         &.converse-fullscreen {
             flex-wrap: nowrap;
-        }
-
-        &.converse-fullscreen {
             &.converse-chatboxes {
-                position: fixed;
-                bottom: 0;
-                right: 0;
-                left: 0;
+                width: 100%;
+                position: sticky;
             }
         }
 

src/plugins/rootview/api.js

@@ -0,0 +1,58 @@
+import { api } from '@converse/headless';
+
+const apps = new Map();
+
+function setCurrentAppInactive() {
+    const currentApp = apps_api.apps.getActive();
+    if (currentApp) {
+        apps.set(currentApp.name, {
+            ...currentApp,
+            active: false,
+        });
+    }
+}
+
+const apps_api = {
+    apps: {
+        /**
+         * @param {import('./types').App} app
+         */
+        add(app) {
+            if (!app.name) throw new Error("Can't add app without a name");
+            if (app.active) setCurrentAppInactive();
+            apps.set(app.name, app);
+        },
+
+        /**
+         * @returns {import('./types').App}
+         */
+        getActive() {
+            return Array.from(apps.values()).find((app) => app.active);
+        },
+
+        /**
+         * @param {string} name
+         */
+        switch(name) {
+            if (apps.has(name)) {
+                setCurrentAppInactive();
+                apps.set(name, {
+                    ...apps.get(name),
+                    active: true,
+                });
+                const app = apps.get(name);
+                /**
+                 * Triggered when switching to a different app
+                 * @event _converse#appSwitch
+                 * @type {import('./types').App}
+                 * @example _converse.api.listen.on('appSwitch', (app) => { ... });
+                 */
+                api.trigger('appSwitch', app);
+                return app;
+            }
+            return null;
+        },
+    },
+};
+
+export default apps_api;

src/plugins/rootview/app-container.js

@@ -0,0 +1,16 @@
+import { api } from '@converse/headless';
+import { CustomElement } from 'shared/components/element.js';
+import tplAppContainer from './templates/app-container.js';
+import './app-switcher.js';
+
+export default class AppContainer extends CustomElement {
+    initialize() {
+        api.listen.on('appSwitch', () => this.requestUpdate());
+    }
+
+    render() {
+        return tplAppContainer();
+    }
+}
+
+api.elements.define('converse-app-container', AppContainer);

src/plugins/rootview/app-switcher.js

@@ -0,0 +1,39 @@
+import { api } from '@converse/headless';
+import { CustomElement } from 'shared/components/element.js';
+import tplAppSwitcher from './templates/app-switcher.js';
+
+import './styles/app-switcher.scss';
+
+export default class AppSwitcher extends CustomElement {
+    static get properties() {
+        return {
+            _activeApp: { type: String },
+        };
+    }
+
+    constructor() {
+        super();
+        this._activeApp = 'chat';
+    }
+
+    initialize() {
+        api.listen.on('appSwitch', () => this.requestUpdate());
+    }
+
+    render() {
+        return tplAppSwitcher(this);
+    }
+
+    /**
+     * @param {MouseEvent} ev
+     */
+    switchApp(ev) {
+        ev.preventDefault();
+        const a = /** @type {HTMLElement} */ (ev.target).closest('.nav-link');
+        const name = a.getAttribute('data-app-name');
+        api.apps.switch(name);
+        this.requestUpdate();
+    }
+}
+
+api.elements.define('converse-app-switcher', AppSwitcher);

src/plugins/rootview/index.js

@@ -1,12 +1,14 @@
-import { api, converse } from '@converse/headless';
+import { _converse, api, converse } from '@converse/headless';
+import app_api from './api.js';
 import ConverseRoot from './root.js';
 import { ensureElement } from './utils.js';
 import './background.js';
-
+import './app-container.js';
 
 converse.plugins.add('converse-rootview', {
+    initialize() {
+        Object.assign(_converse.api, app_api);
 
-    initialize () {
         // Configuration values for this plugin
         // ====================================
         // Refer to docs/source/configuration.rst for explanations of these
@@ -15,7 +17,7 @@ converse.plugins.add('converse-rootview', {
             auto_insert: true,
             dark_theme: 'dracula',
             // Languages for which the UI is right-to-left
-            rtl_langs: ["ar", "fa", "he", "ug"],
+            rtl_langs: ['ar', 'fa', 'he', 'ug'],
             show_background: false,
             theme: 'classic',
         });
@@ -26,5 +28,5 @@ converse.plugins.add('converse-rootview', {
         // before `converse.initialized` has been called it will render too
         // early.
         api.elements.define('converse-root', ConverseRoot);
-    }
+    },
 });

src/plugins/rootview/styles/app-switcher.scss

@@ -0,0 +1,8 @@
+converse-app-switcher {
+    box-shadow: 0 0 0.3em gray;
+    margin-right: 0.4em;
+    padding: 0.5em;
+    li {
+        margin-bottom: 1em;
+    }
+}

src/plugins/rootview/templates/app-container.js

@@ -0,0 +1,9 @@
+import { html } from 'lit';
+import { api } from '@converse/headless';
+
+export default () => {
+    return html`
+        <converse-app-switcher></converse-app-switcher>
+        ${api.apps.getActive().render()}
+    `;
+};

src/plugins/rootview/templates/app-switcher.js

@@ -0,0 +1,44 @@
+import { api } from '@converse/headless';
+import { html } from 'lit';
+
+/**
+ * @param {import('../app-switcher').default} el
+ */
+export default (el) => {
+    const { name: active_app } = api.apps.getActive();
+    return html`
+        <ul class="nav nav-pills nav-flush flex-column mb-auto text-center">
+            <li class="nav-item" title="Chat" aria-label="Chat">
+                <a
+                    href="#"
+                    class="${active_app === 'chat' ? 'active' : ''} nav-link py-3 border-bottom"
+                    data-app-name="chat"
+                    aria-current="page"
+                    @click="${el.switchApp}"
+                >
+                    <converse-icon size="1em" class="fa fa-users"></converse-icon>
+                </a>
+            </li>
+            <li title="TODO" aria-label="TODO">
+                <a
+                    href="#"
+                    class="${active_app === 'todo' ? 'active' : ''} nav-link py-3 border-bottom"
+                    data-app-name="todo"
+                    @click="${el.switchApp}"
+                >
+                    <converse-icon size="1em" class="fa fa-list-ul"></converse-icon>
+                </a>
+            </li>
+            <li title="Time Tracker" aria-label="Time Tracker">
+                <a
+                    href="#"
+                    class="${active_app === 'timetracker' ? 'active' : ''} nav-link py-3 border-bottom"
+                    data-app-name="timetracker"
+                    @click="${el.switchApp}"
+                >
+                    <converse-icon size="1em" class="fa fa-lock"></converse-icon>
+                </a>
+            </li>
+        </ul>
+    `;
+};

src/plugins/rootview/templates/root.js

@@ -3,11 +3,9 @@ import { api } from '@converse/headless';
 import 'shared/components/font-awesome.js';
 
 export default () => {
-    const extra_classes = api.settings.get('singleton') ? ['converse-singleton'] : [];
-    extra_classes.push(`converse-${api.settings.get('view_mode')}`);
     return html`
         ${api.settings.get('show_background') ? html`<converse-bg logo></converse-bg>` : ''}
-        <converse-chats class="converse-chatboxes row justify-content-start g-0 ${extra_classes.join(' ')}"></converse-chats>
+        <converse-app-container></converse-app-container>
         <converse-modals id="converse-modals" class="modals"></converse-modals>
         <converse-toasts></converse-toasts>
         <converse-fontawesome></converse-fontawesome>