@okjavis/nodebb-theme-javis 1.0.1 → 1.1.0

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

@@ -0,0 +1,99 @@
+<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>
+	<li>
+		<a class="dropdown-item rounded-1 d-flex align-items-center gap-2" component="header/profilelink/settings" href="{relative_path}/user/{user.userslug}/settings" role="menuitem">
+			<i class="fa fa-fw fa-gear text-secondary"></i> <span>[[user:settings]]</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>

package/templates/partials/sidebar-left.tpl

@@ -0,0 +1,77 @@
+<nav component="sidebar/left" class="{{{ if config.theme.openSidebars}}}open{{{ end }}} text-dark bg-light sidebar sidebar-left start-0 border-end vh-100 d-none d-lg-flex flex-column justify-content-between sticky-top">
+	<ul id="main-nav" class="list-unstyled d-flex flex-column w-100 gap-2 mt-2 overflow-y-auto">
+		{{{ each navigation }}}
+		{{{ if displayMenuItem(@root, @index) }}}
+		<li class="nav-item mx-2 {./class}{{{ if ./dropdown }}} dropend{{{ end }}}" title="{./title}">
+			<a class="nav-link navigation-link d-flex gap-2 justify-content-between align-items-center {{{ if ./dropdown }}}dropdown-toggle{{{ end }}}" {{{ if ./dropdown }}} href="#" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" {{{ else }}} href="{./route}"{{{ end }}} {{{ if ./id }}}id="{./id}"{{{ end }}}{{{ if ./targetBlank }}} target="_blank"{{{ end }}} {{{ if ./text }}}aria-label="{./text}"{{{ end }}}>
+				<span class="d-flex gap-2 align-items-center text-nowrap truncate-open">
+					<span class="position-relative">
+						{{{ if ./iconClass }}}
+						<i class="fa fa-fw {./iconClass}" data-content="{./content}"></i>
+						<span component="navigation/count" class="visible-closed position-absolute top-0 start-100 translate-middle badge rounded-1 bg-primary {{{ if !./content }}}hidden{{{ end }}}">{./content}</span>
+						{{{ end }}}
+					</span>
+					{{{ if ./text }}}<span class="nav-text small visible-open fw-semibold text-truncate">{./text}</span>{{{ end }}}
+				</span>
+				<span component="navigation/count" class="visible-open badge rounded-1 bg-primary {{{ if !./content }}}hidden{{{ end }}}">{./content}</span>
+			</a>
+			{{{ if ./dropdown }}}
+			<ul class="dropdown-menu p-1 shadow" role="menu">
+				{./dropdownContent}
+			</ul>
+			{{{ end }}}
+		</li>
+		{{{ end }}}
+		{{{ end }}}
+	</ul>
+	<div class="sidebar-toggle-container align-self-start">
+		<!-- User Profile Section (only for logged-in users) -->
+		{{{ if config.loggedIn }}}
+		<div class="sidebar-user-section mx-2 mb-2">
+			<div class="nav-item dropend usermenu">
+				<a component="header/avatar" id="sidebar_user_dropdown" href="#" role="button"
+				   class="nav-link d-flex gap-2 align-items-center text-truncate sidebar-user-trigger"
+				   data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"
+				   aria-label="[[user:user-menu]]">
+					<span class="sidebar-avatar-wrapper position-relative">
+						{buildAvatar(user, "32px", true)}
+						<span component="user/status" class="sidebar-status-dot position-absolute border border-white border-2 rounded-circle status {user.status}"></span>
+					</span>
+					<span class="nav-text visible-open fw-semibold text-truncate">{user.username}</span>
+				</a>
+				<!-- IMPORT partials/sidebar/user-menu-dropdown.tpl -->
+			</div>
+		</div>
+		{{{ else }}}
+		<!-- Login/Register for logged-out users -->
+		<div class="sidebar-auth-section mx-2 mb-2">
+			<div class="nav-item">
+				<a class="nav-link d-flex gap-2 align-items-center" href="{relative_path}/login">
+					<i class="fa fa-fw fa-sign-in"></i>
+					<span class="nav-text small visible-open fw-semibold">[[global:login]]</span>
+				</a>
+			</div>
+			{{{ if config.allowRegistration }}}
+			<div class="nav-item mt-1">
+				<a class="nav-link d-flex gap-2 align-items-center" href="{relative_path}/register">
+					<i class="fa fa-fw fa-user-plus"></i>
+					<span class="nav-text small visible-open fw-semibold">[[global:register]]</span>
+				</a>
+			</div>
+			{{{ end }}}
+		</div>
+		{{{ end }}}
+
+		{{{ if !config.disableCustomUserSkins }}}
+		<!-- IMPORT partials/skin-switcher.tpl -->
+		{{{ end }}}
+
+		<div class="sidebar-toggle m-2 d-none d-lg-block">
+			<a href="#" role="button" component="sidebar/toggle" class="nav-link d-flex gap-2 align-items-center p-2 pointer w-100 text-nowrap" title="[[themes/harmony:expand]]" aria-label="[[themes/harmony:sidebar-toggle]]">
+				<i class="fa fa-fw fa-angles-right"></i>
+				<i class="fa fa-fw fa-angles-left"></i>
+				<span class="nav-text visible-open fw-semibold small lh-1">[[themes/harmony:collapse]]</span>
+			</a>
+		</div>
+	</div>
+</nav>

package/templates/partials/sidebar-right.tpl

@@ -0,0 +1,7 @@
+<!-- Right sidebar hidden - user profile moved to left sidebar -->
+<!-- Widget area preserved for any sidebar footer widgets if needed -->
+<div class="d-none" data-widget-area="sidebar-footer">
+	{{{each widgets.sidebar-footer}}}
+	{{./html}}
+	{{{end}}}
+</div>

package/templates/partials/topics_list.tpl

@@ -0,0 +1,111 @@
+<!--
+    JAVIS Community Theme - Topics List (Reddit-style)
+    Used on: Categories, Recent, Popular, Unread pages
+-->
+<ul component="category" class="topics-list list-unstyled" itemscope itemtype="http://www.schema.org/ItemList" data-nextstart="{nextStart}" data-set="{set}">
+
+	{{{ each topics }}}
+	<li component="category/topic" class="topic-card {function.generateTopicClass}" <!-- IMPORT partials/data/category.tpl -->>
+		<link itemprop="url" content="{config.relative_path}/topic/{./slug}" />
+		<meta itemprop="name" content="{function.stripTags, ./title}" />
+		<meta itemprop="itemListOrder" content="descending" />
+		<meta itemprop="position" content="{increment(./index, "1")}" />
+		<a id="{./index}" data-index="{./index}" component="topic/anchor"></a>
+
+		<!-- Vote Column (Reddit-style) -->
+		{{{ if !reputation:disabled }}}
+		<div class="vote-column">
+			<button class="vote-btn vote-up" title="[[topic:upvote]]">
+				<i class="fa fa-chevron-up"></i>
+			</button>
+			<span class="vote-count" title="{./votes}">{humanReadableNumber(./votes, 0)}</span>
+			<button class="vote-btn vote-down" title="[[topic:downvote]]">
+				<i class="fa fa-chevron-down"></i>
+			</button>
+		</div>
+		{{{ end }}}
+
+		<!-- Main Content -->
+		<div class="topic-content">
+			<!-- Meta Row: Category + Author + Time -->
+			<div class="topic-meta">
+				{{{ if (!template.category || (cid != ./cid)) }}}
+				{buildCategoryLabel(./category, "a", "border")}
+				{{{ end }}}
+				<span class="meta-separator">•</span>
+				<span class="meta-author">
+					Posted by
+					<a href="{{{ if ./user.userslug }}}{config.relative_path}/user/{./user.userslug}{{{ else }}}#{{{ end }}}" class="author-link">{./user.displayname}</a>
+				</span>
+				<span class="meta-separator">•</span>
+				<span class="timeago meta-time" title="{./timestampISO}"></span>
+			</div>
+
+			<!-- Title -->
+			<h3 component="topic/header" class="topic-title">
+				<a href="{{{ if topics.noAnchor }}}#{{{ else }}}{config.relative_path}/topic/{./slug}{{{ if ./bookmark }}}/{./bookmark}{{{ end }}}{{{ end }}}">{./title}</a>
+			</h3>
+
+			<!-- Labels/Badges -->
+			<div component="topic/labels" class="topic-labels">
+				<span component="topic/pinned" class="topic-badge pinned {{{ if (./scheduled || !./pinned) }}}hidden{{{ end }}}">
+					<i class="fa fa-thumb-tack"></i> Pinned
+				</span>
+				<span component="topic/locked" class="topic-badge locked {{{ if !./locked }}}hidden{{{ end }}}">
+					<i class="fa fa-lock"></i> Locked
+				</span>
+				<span component="topic/scheduled" class="topic-badge scheduled {{{ if !./scheduled }}}hidden{{{ end }}}">
+					<i class="fa fa-clock-o"></i> Scheduled
+				</span>
+				{{{each ./icons}}}<span class="topic-badge">{@value}</span>{{{end}}}
+			</div>
+
+			<!-- Tags -->
+			{{{ if ./tags.length }}}
+			<div data-tid="{./tid}" component="topic/tags" class="topic-tags">
+				{{{ each ./tags }}}
+				<a href="{config.relative_path}/tags/{./valueEncoded}" class="topic-tag">{./valueEscaped}</a>
+				{{{ end }}}
+			</div>
+			{{{ end }}}
+
+			<!-- Thumbnail Preview (if exists) -->
+			{{{ if ./thumbs.length }}}
+			<a class="topic-thumbnail" href="{config.relative_path}/topic/{./slug}{{{ if ./bookmark }}}/{./bookmark}{{{ end }}}">
+				<img src="{./thumbs.0.url}" alt="" loading="lazy" />
+				{{{ if ./thumbs.1 }}}
+				<span class="thumb-count">+{subtract(./thumbs.length, 1)}</span>
+				{{{ end }}}
+			</a>
+			{{{ end }}}
+
+			<!-- Teaser/Preview Content -->
+			{{{ if ./teaser.content }}}
+			<div class="topic-teaser">
+				{./teaser.content}
+			</div>
+			{{{ end }}}
+
+			<!-- Action Bar -->
+			<div class="topic-actions">
+				<a href="{config.relative_path}/topic/{./slug}" class="action-btn">
+					<i class="fa-regular fa-comment"></i>
+					<span>{humanReadableNumber(./postcount, 0)} Comments</span>
+				</a>
+				<button class="action-btn share-btn" data-url="{config.relative_path}/topic/{./slug}">
+					<i class="fa fa-share"></i>
+					<span>Share</span>
+				</button>
+				<button class="action-btn save-btn">
+					<i class="fa-regular fa-bookmark"></i>
+					<span>Save</span>
+				</button>
+				<span class="action-stat">
+					<i class="fa fa-eye"></i>
+					<span>{humanReadableNumber(./viewcount, 0)}</span>
+				</span>
+			</div>
+		</div>
+	</li>
+	{{{end}}}
+</ul>

package/theme.js

@@ -8,17 +8,59 @@
 const theme = {};
 
 theme.defineWidgetAreas = async (areas) => {
-  // Define custom widget areas for JAVIS theme
+  // Define widget areas like Harmony does
+  const locations = ['header', 'sidebar', 'footer'];
+  const templates = [
+    'categories.tpl', 'category.tpl', 'topic.tpl', 'users.tpl',
+    'unread.tpl', 'recent.tpl', 'popular.tpl', 'top.tpl', 'tags.tpl', 'tag.tpl',
+    'login.tpl', 'register.tpl', 'world.tpl',
+  ];
+
+  function capitalizeFirst(str) {
+    return str.charAt(0).toUpperCase() + str.slice(1);
+  }
+
+  templates.forEach((template) => {
+    locations.forEach((location) => {
+      areas.push({
+        name: `${capitalizeFirst(template.split('.')[0])} ${capitalizeFirst(location)}`,
+        template: template,
+        location: location,
+      });
+    });
+  });
+
+  // Additional widget areas
   areas = areas.concat([
     {
-      name: 'JAVIS Right Sidebar',
-      template: 'categories.tpl',
-      location: 'sidebar-right',
+      name: 'Main post header',
+      template: 'topic.tpl',
+      location: 'mainpost-header',
+    },
+    {
+      name: 'Main post footer',
+      template: 'topic.tpl',
+      location: 'mainpost-footer',
+    },
+    {
+      name: 'Sidebar Footer',
+      template: 'global',
+      location: 'sidebar-footer',
+    },
+    {
+      name: 'Brand Header',
+      template: 'global',
+      location: 'brand-header',
+    },
+    {
+      name: 'About me (before)',
+      template: 'account/profile.tpl',
+      location: 'profile-aboutme-before',
     },
     {
-      name: 'JAVIS Left Sidebar',
-      template: 'categories.tpl',
-      location: 'sidebar-left',
+      name: 'About me (after)',
+      template: 'account/profile.tpl',
+      location: 'profile-aboutme-after',
     },
   ]);
 

package/theme.json

@@ -0,0 +1,8 @@
+{
+  "id": "@okjavis/nodebb-theme-javis",
+  "name": "JAVIS Community Theme",
+  "description": "Modern, premium NodeBB theme for JAVIS Community",
+  "url": "https://github.com/javis-admin/nodebb-community-theme",
+  "screenshot": "screenshot.png",
+  "baseTheme": "nodebb-theme-harmony"
+}

package/theme.scss

@@ -0,0 +1,20 @@
+// ============================================
+// JAVIS Community Theme
+// Extends NodeBB Harmony Theme
+// ============================================
+
+// Note: When using baseTheme, NodeBB loads the parent theme (Harmony) first.
+// This file contains JAVIS-specific style overrides that are applied on top.
+
+// Import Harmony's theme styles (required for inheritance)
+@import "nodebb-theme-harmony/scss/harmony";
+
+// JAVIS Custom Styles
+@import "./scss/variables";
+@import "./scss/base";
+@import "./scss/buttons";
+@import "./scss/forms";
+@import "./scss/cards";
+@import "./scss/sidebar";
+@import "./scss/sidebar-user";
+@import "./scss/categories";

package/less/_base.less

@@ -1,70 +0,0 @@
-// ============================================
-// BASE STYLES – Global Reset & Typography
-// ============================================
-
-html, body {
-  font-family: @jv-font-sans;
-  font-size: @jv-font-size-base;
-  line-height: @jv-line-height-base;
-  background-color: @jv-bg;
-  color: @jv-text-main;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  margin: 0;
-  padding: 0;
-}
-
-// Paragraph
-p {
-  margin: 0 0 @jv-space-6 0;
-}
-
-// Headings
-h1 {
-  font-size: @jv-font-size-xxl;
-  font-weight: 600;
-  letter-spacing: -0.02em;
-  margin-bottom: @jv-space-8;
-}
-
-h2 {
-  font-size: @jv-font-size-xl;
-  font-weight: 600;
-  letter-spacing: -0.01em;
-  margin-bottom: @jv-space-6;
-}
-
-h3 {
-  font-size: @jv-font-size-xl;
-  font-weight: 600;
-  margin-bottom: @jv-space-6;
-}
-
-h4 {
-  font-size: 20px;
-  font-weight: 600;
-  margin-bottom: @jv-space-6;
-}
-
-h5 {
-  font-size: 17px;
-  font-weight: 600;
-  margin-bottom: @jv-space-6;
-}
-
-h6 {
-  font-size: @jv-font-size-base;
-  font-weight: 600;
-  margin-bottom: @jv-space-4;
-}
-
-// Links
-a {
-  color: @jv-primary;
-  text-decoration: none;
-  transition: color 0.15s ease;
-
-  &:hover {
-    color: @jv-primary-hover;
-  }
-}

package/less/_buttons.less

@@ -1,90 +0,0 @@
-// ===========================================================
-// BUTTON SYSTEM – JAVIS Design System
-// ===========================================================
-
-// Base Button Reset
-.btn {
-  border-radius: @jv-radius-pill;
-  padding: 6px 16px;
-  font-size: 14px;
-  font-weight: 500;
-  line-height: 1.32;
-  transition: all 0.15s ease;
-  border-width: 1px;
-  cursor: pointer;
-}
-
-// PRIMARY BUTTON
-.btn-primary {
-  background-color: @jv-primary;
-  border-color: @jv-primary;
-  color: #fff;
-  box-shadow: @jv-shadow-button;
-
-  &:hover,
-  &:focus {
-    background-color: @jv-primary-hover;
-    border-color: @jv-primary-hover;
-    box-shadow: @jv-shadow-button-hover;
-    transform: translateY(-1px);
-    color: #fff;
-  }
-
-  &:active {
-    transform: translateY(0);
-  }
-}
-
-// OUTLINE PRIMARY
-.btn-outline-primary {
-  background-color: transparent;
-  border-color: @jv-primary;
-  color: @jv-primary;
-
-  &:hover,
-  &:focus {
-    background-color: @jv-primary-soft;
-    border-color: @jv-primary;
-    color: @jv-primary;
-  }
-}
-
-// SECONDARY BUTTON
-.btn-secondary,
-.btn-default {
-  background-color: #f7f8fa;
-  border-color: @jv-border-subtle;
-  color: @jv-text-main;
-
-  &:hover,
-  &:focus {
-    background-color: #eef0f3;
-    border-color: @jv-border-subtle;
-    color: @jv-text-main;
-  }
-}
-
-// LINK-STYLE BUTTON
-.btn-link {
-  color: @jv-primary;
-  font-weight: 500;
-  padding: 0;
-
-  &:hover {
-    text-decoration: underline;
-    color: @jv-primary-hover;
-  }
-}
-
-// SMALL BUTTONS
-.btn-sm {
-  padding: 4px 12px;
-  font-size: @jv-font-size-sm;
-}
-
-// LARGE BUTTONS
-.btn-lg {
-  padding: 10px 22px;
-  font-size: @jv-font-size-base;
-  border-radius: @jv-radius-pill;
-}

package/less/_cards.less

@@ -1,118 +0,0 @@
-// ===========================================================
-// CARD COMPONENT – Feed Posts
-// Inspired by Circle.so's spacing and Apple's depth
-// ===========================================================
-
-// CARD WRAPPER
-li[component="post"].posts-list-item {
-  background: @jv-surface;
-  border-radius: @jv-radius-lg;
-  border: 1px solid rgba(0,0,0,0.05);
-  box-shadow: @jv-shadow-card;
-  padding: 24px 22px 20px 22px;
-  margin-bottom: 24px;
-  transition: box-shadow 0.15s ease, border-color 0.15s ease;
-
-  &:hover {
-    box-shadow: 0 6px 14px rgba(0,0,0,0.08);
-    border-color: rgba(0,0,0,0.08);
-  }
-}
-
-// IMAGE BLOCK
-li[component="post"] {
-  .overflow-hidden,
-  img.w-100 {
-    border-radius: @jv-radius-lg;
-  }
-}
-
-// CARD BODY LAYOUT
-li[component="post"] .post-body {
-  display: flex;
-  flex-direction: column;
-  gap: @jv-space-6;
-  padding-top: @jv-space-2;
-}
-
-// TITLE
-li[component="post"] .topic-title {
-  display: block;
-  margin-bottom: 6px;
-  font-size: @jv-font-size-lg;
-  font-weight: 600;
-  letter-spacing: -0.01em;
-  line-height: @jv-line-height-tight;
-  color: @jv-text-main;
-
-  a {
-    color: inherit;
-    text-decoration: none;
-
-    &:hover {
-      color: @jv-primary;
-    }
-  }
-}
-
-// META (author + time)
-li[component="post"] .d-flex.gap-2 {
-  margin-bottom: 10px;
-}
-
-li[component="post"] {
-  .timeago,
-  .post-meta a,
-  .topic-meta {
-    font-size: @jv-font-size-sm;
-    color: @jv-text-muted;
-  }
-}
-
-// CONTENT
-li[component="post"] .content p {
-  font-size: @jv-font-size-base;
-  line-height: @jv-line-height-base;
-  margin-bottom: 18px;
-  color: @jv-text-main;
-}
-
-// DIVIDER
-li[component="post"] hr {
-  margin: 16px 0;
-  border-color: @jv-border-subtle;
-}
-
-// ===========================================================
-// ACTION ROW (quiet, modern, premium)
-// ===========================================================
-
-li[component="post"] .d-flex.justify-content-between {
-  margin-top: 6px;
-  padding-bottom: 2px;
-}
-
-li[component="post"] .d-flex.gap-3 a {
-  background: transparent;
-  border: none;
-  padding: 0;
-  font-size: @jv-font-size-sm;
-  color: @jv-text-muted;
-  opacity: 0.85;
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  box-shadow: none;
-  text-decoration: none;
-  transition: color 0.15s ease, opacity 0.15s ease;
-
-  &:hover {
-    color: @jv-primary;
-    opacity: 1;
-  }
-
-  i {
-    font-size: 15px;
-    color: inherit;
-  }
-}