@okjavis/nodebb-theme-javis 5.0.8 → 6.0.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@okjavis/nodebb-theme-javis",
-  "version": "5.0.8",
+  "version": "6.0.2",
   "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/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/feed.tpl

@@ -26,20 +26,28 @@
 		<div class="col-lg-6 col-sm-12 ms-auto">
 		{{{ end }}}
 
-			<!-- Controls row for composer prompt injection -->
-			<div class="d-flex justify-content-between py-2 mb-0 gap-1">
-				{{{ if canPost }}}
-				<button id="new_topic" class="btn btn-primary btn-sm d-none">[[category:new-topic-button]]</button>
+			<!-- For You / Following tabs + filter -->
+			<div class="d-flex justify-content-between align-items-center py-2 mb-0 gap-1">
+				{{{ if loggedIn }}}
+				<div class="d-flex gap-1">
+					<a href="{config.relative_path}/feed" class="btn btn-ghost btn-sm ff-secondary fw-semibold {{{ if !showFollowed }}}active{{{ end }}}">For You</a>
+					<a href="{config.relative_path}/feed?users=followed" class="btn btn-ghost btn-sm ff-secondary fw-semibold {{{ if showFollowed }}}active{{{ end }}}">Following</a>
+				</div>
 				{{{ end }}}
+				<div class="d-flex align-items-center gap-1 ms-auto">
+					<!-- IMPORT partials/category/filter-dropdown-right.tpl -->
+					{{{ if canPost }}}
+					<button id="new_topic" class="btn btn-primary btn-sm d-none">[[category:new-topic-button]]</button>
+					{{{ end }}}
+				</div>
 			</div>
 
-			<!-- Category filter - LinkedIn style, right aligned, tight spacing -->
-			<div class="d-flex justify-content-end py-1 feed-category-filter">
-				<!-- IMPORT partials/category/filter-dropdown-right.tpl -->
-			</div>
-
-			{{{ if !posts.length  }}}
-			<div class="alert alert-warning text-center">[[feed:no-posts-found]] {{{ if !following.length }}}[[feed:are-you-following-anyone]] {{{ end }}}</div>
+			{{{ if !posts.length }}}
+			{{{ if showFollowed }}}
+			<div class="alert alert-info text-center">Follow some members to see their posts here.</div>
+			{{{ else }}}
+			<div class="alert alert-warning text-center">[[feed:no-posts-found]]</div>
+			{{{ end }}}
 			{{{ end }}}
 
 			<ul component="posts" class="list-unstyled" data-nextstart="{nextStart}">

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 }}}

package/templates/partials/notifications_list.tpl

@@ -0,0 +1,45 @@
+{{{ if !notifications.length }}}
+<div class="no-notifs text-center p-4 d-flex flex-column">
+	<div class="p-4"><i class="fa-solid fa-wind fs-2 text-muted"></i></div>
+	<div class="text-xs fw-semibold text-muted">[[notifications:no-notifs]]</div>
+</div>
+{{{ end }}}
+
+{{{ each notifications }}}
+<div class="{./readClass}" data-nid="{./nid}" data-path="{./path}" {{{ if ./pid }}}data-pid="{./pid}"{{{ end }}}{{{ if ./tid }}}data-tid="{./tid}"{{{ end }}}>
+	<div class="d-flex gap-1 justify-content-between">
+		<div class="btn btn-ghost btn-sm d-flex gap-2 flex-grow-1 text-start align-items-start">
+			<a class="flex-grow-0 flex-shrink-0" href="{{{ if ./user.userslug}}}{config.relative_path}/user/{./user.userslug}{{{ else }}}#{{{ end }}}">
+				{{{ if (./image && ./from) }}}
+				<img class="avatar avatar-rounded" style="--avatar-size: 32px;" src="{./image}" onerror="this.onerror=null;this.style.display='none';this.nextElementSibling.classList.remove('hidden');" />
+				<div class="avatar avatar-rounded hidden" style="--avatar-size: 32px; background-color: {./user.icon:bgColor};">{./user.icon:text}</div>
+				{{{ else }}}
+				{{{ if ./icon }}}
+				<div class="avatar avatar-rounded" style="--avatar-size: 32px;"><i class="text-secondary fa {./icon}"></i></div>
+				{{{ else }}}
+				<div class="avatar avatar-rounded" style="--avatar-size: 32px; background-color: {./user.icon:bgColor};">{./user.icon:text}</div>
+				{{{ end }}}
+				{{{ end }}}
+			</a>
+
+			<div class="d-flex flex-grow-1 flex-column align-items-start position-relative">
+				<a href="{./path}" class="text-decoration-none d-inline-block text-reset text-break text-sm ff-sans stretched-link" component="notifications/item/link">
+					{./bodyShort}
+				</a>
+				<div class="text-xs text-muted">{{{ if ./timeagoLong }}}{./timeagoLong}{{{ else }}}<span class="timeago" title="{./datetimeISO}"></span>{{{ end }}}</div>
+			</div>
+		</div>
+		<div>
+			{{{ if ./nid }}}
+			<button class="mark-read btn btn-ghost btn-sm d-flex align-items-center justify-content-center flex-grow-0 flex-shrink-0 p-1" style="width: 1.5rem; height: 1.5rem;">
+				<i class="unread fa fa-2xs fa-circle text-primary {{{ if ./read }}}hidden{{{ end }}}" aria-label="[[unread:mark-as-read]]"></i>
+				<i class="read fa fa-2xs fa-circle-o text-secondary {{{ if !./read }}}hidden{{{ end }}}" aria-label="[[unread:mark-as-unread]]"></i>
+			</button>
+			{{{ end }}}
+		</div>
+	</div>
+</div>
+{{{ if !@last }}}
+<hr class="my-1" />
+{{{ end }}}
+{{{ end }}}