@okjavis/nodebb-theme-javis 2.0.0 → 2.1.0

package/package.json

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

package/scss/_topic.scss

@@ -4,64 +4,59 @@
 // ===========================================================
 
 // ===========================================================
-// BREADCRUMB – Softer, More Subtle
+// HIDDEN ELEMENTS
 // ===========================================================
 body.template-topic {
-  .breadcrumb {
-    background: transparent;
-    padding: $jv-space-2 0;
-    margin-bottom: $jv-space-4;
-    font-size: $jv-font-size-sm;
-
-    .breadcrumb-item {
-      color: $jv-text-soft;
-
-      a {
-        color: $jv-text-muted;
-        text-decoration: none;
-        transition: color $jv-transition-fast;
-
-        &:hover {
-          color: $jv-primary;
-        }
-      }
+  .breadcrumb,
+  [component="topic/thumb/list"] {
+    display: none !important;
+  }
 
-      // Separator styling
-      + .breadcrumb-item::before {
-        color: $jv-text-soft;
-        content: "/";
-        padding: 0 $jv-space-2;
-      }
+  // ===========================================================
+  // LAYOUT & CONTAINER
+  // ===========================================================
+  #content {
+    padding-left: 48px !important;
+    padding-right: 48px !important;
+  }
 
-      // Active/current item
-      &.active {
-        color: $jv-text-muted;
-        font-weight: 500;
-      }
-    }
+  [itemscope][itemtype="https://schema.org/DiscussionForumPosting"] > .d-flex.flex-column.gap-3 {
+    margin-top: 24px !important;
   }
 
   // ===========================================================
-  // TOPIC HEADER – Title and Meta
+  // TOPIC HEADER – Title Typography
   // ===========================================================
   .topic-header,
-  [component="topic/header"] {
-    margin-bottom: $jv-space-6;
+  [component="topic/header"],
+  [component="post/header"].fs-3 {
+    margin-bottom: 0;
+    display: flex;
+    align-items: flex-start;
+    gap: $jv-space-4;
 
-    // Topic title
     h1,
-    [component="topic/title"] {
-      font-size: 28px;
-      font-weight: 700;
-      line-height: $jv-line-height-tight;
-      letter-spacing: -0.02em;
+    [component="topic/title"],
+    .topic-title {
+      font-size: 32px;
+      font-weight: 800;
+      line-height: 1.2;
+      letter-spacing: -0.03em;
       color: $jv-text-main;
-      margin-bottom: $jv-space-3;
+      margin-bottom: 0;
+      flex: 1;
     }
   }
 
+  h1.fs-3 {
+    font-size: 32px !important;
+    font-weight: 800 !important;
+    line-height: 1.2 !important;
+    letter-spacing: -0.03em !important;
+  }
+
   // ===========================================================
-  // META PILLS – Category, Tags, Stats
+  // META PILLS – Tags & Stats
   // ===========================================================
   .topic-tags,
   [component="topic/tags"] {
@@ -88,7 +83,6 @@ body.template-topic {
     }
   }
 
-  // Category badge in topic
   .category-badge,
   [component="category/link"] .badge {
     background: rgba(0, 0, 0, 0.06);
@@ -96,8 +90,20 @@ body.template-topic {
     font-weight: 500;
   }
 
+  .topic-info .stats,
+  .badge.stats,
+  .topic-stats .badge {
+    background: rgba(0, 0, 0, 0.04) !important;
+    border: 1px solid $jv-border-subtle !important;
+    color: $jv-text-muted !important;
+    font-size: $jv-font-size-xs;
+    font-weight: 500;
+    padding: $jv-space-1 $jv-space-3;
+    border-radius: $jv-radius-pill;
+  }
+
   // ===========================================================
-  // POST CONTAINER – Clean, Borderless Design
+  // POSTS CONTAINER
   // ===========================================================
   .topic {
     .posts-container {
@@ -105,22 +111,20 @@ body.template-topic {
       width: 100%;
     }
 
-    // Individual post
     [component="post"] {
       background: $jv-surface;
       border-radius: $jv-radius-md;
       margin-bottom: $jv-space-4;
-      border: none; // Borderless as per theme
-      box-shadow: none; // No shadow for cleaner look
+      border: 1px solid $jv-border-subtle;
+      box-shadow: none;
 
-      // Post container inner
       .post-container {
         padding: $jv-space-6;
+        padding-top: 0 !important;
         border: none;
         background: transparent;
       }
 
-      // Selected state (when linked directly)
       &.selected .post-container {
         background: $jv-selected-bg;
         border-radius: $jv-radius-md;
@@ -138,7 +142,6 @@ body.template-topic {
     margin-bottom: $jv-space-4;
     font-size: $jv-font-size-sm;
 
-    // Avatar
     .avatar {
       width: 40px;
       height: 40px;
@@ -147,14 +150,12 @@ body.template-topic {
       flex-shrink: 0;
     }
 
-    // User info container
     .user-info {
       display: flex;
       flex-direction: column;
       gap: 2px;
     }
 
-    // Username
     .username,
     [component="post/header/username"] {
       font-weight: 600;
@@ -166,27 +167,20 @@ body.template-topic {
       }
     }
 
-    // Timestamp
     .timeago,
     [component="post/timestamp"] {
       color: $jv-text-soft;
       font-size: $jv-font-size-xs;
     }
 
-    // Post index/number - Subtle
     .post-index,
     [component="post/header/index"] {
       color: $jv-text-soft;
       font-size: $jv-font-size-xs;
       font-weight: 400;
-      opacity: 0.6;
-
-      &::before {
-        content: "#";
-      }
+      opacity: 0.5;
     }
 
-    // Bookmarked indicator
     .bookmarked {
       color: $jv-warning;
     }
@@ -202,34 +196,26 @@ body.template-topic {
 
     p {
       margin-bottom: $jv-space-4;
-
-      &:last-child {
-        margin-bottom: 0;
-      }
+      &:last-child { margin-bottom: 0; }
     }
 
-    // Code blocks
     pre, code {
       background: rgba(0, 0, 0, 0.04);
       border-radius: $jv-radius-sm;
       font-size: $jv-font-size-sm;
     }
 
-    code {
-      padding: 2px 6px;
-    }
+    code { padding: 2px 6px; }
 
     pre {
       padding: $jv-space-4;
       overflow-x: auto;
-
       code {
         padding: 0;
         background: transparent;
       }
     }
 
-    // Blockquotes
     blockquote {
       border-left: 3px solid $jv-border-strong;
       padding-left: $jv-space-4;
@@ -238,42 +224,34 @@ body.template-topic {
       font-style: italic;
     }
 
-    // Images
     img {
       max-width: 100%;
       border-radius: $jv-radius-sm;
     }
 
-    // Links
     a {
       color: $jv-primary;
-
-      &:hover {
-        text-decoration: underline;
-      }
+      &:hover { text-decoration: underline; }
     }
   }
 
   // ===========================================================
-  // POST FOOTER – Action Bar
+  // POST FOOTER & ACTIONS
   // ===========================================================
   [component="post/footer"],
   .post-footer {
-    padding-top: $jv-space-4;
+    padding-top: 0 !important;
+    padding-bottom: 0 !important;
     margin-top: $jv-space-4;
     border-top: 1px solid $jv-border-subtle;
   }
 
-  // ===========================================================
-  // ACTION ICONS – Ghost Button Style
-  // ===========================================================
   [component="post/actions"] {
     display: flex;
     align-items: center;
     gap: $jv-space-2;
     flex-wrap: wrap;
 
-    // All action buttons - Ghost style
     .btn,
     [component="post/reply"],
     [component="post/quote"],
@@ -293,9 +271,7 @@ body.template-topic {
       align-items: center;
       gap: $jv-space-2;
 
-      i {
-        font-size: 16px;
-      }
+      i { font-size: 16px; }
 
       &:hover {
         background: $jv-hover-bg !important;
@@ -307,7 +283,6 @@ body.template-topic {
         box-shadow: $jv-focus-ring;
       }
 
-      // Active states (voted, bookmarked)
       &.active,
       &.upvoted,
       &.downvoted,
@@ -317,7 +292,6 @@ body.template-topic {
       }
     }
 
-    // Vote counts
     [component="post/vote-count"] {
       font-weight: 600;
       color: $jv-text-muted;
@@ -326,71 +300,244 @@ body.template-topic {
     }
   }
 
+  // Always visible post actions (override Harmony's hover behavior)
+  .topic .posts [component="post"] [component="post/actions"] {
+    opacity: 1 !important;
+    visibility: visible !important;
+  }
+
   // ===========================================================
-  // RIGHT SIDEBAR ACTIONS – Ghost Buttons
+  // GHOST BUTTON – Shared Style
   // ===========================================================
-  .topic-main-buttons,
-  [component="topic/actions"],
-  .sidebar [data-widget-area] {
-    .btn {
-      background: transparent !important;
-      border: 1px solid transparent !important;
+  .btn-ghost {
+    background: transparent !important;
+    border: 1px solid transparent !important;
+    color: $jv-text-muted;
+    padding: $jv-space-2 $jv-space-3;
+    border-radius: $jv-radius-sm;
+    font-size: $jv-font-size-sm;
+    font-weight: 500;
+    transition: background-color $jv-transition-fast, color $jv-transition-fast;
+    display: inline-flex;
+    align-items: center;
+    gap: $jv-space-2;
+
+    i {
+      font-size: 16px;
+      color: $jv-primary;
+    }
+
+    &:hover {
+      background: $jv-hover-bg !important;
+      color: $jv-text-main;
+    }
+
+    &:focus-visible {
+      outline: none;
+      box-shadow: $jv-focus-ring;
+    }
+  }
+
+  // ===========================================================
+  // PRIMARY BUTTON – Reply
+  // ===========================================================
+  .btn-primary {
+    background: $jv-primary !important;
+    border-color: $jv-primary !important;
+    color: #fff !important;
+
+    &:hover {
+      background: $jv-primary-hover !important;
+      border-color: $jv-primary-hover !important;
+    }
+  }
+
+  // ===========================================================
+  // PAGINATION / TIMELINE NAVIGATOR – Shared
+  // ===========================================================
+  .pagination-block {
+    .scroller-content {
+      min-width: 180px;
+    }
+
+    .scroller-thumb-icon {
+      background: $jv-primary !important;
+      border-radius: $jv-radius-xs;
+      transition: transform $jv-transition-fast;
+    }
+
+    .pagetop,
+    .pagebottom {
+      background: transparent;
+      border: none;
       color: $jv-text-muted;
-      padding: $jv-space-2 $jv-space-4;
+      padding: $jv-space-2 $jv-space-3;
       border-radius: $jv-radius-sm;
       font-size: $jv-font-size-sm;
-      font-weight: 500;
-      transition: background-color $jv-transition-fast, color $jv-transition-fast;
-      display: inline-flex;
-      align-items: center;
-      gap: $jv-space-2;
-      width: 100%;
-      justify-content: flex-start;
-      text-align: left;
-
-      i {
-        font-size: 16px;
-        width: 20px;
-        text-align: center;
-      }
 
       &:hover {
-        background: $jv-hover-bg !important;
+        background: $jv-hover-bg;
         color: $jv-text-main;
       }
 
-      &:focus-visible {
-        outline: none;
-        box-shadow: $jv-focus-ring;
+      i { color: $jv-primary; }
+    }
+
+    .thumb-text {
+      color: $jv-text-main;
+      font-weight: 600;
+      font-size: $jv-font-size-sm;
+    }
+
+    .thumb-timestamp {
+      color: $jv-text-soft;
+      font-size: $jv-font-size-xs;
+    }
+  }
+
+  // ===========================================================
+  // TOPIC SIDEBAR – Right Column
+  // ===========================================================
+  .topic-sidebar-container {
+    position: sticky;
+    top: 80px;
+    height: fit-content;
+    align-self: flex-start;
+    z-index: 100;
+    pointer-events: auto;
+  }
+
+  .topic-sidebar {
+    background: $jv-surface;
+    border: 1px solid $jv-border-subtle;
+    border-radius: $jv-radius-md;
+    padding: $jv-space-4;
+    position: relative;
+    pointer-events: auto;
+
+    button, a, .btn, .dropdown-toggle, [role="button"] {
+      pointer-events: auto;
+      cursor: pointer;
+    }
+
+    .topic-sidebar-actions {
+      position: relative;
+      z-index: 10;
+
+      .btn,
+      [component="topic/reply/container"],
+      .btn-group,
+      .thread-tools {
+        width: 100%;
+        position: relative;
+        z-index: 10;
+      }
+
+      [component="topic/reply/container"] {
+        display: flex;
+        flex-direction: column;
+        gap: $jv-space-2;
+
+        .btn-primary {
+          flex: 1;
+          border-radius: $jv-radius-sm;
+          font-weight: 600;
+          padding: $jv-space-3 $jv-space-4;
+        }
+
+        .dropdown-toggle { display: none; }
       }
 
-      // Primary action (Reply)
-      &.btn-primary {
-        background: $jv-primary !important;
-        color: #fff;
+      // Consistent ghost button styling for all sidebar action buttons
+      .btn-ghost,
+      .bottom-sheet > .btn,
+      .thread-tools > .dropdown-toggle {
+        background: transparent !important;
+        border: 1px solid transparent !important;
+        color: $jv-text-muted;
+        padding: $jv-space-2 $jv-space-3;
+        border-radius: $jv-radius-sm;
+        font-size: $jv-font-size-sm;
+        font-weight: 500;
+        text-align: left;
+        width: 100%;
+        justify-content: flex-start;
+        transition: background-color $jv-transition-fast, color $jv-transition-fast;
+
+        i {
+          width: 16px;
+          color: $jv-primary;
+        }
 
         &:hover {
-          background: $jv-primary-hover !important;
-          color: #fff;
+          background: $jv-hover-bg !important;
+          color: $jv-text-main;
         }
       }
+
+      .bottom-sheet {
+        width: 100%;
+        .dropdown-menu { width: 100%; }
+      }
+
+      .thread-tools {
+        .dropdown-menu { min-width: 100%; }
+      }
+    }
+
+    .pagination-block {
+      margin-top: $jv-space-4;
+      padding-top: $jv-space-4;
+      border-top: 1px solid $jv-border-subtle;
+
+      .scroller-content { gap: $jv-space-2; }
+
+      .scroller-container {
+        padding: $jv-space-2 $jv-space-3;
+        position: relative !important;
+        left: auto !important;
+        height: auto !important;
+        border-left: none !important;
+      }
     }
   }
 
-  // Sidebar action list
-  .topic-actions-list,
-  .topic-tools {
-    display: flex;
-    flex-direction: column;
-    gap: $jv-space-1;
+  // ===========================================================
+  // WIDGET AREA
+  // ===========================================================
+  [data-widget-area="sidebar"] {
+    .btn {
+      transition: background-color $jv-transition-fast, color $jv-transition-fast;
+      &:focus-visible {
+        outline: none;
+        box-shadow: $jv-focus-ring;
+      }
+    }
 
-    .dropdown-item,
-    .action-item {
-      padding: $jv-space-2 $jv-space-4;
-      border-radius: $jv-radius-sm;
+    .widget {
+      background: $jv-surface;
+      border: 1px solid $jv-border-subtle;
+      border-radius: $jv-radius-md;
+      padding: $jv-space-4;
+    }
+  }
+
+  // ===========================================================
+  // TOPIC NAVIGATOR (Floating)
+  // ===========================================================
+  [component="topic/navigator"] {
+    background: $jv-surface;
+    border-radius: $jv-radius-md;
+    box-shadow: $jv-shadow-lg;
+    border: 1px solid $jv-border-subtle;
+    padding: $jv-space-3;
+
+    .btn {
+      background: transparent;
+      border: none;
       color: $jv-text-muted;
-      font-size: $jv-font-size-sm;
-      transition: background-color $jv-transition-fast, color $jv-transition-fast;
+      padding: $jv-space-2;
+      border-radius: $jv-radius-sm;
 
       &:hover {
         background: $jv-hover-bg;
@@ -410,14 +557,12 @@ body.template-topic {
     margin-top: $jv-space-6;
     border: 1px solid $jv-border-subtle;
 
-    // Quick reply header
     .quick-reply-header {
       margin-bottom: $jv-space-4;
       font-weight: 600;
       color: $jv-text-main;
     }
 
-    // Textarea
     textarea,
     .form-control {
       border: 1px solid $jv-border-subtle;
@@ -435,12 +580,9 @@ body.template-topic {
         box-shadow: $jv-focus-ring;
       }
 
-      &::placeholder {
-        color: $jv-text-soft;
-      }
+      &::placeholder { color: $jv-text-soft; }
     }
 
-    // Quick reply footer with buttons
     .quick-reply-footer,
     .composer-actions {
       display: flex;
@@ -451,7 +593,7 @@ body.template-topic {
   }
 
   // ===========================================================
-  // REPLY CONTAINER (Nested replies)
+  // NESTED REPLIES
   // ===========================================================
   [component="post/replies/container"] {
     margin-top: $jv-space-4;
@@ -464,33 +606,29 @@ body.template-topic {
       background: rgba(0, 0, 0, 0.02);
       border-radius: $jv-radius-sm;
 
-      .post-container {
-        padding: 0;
-      }
+      .post-container { padding: 0; }
     }
   }
 
   // ===========================================================
-  // TOPIC NAVIGATOR (Floating scroll helper)
+  // REPLY COUNT ACCORDION
   // ===========================================================
-  [component="topic/navigator"] {
-    background: $jv-surface;
-    border-radius: $jv-radius-md;
-    box-shadow: $jv-shadow-lg;
-    border: 1px solid $jv-border-subtle;
-    padding: $jv-space-3;
+  [component="post/reply-count"] {
+    color: $jv-text-muted;
+    font-size: $jv-font-size-sm;
+    padding: $jv-space-2 $jv-space-3;
+    border-radius: $jv-radius-sm;
+    cursor: pointer;
+    transition: background-color $jv-transition-fast, color $jv-transition-fast;
 
-    .btn {
-      background: transparent;
-      border: none;
-      color: $jv-text-muted;
-      padding: $jv-space-2;
-      border-radius: $jv-radius-sm;
+    &:hover {
+      background: $jv-hover-bg;
+      color: $jv-text-main;
+    }
 
-      &:hover {
-        background: $jv-hover-bg;
-        color: $jv-text-main;
-      }
+    .replies-count {
+      color: $jv-text-main;
+      font-weight: 600;
     }
   }
 }
@@ -518,11 +656,7 @@ body.template-topic {
       [component="post/upvote"],
       [component="post/downvote"] {
         padding: $jv-space-2;
-
-        // Hide text on smaller screens
-        span:not(.fa):not(.fas):not(.far):not(.fab) {
-          display: none;
-        }
+        span:not(.fa):not(.fas):not(.far):not(.fab) { display: none; }
       }
     }
   }
@@ -544,4 +678,4 @@ body.template-topic {
       padding-left: $jv-space-4;
     }
   }
-}
+}

package/templates/partials/topic/sidebar.tpl

@@ -0,0 +1,48 @@
+<div id="topic-sidebar" class="topic-sidebar">
+	<div class="d-flex flex-column gap-2">
+		<div class="topic-sidebar-actions d-flex flex-column gap-2 mb-3">
+			<!-- Reply Button -->
+			<!-- IMPORT partials/topic/reply-button.tpl -->
+
+			<!-- Mark Unread Button -->
+			{{{ if loggedIn }}}
+			<button component="topic/mark-unread" class="btn btn-ghost btn-sm d-flex gap-2 align-items-center w-100 justify-content-start">
+				<i class="fa fa-fw fa-inbox"></i>
+				<span class="fw-semibold text-nowrap">[[topic:mark-unread]]</span>
+			</button>
+			{{{ end }}}
+
+			<!-- Watching/Not Watching -->
+			<!-- IMPORT partials/topic/watch.tpl -->
+
+			<!-- Sort Options -->
+			<!-- IMPORT partials/topic/sort.tpl -->
+
+			<!-- Topic Tools (for mods/admins) -->
+			<!-- IMPORT partials/topic/tools.tpl -->
+		</div>
+
+		<!-- Post Navigator / Timeline -->
+		<div class="pagination-block flex-grow-1">
+			<div class="scroller-content d-flex gap-2 flex-column align-items-start">
+				<button class="btn btn-ghost btn-sm d-flex gap-2 align-items-center pagetop w-100 justify-content-start">
+					<i class="fa fa-fw fa-angle-up"></i>
+					<span class="timeago text-xs text-muted text-nowrap" title="{./timestampISO}"></span>
+				</button>
+				<div class="scroller-container position-relative w-100">
+					<div class="scroller-thumb d-flex gap-2 text-nowrap position-relative" style="height: 40px;">
+						<div class="scroller-thumb-icon rounded d-inline-block" style="width: 4px; height: 40px;"></div>
+						<div class="d-flex flex-column">
+							<span class="thumb-text small fw-semibold mb-0"></span>
+							<span class="thumb-timestamp timeago text-xs text-muted mb-0"></span>
+						</div>
+					</div>
+				</div>
+				<button class="btn btn-ghost btn-sm d-flex gap-2 align-items-center pagebottom w-100 justify-content-start">
+					<i class="fa fa-fw fa-angle-down"></i>
+					<span class="timeago text-xs text-muted text-nowrap" title="{./lastposttimeISO}"></span>
+				</button>
+			</div>
+		</div>
+	</div>
+</div>

package/templates/topic.tpl

@@ -0,0 +1,133 @@
+<!-- IMPORT partials/breadcrumbs-json-ld.tpl -->
+{{{ if config.theme.enableBreadcrumbs }}}
+<!-- IMPORT partials/breadcrumbs.tpl -->
+{{{ end }}}
+{{{ if widgets.header.length }}}
+<div data-widget-area="header">
+{{{each widgets.header}}}
+{{widgets.header.html}}
+{{{end}}}
+</div>
+{{{ end }}}
+
+<div itemid="{url}" itemscope itemtype="https://schema.org/DiscussionForumPosting">
+	<meta itemprop="headline" content="{escape(titleRaw)}">
+	<meta itemprop="text" content="{escape(titleRaw)}">
+	<meta itemprop="url" content="{url}">
+	<meta itemprop="datePublished" content="{timestampISO}">
+	<meta itemprop="dateModified" content="{lastposttimeISO}">
+	<div itemprop="author" itemscope itemtype="https://schema.org/Person">
+		<meta itemprop="name" content="{author.username}">
+		{{{ if author.userslug }}}<meta itemprop="url" content="{config.relative_path}/user/{author.userslug}">{{{ end }}}
+	</div>
+
+	<div class="d-flex flex-column gap-3">
+		<div class="d-flex flex-wrap">
+			<div class="d-flex flex-column gap-3 flex-grow-1">
+				<div class="topic-header d-flex align-items-start gap-3">
+					<a href="#" onclick="history.back(); return false;" class="topic-back-btn" title="Go back">
+						<i class="fa fa-arrow-left"></i>
+					</a>
+					<h1 component="post/header" class="tracking-tight fw-semibold fs-3 mb-0 text-break {{{ if config.theme.centerHeaderElements }}}text-center{{{ end }}}">
+						<span class="topic-title" component="topic/title">{title}</span>
+					</h1>
+				</div>
+
+				<div class="topic-info d-flex gap-2 align-items-center flex-wrap {{{ if config.theme.centerHeaderElements }}}justify-content-center{{{ end }}}">
+					<span component="topic/labels" class="d-flex gap-2 {{{ if (!scheduled && (!pinned && (!locked && (!oldCid && !icons.length)))) }}}hidden{{{ end }}}">
+						<span component="topic/scheduled" class="badge badge border border-gray-300 text-body {{{ if !scheduled }}}hidden{{{ end }}}">
+							<i class="fa fa-clock-o"></i> [[topic:scheduled]]
+						</span>
+						<span component="topic/pinned" class="badge badge border border-gray-300 text-body {{{ if (scheduled || !pinned) }}}hidden{{{ end }}}">
+							<i class="fa fa-thumb-tack"></i> {{{ if !pinExpiry }}}[[topic:pinned]]{{{ else }}}[[topic:pinned-with-expiry, {isoTimeToLocaleString(./pinExpiryISO, config.userLang)}]]{{{ end }}}
+						</span>
+						<span component="topic/locked" class="badge badge border border-gray-300 text-body {{{ if !locked }}}hidden{{{ end }}}">
+							<i class="fa fa-lock"></i> [[topic:locked]]
+						</span>
+						<a component="topic/moved" href="{config.relative_path}/category/{oldCid}" class="badge badge border border-gray-300 text-body text-decoration-none {{{ if !oldCid }}}hidden{{{ end }}}">
+							<i class="fa fa-arrow-circle-right"></i> {{{ if privileges.isAdminOrMod }}}[[topic:moved-from, {oldCategory.name}]]{{{ else }}}[[topic:moved]]{{{ end }}}
+						</a>
+						{{{each icons}}}<span class="lh-1">{@value}</span>{{{end}}}
+					</span>
+					{function.buildCategoryLabel, category, "a", "border"}
+					<div data-tid="{./tid}" component="topic/tags" class="lh-1 tags tag-list d-flex flex-wrap hidden-xs hidden-empty gap-2"><!-- IMPORT partials/topic/tags.tpl --></div>
+					<div class="d-flex hidden-xs gap-2"><!-- IMPORT partials/topic/stats.tpl --></div>
+				</div>
+			</div>
+			<div class="d-flex gap-2 align-items-center mt-2 hidden-empty" component="topic/thumb/list"><!-- IMPORT partials/topic/thumbs.tpl --></div>
+		</div>
+
+		<div class="topic-layout d-flex gap-4 mb-4 mb-lg-0">
+			<!-- Main Content Area -->
+			<div class="topic flex-grow-1" style="min-width: 0;">
+				{{{ if merger }}}
+				<!-- IMPORT partials/topic/merged-message.tpl -->
+				{{{ end }}}
+				{{{ if forker }}}
+				<!-- IMPORT partials/topic/forked-message.tpl -->
+				{{{ end }}}
+				{{{ if !scheduled }}}
+				<!-- IMPORT partials/topic/deleted-message.tpl -->
+				{{{ end }}}
+
+				<div class="posts-container" style="min-width: 0;">
+					<ul component="topic" class="posts timeline list-unstyled mt-sm-2 p-0 py-3" style="min-width: 0;" data-tid="{tid}" data-cid="{cid}">
+					{{{ each posts }}}
+						<li component="post" class="pt-4 {{{ if posts.deleted }}}deleted{{{ end }}} {{{ if posts.selfPost }}}self-post{{{ end }}} {{{ if posts.topicOwnerPost }}}topic-owner-post{{{ end }}}" <!-- IMPORT partials/data/topic.tpl -->>
+							<a component="post/anchor" data-index="{./index}" id="{increment(./index, "1")}"></a>
+							<meta itemprop="datePublished" content="{./timestampISO}">
+							{{{ if ./editedISO }}}
+							<meta itemprop="dateModified" content="{./editedISO}">
+							{{{ end }}}
+
+							<!-- IMPORT partials/topic/post.tpl -->
+						</li>
+						{{{ if (config.topicPostSort != "most_votes") }}}
+						{{{ each ./events}}}<!-- IMPORT partials/topic/event.tpl -->{{{ end }}}
+						{{{ end }}}
+					{{{ end }}}
+					</ul>
+					{{{ if browsingUsers }}}
+					<div class="visible-xs">
+						<!-- IMPORT partials/topic/browsing-users.tpl -->
+						<hr/>
+					</div>
+					{{{ end }}}
+					{{{ if config.theme.enableQuickReply }}}
+					<!-- IMPORT partials/topic/quickreply.tpl -->
+					{{{ end }}}
+				</div>
+
+				{{{ if config.usePagination }}}
+				<!-- IMPORT partials/paginator.tpl -->
+				{{{ end }}}
+			</div>
+
+			<!-- Right Sidebar with Topic Actions -->
+			<div class="topic-sidebar-container d-none d-lg-block" style="width: 200px; flex-shrink: 0;">
+				<!-- IMPORT partials/topic/sidebar.tpl -->
+
+				<!-- Additional Widgets (if any) -->
+				{{{ if widgets.sidebar.length }}}
+				<div data-widget-area="sidebar" class="mt-4">
+				{{{each widgets.sidebar}}}
+				{{widgets.sidebar.html}}
+				{{{end}}}
+				</div>
+				{{{ end }}}
+			</div>
+		</div>
+	</div>
+</div>
+
+<div data-widget-area="footer">
+{{{each widgets.footer}}}
+{{widgets.footer.html}}
+{{{end}}}
+</div>
+
+{{{ if !config.usePagination }}}
+<noscript>
+<!-- IMPORT partials/paginator.tpl -->
+</noscript>
+{{{ end }}}