@okjavis/nodebb-theme-javis 4.0.4 → 5.0.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@okjavis/nodebb-theme-javis",
-  "version": "4.0.4",
+  "version": "5.0.1",
   "description": "Modern, premium NodeBB theme for JAVIS Community - Extends Harmony with custom styling",
   "main": "theme.js",
   "scripts": {

package/public/src/client/search.js

@@ -0,0 +1,401 @@
+'use strict';
+
+
+define('forum/search', [
+	'search',
+	'storage',
+	'hooks',
+	'alerts',
+	'api',
+	'translator',
+	'categoryFilter',
+	'userFilter',
+], function (searchModule, storage, hooks, alerts, api, translator, categoryFilter, userFilter) {
+	const Search = {};
+	let selectedUsers = [];
+	let selectedTags = [];
+	let selectedCids = [];
+	let searchFilters = {};
+	Search.init = function () {
+		const searchIn = $('#search-in');
+		searchIn.on('change', function () {
+			updateFormItemVisiblity(searchIn.val());
+		});
+
+		const searchQuery = $('#results').attr('data-search-query');
+		searchModule.highlightMatches(
+			searchQuery,
+			$('.search-results .content p, .search-results .topic-title')
+		);
+
+		$('#advanced-search form').off('submit').on('submit', function (e) {
+			e.preventDefault();
+			searchModule.query(getSearchDataFromDOM());
+			return false;
+		});
+
+		handleSavePreferences();
+
+		categoryFilterDropdown(ajaxify.data.selectedCids);
+		userFilterDropdown($('[component="user/filter"]'), ajaxify.data.userFilterSelected);
+		tagFilterDropdown($('[component="tag/filter"]'), ajaxify.data.tagFilterSelected);
+
+		$('[component="search/filters"]').on('hidden.bs.dropdown', '.dropdown', function () {
+			const updateFns = {
+				replies: updateReplyCountFilter,
+				time: updateTimeFilter,
+				sort: updateSortFilter,
+				tag: updateTagFilter,
+			};
+
+			if (updateFns[$(this).attr('data-filter-name')]) {
+				updateFns[$(this).attr('data-filter-name')]();
+			}
+
+			const searchFiltersNew = getSearchDataFromDOM();
+			if (JSON.stringify(searchFilters) !== JSON.stringify(searchFiltersNew)) {
+				searchFilters = searchFiltersNew;
+				searchModule.query(searchFilters);
+			}
+		});
+
+		fillOutForm();
+		updateTimeFilter();
+		updateReplyCountFilter();
+		updateSortFilter();
+
+		searchFilters = getSearchDataFromDOM();
+	};
+
+	function updateTagFilter() {
+		const isActive = selectedTags.length > 0;
+		let labelText = '[[search:tags]]';
+		if (selectedTags.length) {
+			labelText = translator.compile(
+				'search:tags-x', selectedTags.map(u => u.value).join(', ')
+			);
+		}
+		$('[component="tag/filter/button"]').toggleClass(
+			'active-filter', isActive
+		).find('.filter-label').translateHtml(labelText);
+	}
+
+	function updateTimeFilter() {
+		const isActive = $('#post-time-range').val() > 0;
+		$('#post-time-button').toggleClass(
+			'active-filter', isActive
+		).find('.filter-label').translateText(
+			isActive ?
+				`[[search:time-${$('#post-time-filter').val()}-than-${$('#post-time-range').val()}]]` :
+				`[[search:time]]`
+		);
+	}
+
+	function updateSortFilter() {
+		const isActive = $('#post-sort-by').val() !== 'relevance' || $('#post-sort-direction').val() !== 'desc';
+		$('#sort-by-button').toggleClass(
+			'active-filter', isActive
+		).find('.filter-label').translateText(
+			isActive ?
+				`[[search:sort-by-${$('#post-sort-by').val()}-${$('#post-sort-direction').val()}]]` :
+				`[[search:sort]]`
+		);
+	}
+
+	function updateReplyCountFilter() {
+		const isActive = $('#reply-count').val() > 0;
+		$('#reply-count-button').toggleClass(
+			'active-filter', isActive
+		).find('.filter-label').translateText(
+			isActive ?
+				`[[search:replies-${$('#reply-count-filter').val()}-count, ${$('#reply-count').val()}]]` :
+				`[[search:replies]]`
+		);
+	}
+
+	function getSearchDataFromDOM() {
+		const form = $('#advanced-search');
+		const searchData = {
+			in: $('#search-in').val(),
+		};
+		searchData.term = $('#search-input').val();
+		if (['posts', 'titlesposts', 'titles', 'bookmarks'].includes(searchData.in)) {
+			searchData.matchWords = form.find('#match-words-filter').val();
+			searchData.by = selectedUsers.length ? selectedUsers.map(u => u.username) : undefined;
+			searchData.categories = selectedCids.length ? selectedCids : undefined;
+			searchData.searchChildren = form.find('#search-children').is(':checked');
+			searchData.hasTags = selectedTags.length ? selectedTags.map(t => t.value) : undefined;
+			searchData.replies = form.find('#reply-count').val();
+			searchData.repliesFilter = form.find('#reply-count-filter').val();
+			searchData.timeFilter = form.find('#post-time-filter').val();
+			searchData.timeRange = form.find('#post-time-range').val();
+			searchData.sortBy = form.find('#post-sort-by').val();
+			searchData.sortDirection = form.find('#post-sort-direction').val();
+			searchData.showAs = form.find('#show-results-as').val();
+		}
+
+		hooks.fire('action:search.getSearchDataFromDOM', {
+			form: form,
+			data: searchData,
+		});
+
+		return searchData;
+	}
+
+	function updateFormItemVisiblity(searchIn) {
+		const hideTitlePostFilters = !['posts', 'titles', 'bookmarks'].some(token => searchIn.includes(token));
+		$('.post-search-item').toggleClass('hidden', hideTitlePostFilters);
+	}
+
+	function fillOutForm() {
+		const params = utils.params({
+			disableToType: true,
+		});
+
+		const searchData = searchModule.getSearchPreferences();
+		const formData = utils.merge(searchData, params);
+
+		if (formData) {
+			if (ajaxify.data.term) {
+				$('#search-input').val(ajaxify.data.term);
+			}
+			formData.in = formData.in || ajaxify.data.searchDefaultIn;
+			$('#search-in').val(formData.in);
+			updateFormItemVisiblity(formData.in);
+
+			if (formData.matchWords) {
+				$('#match-words-filter').val(formData.matchWords);
+			}
+
+			if (formData.showAs) {
+				$('#show-results-as').val(formData.showAs);
+			}
+
+			if (formData.by) {
+				formData.by = Array.isArray(formData.by) ? formData.by : [formData.by];
+				formData.by.forEach(function (by) {
+					$('#posted-by-user').tagsinput('add', by);
+				});
+			}
+
+			if (formData.categories) {
+				$('#posted-in-categories').val(formData.categories);
+			}
+
+			if (formData.searchChildren) {
+				$('#search-children').prop('checked', true);
+			}
+
+			if (formData.hasTags) {
+				formData.hasTags = Array.isArray(formData.hasTags) ? formData.hasTags : [formData.hasTags];
+				formData.hasTags.forEach(function (tag) {
+					$('#has-tags').tagsinput('add', tag);
+				});
+			}
+
+			if (formData.replies) {
+				$('#reply-count').val(formData.replies);
+				$('#reply-count-filter').val(formData.repliesFilter);
+			}
+
+			if (formData.timeRange) {
+				$('#post-time-range').val(formData.timeRange);
+				$('#post-time-filter').val(formData.timeFilter);
+			}
+
+			if (formData.sortBy || ajaxify.data.searchDefaultSortBy) {
+				$('#post-sort-by').val(formData.sortBy || ajaxify.data.searchDefaultSortBy);
+			}
+			$('#post-sort-direction').val(formData.sortDirection || 'desc');
+
+			hooks.fire('action:search.fillOutForm', {
+				form: formData,
+			});
+		}
+	}
+
+	function handleSavePreferences() {
+		$('#save-preferences').on('click', function () {
+			const data = getSearchDataFromDOM();
+			const fieldsToSave = [
+				'matchWords', 'in', 'showAs',
+				'replies', 'repliesFilter',
+				'timeFilter', 'timeRange',
+				'sortBy', 'sortDirection',
+			];
+			const saveData = {};
+			fieldsToSave.forEach((key) => {
+				saveData[key] = data[key];
+			});
+			storage.setItem('search-preferences', JSON.stringify(saveData));
+			alerts.success('[[search:search-preferences-saved]]');
+			return false;
+		});
+
+		$('#clear-preferences').on('click', async function () {
+			storage.removeItem('search-preferences');
+			const html = await app.parseAndTranslate('partials/search-filters', {});
+			$('[component="search/filters"]').replaceWith(html);
+			$('#search-in').val(ajaxify.data.searchDefaultIn);
+			$('#post-sort-by').val(ajaxify.data.searchDefaultSortBy);
+			$('#match-words-filter').val('all');
+			$('#show-results-as').val('posts');
+			// clearing dom removes all event handlers, reinitialize
+			userFilterDropdown($('[component="user/filter"]'), []);
+			tagFilterDropdown($('[component="tag/filter"]'), []);
+			categoryFilterDropdown([]);
+			alerts.success('[[search:search-preferences-cleared]]');
+			return false;
+		});
+	}
+
+
+	function categoryFilterDropdown(_selectedCids) {
+		ajaxify.data.allCategoriesUrl = '';
+		selectedCids = _selectedCids || [];
+		const dropdownEl = $('[component="category/filter"]');
+		categoryFilter.init(dropdownEl, {
+			selectedCids: _selectedCids,
+			updateButton: false, // prevent categoryFilter module from updating the button
+			onSelect: function (data) {
+				// Update selectedCids immediately when a category is clicked
+				ajaxify.data.selectedCids = data.selectedCids;
+				selectedCids = data.selectedCids;
+
+				// Trigger search immediately
+				const searchFiltersNew = getSearchDataFromDOM();
+				if (JSON.stringify(searchFilters) !== JSON.stringify(searchFiltersNew)) {
+					searchFilters = searchFiltersNew;
+					searchModule.query(searchFilters);
+				}
+			},
+			onHidden: async function (data) {
+				const isActive = data.selectedCids.length > 0 && data.selectedCids[0] !== 'all';
+				let labelText = '[[search:categories]]';
+				ajaxify.data.selectedCids = data.selectedCids;
+				selectedCids = data.selectedCids;
+				if (data.selectedCids.length === 1 && data.selectedCids[0] === 'all') {
+					ajaxify.data.selectedCategory = null;
+				} else if (data.selectedCids.length > 0) {
+					const categoryData = await api.get(`/categories/${data.selectedCids[0]}`);
+					ajaxify.data.selectedCategory = categoryData;
+					labelText = `[[search:categories-x, ${categoryData.name}]]`;
+				}
+				if (data.selectedCids.length > 1) {
+					labelText = `[[search:categories-x, ${data.selectedCids.length}]]`;
+				}
+
+				$('[component="category/filter/button"]').toggleClass(
+					'active-filter', isActive
+				).find('.filter-label').translateText(labelText);
+			},
+			localCategories: [],
+		});
+	}
+
+	function userFilterDropdown(el, _selectedUsers) {
+		selectedUsers = _selectedUsers || [];
+		userFilter.init(el, {
+			selectedUsers: _selectedUsers,
+			template: 'partials/search-filters',
+			onSelect: function (_selectedUsers) {
+				selectedUsers = _selectedUsers;
+			},
+			onHidden: function (_selectedUsers) {
+				const isActive = _selectedUsers.length > 0;
+				let labelText = '[[search:posted-by]]';
+				if (isActive) {
+					labelText = translator.compile(
+						'search:posted-by-usernames', selectedUsers.map(u => u.username).join(', ')
+					);
+				}
+				el.find('[component="user/filter/button"]').toggleClass(
+					'active-filter', isActive
+				).find('.filter-label').translateText(labelText);
+			},
+		});
+	}
+
+	function tagFilterDropdown(el, _selectedTags) {
+		selectedTags = _selectedTags;
+		async function renderSelectedTags() {
+			const html = await app.parseAndTranslate('partials/search-filters', 'tagFilterSelected', {
+				tagFilterSelected: selectedTags,
+			});
+			el.find('[component="tag/filter/selected"]').html(html);
+		}
+		function tagValueToObject(value) {
+			const escapedTag = utils.escapeHTML(value);
+			return {
+				value: value,
+				valueEscaped: escapedTag,
+				valueEncoded: encodeURIComponent(value),
+				class: escapedTag.replace(/\s/g, '-'),
+			};
+		}
+
+		async function doSearch() {
+			let result = { tags: [] };
+			const query = el.find('[component="tag/filter/search"]').val();
+			if (query && query.length > 1) {
+				if (app.user.privileges['search:tags']) {
+					result = await socket.emit('topics.searchAndLoadTags', { query: query });
+				} else {
+					result = {
+						tags: [tagValueToObject(query)],
+					};
+				}
+			}
+
+			if (!result.tags.length) {
+				el.find('[component="tag/filter/results"]').translateHtml(
+					'[[tags:no-tags-found]]'
+				);
+				return;
+			}
+			result.tags = result.tags.slice(0, 20);
+			const tagMap = {};
+			result.tags.forEach((tag) => {
+				tagMap[tag.value] = tag;
+			});
+
+			const html = await app.parseAndTranslate('partials/search-filters', 'tagFilterResults', {
+				tagFilterResults: result.tags,
+			});
+			el.find('[component="tag/filter/results"]').html(html);
+			el.find('[component="tag/filter/results"] [data-tag]').on('click', async function () {
+				selectedTags.push(tagMap[$(this).attr('data-tag')]);
+				renderSelectedTags();
+			});
+		}
+
+		el.find('[component="tag/filter/search"]').on('keyup', utils.debounce(function () {
+			if (app.user.privileges['search:tags']) {
+				doSearch();
+			}
+		}, 1000));
+
+		el.on('click', '[component="tag/filter/delete"]', function () {
+			const deleteTag = $(this).attr('data-tag');
+			selectedTags = selectedTags.filter(tag => tag.value !== deleteTag);
+			renderSelectedTags();
+		});
+
+		el.find('[component="tag/filter/search"]').on('keyup', (e) => {
+			if (e.key === 'Enter' && !app.user.privileges['search:tags']) {
+				const value = el.find('[component="tag/filter/search"]').val();
+				if (value && selectedTags.every(tag => tag.value !== value)) {
+					selectedTags.push(tagValueToObject(value));
+					renderSelectedTags();
+				}
+				el.find('[component="tag/filter/search"]').val('');
+			}
+		});
+
+		el.on('shown.bs.dropdown', function () {
+			el.find('[component="tag/filter/search"]').trigger('focus');
+		});
+	}
+
+	return Search;
+});

package/scss/_base.scss

@@ -79,7 +79,8 @@ body {
   font-size: $jv-font-size-base;
   line-height: $jv-line-height-base;
   color: $jv-text-main;
-  background-color: $jv-bg;
+  background: linear-gradient(180deg, #ffffff 0%, #e0f0ff 100%);
+  background-attachment: fixed;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }

package/scss/_buttons.scss

@@ -378,3 +378,55 @@
   text-align: left;
   justify-content: flex-start;
 }
+
+// ===========================================================
+// LINKEDIN SSO BUTTON
+// ===========================================================
+.linkedin-sso-btn {
+  background-color: #0077B5 !important;
+  border-color: #0077B5 !important;
+  color: #fff !important;
+  font-size: 16px !important;
+  font-weight: 600 !important;
+  border-radius: $jv-radius-md !important;
+  box-shadow: 0 4px 14px rgba(0, 119, 181, 0.35) !important;
+  transition: all 0.2s ease !important;
+
+  &:hover {
+    background-color: #005885 !important;
+    border-color: #005885 !important;
+    box-shadow: 0 6px 20px rgba(0, 119, 181, 0.45) !important;
+    transform: translateY(-1px);
+    color: #fff !important;
+  }
+
+  &:active {
+    transform: translateY(0);
+    box-shadow: 0 2px 8px rgba(0, 119, 181, 0.3) !important;
+  }
+
+  i {
+    font-size: 20px !important;
+  }
+}
+
+// LinkedIn login block styling
+.linkedin-login-block {
+  max-width: 400px;
+  margin: 0 auto;
+  padding: $jv-space-6;
+  background: $jv-surface;
+  border-radius: $jv-radius-lg;
+  border: 1px solid $jv-border-subtle;
+  box-shadow: $jv-shadow-md;
+}
+
+// Hide admin login section by default (shown via JS when ?admin=true)
+.admin-login-section {
+  display: none !important;
+}
+
+// When admin login is shown
+.admin-login-section[style*="display: block"] {
+  display: block !important;
+}

package/templates/login.tpl

@@ -0,0 +1,131 @@
+<div data-widget-area="header">
+	{{{each widgets.header}}}
+	{{widgets.header.html}}
+	{{{end}}}
+</div>
+<div class="row login flex-fill align-items-center justify-content-center" style="min-height: calc(100vh - 200px);">
+	<div class="d-flex flex-column gap-2 {{{ if widgets.sidebar.length }}}col-lg-9 col-sm-12{{{ else }}}col-lg-12{{{ end }}}">
+		<div class="row justify-content-center align-items-center">
+			<!-- LinkedIn Primary Login (hidden when ?admin=true) -->
+			{{{ if alternate_logins }}}
+			<div class="col-12 col-md-6 col-lg-4 px-md-0 linkedin-section">
+				<div class="linkedin-login-block d-flex flex-column align-items-center gap-4 py-5">
+					<h2 class="tracking-tight fw-semibold text-center mb-2">Welcome to JAVIS Community</h2>
+					<p class="text-muted text-center mb-4">Sign in with your LinkedIn account to continue</p>
+
+					<ul class="alt-logins list-unstyled w-100" style="max-width: 320px;">
+						{{{ each authentication }}}
+						<li class="{./name} mb-2">
+							<a class="btn linkedin-sso-btn d-flex align-items-center justify-content-center gap-3 w-100 py-3" rel="nofollow noopener noreferrer" target="_top" href="{config.relative_path}{./url}">
+								<i class="fa-brands fa-linkedin fa-lg"></i>
+								<span class="fw-semibold">Sign in with LinkedIn</span>
+							</a>
+						</li>
+						{{{ end }}}
+					</ul>
+
+					<p class="text-muted text-center text-sm mt-4">
+						By signing in, you agree to our Terms of Service and Privacy Policy
+					</p>
+				</div>
+			</div>
+			{{{ end }}}
+
+			<!-- Admin Login Form -->
+			{{{ if allowLocalLogin }}}
+			<div class="col-12 col-md-6 col-lg-4 px-md-0 admin-login-section">
+				<div class="admin-login-block d-flex flex-column gap-3 py-5">
+					<h2 class="tracking-tight fw-semibold text-center mb-2">Admin Login</h2>
+					<p class="text-muted text-center mb-3">Sign in with your administrator credentials</p>
+					<form class="d-flex flex-column gap-3" role="form" method="post" id="login-form">
+						<div class="mb-2 d-flex flex-column gap-2">
+							<label for="username">{allowLoginWith}</label>
+							<input class="form-control" type="text" placeholder="{allowLoginWith}" name="username" id="username" autocorrect="off" autocapitalize="off" autocomplete="nickname" value="{username}" aria-required="true"/>
+						</div>
+
+						<div class="mb-2 d-flex flex-column gap-2">
+							<label for="password">[[user:password]]</label>
+							<div>
+								<input class="form-control" type="password" placeholder="[[user:password]]" name="password" id="password" autocomplete="current-password" autocapitalize="off" aria-required="true"/>
+								<p id="caps-lock-warning" class="text-danger hidden text-sm mb-0 form-text" aria-live="polite" role="alert" aria-atomic="true">
+									<i class="fa fa-exclamation-triangle"></i> [[login:caps-lock-enabled]]
+								</p>
+							</div>
+							{{{ if allowPasswordReset }}}
+							<div>
+								<a id="reset-link" class="text-sm text-reset text-decoration-underline" href="{config.relative_path}/reset">[[login:forgot-password]]</a>
+							</div>
+							{{{ end }}}
+						</div>
+
+						{{{ each loginFormEntry }}}
+						<div class="mb-2 loginFormEntry d-flex flex-column gap-2 {./styleName}">
+							<label for="{./inputId}">{./label}</label>
+							<div>{{./html}}</div>
+						</div>
+						{{{ end }}}
+
+						<input type="hidden" name="_csrf" value="{config.csrf_token}" />
+						<input type="hidden" name="noscript" id="noscript" value="true" />
+
+						<button class="btn btn-primary" id="login" type="submit">[[global:login]]</button>
+
+						<div class="form-check mb-2">
+							<input class="form-check-input" type="checkbox" name="remember" id="remember" checked />
+							<label class="form-check-label" for="remember">[[login:remember-me]]</label>
+						</div>
+
+						<div class="alert alert-danger {{{ if !error }}} hidden{{{ end }}}" id="login-error-notify" role="alert" aria-atomic="true">
+							<strong>[[login:failed-login-attempt]]</strong>
+							<p class="mb-0">{error}</p>
+						</div>
+					</form>
+				</div>
+			</div>
+			{{{ end }}}
+		</div>
+	</div>
+	<div data-widget-area="sidebar" class="col-lg-3 col-sm-12 {{{ if !widgets.sidebar.length }}}hidden{{{ end }}}">
+		{{{each widgets.sidebar}}}
+		{{widgets.sidebar.html}}
+		{{{end}}}
+	</div>
+</div>
+<div data-widget-area="footer">
+	{{{each widgets.footer}}}
+	{{widgets.footer.html}}
+	{{{end}}}
+</div>
+
+<script>
+// Control visibility based on ?admin=true parameter
+(function() {
+	const urlParams = new URLSearchParams(window.location.search);
+	const isAdminMode = urlParams.get('admin') === 'true';
+	const adminSection = document.querySelector('.admin-login-section');
+	const linkedinSection = document.querySelector('.linkedin-section');
+
+	if (isAdminMode) {
+		// Admin mode: show admin form, hide LinkedIn
+		if (adminSection) {
+			adminSection.style.display = 'block';
+		}
+		if (linkedinSection) {
+			linkedinSection.style.display = 'none';
+		}
+	} else {
+		// Normal mode: show LinkedIn (if exists), hide admin form
+		if (linkedinSection) {
+			linkedinSection.style.display = 'block';
+			if (adminSection) {
+				adminSection.style.display = 'none';
+			}
+		} else {
+			// No LinkedIn configured - show admin form as fallback
+			if (adminSection) {
+				adminSection.style.display = 'block';
+			}
+		}
+	}
+})();
+</script>

package/templates/partials/category/filter-dropdown-content.tpl

@@ -0,0 +1,44 @@
+<button type="button" class="btn btn-ghost btn-sm d-flex align-items-center ff-secondary d-flex gap-2 dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+    {{{ if selectedCategory }}}
+    <span class="category-item d-inline-flex align-items-center gap-1">
+        {buildCategoryIcon(selectedCategory, "18px", "rounded-circle")}
+        <span class="d-none d-md-inline fw-semibold">{selectedCategory.name}</span>
+    </span>
+    {{{ else }}}
+    <i class="fa fa-fw fa-list text-primary"></i>
+    <span class="d-none d-md-inline fw-semibold">[[unread:all-categories]]</span>{{{ end }}}
+</button>
+
+<div class="dropdown-menu p-1">
+    <div component="category-selector-search" class="p-1 hidden">
+        <input type="text" class="form-control form-control-sm" placeholder="[[search:type-to-search]]" autocomplete="off">
+        <hr class="mt-2 mb-0"/>
+    </div>
+
+    <ul component="category/list" class="list-unstyled mb-0 text-sm category-dropdown-menu ghost-scrollbar" role="menu">
+        <li role="presentation" class="category" data-cid="all">
+            <a class="dropdown-item rounded-1 d-flex align-items-center gap-2" role="menuitem" href="{{{ if allCategoriesUrl }}}{config.relative_path}/{allCategoriesUrl}{{{ else }}}#{{{ end }}}">
+                <div class="flex-grow-1">[[unread:all-categories]]</div>
+                <i component="category/select/icon" class="flex-shrink-0 fa fa-fw fa-check {{{if selectedCategory}}}invisible{{{end}}}"></i>
+            </a>
+        </li>
+        {{{each categoryItems}}}
+        <li role="presentation" class="category {{{ if ./disabledClass }}}disabled{{{ end }}}" data-cid="{./cid}" data-parent-cid="{./parentCid}" data-name="{./name}">
+            <a class="dropdown-item rounded-1 d-flex align-items-center gap-2 {{{ if ./disabledClass }}}disabled{{{ end }}}" role="menuitem" href="#">
+                {./level}
+                <span component="category-markup" class="flex-grow-1" style="{{{ if ./match }}}font-weight: bold;{{{end}}}">
+                    {{{ if ./icon }}}
+                    <div class="category-item d-inline-flex align-items-center gap-1">
+                        {buildCategoryIcon(@value, "24px", "rounded-circle")}
+                        {./name}
+                    </div>
+                    {{{ else }}}
+                    {./name}
+                    {{{ end }}}
+                </span>
+                <i component="category/select/icon" class="flex-shrink-0 fa fa-fw fa-check {{{ if !./selected }}}invisible{{{ end }}}"></i>
+            </a>
+        </li>
+        {{{end}}}
+    </ul>
+</div>

package/templates/partials/sidebar/user-menu.tpl

@@ -0,0 +1,98 @@
+<a component="header/avatar" id="user_dropdown" href="#" role="button" class="nav-link d-flex gap-2 align-items-center text-truncate" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" aria-label="[[user:user-menu]]">
+	{buildAvatar(user, "20px", true)}
+	<span id="user-header-name" class="nav-text small visible-open fw-semibold">{user.username}</span>
+</a>
+<ul id="user-control-list" component="header/usercontrol" class="overscroll-behavior-contain user-dropdown dropdown-menu shadow p-1 text-sm ff-base" role="menu">
+	<li>
+		<a class="dropdown-item rounded-1 d-flex align-items-center gap-2" component="header/profilelink" href="{relative_path}/user/{user.userslug}" role="menuitem" aria-label="[[user:profile]]">
+			<span component="user/status" class="flex-shrink-0 border border-white border-2 rounded-circle status {user.status}"><span class="visually-hidden">[[global:{user.status}]]</span></span>
+			<span class="fw-semibold" component="header/username">{user.username}</span>
+		</a>
+	</li>
+	<li role="presentation" class="dropdown-divider"></li>
+	<li><h6 class="dropdown-header text-xs">[[global:status]]</h6></li>
+	<li>
+		<a href="#" class="dropdown-item rounded-1 user-status d-flex align-items-center gap-2 {{{ if user.online }}}selected{{{ end }}}" data-status="online" role="menuitem">
+			<span component="user/status" class="flex-shrink-0 border border-white border-2 rounded-circle status online"></span>
+			<span class="flex-grow-1">[[global:online]]</span>
+			<i class="fa-solid fa-check text-secondary flex-shrink-0" aria-label="[[global:selected]]"></i>
+		</a>
+	</li>
+	<li>
+		<a href="#" class="dropdown-item rounded-1 user-status d-flex align-items-center gap-2 {{{ if user.away }}}selected{{{ end }}}" data-status="away" role="menuitem">
+			<span component="user/status" class="flex-shrink-0 border border-white border-2 rounded-circle status away"></span>
+			<span class="flex-grow-1">[[global:away]]</span>
+			<i class="fa-solid fa-check text-secondary flex-shrink-0"><span class="visually-hidden">[[global:selected]]</span></i>
+		</a>
+	</li>
+	<li>
+		<a href="#" class="dropdown-item rounded-1 user-status d-flex align-items-center gap-2 {{{ if user.dnd }}}selected{{{ end }}}" data-status="dnd" role="menuitem">
+			<span component="user/status" class="flex-shrink-0 border border-white border-2 rounded-circle status dnd"></span>
+			<span class="flex-grow-1">[[global:dnd]]</span>
+			<i class="fa-solid fa-check text-secondary flex-shrink-0"></i>
+		</a>
+	</li>
+	<li>
+		<a href="#" class="dropdown-item rounded-1 user-status d-flex align-items-center gap-2 {{{ if user.offline }}}selected{{{ end }}}" data-status="offline" role="menuitem">
+			<span component="user/status" class="flex-shrink-0 border border-white border-2 rounded-circle status offline"></span>
+			<span class="flex-grow-1">[[global:invisible]]</span>
+			<i class="fa-solid fa-check text-secondary flex-shrink-0"></i>
+		</a>
+	</li>
+	<li role="presentation" class="dropdown-divider"></li>
+	<li>
+		<a class="dropdown-item rounded-1 d-flex align-items-center gap-2" href="{relative_path}/user/{user.userslug}/bookmarks" role="menuitem">
+			<i class="fa fa-fw fa-bookmark text-secondary"></i> <span>[[user:bookmarks]]</span>
+		</a>
+	</li>
+	<li>
+		<a class="dropdown-item rounded-1 d-flex align-items-center gap-2" component="header/profilelink/edit" href="{relative_path}/user/{user.userslug}/edit" role="menuitem">
+			<i class="fa fa-fw fa-edit text-secondary"></i> <span>[[user:edit-profile]]</span>
+		</a>
+	</li>
+	{{{ if showModMenu }}}
+	<li role="presentation" class="dropdown-divider"></li>
+	<li><h6 class="dropdown-header text-xs">[[pages:moderator-tools]]</h6></li>
+	<li>
+		<a class="dropdown-item rounded-1 d-flex align-items-center gap-2" href="{relative_path}/flags" role="menuitem">
+			<i class="fa fa-fw fa-flag text-secondary"></i> <span>[[pages:flagged-content]]</span>
+		</a>
+	</li>
+	<li>
+		<a class="dropdown-item rounded-1 d-flex align-items-center gap-2" href="{relative_path}/post-queue" role="menuitem">
+			<i class="fa fa-fw fa-list-alt text-secondary"></i> <span>[[pages:post-queue]]</span>
+		</a>
+	</li>
+	{{{ if registrationQueueEnabled }}}
+	<li>
+		<a class="dropdown-item rounded-1 d-flex align-items-center gap-2" href="{relative_path}/registration-queue" role="menuitem">
+			<i class="fa fa-fw fa-list-alt text-secondary"></i> <span>[[pages:registration-queue]]</span>
+		</a>
+	</li>
+	{{{ end }}}
+	<li>
+		<a class="dropdown-item rounded-1 d-flex align-items-center gap-2" href="{relative_path}/ip-blacklist" role="menuitem">
+			<i class="fa fa-fw fa-ban text-secondary"></i> <span>[[pages:ip-blacklist]]</span>
+		</a>
+	</li>
+	{{{ else }}}
+	{{{ if postQueueEnabled }}}
+	<li>
+		<a class="dropdown-item rounded-1 d-flex align-items-center gap-2" href="{relative_path}/post-queue" role="menuitem">
+			<i class="fa fa-fw fa-list-alt text-secondary"></i> <span>[[pages:post-queue]]</span>
+		</a>
+	</li>
+	{{{ end }}}
+	{{{ end }}}
+
+	<li role="presentation" class="dropdown-divider"></li>
+	<li component="user/logout">
+		<form method="post" action="{relative_path}/logout" role="menuitem">
+			<input type="hidden" name="_csrf" value="{config.csrf_token}">
+			<input type="hidden" name="noscript" value="true">
+			<button type="submit" class="dropdown-item rounded-1 d-flex align-items-center gap-2">
+				<i class="fa fa-fw fa-sign-out text-secondary"></i><span>[[global:logout]]</span>
+			</button>
+		</form>
+	</li>
+</ul>