@okjavis/nodebb-theme-javis 5.0.7 → 6.0.0

package/package.json

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

package/plugin.json

@@ -19,7 +19,10 @@
   ],
   "modules": {
     "../admin/plugins/javis.js": "public/admin.js",
-    "forum/search": "public/src/client/search.js"
+    "forum/search": "public/src/client/search.js",
+    "forum/category": "public/src/client/category.js",
+    "forum/world": "public/src/client/world.js",
+    "forum/account/categories": "public/src/client/account/categories.js"
   },
   "templates": "templates",
   "screenshot": "screenshot.png",

package/public/src/client/account/categories.js

@@ -0,0 +1,57 @@
+'use strict';
+
+
+define('forum/account/categories', ['forum/account/header', 'alerts', 'api'], function (header, alerts, api) {
+	const Categories = {};
+
+	Categories.init = function () {
+		header.init();
+
+		ajaxify.data.categories.forEach(function (category) {
+			handleIgnoreWatch(category.cid);
+		});
+
+		$('[component="category/watch/all"]').find(
+			'[component="category/watching"], [component="category/tracking"]'
+		).on('click', async (e) => {
+			const cids = [];
+			const state = e.currentTarget.getAttribute('data-state');
+			const { uid } = ajaxify.data;
+			$('[data-parent-cid="0"]').each(function (index, el) {
+				cids.push($(el).attr('data-cid'));
+			});
+
+			let modified_cids = await Promise.all(cids.map(async cid => api.put(`/categories/${cid}/watch`, { state, uid })));
+			modified_cids = modified_cids
+				.reduce((memo, cur) => memo.concat(cur.modified), [])
+				.filter((cid, idx, arr) => arr.indexOf(cid) === idx);
+
+			updateDropdowns(modified_cids, state);
+		});
+	};
+
+	function handleIgnoreWatch(cid) {
+		const category = $('[data-cid="' + cid + '"]');
+		category.find('[component="category/watching"]').on('click', async (e) => {
+			const isWatching = category.find('[component="category/watching/check"]').hasClass('fa-check');
+			const state = isWatching ? 'tracking' : 'watching';
+			const { uid } = ajaxify.data;
+
+			const { modified } = await api.put(`/categories/${cid}/watch`, { state, uid });
+			updateDropdowns(modified, state);
+			alerts.success('[[category:' + state + '.message]]');
+		});
+	}
+
+	function updateDropdowns(modified_cids, state) {
+		modified_cids.forEach(function (cid) {
+			const category = $('[data-cid="' + cid + '"]');
+			const nowWatching = state === 'watching';
+			category.find('[component="category/watching/menu"]').toggleClass('hidden', !nowWatching);
+			category.find('[component="category/watching/check"]').toggleClass('fa-check', nowWatching);
+			category.find('[component="category/notwatching/menu"]').toggleClass('hidden', nowWatching);
+		});
+	}
+
+	return Categories;
+});

package/public/src/client/category.js

@@ -0,0 +1,148 @@
+'use strict';
+
+define('forum/category', [
+	'forum/infinitescroll',
+	'navigator',
+	'topicList',
+	'sort',
+	'categorySelector',
+	'hooks',
+	'alerts',
+	'api',
+	'clipboard',
+], function (infinitescroll, navigator, topicList, sort, categorySelector, hooks, alerts, api, clipboard) {
+	const Category = {};
+
+	$(window).on('action:ajaxify.start', function (ev, data) {
+		if (!String(data.url).startsWith('category/')) {
+			navigator.disable();
+		}
+	});
+
+	Category.init = function () {
+		const cid = ajaxify.data.cid;
+
+		app.enterRoom('category_' + cid);
+
+		topicList.init('category', loadTopicsAfter);
+
+		sort.handleSort('categoryTopicSort', 'category/' + ajaxify.data.slug);
+
+		if (!config.usePagination) {
+			navigator.init('[component="category/topic"]', ajaxify.data.topic_count, Category.toTop, Category.toBottom);
+		} else {
+			navigator.disable();
+		}
+
+		handleScrollToTopicIndex();
+
+		handleIgnoreWatch(cid);
+
+		handleLoadMoreSubcategories();
+
+		handleDescription();
+
+		categorySelector.init($('[component="category-selector"]'), {
+			privilege: 'find',
+			parentCid: ajaxify.data.cid,
+			onSelect: function (category) {
+				ajaxify.go('/category/' + category.cid);
+			},
+		});
+
+		new clipboard('[data-clipboard-text]');
+
+		hooks.fire('action:topics.loaded', { topics: ajaxify.data.topics });
+		hooks.fire('action:category.loaded', { cid: ajaxify.data.cid });
+	};
+
+	function handleScrollToTopicIndex() {
+		let topicIndex = ajaxify.data.topicIndex;
+		if (topicIndex && utils.isNumber(topicIndex)) {
+			topicIndex = Math.max(0, parseInt(topicIndex, 10));
+			if (topicIndex && window.location.search.indexOf('page=') === -1) {
+				navigator.scrollToElement($('[component="category/topic"][data-index="' + topicIndex + '"]'), true, 0);
+			}
+		}
+	}
+
+	function handleIgnoreWatch(cid) {
+		$('[component="category/watching"]').on('click', function () {
+			const isWatching = $('[component="category/watching/check"]').hasClass('fa-check');
+			const state = isWatching ? 'tracking' : 'watching';
+
+			api.put(`/categories/${encodeURIComponent(cid)}/watch`, { state }, (err) => {
+				if (err) {
+					return alerts.error(err);
+				}
+
+				const nowWatching = state === 'watching';
+				$('[component="category/watching/menu"]').toggleClass('hidden', !nowWatching);
+				$('[component="category/watching/check"]').toggleClass('fa-check', nowWatching);
+				$('[component="category/notwatching/menu"]').toggleClass('hidden', nowWatching);
+
+				alerts.success('[[category:' + state + '.message]]');
+			});
+		});
+	}
+
+	function handleLoadMoreSubcategories() {
+		$('[component="category/load-more-subcategories"]').on('click', async function () {
+			const btn = $(this);
+			const { categories: data } = await api.get(`/categories/${ajaxify.data.cid}/children?start=${ajaxify.data.nextSubCategoryStart}`);
+			btn.toggleClass('hidden', !data.length || data.length < ajaxify.data.subCategoriesPerPage);
+			if (!data.length) {
+				return;
+			}
+			app.parseAndTranslate('category', 'children', { children: data }, function (html) {
+				html.find('.timeago').timeago();
+				$('[component="category/subcategory/container"]').append(html);
+				ajaxify.data.nextSubCategoryStart += ajaxify.data.subCategoriesPerPage;
+				ajaxify.data.subCategoriesLeft -= data.length;
+				btn.toggleClass('hidden', ajaxify.data.subCategoriesLeft <= 0)
+					.translateText('[[category:x-more-categories, ' + ajaxify.data.subCategoriesLeft + ']]');
+			});
+
+			return false;
+		});
+	}
+
+	function handleDescription() {
+		const fadeEl = document.querySelector('.description.clamp-fade-4');
+		if (!fadeEl) {
+			return;
+		}
+
+		fadeEl.addEventListener('click', () => {
+			const state = fadeEl.classList.contains('line-clamp-4');
+			fadeEl.classList.toggle('line-clamp-4', !state);
+		});
+	}
+
+	Category.toTop = function () {
+		navigator.scrollTop(0);
+	};
+
+	Category.toBottom = async () => {
+		const { count } = await api.get(`/categories/${encodeURIComponent(ajaxify.data.category.cid)}/count`);
+		navigator.scrollBottom(count - 1);
+	};
+
+	function loadTopicsAfter(after, direction, callback) {
+		callback = callback || function () {};
+
+		hooks.fire('action:topics.loading');
+		const params = utils.params();
+		infinitescroll.loadMore(`/categories/${encodeURIComponent(ajaxify.data.cid)}/topics`, {
+			after: after,
+			direction: direction,
+			query: params,
+			categoryTopicSort: params.sort || config.categoryTopicSort,
+		}, function (data, done) {
+			hooks.fire('action:topics.loaded', { topics: data.topics });
+			callback(data, done);
+		});
+	}
+
+	return Category;
+});

package/public/src/client/world.js

@@ -0,0 +1,112 @@
+'use strict';
+
+define('forum/world', ['topicList', 'search', 'sort', 'hooks', 'alerts', 'api', 'bootbox'], function (topicList, search, sort, hooks, alerts, api, bootbox) {
+	const World = {};
+
+	World.init = function () {
+		app.enterRoom('world');
+		topicList.init('world');
+
+		sort.handleSort('categoryTopicSort', 'world');
+
+		handleIgnoreWatch(-1);
+		handleHelp();
+		handleCategories();
+
+		search.enableQuickSearch({
+			searchElements: {
+				inputEl: $('[component="category-search"]'),
+				resultEl: $('.world .quick-search-container'),
+			},
+			searchOptions: {
+				in: 'categories',
+			},
+			dropdown: {
+				maxWidth: '400px',
+				maxHeight: '350px',
+			},
+			hideOnNoMatches: false,
+		});
+
+		hooks.fire('action:topics.loaded', { topics: ajaxify.data.topics });
+		hooks.fire('action:category.loaded', { cid: ajaxify.data.cid });
+	};
+
+	function handleIgnoreWatch(cid) {
+		$('[component="category/watching"]').on('click', function () {
+			const isWatching = $('[component="category/watching/check"]').hasClass('fa-check');
+			const state = isWatching ? 'tracking' : 'watching';
+
+			api.put(`/categories/${cid}/watch`, { state }, (err) => {
+				if (err) {
+					return alerts.error(err);
+				}
+
+				const nowWatching = state === 'watching';
+				$('[component="category/watching/menu"]').toggleClass('hidden', !nowWatching);
+				$('[component="category/watching/check"]').toggleClass('fa-check', nowWatching);
+				$('[component="category/notwatching/menu"]').toggleClass('hidden', nowWatching);
+
+				alerts.success('[[category:' + state + '.message]]');
+			});
+		});
+	}
+
+	function handleHelp() {
+		const trigger = document.getElementById('world-help');
+		if (!trigger) {
+			return;
+		}
+
+		const content = [
+			'<p class="lead">[[world:help.intro]]</p>',
+			'<p>[[world:help.fediverse]]</p>',
+			'<p>[[world:help.build]]</p>',
+			'<p>[[world:help.federating]]</p>',
+			'<p>[[world:help.next-generation]]</p>',
+		];
+
+		trigger.addEventListener('click', () => {
+			bootbox.dialog({
+				title: '[[world:help.title]]',
+				message: content.join('\n'),
+				size: 'large',
+			});
+		});
+	}
+
+	function handleCategories() {
+		// const optionsEl = document.getElementById('category-options');
+		// const dropdownEl = optionsEl.querySelector('ul');
+		const showEl = document.getElementById('show-categories');
+		const hideEl = document.getElementById('hide-categories');
+		const categoriesEl = document.querySelector('.categories-list');
+		if (![showEl, hideEl, categoriesEl].every(Boolean)) {
+			return;
+		}
+
+		const update = () => {
+			showEl.classList.toggle('hidden', visibility);
+			hideEl.classList.toggle('hidden', !visibility);
+			categoriesEl.classList.toggle('hidden', !visibility);
+			localStorage.setItem('world:show-categories', visibility);
+		};
+
+		let visibility = localStorage.getItem('world:show-categories');
+		console.log('got value', visibility);
+		visibility = visibility ? visibility === 'true' : true; // localStorage values are strings
+		update();
+
+		showEl.addEventListener('click', () => {
+			visibility = true;
+			update();
+		});
+
+		hideEl.addEventListener('click', () => {
+			visibility = false;
+			update();
+		});
+	}
+
+	return World;
+});

package/scss/_header.scss

@@ -238,12 +238,46 @@
 }
 
 // ===========================================================
-// NOTIFICATION DROPDOWN - Reduced width for better fit
+// NOTIFICATION DROPDOWN - Reduced width with optimized text
 // ===========================================================
 .notifications-dropdown {
   min-width: 300px !important;
   max-width: 340px !important;
   width: 300px !important;
+  padding: $jv-space-2 !important;
+
+  // Individual notification items (actual class is .unread or .read)
+  .unread, .read {
+    padding: $jv-space-2 !important;
+
+    // Make hover effect rectangular instead of pill-shaped
+    .btn, .btn-ghost {
+      border-radius: $jv-radius-sm !important;
+    }
+
+    // The link containing notification text
+    a[component="notifications/item/link"] {
+      font-size: 12px !important;
+      line-height: 1.5 !important;
+      word-wrap: break-word !important;
+      overflow-wrap: break-word !important;
+      word-break: break-word !important;
+      white-space: normal !important;
+      text-overflow: clip !important;
+      display: block !important;
+
+      strong {
+        font-size: 12px !important;
+        font-weight: 600 !important;
+      }
+    }
+
+    // Timestamp
+    .text-xs.text-muted {
+      font-size: 11px !important;
+      margin-top: $jv-space-1 !important;
+    }
+  }
 }
 
 // ===========================================================
@@ -315,6 +349,46 @@
       min-width: 280px !important;
       max-width: 90vw !important;
       width: 280px !important;
+      padding: $jv-space-2 !important;
+
+      // Even smaller text on mobile for better fit
+      .notification-item,
+      [component="notifications/item"],
+      .list-group-item {
+        padding: $jv-space-2 $jv-space-3 !important;
+        font-size: 11px !important;
+        line-height: 1.3 !important;
+
+        p, .notification-text, .text-muted, div {
+          font-size: 11px !important;
+          line-height: 1.3 !important;
+          white-space: normal !important;
+        }
+
+        time, .timeago, small {
+          font-size: 10px !important;
+          margin-top: 4px !important;
+        }
+
+        strong, .fw-semibold, a {
+          font-size: 11px !important;
+          white-space: normal !important;
+        }
+      }
+
+      .dropdown-header {
+        padding: $jv-space-2 !important;
+        font-size: 11px !important;
+      }
+
+      .dropdown-footer,
+      .list-group-item:last-child {
+        padding: $jv-space-2 !important;
+
+        a, button {
+          font-size: 11px !important;
+        }
+      }
     }
   }
 }

package/static/lib/theme.js

@@ -57,6 +57,9 @@
     // Fix mobile category dropdown positioning in composer
     fixMobileComposerCategoryDropdown();
 
+    // Fix notification dropdown inline styles
+    fixNotificationDropdown();
+
     // Initialize share button handlers
     initShareHandlers();
 
@@ -67,6 +70,7 @@
       initParentPostNavigation();
       fixMobileFeedCategoryDropdown();
       fixMobileComposerCategoryDropdown();
+      fixNotificationDropdown();
       initPostHoverActions();
       initFeedComposerPromptHandler();
       initTopicListVoting();
@@ -884,6 +888,75 @@
     console.log('JAVIS: Composer mobile fix event listener attached');
   }
 
+  /**
+   * Fix notification dropdown width and text styling
+   * Removes Popper inline width styles and applies proper text wrapping
+   */
+  function fixNotificationDropdown() {
+    console.log('JAVIS: fixNotificationDropdown called');
+
+    // Find the notification component
+    var $notificationComponent = $('[component="notifications"]');
+    if (!$notificationComponent.length) {
+      console.log('JAVIS: Notification component not found');
+      return;
+    }
+
+    console.log('JAVIS: Notification component found, setting up fix');
+
+    // Listen for when dropdown is shown
+    $notificationComponent.off('shown.bs.dropdown.javisNotificationFix').on('shown.bs.dropdown.javisNotificationFix', function() {
+      console.log('JAVIS: Notification dropdown shown');
+
+      // Use requestAnimationFrame to ensure we override after Popper runs
+      requestAnimationFrame(function() {
+        var $dropdownMenu = $notificationComponent.find('.notifications-dropdown');
+
+        if ($dropdownMenu.length) {
+          // Remove width-related inline styles from dropdown
+          var currentStyle = $dropdownMenu.attr('style') || '';
+          var newStyle = currentStyle
+            .replace(/min-width:\s*[^;]+;?/gi, '')
+            .replace(/max-width:\s*[^;]+;?/gi, '')
+            .replace(/width:\s*[^;]+;?/gi, '');
+          $dropdownMenu.attr('style', newStyle);
+
+          // Apply styling to notification items (.unread and .read are the actual classes)
+          $dropdownMenu.find('.unread, .read').css({
+            'padding': '8px'
+          });
+
+          // Style the notification link text
+          $dropdownMenu.find('a[component="notifications/item/link"]').css({
+            'font-size': '12px',
+            'line-height': '1.5',
+            'word-wrap': 'break-word',
+            'overflow-wrap': 'break-word',
+            'word-break': 'break-word',
+            'white-space': 'normal',
+            'text-overflow': 'clip',
+            'display': 'block'
+          });
+
+          // Style strong tags within notifications
+          $dropdownMenu.find('a[component="notifications/item/link"] strong').css({
+            'font-size': '12px',
+            'font-weight': '600'
+          });
+
+          // Style timestamps
+          $dropdownMenu.find('.text-xs.text-muted').css({
+            'font-size': '11px'
+          });
+
+          console.log('JAVIS: Notification dropdown styling applied');
+        }
+      });
+    });
+
+    console.log('JAVIS: Notification dropdown fix event listener attached');
+  }
+
   /**
    * Initialize immediate category filter navigation on feed page
    * When a category is selected, navigate immediately instead of waiting for dropdown close

package/templates/account/categories.tpl

@@ -0,0 +1,40 @@
+<!-- IMPORT partials/account/header.tpl -->
+
+<div class="d-flex justify-content-between align-items-center mb-3">
+	<div class="d-flex gap-1">
+		<h3 class="fw-semibold fs-5 mb-0">{title}</h3>
+	</div>
+
+	<div class="d-flex gap-1">
+		<div class="btn-group bottom-sheet" component="category/watch/all">
+			<button class="btn btn-ghost btn-sm ff-secondary fw-semibold dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" type="button">
+				<span>[[user:change-all]]</span>
+			</button>
+			<ul class="dropdown-menu p-1 text-sm dropdown-menu-end" role="menu">
+				<li>
+					<a class="dropdown-item rounded-1 d-flex align-items-center gap-2 p-2" href="#" component="category/watching" data-state="watching" role="menuitem">
+						<i class="flex-shrink-0 fa fa-fw fa-bell text-secondary"></i>
+						<span class="fw-semibold">[[category:watching]]</span>
+					</a>
+				</li>
+				<li>
+					<a class="dropdown-item rounded-1 d-flex align-items-center gap-2 p-2" href="#" component="category/tracking" data-state="tracking" role="menuitem">
+						<i class="flex-shrink-0 fa fa-fw fa-bell-o text-secondary"></i>
+						<span class="fw-semibold">[[category:not-watching]]</span>
+					</a>
+				</li>
+			</ul>
+		</div>
+	</div>
+</div>
+
+<div>
+	<ul class="categories list-unstyled" itemscope itemtype="http://www.schema.org/ItemList">
+		{{{each categories}}}
+		<!-- IMPORT partials/account/category-item.tpl -->
+		{{{end}}}
+	</ul>
+	<!-- IMPORT partials/paginator.tpl -->
+</div>
+
+<!-- IMPORT partials/account/footer.tpl -->

package/templates/account/posts.tpl

@@ -0,0 +1,32 @@
+<!-- IMPORT partials/account/header.tpl -->
+
+<div class="d-flex flex-wrap justify-content-between align-items-center gap-2 mb-3">
+	<h3 class="fw-semibold fs-5 mb-0">[[global:posts]]</h3>
+	<div class="d-flex flex-wrap gap-1">
+		<a href="{config.relative_path}/user/{userslug}/posts" class="btn btn-ghost btn-sm ff-secondary fw-semibold {{{ if template.account/posts }}}active{{{ end }}}">[[global:header.recent]]</a>
+		{{{ if !reputation:disabled }}}
+		<a href="{config.relative_path}/user/{userslug}/best"class="btn btn-ghost btn-sm ff-secondary fw-semibold {{{ if template.account/best }}}active{{{ end }}}">[[global:best]]</a>
+		<a href="{config.relative_path}/user/{userslug}/controversial" class="btn btn-ghost btn-sm ff-secondary fw-semibold {{{ if template.account/controversial }}}active{{{ end }}}">[[global:controversial]]</a>
+		{{{ if canEdit }}}
+		<a href="{config.relative_path}/user/{userslug}/upvoted" class="btn btn-ghost btn-sm ff-secondary fw-semibold {{{ if template.account/upvoted }}}active{{{ end }}}">[[global:upvoted]]</a>
+		{{{ if !downvote:disabled }}}
+		<a href="{config.relative_path}/user/{userslug}/downvoted" class="btn btn-ghost btn-sm ff-secondary fw-semibold {{{ if template.account/downvoted }}}active{{{ end }}}">[[global:downvoted]]</a>
+		{{{ end }}}
+		{{{ end }}}
+		{{{ end }}}
+	</div>
+</div>
+
+{{{ if !posts.length }}}
+<div class="alert alert-warning text-center">{noItemsFoundKey}</div>
+{{{ end }}}
+
+<div>
+	<!-- IMPORT partials/posts_list.tpl -->
+
+	{{{ if config.usePagination }}}
+	<!-- IMPORT partials/paginator.tpl -->
+	{{{ end }}}
+</div>
+
+<!-- IMPORT partials/account/footer.tpl -->

package/templates/account/topics.tpl

@@ -0,0 +1,46 @@
+<!-- IMPORT partials/account/header.tpl -->
+
+<div class="d-flex justify-content-between align-items-center mb-3">
+	<div class="d-flex gap-1">
+		<h3 class="fw-semibold fs-5 mb-0 align-self-center">[[global:topics]]</h3>
+		{{{ if showSort }}}
+		<div class="btn-group bottom-sheet" component="thread/sort">
+			<button title="[[global:sort]]" class="btn btn-ghost btn-sm dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" type="button"><i class="fa-solid fa-arrow-up-wide-short"></i></button>
+			<ul class="dropdown-menu p-1 text-sm" role="menu">
+				{{{each sortOptions }}}
+				<li>
+					<a class="dropdown-item rounded-1 d-flex align-items-center gap-2" href="{config.relative_path}{./url}" role="menuitem">
+						<div class="flex-grow-1">{./name}</div>
+						<i class="flex-shrink-0 fa fa-fw {{{if ./selected}}}fa-check{{{end}}}"></i>
+					</a>
+				</li>
+				{{{end}}}
+			</ul>
+		</div>
+		{{{ end }}}
+	</div>
+
+	<div class="d-flex gap-1">
+		{{{ if canEdit }}}
+		<a href="{config.relative_path}/user/{userslug}/topics" class="btn btn-ghost btn-sm ff-secondary fw-semibold {{{ if template.account/topics }}}active{{{ end }}}">[[global:header.recent]]</a>
+		<a href="{config.relative_path}/user/{userslug}/watched" class="btn btn-ghost btn-sm ff-secondary fw-semibold {{{ if template.account/watched }}}active{{{ end }}}">[[user:watched]]</a>
+		{{{ if !reputation:disabled }}}
+		<a href="{config.relative_path}/user/{userslug}/upvoted" class="btn btn-ghost btn-sm ff-secondary fw-semibold {{{ if template.account/upvoted }}}active{{{ end }}}">[[global:upvoted]]</a>
+		{{{ end }}}
+		{{{ end }}}
+	</div>
+</div>
+
+
+{{{ if !topics.length }}}
+<div class="alert alert-warning text-center">{noItemsFoundKey}</div>
+{{{ end }}}
+
+<div class="category">
+	<!-- IMPORT partials/topics_list.tpl -->
+	{{{ if config.usePagination }}}
+	<!-- IMPORT partials/paginator.tpl -->
+	{{{ end }}}
+</div>
+
+<!-- IMPORT partials/account/footer.tpl -->

package/templates/admin/settings/user.tpl

@@ -0,0 +1,369 @@
+<div class="acp-page-container">
+	<!-- IMPORT admin/partials/settings/header.tpl -->
+
+	<div class="row settings m-0">
+		<div id="spy-container" class="col-12 col-md-8 px-0 mb-4" tabindex="0">
+			<div id="account-settings" class="mb-4">
+				<h5 class="fw-bold tracking-tight settings-header">[[admin/settings/user:account-settings]]</h5>
+				<div class="mb-3">
+					<label class="form-label" for="allowLoginWith">[[admin/settings/user:allow-login-with]]</label>
+					<select id="allowLoginWith" class="form-select" data-field="allowLoginWith">
+						<option value="username-email">[[admin/settings/user:allow-login-with.username-email]]</option>
+						<option value="username">[[admin/settings/user:allow-login-with.username]]</option>
+					</select>
+				</div>
+
+				<div class="form-check form-switch mb-3">
+					<input class="form-check-input" type="checkbox" id="gdpr_enabled" data-field="gdpr_enabled">
+					<label for="gdpr_enabled" class="form-check-label">[[admin/settings/user:gdpr-enabled]]</label>
+					<p class="form-text">[[admin/settings/user:gdpr-enabled-help]]</p>
+				</div>
+				<div class="form-check form-switch mb-3">
+					<input class="form-check-input" type="checkbox" id="username:disableEdit" data-field="username:disableEdit">
+					<label for="username:disableEdit" class="form-check-label">[[admin/settings/user:disable-username-changes]]</label>
+				</div>
+				<div class="form-check form-switch mb-3">
+					<input class="form-check-input" type="checkbox" id="email:disableEdit" data-field="email:disableEdit">
+					<label for="email:disableEdit" class="form-check-label">[[admin/settings/user:disable-email-changes]]</label>
+				</div>
+				<div class="form-check form-switch mb-3">
+					<input class="form-check-input" type="checkbox" id="password:disableEdit" data-field="password:disableEdit">
+					<label for="password:disableEdit" class="form-check-label">[[admin/settings/user:disable-password-changes]]</label>
+				</div>
+				<div class="form-check form-switch mb-3">
+					<input class="form-check-input" type="checkbox" id="allowAccountDelete" data-field="allowAccountDelete" checked>
+					<label for="allowAccountDelete" class="form-check-label">[[admin/settings/user:allow-account-deletion]]</label>
+				</div>
+				<div class="form-check form-switch mb-3">
+					<input class="form-check-input" type="checkbox" id="hideFullname" data-field="hideFullname">
+					<label for="hideFullname" class="form-check-label">[[admin/settings/user:hide-fullname]]</label>
+				</div>
+				<div class="form-check form-switch mb-3">
+					<input class="form-check-input" type="checkbox" id="hideEmail" data-field="hideEmail">
+					<label for="hideEmail" class="form-check-label">[[admin/settings/user:hide-email]]</label>
+				</div>
+				<div class="form-check form-switch mb-3">
+					<input class="form-check-input" type="checkbox" id="showFullnameAsDisplayName" data-field="showFullnameAsDisplayName">
+					<label for="showFullnameAsDisplayName" class="form-check-label">[[admin/settings/user:show-fullname-as-displayname]]</label>
+				</div>
+				<div class="form-check form-switch mb-3">
+					<input class="form-check-input" type="checkbox" id="disableCustomUserSkins" data-field="disableCustomUserSkins">
+					<label for="disableCustomUserSkins" class="form-check-label">[[admin/settings/user:disable-user-skins]]</label>
+				</div>
+			</div>
+
+			<hr/>
+
+			<div id="account-protection" class="mb-4">
+				<h5 class="fw-bold tracking-tight settings-header">[[admin/settings/user:account-protection]]</h5>
+				<div class="mb-3">
+					<label class="form-label" for="adminReloginDuration">[[admin/settings/user:admin-relogin-duration]]</label>
+					<input id="adminReloginDuration" type="text" class="form-control" data-field="adminReloginDuration" placeholder="60" />
+					<p class="form-text">
+						[[admin/settings/user:admin-relogin-duration-help]]
+					</p>
+				</div>
+				<div class="mb-3">
+					<label class="form-label" for="loginAttempts">[[admin/settings/user:login-attempts]]</label>
+					<input id="loginAttempts" type="text" class="form-control" data-field="loginAttempts" placeholder="5" />
+					<p class="form-text">
+						[[admin/settings/user:login-attempts-help]]
+					</p>
+				</div>
+				<div class="mb-3">
+					<label class="form-label" for="lockoutDuration">[[admin/settings/user:lockout-duration]]</label>
+					<input id="lockoutDuration" type="text" class="form-control" data-field="lockoutDuration" placeholder="60" />
+				</div>
+				<div class="mb-3">
+					<label class="form-label" for="passwordExpiryDays">[[admin/settings/user:password-expiry-days]]</label>
+					<input id="passwordExpiryDays" type="text" class="form-control" data-field="passwordExpiryDays" placeholder="0" />
+				</div>
+			</div>
+
+			<hr/>
+
+			<div id="session-time" class="mb-4">
+				<h5 class="fw-bold tracking-tight settings-header">[[admin/settings/user:session-time]]</h5>
+				<div class="row">
+					<div class="col-sm-6">
+						<div class="form-group mb-3">
+							<label class="form-label" for="loginDays">[[admin/settings/user:session-time-days]]</label>
+							<input id="loginDays" type="number" min="0" class="form-control" data-field="loginDays" placeholder="[[admin/settings/user:session-time-days]]" />
+						</div>
+					</div>
+					<div class="col-sm-6">
+						<div class="form-group mb-3">
+							<label class="form-label" for="loginSeconds">[[admin/settings/user:session-time-seconds]]</label>
+							<input id="loginSeconds" type="number" min="0" step="60" class="form-control" data-field="loginSeconds" placeholder="[[admin/settings/user:session-time-seconds]]" />
+						</div>
+					</div>
+				</div>
+				<div class="row">
+					<div class="col-12">
+						<p class="form-text">
+							[[admin/settings/user:session-time-help]]
+						</p>
+					</div>
+				</div>
+
+				<div class="form-group mb-3">
+					<label class="form-label" for="sessionDuration">[[admin/settings/user:session-duration]]</label>
+					<input id="sessionDuration" type="number" step="60" min="0" class="form-control" data-field="sessionDuration">
+					<p class="form-text">[[admin/settings/user:session-duration-help]]</p>
+				</div>
+
+				<div class="form-group mb-3">
+					<label class="form-label" for="onlineCutoff">[[admin/settings/user:online-cutoff]]</label>
+					<input id="onlineCutoff" type="number" min="0" class="form-control" data-field="onlineCutoff">
+					<p class="form-text">[[admin/settings/user:online-cutoff-help]]</p>
+				</div>
+			</div>
+
+			<hr/>
+
+			<div id="user-registration" class="mb-4">
+				<h5 class="fw-bold tracking-tight settings-header">[[admin/settings/user:registration]]</h5>
+				<div class="mb-3">
+					<label class="form-label" for="registrationType">[[admin/settings/user:registration-type]]</label>
+					<select id="registrationType" class="form-select" data-field="registrationType">
+						<option value="normal">[[admin/settings/user:registration-type.normal]]</option>
+						<option value="invite-only">[[admin/settings/user:registration-type.invite-only]]</option>
+						<option value="admin-invite-only">[[admin/settings/user:registration-type.admin-invite-only]]</option>
+						<option value="disabled">[[admin/settings/user:registration-type.disabled]]</option>
+					</select>
+					<p class="form-text">
+						[[admin/settings/user:registration-type.help, {config.relative_path}]]
+					</p>
+				</div>
+				<div class="mb-3">
+					<label class="form-label" for="registrationApprovalType">[[admin/settings/user:registration-approval-type]]</label>
+					<select id="registrationApprovalType" class="form-select" data-field="registrationApprovalType">
+						<option value="normal">[[admin/settings/user:registration-type.normal]]</option>
+						<option value="admin-approval">[[admin/settings/user:registration-type.admin-approval]]</option>
+						<option value="admin-approval-ip">[[admin/settings/user:registration-type.admin-approval-ip]]</option>
+					</select>
+					<p class="form-text">
+						[[admin/settings/user:registration-approval-type.help, {config.relative_path}]]
+					</p>
+				</div>
+				<div class="mb-3">
+					<label class="form-label" for="autoApproveTime">[[admin/settings/user:registration-queue-auto-approve-time]]</label>
+					<input id="autoApproveTime" type="number" class="form-control" data-field="autoApproveTime" placeholder="0">
+					<p class="form-text">
+						[[admin/settings/user:registration-queue-auto-approve-time-help]]
+					</p>
+				</div>
+
+				<div class="form-check form-switch mb-3">
+					<input class="form-check-input" type="checkbox" id="showAverageApprovalTime" data-field="showAverageApprovalTime">
+					<label for="showAverageApprovalTime" class="form-check-label">[[admin/settings/user:registration-queue-show-average-time]]</label>
+				</div>
+
+				<div class="form-check form-switch mb-3">
+					<input class="form-check-input" type="checkbox" id="requireEmailAddress" data-field="requireEmailAddress" name="requireEmailAddress" />
+					<label for="requireEmailAddress" class="form-check-label">[[admin/settings/email:require-email-address]]</label>
+				</div>
+				<p class="form-text">[[admin/settings/email:require-email-address-warning]]</p>
+
+				<div class="mb-3">
+					<label class="form-label" for="maximumInvites">[[admin/settings/user:max-invites]]</label>
+					<input id="maximumInvites" type="number" class="form-control" data-field="maximumInvites" placeholder="0">
+					<p class="form-text">
+						[[admin/settings/user:max-invites-help]]
+					</p>
+				</div>
+				<div class="mb-3">
+					<label class="form-label" for="inviteExpiration">[[admin/settings/user:invite-expiration]]</label>
+					<input id="inviteExpiration" type="number" class="form-control" data-field="inviteExpiration" placeholder="7">
+					<p class="form-text">
+						[[admin/settings/user:invite-expiration-help]]
+					</p>
+				</div>
+				<div class="mb-3">
+					<label class="form-label" for="minimumUsernameLength">[[admin/settings/user:min-username-length]]</label>
+					<input id="minimumUsernameLength" type="text" class="form-control" value="2" data-field="minimumUsernameLength">
+				</div>
+				<div class="mb-3">
+					<label class="form-label" for="maximumUsernameLength">[[admin/settings/user:max-username-length]]</label>
+					<input id="maximumUsernameLength" type="text" class="form-control" value="16" data-field="maximumUsernameLength">
+				</div>
+				<div class="mb-3">
+					<label class="form-label" for="minimumPasswordLength">[[admin/settings/user:min-password-length]]</label>
+					<input id="minimumPasswordLength" type="text" class="form-control" value="6" data-field="minimumPasswordLength">
+				</div>
+				<div class="mb-3">
+					<label class="form-label" for="minimumPasswordStrength">[[admin/settings/user:min-password-strength]]</label>
+					<select id="minimumPasswordStrength" class="form-select" data-field="minimumPasswordStrength">
+						<option value="0">0 - too guessable: risky password</option>
+						<option value="1">1 - very guessable</option>
+						<option value="2">2 - somewhat guessable</option>
+						<option value="3">3 - safely unguessable</option>
+						<option value="4">4 - very unguessable</option>
+					</select>
+				</div>
+				<div class="mb-3">
+					<label class="form-label" for="maximumAboutMeLength">[[admin/settings/user:max-about-me-length]]</label>
+					<input id="maximumAboutMeLength" type="text" class="form-control" value="500" data-field="maximumAboutMeLength">
+				</div>
+				<div class="mb-3">
+					<label class="form-label" for="termsOfUse">[[admin/settings/user:terms-of-use]]</label>
+					<textarea id="termsOfUse" class="form-control" data-field="termsOfUse"></textarea>
+				</div>
+			</div>
+
+			<hr/>
+
+			<!-- new user restrictions -->
+			<div id="new-user-restrictions" class="mb-4">
+				<h5 class="fw-bold tracking-tight settings-header">[[admin/settings/user:restrictions-new]]</h5>
+
+				<div class="mb-3">
+					<label class="form-label" for="newbieReputationThreshold">[[admin/settings/user:restrictions.rep-threshold]]</label>
+					<input id="newbieReputationThreshold" type="text" class="form-control" value="3" data-field="newbieReputationThreshold">
+				</div>
+
+				<div class="mb-3">
+					<label class="form-label" for="newbiePostDelay">[[admin/settings/user:restrictions.seconds-between-new]]</label>
+					<input id="newbiePostDelay" type="text" class="form-control" value="120" data-field="newbiePostDelay">
+				</div>
+
+				<div class="mb-3">
+					<label class="form-label" for="initialPostDelay">[[admin/settings/user:restrictions.seconds-before-new]]</label>
+					<input id="initialPostDelay" type="text" class="form-control" value="10" data-field="initialPostDelay">
+				</div>
+
+				<div class="mb-3">
+					<label class="form-label" for="newbiePostEditDuration">[[admin/settings/user:restrictions.seconds-edit-after-new]]</label>
+					<input id="newbiePostEditDuration" type="text" class="form-control" value="120" data-field="newbiePostEditDuration">
+				</div>
+
+				<div class="mb-3">
+					<label class="form-label" for="newbieChatMessageDelay">[[admin/settings/user:restrictions.milliseconds-between-messages]]</label>
+					<input id="newbieChatMessageDelay" type="text" class="form-control" data-field="newbieChatMessageDelay">
+				</div>
+
+				<div class="mb-3">
+					<label class="form-label" for="groupsExemptFromNewUserRestrictions">[[admin/settings/user:restrictions.groups-exempt-from-new-user-restrictions]]</label>
+					<select id="groupsExemptFromNewUserRestrictions" class="form-select" multiple data-field="groupsExemptFromNewUserRestrictions">
+						{{{ each groupsExemptFromNewUserRestrictions }}}
+						<option value="{groupsExemptFromNewUserRestrictions.displayName}">{groupsExemptFromNewUserRestrictions.displayName}</option>
+						{{{ end }}}
+					</select>
+				</div>
+
+			</div>
+
+			<hr/>
+
+			<div id="guest-settings" class="mb-4">
+				<h5 class="fw-bold tracking-tight settings-header">[[admin/settings/user:guest-settings]]</h5>
+
+				<div class="mb-3">
+					<div class="form-check form-switch mb-3">
+						<input class="form-check-input" type="checkbox" id="allowGuestHandles" data-field="allowGuestHandles">
+						<label for="allowGuestHandles" class="form-check-label">[[admin/settings/user:handles.enabled]]</label>
+					</div>
+					<p class="form-text">
+						[[admin/settings/user:handles.enabled-help]]
+					</p>
+				</div>
+				<div class="mb-3">
+					<div class="form-check form-switch mb-3">
+						<input class="form-check-input" type="checkbox" id="guestsIncrementTopicViews" data-field="guestsIncrementTopicViews">
+						<label for="guestsIncrementTopicViews" class="form-check-label">[[admin/settings/user:topic-views.enabled]]</label>
+					</div>
+				</div>
+				<div class="mb-3">
+					<div class="form-check form-switch mb-3">
+						<input class="form-check-input" type="checkbox" id="allowGuestReplyNotifications" data-field="allowGuestReplyNotifications">
+						<label for="allowGuestReplyNotifications" class="form-check-label">[[admin/settings/user:reply-notifications.enabled]]</label>
+					</div>
+				</div>
+			</div>
+
+			<hr/>
+
+			<div id="default-user-settings" class="mb-4">
+				<h5 class="fw-bold tracking-tight settings-header">[[admin/settings/user:default-user-settings]]</h5>
+				<div class="form-check form-switch mb-3">
+					<input class="form-check-input" type="checkbox" id="showemail" data-field="showemail">
+					<label for="showemail" class="form-check-label">[[admin/settings/user:show-email]]</label>
+				</div>
+
+				<div class="form-check form-switch mb-3">
+					<input class="form-check-input" type="checkbox" id="showfullname" data-field="showfullname">
+					<label for="showfullname" class="form-check-label">[[admin/settings/user:show-fullname]]</label>
+				</div>
+
+				<div class="form-check form-switch mb-3">
+					<input class="form-check-input" type="checkbox" id="disableIncomingChats" data-field="disableIncomingChats">
+					<label for="disableIncomingChats" class="form-check-label">[[admin/settings/user:disable-incoming-chats]]</label>
+				</div>
+
+				<div class="form-check form-switch mb-3">
+					<input class="form-check-input" type="checkbox" id="openOutgoingLinksInNewTab" data-field="openOutgoingLinksInNewTab">
+					<label for="openOutgoingLinksInNewTab" class="form-check-label">[[admin/settings/user:outgoing-new-tab]]</label>
+				</div>
+
+				<div class="form-check form-switch mb-3">
+					<input class="form-check-input" type="checkbox" id="topicSearchEnabled" data-field="topicSearchEnabled">
+					<label for="topicSearchEnabled" class="form-check-label">[[admin/settings/user:topic-search]]</label>
+				</div>
+
+				<div class="form-check form-switch mb-3">
+					<input class="form-check-input" type="checkbox" id="updateUrlWithPostIndex" data-field="updateUrlWithPostIndex">
+					<label for="updateUrlWithPostIndex" class="form-check-label">[[admin/settings/user:update-url-with-post-index]]</label>
+				</div>
+
+				<div class="mb-3">
+					<label class="form-label" for="dailyDigestFreq">[[admin/settings/user:digest-freq]]</label>
+					<select id="dailyDigestFreq" class="form-select" data-field="dailyDigestFreq">
+						<option value="off">[[admin/settings/user:digest-freq.off]]</option>
+						<option value="day">[[admin/settings/user:digest-freq.daily]]</option>
+						<option value="week">[[admin/settings/user:digest-freq.weekly]]</option>
+						<option value="biweek">[[admin/settings/user:digest-freq.biweekly]]</option>
+						<option value="month">[[admin/settings/user:digest-freq.monthly]]</option>
+					</select>
+				</div>
+
+				<div class="form-check form-switch mb-3">
+					<input class="form-check-input" type="checkbox" id="followTopicsOnCreate" data-field="followTopicsOnCreate">
+					<label for="followTopicsOnCreate" class="form-check-label">[[admin/settings/user:follow-created-topics]]</label>
+				</div>
+
+				<div class="form-check form-switch mb-3">
+					<input class="form-check-input" type="checkbox" id="followTopicsOnReply" data-field="followTopicsOnReply">
+					<label for="followTopicsOnReply" class="form-check-label">[[admin/settings/user:follow-replied-topics]]</label>
+				</div>
+
+				<div class="mb-3">
+					<label class="form-label" for="categoryWatchState">[[admin/settings/user:categoryWatchState]]</label>
+					<select id="categoryWatchState" class="form-select" data-field="categoryWatchState">
+						<option value="tracking" selected>[[admin/settings/user:categoryWatchState.tracking]]</option>
+						<option value="watching">[[admin/settings/user:categoryWatchState.watching]]</option>
+					</select>
+				</div>
+
+				<label class="form-label mb-2">[[admin/settings/user:default-notification-settings]]</label>
+
+				{{{ each notificationSettings }}}
+				<div class="row">
+					<div class="mb-3 col-7">
+						<label class="form-label">{./label}</label>
+					</div>
+					<div class="mb-3 col-5">
+						<select class="form-select" data-field="{./name}">
+							<option value="none">[[notifications:none]]</option>
+							<option value="notification">[[notifications:notification-only]]</option>
+							<option value="email">[[notifications:email-only]]</option>
+							<option value="notificationemail">[[notifications:notification-and-email]]</option>
+						</select>
+					</div>
+				</div>
+				{{{ end }}}
+			</div>
+		</div>
+
+		<!-- IMPORT admin/partials/settings/toc.tpl -->
+	</div>
+</div>

package/templates/partials/account/sidebar-left.tpl

@@ -29,12 +29,6 @@
 			<span class="flex-shrink-0 text-xs" title="{counts.shares}">{humanReadableNumber(counts.shares)}</span>
 		</a>
 
-		<a href="{config.relative_path}/user/{userslug}/groups" class="btn btn-ghost btn-sm text-start ff-secondary fw-semibold d-flex gap-2 align-items-center
-			{{{ if template.account/groups }}}active{{{ end }}}">
-			<div class="flex-grow-1">[[global:header.groups]]</div>
-			<span class="flex-shrink-0 text-xs" title="{counts.groups}">{humanReadableNumber(counts.groups)}</span>
-		</a>
-
 		<a href="{config.relative_path}/user/{userslug}/followers" class="btn btn-ghost btn-sm text-start ff-secondary fw-semibold d-flex gap-2 align-items-center
 			{{{ if template.account/followers }}}active{{{ end }}}">
 			<div class="flex-grow-1">[[user:followers]]</div>
@@ -53,14 +47,6 @@
 			<div class="flex-grow-1">[[user:watched-categories]]</div>
 			<span class="flex-shrink-0 text-xs" title="{counts.categoriesWatched}">{counts.categoriesWatched}</span>
 		</a>
-		{{{ if isSelf }}}
-		<a href="{config.relative_path}/user/{userslug}/tags" class="btn btn-ghost btn-sm text-start ff-secondary fw-semibold d-flex gap-2 align-items-center
-			{{{ if template.account/tags }}}active{{{ end }}}">
-			<div class="flex-grow-1">[[user:watched-tags]]</div>
-			<span class="flex-shrink-0 text-xs" title="{counts.tagsWatched}">{counts.tagsWatched}</span>
-		</a>
-		{{{ end }}}
-
 		<a href="{config.relative_path}/user/{userslug}/blocks" class="btn btn-ghost btn-sm text-start ff-secondary fw-semibold d-flex gap-2 align-items-center
 			{{{ if template.account/blocks }}}active{{{ end }}}">
 			<div class="flex-grow-1">[[user:blocked-users]]</div>

package/templates/partials/category/watch.tpl

@@ -0,0 +1,24 @@
+{{{ if config.loggedIn }}}
+<div class="btn-group bottom-sheet" component="topic/watch">
+	<button class="btn btn-ghost btn-sm ff-secondary dropdown-toggle" data-bs-toggle="dropdown" type="button" aria-haspopup="true" aria-expanded="false">
+		<span component="category/watching/menu" class="d-flex gap-2 align-items-center {{{ if !./isWatched }}} hidden{{{ end }}}"><i class="fa fa-fw fa-bell text-primary"></i><span class="visible-md-inline visible-lg-inline fw-semibold">[[category:watching]]</span></span>
+
+		<span component="category/notwatching/menu" class="d-flex gap-2 align-items-center {{{ if ./isWatched }}} hidden{{{ end }}}"><i class="fa fa-fw fa-bell-o text-primary"></i><span class="visible-md-inline visible-lg-inline fw-semibold">[[category:watch]]</span></span>
+	</button>
+
+	<ul class="dropdown-menu p-1 text-sm {{{ if template.account/categories }}}dropdown-menu-end{{{ end }}}" role="menu">
+		<li>
+			<a class="dropdown-item rounded-1 d-flex align-items-center gap-2 p-2" href="#" component="category/watching" data-state="watching" role="menuitem">
+				<div class="flex-grow-1 d-flex flex-column">
+					<span class="d-flex align-items-center gap-2">
+						<i class="flex-shrink-0 fa fa-fw fa-bell text-secondary"></i>
+						<span class="flex-grow-1 fw-semibold">[[category:watching]]</span>
+					</span>
+					<div class="help-text text-secondary text-xs">[[category:watching.description]]</div>
+				</div>
+				<span class="flex-shrink-0"><i component="category/watching/check" class="fa fa-fw {{{ if ./isWatched }}}fa-check{{{ end }}}"></i></span>
+			</a>
+		</li>
+	</ul>
+</div>
+{{{ end }}}