feat: collapsed metadata for posts

This commit is contained in:
2026-02-27 16:53:13 +01:00
parent bd10825e74
commit 8051e716a1
8 changed files with 278 additions and 3 deletions

View File

@@ -115,6 +115,32 @@
gap: 16px;
}
.metadata-toggle {
display: flex;
align-items: center;
gap: 8px;
width: 100%;
padding: 6px 4px;
background: none;
border: none;
color: var(--vscode-descriptionForeground);
font-size: 11px;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.5px;
cursor: pointer;
transition: color 0.15s;
}
.metadata-toggle:hover {
color: var(--vscode-foreground);
}
.metadata-toggle-chevron {
font-size: 10px;
transition: transform 0.15s;
}
.editor-header-row {
display: flex;
gap: 16px;

View File

@@ -189,6 +189,7 @@ export const PostEditor: React.FC<PostEditorProps> = ({ postId }) => {
const [lightboxIndex, setLightboxIndex] = useState(0);
const [showPostSearch, setShowPostSearch] = useState(false);
const [showMediaSearch, setShowMediaSearch] = useState(false);
const [metadataExpanded, setMetadataExpanded] = useState(true);
const editorRef = useRef<unknown>(null);
const isDirty = checkIsDirty(postId);
@@ -298,6 +299,9 @@ export const PostEditor: React.FC<PostEditorProps> = ({ postId }) => {
setAuthor(post.author || '');
setTags(post.tags);
setSelectedCategories(post.categories.length > 0 ? post.categories : ['article']);
if (!isInitialized) {
setMetadataExpanded(post.title === '');
}
markClean(postId);
// Mark as initialized AFTER setting local state
setIsInitialized(true);
@@ -718,6 +722,14 @@ export const PostEditor: React.FC<PostEditorProps> = ({ postId }) => {
</div>
<div className="editor-content">
<button
className={`metadata-toggle ${metadataExpanded ? 'expanded' : ''}`}
onClick={() => setMetadataExpanded(v => !v)}
>
<span className="metadata-toggle-chevron">{metadataExpanded ? '▼' : '▶'}</span>
<span>{tr('editor.metadata.toggle')}</span>
</button>
{metadataExpanded && (
<div className="editor-header-row">
<div className="editor-meta">
<div className="editor-field">
@@ -768,18 +780,19 @@ export const PostEditor: React.FC<PostEditorProps> = ({ postId }) => {
/>
</div>
</div>
<PostLinks
postId={postId}
updatedAt={post.updatedAt}
onPostClick={(id) => useAppStore.getState().setSelectedPost(id)}
/>
</div>
<div className="editor-media-panel">
<LinkedMediaPanel postId={postId} />
</div>
</div>
)}
<div className="editor-body">
<div className="editor-toolbar">

View File

@@ -510,6 +510,7 @@
"editor.insertMediaTitle": "Bild aus Medienbibliothek einfügen",
"editor.previewFrameTitle": "Beitragsvorschau",
"editor.previewLoading": "Vorschau wird geladen...",
"editor.metadata.toggle": "Metadaten",
"editor.footer.created": "Erstellt",
"editor.footer.updated": "Aktualisiert",
"editor.footer.published": "Veröffentlicht",

View File

@@ -510,6 +510,7 @@
"editor.insertMediaTitle": "Insert image from media library",
"editor.previewFrameTitle": "Post preview",
"editor.previewLoading": "Loading preview...",
"editor.metadata.toggle": "Metadata",
"editor.footer.created": "Created",
"editor.footer.updated": "Updated",
"editor.footer.published": "Published",

View File

@@ -510,6 +510,7 @@
"editor.insertMediaTitle": "Insertar imagen desde la biblioteca multimedia",
"editor.previewFrameTitle": "Vista previa de la entrada",
"editor.previewLoading": "Cargando vista previa...",
"editor.metadata.toggle": "Metadatos",
"editor.footer.created": "Creado",
"editor.footer.updated": "Actualizado",
"editor.footer.published": "Publicado",

View File

@@ -507,7 +507,8 @@
"editor.insertPostLinkTitle": "Lier à un article (Ctrl+K)",
"editor.insertMediaTitle": "Insérer une image depuis la bibliothèque média",
"editor.previewFrameTitle": "Aperçu de larticle",
"editor.previewLoading": "Chargement de laperçu...",
"editor.previewLoading": "Chargement de l'aperçu...",
"editor.metadata.toggle": "Métadonnées",
"editor.footer.created": "Créé",
"editor.footer.updated": "Mis à jour",
"editor.footer.published": "Publié",

View File

@@ -508,6 +508,7 @@
"editor.insertMediaTitle": "Inserisci immagine dalla libreria media",
"editor.previewFrameTitle": "Anteprima post",
"editor.previewLoading": "Caricamento anteprima...",
"editor.metadata.toggle": "Metadati",
"editor.footer.created": "Creato",
"editor.footer.updated": "Aggiornato",
"editor.footer.published": "Pubblicato",