feat(blotter): replace board stats with changelog-backed blotter

Add static blotter snapshot, route /blotter, compact board blotter (Hide/Show All).
Include yarn blotter tooling and AGENTS rules so every changelog version has a
release line. 4chan-style table UI, subplebbit→board and plebchan→5chan in messages.

src/components/blotter-message/blotter-message.module.css

@@ -0,0 +1,9 @@
+.versionLink {
+  color: var(--button-desktop-text-color);
+  text-decoration: var(--button-text-decoration);
+  text-transform: none;
+}
+
+.versionLink:hover {
+  color: var(--button-desktop-text-color-hover);
+}

src/components/blotter-message/blotter-message.tsx

@@ -0,0 +1,26 @@
+import type { BlotterEntry } from '../../lib/utils/blotter-utils';
+import styles from './blotter-message.module.css';
+
+const RELEASES_BASE = 'https://github.com/bitsocialhq/5chan/releases/tag/v';
+
+function normalizeMessage(text: string): string {
+  return text.replace(/subplebbit/gi, 'board').replace(/plebchan/gi, '5chan');
+}
+
+const BlotterMessage = ({ entry }: { entry: BlotterEntry }) => {
+  if (entry.kind === 'release' && entry.version) {
+    const idx = entry.message.indexOf(': ');
+    const oneLiner = idx >= 0 ? entry.message.slice(idx + 2) : entry.message;
+    return (
+      <>
+        <a href={`${RELEASES_BASE}${entry.version}`} className={styles.versionLink} target='_blank' rel='noopener noreferrer'>
+          v{entry.version}
+        </a>
+        : {normalizeMessage(oneLiner)}
+      </>
+    );
+  }
+  return <>{normalizeMessage(entry.message)}</>;
+};
+
+export default BlotterMessage;

src/components/blotter-message/index.ts

@@ -0,0 +1 @@
+export { default } from './blotter-message';

src/components/board-blotter/board-blotter.module.css

@@ -27,28 +27,21 @@
   text-align: right;
 }
 
-.hideButton {
+.hideButton,
+.actionLink {
   color: var(--button-desktop-text-color);
   text-decoration: var(--button-text-decoration);
   text-transform: capitalize;
 }
 
-.hideButton:hover {
+.hideButton:hover,
+.actionLink:hover {
   cursor: pointer;
   color: var(--button-desktop-text-color-hover);
 }
 
-.statValue {
-  color: var(--button-desktop-text-color);
-}
-
-.lowercase {
-  text-transform: lowercase;
-}
-
-
 @media (max-width: 640px) {
   .content {
     display: none;
   }
-}
+}

src/components/board-blotter/board-blotter.tsx

@@ -0,0 +1,65 @@
+import { Link } from 'react-router-dom';
+import { useTranslation } from 'react-i18next';
+import blotterData from '../../data/5chan-blotter.json';
+import BlotterMessage from '../blotter-message';
+import { formatBlotterDate, getBlotterPreview, isBlotterEntry, sortBlotterEntries } from '../../lib/utils/blotter-utils';
+import useBlotterVisibilityStore from '../../stores/use-blotter-visibility-store';
+import styles from './board-blotter.module.css';
+
+const BoardBlotter = () => {
+  const { t } = useTranslation();
+  const { isHidden, toggleVisibility } = useBlotterVisibilityStore();
+
+  const entries = (blotterData as { entries?: unknown[] }).entries ?? [];
+  const validEntries = entries.filter(isBlotterEntry);
+  const sorted = sortBlotterEntries(validEntries);
+  const preview = getBlotterPreview(sorted);
+
+  return (
+    <div className={`${styles.content} ${styles.show}`}>
+      <table className={styles.blotter}>
+        <thead>
+          <tr>
+            <td>
+              <hr />
+            </td>
+          </tr>
+        </thead>
+        {!isHidden && (
+          <tbody>
+            {preview.map((entry) => (
+              <tr key={entry.id}>
+                <td>
+                  {formatBlotterDate(entry.timestamp)} <BlotterMessage entry={entry} />
+                </td>
+              </tr>
+            ))}
+          </tbody>
+        )}
+        <tfoot>
+          <tr>
+            <td colSpan={2}>
+              [
+              <span className={styles.hideButton} onClick={() => toggleVisibility()}>
+                {isHidden ? t('show_blotter') : t('hide')}
+              </span>
+              ]
+              {!isHidden && (
+                <>
+                  {' '}
+                  [
+                  <Link to='/blotter' className={styles.actionLink}>
+                    {t('show_all')}
+                  </Link>
+                  ]
+                </>
+              )}
+            </td>
+          </tr>
+        </tfoot>
+      </table>
+    </div>
+  );
+};
+
+export default BoardBlotter;

src/components/board-blotter/index.ts

@@ -0,0 +1 @@
+export { default } from './board-blotter';

src/components/subplebbit-stats/index.ts

@@ -1 +0,0 @@
-export { default } from './subplebbit-stats';

src/components/subplebbit-stats/subplebbit-stats.tsx

@@ -1,108 +0,0 @@
-import { useParams } from 'react-router-dom';
-import { Trans, useTranslation } from 'react-i18next';
-import { useAccountComment, useSubplebbit, useSubplebbitStats } from '@plebbit/plebbit-react-hooks';
-import useSubplebbitsPagesStore from '@plebbit/plebbit-react-hooks/dist/stores/subplebbits-pages';
-import useSubplebbitStatsVisibilityStore from '../../stores/use-subplebbit-stats-visibility-store';
-import { useResolvedSubplebbitAddress } from '../../hooks/use-resolved-subplebbit-address';
-import styles from './subplebbit-stats.module.css';
-
-const SubplebbitStats = () => {
-  const { t } = useTranslation();
-  const params = useParams();
-
-  const accountComment = useAccountComment({ commentIndex: params?.accountCommentIndex as any });
-  const resolvedAddress = useResolvedSubplebbitAddress();
-  const subplebbitAddress = resolvedAddress || accountComment?.subplebbitAddress;
-
-  const subplebbit = useSubplebbit({ subplebbitAddress });
-  const { address, createdAt } = subplebbit || {};
-
-  const stats = useSubplebbitStats({ subplebbitAddress: address });
-
-  const { hiddenStats, toggleVisibility } = useSubplebbitStatsVisibilityStore();
-  const isHidden = hiddenStats[address];
-
-  const comment = useSubplebbitsPagesStore((state) => state.comments[params?.commentCid as string]);
-  const { deleted, locked, removed } = comment || {};
-  const hideStats = deleted || locked || removed;
-
-  const unixToMMDDYYYY = (timestamp: number) => {
-    const date = new Date(timestamp * 1000);
-    const month = ('0' + (date.getMonth() + 1)).slice(-2);
-    const day = ('0' + date.getDate()).slice(-2);
-    const year = date.getFullYear().toString().slice(-2);
-    return month + '/' + day + '/' + year;
-  };
-
-  return (
-    <div className={`${styles.content} ${hideStats ? styles.hide : styles.show}`}>
-      <table className={styles.blotter}>
-        <thead>
-          <tr>
-            <td>
-              <hr />
-            </td>
-          </tr>
-        </thead>
-        {!isHidden && (
-          <tbody>
-            <tr>
-              <td>
-                <Trans
-                  i18nKey='board_stats_hour'
-                  values={{ userCount: stats.hourActiveUserCount ?? '?', postCount: stats.hourPostCount ?? '?' }}
-                  components={{ 1: <span key='hour-stat-value' className={styles.statValue} /> }}
-                />
-                {' / '}
-                <Trans
-                  i18nKey='board_stats_day'
-                  values={{ userCount: stats.dayActiveUserCount ?? '?', postCount: stats.dayPostCount ?? '?' }}
-                  components={{ 1: <span key='day-stat-value' className={styles.statValue} /> }}
-                />
-              </td>
-            </tr>
-            <tr>
-              <td>
-                <Trans
-                  i18nKey='board_stats_week'
-                  values={{ userCount: stats.weekActiveUserCount ?? '?', postCount: stats.weekPostCount ?? '?' }}
-                  components={{ 1: <span key='week-stat-value' className={styles.statValue} /> }}
-                />
-                {' / '}
-                <Trans
-                  i18nKey='board_stats_month'
-                  values={{ userCount: stats.monthActiveUserCount ?? '?', postCount: stats.monthPostCount ?? '?' }}
-                  components={{ 1: <span key='month-stat-value' className={styles.statValue} /> }}
-                />
-              </td>
-            </tr>
-            <tr>
-              <td className={styles.lowercase}>
-                {createdAt && unixToMMDDYYYY(createdAt)} {t('board_created')}
-                {' / '}
-                <Trans
-                  i18nKey='board_stats_all'
-                  values={{ userCount: stats.allActiveUserCount ?? '?', postCount: stats.allPostCount ?? '?' }}
-                  components={{ 1: <span key='all-stat-value' className={styles.statValue} /> }}
-                />
-              </td>
-            </tr>
-          </tbody>
-        )}
-        <tfoot>
-          <tr>
-            <td colSpan={2}>
-              [
-              <span className={styles.hideButton} onClick={() => toggleVisibility(address)}>
-                {isHidden ? t('show_stats') : t('hide')}
-              </span>
-              ]
-            </td>
-          </tr>
-        </tfoot>
-      </table>
-    </div>
-  );
-};
-
-export default SubplebbitStats;