mirror of
https://github.com/coleam00/Archon.git
synced 2025-12-24 02:39:17 -05:00
fix: Move metadata panel to bottom and improve visibility
- Move metadata panel from top to bottom of content viewer - Place scroll on outer container to show more metadata (max-h-64) - Keep metadata section always accessible at the bottom - Maintain clear visual separation with border-top - Ensure better visibility of all metadata properties 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
@@ -107,34 +107,6 @@ export const ContentViewer: React.FC<ContentViewerProps> = ({ selectedItem, onCo
|
||||
|
||||
{/* Main Content Area with Metadata Panel */}
|
||||
<div className="flex-1 flex flex-col min-h-0">
|
||||
{/* Metadata Section - Always visible as collapsible */}
|
||||
{selectedItem.metadata && Object.keys(selectedItem.metadata).length > 0 && (
|
||||
<div className="border-b border-white/10 flex-shrink-0">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setShowMetadata(!showMetadata)}
|
||||
className="w-full px-4 py-3 flex items-center gap-2 text-sm font-medium text-cyan-400 hover:bg-white/5 transition-colors text-left"
|
||||
>
|
||||
{showMetadata ? <ChevronDown className="w-4 h-4" /> : <ChevronRight className="w-4 h-4" />}
|
||||
<Info className="w-4 h-4" />
|
||||
Metadata
|
||||
<span className="ml-auto text-xs text-gray-500">
|
||||
{Object.keys(selectedItem.metadata).length} properties
|
||||
</span>
|
||||
</button>
|
||||
|
||||
{showMetadata && (
|
||||
<div className="px-4 pb-4">
|
||||
<div className="bg-black/40 border border-white/10 rounded-lg p-4 max-h-48 overflow-y-auto">
|
||||
<pre className="text-xs text-gray-400 font-mono whitespace-pre-wrap overflow-x-auto">
|
||||
{JSON.stringify(selectedItem.metadata, null, 2)}
|
||||
</pre>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Content Body */}
|
||||
<div className="flex-1 overflow-y-auto min-h-0 p-6 scrollbar-thin">
|
||||
{selectedItem.type === "document" ? (
|
||||
@@ -153,6 +125,34 @@ export const ContentViewer: React.FC<ContentViewerProps> = ({ selectedItem, onCo
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Metadata Section - Always visible as collapsible at bottom */}
|
||||
{selectedItem.metadata && Object.keys(selectedItem.metadata).length > 0 && (
|
||||
<div className="border-t border-white/10 flex-shrink-0">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setShowMetadata(!showMetadata)}
|
||||
className="w-full px-4 py-3 flex items-center gap-2 text-sm font-medium text-cyan-400 hover:bg-white/5 transition-colors text-left"
|
||||
>
|
||||
{showMetadata ? <ChevronDown className="w-4 h-4" /> : <ChevronRight className="w-4 h-4" />}
|
||||
<Info className="w-4 h-4" />
|
||||
Metadata
|
||||
<span className="ml-auto text-xs text-gray-500">
|
||||
{Object.keys(selectedItem.metadata).length} properties
|
||||
</span>
|
||||
</button>
|
||||
|
||||
{showMetadata && (
|
||||
<div className="px-4 pb-4 overflow-y-auto max-h-64">
|
||||
<div className="bg-black/40 border border-white/10 rounded-lg p-4">
|
||||
<pre className="text-xs text-gray-400 font-mono whitespace-pre-wrap overflow-x-auto">
|
||||
{JSON.stringify(selectedItem.metadata, null, 2)}
|
||||
</pre>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Content Footer - Show quick info */}
|
||||
|
||||
Reference in New Issue
Block a user