feat(sprint-5.5): store block metadata (version, changelog) in PostgreSQL

- Prisma schema: added `changelog Json @default("[]")` to Block model - Migration: 20260324141120_add_changelog_field - Seed: 8 blocks with actual versions (v1.0–v1.2) and changelog entries - API: PATCH /blocks/by-path accepts changelog field - CORS: accept any localhost port (regex pattern) - BlockChangelog component: renders version history from API or fallback - BlockMetaBar: loads changelog from API, passes to BlockChangelog - Removed "API офлайн" text, replaced with subtle gray dot - Added defaultChangelog prop for offline fallback - Block pages: removed hardcoded changelog JSX, use defaultChangelog prop - Updated SPRINTS.md with completed tasks Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-03-24 19:21:56 +05:00
parent 36d5faf67d
commit e20d222183
14 changed files with 349 additions and 197 deletions
@@ -0,0 +1,41 @@
+"use client";
+
+export interface ChangelogEntry {
+  version: string;
+  date: string;
+  changes: string[];
+}
+
+interface BlockChangelogProps {
+  changelog: ChangelogEntry[];
+}
+
+export function BlockChangelog({ changelog }: BlockChangelogProps) {
+  if (!changelog || changelog.length === 0) return null;
+
+  return (
+    <section className="space-y-3">
+      <h2 className="font-semibold text-base" style={{ color: "var(--bb-text)" }}>
+        История версий
+      </h2>
+      <div className="space-y-2 text-sm" style={{ color: "var(--bb-text-muted)" }}>
+        {changelog.map((entry) => (
+          <div
+            key={entry.version}
+            className="p-3 rounded-lg"
+            style={{ background: "var(--bb-sidebar-bg)", border: "1px solid var(--bb-border)" }}
+          >
+            <p className="font-semibold text-xs mb-1" style={{ color: "var(--bb-text)" }}>
+              {entry.version} — {entry.date}
+            </p>
+            <ul className="list-disc list-inside space-y-0.5 text-xs">
+              {entry.changes.map((change, i) => (
+                <li key={i}>{change}</li>
+              ))}
+            </ul>
+          </div>
+        ))}
+      </div>
+    </section>
+  );
+}
@@ -1,6 +1,7 @@
 "use client";

 import { useState, useEffect } from "react";
+import { BlockChangelog, type ChangelogEntry } from "./BlockChangelog";

 const LS_PREFIX = "bb-block-preview:";

@@ -21,15 +22,17 @@ interface BlockMeta {
  name: string;
  version: string;
  isInPreview: boolean;
+  changelog: ChangelogEntry[];
 }

 interface BlockMetaBarProps {
  path: string;
  defaultVersion: string;
  defaultIsInPreview: boolean;
+  defaultChangelog?: ChangelogEntry[];
 }

-export function BlockMetaBar({ path, defaultVersion, defaultIsInPreview }: BlockMetaBarProps) {
+export function BlockMetaBar({ path, defaultVersion, defaultIsInPreview, defaultChangelog = [] }: BlockMetaBarProps) {
  const [meta, setMeta] = useState<BlockMeta | null>(null);
  const [editing, setEditing] = useState(false);
  const [versionInput, setVersionInput] = useState(defaultVersion);
@@ -55,7 +58,7 @@ export function BlockMetaBar({ path, defaultVersion, defaultIsInPreview }: Block
      .catch(() => setApiDown(true));
  }, [apiUrl, path]);

-  async function patch(data: { version?: string; isInPreview?: boolean }) {
+  async function patch(data: { version?: string; isInPreview?: boolean; changelog?: ChangelogEntry[] }) {
    if (!apiUrl) return null;
    const r = await fetch(`${apiUrl}/blocks/by-path?path=${encodeURIComponent(path)}`, {
      method: 'PATCH',
@@ -78,7 +81,6 @@ export function BlockMetaBar({ path, defaultVersion, defaultIsInPreview }: Block

  async function togglePreview() {
    if (apiDown) {
-      // Fallback: toggle via localStorage
      const newVal = !localPreview;
      setLocalPreview(newVal);
      writeLocalPreview(path, newVal);
@@ -96,92 +98,100 @@ export function BlockMetaBar({ path, defaultVersion, defaultIsInPreview }: Block

  const version = meta?.version ?? defaultVersion;
  const isInPreview = apiDown ? localPreview : (meta?.isInPreview ?? localPreview);
+  const changelog: ChangelogEntry[] = (meta?.changelog && meta.changelog.length > 0) ? meta.changelog : defaultChangelog;

  return (
-    <div
-      className="flex items-center flex-wrap gap-3 px-4 py-2 rounded-lg text-xs mb-6"
-      style={{ background: "var(--bb-sidebar-bg)", border: "1px solid var(--bb-border)" }}
-    >
-      {/* Version badge */}
-      <span className="font-semibold" style={{ color: "var(--bb-text-muted)" }}>
-        Версия:
-      </span>
-      {editing ? (
-        <span className="flex items-center gap-1.5">
-          <input
-            className="px-2 py-0.5 rounded border text-xs font-mono w-20"
-            style={{ borderColor: "var(--bb-border)", color: "var(--bb-text)" }}
-            value={versionInput}
-            onChange={(e) => setVersionInput(e.target.value)}
-            onKeyDown={(e) => { if (e.key === 'Enter') saveVersion(); if (e.key === 'Escape') setEditing(false); }}
-            autoFocus
-          />
-          <button
-            onClick={saveVersion}
-            disabled={saving}
-            className="px-2 py-0.5 rounded text-xs font-medium"
-            style={{ background: "var(--brand-053m)", color: "#fff" }}
-          >
-            {saving ? '...' : 'Сохранить'}
-          </button>
-          <button
-            onClick={() => { setEditing(false); setVersionInput(version); }}
-            className="px-2 py-0.5 rounded text-xs"
-            style={{ color: "var(--bb-text-muted)" }}
-          >
-            Отмена
-          </button>
+    <>
+      <div
+        className="flex items-center flex-wrap gap-3 px-4 py-2 rounded-lg text-xs mb-6"
+        style={{ background: "var(--bb-sidebar-bg)", border: "1px solid var(--bb-border)" }}
+      >
+        {/* Version badge */}
+        <span className="font-semibold" style={{ color: "var(--bb-text-muted)" }}>
+          Версия:
        </span>
-      ) : (
+        {editing ? (
+          <span className="flex items-center gap-1.5">
+            <input
+              className="px-2 py-0.5 rounded border text-xs font-mono w-20"
+              style={{ borderColor: "var(--bb-border)", color: "var(--bb-text)" }}
+              value={versionInput}
+              onChange={(e) => setVersionInput(e.target.value)}
+              onKeyDown={(e) => { if (e.key === 'Enter') saveVersion(); if (e.key === 'Escape') setEditing(false); }}
+              autoFocus
+            />
+            <button
+              onClick={saveVersion}
+              disabled={saving}
+              className="px-2 py-0.5 rounded text-xs font-medium"
+              style={{ background: "var(--brand-053m)", color: "#fff" }}
+            >
+              {saving ? '...' : 'Сохранить'}
+            </button>
+            <button
+              onClick={() => { setEditing(false); setVersionInput(version); }}
+              className="px-2 py-0.5 rounded text-xs"
+              style={{ color: "var(--bb-text-muted)" }}
+            >
+              Отмена
+            </button>
+          </span>
+        ) : (
+          <button
+            onClick={() => !apiDown && setEditing(true)}
+            title={apiDown ? 'Версия из кода (API недоступен)' : 'Изменить версию'}
+            className="font-mono px-2 py-0.5 rounded"
+            style={{
+              background: "var(--bb-sidebar-active-bg, #dff0fa)",
+              color: "var(--brand-053m)",
+              cursor: apiDown ? 'default' : 'pointer',
+            }}
+          >
+            {version}
+          </button>
+        )}
+
+        <span style={{ color: "var(--bb-border)" }}>·</span>
+
+        {/* Preview toggle */}
        <button
-          onClick={() => !apiDown && setEditing(true)}
-          title={apiDown ? 'API недоступен' : 'Изменить версию'}
-          className="font-mono px-2 py-0.5 rounded"
-          style={{
-            background: "var(--bb-sidebar-active-bg, #dff0fa)",
-            color: "var(--brand-053m)",
-            cursor: apiDown ? 'default' : 'pointer',
+          onClick={togglePreview}
+          disabled={togglingPreview || (!apiDown && !meta)}
+          title={isInPreview ? "Убрать из превью страницы" : "Включить в превью страницы"}
+          className="flex items-center gap-1.5 px-2.5 py-1 rounded font-medium transition-colors cursor-pointer"
+          style={isInPreview ? {
+            background: "#dcfce7",
+            color: "#16a34a",
+            border: "1px solid #86efac",
+          } : {
+            background: "var(--bb-sidebar-bg)",
+            color: "var(--bb-text-muted)",
+            border: "1px solid var(--bb-border)",
          }}
        >
-          {version}
+          <span
+            className="inline-block w-1.5 h-1.5 rounded-full"
+            style={{ background: isInPreview ? "#22c55e" : "#d1d5db" }}
+          />
+          {togglingPreview
+            ? '...'
+            : isInPreview
+              ? "В превью"
+              : "Не в превью"}
        </button>
-      )}

-      <span style={{ color: "var(--bb-border)" }}>·</span>
+        {/* Subtle offline dot instead of "API офлайн" text */}
+        {apiDown && (
+          <span
+            className="inline-block w-1.5 h-1.5 rounded-full"
+            title="API недоступен — данные из кода"
+            style={{ background: "#d1d5db" }}
+          />
+        )}
+      </div>

-      {/* Preview toggle */}
-      <button
-        onClick={togglePreview}
-        disabled={togglingPreview || (!apiDown && !meta)}
-        title={isInPreview ? "Убрать из превью страницы" : "Включить в превью страницы"}
-        className="flex items-center gap-1.5 px-2.5 py-1 rounded font-medium transition-colors cursor-pointer"
-        style={isInPreview ? {
-          background: "#dcfce7",
-          color: "#16a34a",
-          border: "1px solid #86efac",
-        } : {
-          background: "var(--bb-sidebar-bg)",
-          color: "var(--bb-text-muted)",
-          border: "1px solid var(--bb-border)",
-        }}
-      >
-        <span
-          className="inline-block w-1.5 h-1.5 rounded-full"
-          style={{ background: isInPreview ? "#22c55e" : "#d1d5db" }}
-        />
-        {togglingPreview
-          ? '...'
-          : isInPreview
-            ? "В превью"
-            : "Не в превью"}
-      </button>
-
-      {apiDown && (
-        <>
-          <span style={{ color: "var(--bb-border)" }}>·</span>
-          <span style={{ color: "#f59e0b" }}>API офлайн</span>
-        </>
-      )}
-    </div>
+      {/* Changelog rendered from API or fallback */}
+      {changelog.length > 0 && <BlockChangelog changelog={changelog} />}
+    </>
  );
 }