@okjavis/nodebb-theme-javis 2.5.2 → 3.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@okjavis/nodebb-theme-javis",
-  "version": "2.5.2",
+  "version": "3.0.0",
   "description": "Modern, premium NodeBB theme for JAVIS Community - Extends Harmony with custom styling",
   "main": "theme.js",
   "scripts": {
@@ -34,6 +34,7 @@
     "scss/",
     "static/",
     "templates/",
+    "public/",
     "theme.js",
     "theme.scss",
     "theme.json",

package/plugin.json

@@ -9,8 +9,7 @@
     { "hook": "static:app.load", "method": "init" },
     { "hook": "filter:widgets.getAreas", "method": "defineWidgetAreas" },
     { "hook": "filter:admin.header.build", "method": "addAdminNavigation" },
-    { "hook": "filter:config.get", "method": "getThemeConfig" },
-    { "hook": "filter:settings.get", "method": "getAdminSettings" }
+    { "hook": "filter:config.get", "method": "getThemeConfig" }
   ],
   "staticDirs": {
     "static": "./static"

package/public/admin.js

@@ -0,0 +1,17 @@
+'use strict';
+
+define('admin/plugins/javis', ['settings'], function (Settings) {
+	var ACP = {};
+
+	ACP.init = function () {
+		// Load settings from 'harmony' key for compatibility with parent theme
+		Settings.load('harmony', $('.javis-settings'));
+
+		$('#save').on('click', function () {
+			// Save to 'harmony' key for compatibility
+			Settings.save('harmony', $('.javis-settings'));
+		});
+	};
+
+	return ACP;
+});

package/scss/_cards.scss

@@ -43,10 +43,10 @@
   flex-direction: column;
   align-items: center;
   justify-content: flex-start;
-  padding: $jv-space-6 $jv-space-4; // 24dp vertical, 16dp horizontal - Material grid
+  padding: $jv-space-4 $jv-space-3; // Tighter padding
   background: rgba(0, 0, 0, 0.02);
-  min-width: 44px;
-  gap: $jv-space-1; // 4dp - Material grid
+  min-width: 40px;
+  gap: 2px; // Minimal gap
 }
 
 .vote-btn {
@@ -100,10 +100,10 @@
 // ===========================================================
 .topic-content {
   flex: 1;
-  padding: $jv-space-3; // 12dp - Material grid
+  padding: $jv-space-3;
   display: flex;
   flex-direction: column;
-  gap: $jv-space-3; // 12dp - Material grid
+  gap: $jv-space-2; // Tighter gap between elements
   min-width: 0; // Allow text truncation
 }
 
@@ -147,10 +147,10 @@
 // Topic Title
 .topic-card .topic-title {
   margin: 0;
-  font-size: 20px; // Larger for prominence - consistent with feed
-  font-weight: 700; // Bolder for better hierarchy
-  line-height: 1.4; // Better readability
-  letter-spacing: -0.02em; // Tighter for modern feel
+  font-size: $jv-font-size-lg; // 18px - clear hierarchy
+  font-weight: 600; // Semi-bold
+  line-height: $jv-line-height-tight;
+  letter-spacing: -0.02em;
 
   a {
     color: $jv-text-main;
@@ -260,7 +260,7 @@
   color: $jv-text-muted;
   line-height: $jv-line-height-base;
   display: -webkit-box;
-  -webkit-line-clamp: 3;
+  -webkit-line-clamp: 2; // Reduced from 3 to 2 lines
   -webkit-box-orient: vertical;
   overflow: hidden;
 
@@ -270,6 +270,54 @@
   }
 }
 
+// ===========================================================
+// MEDIA ROW (Image + Text side by side)
+// ===========================================================
+.topic-media-row {
+  display: flex;
+  gap: $jv-space-4;
+  align-items: flex-start;
+
+  .topic-media-text {
+    flex: 1;
+    min-width: 0; // Allow text truncation
+
+    .topic-teaser {
+      -webkit-line-clamp: 3; // Allow more lines when beside image
+    }
+  }
+
+  .topic-thumbnail {
+    flex-shrink: 0;
+    width: 140px;
+    height: 100px;
+
+    img {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+    }
+  }
+}
+
+@media (max-width: 576px) {
+  .topic-media-row {
+    flex-direction: column-reverse;
+    gap: $jv-space-3;
+
+    .topic-thumbnail {
+      width: 100%;
+      height: auto;
+      max-height: 180px;
+
+      img {
+        max-height: 180px;
+        width: 100%;
+      }
+    }
+  }
+}
+
 // ===========================================================
 // ACTION BAR (Bottom - Reddit style)
 // ===========================================================
@@ -298,21 +346,21 @@ li[component="post"] hr,
 .action-btn {
   display: inline-flex;
   align-items: center;
-  gap: $jv-space-2; // 8dp grid
-  padding: $jv-space-2 $jv-space-3; // 8dp vertical, 12dp horizontal
-  font-size: 14px;
-  font-weight: 600;
-  color: $jv-text-muted;
+  gap: $jv-space-1; // Tighter gap
+  padding: $jv-space-1 $jv-space-2; // Smaller padding
+  font-size: $jv-font-size-xs; // Smaller font
+  font-weight: 500; // Lighter weight
+  color: $jv-text-soft; // More subtle color
   background: transparent;
   border: none;
-  border-radius: $jv-radius-sm; // 8px shadcn standard
+  border-radius: $jv-radius-xs;
   cursor: pointer;
   text-decoration: none;
-  transition: background-color $jv-transition-fast, color $jv-transition-fast; // Modern transitions
+  transition: background-color $jv-transition-fast, color $jv-transition-fast;
 
   &:hover {
-    background: $jv-hover-bg; // Consistent hover state
-    color: $jv-text-main;
+    background: $jv-hover-bg;
+    color: $jv-text-muted;
   }
 
   // Focus state for accessibility
@@ -322,12 +370,11 @@ li[component="post"] hr,
   }
 
   i {
-    font-size: 18px; // Larger icons
+    font-size: 14px; // Smaller icons
   }
 
-  // Make numbers bold
   span {
-    font-weight: 700;
+    font-weight: 500; // Normal weight, not bold
   }
 }
 

package/scss/_categories.scss

@@ -1,58 +1,93 @@
 // ===========================================================
-// CATEGORIES – Enterprise Clean Style (Linear-inspired)
+// CATEGORIES – Reddit/Community Style Cards
+// Matches topic-card design for visual consistency
 // ===========================================================
 
 // Category Header
 .feed h2 {
-  font-size: 16px;
+  font-size: $jv-font-size-base;
   font-weight: 600;
-  margin: 0 0 $jv-space-6 0; // 24dp - Material grid
+  margin: 0 0 $jv-space-6 0;
   padding: 0;
   color: $jv-text-main;
   letter-spacing: -0.2px;
 }
 
-// Wrapper list spacing
+// Wrapper list spacing - cards with gaps
 ul.categories-list.list-unstyled {
   margin: 0;
   padding: 0;
   display: flex;
   flex-direction: column;
-  gap: 0;
+  gap: $jv-space-3;
+
+  // First category gets subtle featured treatment
+  > li[component="categories/category"]:first-child {
+    background: linear-gradient(135deg, rgba($jv-primary, 0.04) 0%, rgba($jv-primary, 0.01) 100%);
+    border-color: rgba($jv-primary, 0.2);
+
+    &:hover {
+      border-color: rgba($jv-primary, 0.35);
+    }
+  }
 }
 
 // ===========================================================
-// PARENT CATEGORY BLOCK
+// PARENT CATEGORY CARD (Consolidated selector)
 // ===========================================================
 
 li[component="categories/category"] {
-  padding: $jv-space-4 0; // 16dp grid
-  border-bottom: 1px solid #f1f1f1;
-  transition: background $jv-transition-fast; // Modern transition
-
-  &:last-child {
-    border-bottom: none;
-  }
+  position: relative;
+  background: $jv-surface;
+  border-radius: $jv-radius-sm;
+  border: 1px solid $jv-border-subtle;
+  box-shadow: $jv-shadow-sm;
+  padding: $jv-space-5;
+  transition: box-shadow $jv-transition-base, border-color $jv-transition-fast, transform $jv-transition-fast;
 
   &:hover {
-    background: $jv-hover-bg; // Consistent hover state
+    box-shadow: $jv-shadow-md;
+    border-color: $jv-border-strong;
+    transform: translateY(-1px);
+
+    .subcategory-pill {
+      background: $jv-surface;
+    }
   }
 
-  // Focus state for accessibility
   &:focus-within {
     outline: none;
-    background: $jv-hover-bg;
+    box-shadow: $jv-shadow-md, $jv-focus-ring;
+  }
+
+  // Unread state
+  &.unread {
+    border-left: 3px solid $jv-primary;
+
+    .title a {
+      font-weight: 700;
+    }
+  }
+
+  // New posts indicator
+  &.new-posts {
+    .activity-badge.active {
+      animation: pulse 2s ease-in-out infinite;
+    }
   }
 
-  // Parent title
+  // ------------------------------------
+  // Title
+  // ------------------------------------
   .title {
-    font-size: $jv-font-size-base;
+    font-size: $jv-font-size-lg;
     font-weight: 600;
     color: $jv-text-main;
-    margin-bottom: $jv-space-1; // 4dp - Material grid
+    margin-bottom: $jv-space-1; // Tighter spacing to description
     display: flex;
     align-items: center;
-    gap: $jv-space-2; // 8dp - Material grid
+    gap: $jv-space-3;
+    letter-spacing: -0.02em;
 
     a {
       text-decoration: none;
@@ -69,51 +104,173 @@ li[component="categories/category"] {
     }
   }
 
-  // Category description
+  // ------------------------------------
+  // Description
+  // ------------------------------------
   .description {
     font-size: $jv-font-size-sm;
     color: $jv-text-muted;
-    line-height: 1.45;
-    margin-bottom: $jv-space-2; // 8dp - Material grid
-    max-width: 92%;
+    line-height: $jv-line-height-base;
+    margin-bottom: $jv-space-3;
+    max-width: 100%;
+  }
+
+  // ------------------------------------
+  // Category Icon
+  // ------------------------------------
+  .category-icon,
+  [component="category/icon"] {
+    width: 48px !important;
+    height: 48px !important;
+    border-radius: $jv-radius-sm !important;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: $jv-font-size-lg !important;
+    flex-shrink: 0;
+    box-shadow: $jv-shadow-xs;
+  }
+
+  // ------------------------------------
+  // Stats - Minimal inline design
+  // ------------------------------------
+  .stats-minimal {
+    .stat-item {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      gap: 2px;
+    }
+
+    .stat-number {
+      font-size: $jv-font-size-lg;
+      font-weight: 600;
+      color: $jv-text-main;
+      line-height: 1;
+    }
+
+    .stat-label {
+      font-size: $jv-font-size-xs;
+      color: $jv-text-soft;
+      text-transform: uppercase;
+      letter-spacing: 0.3px;
+      font-weight: 500;
+    }
+  }
+
+  // ------------------------------------
+  // Last Post Teaser
+  // ------------------------------------
+  .teaser {
+    // Reset inherited spacing from NodeBB
+    padding-top: 0 !important;
+    margin-top: 0 !important;
+    border-top: none !important;
+
+    .teaser-enhanced {
+      border-left: 3px solid var(--teaser-color, $jv-primary);
+      height: auto !important;
+      border-radius: 0 $jv-radius-sm $jv-radius-sm 0;
+      background: $jv-bg;
+      padding: $jv-space-3;
+      transition: background $jv-transition-fast;
+
+      &:hover {
+        background: darken($jv-bg, 2%);
+      }
+
+      .teaser-header {
+        .avatar-tooltip img,
+        [component="user/picture"] {
+          width: 24px !important;
+          height: 24px !important;
+          border-radius: $jv-radius-pill;
+        }
+
+        .teaser-meta {
+          display: flex;
+          flex-direction: column;
+          gap: 0;
+          line-height: 1.2;
+
+          .teaser-user {
+            font-size: $jv-font-size-xs;
+            font-weight: 600;
+            color: $jv-text-main;
+          }
+
+          .teaser-time {
+            font-size: $jv-font-size-xs;
+            color: $jv-text-soft;
+            text-decoration: none;
+          }
+        }
+      }
+
+      .teaser-content-wrapper {
+        display: flex;
+        flex-direction: column;
+        gap: $jv-space-1;
+      }
+
+      .teaser-content {
+        font-size: $jv-font-size-sm;
+        color: $jv-text-muted;
+        line-height: $jv-line-height-base;
+        display: -webkit-box;
+        -webkit-line-clamp: 2;
+        -webkit-box-orient: vertical;
+        overflow: hidden;
+      }
+
+      .teaser-read-more {
+        font-size: $jv-font-size-xs;
+        font-weight: 500;
+        color: $jv-primary;
+        text-decoration: none;
+        transition: color $jv-transition-fast;
+
+        &:hover {
+          color: darken($jv-primary, 10%);
+          text-decoration: underline;
+        }
+      }
+    }
   }
 }
 
 // ===========================================================
-// CHILD CATEGORY ITEMS – Linear-style tiny dot list
+// CHILD CATEGORY ITEMS – Subcategory pills
 // ===========================================================
 
-li[component="categories/category"] .category-children {
+.category-children {
   display: flex;
   flex-direction: column;
-  gap: $jv-space-2; // 8dp - Material grid
-  margin-top: $jv-space-1; // 4dp - Material grid
+  gap: $jv-space-2;
+  margin-top: $jv-space-1;
 }
 
 .category-children-item {
   small > .d-flex {
     display: flex;
     align-items: center;
-    gap: $jv-space-2; // 8dp - Material grid
-    font-size: 14px;
-    color: #333;
+    gap: $jv-space-2;
+    font-size: $jv-font-size-sm;
+    color: $jv-text-main;
   }
 
-  // Dot (neutral by default)
   i {
     font-size: 6px;
-    color: #999;
+    color: $jv-text-soft;
     margin-top: 1px;
   }
 
-  // Child link
   a {
     text-decoration: none;
-    font-size: 14px;
-    color: #333;
-    transition: color $jv-transition-fast; // Modern transition
+    font-size: $jv-font-size-sm;
+    color: $jv-text-main;
+    transition: color $jv-transition-fast;
 
-    // Focus state for accessibility
     &:focus-visible {
       outline: none;
       color: $jv-primary;
@@ -123,7 +280,6 @@ li[component="categories/category"] .category-children {
     }
   }
 
-  // Hover state: blue dot + blue text
   &:hover {
     i {
       color: $jv-primary;
@@ -134,3 +290,232 @@ li[component="categories/category"] .category-children {
     }
   }
 }
+
+// ===========================================================
+// ACTIVITY BADGES
+// ===========================================================
+
+.category-activity-row {
+  margin-top: $jv-space-1;
+}
+
+.activity-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: $jv-space-1;
+  padding: $jv-space-1 $jv-space-2;
+  font-size: $jv-font-size-xs;
+  font-weight: 500;
+  color: $jv-text-soft;
+  background: $jv-bg;
+  border-radius: $jv-radius-pill;
+  transition: all $jv-transition-fast;
+  cursor: default;
+
+  i {
+    font-size: $jv-font-size-xs;
+  }
+
+  &:hover {
+    transform: scale(1.02);
+  }
+
+  // Removed .active green styling - now uses default muted style for time badge
+
+  &.hot {
+    background: rgba($jv-warning, 0.12);
+    color: $jv-warning;
+
+    i {
+      color: $jv-warning;
+    }
+  }
+
+  &.new {
+    background: $jv-primary-soft;
+    color: $jv-primary;
+
+    i {
+      color: $jv-primary;
+    }
+  }
+}
+
+// ===========================================================
+// CATEGORY ICON ENHANCED (with glow effect)
+// ===========================================================
+
+.category-icon-enhanced {
+  position: relative;
+
+  &::after {
+    content: '';
+    position: absolute;
+    inset: -2px;
+    border-radius: inherit;
+    background: inherit;
+    opacity: 0.2;
+    z-index: -1;
+    filter: blur(4px);
+  }
+}
+
+// ===========================================================
+// EMPTY STATE
+// ===========================================================
+
+.empty-state {
+  color: $jv-text-soft !important;
+  font-style: italic;
+}
+
+.empty-category-state {
+  display: flex;
+  align-items: center;
+  height: 100%;
+
+  .empty-icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 28px;
+    height: 28px;
+    border-radius: $jv-radius-pill;
+    background: $jv-bg;
+    color: $jv-text-soft;
+    font-size: $jv-font-size-sm;
+  }
+
+  .empty-text {
+    font-size: $jv-font-size-xs;
+    color: $jv-text-soft;
+    font-weight: 500;
+  }
+}
+
+// ===========================================================
+// SUBCATEGORY PILLS
+// ===========================================================
+
+.subcategory-pills {
+  margin-top: $jv-space-2;
+}
+
+.subcategory-pill {
+  display: inline-flex;
+  align-items: center;
+  gap: $jv-space-2;
+  padding: $jv-space-1 $jv-space-3 $jv-space-1 $jv-space-1;
+  background: $jv-bg;
+  border: 1px solid transparent;
+  border-radius: $jv-radius-pill;
+  text-decoration: none;
+  transition: all $jv-transition-fast;
+
+  .pill-icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 22px;
+    height: 22px;
+    border-radius: $jv-radius-pill;
+    color: white;
+    font-size: $jv-font-size-xs;
+    flex-shrink: 0;
+
+    i {
+      line-height: 1;
+    }
+  }
+
+  .pill-name {
+    font-size: $jv-font-size-xs;
+    font-weight: 500;
+    color: $jv-text-main;
+    white-space: nowrap;
+  }
+
+  &:hover {
+    background: $jv-surface;
+    border-color: var(--pill-color, $jv-border-subtle);
+    box-shadow: $jv-shadow-sm;
+    transform: translateY(-1px);
+
+    .pill-name {
+      color: var(--pill-color, $jv-primary);
+    }
+  }
+
+  &:focus-visible {
+    outline: none;
+    box-shadow: $jv-focus-ring;
+  }
+}
+
+// ===========================================================
+// ANIMATIONS
+// ===========================================================
+
+@keyframes pulse {
+  0%, 100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.6;
+  }
+}
+
+// ===========================================================
+// RESPONSIVE ADJUSTMENTS
+// ===========================================================
+
+@media (max-width: 991px) {
+  li[component="categories/category"] {
+    padding: $jv-space-4;
+
+    .teaser {
+      margin-top: $jv-space-3;
+    }
+  }
+}
+
+@media (max-width: 576px) {
+  ul.categories-list.list-unstyled {
+    gap: $jv-space-2;
+  }
+
+  li[component="categories/category"] {
+    padding: $jv-space-4;
+    border-radius: $jv-radius-sm;
+
+    .title {
+      font-size: $jv-font-size-base;
+    }
+
+    .description {
+      font-size: $jv-font-size-xs;
+    }
+
+    .category-activity-row {
+      flex-wrap: wrap;
+    }
+  }
+
+  .subcategory-pills {
+    gap: $jv-space-1 !important;
+  }
+
+  .subcategory-pill {
+    padding: $jv-space-1 $jv-space-2 $jv-space-1 $jv-space-1;
+
+    .pill-icon {
+      width: 18px;
+      height: 18px;
+      font-size: $jv-font-size-xs;
+    }
+
+    .pill-name {
+      font-size: $jv-font-size-xs;
+    }
+  }
+}

package/scss/_topic.scss

@@ -63,7 +63,7 @@ body.template-topic {
     display: flex;
     flex-wrap: wrap;
     gap: $jv-space-2;
-    margin-bottom: $jv-space-4;
+    margin-bottom: 0;
 
     .badge,
     .tag {

package/templates/category.tpl

@@ -0,0 +1,95 @@
+<!-- IMPORT partials/breadcrumbs-json-ld.tpl -->
+{{{ if config.theme.enableBreadcrumbs }}}
+<!-- IMPORT partials/breadcrumbs.tpl -->
+{{{ end }}}
+
+<div class="category-header d-flex flex-column gap-2">
+	<div class="d-flex gap-2 align-items-center mb-1 {{{ if config.theme.centerHeaderElements }}}justify-content-center{{{ end }}}">
+		{buildCategoryIcon(@value, "40px", "rounded-1 flex-shrink-0")}
+		<h1 class="tracking-tight fs-2 fw-semibold mb-0">{./name}</h1>
+	</div>
+	{{{ if ./descriptionParsed }}}
+	<div class="description text-secondary text-sm w-100 {{{ if config.theme.centerHeaderElements }}}text-center{{{ end }}} line-clamp-4 clamp-fade-4">
+		{./descriptionParsed}
+	</div>
+	{{{ end }}}
+	<!-- ActivityPub handle - hidden by default, can show via tooltip -->
+	{{{ if ./handleFull }}}
+	<div class="activitypub-handle d-none">
+		<p class="text-secondary text-sm fst-italic mb-0">
+			[[category:handle.description, {handleFull}]]
+			<a href="#" class="link-secondary" data-action="copy" data-clipboard-text="{handleFull}"><i class="fa fa-fw fa-copy" aria-hidden="true"></i></a>
+		</p>
+	</div>
+	{{{ end }}}
+	<div class="d-flex flex-wrap gap-2 {{{ if config.theme.centerHeaderElements }}}justify-content-center{{{ end }}}">
+		<span class="badge text-body border border-gray-300 stats text-xs">
+			<span title="{totalTopicCount}" class="fw-bold">{humanReadableNumber(totalTopicCount)}</span>
+			<span class="text-lowercase fw-normal">[[global:topics]]</span>
+		</span>
+		<span class="badge text-body border border-gray-300 stats text-xs">
+			<span title="{totalPostCount}" class="fw-bold">{humanReadableNumber(totalPostCount)}</span>
+			<span class="text-lowercase fw-normal">[[global:posts]]</span>
+		</span>
+		{{{ if !isNumber(cid) }}}
+		<a href="{./url}" class="badge text-body border border-gray-300 text-xs" data-ajaxify="false">
+			<span class="fw-normal">View Original</span>
+			<i class="fa fa-external-link"></i>
+		</a>
+		{{{ end }}}
+	</div>
+</div>
+
+{{{ if widgets.header.length }}}
+<div data-widget-area="header">
+	{{{ each widgets.header }}}
+	{{widgets.header.html}}
+	{{{ end }}}
+</div>
+{{{ end }}}
+
+
+<div class="row flex-fill mt-3">
+	<div class="category d-flex flex-column {{{if widgets.sidebar.length }}}col-lg-9 col-sm-12{{{ else }}}col-lg-12{{{ end }}}">
+		<!-- IMPORT partials/category/subcategory.tpl -->
+		{{{ if (topics.length || privileges.topics:create) }}}
+		<!-- IMPORT partials/topic-list-bar.tpl -->
+		{{{ end }}}
+
+		{{{ if (./inbox && (./hasFollowers == false)) }}}
+		<div class="alert alert-warning mb-4" id="category-no-followers" data-bs-toggle="dropdown" data-bs-target='[component="topic/watch"] button' aria-hidden="true">
+			<i class="fa fa-triangle-exclamation pe-2"></i>
+			[[category:no-followers]]
+			<a href="#" class="stretched-link"></a>
+		</div>
+		{{{ end }}}
+
+		{{{ if (!topics.length && privileges.topics:create) }}}
+		<div class="alert alert-info" id="category-no-topics">
+			[[category:no-topics]]
+		</div>
+		{{{ end }}}
+
+		<!-- IMPORT partials/topics_list.tpl -->
+
+		{{{ if config.usePagination }}}
+		<!-- IMPORT partials/paginator.tpl -->
+		{{{ end }}}
+	</div>
+	<div data-widget-area="sidebar" class="col-lg-3 col-sm-12 {{{ if !widgets.sidebar.length }}}hidden{{{ end }}}">
+		{{{ each widgets.sidebar }}}
+		{{widgets.sidebar.html}}
+		{{{ end }}}
+	</div>
+</div>
+<div data-widget-area="footer">
+	{{{each widgets.footer}}}
+	{{widgets.footer.html}}
+	{{{end}}}
+</div>
+
+{{{ if !config.usePagination }}}
+<noscript>
+	<!-- IMPORT partials/paginator.tpl -->
+</noscript>
+{{{ end }}}

package/templates/partials/categories/item.tpl

@@ -0,0 +1,67 @@
+<li component="categories/category" data-cid="{./cid}" class="category-card w-100 py-3 py-lg-4 gap-lg-0 gap-2 d-flex flex-column flex-lg-row align-items-start category-{./cid} {./unread-class}">
+	<meta itemprop="name" content="{./name}">
+
+	<div class="d-flex col-lg-7 gap-2 gap-lg-3">
+		<div class="flex-shrink-0">
+		{buildCategoryIcon(@value, "48px", "rounded-1 category-icon-enhanced")}
+		</div>
+		<div class="flex-grow-1 d-flex flex-wrap gap-1 me-0 me-lg-2">
+			<h2 class="title text-break fs-5 fw-semibold m-0 tracking-tight w-100">
+				<!-- IMPORT partials/categories/link.tpl -->
+			</h2>
+			{{{ if ./descriptionParsed }}}
+			<div class="description text-muted text-sm w-100">
+				{./descriptionParsed}
+			</div>
+			{{{ end }}}
+
+			<!-- Activity Badge Row -->
+			<div class="category-activity-row d-flex align-items-center gap-2 w-100 mt-1">
+				{{{ each ./posts }}}
+				{{{ if @first }}}
+				<span class="activity-badge" title="Last activity">
+					<i class="fa fa-clock-o"></i>
+					<span class="timeago" title="{./timestampISO}"></span>
+				</span>
+				{{{ end }}}
+				{{{ end }}}
+			</div>
+
+			{{{ if !config.hideSubCategories }}}
+			{{{ if ./children.length }}}
+			<div class="subcategory-pills d-flex flex-wrap gap-2 mt-2 w-100">
+				{{{ each ./children }}}
+				{{{ if !./isSection }}}
+				<a href="{{{ if ./link }}}{./link}{{{ else }}}{config.relative_path}/category/{./slug}{{{ end }}}" class="subcategory-pill" style="--pill-color: {./bgColor};">
+					<span class="pill-icon" style="background-color: {./bgColor};">
+						<i class="{./icon}"></i>
+					</span>
+					<span class="pill-name">{./name}</span>
+				</a>
+				{{{ end }}}
+				{{{ end }}}
+			</div>
+			{{{ end }}}
+			{{{ end }}}
+		</div>
+	</div>
+	{{{ if !./link }}}
+	<div class="d-flex col-lg-5 col-12 align-content-stretch">
+		<div class="meta stats-minimal d-none d-lg-flex col-4 gap-3 pe-3 text-muted align-items-center justify-content-end">
+			<div class="stat-item text-center">
+				<span class="stat-number" title="{./totalTopicCount}">{humanReadableNumber(./totalTopicCount, 0)}</span>
+				<span class="stat-label">topics</span>
+			</div>
+			<div class="stat-item text-center">
+				<span class="stat-number" title="{./totalPostCount}">{humanReadableNumber(./totalPostCount, 0)}</span>
+				<span class="stat-label">posts</span>
+			</div>
+		</div>
+		{{{ if !config.hideCategoryLastPost }}}
+		<div component="topic/teaser" class="teaser col-lg-8 col-12 {{{ if !config.theme.mobileTopicTeasers }}}d-none d-lg-block{{{ end }}}">
+			<!-- IMPORT partials/categories/lastpost.tpl -->
+		</div>
+		{{{ end }}}
+	</div>
+	{{{ end }}}
+</li>

package/templates/partials/categories/lastpost.tpl

@@ -0,0 +1,30 @@
+<div class="lastpost teaser-enhanced lh-sm h-100" style="--teaser-color: {./bgColor};">
+	{{{ each ./posts }}}
+	{{{ if @first }}}
+	<div component="category/posts" class="d-flex flex-column h-100 gap-2">
+		<div class="teaser-header d-flex align-items-center gap-2">
+			<a class="text-decoration-none avatar-tooltip" title="{./user.displayname}" href="{config.relative_path}/user/{./user.userslug}">{buildAvatar(posts.user, "24px", true)}</a>
+			<div class="teaser-meta">
+				<span class="teaser-user">{./user.displayname}</span>
+				<a class="permalink timeago teaser-time" href="{config.relative_path}/topic/{./topic.slug}{{{ if ./index }}}/{./index}{{{ end }}}" title="{./timestampISO}" aria-label="[[global:lastpost]]"></a>
+			</div>
+		</div>
+		<div class="teaser-content-wrapper position-relative flex-fill">
+			<div class="teaser-content text-break line-clamp-2">
+				{./content}
+			</div>
+			<a class="teaser-read-more" href="{config.relative_path}/topic/{./topic.slug}{{{ if ./index }}}/{./index}{{{ end }}}">Read more →</a>
+		</div>
+	</div>
+	{{{ end }}}
+	{{{ end }}}
+
+	{{{ if !./posts.length }}}
+	<div component="category/posts" class="ps-2 empty-category-state">
+		<div class="d-flex flex-column align-items-start gap-1">
+			<span class="empty-icon"><i class="fa fa-inbox"></i></span>
+			<span class="empty-text">Be the first to post</span>
+		</div>
+	</div>
+	{{{ end }}}
+</div>

package/templates/partials/categories/link.tpl

@@ -0,0 +1,5 @@
+{{{ if ./isSection }}}
+{./name}
+{{{ else }}}
+<a class="text-reset" href="{{{ if ./link }}}{./link}{{{ else }}}{config.relative_path}/category/{./slug}{{{ end }}}" itemprop="url">{../name}</a>
+{{{ end }}}

package/templates/partials/topics_list.tpl

@@ -69,28 +69,37 @@
 			</div>
 			{{{ end }}}
 
-			<!-- Thumbnail Preview (if exists) -->
+			<!-- Content with optional thumbnail (side by side when image 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 -->
+			<div class="topic-media-row">
+				<div class="topic-media-text">
+					{{{ if ./teaser.content }}}
+					<div class="topic-teaser">
+						{./teaser.content}
+					</div>
+					{{{ end }}}
+				</div>
+				<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>
+			</div>
+			{{{ else }}}
+			<!-- Teaser/Preview Content (no image) -->
 			{{{ if ./teaser.content }}}
 			<div class="topic-teaser">
 				{./teaser.content}
 			</div>
 			{{{ end }}}
+			{{{ 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>
+					<span>{humanReadableNumber(./postcount, 0)} {{{ if (./postcount == 1) }}}Comment{{{ else }}}Comments{{{ end }}}</span>
 				</a>
 				<button class="action-btn share-btn" data-url="{config.relative_path}/topic/{./slug}">
 					<i class="fa fa-share"></i>

package/theme.js

@@ -9,11 +9,9 @@ const meta = require.main.require('./src/meta');
 const user = require.main.require('./src/user');
 const _ = require.main.require('lodash');
 
-const controllers = require('./lib/controllers');
-
 const theme = {};
 
-// JAVIS defaults - openSidebars is 'on' by default
+// Harmony's defaults - we override openSidebars to 'on'
 const defaults = {
   enableQuickReply: 'on',
   enableBreadcrumbs: 'on',
@@ -35,24 +33,24 @@ theme.init = async function (params) {
   const { router } = params;
   const routeHelpers = require.main.require('./src/routes/helpers');
 
-  // Admin panel route
-  routeHelpers.setupAdminPageRoute(router, '/admin/plugins/javis', [], controllers.renderAdminPage);
+  // Admin panel route - render using Harmony's admin template structure
+  routeHelpers.setupAdminPageRoute(router, '/admin/plugins/javis', [], (req, res) => {
+    res.render('admin/plugins/javis', {
+      title: 'JAVIS Theme',
+    });
+  });
 };
 
 /**
- * Load theme config
+ * Load theme config - replaces Harmony's loadThemeConfig
  * Uses JAVIS defaults (with openSidebars: 'on')
  */
 async function loadThemeConfig(uid) {
-  const [harmonyConfig, javisConfig, userConfig] = await Promise.all([
-    meta.settings.get('harmony'),  // Read from Harmony's settings (parent theme)
-    meta.settings.get('javis'),    // Read from JAVIS-specific settings
+  const [themeConfig, userConfig] = await Promise.all([
+    meta.settings.get('harmony'),
     user.getSettings(uid),
   ]);
 
-  // Merge: Harmony settings first, then JAVIS overrides
-  const themeConfig = { ...harmonyConfig, ...javisConfig };
-
   // 3-tier cascade: JAVIS defaults -> theme settings -> user settings
   const config = { ...defaults, ...themeConfig, ...(_.pick(userConfig, Object.keys(defaults))) };
 
@@ -71,9 +69,6 @@ async function loadThemeConfig(uid) {
   return config;
 }
 
-// Export loadThemeConfig for potential use by other modules
-theme.loadThemeConfig = loadThemeConfig;
-
 /**
  * Hook: filter:config.get
  * Sets config.theme with JAVIS-specific defaults
@@ -84,20 +79,6 @@ theme.getThemeConfig = async function (config) {
   return config;
 };
 
-/**
- * Hook: filter:settings.get
- * Provide default values for admin settings
- */
-theme.getAdminSettings = async function (hookData) {
-  if (hookData.plugin === 'javis') {
-    hookData.values = {
-      ...defaults,
-      ...hookData.values,
-    };
-  }
-  return hookData;
-};
-
 theme.defineWidgetAreas = async (areas) => {
   // Define widget areas like Harmony does
   const locations = ['header', 'sidebar', 'footer'];