@ -1,6 +1,7 @@
"use client" ; "use client" ;
import { useState , useEffect } from "react" ; import { useState , useEffect } from "react" ;
import { BlockChangelog , type ChangelogEntry } from "./BlockChangelog" ;
const LS_PREFIX = "bb-block-preview:" ; const LS_PREFIX = "bb-block-preview:" ;
@ -21,15 +22,17 @@ interface BlockMeta {
name : string ; name : string ;
version : string ; version : string ;
isInPreview : boolean ; isInPreview : boolean ;
changelog : ChangelogEntry [ ] ;
} }
interface BlockMetaBarProps { interface BlockMetaBarProps {
path : string ; path : string ;
defaultVersion : string ; defaultVersion : string ;
defaultIsInPreview : boolean ; 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 [ meta , setMeta ] = useState < BlockMeta | null > ( null ) ;
const [ editing , setEditing ] = useState ( false ) ; const [ editing , setEditing ] = useState ( false ) ;
const [ versionInput , setVersionInput ] = useState ( defaultVersion ) ; const [ versionInput , setVersionInput ] = useState ( defaultVersion ) ;
@ -55,7 +58,7 @@ export function BlockMetaBar({ path, defaultVersion, defaultIsInPreview }: Block
. catch ( ( ) = > setApiDown ( true ) ) ; . catch ( ( ) = > setApiDown ( true ) ) ;
} , [ apiUrl , path ] ) ; } , [ apiUrl , path ] ) ;
async function patch ( data : { version? : string ; isInPreview? : boolean } ) { async function patch ( data : { version? : string ; isInPreview? : boolean ; changelog? : ChangelogEntry [ ] } ) {
if ( ! apiUrl ) return null ; if ( ! apiUrl ) return null ;
const r = await fetch ( ` ${ apiUrl } /blocks/by-path?path= ${ encodeURIComponent ( path ) } ` , { const r = await fetch ( ` ${ apiUrl } /blocks/by-path?path= ${ encodeURIComponent ( path ) } ` , {
method : 'PATCH' , method : 'PATCH' ,
@ -78,7 +81,6 @@ export function BlockMetaBar({ path, defaultVersion, defaultIsInPreview }: Block
async function togglePreview() { async function togglePreview() {
if ( apiDown ) { if ( apiDown ) {
// Fallback: toggle via localStorage
const newVal = ! localPreview ; const newVal = ! localPreview ;
setLocalPreview ( newVal ) ; setLocalPreview ( newVal ) ;
writeLocalPreview ( path , newVal ) ; writeLocalPreview ( path , newVal ) ;
@ -96,92 +98,100 @@ export function BlockMetaBar({ path, defaultVersion, defaultIsInPreview }: Block
const version = meta ? . version ? ? defaultVersion ; const version = meta ? . version ? ? defaultVersion ;
const isInPreview = apiDown ? localPreview : ( meta ? . isInPreview ? ? localPreview ) ; const isInPreview = apiDown ? localPreview : ( meta ? . isInPreview ? ? localPreview ) ;
const changelog : ChangelogEntry [ ] = ( meta ? . changelog && meta . changelog . length > 0 ) ? meta.changelog : defaultChangelog ;
return ( return (
< div < >
className = "flex items-center flex-wrap gap-3 px-4 py-2 rounded-lg text-xs mb-6" < div
style = { { background : "var(--bb-sidebar-bg)" , border : "1px solid var(--bb-border)" } } 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)" } } > { /* Version badge */ }
В е р с и я : < span className = "font-semibold" style = { { color : "var(--bb-text-muted)" } } >
< / span > В е р с и я :
{ editing ? ( < / span >
< span className = "flex items-center gap-1.5" > { editing ? (
< input < span className = "flex items-center gap-1.5" >
className = "px-2 py-0.5 rounded border text-xs font-mono w-20" < input
style = { { borderColor : "var(--bb-border)" , color : "var(--bb-text)" } } className = "px-2 py-0.5 rounded border text-xs font-mono w-20"
value = { versionInput } style = { { borderColor : "var(--bb-border)" , color : "var(--bb-text)" } }
onChange = { ( e ) = > setVersionInput ( e . target . value ) } value = { versionInput }
onKeyDown = { ( e ) = > { if ( e . key === 'Enter' ) saveVersion ( ) ; if ( e . key === 'Escape' ) setEditing ( false ) ; } } onChange = { ( e ) = > setVersionInput ( e . target . value ) }
autoFocus onKeyDown = { ( e ) = > { if ( e . key === 'Enter' ) saveVersion ( ) ; if ( e . key === 'Escape' ) setEditing ( false ) ; } }
/ > autoFocus
< button / >
onClick = { saveVersion } < button
disabled = { saving } onClick = { saveVersion }
className = "px-2 py-0.5 rounded text-xs font-medium" disabled = { saving }
style = { { background : "var(--brand-053m)" , color : "#fff" } } className = "px-2 py-0.5 rounded text-xs font-medium"
> style = { { background : "var(--brand-053m)" , color : "#fff" } }
{ saving ? '...' : 'Сохранить' } >
< / button > { 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 < button
onClick = { ( ) = > { setEditing ( false ) ; setVersionInput ( version ) ; } } onClick = { ( ) = > ! apiDown && setEditing ( true ) }
className = "px-2 py-0.5 rounded text-xs" title = { apiDown ? 'Версия из кода (API недоступен)' : 'Изменить версию' }
style = { { color : "var(--bb-text-muted)" } } 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 > < / button >
< / span > ) }
) : (
< span style = { { color : "var(--bb-border)" } } > · < / span >
{ /* Preview toggle */ }
< button < button
onClick = { ( ) = > ! apiDown && setEditing ( true ) } onClick = { togglePreview }
title = { apiDown ? 'API недоступен' : 'Изменить версию' } disabled = { togglingPreview || ( ! apiDown && ! meta ) }
className = "font-mono px-2 py-0.5 rounded" title = { isInPreview ? "Убрать из превью страницы" : "Включить в превью страницы" }
style = { { className = "flex items-center gap-1.5 px-2.5 py-1 rounded font-medium transition-colors cursor-pointer"
background : "var(--bb-sidebar-active-bg, #dff0fa)" , style = { isInPreview ? {
color : "var(--brand-053m)" , background : "#dcfce7" ,
cursor : apiDown ? 'default' : 'pointer' , 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 > < / button >
) }
{ /* Subtle offline dot instead of "API офлайн" text */ }
< span style = { { color : "var(--bb-border)" } } > · < / span > { apiDown && (
< span
{ /* Preview toggle */ } className = "inline-block w-1.5 h-1.5 rounded-full"
< button title = "API недоступен — данные из кода"
onClick = { togglePreview } style = { { background : "#d1d5db" } }
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" < / div >
style = { isInPreview ? {
background : "#dcfce7" , { /* Changelog rendered from API or fallback */ }
color : "#16a34a" , { changelog . length > 0 && < BlockChangelog changelog = { changelog } / > }
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 >
) ; ) ;
} }
AR 15 M4
7 days ago