@meith/theme-midnight 0.2.0 → 0.3.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@meith/theme-midnight",
-  "version": "0.2.0",
+  "version": "0.3.3",
   "description": "A dark theme for Meith, built on the default theme's slots.",
   "license": "LGPL-3.0-or-later",
   "repository": {
@@ -20,8 +20,8 @@
     "access": "public"
   },
   "dependencies": {
-    "@meith/theme-default": "^0.2.0",
-    "@meith/theme-kit": "^0.2.0"
+    "@meith/theme-default": "^0.3.3",
+    "@meith/theme-kit": "^0.3.3"
   },
   "peerDependencies": {
     "react": "^19.2.0"

package/src/slots/board-index.tsx

@@ -2,23 +2,31 @@ import type { BoardIndexModel } from '@meith/theme-kit'
 
 export function BoardIndex({ markAllReadAction, regions }: BoardIndexModel) {
   const latest = regions.latest ?? null
+  const hasRail = latest !== null || regions.online !== null || regions.stats !== null
 
   return (
     <div className="flex flex-col gap-3 p-3">
-      {latest !== null && <div className="flex flex-col gap-3">{latest}</div>}
-
-      {(regions.online !== null || regions.stats !== null) && (
-        <div className="flex flex-col gap-3">
-          {regions.online}
-          {regions.stats}
-        </div>
-      )}
-
       {regions.announcements !== undefined && (
         <div className="flex flex-col gap-3">{regions.announcements}</div>
       )}
 
-      <div className="flex flex-col gap-3">{regions.categories}</div>
+      <div
+        className={
+          hasRail
+            ? 'grid items-start gap-3 lg:grid-cols-[minmax(0,1fr)_20rem]'
+            : 'flex min-w-0 flex-col gap-3'
+        }
+      >
+        <div className="flex min-w-0 flex-col gap-3">{regions.categories}</div>
+
+        {hasRail && (
+          <aside aria-label="Board activity" className="flex min-w-0 flex-col gap-3">
+            {latest}
+            {regions.online}
+            {regions.stats}
+          </aside>
+        )}
+      </div>
 
       {regions.plugins}
 

package/src/slots/board-stats.tsx

@@ -17,7 +17,7 @@ export function BoardStats({
       >
         Board statistics
       </h2>
-      <dl className="grid grid-cols-2 gap-x-4 gap-y-1 px-3 py-2 font-mono text-xs sm:grid-cols-4">
+      <dl className="grid grid-cols-2 gap-x-4 gap-y-1 px-3 py-2 font-mono text-xs md:grid-cols-4 lg:grid-cols-2">
         <div>
           <dt className="text-muted-foreground">threads</dt>
           <dd>{threadCount}</dd>

package/src/slots/category-block.tsx

@@ -13,7 +13,13 @@ export function CategoryBlock({ category, children }: CategoryBlockModel) {
           {category.description}
         </p>
       )}
-      <table className="w-full border-collapse text-sm">
+      <table className="w-full table-fixed border-collapse text-sm">
+        <colgroup>
+          <col />
+          <col className="w-16" />
+          <col className="w-16" />
+          <col className="w-64" />
+        </colgroup>
         <thead className="sr-only">
           <tr>
             <th scope="col">Forum</th>

package/src/slots/latest-posts.tsx

@@ -18,11 +18,10 @@ export function LatestPosts({ posts, capturedAt }: LatestPostsModel) {
         <ul className="divide-y divide-border font-mono text-xs">
           {posts.map((post) => (
             <li key={post.href} className="px-3 py-1.5">
-              <a href={post.href} className="text-primary hover:underline">
+              <a href={post.href} className="block truncate text-primary hover:underline">
                 {post.threadTitle}
               </a>
-              <span className="text-muted-foreground">
-                {' · '}
+              <p className="truncate text-muted-foreground">
                 <a href={post.forum.href} className="hover:text-foreground">
                   {post.forum.label}
                 </a>
@@ -30,7 +29,7 @@ export function LatestPosts({ posts, capturedAt }: LatestPostsModel) {
                 <UserRef user={post.author} className="hover:text-foreground" />
                 {' · '}
                 <time dateTime={post.postedAt.iso}>{post.postedAt.label}</time>
-              </span>
+              </p>
               {post.excerpt !== '' && (
                 <p className="line-clamp-2 text-muted-foreground">{post.excerpt}</p>
               )}

package/src/slots/latest-threads.tsx

@@ -18,11 +18,10 @@ export function LatestThreads({ threads, capturedAt }: LatestThreadsModel) {
         <ul className="divide-y divide-border font-mono text-xs">
           {threads.map((thread) => (
             <li key={thread.href} className="px-3 py-1.5">
-              <a href={thread.href} className="text-primary hover:underline">
+              <a href={thread.href} className="block truncate text-primary hover:underline">
                 {thread.title}
               </a>
-              <span className="text-muted-foreground">
-                {' · '}
+              <p className="truncate text-muted-foreground">
                 <a href={thread.forum.href} className="hover:text-foreground">
                   {thread.forum.label}
                 </a>
@@ -30,7 +29,7 @@ export function LatestThreads({ threads, capturedAt }: LatestThreadsModel) {
                 <UserRef user={thread.author} className="hover:text-foreground" />
                 {' · '}
                 <time dateTime={thread.startedAt.iso}>{thread.startedAt.label}</time>
-              </span>
+              </p>
             </li>
           ))}
         </ul>

package/src/slots/user-panel.tsx

@@ -5,6 +5,8 @@ export function UserPanel({
   links,
   unreadNotifications,
   unreadMessages,
+  notificationsHref,
+  messagesHref,
   children,
 }: UserPanelModel) {
   return (
@@ -14,10 +16,16 @@ export function UserPanel({
       </span>
 
       {unreadNotifications > 0 && (
-        <span className="text-accent">[{unreadNotifications} new]</span>
+        <a href={notificationsHref} className="text-accent hover:underline">
+          [{unreadNotifications} new]
+          <span className="sr-only"> notifications</span>
+        </a>
       )}
       {unreadMessages > 0 && (
-        <span className="text-accent">[{unreadMessages} pm]</span>
+        <a href={messagesHref} className="text-accent hover:underline">
+          [{unreadMessages} pm]
+          <span className="sr-only"> unread messages</span>
+        </a>
       )}
 
       {links.map((link) => (