diff --git a/public/client.js b/public/client.js index 6365ba4..f7eed1e 100644 --- a/public/client.js +++ b/public/client.js @@ -208,6 +208,59 @@ }); } + function clearSupportBadge() { + toArray(document.querySelectorAll('[component="support/count"]')).forEach((badge) => { + badge.textContent = '0'; + badge.classList.add('hidden'); + }); + } + + function renderSupportMenu(menuEl, entries) { + if (!menuEl) { + return; + } + + const relativePath = (window.config && window.config.relative_path) || ''; + + // remove the loading row and any previously injected entries; the + // empty-state and footer/divider rows are server-rendered and stay put + const loading = menuEl.querySelector('[data-wg-support-loading]'); + if (loading) { + loading.remove(); + } + toArray(menuEl.querySelectorAll('.wg-support-item')).forEach((li) => { + li.remove(); + }); + + const emptyEl = menuEl.querySelector('[data-wg-support-empty]'); + const footerEl = menuEl.querySelector('[data-wg-support-footer]'); + + const list = (entries || []).slice(0, 10); + if (emptyEl) { + emptyEl.classList.toggle('hidden', list.length > 0); + } + + list.forEach((entry) => { + const link = document.createElement('a'); + link.className = 'dropdown-item wg-support-item text-truncate'; + link.href = relativePath + entry.path; + link.textContent = entry.bodyShort; + if (!entry.read) { + link.classList.add('wg-support-item--unread'); + } + + const li = document.createElement('li'); + li.className = 'wg-support-item'; + li.appendChild(link); + + if (footerEl) { + menuEl.insertBefore(li, footerEl); + } else { + menuEl.appendChild(li); + } + }); + } + function getWestgateTopbar() { if (!document || typeof document.querySelector !== 'function') { return null; @@ -293,12 +346,36 @@ renderUnreadMenu(menuEl, []); }); }); + + $(document) + .off('show.bs.dropdown.westgateSupport') + .on('show.bs.dropdown.westgateSupport', '.wg-topbar [component="support"]', function () { + const menuEl = this.querySelector('[data-wg-support-menu]'); + require(['api'], function (api) { + api.get('/plugins/support/notifications', {}, function (err, data) { + if (err) { + renderSupportMenu(menuEl, []); + return; + } + renderSupportMenu(menuEl, data && data.notifications); + // ponytail: unlike core's unread/notification badges, this one + // gets no live socket push, so it only catches up on the next + // full page load after the box is opened here. Add a socket + // event if that gap matters. + if (data && data.unreadCount) { + api.post('/plugins/support/notifications/read', {}, function () {}); + clearSupportBadge(); + } + }); + }); + }); } window.westgateTheme = window.westgateTheme || {}; window.westgateTheme.wrapWikiTables = wrapWestgateWikiTables; window.westgateTheme.initTopbar = initWestgateTopbar; window.westgateTheme.renderUnreadMenu = renderUnreadMenu; + window.westgateTheme.renderSupportMenu = renderSupportMenu; $(document).ready(function () { wrapWestgateWikiTables(document); diff --git a/scss/westgate/_topbar.scss b/scss/westgate/_topbar.scss index ff33ead..0e6b461 100644 --- a/scss/westgate/_topbar.scss +++ b/scss/westgate/_topbar.scss @@ -173,7 +173,8 @@ $wg-topbar-panel-bg: rgba(21, 17, 26, 0.98); .wg-topbar .notifications-dropdown, .wg-topbar .chats-dropdown, .wg-topbar .drafts-dropdown, -.wg-topbar .unread-dropdown { +.wg-topbar .unread-dropdown, +.wg-topbar .support-dropdown { width: min(24rem, calc(100vw - 1.5rem)); } @@ -189,6 +190,10 @@ $wg-topbar-panel-bg: rgba(21, 17, 26, 0.98); opacity: 0.7; } +.wg-topbar .wg-support-item--unread { + font-weight: 600; +} + .wg-topbar .dropdown-item, .wg-topbar .btn.btn-ghost, .wg-topbar .btn.btn-light { diff --git a/templates/partials/header/support-drawer.tpl b/templates/partials/header/support-drawer.tpl new file mode 100644 index 0000000..02f0842 --- /dev/null +++ b/templates/partials/header/support-drawer.tpl @@ -0,0 +1,9 @@ + + diff --git a/templates/partials/header/topbar.tpl b/templates/partials/header/topbar.tpl index 5938994..8b6cc8c 100644 --- a/templates/partials/header/topbar.tpl +++ b/templates/partials/header/topbar.tpl @@ -45,6 +45,12 @@ + {{{ if support.visible }}} +
  • + +
    • + {{{ end }}} + {{{ if canChat }}}
  • @@ -115,6 +121,9 @@
    [[unread:title]]{unreadCount.topic} [[global:header.notifications]]{unreadCount.notification} + {{{ if support.visible }}} + Support inbox{support.unreadCount} + {{{ end }}} {{{ if canChat }}} [[global:header.chats]]{unreadCount.chat} {{{ end }}} diff --git a/tests/global-topbar-contract.test.js b/tests/global-topbar-contract.test.js index b63d33c..11a29d7 100644 --- a/tests/global-topbar-contract.test.js +++ b/tests/global-topbar-contract.test.js @@ -180,3 +180,39 @@ assertIncludes( '.unread-dropdown', 'Topbar styles should cover the unread dropdown' ); + +const supportDrawer = read('templates/partials/header/support-drawer.tpl'); +assertIncludes( + topbar, + '', + 'Topbar should mount the support inbox drawer' +); +assertIncludes( + topbar, + '{{{ if support.visible }}}', + 'Support inbox drawer should be gated on the viewer having any support access' +); +assert( + topbar.indexOf('partials/sidebar/notifications.tpl') < topbar.indexOf('partials/header/support-drawer.tpl'), + 'Support inbox should sit next to (after) the notifications bell' +); +assertIncludes( + supportDrawer, + 'component="support/count"', + 'Support toggle should carry its own unread count badge' +); +assertIncludes( + supportDrawer, + 'data-wg-support-menu', + 'Support dropdown menu should expose the JS mount hook' +); +assertMatches( + topbar, + /href="\{relative_path\}\/support"[^>]*>[\s\S]*?component="support\/count"/, + 'Mobile drawer actions should include a Support inbox link with count badge' +); +assertIncludes( + stylesheet, + '.support-dropdown', + 'Topbar styles should cover the support inbox dropdown' +); diff --git a/tests/support-drawer-client.test.js b/tests/support-drawer-client.test.js new file mode 100644 index 0000000..f9c68f3 --- /dev/null +++ b/tests/support-drawer-client.test.js @@ -0,0 +1,28 @@ +'use strict'; + +const assert = require('assert'); +const fs = require('fs'); +const path = require('path'); + +const client = fs.readFileSync(path.join(__dirname, '..', 'public', 'client.js'), 'utf8'); + +assert( + client.includes("'show.bs.dropdown.westgateSupport'"), + 'client.js should fetch the support inbox when its dropdown opens' +); +assert( + client.includes("'/plugins/support/notifications'"), + 'client.js should load the support inbox from the plugin API via the api module (for CSRF-safe writes)' +); +assert( + client.includes("'/plugins/support/notifications/read'"), + 'client.js should mark the support inbox read when it is opened with unread entries' +); +assert( + client.includes('renderSupportMenu'), + 'client.js should expose the support inbox menu renderer' +); +assert( + /textContent/.test(client) && !/innerHTML\s*=[^=]*bodyShort/.test(client), + 'Support inbox entry text must be inserted via textContent, never innerHTML' +);