improve editor and add type detection
This commit is contained in:
Pierre
@@ -1,224 +0,0 @@
|
||||
.app {
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.app-header {
|
||||
padding: 2rem;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
||||
background-color: rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.app-header h1 {
|
||||
margin: 0 0 0.5rem 0;
|
||||
color: #646cff;
|
||||
}
|
||||
|
||||
.app-description {
|
||||
margin: 0;
|
||||
color: rgba(255, 255, 255, 0.6);
|
||||
}
|
||||
|
||||
.app-main {
|
||||
flex: 1;
|
||||
padding: 2rem;
|
||||
max-width: 1400px;
|
||||
width: 100%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.app-error {
|
||||
padding: 1rem;
|
||||
background-color: rgba(255, 0, 0, 0.1);
|
||||
border: 1px solid rgba(255, 0, 0, 0.3);
|
||||
border-radius: 8px;
|
||||
color: #ff6b6b;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.app-loading {
|
||||
text-align: center;
|
||||
padding: 3rem 2rem;
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
.app-welcome {
|
||||
text-align: center;
|
||||
padding: 4rem 2rem;
|
||||
color: rgba(255, 255, 255, 0.6);
|
||||
}
|
||||
|
||||
.app-welcome h2 {
|
||||
margin: 0 0 1rem 0;
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
}
|
||||
|
||||
.app-welcome-features {
|
||||
margin-top: 1rem;
|
||||
margin-bottom: 1.5rem;
|
||||
font-size: 0.85rem;
|
||||
color: rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
|
||||
.app-kv-browser {
|
||||
margin-top: 1.5rem;
|
||||
text-align: left;
|
||||
max-width: 900px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.app-content {
|
||||
display: grid;
|
||||
grid-template-columns: 350px 1fr;
|
||||
gap: 1.5rem;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.app-sidebar {
|
||||
min-height: 400px;
|
||||
}
|
||||
|
||||
.app-editor {
|
||||
min-height: 400px;
|
||||
}
|
||||
|
||||
.app-no-selection {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100%;
|
||||
min-height: 400px;
|
||||
background-color: rgba(255, 255, 255, 0.05);
|
||||
border-radius: 8px;
|
||||
color: rgba(255, 255, 255, 0.5);
|
||||
text-align: center;
|
||||
padding: 2rem;
|
||||
}
|
||||
|
||||
.app-footer {
|
||||
padding: 1.5rem 2rem;
|
||||
border-top: 1px solid rgba(255, 255, 255, 0.1);
|
||||
text-align: center;
|
||||
color: rgba(255, 255, 255, 0.5);
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.app-footer a {
|
||||
color: #646cff;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.app-footer a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
.app-content {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.app-sidebar {
|
||||
order: 2;
|
||||
}
|
||||
|
||||
.app-editor {
|
||||
order: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.app-header,
|
||||
.app-main,
|
||||
.app-footer {
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.app-content {
|
||||
gap: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: light) {
|
||||
.app-header {
|
||||
border-bottom-color: rgba(0, 0, 0, 0.1);
|
||||
background-color: rgba(0, 0, 0, 0.02);
|
||||
}
|
||||
|
||||
.app-description {
|
||||
color: rgba(0, 0, 0, 0.6);
|
||||
}
|
||||
|
||||
.app-error {
|
||||
background-color: rgba(255, 0, 0, 0.1);
|
||||
border-color: rgba(255, 0, 0, 0.3);
|
||||
color: #cc0000;
|
||||
}
|
||||
|
||||
.app-loading {
|
||||
color: rgba(0, 0, 0, 0.7);
|
||||
}
|
||||
|
||||
.app-welcome {
|
||||
color: rgba(0, 0, 0, 0.6);
|
||||
}
|
||||
|
||||
.app-welcome h2 {
|
||||
color: rgba(0, 0, 0, 0.8);
|
||||
}
|
||||
|
||||
.app-welcome-features {
|
||||
color: rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
.app-no-selection {
|
||||
background-color: rgba(0, 0, 0, 0.02);
|
||||
color: rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
.app-footer {
|
||||
border-top-color: rgba(0, 0, 0, 0.1);
|
||||
color: rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
}
|
||||
|
||||
.app-nav {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
margin-top: 0.75rem;
|
||||
}
|
||||
|
||||
.app-nav button {
|
||||
background: transparent;
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
color: inherit;
|
||||
padding: 0.4rem 1rem;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
.app-nav button:hover {
|
||||
background: rgba(255, 255, 255, 0.08);
|
||||
}
|
||||
|
||||
.app-nav button.active {
|
||||
background: rgba(255, 255, 255, 0.15);
|
||||
border-color: rgba(255, 255, 255, 0.4);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: light) {
|
||||
.app-nav button {
|
||||
border-color: rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
.app-nav button:hover {
|
||||
background: rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
.app-nav button.active {
|
||||
background: rgba(0, 0, 0, 0.08);
|
||||
border-color: rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
}
|
||||
@@ -1,270 +0,0 @@
|
||||
import { useState, useEffect } from 'react';
|
||||
import { SearchBar } from './components/SearchBar';
|
||||
import { FileList } from './components/FileList';
|
||||
import { MetadataEditor } from './components/MetadataEditor';
|
||||
import { BulkMetadataEditor } from './components/BulkMetadataEditor';
|
||||
import { KVTreeView } from './components/KVTreeView';
|
||||
import { SnapshotPanel } from './components/SnapshotPanel';
|
||||
import { MetadataAPI } from './api/metadataApi';
|
||||
import { SearchResult } from './types';
|
||||
import './App.css';
|
||||
|
||||
type View = 'edit' | 'snapshot';
|
||||
|
||||
function App() {
|
||||
const [view, setView] = useState<View>('edit');
|
||||
const [searchResults, setSearchResults] = useState<SearchResult[]>([]);
|
||||
const [selectedHashId, setSelectedHashId] = useState<string | undefined>();
|
||||
const [selectedHashIds, setSelectedHashIds] = useState<Set<string>>(new Set());
|
||||
const [bulkEditMode, setBulkEditMode] = useState(false);
|
||||
const [isSearching, setIsSearching] = useState(false);
|
||||
const [isLoadingDirectHash, setIsLoadingDirectHash] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
// Extract hash from URL path (supports /editor/file/hash or /editor/?hash=...)
|
||||
const getHashFromUrl = (): string | null => {
|
||||
const path = window.location.pathname;
|
||||
const fileMatch = path.match(/\/file\/([a-z0-9]+)$/i);
|
||||
if (fileMatch) {
|
||||
return fileMatch[1];
|
||||
}
|
||||
// Fallback to query param for backwards compatibility
|
||||
const params = new URLSearchParams(window.location.search);
|
||||
return params.get('hash');
|
||||
};
|
||||
|
||||
// Update URL when file is selected
|
||||
const updateUrlForFile = (hashId: string | undefined) => {
|
||||
const basePath = window.location.pathname.replace(/\/file\/[a-z0-9]+$/i, '').replace(/\/$/, '');
|
||||
if (hashId) {
|
||||
const newPath = `${basePath}/file/${hashId}`;
|
||||
window.history.pushState({ hashId }, '', newPath);
|
||||
} else {
|
||||
window.history.pushState({}, '', basePath || '/editor/');
|
||||
}
|
||||
};
|
||||
|
||||
// Check for hash parameter in URL on component mount
|
||||
useEffect(() => {
|
||||
const loadHashFromUrl = async () => {
|
||||
const hashParam = getHashFromUrl();
|
||||
|
||||
if (hashParam) {
|
||||
try {
|
||||
setIsLoadingDirectHash(true);
|
||||
setError(null);
|
||||
|
||||
// Try to get metadata for this hash
|
||||
const metadata = await MetadataAPI.getMetadata(hashParam);
|
||||
|
||||
// Create a search result from the metadata
|
||||
const searchResult: SearchResult = {
|
||||
hashId: hashParam,
|
||||
metadata: metadata,
|
||||
score: 1.0,
|
||||
};
|
||||
|
||||
// Set the search results and select this file
|
||||
setSearchResults([searchResult]);
|
||||
setSelectedHashId(hashParam);
|
||||
} catch (err: any) {
|
||||
setError(`Failed to load file with hash ${hashParam}: ${err.message}`);
|
||||
setSearchResults([]);
|
||||
setSelectedHashId(undefined);
|
||||
} finally {
|
||||
setIsLoadingDirectHash(false);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
loadHashFromUrl();
|
||||
|
||||
// Handle browser back/forward
|
||||
const handlePopState = (event: PopStateEvent) => {
|
||||
const hashId = event.state?.hashId || getHashFromUrl();
|
||||
if (hashId) {
|
||||
setSelectedHashId(hashId);
|
||||
} else {
|
||||
setSelectedHashId(undefined);
|
||||
}
|
||||
};
|
||||
window.addEventListener('popstate', handlePopState);
|
||||
return () => window.removeEventListener('popstate', handlePopState);
|
||||
}, []); // Empty dependency array means this runs once on mount
|
||||
|
||||
const handleSearch = async (query: string) => {
|
||||
try {
|
||||
setIsSearching(true);
|
||||
setError(null);
|
||||
|
||||
// Unified search - searches across all fields
|
||||
const response = await MetadataAPI.search({ query });
|
||||
|
||||
setSearchResults(response.results);
|
||||
|
||||
// Auto-select first result if available
|
||||
if (response.results.length > 0) {
|
||||
setSelectedHashId(response.results[0].hashId);
|
||||
} else {
|
||||
setSelectedHashId(undefined);
|
||||
}
|
||||
} catch (err: any) {
|
||||
setError(err.message);
|
||||
setSearchResults([]);
|
||||
setSelectedHashId(undefined);
|
||||
} finally {
|
||||
setIsSearching(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleSelectFile = (hashId: string) => {
|
||||
if (!bulkEditMode) {
|
||||
setSelectedHashId(hashId);
|
||||
setSelectedHashIds(new Set());
|
||||
updateUrlForFile(hashId);
|
||||
}
|
||||
};
|
||||
|
||||
const handleToggleSelection = (hashId: string) => {
|
||||
const newSelection = new Set(selectedHashIds);
|
||||
if (newSelection.has(hashId)) {
|
||||
newSelection.delete(hashId);
|
||||
} else {
|
||||
newSelection.add(hashId);
|
||||
}
|
||||
setSelectedHashIds(newSelection);
|
||||
};
|
||||
|
||||
const handleSelectAll = () => {
|
||||
const allHashIds = new Set(searchResults.map(r => r.hashId));
|
||||
setSelectedHashIds(allHashIds);
|
||||
};
|
||||
|
||||
const handleClearSelection = () => {
|
||||
setSelectedHashIds(new Set());
|
||||
setBulkEditMode(false);
|
||||
};
|
||||
|
||||
const handleBulkEditMode = (enabled: boolean) => {
|
||||
setBulkEditMode(enabled);
|
||||
if (enabled) {
|
||||
setSelectedHashId(undefined);
|
||||
} else {
|
||||
setSelectedHashIds(new Set());
|
||||
}
|
||||
};
|
||||
|
||||
const handleMetadataSaved = () => {
|
||||
// Optionally refresh the search results to reflect changes
|
||||
console.log('Metadata saved successfully');
|
||||
};
|
||||
|
||||
const handleBulkMetadataSaved = () => {
|
||||
console.log('Bulk metadata saved successfully');
|
||||
handleClearSelection();
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="app">
|
||||
<header className="app-header">
|
||||
<h1>MetaMesh Metadata Editor</h1>
|
||||
<p className="app-description">
|
||||
Search and edit metadata for your media files
|
||||
</p>
|
||||
<nav className="app-nav">
|
||||
<button
|
||||
className={view === 'edit' ? 'active' : ''}
|
||||
onClick={() => setView('edit')}
|
||||
>
|
||||
Edit
|
||||
</button>
|
||||
<button
|
||||
className={view === 'snapshot' ? 'active' : ''}
|
||||
onClick={() => setView('snapshot')}
|
||||
>
|
||||
Snapshot
|
||||
</button>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
{view === 'snapshot' ? (
|
||||
<main className="app-main">
|
||||
<SnapshotPanel />
|
||||
</main>
|
||||
) : (
|
||||
<main className="app-main">
|
||||
<SearchBar onSearch={handleSearch} isLoading={isSearching} />
|
||||
|
||||
{error && <div className="app-error">{error}</div>}
|
||||
|
||||
{isLoadingDirectHash && (
|
||||
<div className="app-loading">Loading file metadata...</div>
|
||||
)}
|
||||
|
||||
{!isSearching && !isLoadingDirectHash && searchResults.length === 0 && !error && (
|
||||
<div className="app-welcome">
|
||||
<h2>Welcome to MetaMesh Metadata Editor</h2>
|
||||
<p>Search for files by title, filename, file path, or hash ID to get started.</p>
|
||||
<p className="app-welcome-features">
|
||||
Unified search across all fields | Single file editing | Bulk editing | Direct access via URL
|
||||
</p>
|
||||
<div className="app-kv-browser">
|
||||
<KVTreeView />
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{searchResults.length > 0 && (
|
||||
<div className="app-content">
|
||||
<div className="app-sidebar">
|
||||
<FileList
|
||||
results={searchResults}
|
||||
selectedHashId={selectedHashId}
|
||||
selectedHashIds={selectedHashIds}
|
||||
bulkEditMode={bulkEditMode}
|
||||
onSelectFile={handleSelectFile}
|
||||
onToggleSelection={handleToggleSelection}
|
||||
onSelectAll={handleSelectAll}
|
||||
onClearSelection={handleClearSelection}
|
||||
onBulkEditMode={handleBulkEditMode}
|
||||
/>
|
||||
</div>
|
||||
<div className="app-editor">
|
||||
{bulkEditMode && selectedHashIds.size > 0 ? (
|
||||
<BulkMetadataEditor
|
||||
hashIds={Array.from(selectedHashIds)}
|
||||
onSaved={handleBulkMetadataSaved}
|
||||
onCancel={handleClearSelection}
|
||||
/>
|
||||
) : selectedHashId ? (
|
||||
<MetadataEditor
|
||||
key={selectedHashId}
|
||||
hashId={selectedHashId}
|
||||
onSaved={handleMetadataSaved}
|
||||
/>
|
||||
) : (
|
||||
<div className="app-no-selection">
|
||||
{bulkEditMode
|
||||
? 'Select files from the list to bulk edit metadata'
|
||||
: 'Select a file from the list to edit its metadata'}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</main>
|
||||
)}
|
||||
|
||||
<footer className="app-footer">
|
||||
<p>
|
||||
MetaMesh Metadata Editor | Part of{' '}
|
||||
<a href="/" target="_blank">
|
||||
MetaMesh
|
||||
</a>
|
||||
</p>
|
||||
</footer>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default App;
|
||||
@@ -1,151 +0,0 @@
|
||||
import {
|
||||
FileMetadata,
|
||||
SearchResponse,
|
||||
UpdateResult,
|
||||
BatchUpdateResponse,
|
||||
} from '../types';
|
||||
|
||||
const API_BASE = '/api/metadata';
|
||||
|
||||
export class MetadataAPI {
|
||||
/**
|
||||
* Search for files by query, hashId, or property
|
||||
*/
|
||||
static async search(params: {
|
||||
query?: string;
|
||||
hashId?: string;
|
||||
property?: string;
|
||||
propertyValue?: string;
|
||||
limit?: number;
|
||||
}): Promise<SearchResponse> {
|
||||
const response = await fetch(`${API_BASE}/search`, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify(params),
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
const error = await response.json();
|
||||
throw new Error(error.error || 'Search failed');
|
||||
}
|
||||
|
||||
return response.json();
|
||||
}
|
||||
|
||||
/**
|
||||
* Get metadata for a specific file by hash ID
|
||||
*/
|
||||
static async getMetadata(hashId: string): Promise<FileMetadata> {
|
||||
const response = await fetch(`${API_BASE}/${hashId}`);
|
||||
|
||||
if (!response.ok) {
|
||||
const error = await response.json();
|
||||
throw new Error(error.error || 'Failed to get metadata');
|
||||
}
|
||||
|
||||
return response.json();
|
||||
}
|
||||
|
||||
/**
|
||||
* Update complete metadata for a file
|
||||
*/
|
||||
static async updateMetadata(
|
||||
hashId: string,
|
||||
metadata: FileMetadata
|
||||
): Promise<UpdateResult> {
|
||||
const response = await fetch(`${API_BASE}/${hashId}`, {
|
||||
method: 'PUT',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify(metadata),
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
const error = await response.json();
|
||||
throw new Error(error.error || 'Failed to update metadata');
|
||||
}
|
||||
|
||||
return response.json();
|
||||
}
|
||||
|
||||
/**
|
||||
* Update a specific property for a file
|
||||
*/
|
||||
static async updateProperty(
|
||||
hashId: string,
|
||||
property: string,
|
||||
value: string
|
||||
): Promise<UpdateResult> {
|
||||
const response = await fetch(`${API_BASE}/${hashId}/property`, {
|
||||
method: 'PUT',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify({ property, value }),
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
const error = await response.json();
|
||||
throw new Error(error.error || 'Failed to update property');
|
||||
}
|
||||
|
||||
return response.json();
|
||||
}
|
||||
|
||||
/**
|
||||
* Batch update multiple files
|
||||
*/
|
||||
static async batchUpdate(
|
||||
updates: Array<{
|
||||
hashId: string;
|
||||
metadata?: FileMetadata;
|
||||
properties?: Record<string, string>;
|
||||
}>
|
||||
): Promise<BatchUpdateResponse> {
|
||||
const response = await fetch(`${API_BASE}/batch`, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify({ updates }),
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
const error = await response.json();
|
||||
throw new Error(error.error || 'Batch update failed');
|
||||
}
|
||||
|
||||
return response.json();
|
||||
}
|
||||
|
||||
/**
|
||||
* Delete metadata for a file
|
||||
*/
|
||||
static async deleteMetadata(hashId: string): Promise<void> {
|
||||
const response = await fetch(`${API_BASE}/${hashId}`, {
|
||||
method: 'DELETE',
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
const error = await response.json();
|
||||
throw new Error(error.error || 'Failed to delete metadata');
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Get all hash IDs
|
||||
*/
|
||||
static async getAllHashIds(): Promise<{ hashIds: string[]; count: number }> {
|
||||
const response = await fetch(`${API_BASE}/hash-ids`);
|
||||
|
||||
if (!response.ok) {
|
||||
const error = await response.json();
|
||||
throw new Error(error.error || 'Failed to get hash IDs');
|
||||
}
|
||||
|
||||
return response.json();
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,74 @@
|
||||
import { useEffect, useState } from 'react';
|
||||
|
||||
export type SchemaPrimitive =
|
||||
| 'string'
|
||||
| 'int'
|
||||
| 'float'
|
||||
| 'bool'
|
||||
| 'json-object'
|
||||
| 'json-array'
|
||||
| 'undefined'
|
||||
| 'mixed';
|
||||
|
||||
export type SchemaHint = 'cid' | 'timestamp';
|
||||
export type SchemaKeyHint = 'language-code';
|
||||
|
||||
export interface SchemaFieldInfo {
|
||||
type: SchemaPrimitive;
|
||||
hint?: SchemaHint;
|
||||
key_hint?: SchemaKeyHint;
|
||||
breakdown: Record<string, number>;
|
||||
}
|
||||
|
||||
export interface SchemaResponse {
|
||||
fields: Record<string, SchemaFieldInfo>;
|
||||
generated_at: string;
|
||||
source: 'live' | 'rescan';
|
||||
}
|
||||
|
||||
let cached: Promise<SchemaResponse> | null = null;
|
||||
|
||||
export async function fetchSchema(): Promise<SchemaResponse> {
|
||||
if (!cached) {
|
||||
cached = fetch('/api/schema').then((r) => {
|
||||
if (!r.ok) {
|
||||
cached = null;
|
||||
throw new Error(`schema fetch failed: ${r.status}`);
|
||||
}
|
||||
return r.json();
|
||||
});
|
||||
}
|
||||
return cached;
|
||||
}
|
||||
|
||||
/**
|
||||
* Returns the live schema entry for a field, or undefined if not yet observed.
|
||||
* Loads /api/schema lazily on first mount and caches the result process-wide.
|
||||
*/
|
||||
export function useSchema(): {
|
||||
schema: SchemaResponse | null;
|
||||
getFieldHint: (key: string) => SchemaFieldInfo | undefined;
|
||||
} {
|
||||
const [schema, setSchema] = useState<SchemaResponse | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
let alive = true;
|
||||
fetchSchema()
|
||||
.then((s) => {
|
||||
if (alive) setSchema(s);
|
||||
})
|
||||
.catch(() => {
|
||||
// Schema endpoint missing or errored — editor falls back to plugin schemas.
|
||||
});
|
||||
return () => {
|
||||
alive = false;
|
||||
};
|
||||
}, []);
|
||||
|
||||
const getFieldHint = (key: string): SchemaFieldInfo | undefined => {
|
||||
if (!schema) return undefined;
|
||||
return schema.fields[key];
|
||||
};
|
||||
|
||||
return { schema, getFieldHint };
|
||||
}
|
||||
@@ -1,382 +0,0 @@
|
||||
.bulk-metadata-editor {
|
||||
background-color: rgba(255, 255, 255, 0.05);
|
||||
border-radius: 8px;
|
||||
padding: 1.5rem;
|
||||
}
|
||||
|
||||
.bulk-metadata-editor-header {
|
||||
margin-bottom: 1rem;
|
||||
padding-bottom: 1rem;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.bulk-metadata-editor-header h2 {
|
||||
margin: 0 0 0.5rem 0;
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.bulk-info {
|
||||
margin: 0 0 1rem 0;
|
||||
color: rgba(255, 255, 255, 0.6);
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
.bulk-metadata-editor-actions {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.bulk-metadata-editor-actions button.primary {
|
||||
background-color: #646cff;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.bulk-metadata-editor-actions button.primary:hover:not(:disabled) {
|
||||
background-color: #535bf2;
|
||||
}
|
||||
|
||||
.bulk-metadata-editor-message {
|
||||
padding: 1rem;
|
||||
border-radius: 4px;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.bulk-metadata-editor-message.success {
|
||||
background-color: rgba(0, 200, 0, 0.1);
|
||||
border: 1px solid rgba(0, 200, 0, 0.3);
|
||||
color: #00ff00;
|
||||
}
|
||||
|
||||
.bulk-metadata-editor-message.error {
|
||||
background-color: rgba(255, 0, 0, 0.1);
|
||||
border: 1px solid rgba(255, 0, 0, 0.3);
|
||||
color: #ff6b6b;
|
||||
}
|
||||
|
||||
.bulk-metadata-editor-form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1.5rem;
|
||||
}
|
||||
|
||||
.bulk-metadata-section {
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
border-left: 4px solid #646cff;
|
||||
border-radius: 8px;
|
||||
padding: 1.5rem;
|
||||
background-color: rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.bulk-metadata-section-header {
|
||||
margin-bottom: 1.5rem;
|
||||
padding-bottom: 0.75rem;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.bulk-metadata-section-header h3 {
|
||||
margin: 0 0 0.25rem 0;
|
||||
font-size: 1.1rem;
|
||||
color: #646cff;
|
||||
}
|
||||
|
||||
.section-hint {
|
||||
margin: 0.25rem 0 0 0;
|
||||
font-size: 0.85rem;
|
||||
color: rgba(255, 255, 255, 0.5);
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.section-hint-bulk {
|
||||
margin: 0.5rem 0 0 0;
|
||||
font-size: 0.8rem;
|
||||
color: rgba(255, 255, 255, 0.4);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* Plugin-based bulk fields */
|
||||
.bulk-fields-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.bulk-field-wrapper {
|
||||
border: 1px solid rgba(255, 255, 255, 0.05);
|
||||
border-radius: 4px;
|
||||
padding: 0.75rem;
|
||||
background-color: rgba(0, 0, 0, 0.1);
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.bulk-field-wrapper.has-value {
|
||||
border-color: rgba(100, 108, 255, 0.3);
|
||||
background-color: rgba(100, 108, 255, 0.05);
|
||||
}
|
||||
|
||||
.bulk-field-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.field-key {
|
||||
font-size: 0.85rem;
|
||||
font-weight: 600;
|
||||
color: rgba(255, 255, 255, 0.6);
|
||||
text-transform: lowercase;
|
||||
font-family: 'Courier New', monospace;
|
||||
}
|
||||
|
||||
.bulk-field-wrapper.has-value .field-key {
|
||||
color: #646cff;
|
||||
}
|
||||
|
||||
.bulk-field-input {
|
||||
/* Plugin component will render inside this */
|
||||
}
|
||||
|
||||
/* Legacy bulk fields (for compatibility) */
|
||||
.bulk-metadata-field {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.bulk-metadata-field:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.field-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.field-header label {
|
||||
font-size: 0.9rem;
|
||||
font-weight: 500;
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
}
|
||||
|
||||
.clear-field-btn {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
padding: 0;
|
||||
border: 1px solid rgba(255, 0, 0, 0.3);
|
||||
background-color: rgba(255, 0, 0, 0.1);
|
||||
color: #ff6b6b;
|
||||
border-radius: 50%;
|
||||
cursor: pointer;
|
||||
font-size: 16px;
|
||||
line-height: 1;
|
||||
transition: all 0.2s;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.clear-field-btn:hover {
|
||||
background-color: rgba(255, 0, 0, 0.2);
|
||||
border-color: rgba(255, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
.bulk-metadata-field input,
|
||||
.bulk-metadata-field textarea,
|
||||
.bulk-metadata-field select {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.bulk-metadata-field-row {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
||||
gap: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.bulk-metadata-field-row:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
/* Modified fields summary */
|
||||
.modified-fields {
|
||||
background-color: rgba(100, 108, 255, 0.05);
|
||||
border-color: rgba(100, 108, 255, 0.3);
|
||||
}
|
||||
|
||||
.modified-fields h3 {
|
||||
color: #646cff;
|
||||
}
|
||||
|
||||
.modified-fields-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.modified-field-item {
|
||||
display: flex;
|
||||
gap: 0.75rem;
|
||||
align-items: center;
|
||||
padding: 0.75rem;
|
||||
background-color: rgba(100, 108, 255, 0.05);
|
||||
border: 1px solid rgba(100, 108, 255, 0.2);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.field-name {
|
||||
font-weight: 600;
|
||||
color: #646cff;
|
||||
min-width: 150px;
|
||||
font-family: 'Courier New', monospace;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.field-value {
|
||||
flex: 1;
|
||||
word-break: break-word;
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.remove-field-btn {
|
||||
padding: 0.25rem 0.75rem;
|
||||
font-size: 0.85rem;
|
||||
background-color: rgba(255, 0, 0, 0.1);
|
||||
border: 1px solid rgba(255, 0, 0, 0.3);
|
||||
color: #ff6b6b;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.remove-field-btn:hover {
|
||||
background-color: rgba(255, 0, 0, 0.2);
|
||||
border-color: rgba(255, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.bulk-metadata-editor-header {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.bulk-metadata-editor-actions {
|
||||
width: 100%;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.bulk-metadata-editor-actions button {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.bulk-metadata-field-row {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.modified-field-item {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.field-name {
|
||||
min-width: auto;
|
||||
}
|
||||
|
||||
.remove-field-btn {
|
||||
align-self: flex-end;
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: light) {
|
||||
.bulk-metadata-editor {
|
||||
background-color: rgba(0, 0, 0, 0.02);
|
||||
}
|
||||
|
||||
.bulk-metadata-editor-header {
|
||||
border-bottom-color: rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.bulk-info {
|
||||
color: rgba(0, 0, 0, 0.6);
|
||||
}
|
||||
|
||||
.bulk-metadata-section {
|
||||
border-color: rgba(0, 0, 0, 0.1);
|
||||
background-color: rgba(0, 0, 0, 0.02);
|
||||
}
|
||||
|
||||
.bulk-metadata-section-header {
|
||||
border-bottom-color: rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.section-hint {
|
||||
color: rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
.section-hint-bulk {
|
||||
color: rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
|
||||
.bulk-field-wrapper {
|
||||
border-color: rgba(0, 0, 0, 0.1);
|
||||
background-color: rgba(0, 0, 0, 0.02);
|
||||
}
|
||||
|
||||
.bulk-field-wrapper.has-value {
|
||||
border-color: rgba(100, 108, 255, 0.3);
|
||||
background-color: rgba(100, 108, 255, 0.05);
|
||||
}
|
||||
|
||||
.field-key {
|
||||
color: rgba(0, 0, 0, 0.6);
|
||||
}
|
||||
|
||||
.bulk-field-wrapper.has-value .field-key {
|
||||
color: #646cff;
|
||||
}
|
||||
|
||||
.field-header label {
|
||||
color: rgba(0, 0, 0, 0.7);
|
||||
}
|
||||
|
||||
.field-value {
|
||||
color: rgba(0, 0, 0, 0.8);
|
||||
}
|
||||
|
||||
.bulk-metadata-editor-message.success {
|
||||
background-color: rgba(0, 200, 0, 0.1);
|
||||
border-color: rgba(0, 200, 0, 0.3);
|
||||
color: #008800;
|
||||
}
|
||||
|
||||
.bulk-metadata-editor-message.error {
|
||||
background-color: rgba(255, 0, 0, 0.1);
|
||||
border-color: rgba(255, 0, 0, 0.3);
|
||||
color: #cc0000;
|
||||
}
|
||||
|
||||
.modified-fields {
|
||||
background-color: rgba(100, 108, 255, 0.05);
|
||||
border-color: rgba(100, 108, 255, 0.3);
|
||||
}
|
||||
|
||||
.modified-field-item {
|
||||
background-color: rgba(100, 108, 255, 0.05);
|
||||
border-color: rgba(100, 108, 255, 0.2);
|
||||
}
|
||||
|
||||
.clear-field-btn {
|
||||
border-color: rgba(255, 0, 0, 0.3);
|
||||
background-color: rgba(255, 0, 0, 0.1);
|
||||
color: #cc0000;
|
||||
}
|
||||
|
||||
.clear-field-btn:hover {
|
||||
background-color: rgba(255, 0, 0, 0.2);
|
||||
border-color: rgba(255, 0, 0, 0.5);
|
||||
}
|
||||
}
|
||||
@@ -1,280 +0,0 @@
|
||||
import { useState, useEffect } from 'react';
|
||||
import { FileMetadata, PluginSchema } from '../types';
|
||||
import { MetadataAPI } from '../api/metadataApi';
|
||||
import { DynamicFieldRenderer } from './DynamicFieldRenderer';
|
||||
import './BulkMetadataEditor.css';
|
||||
|
||||
interface PluginsResponse {
|
||||
plugins: PluginSchema[];
|
||||
}
|
||||
|
||||
interface BulkMetadataEditorProps {
|
||||
hashIds: string[];
|
||||
onSaved?: () => void;
|
||||
onCancel?: () => void;
|
||||
}
|
||||
|
||||
export function BulkMetadataEditor({ hashIds, onSaved, onCancel }: BulkMetadataEditorProps) {
|
||||
const [plugins, setPlugins] = useState<PluginSchema[]>([]);
|
||||
const [commonValues, setCommonValues] = useState<Record<string, any>>({});
|
||||
const [editedFields, setEditedFields] = useState<Partial<FileMetadata>>({});
|
||||
const [isLoading, setIsLoading] = useState(true);
|
||||
const [isSaving, setIsSaving] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [successMessage, setSuccessMessage] = useState<string | null>(null);
|
||||
|
||||
// Load plugins and metadata on mount
|
||||
useEffect(() => {
|
||||
const loadData = async () => {
|
||||
try {
|
||||
setIsLoading(true);
|
||||
setError(null);
|
||||
|
||||
// Fetch plugins
|
||||
const pluginsResponse = await fetch('/api/plugins');
|
||||
if (pluginsResponse.ok) {
|
||||
const data: PluginsResponse = await pluginsResponse.json();
|
||||
// Sort by priority
|
||||
const sorted = [...data.plugins].sort((a, b) =>
|
||||
(a.priority ?? 100) - (b.priority ?? 100)
|
||||
);
|
||||
setPlugins(sorted);
|
||||
}
|
||||
|
||||
// Load metadata for all selected files
|
||||
const metadataPromises = hashIds.map((hashId) => MetadataAPI.getMetadata(hashId));
|
||||
const metadata = await Promise.all(metadataPromises);
|
||||
|
||||
// Calculate common values
|
||||
const commons: Record<string, any> = {};
|
||||
|
||||
// Get all editable fields from all plugins
|
||||
const allFields: string[] = [];
|
||||
plugins.forEach((plugin) => {
|
||||
if (plugin.metadataSchema) {
|
||||
Object.entries(plugin.metadataSchema).forEach(([key, field]) => {
|
||||
if (!field.readonly) {
|
||||
allFields.push(key);
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
allFields.forEach((field) => {
|
||||
const values = metadata.map((m) => m[field as keyof FileMetadata]);
|
||||
|
||||
// Filter out undefined and null values
|
||||
const definedValues = values.filter((v) => v !== undefined && v !== null);
|
||||
|
||||
if (definedValues.length === 0) {
|
||||
return;
|
||||
}
|
||||
|
||||
// Safely stringify values
|
||||
const uniqueValues = Array.from(
|
||||
new Set(
|
||||
definedValues.map((v) => {
|
||||
try {
|
||||
return JSON.stringify(v);
|
||||
} catch {
|
||||
return String(v);
|
||||
}
|
||||
})
|
||||
)
|
||||
);
|
||||
|
||||
if (uniqueValues.length === 1) {
|
||||
try {
|
||||
commons[field] = JSON.parse(uniqueValues[0]);
|
||||
} catch {
|
||||
commons[field] = uniqueValues[0];
|
||||
}
|
||||
} else {
|
||||
commons[field] = '*';
|
||||
}
|
||||
});
|
||||
|
||||
setCommonValues(commons);
|
||||
} catch (err: any) {
|
||||
setError(`Failed to load data: ${err.message}`);
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
loadData();
|
||||
}, [hashIds]);
|
||||
|
||||
const handleFieldChange = (field: string, value: any) => {
|
||||
setEditedFields({
|
||||
...editedFields,
|
||||
[field]: value,
|
||||
});
|
||||
};
|
||||
|
||||
const handleClearField = (field: string) => {
|
||||
const newFields = { ...editedFields };
|
||||
delete newFields[field];
|
||||
setEditedFields(newFields);
|
||||
};
|
||||
|
||||
const handleSave = async () => {
|
||||
if (Object.keys(editedFields).length === 0) {
|
||||
setError('No fields have been edited');
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
setIsSaving(true);
|
||||
setError(null);
|
||||
setSuccessMessage(null);
|
||||
|
||||
// Build batch update payload
|
||||
const updates = hashIds.map((hashId) => ({
|
||||
hashId,
|
||||
metadata: editedFields,
|
||||
}));
|
||||
|
||||
const result = await MetadataAPI.batchUpdate(updates);
|
||||
|
||||
if (result.errors > 0) {
|
||||
setError(
|
||||
`Updated ${result.success} files successfully, but ${result.errors} failed. Check console for details.`
|
||||
);
|
||||
console.error('Batch update errors:', result.results.filter((r) => r.error));
|
||||
} else {
|
||||
setSuccessMessage(`Successfully updated ${result.success} files!`);
|
||||
}
|
||||
|
||||
if (onSaved) {
|
||||
onSaved();
|
||||
}
|
||||
|
||||
setTimeout(() => setSuccessMessage(null), 3000);
|
||||
} catch (err: any) {
|
||||
setError(err.message);
|
||||
} finally {
|
||||
setIsSaving(false);
|
||||
}
|
||||
};
|
||||
|
||||
const hasChanges = Object.keys(editedFields).length > 0;
|
||||
|
||||
// Filter to only editable plugins (those with non-readonly fields)
|
||||
const editablePlugins = plugins.filter((plugin) => {
|
||||
if (!plugin.metadataSchema) return false;
|
||||
return Object.values(plugin.metadataSchema).some((field) => !field.readonly);
|
||||
});
|
||||
|
||||
if (isLoading) {
|
||||
return (
|
||||
<div className="bulk-metadata-editor">
|
||||
<div className="bulk-metadata-editor-loading">
|
||||
Loading metadata for {hashIds.length} files...
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// Build display metadata (edited values or common values)
|
||||
const displayMetadata: Record<string, any> = { ...commonValues, ...editedFields };
|
||||
|
||||
return (
|
||||
<div className="bulk-metadata-editor">
|
||||
<div className="bulk-metadata-editor-header">
|
||||
<h2>Bulk Edit Metadata</h2>
|
||||
<p className="bulk-info">
|
||||
Editing {hashIds.length} file{hashIds.length !== 1 ? 's' : ''} - Only modified fields will
|
||||
be updated. Fields showing "*" have different values across files.
|
||||
</p>
|
||||
<div className="bulk-metadata-editor-actions">
|
||||
{onCancel && (
|
||||
<button onClick={onCancel} disabled={isSaving}>
|
||||
Cancel
|
||||
</button>
|
||||
)}
|
||||
<button onClick={handleSave} disabled={isSaving || !hasChanges} className="primary">
|
||||
{isSaving ? 'Saving...' : `Update ${hashIds.length} File${hashIds.length !== 1 ? 's' : ''}`}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{successMessage && (
|
||||
<div className="bulk-metadata-editor-message success">{successMessage}</div>
|
||||
)}
|
||||
{error && <div className="bulk-metadata-editor-message error">{error}</div>}
|
||||
|
||||
<div className="bulk-metadata-editor-form">
|
||||
{editablePlugins.map((plugin) => {
|
||||
if (!plugin.metadataSchema) return null;
|
||||
|
||||
// Get editable fields for this plugin
|
||||
const editableFields = Object.entries(plugin.metadataSchema).filter(
|
||||
([, field]) => !field.readonly
|
||||
);
|
||||
|
||||
if (editableFields.length === 0) return null;
|
||||
|
||||
return (
|
||||
<section
|
||||
key={plugin.id}
|
||||
className="bulk-metadata-section"
|
||||
style={{ borderLeftColor: plugin.color || '#646cff' }}
|
||||
>
|
||||
<div className="bulk-metadata-section-header">
|
||||
<h3>{plugin.name}</h3>
|
||||
{plugin.description && (
|
||||
<p className="section-hint">{plugin.description}</p>
|
||||
)}
|
||||
<p className="section-hint-bulk">
|
||||
Common values shown. "*" indicates different values. Edit to update all files.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="plugin-fields">
|
||||
{editableFields.map(([key, field]) => (
|
||||
<DynamicFieldRenderer
|
||||
key={key}
|
||||
fieldKey={key}
|
||||
schema={field}
|
||||
metadata={displayMetadata as FileMetadata}
|
||||
onChange={handleFieldChange}
|
||||
readonly={false}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
})}
|
||||
|
||||
{/* Modified Fields Summary */}
|
||||
{hasChanges && (
|
||||
<section className="bulk-metadata-section modified-fields">
|
||||
<h3>Fields to be Updated ({Object.keys(editedFields).length})</h3>
|
||||
<div className="modified-fields-list">
|
||||
{Object.entries(editedFields).map(([key, value]) => (
|
||||
<div key={key} className="modified-field-item">
|
||||
<span className="field-name">{key}:</span>
|
||||
<span className="field-value">
|
||||
{Array.isArray(value)
|
||||
? value.join(', ')
|
||||
: typeof value === 'object'
|
||||
? JSON.stringify(value)
|
||||
: String(value || '(empty)')}
|
||||
</span>
|
||||
<button
|
||||
className="remove-field-btn"
|
||||
onClick={() => handleClearField(key)}
|
||||
title="Remove this field"
|
||||
>
|
||||
Remove
|
||||
</button>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,297 +0,0 @@
|
||||
.dynamic-field {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.dynamic-field:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.dynamic-field label {
|
||||
font-size: 0.9rem;
|
||||
font-weight: 500;
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
}
|
||||
|
||||
.dynamic-field input[type="text"],
|
||||
.dynamic-field input[type="number"],
|
||||
.dynamic-field select,
|
||||
.dynamic-field textarea {
|
||||
width: 100%;
|
||||
padding: 0.5rem 0.75rem;
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
border-radius: 4px;
|
||||
font-size: 0.9rem;
|
||||
background: rgba(0, 0, 0, 0.3);
|
||||
color: #fff;
|
||||
transition: border-color 0.2s;
|
||||
}
|
||||
|
||||
.dynamic-field input:focus,
|
||||
.dynamic-field select:focus,
|
||||
.dynamic-field textarea:focus {
|
||||
outline: none;
|
||||
border-color: #646cff;
|
||||
}
|
||||
|
||||
.dynamic-field input:disabled,
|
||||
.dynamic-field select:disabled,
|
||||
.dynamic-field textarea:disabled {
|
||||
background: rgba(0, 0, 0, 0.2);
|
||||
color: rgba(255, 255, 255, 0.5);
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.dynamic-field textarea {
|
||||
resize: vertical;
|
||||
min-height: 80px;
|
||||
font-family: inherit;
|
||||
}
|
||||
|
||||
.field-hint {
|
||||
display: block;
|
||||
font-size: 0.8rem;
|
||||
color: rgba(255, 255, 255, 0.4);
|
||||
}
|
||||
|
||||
.checkbox-label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
cursor: pointer;
|
||||
font-weight: normal;
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
}
|
||||
|
||||
.checkbox-label input[type="checkbox"] {
|
||||
width: 1.1rem;
|
||||
height: 1.1rem;
|
||||
cursor: pointer;
|
||||
accent-color: #646cff;
|
||||
}
|
||||
|
||||
.checkbox-label input:disabled {
|
||||
cursor: not-allowed;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.readonly-value {
|
||||
padding: 0.5rem 0.75rem;
|
||||
background: rgba(0, 0, 0, 0.2);
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
border-radius: 4px;
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
font-family: 'Courier New', monospace;
|
||||
font-size: 0.9rem;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.field-link {
|
||||
color: #646cff;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.field-link:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/* CID field styling */
|
||||
.cid-field .cid-value-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.cid-field .cid-value {
|
||||
flex: 1;
|
||||
padding: 0.5rem 0.75rem;
|
||||
background: rgba(0, 0, 0, 0.3);
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
border-radius: 4px;
|
||||
font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', 'Courier New', monospace;
|
||||
font-size: 0.85rem;
|
||||
color: #a0d8ef;
|
||||
cursor: pointer;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.cid-field .cid-value:hover {
|
||||
background: rgba(0, 0, 0, 0.4);
|
||||
border-color: #646cff;
|
||||
}
|
||||
|
||||
.cid-field .cid-open-button {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
padding: 0.5rem 0.75rem;
|
||||
background: #646cff;
|
||||
color: #fff;
|
||||
border-radius: 4px;
|
||||
text-decoration: none;
|
||||
font-size: 0.85rem;
|
||||
font-weight: 500;
|
||||
white-space: nowrap;
|
||||
transition: background 0.2s;
|
||||
}
|
||||
|
||||
.cid-field .cid-open-button:hover {
|
||||
background: #535bf2;
|
||||
}
|
||||
|
||||
/* JSON field styling */
|
||||
.json-field .json-viewer {
|
||||
background: rgba(0, 0, 0, 0.4);
|
||||
color: #d4d4d4;
|
||||
padding: 1rem;
|
||||
border-radius: 4px;
|
||||
font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', 'Courier New', monospace;
|
||||
font-size: 0.85rem;
|
||||
overflow-x: auto;
|
||||
max-height: 300px;
|
||||
overflow-y: auto;
|
||||
margin: 0;
|
||||
white-space: pre-wrap;
|
||||
word-break: break-all;
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
/* Language string field styling */
|
||||
.language-string-field .language-entries {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.language-string-field .language-entry {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.language-string-field .lang-input {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.language-string-field .lang-code {
|
||||
display: inline-block;
|
||||
width: 50px;
|
||||
padding: 0.4rem 0.5rem;
|
||||
background: rgba(100, 108, 255, 0.2);
|
||||
border: 1px solid rgba(100, 108, 255, 0.3);
|
||||
border-radius: 4px;
|
||||
font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', 'Courier New', monospace;
|
||||
font-size: 0.8rem;
|
||||
color: #a0d8ef;
|
||||
text-align: center;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.language-string-field .lang-text {
|
||||
flex: 1;
|
||||
padding: 0.4rem 0.75rem;
|
||||
background: rgba(0, 0, 0, 0.2);
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
border-radius: 4px;
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
font-size: 0.9rem;
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.language-string-field .lang-remove-btn {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: rgba(255, 100, 100, 0.2);
|
||||
border: 1px solid rgba(255, 100, 100, 0.3);
|
||||
border-radius: 4px;
|
||||
color: #ff6b6b;
|
||||
font-size: 1.2rem;
|
||||
cursor: pointer;
|
||||
transition: background 0.2s, border-color 0.2s;
|
||||
}
|
||||
|
||||
.language-string-field .lang-remove-btn:hover {
|
||||
background: rgba(255, 100, 100, 0.3);
|
||||
border-color: rgba(255, 100, 100, 0.5);
|
||||
}
|
||||
|
||||
.language-string-field .lang-add-btn {
|
||||
align-self: flex-start;
|
||||
padding: 0.4rem 0.75rem;
|
||||
background: rgba(100, 108, 255, 0.2);
|
||||
border: 1px solid rgba(100, 108, 255, 0.3);
|
||||
border-radius: 4px;
|
||||
color: #646cff;
|
||||
font-size: 0.85rem;
|
||||
cursor: pointer;
|
||||
transition: background 0.2s, border-color 0.2s;
|
||||
}
|
||||
|
||||
.language-string-field .lang-add-btn:hover {
|
||||
background: rgba(100, 108, 255, 0.3);
|
||||
border-color: rgba(100, 108, 255, 0.5);
|
||||
}
|
||||
|
||||
/* Light theme */
|
||||
@media (prefers-color-scheme: light) {
|
||||
.dynamic-field label {
|
||||
color: rgba(0, 0, 0, 0.7);
|
||||
}
|
||||
|
||||
.dynamic-field input[type="text"],
|
||||
.dynamic-field input[type="number"],
|
||||
.dynamic-field select,
|
||||
.dynamic-field textarea {
|
||||
border-color: rgba(0, 0, 0, 0.1);
|
||||
background: #fff;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.dynamic-field input:disabled,
|
||||
.dynamic-field select:disabled,
|
||||
.dynamic-field textarea:disabled {
|
||||
background: #f5f5f5;
|
||||
color: rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
.field-hint {
|
||||
color: rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
.checkbox-label {
|
||||
color: rgba(0, 0, 0, 0.7);
|
||||
}
|
||||
|
||||
.readonly-value {
|
||||
background: #f8f9fa;
|
||||
border-color: #e9ecef;
|
||||
color: #495057;
|
||||
}
|
||||
|
||||
.json-field .json-viewer {
|
||||
background: #1e1e1e;
|
||||
border-color: rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.language-string-field .lang-code {
|
||||
background: rgba(100, 108, 255, 0.1);
|
||||
color: #4a50c8;
|
||||
}
|
||||
|
||||
.language-string-field .lang-text {
|
||||
background: #f8f9fa;
|
||||
border-color: #e9ecef;
|
||||
color: #495057;
|
||||
}
|
||||
}
|
||||
@@ -1,378 +0,0 @@
|
||||
import { SchemaField, FileMetadata } from '../types';
|
||||
import { LanguageCombobox, formatLanguageOption } from './LanguageCombobox';
|
||||
import './DynamicFieldRenderer.css';
|
||||
|
||||
interface DynamicFieldRendererProps {
|
||||
fieldKey: string;
|
||||
schema: SchemaField;
|
||||
metadata: FileMetadata;
|
||||
onChange: (key: string, value: any) => void;
|
||||
readonly?: boolean;
|
||||
}
|
||||
|
||||
/**
|
||||
* Renders a single metadata field based on its schema definition
|
||||
*/
|
||||
export function DynamicFieldRenderer({
|
||||
fieldKey,
|
||||
schema,
|
||||
metadata,
|
||||
onChange,
|
||||
readonly = false,
|
||||
}: DynamicFieldRendererProps) {
|
||||
const isReadonly = readonly || schema.readonly;
|
||||
const fieldType = schema.type || 'string';
|
||||
|
||||
// Get value from metadata using path-style key
|
||||
const getValue = (): any => {
|
||||
// Handle path-style keys like "stream/duration" or "nfo/title"
|
||||
const parts = fieldKey.split('/');
|
||||
let value: any = metadata;
|
||||
for (const part of parts) {
|
||||
if (value === undefined || value === null) return undefined;
|
||||
value = value[part];
|
||||
}
|
||||
return value;
|
||||
};
|
||||
|
||||
// Set value in metadata using path-style key
|
||||
const setValue = (newValue: any) => {
|
||||
onChange(fieldKey, newValue);
|
||||
};
|
||||
|
||||
const value = getValue();
|
||||
|
||||
// Render link if configured
|
||||
const renderValueWithLink = (displayValue: string) => {
|
||||
if (schema.link && displayValue) {
|
||||
const url = schema.link.replace('{value}', encodeURIComponent(displayValue));
|
||||
return (
|
||||
<a href={url} target="_blank" rel="noopener noreferrer" className="field-link">
|
||||
{displayValue}
|
||||
</a>
|
||||
);
|
||||
}
|
||||
return displayValue;
|
||||
};
|
||||
|
||||
// Render based on field type
|
||||
switch (fieldType) {
|
||||
case 'boolean':
|
||||
return (
|
||||
<div className="dynamic-field">
|
||||
<label className="checkbox-label">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={Boolean(value)}
|
||||
onChange={(e) => setValue(e.target.checked)}
|
||||
disabled={isReadonly}
|
||||
/>
|
||||
<span>{schema.label}</span>
|
||||
</label>
|
||||
{schema.hint && <small className="field-hint">{schema.hint}</small>}
|
||||
</div>
|
||||
);
|
||||
|
||||
case 'number':
|
||||
return (
|
||||
<div className="dynamic-field">
|
||||
<label>{schema.label}</label>
|
||||
<input
|
||||
type="number"
|
||||
value={value ?? ''}
|
||||
onChange={(e) => setValue(e.target.value ? Number(e.target.value) : undefined)}
|
||||
disabled={isReadonly}
|
||||
min={schema.min}
|
||||
max={schema.max}
|
||||
placeholder={schema.placeholder}
|
||||
/>
|
||||
{schema.hint && <small className="field-hint">{schema.hint}</small>}
|
||||
</div>
|
||||
);
|
||||
|
||||
case 'select':
|
||||
return (
|
||||
<div className="dynamic-field">
|
||||
<label>{schema.label}</label>
|
||||
<select
|
||||
value={value ?? ''}
|
||||
onChange={(e) => setValue(e.target.value || undefined)}
|
||||
disabled={isReadonly}
|
||||
>
|
||||
<option value="">Select...</option>
|
||||
{schema.options?.map((opt) => (
|
||||
<option key={opt.value} value={opt.value}>
|
||||
{opt.label}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
{schema.hint && <small className="field-hint">{schema.hint}</small>}
|
||||
</div>
|
||||
);
|
||||
|
||||
case 'text':
|
||||
return (
|
||||
<div className="dynamic-field">
|
||||
<label>{schema.label}</label>
|
||||
<textarea
|
||||
value={value ?? ''}
|
||||
onChange={(e) => setValue(e.target.value || undefined)}
|
||||
disabled={isReadonly}
|
||||
placeholder={schema.placeholder}
|
||||
rows={4}
|
||||
/>
|
||||
{schema.hint && <small className="field-hint">{schema.hint}</small>}
|
||||
</div>
|
||||
);
|
||||
|
||||
case 'array':
|
||||
// Convert RecordSet to comma-separated string for display
|
||||
const arrayValue = (() => {
|
||||
if (!value) return '';
|
||||
if (typeof value === 'string') return value;
|
||||
if (typeof value === 'object') {
|
||||
return Object.values(value).join(', ');
|
||||
}
|
||||
return '';
|
||||
})();
|
||||
|
||||
// Convert comma-separated string back to RecordSet
|
||||
const handleArrayChange = (str: string) => {
|
||||
const items = str.split(',').map(s => s.trim()).filter(Boolean);
|
||||
if (items.length === 0) {
|
||||
setValue(undefined);
|
||||
return;
|
||||
}
|
||||
const recordSet: Record<string, string> = {};
|
||||
items.forEach((item, idx) => {
|
||||
recordSet[idx.toString()] = item;
|
||||
});
|
||||
setValue(recordSet);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="dynamic-field">
|
||||
<label>{schema.label}</label>
|
||||
<input
|
||||
type="text"
|
||||
value={arrayValue}
|
||||
onChange={(e) => handleArrayChange(e.target.value)}
|
||||
disabled={isReadonly}
|
||||
placeholder={schema.placeholder || 'Comma-separated values'}
|
||||
/>
|
||||
{schema.hint && <small className="field-hint">{schema.hint}</small>}
|
||||
</div>
|
||||
);
|
||||
|
||||
case 'json':
|
||||
// Aggregate matching keys based on pattern
|
||||
const jsonData = (() => {
|
||||
if (!schema.pattern) {
|
||||
return value;
|
||||
}
|
||||
|
||||
// Pattern like "stream/video/{n}/*" - aggregate all matching keys
|
||||
const patternPrefix = schema.pattern.replace(/\{n\}.*$/, '');
|
||||
const result: Record<string, any> = {};
|
||||
|
||||
// Recursively find all matching keys
|
||||
const findMatching = (obj: any, currentPath: string = '') => {
|
||||
if (!obj || typeof obj !== 'object') return;
|
||||
|
||||
for (const [key, val] of Object.entries(obj)) {
|
||||
const newPath = currentPath ? `${currentPath}/${key}` : key;
|
||||
if (newPath.startsWith(patternPrefix.replace(/\/$/, ''))) {
|
||||
// Store in result with relative path
|
||||
const relativePath = newPath.substring(patternPrefix.length - 1);
|
||||
if (relativePath) {
|
||||
setNestedValue(result, relativePath, val);
|
||||
}
|
||||
}
|
||||
if (typeof val === 'object' && val !== null) {
|
||||
findMatching(val, newPath);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
findMatching(metadata);
|
||||
return Object.keys(result).length > 0 ? result : undefined;
|
||||
})();
|
||||
|
||||
if (!jsonData) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="dynamic-field json-field">
|
||||
<label>{schema.label}</label>
|
||||
<pre className="json-viewer">
|
||||
{JSON.stringify(jsonData, null, 2)}
|
||||
</pre>
|
||||
{schema.hint && <small className="field-hint">{schema.hint}</small>}
|
||||
</div>
|
||||
);
|
||||
|
||||
case 'cid':
|
||||
// CID field type - displays CID with "Open in Editor" button
|
||||
if (!value) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const cidValue = String(value);
|
||||
const editorUrl = `/editor/file/${cidValue}`;
|
||||
|
||||
return (
|
||||
<div className="dynamic-field cid-field">
|
||||
<label>{schema.label}</label>
|
||||
<div className="cid-value-container">
|
||||
<code
|
||||
className="cid-value"
|
||||
onClick={() => navigator.clipboard.writeText(cidValue)}
|
||||
title="Click to copy"
|
||||
>
|
||||
{cidValue}
|
||||
</code>
|
||||
<a
|
||||
href={editorUrl}
|
||||
className="cid-open-button"
|
||||
title="Open in Editor"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
↗ Open
|
||||
</a>
|
||||
</div>
|
||||
{schema.hint && <small className="field-hint">{schema.hint}</small>}
|
||||
</div>
|
||||
);
|
||||
|
||||
case 'languageString':
|
||||
// Language-keyed string object: { "eng": "English Title", "jpn": "日本語タイトル" }
|
||||
const langEntries: Array<[string, string]> = value && typeof value === 'object'
|
||||
? Object.entries(value).map(([k, v]) => [k, String(v)])
|
||||
: [];
|
||||
|
||||
const handleLangCodeChange = (oldLang: string, newLang: string) => {
|
||||
if (oldLang === newLang) return;
|
||||
const newValue = { ...value };
|
||||
const text = newValue[oldLang];
|
||||
delete newValue[oldLang];
|
||||
newValue[newLang] = text;
|
||||
setValue(Object.keys(newValue).length > 0 ? newValue : undefined);
|
||||
};
|
||||
|
||||
const handleLangTextChange = (lang: string, text: string) => {
|
||||
const newValue = { ...value, [lang]: text };
|
||||
setValue(newValue);
|
||||
};
|
||||
|
||||
const handleRemoveLang = (lang: string) => {
|
||||
const newValue = { ...value };
|
||||
delete newValue[lang];
|
||||
setValue(Object.keys(newValue).length > 0 ? newValue : undefined);
|
||||
};
|
||||
|
||||
const handleAddLang = () => {
|
||||
// Find a language code not already used, default to 'eng'
|
||||
const usedLangs = new Set(langEntries.map(([k]) => k));
|
||||
const commonDefaults = ['eng', 'jpn', 'zho', 'kor', 'fra', 'deu', 'spa'];
|
||||
const defaultLang = commonDefaults.find(l => !usedLangs.has(l)) || 'eng';
|
||||
setValue({ ...value, [defaultLang]: '' });
|
||||
};
|
||||
|
||||
if (isReadonly && langEntries.length === 0) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="dynamic-field language-string-field">
|
||||
<label>{schema.label}</label>
|
||||
<div className="language-entries">
|
||||
{langEntries.map(([lang, text]) => (
|
||||
<div key={lang} className="language-entry">
|
||||
{isReadonly ? (
|
||||
<>
|
||||
<span className="lang-code" title={formatLanguageOption(lang)}>{lang}</span>
|
||||
<span className="lang-text">{text}</span>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<LanguageCombobox
|
||||
value={lang}
|
||||
onChange={(newLang) => handleLangCodeChange(lang, newLang)}
|
||||
/>
|
||||
<input
|
||||
type="text"
|
||||
className="lang-input"
|
||||
value={text}
|
||||
onChange={(e) => handleLangTextChange(lang, e.target.value)}
|
||||
placeholder={schema.placeholder || 'Text...'}
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
className="lang-remove-btn"
|
||||
onClick={() => handleRemoveLang(lang)}
|
||||
title="Remove"
|
||||
>
|
||||
×
|
||||
</button>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
{!isReadonly && (
|
||||
<button
|
||||
type="button"
|
||||
className="lang-add-btn"
|
||||
onClick={handleAddLang}
|
||||
>
|
||||
+ Add Language
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
{schema.hint && <small className="field-hint">{schema.hint}</small>}
|
||||
</div>
|
||||
);
|
||||
|
||||
case 'string':
|
||||
default:
|
||||
// Show nothing if no value and readonly
|
||||
if (isReadonly && !value) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="dynamic-field">
|
||||
<label>{schema.label}</label>
|
||||
{isReadonly ? (
|
||||
<div className="readonly-value">
|
||||
{renderValueWithLink(String(value ?? ''))}
|
||||
</div>
|
||||
) : (
|
||||
<input
|
||||
type="text"
|
||||
value={value ?? ''}
|
||||
onChange={(e) => setValue(e.target.value || undefined)}
|
||||
placeholder={schema.placeholder}
|
||||
/>
|
||||
)}
|
||||
{schema.hint && <small className="field-hint">{schema.hint}</small>}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
// Helper to set nested value in object
|
||||
function setNestedValue(obj: any, path: string, value: any) {
|
||||
const parts = path.split('/').filter(Boolean);
|
||||
let current = obj;
|
||||
for (let i = 0; i < parts.length - 1; i++) {
|
||||
if (!current[parts[i]]) {
|
||||
current[parts[i]] = {};
|
||||
}
|
||||
current = current[parts[i]];
|
||||
}
|
||||
if (parts.length > 0) {
|
||||
current[parts[parts.length - 1]] = value;
|
||||
}
|
||||
}
|
||||
@@ -1,63 +0,0 @@
|
||||
.plugin-section {
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
border-left: 4px solid #646cff;
|
||||
border-radius: 8px;
|
||||
padding: 1.5rem;
|
||||
background-color: rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.plugin-section-header {
|
||||
margin-bottom: 1rem;
|
||||
padding-bottom: 0.75rem;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.plugin-section-header h3 {
|
||||
margin: 0 0 0.25rem 0;
|
||||
font-size: 1.1rem;
|
||||
color: #646cff;
|
||||
}
|
||||
|
||||
.plugin-section-header .plugin-description {
|
||||
margin: 0;
|
||||
font-size: 0.85rem;
|
||||
color: rgba(255, 255, 255, 0.5);
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.plugin-fields {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
/* Responsive grid for fields */
|
||||
@media (min-width: 768px) {
|
||||
.plugin-fields {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
/* Make text and json fields span full width */
|
||||
.plugin-fields .dynamic-field:has(textarea),
|
||||
.plugin-fields .json-field {
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
}
|
||||
|
||||
/* Light theme */
|
||||
@media (prefers-color-scheme: light) {
|
||||
.plugin-section {
|
||||
border-color: rgba(0, 0, 0, 0.1);
|
||||
background-color: rgba(0, 0, 0, 0.02);
|
||||
}
|
||||
|
||||
.plugin-section-header {
|
||||
border-bottom-color: rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.plugin-section-header .plugin-description {
|
||||
color: rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
}
|
||||
@@ -1,126 +0,0 @@
|
||||
import { PluginSchema, FileMetadata, SchemaField } from '../types';
|
||||
import { DynamicFieldRenderer } from './DynamicFieldRenderer';
|
||||
import './DynamicPluginSection.css';
|
||||
|
||||
interface DynamicPluginSectionProps {
|
||||
plugin: PluginSchema;
|
||||
metadata: FileMetadata;
|
||||
onChange: (key: string, value: any) => void;
|
||||
}
|
||||
|
||||
/**
|
||||
* Renders a plugin section with all its fields based on schema
|
||||
*/
|
||||
export function DynamicPluginSection({
|
||||
plugin,
|
||||
metadata,
|
||||
onChange,
|
||||
}: DynamicPluginSectionProps) {
|
||||
const schema = plugin.metadataSchema;
|
||||
|
||||
if (!schema || Object.keys(schema).length === 0) {
|
||||
return null;
|
||||
}
|
||||
|
||||
// Check if plugin has any data in metadata
|
||||
const hasData = checkPluginHasData(schema, metadata);
|
||||
if (!hasData) {
|
||||
return null;
|
||||
}
|
||||
|
||||
// Sort fields: non-readonly first, then by key
|
||||
const sortedFields = Object.entries(schema).sort(([keyA, a], [keyB, b]) => {
|
||||
// Non-readonly fields first
|
||||
if (a.readonly !== b.readonly) {
|
||||
return a.readonly ? 1 : -1;
|
||||
}
|
||||
// Then alphabetically
|
||||
return keyA.localeCompare(keyB);
|
||||
});
|
||||
|
||||
return (
|
||||
<section
|
||||
className="plugin-section"
|
||||
style={{ borderLeftColor: plugin.color || '#646cff' }}
|
||||
>
|
||||
<div className="plugin-section-header">
|
||||
<h3>{plugin.name}</h3>
|
||||
{plugin.description && (
|
||||
<p className="plugin-description">{plugin.description}</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="plugin-fields">
|
||||
{sortedFields.map(([fieldKey, fieldSchema]) => (
|
||||
<DynamicFieldRenderer
|
||||
key={fieldKey}
|
||||
fieldKey={fieldKey}
|
||||
schema={fieldSchema}
|
||||
metadata={metadata}
|
||||
onChange={onChange}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Check if a plugin has any data in the metadata
|
||||
*/
|
||||
function checkPluginHasData(
|
||||
schema: Record<string, SchemaField>,
|
||||
metadata: FileMetadata
|
||||
): boolean {
|
||||
for (const fieldKey of Object.keys(schema)) {
|
||||
const fieldSchema = schema[fieldKey];
|
||||
|
||||
// For JSON type with pattern, check if any matching keys exist
|
||||
if (fieldSchema.type === 'json' && fieldSchema.pattern) {
|
||||
const patternPrefix = fieldSchema.pattern.replace(/\{n\}.*$/, '').replace(/\/$/, '');
|
||||
if (hasKeyWithPrefix(metadata, patternPrefix)) {
|
||||
return true;
|
||||
}
|
||||
continue;
|
||||
}
|
||||
|
||||
// For regular fields, check if value exists
|
||||
if (getNestedValue(metadata, fieldKey) !== undefined) {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
/**
|
||||
* Get nested value from object using path-style key
|
||||
*/
|
||||
function getNestedValue(obj: any, path: string): any {
|
||||
const parts = path.split('/');
|
||||
let value = obj;
|
||||
for (const part of parts) {
|
||||
if (value === undefined || value === null) return undefined;
|
||||
value = value[part];
|
||||
}
|
||||
return value;
|
||||
}
|
||||
|
||||
/**
|
||||
* Check if object has any key starting with prefix
|
||||
*/
|
||||
function hasKeyWithPrefix(obj: any, prefix: string, currentPath: string = ''): boolean {
|
||||
if (!obj || typeof obj !== 'object') return false;
|
||||
|
||||
for (const key of Object.keys(obj)) {
|
||||
const newPath = currentPath ? `${currentPath}/${key}` : key;
|
||||
if (newPath.startsWith(prefix)) {
|
||||
return true;
|
||||
}
|
||||
if (typeof obj[key] === 'object' && obj[key] !== null) {
|
||||
if (hasKeyWithPrefix(obj[key], prefix, newPath)) {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
}
|
||||
return false;
|
||||
}
|
||||
@@ -1,174 +0,0 @@
|
||||
.file-list {
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.file-list-header {
|
||||
padding: 0.75rem 1rem;
|
||||
background-color: rgba(255, 255, 255, 0.05);
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.file-count {
|
||||
font-size: 0.9em;
|
||||
color: rgba(255, 255, 255, 0.6);
|
||||
}
|
||||
|
||||
.bulk-edit-toggle {
|
||||
padding: 0.4rem 0.8rem;
|
||||
font-size: 0.85em;
|
||||
background-color: rgba(100, 108, 255, 0.1);
|
||||
border: 1px solid rgba(100, 108, 255, 0.3);
|
||||
color: #646cff;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.bulk-edit-toggle:hover {
|
||||
background-color: rgba(100, 108, 255, 0.2);
|
||||
border-color: rgba(100, 108, 255, 0.5);
|
||||
}
|
||||
|
||||
.bulk-edit-toggle.active {
|
||||
background-color: rgba(100, 108, 255, 0.3);
|
||||
border-color: #646cff;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.file-list-bulk-actions {
|
||||
padding: 0.75rem 1rem;
|
||||
background-color: rgba(100, 108, 255, 0.1);
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.select-all-btn {
|
||||
padding: 0.4rem 0.8rem;
|
||||
font-size: 0.85em;
|
||||
background-color: rgba(255, 255, 255, 0.1);
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.select-all-btn:hover {
|
||||
background-color: rgba(255, 255, 255, 0.2);
|
||||
border-color: rgba(255, 255, 255, 0.3);
|
||||
}
|
||||
|
||||
.selection-count {
|
||||
font-size: 0.9em;
|
||||
color: #646cff;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.file-list-items {
|
||||
max-height: 500px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.file-list-item {
|
||||
padding: 1rem;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
|
||||
cursor: pointer;
|
||||
transition: background-color 0.2s;
|
||||
display: flex;
|
||||
gap: 0.75rem;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.file-list-item-checkbox {
|
||||
padding-top: 0.2rem;
|
||||
}
|
||||
|
||||
.file-list-item-checkbox input[type='checkbox'] {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.file-list-item-content {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.file-list-item:hover {
|
||||
background-color: rgba(255, 255, 255, 0.05);
|
||||
}
|
||||
|
||||
.file-list-item.selected {
|
||||
background-color: rgba(100, 108, 255, 0.2);
|
||||
border-left: 3px solid #646cff;
|
||||
}
|
||||
|
||||
.file-list-item-title {
|
||||
font-weight: 500;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.file-list-item-details {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
font-size: 0.9em;
|
||||
color: rgba(255, 255, 255, 0.6);
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
|
||||
.file-list-item-hash {
|
||||
font-size: 0.8em;
|
||||
color: rgba(255, 255, 255, 0.4);
|
||||
font-family: 'Courier New', monospace;
|
||||
}
|
||||
|
||||
.file-list-empty {
|
||||
padding: 3rem 1rem;
|
||||
text-align: center;
|
||||
color: rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: light) {
|
||||
.file-list {
|
||||
border-color: rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.file-list-header {
|
||||
background-color: rgba(0, 0, 0, 0.02);
|
||||
border-bottom-color: rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.file-count {
|
||||
color: rgba(0, 0, 0, 0.6);
|
||||
}
|
||||
|
||||
.file-list-item {
|
||||
border-bottom-color: rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
.file-list-item:hover {
|
||||
background-color: rgba(0, 0, 0, 0.02);
|
||||
}
|
||||
|
||||
.file-list-item.selected {
|
||||
background-color: rgba(100, 108, 255, 0.1);
|
||||
}
|
||||
|
||||
.file-list-item-details {
|
||||
color: rgba(0, 0, 0, 0.6);
|
||||
}
|
||||
|
||||
.file-list-item-hash {
|
||||
color: rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
|
||||
.file-list-empty {
|
||||
color: rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
}
|
||||
@@ -1,123 +0,0 @@
|
||||
import { SearchResult } from '../types';
|
||||
import { getDisplayName, truncateHash, formatBytes } from '../utils/formatting';
|
||||
import './FileList.css';
|
||||
|
||||
interface FileListProps {
|
||||
results: SearchResult[];
|
||||
selectedHashId?: string;
|
||||
selectedHashIds: Set<string>;
|
||||
bulkEditMode: boolean;
|
||||
onSelectFile: (hashId: string) => void;
|
||||
onToggleSelection: (hashId: string) => void;
|
||||
onSelectAll: () => void;
|
||||
onClearSelection: () => void;
|
||||
onBulkEditMode: (enabled: boolean) => void;
|
||||
}
|
||||
|
||||
export function FileList({
|
||||
results,
|
||||
selectedHashId,
|
||||
selectedHashIds,
|
||||
bulkEditMode,
|
||||
onSelectFile,
|
||||
onToggleSelection,
|
||||
onSelectAll,
|
||||
onClearSelection,
|
||||
onBulkEditMode,
|
||||
}: FileListProps) {
|
||||
if (results.length === 0) {
|
||||
return (
|
||||
<div className="file-list-empty">
|
||||
<p>No files found. Try searching for a title, filename, or hash ID.</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const allSelected = results.length > 0 && results.every(r => selectedHashIds.has(r.hashId));
|
||||
|
||||
// Sort results by file path
|
||||
const sortedResults = [...results].sort((a, b) => {
|
||||
const pathA = a.metadata.filePath || a.metadata.privateFilePath || '';
|
||||
const pathB = b.metadata.filePath || b.metadata.privateFilePath || '';
|
||||
return pathA.localeCompare(pathB);
|
||||
});
|
||||
|
||||
return (
|
||||
<div className="file-list">
|
||||
<div className="file-list-header">
|
||||
<span className="file-count">{results.length} files found</span>
|
||||
<button
|
||||
className={`bulk-edit-toggle ${bulkEditMode ? 'active' : ''}`}
|
||||
onClick={() => onBulkEditMode(!bulkEditMode)}
|
||||
title={bulkEditMode ? 'Exit bulk edit mode' : 'Enter bulk edit mode'}
|
||||
>
|
||||
{bulkEditMode ? '✓ Bulk Edit' : 'Bulk Edit'}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{bulkEditMode && (
|
||||
<div className="file-list-bulk-actions">
|
||||
<button onClick={allSelected ? onClearSelection : onSelectAll} className="select-all-btn">
|
||||
{allSelected ? 'Deselect All' : 'Select All'}
|
||||
</button>
|
||||
{selectedHashIds.size > 0 && (
|
||||
<span className="selection-count">
|
||||
{selectedHashIds.size} selected
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="file-list-items">
|
||||
{sortedResults.map((result) => {
|
||||
const isSelected = bulkEditMode
|
||||
? selectedHashIds.has(result.hashId)
|
||||
: selectedHashId === result.hashId;
|
||||
|
||||
return (
|
||||
<div
|
||||
key={result.hashId}
|
||||
className={`file-list-item ${isSelected ? 'selected' : ''}`}
|
||||
onClick={() => {
|
||||
if (bulkEditMode) {
|
||||
onToggleSelection(result.hashId);
|
||||
} else {
|
||||
onSelectFile(result.hashId);
|
||||
}
|
||||
}}
|
||||
>
|
||||
{bulkEditMode && (
|
||||
<div className="file-list-item-checkbox">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={selectedHashIds.has(result.hashId)}
|
||||
onChange={(e) => {
|
||||
e.stopPropagation();
|
||||
onToggleSelection(result.hashId);
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
<div className="file-list-item-content">
|
||||
<div className="file-list-item-title">
|
||||
{getDisplayName(result.metadata)}
|
||||
</div>
|
||||
<div className="file-list-item-details">
|
||||
<span className="file-list-item-type">
|
||||
{result.metadata.videoType || 'Unknown'}
|
||||
</span>
|
||||
<span className="file-list-item-size">
|
||||
{formatBytes(result.metadata.byteSize)}
|
||||
</span>
|
||||
</div>
|
||||
<div className="file-list-item-hash">
|
||||
Hash: {truncateHash(result.hashId)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,247 +0,0 @@
|
||||
.kv-tree {
|
||||
background-color: rgba(255, 255, 255, 0.05);
|
||||
border-radius: 8px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.kv-tree-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
padding: 0.75rem 1rem;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
||||
background-color: rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.kv-tree-header h3 {
|
||||
margin: 0;
|
||||
font-size: 0.9rem;
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
}
|
||||
|
||||
.kv-tree-info {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
font-size: 0.75rem;
|
||||
color: rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
|
||||
.kv-tree-refresh {
|
||||
margin-left: auto;
|
||||
padding: 0.25rem 0.75rem;
|
||||
font-size: 0.75rem;
|
||||
background-color: rgba(100, 108, 255, 0.2);
|
||||
color: #646cff;
|
||||
border: 1px solid rgba(100, 108, 255, 0.3);
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.kv-tree-refresh:hover:not(:disabled) {
|
||||
background-color: rgba(100, 108, 255, 0.3);
|
||||
}
|
||||
|
||||
.kv-tree-refresh:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.kv-tree-error {
|
||||
padding: 0.5rem 1rem;
|
||||
background-color: rgba(255, 0, 0, 0.1);
|
||||
color: #ff6b6b;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
.kv-tree-content {
|
||||
max-height: 400px;
|
||||
overflow-y: auto;
|
||||
font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
.kv-tree-node {
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
|
||||
}
|
||||
|
||||
.kv-tree-node:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.kv-tree-key {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
padding: 0.5rem 1rem;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.15s;
|
||||
}
|
||||
|
||||
.kv-tree-key:hover {
|
||||
background-color: rgba(255, 255, 255, 0.05);
|
||||
}
|
||||
|
||||
.kv-tree-key.expanded {
|
||||
background-color: rgba(100, 108, 255, 0.1);
|
||||
}
|
||||
|
||||
.kv-tree-toggle {
|
||||
width: 1rem;
|
||||
color: rgba(255, 255, 255, 0.4);
|
||||
font-size: 0.65rem;
|
||||
}
|
||||
|
||||
.kv-tree-key-name {
|
||||
flex: 1;
|
||||
color: #88c0d0;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.kv-tree-type {
|
||||
padding: 0.1rem 0.4rem;
|
||||
font-size: 0.65rem;
|
||||
background-color: rgba(255, 255, 255, 0.1);
|
||||
border-radius: 3px;
|
||||
color: rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
|
||||
.kv-tree-value {
|
||||
padding: 0.5rem 1rem 0.5rem 2.5rem;
|
||||
background-color: rgba(0, 0, 0, 0.2);
|
||||
border-top: 1px solid rgba(255, 255, 255, 0.05);
|
||||
}
|
||||
|
||||
.kv-tree-fields {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
.kv-tree-fields tr:hover {
|
||||
background-color: rgba(255, 255, 255, 0.03);
|
||||
}
|
||||
|
||||
.kv-field-name {
|
||||
padding: 0.25rem 0.5rem 0.25rem 0;
|
||||
color: #a3be8c;
|
||||
white-space: nowrap;
|
||||
vertical-align: top;
|
||||
width: 1%;
|
||||
}
|
||||
|
||||
.kv-field-value {
|
||||
padding: 0.25rem 0;
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.kv-field-value pre {
|
||||
margin: 0;
|
||||
font-family: inherit;
|
||||
white-space: pre-wrap;
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
|
||||
.kv-tree-load-more {
|
||||
display: block;
|
||||
width: 100%;
|
||||
padding: 0.75rem;
|
||||
font-size: 0.8rem;
|
||||
background-color: transparent;
|
||||
color: #646cff;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.15s;
|
||||
}
|
||||
|
||||
.kv-tree-load-more:hover:not(:disabled) {
|
||||
background-color: rgba(100, 108, 255, 0.1);
|
||||
}
|
||||
|
||||
.kv-tree-load-more:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.kv-tree-empty {
|
||||
padding: 2rem;
|
||||
text-align: center;
|
||||
color: rgba(255, 255, 255, 0.4);
|
||||
}
|
||||
|
||||
/* Light mode */
|
||||
@media (prefers-color-scheme: light) {
|
||||
.kv-tree {
|
||||
background-color: rgba(0, 0, 0, 0.02);
|
||||
border-color: rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.kv-tree-header {
|
||||
border-bottom-color: rgba(0, 0, 0, 0.1);
|
||||
background-color: rgba(0, 0, 0, 0.03);
|
||||
}
|
||||
|
||||
.kv-tree-header h3 {
|
||||
color: rgba(0, 0, 0, 0.8);
|
||||
}
|
||||
|
||||
.kv-tree-info {
|
||||
color: rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
.kv-tree-error {
|
||||
background-color: rgba(255, 0, 0, 0.08);
|
||||
color: #cc0000;
|
||||
}
|
||||
|
||||
.kv-tree-node {
|
||||
border-bottom-color: rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
.kv-tree-key:hover {
|
||||
background-color: rgba(0, 0, 0, 0.03);
|
||||
}
|
||||
|
||||
.kv-tree-key.expanded {
|
||||
background-color: rgba(100, 108, 255, 0.08);
|
||||
}
|
||||
|
||||
.kv-tree-toggle {
|
||||
color: rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
|
||||
.kv-tree-key-name {
|
||||
color: #0077aa;
|
||||
}
|
||||
|
||||
.kv-tree-type {
|
||||
background-color: rgba(0, 0, 0, 0.08);
|
||||
color: rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
.kv-tree-value {
|
||||
background-color: rgba(0, 0, 0, 0.02);
|
||||
border-top-color: rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
.kv-tree-fields tr:hover {
|
||||
background-color: rgba(0, 0, 0, 0.02);
|
||||
}
|
||||
|
||||
.kv-field-name {
|
||||
color: #228822;
|
||||
}
|
||||
|
||||
.kv-field-value {
|
||||
color: rgba(0, 0, 0, 0.7);
|
||||
}
|
||||
|
||||
.kv-tree-load-more:hover:not(:disabled) {
|
||||
background-color: rgba(100, 108, 255, 0.08);
|
||||
}
|
||||
|
||||
.kv-tree-empty {
|
||||
color: rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
}
|
||||
@@ -1,216 +0,0 @@
|
||||
import { useState, useEffect, useCallback } from 'react';
|
||||
import './KVTreeView.css';
|
||||
|
||||
interface KeyValue {
|
||||
key: string;
|
||||
type?: string;
|
||||
value?: Record<string, any> | string;
|
||||
expanded?: boolean;
|
||||
loading?: boolean;
|
||||
}
|
||||
|
||||
interface KVInfo {
|
||||
prefix: string;
|
||||
fileCount: number;
|
||||
keyCount: number;
|
||||
totalSize: number;
|
||||
memoryUsage?: string;
|
||||
}
|
||||
|
||||
const API_BASE = '/api/kv';
|
||||
|
||||
export function KVTreeView() {
|
||||
const [keys, setKeys] = useState<KeyValue[]>([]);
|
||||
const [cursor, setCursor] = useState<string>('0');
|
||||
const [hasMore, setHasMore] = useState(true);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [info, setInfo] = useState<KVInfo | null>(null);
|
||||
|
||||
// Load KV info on mount
|
||||
useEffect(() => {
|
||||
fetch(`${API_BASE}/info`)
|
||||
.then(res => res.json())
|
||||
.then(data => setInfo(data))
|
||||
.catch(err => console.error('Failed to load KV info:', err));
|
||||
}, []);
|
||||
|
||||
// Load initial keys
|
||||
const loadKeys = useCallback(async (reset = false) => {
|
||||
if (loading) return;
|
||||
|
||||
const currentCursor = reset ? '0' : cursor;
|
||||
if (!reset && currentCursor === '0' && keys.length > 0) return;
|
||||
|
||||
setLoading(true);
|
||||
setError(null);
|
||||
|
||||
try {
|
||||
const res = await fetch(`${API_BASE}/keys?cursor=${currentCursor}&count=50`);
|
||||
if (!res.ok) throw new Error('Failed to load keys');
|
||||
|
||||
const data = await res.json();
|
||||
|
||||
const newKeys: KeyValue[] = data.keys.map((key: string) => ({
|
||||
key,
|
||||
expanded: false,
|
||||
loading: false
|
||||
}));
|
||||
|
||||
if (reset) {
|
||||
setKeys(newKeys);
|
||||
} else {
|
||||
setKeys(prev => [...prev, ...newKeys]);
|
||||
}
|
||||
|
||||
setCursor(data.cursor);
|
||||
setHasMore(data.hasMore);
|
||||
} catch (err: any) {
|
||||
setError(err.message);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}, [cursor, keys.length, loading]);
|
||||
|
||||
// Load on mount
|
||||
useEffect(() => {
|
||||
loadKeys(true);
|
||||
}, []);
|
||||
|
||||
// Toggle key expansion and load value
|
||||
const toggleKey = async (index: number) => {
|
||||
const key = keys[index];
|
||||
|
||||
if (key.expanded) {
|
||||
// Collapse
|
||||
setKeys(prev => prev.map((k, i) =>
|
||||
i === index ? { ...k, expanded: false } : k
|
||||
));
|
||||
return;
|
||||
}
|
||||
|
||||
// Expand and load value if not already loaded
|
||||
if (key.value === undefined) {
|
||||
setKeys(prev => prev.map((k, i) =>
|
||||
i === index ? { ...k, loading: true } : k
|
||||
));
|
||||
|
||||
try {
|
||||
const res = await fetch(`${API_BASE}/key/${encodeURIComponent(key.key)}`);
|
||||
if (!res.ok) throw new Error('Failed to load value');
|
||||
|
||||
const data = await res.json();
|
||||
|
||||
setKeys(prev => prev.map((k, i) =>
|
||||
i === index ? {
|
||||
...k,
|
||||
type: data.type,
|
||||
value: data.value,
|
||||
expanded: true,
|
||||
loading: false
|
||||
} : k
|
||||
));
|
||||
} catch (err) {
|
||||
setKeys(prev => prev.map((k, i) =>
|
||||
i === index ? { ...k, loading: false, value: 'Error loading value' } : k
|
||||
));
|
||||
}
|
||||
} else {
|
||||
setKeys(prev => prev.map((k, i) =>
|
||||
i === index ? { ...k, expanded: true } : k
|
||||
));
|
||||
}
|
||||
};
|
||||
|
||||
const formatValue = (value: any): string => {
|
||||
if (value === null) return 'null';
|
||||
if (value === undefined) return 'undefined';
|
||||
if (typeof value === 'object') {
|
||||
return JSON.stringify(value, null, 2);
|
||||
}
|
||||
return String(value);
|
||||
};
|
||||
|
||||
const formatSize = (bytes: number): string => {
|
||||
if (bytes < 1024) return `${bytes} B`;
|
||||
if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
|
||||
if (bytes < 1024 * 1024 * 1024) return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
|
||||
return `${(bytes / (1024 * 1024 * 1024)).toFixed(2)} GB`;
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="kv-tree">
|
||||
<div className="kv-tree-header">
|
||||
<h3>KV Database Browser</h3>
|
||||
{info && (
|
||||
<div className="kv-tree-info">
|
||||
<span>Keys: {info.keyCount}</span>
|
||||
<span>Files: {formatSize(info.totalSize)}</span>
|
||||
{info.memoryUsage && <span>Memory: {info.memoryUsage}</span>}
|
||||
</div>
|
||||
)}
|
||||
<button
|
||||
className="kv-tree-refresh"
|
||||
onClick={() => loadKeys(true)}
|
||||
disabled={loading}
|
||||
>
|
||||
{loading ? 'Loading...' : 'Refresh'}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{error && <div className="kv-tree-error">{error}</div>}
|
||||
|
||||
<div className="kv-tree-content">
|
||||
{keys.map((item, index) => (
|
||||
<div key={item.key} className="kv-tree-node">
|
||||
<div
|
||||
className={`kv-tree-key ${item.expanded ? 'expanded' : ''}`}
|
||||
onClick={() => toggleKey(index)}
|
||||
>
|
||||
<span className="kv-tree-toggle">
|
||||
{item.loading ? '...' : (item.expanded ? '▼' : '▶')}
|
||||
</span>
|
||||
<span className="kv-tree-key-name">{item.key}</span>
|
||||
{item.type && <span className="kv-tree-type">{item.type}</span>}
|
||||
</div>
|
||||
|
||||
{item.expanded && item.value && (
|
||||
<div className="kv-tree-value">
|
||||
{typeof item.value === 'object' ? (
|
||||
<table className="kv-tree-fields">
|
||||
<tbody>
|
||||
{Object.entries(item.value).map(([field, val]) => (
|
||||
<tr key={field}>
|
||||
<td className="kv-field-name">{field}</td>
|
||||
<td className="kv-field-value">
|
||||
<pre>{formatValue(val)}</pre>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
) : (
|
||||
<pre>{formatValue(item.value)}</pre>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
|
||||
{hasMore && (
|
||||
<button
|
||||
className="kv-tree-load-more"
|
||||
onClick={() => loadKeys()}
|
||||
disabled={loading}
|
||||
>
|
||||
{loading ? 'Loading...' : 'Load More'}
|
||||
</button>
|
||||
)}
|
||||
|
||||
{!loading && keys.length === 0 && (
|
||||
<div className="kv-tree-empty">No keys found</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -8,15 +8,6 @@ for (const lang of iso6393) {
|
||||
languagesByCode.set(lang.iso6393, lang);
|
||||
}
|
||||
|
||||
// Get display name for a language code
|
||||
export function getLanguageName(code: string): string {
|
||||
const lang = languagesByCode.get(code);
|
||||
if (lang) {
|
||||
return lang.name;
|
||||
}
|
||||
return code.toUpperCase();
|
||||
}
|
||||
|
||||
// Format for display: "English (eng)" or "eng" for unknown
|
||||
export function formatLanguageOption(code: string): string {
|
||||
const lang = languagesByCode.get(code);
|
||||
|
||||
@@ -1,438 +0,0 @@
|
||||
.metadata-editor {
|
||||
background-color: rgba(255, 255, 255, 0.05);
|
||||
border-radius: 8px;
|
||||
padding: 1.5rem;
|
||||
}
|
||||
|
||||
.metadata-editor-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 1rem;
|
||||
padding-bottom: 1rem;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.metadata-editor-header h2 {
|
||||
margin: 0;
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.metadata-editor-actions {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.metadata-editor-actions button.primary {
|
||||
background-color: #646cff;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.metadata-editor-actions button.primary:hover:not(:disabled) {
|
||||
background-color: #535bf2;
|
||||
}
|
||||
|
||||
.metadata-editor-actions .download-button {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
padding: 0.5rem 1rem;
|
||||
background-color: #28a745;
|
||||
color: white;
|
||||
border-radius: 4px;
|
||||
text-decoration: none;
|
||||
font-size: 0.9rem;
|
||||
font-weight: 500;
|
||||
transition: background-color 0.2s;
|
||||
}
|
||||
|
||||
.metadata-editor-actions .download-button:hover {
|
||||
background-color: #218838;
|
||||
}
|
||||
|
||||
.metadata-editor-message {
|
||||
padding: 1rem;
|
||||
border-radius: 4px;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.metadata-editor-message.success {
|
||||
background-color: rgba(0, 200, 0, 0.1);
|
||||
border: 1px solid rgba(0, 200, 0, 0.3);
|
||||
color: #00ff00;
|
||||
}
|
||||
|
||||
.metadata-editor-message.error {
|
||||
background-color: rgba(255, 0, 0, 0.1);
|
||||
border: 1px solid rgba(255, 0, 0, 0.3);
|
||||
color: #ff6b6b;
|
||||
}
|
||||
|
||||
.metadata-editor-hashes {
|
||||
margin-bottom: 1.5rem;
|
||||
padding: 1rem;
|
||||
background: rgba(0, 0, 0, 0.3);
|
||||
border-radius: 8px;
|
||||
border-left: 4px solid #888;
|
||||
}
|
||||
|
||||
.hashes-header {
|
||||
margin-bottom: 0.75rem;
|
||||
padding-bottom: 0.5rem;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.hashes-header h3 {
|
||||
margin: 0;
|
||||
font-size: 0.9rem;
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
|
||||
.hashes-grid {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.hash-value {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.15rem;
|
||||
}
|
||||
|
||||
.hash-value-primary {
|
||||
margin-bottom: 0.5rem;
|
||||
padding-bottom: 0.5rem;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.hash-value-primary .hash-label {
|
||||
color: #4ecdc4;
|
||||
}
|
||||
|
||||
.hash-value-primary .hash-code {
|
||||
color: #4ecdc4;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.hash-label {
|
||||
font-size: 0.75rem;
|
||||
color: rgba(255, 255, 255, 0.4);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.03em;
|
||||
}
|
||||
|
||||
.hash-code {
|
||||
font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', 'Courier New', monospace;
|
||||
font-size: 0.85rem;
|
||||
color: rgba(255, 255, 255, 0.6);
|
||||
word-break: break-all;
|
||||
cursor: pointer;
|
||||
transition: color 0.2s;
|
||||
}
|
||||
|
||||
.hash-code:hover {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
/* Plugin Chips */
|
||||
.metadata-editor-chips {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.5rem;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.plugin-chip {
|
||||
padding: 0.4rem 0.8rem;
|
||||
border-radius: 16px;
|
||||
font-size: 0.85rem;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
border: 2px solid var(--chip-color);
|
||||
color: var(--chip-color);
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.plugin-chip:hover {
|
||||
background-color: var(--chip-color);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.plugin-chip.active {
|
||||
color: white;
|
||||
}
|
||||
|
||||
/* Plugin Accordion */
|
||||
.plugin-accordion {
|
||||
margin-bottom: 0.5rem;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
background-color: rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.plugin-accordion-header {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 1rem 1.25rem;
|
||||
border: none;
|
||||
border-left: 4px solid #646cff;
|
||||
background-color: rgba(255, 255, 255, 0.05);
|
||||
color: inherit;
|
||||
font-size: 1rem;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.2s ease;
|
||||
}
|
||||
|
||||
.plugin-accordion-header:hover {
|
||||
background-color: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.plugin-accordion.expanded .plugin-accordion-header {
|
||||
background-color: rgba(255, 255, 255, 0.08);
|
||||
}
|
||||
|
||||
.plugin-accordion-title {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.plugin-accordion-icon {
|
||||
font-size: 0.75rem;
|
||||
opacity: 0.6;
|
||||
transition: transform 0.2s ease;
|
||||
}
|
||||
|
||||
.plugin-accordion-content {
|
||||
padding: 1rem 1.25rem;
|
||||
border-top: 1px solid rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.metadata-editor-form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.metadata-section {
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
border-left: 4px solid #646cff;
|
||||
border-radius: 8px;
|
||||
padding: 1.5rem;
|
||||
background-color: rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.metadata-section-header {
|
||||
margin-bottom: 1rem;
|
||||
padding-bottom: 0.75rem;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.metadata-section-header h3 {
|
||||
margin: 0 0 0.25rem 0;
|
||||
font-size: 1.1rem;
|
||||
color: #646cff;
|
||||
}
|
||||
|
||||
.plugin-description {
|
||||
margin: 0;
|
||||
font-size: 0.85rem;
|
||||
color: rgba(255, 255, 255, 0.5);
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.metadata-field {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.metadata-field:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.metadata-field label {
|
||||
font-size: 0.9rem;
|
||||
font-weight: 500;
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
}
|
||||
|
||||
.metadata-field input,
|
||||
.metadata-field textarea,
|
||||
.metadata-field select {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.metadata-field-row {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
||||
gap: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.metadata-field-row:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.hash-field {
|
||||
font-family: 'Courier New', monospace;
|
||||
font-size: 0.9em;
|
||||
}
|
||||
|
||||
.no-hash-info {
|
||||
margin: 0;
|
||||
padding: 1rem;
|
||||
text-align: center;
|
||||
color: rgba(255, 255, 255, 0.5);
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.metadata-editor-loading,
|
||||
.metadata-editor-error,
|
||||
.metadata-editor-empty {
|
||||
padding: 3rem;
|
||||
text-align: center;
|
||||
color: rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
|
||||
.metadata-editor-error button {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.metadata-editor-header {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.metadata-editor-actions {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.metadata-editor-actions button {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.metadata-field-row {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: light) {
|
||||
.metadata-editor {
|
||||
background-color: rgba(0, 0, 0, 0.02);
|
||||
}
|
||||
|
||||
.metadata-editor-header {
|
||||
border-bottom-color: rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.metadata-section {
|
||||
border-color: rgba(0, 0, 0, 0.1);
|
||||
background-color: rgba(0, 0, 0, 0.02);
|
||||
}
|
||||
|
||||
.metadata-section-header {
|
||||
border-bottom-color: rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.plugin-description {
|
||||
color: rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
.metadata-field label {
|
||||
color: rgba(0, 0, 0, 0.7);
|
||||
}
|
||||
|
||||
.metadata-editor-message.success {
|
||||
background-color: rgba(0, 200, 0, 0.1);
|
||||
border-color: rgba(0, 200, 0, 0.3);
|
||||
color: #008800;
|
||||
}
|
||||
|
||||
.metadata-editor-message.error {
|
||||
background-color: rgba(255, 0, 0, 0.1);
|
||||
border-color: rgba(255, 0, 0, 0.3);
|
||||
color: #cc0000;
|
||||
}
|
||||
|
||||
.metadata-editor-loading,
|
||||
.metadata-editor-error,
|
||||
.metadata-editor-empty {
|
||||
color: rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
.no-hash-info {
|
||||
color: rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
.metadata-editor-hashes {
|
||||
background: rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
.hashes-header {
|
||||
border-bottom-color: rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.hashes-header h3 {
|
||||
color: rgba(0, 0, 0, 0.7);
|
||||
}
|
||||
|
||||
.hash-value-primary {
|
||||
border-bottom-color: rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.hash-value-primary .hash-label,
|
||||
.hash-value-primary .hash-code {
|
||||
color: #0a9e94;
|
||||
}
|
||||
|
||||
.hash-label {
|
||||
color: rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
|
||||
.hash-code {
|
||||
color: rgba(0, 0, 0, 0.6);
|
||||
}
|
||||
|
||||
.hash-code:hover {
|
||||
color: #000;
|
||||
}
|
||||
|
||||
/* Plugin Chips - Light theme */
|
||||
.plugin-chip {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.plugin-chip:hover,
|
||||
.plugin-chip.active {
|
||||
color: white;
|
||||
}
|
||||
|
||||
/* Plugin Accordion - Light theme */
|
||||
.plugin-accordion {
|
||||
background-color: rgba(0, 0, 0, 0.02);
|
||||
}
|
||||
|
||||
.plugin-accordion-header {
|
||||
background-color: rgba(0, 0, 0, 0.03);
|
||||
}
|
||||
|
||||
.plugin-accordion-header:hover {
|
||||
background-color: rgba(0, 0, 0, 0.06);
|
||||
}
|
||||
|
||||
.plugin-accordion.expanded .plugin-accordion-header {
|
||||
background-color: rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
.plugin-accordion-content {
|
||||
border-top-color: rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
}
|
||||
@@ -1,392 +0,0 @@
|
||||
import { useState, useEffect } from 'react';
|
||||
import { FileMetadata, PluginSchema, PluginsResponse } from '../types';
|
||||
import { MetadataAPI } from '../api/metadataApi';
|
||||
import { DynamicPluginSection } from './DynamicPluginSection';
|
||||
import './MetadataEditor.css';
|
||||
|
||||
interface PluginAccordionProps {
|
||||
plugin: PluginSchema;
|
||||
metadata: FileMetadata;
|
||||
onChange: (field: string, value: any) => void;
|
||||
isExpanded: boolean;
|
||||
onToggle: () => void;
|
||||
}
|
||||
|
||||
function PluginAccordion({ plugin, metadata, onChange, isExpanded, onToggle }: PluginAccordionProps) {
|
||||
return (
|
||||
<div className={`plugin-accordion ${isExpanded ? 'expanded' : ''}`}>
|
||||
<button
|
||||
className="plugin-accordion-header"
|
||||
onClick={onToggle}
|
||||
style={{ borderLeftColor: plugin.color || '#646cff' }}
|
||||
>
|
||||
<span className="plugin-accordion-title">{plugin.name}</span>
|
||||
<span className="plugin-accordion-icon">{isExpanded ? '▼' : '▶'}</span>
|
||||
</button>
|
||||
{isExpanded && (
|
||||
<div className="plugin-accordion-content">
|
||||
<DynamicPluginSection
|
||||
plugin={plugin}
|
||||
metadata={metadata}
|
||||
onChange={onChange}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
interface MetadataEditorProps {
|
||||
hashId: string;
|
||||
onSaved?: () => void;
|
||||
}
|
||||
|
||||
export function MetadataEditor({ hashId, onSaved }: MetadataEditorProps) {
|
||||
const [metadata, setMetadata] = useState<FileMetadata | null>(null);
|
||||
const [editedMetadata, setEditedMetadata] = useState<FileMetadata | null>(null);
|
||||
const [plugins, setPlugins] = useState<PluginSchema[]>([]);
|
||||
const [isLoading, setIsLoading] = useState(true);
|
||||
const [isSaving, setIsSaving] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [successMessage, setSuccessMessage] = useState<string | null>(null);
|
||||
const [expandedPlugins, setExpandedPlugins] = useState<Set<string>>(new Set());
|
||||
|
||||
// Fetch plugins schema on mount
|
||||
useEffect(() => {
|
||||
fetchPlugins();
|
||||
}, []);
|
||||
|
||||
// Fetch metadata when hashId changes
|
||||
useEffect(() => {
|
||||
loadMetadata();
|
||||
}, [hashId]);
|
||||
|
||||
const fetchPlugins = async () => {
|
||||
try {
|
||||
const response = await fetch('/api/plugins');
|
||||
if (response.ok) {
|
||||
const data: PluginsResponse = await response.json();
|
||||
// Sort by priority (lower = higher priority)
|
||||
const sorted = [...data.plugins].sort((a, b) =>
|
||||
(a.priority ?? 100) - (b.priority ?? 100)
|
||||
);
|
||||
setPlugins(sorted);
|
||||
}
|
||||
} catch (err) {
|
||||
console.error('Failed to fetch plugin schemas:', err);
|
||||
}
|
||||
};
|
||||
|
||||
const loadMetadata = async () => {
|
||||
try {
|
||||
setIsLoading(true);
|
||||
setError(null);
|
||||
const data = await MetadataAPI.getMetadata(hashId);
|
||||
setMetadata(data);
|
||||
setEditedMetadata(data);
|
||||
} catch (err: any) {
|
||||
setError(err.message);
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleFieldChange = (field: string, value: any) => {
|
||||
if (!editedMetadata) return;
|
||||
|
||||
// Handle path-style keys like "stream/duration" or "nfo/title"
|
||||
const parts = field.split('/');
|
||||
|
||||
if (parts.length === 1) {
|
||||
// Simple key
|
||||
setEditedMetadata({
|
||||
...editedMetadata,
|
||||
[field]: value,
|
||||
});
|
||||
} else {
|
||||
// Nested key - need to update nested structure
|
||||
const newMetadata = { ...editedMetadata };
|
||||
let current: any = newMetadata;
|
||||
|
||||
for (let i = 0; i < parts.length - 1; i++) {
|
||||
if (!current[parts[i]]) {
|
||||
current[parts[i]] = {};
|
||||
} else {
|
||||
current[parts[i]] = { ...current[parts[i]] };
|
||||
}
|
||||
current = current[parts[i]];
|
||||
}
|
||||
|
||||
current[parts[parts.length - 1]] = value;
|
||||
setEditedMetadata(newMetadata);
|
||||
}
|
||||
};
|
||||
|
||||
const handleSave = async () => {
|
||||
if (!editedMetadata) return;
|
||||
|
||||
try {
|
||||
setIsSaving(true);
|
||||
setError(null);
|
||||
setSuccessMessage(null);
|
||||
|
||||
await MetadataAPI.updateMetadata(hashId, editedMetadata);
|
||||
setMetadata(editedMetadata);
|
||||
setSuccessMessage('Metadata saved successfully!');
|
||||
|
||||
if (onSaved) {
|
||||
onSaved();
|
||||
}
|
||||
|
||||
// Clear success message after 3 seconds
|
||||
setTimeout(() => setSuccessMessage(null), 3000);
|
||||
} catch (err: any) {
|
||||
setError(err.message);
|
||||
} finally {
|
||||
setIsSaving(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleReset = () => {
|
||||
setEditedMetadata(metadata);
|
||||
setError(null);
|
||||
setSuccessMessage(null);
|
||||
};
|
||||
|
||||
const togglePlugin = (pluginId: string) => {
|
||||
setExpandedPlugins(prev => {
|
||||
const next = new Set(prev);
|
||||
if (next.has(pluginId)) {
|
||||
next.delete(pluginId);
|
||||
} else {
|
||||
next.add(pluginId);
|
||||
}
|
||||
return next;
|
||||
});
|
||||
};
|
||||
|
||||
const scrollToPlugin = (pluginId: string) => {
|
||||
// Expand the plugin if not already expanded
|
||||
if (!expandedPlugins.has(pluginId)) {
|
||||
setExpandedPlugins(prev => new Set(prev).add(pluginId));
|
||||
}
|
||||
// Scroll to the plugin after a short delay to allow expansion
|
||||
setTimeout(() => {
|
||||
const element = document.getElementById(`plugin-${pluginId}`);
|
||||
if (element) {
|
||||
element.scrollIntoView({ behavior: 'smooth', block: 'start' });
|
||||
}
|
||||
}, 100);
|
||||
};
|
||||
|
||||
if (isLoading) {
|
||||
return <div className="metadata-editor-loading">Loading metadata...</div>;
|
||||
}
|
||||
|
||||
if (error && !metadata) {
|
||||
return (
|
||||
<div className="metadata-editor-error">
|
||||
<p>Error loading metadata: {error}</p>
|
||||
<button onClick={loadMetadata}>Retry</button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (!metadata || !editedMetadata) {
|
||||
return <div className="metadata-editor-empty">No metadata available</div>;
|
||||
}
|
||||
|
||||
const hasChanges = JSON.stringify(metadata) !== JSON.stringify(editedMetadata);
|
||||
|
||||
// Filter plugins that have data
|
||||
const pluginsWithData = plugins.filter(plugin => {
|
||||
if (!plugin.metadataSchema) return false;
|
||||
return hasPluginData(plugin, editedMetadata);
|
||||
});
|
||||
|
||||
// Get file path for download
|
||||
const filePath = editedMetadata?.filePath as string | undefined;
|
||||
const downloadUrl = filePath ? `/api/file/download?path=${encodeURIComponent(filePath)}` : null;
|
||||
|
||||
return (
|
||||
<div className="metadata-editor">
|
||||
<div className="metadata-editor-header">
|
||||
<h2>Edit Metadata</h2>
|
||||
<div className="metadata-editor-actions">
|
||||
{downloadUrl && (
|
||||
<a
|
||||
href={downloadUrl}
|
||||
className="download-button"
|
||||
title={`Download: ${filePath}`}
|
||||
download
|
||||
>
|
||||
⬇ Download
|
||||
</a>
|
||||
)}
|
||||
{hasChanges && (
|
||||
<button onClick={handleReset} disabled={isSaving}>
|
||||
Reset
|
||||
</button>
|
||||
)}
|
||||
<button
|
||||
onClick={handleSave}
|
||||
disabled={isSaving || !hasChanges}
|
||||
className="primary"
|
||||
>
|
||||
{isSaving ? 'Saving...' : 'Save Changes'}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{successMessage && (
|
||||
<div className="metadata-editor-message success">{successMessage}</div>
|
||||
)}
|
||||
{error && <div className="metadata-editor-message error">{error}</div>}
|
||||
|
||||
<div className="metadata-editor-hashes">
|
||||
<div className="hashes-header">
|
||||
<h3>Content Identifiers</h3>
|
||||
</div>
|
||||
<div className="hashes-grid">
|
||||
<HashValue label="midhash256" value={hashId} primary />
|
||||
{getHashValues(editedMetadata).map(({ key, label, value }) => (
|
||||
<HashValue key={key} label={label} value={value} />
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{pluginsWithData.length > 0 && (
|
||||
<div className="metadata-editor-chips">
|
||||
{pluginsWithData.map((plugin) => (
|
||||
<button
|
||||
key={plugin.id}
|
||||
className={`plugin-chip ${expandedPlugins.has(plugin.id) ? 'active' : ''}`}
|
||||
style={{
|
||||
'--chip-color': plugin.color || '#646cff',
|
||||
backgroundColor: expandedPlugins.has(plugin.id) ? plugin.color || '#646cff' : 'transparent'
|
||||
} as React.CSSProperties}
|
||||
onClick={() => scrollToPlugin(plugin.id)}
|
||||
>
|
||||
{plugin.name}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="metadata-editor-form">
|
||||
{pluginsWithData.length === 0 ? (
|
||||
<div className="metadata-editor-empty">
|
||||
No metadata found for this file
|
||||
</div>
|
||||
) : (
|
||||
pluginsWithData.map((plugin) => (
|
||||
<div key={plugin.id} id={`plugin-${plugin.id}`}>
|
||||
<PluginAccordion
|
||||
plugin={plugin}
|
||||
metadata={editedMetadata}
|
||||
onChange={handleFieldChange}
|
||||
isExpanded={expandedPlugins.has(plugin.id)}
|
||||
onToggle={() => togglePlugin(plugin.id)}
|
||||
/>
|
||||
</div>
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Check if a plugin has any data in the metadata
|
||||
*/
|
||||
function hasPluginData(plugin: PluginSchema, metadata: FileMetadata): boolean {
|
||||
const schema = plugin.metadataSchema;
|
||||
if (!schema) return false;
|
||||
|
||||
for (const fieldKey of Object.keys(schema)) {
|
||||
const fieldSchema = schema[fieldKey];
|
||||
|
||||
// For JSON type with pattern, check if any matching keys exist
|
||||
if (fieldSchema.type === 'json' && fieldSchema.pattern) {
|
||||
const patternPrefix = fieldSchema.pattern.replace(/\{n\}.*$/, '').replace(/\/$/, '');
|
||||
if (hasKeyWithPrefix(metadata, patternPrefix)) {
|
||||
return true;
|
||||
}
|
||||
continue;
|
||||
}
|
||||
|
||||
// For regular fields, check if value exists
|
||||
if (getNestedValue(metadata, fieldKey) !== undefined) {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
function getNestedValue(obj: any, path: string): any {
|
||||
const parts = path.split('/');
|
||||
let value = obj;
|
||||
for (const part of parts) {
|
||||
if (value === undefined || value === null) return undefined;
|
||||
value = value[part];
|
||||
}
|
||||
return value;
|
||||
}
|
||||
|
||||
function hasKeyWithPrefix(obj: any, prefix: string, currentPath: string = ''): boolean {
|
||||
if (!obj || typeof obj !== 'object') return false;
|
||||
|
||||
for (const key of Object.keys(obj)) {
|
||||
const newPath = currentPath ? `${currentPath}/${key}` : key;
|
||||
if (newPath.startsWith(prefix)) {
|
||||
return true;
|
||||
}
|
||||
if (typeof obj[key] === 'object' && obj[key] !== null) {
|
||||
if (hasKeyWithPrefix(obj[key], prefix, newPath)) {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
/**
|
||||
* Extract all hash values (cid_*) from metadata
|
||||
*/
|
||||
function getHashValues(metadata: FileMetadata): { key: string; label: string; value: string }[] {
|
||||
const hashOrder = [
|
||||
{ key: 'cid_sha2-256', label: 'SHA-256' },
|
||||
{ key: 'cid_sha3-256', label: 'SHA3-256' },
|
||||
{ key: 'cid_sha3-384', label: 'SHA3-384' },
|
||||
{ key: 'cid_sha1', label: 'SHA-1' },
|
||||
{ key: 'cid_md5', label: 'MD5' },
|
||||
{ key: 'cid_crc32', label: 'CRC32' },
|
||||
{ key: 'cid_btih_v2', label: 'BitTorrent v2' },
|
||||
];
|
||||
|
||||
return hashOrder
|
||||
.filter(({ key }) => (metadata as any)[key])
|
||||
.map(({ key, label }) => ({
|
||||
key,
|
||||
label,
|
||||
value: (metadata as any)[key],
|
||||
}));
|
||||
}
|
||||
|
||||
/**
|
||||
* Display a single hash value with copy functionality
|
||||
*/
|
||||
function HashValue({ label, value, primary }: { label: string; value: string; primary?: boolean }) {
|
||||
const handleCopy = () => {
|
||||
navigator.clipboard.writeText(value);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className={`hash-value ${primary ? 'hash-value-primary' : ''}`}>
|
||||
<span className="hash-label">{label}</span>
|
||||
<code className="hash-code" onClick={handleCopy} title="Click to copy">
|
||||
{value}
|
||||
</code>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,52 +0,0 @@
|
||||
.search-bar {
|
||||
width: 100%;
|
||||
padding: 1.5rem;
|
||||
background-color: rgba(255, 255, 255, 0.05);
|
||||
border-radius: 8px;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.search-controls {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
flex-wrap: wrap;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.search-input {
|
||||
flex: 1;
|
||||
min-width: 200px;
|
||||
}
|
||||
|
||||
.search-input.unified-search {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.search-bar button {
|
||||
flex: 0 0 auto;
|
||||
min-width: 100px;
|
||||
}
|
||||
|
||||
.search-hint {
|
||||
margin: 0;
|
||||
font-size: 0.85rem;
|
||||
color: rgba(255, 255, 255, 0.5);
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.search-controls {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.search-input,
|
||||
.search-bar button {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: light) {
|
||||
.search-hint {
|
||||
color: rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
}
|
||||
@@ -1,40 +0,0 @@
|
||||
import { useState } from 'react';
|
||||
import './SearchBar.css';
|
||||
|
||||
interface SearchBarProps {
|
||||
onSearch: (query: string) => void;
|
||||
isLoading: boolean;
|
||||
}
|
||||
|
||||
export function SearchBar({ onSearch, isLoading }: SearchBarProps) {
|
||||
const [query, setQuery] = useState('');
|
||||
|
||||
const handleSubmit = (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
if (query.trim()) {
|
||||
onSearch(query.trim());
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<form className="search-bar" onSubmit={handleSubmit}>
|
||||
<div className="search-controls">
|
||||
<input
|
||||
type="text"
|
||||
value={query}
|
||||
onChange={(e) => setQuery(e.target.value)}
|
||||
placeholder="Search by title, filename, filepath, or hash ID..."
|
||||
className="search-input unified-search"
|
||||
disabled={isLoading}
|
||||
/>
|
||||
|
||||
<button type="submit" disabled={isLoading || !query.trim()}>
|
||||
{isLoading ? 'Searching...' : 'Search'}
|
||||
</button>
|
||||
</div>
|
||||
<p className="search-hint">
|
||||
Search across all fields: title, filename, file path, and hash ID
|
||||
</p>
|
||||
</form>
|
||||
);
|
||||
}
|
||||
@@ -137,6 +137,26 @@
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.kv-tree-branch .kv-tree-filename {
|
||||
font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', 'Courier New', monospace;
|
||||
font-size: 0.85em;
|
||||
color: #1e3a8a;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.kv-tree-hash-pill {
|
||||
margin-left: 0.5rem;
|
||||
padding: 0.05rem 0.4rem;
|
||||
background: rgba(100, 108, 255, 0.12);
|
||||
color: #4a50c8;
|
||||
font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', 'Courier New', monospace;
|
||||
font-size: 0.7em;
|
||||
border-radius: 999px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.kv-tree-leaf .kv-tree-label {
|
||||
color: #4a5170;
|
||||
}
|
||||
@@ -251,6 +271,307 @@
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
/* ── CID leaf ─────────────────────────────────────────────────────────── */
|
||||
.kv-leaf-cid {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
}
|
||||
.kv-leaf-cid-controls {
|
||||
display: flex;
|
||||
gap: 6px;
|
||||
align-items: center;
|
||||
}
|
||||
.kv-leaf-cid-actions {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.kv-leaf-cid-meta {
|
||||
font-size: 12px;
|
||||
color: #6b7280;
|
||||
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
|
||||
}
|
||||
.kv-leaf-cid-preview {
|
||||
max-width: 100%;
|
||||
max-height: 320px;
|
||||
border-radius: 6px;
|
||||
border: 1px solid #e2e6ee;
|
||||
background: #f5f6fa;
|
||||
object-fit: contain;
|
||||
align-self: flex-start;
|
||||
}
|
||||
.kv-leaf-cid-preview-media {
|
||||
width: 100%;
|
||||
max-width: 560px;
|
||||
}
|
||||
|
||||
/* ── File-detail view ─────────────────────────────────────────────────── */
|
||||
.kv-file {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 14px;
|
||||
}
|
||||
.kv-file-header {
|
||||
padding: 14px 16px;
|
||||
background: #fff;
|
||||
border: 1px solid #e2e6ee;
|
||||
border-radius: 8px;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr auto;
|
||||
grid-template-areas:
|
||||
"name actions"
|
||||
"meta actions";
|
||||
gap: 6px 16px;
|
||||
align-items: center;
|
||||
}
|
||||
.kv-file-name {
|
||||
grid-area: name;
|
||||
font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', 'Courier New', monospace;
|
||||
font-weight: 600;
|
||||
font-size: 14px;
|
||||
color: #1e3a8a;
|
||||
word-break: break-all;
|
||||
}
|
||||
.kv-file-name-fallback {
|
||||
color: #9ca3af;
|
||||
font-style: italic;
|
||||
}
|
||||
.kv-file-meta {
|
||||
grid-area: meta;
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
align-items: baseline;
|
||||
font-size: 12px;
|
||||
color: #6b7280;
|
||||
min-width: 0;
|
||||
}
|
||||
.kv-file-hash {
|
||||
background: rgba(100, 122, 250, 0.1);
|
||||
color: #4a50c8;
|
||||
padding: 1px 6px;
|
||||
border-radius: 999px;
|
||||
font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', 'Courier New', monospace;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.kv-file-path {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', 'Courier New', monospace;
|
||||
font-size: 11px;
|
||||
}
|
||||
.kv-file-actions {
|
||||
grid-area: actions;
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.kv-file-rows {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
}
|
||||
.kv-file-row {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(140px, 220px) 1fr auto;
|
||||
gap: 12px;
|
||||
padding: 8px 12px;
|
||||
background: #fff;
|
||||
border: 1px solid #e2e6ee;
|
||||
border-left: 3px solid #d6deed;
|
||||
border-radius: 6px;
|
||||
align-items: start;
|
||||
}
|
||||
.kv-file-row.pending-delete {
|
||||
border-left-color: #dc2626;
|
||||
background: #fef2f2;
|
||||
}
|
||||
.kv-file-row.pending-delete .kv-file-row-label {
|
||||
text-decoration: line-through;
|
||||
color: #9ca3af;
|
||||
}
|
||||
.kv-file-row-deleted-note {
|
||||
color: #b91c1c;
|
||||
font-style: italic;
|
||||
font-size: 12px;
|
||||
padding: 6px 0;
|
||||
}
|
||||
.kv-file-row-delete {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
align-self: center;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: transparent;
|
||||
border: 1px solid transparent;
|
||||
border-radius: 4px;
|
||||
color: #dc2626;
|
||||
font-size: 16px;
|
||||
line-height: 1;
|
||||
cursor: pointer;
|
||||
opacity: 0.4;
|
||||
transition: opacity 0.15s, background 0.15s, border-color 0.15s;
|
||||
}
|
||||
.kv-file-row:hover .kv-file-row-delete,
|
||||
.kv-file-row.pending-delete .kv-file-row-delete {
|
||||
opacity: 1;
|
||||
}
|
||||
.kv-file-row-delete:hover {
|
||||
background: rgba(220, 38, 38, 0.1);
|
||||
border-color: rgba(220, 38, 38, 0.3);
|
||||
}
|
||||
|
||||
.kv-file-add {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
align-items: center;
|
||||
padding: 10px 12px;
|
||||
background: rgba(100, 122, 250, 0.05);
|
||||
border: 1px dashed rgba(100, 122, 250, 0.3);
|
||||
border-radius: 6px;
|
||||
}
|
||||
.kv-file-add-prefix {
|
||||
font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', 'Courier New', monospace;
|
||||
font-size: 11px;
|
||||
color: #6b7280;
|
||||
white-space: nowrap;
|
||||
flex-shrink: 0;
|
||||
max-width: 220px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.kv-file-add > input {
|
||||
flex: 1;
|
||||
}
|
||||
.kv-file-add > input:first-of-type {
|
||||
flex: 0 0 200px;
|
||||
}
|
||||
.kv-file-row.dirty {
|
||||
border-left-color: #fbbf24;
|
||||
background: #fffbeb;
|
||||
}
|
||||
.kv-file-row.pulsed {
|
||||
animation: kv-row-pulse 1.4s ease-out;
|
||||
}
|
||||
@keyframes kv-row-pulse {
|
||||
0% { background: rgba(100, 122, 250, 0.35); border-left-color: #4a50c8; }
|
||||
100% { background: transparent; }
|
||||
}
|
||||
.kv-file-row-label,
|
||||
.kv-file-row-label-static {
|
||||
font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', 'Courier New', monospace;
|
||||
font-size: 12px;
|
||||
color: #2a3050;
|
||||
background: none;
|
||||
border: none;
|
||||
text-align: left;
|
||||
cursor: pointer;
|
||||
padding: 6px 0;
|
||||
word-break: break-all;
|
||||
}
|
||||
.kv-file-row-label-static {
|
||||
cursor: default;
|
||||
}
|
||||
.kv-file-row-label:hover {
|
||||
color: #4a50c8;
|
||||
text-decoration: underline;
|
||||
}
|
||||
.kv-file-row-value {
|
||||
display: flex;
|
||||
min-width: 0;
|
||||
}
|
||||
.kv-file-row-value > * {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.kv-file-group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
border: 1px solid #e2e6ee;
|
||||
border-radius: 8px;
|
||||
background: rgba(100, 122, 250, 0.03);
|
||||
overflow: hidden;
|
||||
}
|
||||
.kv-file-group-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 6px 12px;
|
||||
border: none;
|
||||
background: rgba(100, 122, 250, 0.1);
|
||||
cursor: pointer;
|
||||
font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', 'Courier New', monospace;
|
||||
font-size: 12px;
|
||||
color: #2a3050;
|
||||
}
|
||||
.kv-file-group-header:hover {
|
||||
background: rgba(100, 122, 250, 0.2);
|
||||
}
|
||||
.kv-file-group-chevron {
|
||||
font-size: 10px;
|
||||
color: #6b7280;
|
||||
}
|
||||
.kv-file-group-name {
|
||||
font-weight: 600;
|
||||
color: #1e3a8a;
|
||||
}
|
||||
.kv-file-group-count {
|
||||
margin-left: auto;
|
||||
padding: 1px 8px;
|
||||
background: rgba(100, 122, 250, 0.2);
|
||||
color: #4a50c8;
|
||||
border-radius: 999px;
|
||||
font-size: 11px;
|
||||
}
|
||||
.kv-file-group-body {
|
||||
padding: 8px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.kv-file-row-lang .kv-file-lang-entries {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
}
|
||||
.kv-file-lang-entry {
|
||||
display: flex;
|
||||
gap: 6px;
|
||||
align-items: center;
|
||||
}
|
||||
.kv-file-lang-entry > .kv-leaf-input {
|
||||
flex: 1;
|
||||
}
|
||||
.kv-file-lang-remove {
|
||||
color: #dc2626;
|
||||
}
|
||||
.kv-file-lang-add {
|
||||
align-self: flex-start;
|
||||
background: rgba(100, 122, 250, 0.1);
|
||||
}
|
||||
|
||||
/* ── DateTime leaf ────────────────────────────────────────────────────── */
|
||||
.kv-leaf-datetime {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
align-items: center;
|
||||
}
|
||||
.kv-leaf-datetime-shape {
|
||||
font-size: 11px;
|
||||
color: #6b7280;
|
||||
background: rgba(100, 122, 250, 0.1);
|
||||
padding: 2px 6px;
|
||||
border-radius: 999px;
|
||||
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
/* ── Branch ───────────────────────────────────────────────────────────── */
|
||||
.kv-branch-section {
|
||||
border: 1px solid #e2e6ee;
|
||||
|
||||
+41
-4
@@ -4,6 +4,9 @@ import { ancestorBranches, KVTree } from './KVTree';
|
||||
import { FilteredKVTree } from './FilteredKVTree';
|
||||
import { KVLeafEditor } from './KVLeafEditor';
|
||||
import { KVBranchEditor } from './KVBranchEditor';
|
||||
import { KVFileEditor } from './KVFileEditor';
|
||||
|
||||
const FILE_BRANCH_RE = /^file:[^/]+\/$/;
|
||||
import { SearchFieldChips } from './SearchFieldChips';
|
||||
import { ToastStack, makeToast } from './Toast';
|
||||
import { ToastEntry } from './types';
|
||||
@@ -44,6 +47,28 @@ export default function KVApp() {
|
||||
const [reloadToken, setReloadToken] = useState(0);
|
||||
const [toasts, setToasts] = useState<ToastEntry[]>([]);
|
||||
const searchTimerRef = useRef<number | null>(null);
|
||||
// When the right pane is a file-detail view and the user clicks a leaf
|
||||
// under the same file branch in the tree, we route the click as a
|
||||
// scroll-anchor inside the file detail instead of a leaf-editor switch.
|
||||
// The token bumps each click so identical anchors still trigger a scroll.
|
||||
const [anchor, setAnchor] = useState<{ field: string; token: number } | null>(null);
|
||||
const isFileBranch = (p: string | null) => !!p && /^file:[^/]+\/$/.test(p);
|
||||
|
||||
const handleLeafClick = (key: string) => {
|
||||
if (isFileBranch(branchPath) && key.startsWith(branchPath!)) {
|
||||
setAnchor({ field: key.slice(branchPath!.length), token: (anchor?.token ?? 0) + 1 });
|
||||
return;
|
||||
}
|
||||
setSelectedKey(key);
|
||||
setBranchPath(null);
|
||||
setAnchor(null);
|
||||
};
|
||||
|
||||
const handleBranchClick = (path: string) => {
|
||||
setBranchPath(path);
|
||||
setSelectedKey(null);
|
||||
setAnchor(null);
|
||||
};
|
||||
|
||||
const pushToast = (t: ToastEntry) => setToasts((cur) => [...cur, t]);
|
||||
const dismissToast = (id: number) => setToasts((cur) => cur.filter((t) => t.id !== id));
|
||||
@@ -184,8 +209,8 @@ export default function KVApp() {
|
||||
searching={searching}
|
||||
selectedKey={selectedKey}
|
||||
expandedPaths={expandedPaths}
|
||||
onSelectLeaf={(k) => { setSelectedKey(k); setBranchPath(null); }}
|
||||
onSelectBranch={(p) => { setBranchPath(p); setSelectedKey(null); }}
|
||||
onSelectLeaf={handleLeafClick}
|
||||
onSelectBranch={handleBranchClick}
|
||||
onToggleBranch={(p, willOpen) => {
|
||||
setExpandedPaths((cur) => {
|
||||
const next = new Set(cur);
|
||||
@@ -199,8 +224,8 @@ export default function KVApp() {
|
||||
selectedKey={selectedKey}
|
||||
expandedPaths={expandedPaths}
|
||||
reloadToken={reloadToken}
|
||||
onSelectLeaf={(k) => { setSelectedKey(k); setBranchPath(null); }}
|
||||
onSelectBranch={(p) => { setBranchPath(p); setSelectedKey(null); }}
|
||||
onSelectLeaf={handleLeafClick}
|
||||
onSelectBranch={handleBranchClick}
|
||||
onToggleBranch={(p, willOpen) => {
|
||||
setExpandedPaths((cur) => {
|
||||
const next = new Set(cur);
|
||||
@@ -227,6 +252,18 @@ export default function KVApp() {
|
||||
}}
|
||||
onError={(msg) => pushToast(makeToast('error', msg))}
|
||||
/>
|
||||
) : branchPath && FILE_BRANCH_RE.test(branchPath) ? (
|
||||
<KVFileEditor
|
||||
key={branchPath}
|
||||
branchPath={branchPath}
|
||||
reloadToken={reloadToken}
|
||||
scrollToField={anchor}
|
||||
onChanged={(info, errors) => {
|
||||
pushToast(makeToast(errors && errors.length > 0 ? 'error' : 'success', info, errors));
|
||||
setReloadToken((n) => n + 1);
|
||||
}}
|
||||
onSelectLeaf={(k) => { setSelectedKey(k); setBranchPath(null); setAnchor(null); }}
|
||||
/>
|
||||
) : branchPath ? (
|
||||
<KVBranchEditor
|
||||
branchPath={branchPath}
|
||||
|
||||
@@ -0,0 +1,675 @@
|
||||
import { useEffect, useMemo, useRef, useState } from 'react';
|
||||
import { KVAPI } from '../api/kvApi';
|
||||
import { SchemaFieldInfo, useSchema } from '../api/schemaApi';
|
||||
import { LanguageCombobox, formatLanguageOption } from '../components/LanguageCombobox';
|
||||
import { LeafValueEditor } from './leafRenderers';
|
||||
import { schemaToFieldType } from './schemaLookup';
|
||||
import { detectType } from './typeHeuristics';
|
||||
import { FieldType } from './types';
|
||||
|
||||
interface Props {
|
||||
/** Branch path of a file, e.g. "file:<hash>/". */
|
||||
branchPath: string;
|
||||
reloadToken: number;
|
||||
onChanged: (info: string, errors?: string[]) => void;
|
||||
/** Navigate to a single leaf for the manual deep editor. */
|
||||
onSelectLeaf: (key: string) => void;
|
||||
/**
|
||||
* When set, scroll to and pulse the row matching this logical field path
|
||||
* (e.g. "releasedate", "plot", "stream/0"). The `token` lets the same field
|
||||
* fire a fresh scroll across consecutive clicks.
|
||||
*/
|
||||
scrollToField?: { field: string; token: number } | null;
|
||||
}
|
||||
|
||||
const LANG_CODE_RE = /^[a-z]{2,3}$/;
|
||||
|
||||
interface LeafRow {
|
||||
kind: 'leaf';
|
||||
fieldKey: string;
|
||||
value: string;
|
||||
fieldType: FieldType;
|
||||
info?: SchemaFieldInfo;
|
||||
}
|
||||
|
||||
interface LanguageRow {
|
||||
kind: 'language-group';
|
||||
fieldKey: string;
|
||||
/** Current language → text map. */
|
||||
languageMap: Record<string, string>;
|
||||
info?: SchemaFieldInfo;
|
||||
}
|
||||
|
||||
type Row = LeafRow | LanguageRow;
|
||||
|
||||
interface RowGroup {
|
||||
prefix: string;
|
||||
isCluster: boolean;
|
||||
rows: Row[];
|
||||
}
|
||||
|
||||
export function KVFileEditor({
|
||||
branchPath,
|
||||
reloadToken,
|
||||
onChanged,
|
||||
onSelectLeaf,
|
||||
scrollToField,
|
||||
}: Props) {
|
||||
const [metadata, setMetadata] = useState<Record<string, string> | null>(null);
|
||||
const [edits, setEdits] = useState<Map<string, string | null>>(new Map());
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [saving, setSaving] = useState(false);
|
||||
const [collapsedGroups, setCollapsedGroups] = useState<Set<string>>(new Set());
|
||||
const [pulse, setPulse] = useState<string | null>(null);
|
||||
const [newFieldKey, setNewFieldKey] = useState('');
|
||||
const [newFieldValue, setNewFieldValue] = useState('');
|
||||
const [addingField, setAddingField] = useState(false);
|
||||
// Track whether we've seeded collapsedGroups for the current branch; resets
|
||||
// when the branch changes so each file gets its defaults reapplied.
|
||||
const defaultsAppliedRef = useRef<string | null>(null);
|
||||
|
||||
const { schema } = useSchema();
|
||||
|
||||
// When the parent passes a target field, expand its prefix group (if any)
|
||||
// and scroll the row into view. We also briefly pulse the row to draw the
|
||||
// eye — the pulse is reset after the animation duration.
|
||||
useEffect(() => {
|
||||
if (!scrollToField) return;
|
||||
const { field } = scrollToField;
|
||||
const prefix = field.split('/', 1)[0];
|
||||
setCollapsedGroups((cur) => {
|
||||
if (!cur.has(prefix)) return cur;
|
||||
const next = new Set(cur);
|
||||
next.delete(prefix);
|
||||
return next;
|
||||
});
|
||||
requestAnimationFrame(() => {
|
||||
const el = document.querySelector(
|
||||
`[data-row-key="${cssEscape(field)}"]`,
|
||||
) as HTMLElement | null;
|
||||
if (el) {
|
||||
el.scrollIntoView({ behavior: 'smooth', block: 'center' });
|
||||
setPulse(field);
|
||||
window.setTimeout(() => setPulse((p) => (p === field ? null : p)), 1400);
|
||||
}
|
||||
});
|
||||
}, [scrollToField?.field, scrollToField?.token]);
|
||||
|
||||
const hashId = branchPath.slice('file:'.length, -1);
|
||||
|
||||
useEffect(() => {
|
||||
let cancelled = false;
|
||||
setLoading(true);
|
||||
KVAPI.treeAll(branchPath, '/', 5000)
|
||||
.then(async (resp) => {
|
||||
// resp.leaves = full keys under branchPath. Recursive descent: also
|
||||
// walk branch children (they're paths to sub-objects with their own
|
||||
// leaves, e.g. file:<h>/plot/ → plot/eng).
|
||||
const all: string[] = [...resp.leaves];
|
||||
const queue = [...resp.branches];
|
||||
while (queue.length > 0) {
|
||||
const next = queue.shift()!;
|
||||
try {
|
||||
const sub = await KVAPI.treeAll(next, '/', 5000);
|
||||
all.push(...sub.leaves);
|
||||
queue.push(...sub.branches);
|
||||
} catch {
|
||||
// Ignore failures on a sub-branch; show what we can.
|
||||
}
|
||||
}
|
||||
if (cancelled) return;
|
||||
// MGET-equivalent: parallel fetches with a small cap to avoid burst.
|
||||
const values = await Promise.all(
|
||||
all.map((k) => KVAPI.get(k).then((r) => [k, r.exists ? r.value : null] as const).catch(() => [k, null] as const)),
|
||||
);
|
||||
if (cancelled) return;
|
||||
const flat: Record<string, string> = {};
|
||||
for (const [k, v] of values) {
|
||||
if (v == null) continue;
|
||||
// Strip the branch prefix so keys are the logical field path
|
||||
// ("releasedate", "plot/eng", "stream/0").
|
||||
const fieldKey = k.slice(branchPath.length);
|
||||
if (fieldKey) flat[fieldKey] = v;
|
||||
}
|
||||
setMetadata(flat);
|
||||
setEdits(new Map());
|
||||
})
|
||||
.catch(() => {
|
||||
if (!cancelled) setMetadata({});
|
||||
})
|
||||
.finally(() => {
|
||||
if (!cancelled) setLoading(false);
|
||||
});
|
||||
return () => {
|
||||
cancelled = true;
|
||||
};
|
||||
}, [branchPath, reloadToken]);
|
||||
|
||||
const groups = useMemo(
|
||||
() => groupRows(buildRows(metadata ?? {}, schema)),
|
||||
[metadata, schema],
|
||||
);
|
||||
|
||||
// Default state: every cluster group (e.g. stream/*, cid_*) starts collapsed.
|
||||
// Reapplied when the user switches to a different file.
|
||||
useEffect(() => {
|
||||
if (groups.length === 0) return;
|
||||
if (defaultsAppliedRef.current === branchPath) return;
|
||||
defaultsAppliedRef.current = branchPath;
|
||||
setCollapsedGroups(new Set(groups.filter((g) => g.isCluster).map((g) => g.prefix)));
|
||||
}, [groups, branchPath]);
|
||||
|
||||
if (loading) {
|
||||
return <div className="kv-pane-status">loading file…</div>;
|
||||
}
|
||||
|
||||
if (!metadata) {
|
||||
return <div className="kv-pane-status">no data for {branchPath}</div>;
|
||||
}
|
||||
|
||||
const fileName = metadata['fileName'];
|
||||
const filePath = metadata['filePath'];
|
||||
|
||||
const onLeafChange = (fieldKey: string, value: string) => {
|
||||
setEdits((prev) => {
|
||||
const next = new Map(prev);
|
||||
const original = metadata[fieldKey] ?? null;
|
||||
if (value === original) next.delete(fieldKey);
|
||||
else next.set(fieldKey, value);
|
||||
return next;
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* Toggle a field's pending-delete state. Re-clicking restores; if the field
|
||||
* is brand-new (no original value) we just drop it from the edits map.
|
||||
*/
|
||||
const onLeafDeleteToggle = (fieldKey: string) => {
|
||||
setEdits((prev) => {
|
||||
const next = new Map(prev);
|
||||
if (next.get(fieldKey) === null) {
|
||||
// Currently pending delete → undo.
|
||||
next.delete(fieldKey);
|
||||
} else {
|
||||
next.set(fieldKey, null);
|
||||
}
|
||||
return next;
|
||||
});
|
||||
};
|
||||
|
||||
const handleAddField = async () => {
|
||||
const key = newFieldKey.trim();
|
||||
if (!key) return;
|
||||
const fullKey = branchPath + key;
|
||||
setAddingField(true);
|
||||
try {
|
||||
await KVAPI.put(fullKey, newFieldValue);
|
||||
setNewFieldKey('');
|
||||
setNewFieldValue('');
|
||||
onChanged(`Added ${fullKey}`);
|
||||
// Refetch this file so the new field appears in the row list.
|
||||
const r = await KVAPI.get(fullKey);
|
||||
if (r.exists) {
|
||||
setMetadata((cur) => ({ ...(cur ?? {}), [key]: r.value }));
|
||||
}
|
||||
} catch (e: any) {
|
||||
onChanged(`Failed to add ${fullKey}`, [e.message]);
|
||||
} finally {
|
||||
setAddingField(false);
|
||||
}
|
||||
};
|
||||
|
||||
const onLanguageGroupChange = (
|
||||
groupKey: string,
|
||||
nextMap: Record<string, string>,
|
||||
originalMap: Record<string, string>,
|
||||
) => {
|
||||
setEdits((prev) => {
|
||||
const next = new Map(prev);
|
||||
const allLangs = new Set([...Object.keys(originalMap), ...Object.keys(nextMap)]);
|
||||
for (const lang of allLangs) {
|
||||
const fieldKey = `${groupKey}/${lang}`;
|
||||
const orig = originalMap[lang] ?? null;
|
||||
const cur = nextMap[lang] ?? null;
|
||||
if (cur === orig) next.delete(fieldKey);
|
||||
else if (cur == null) next.set(fieldKey, null);
|
||||
else next.set(fieldKey, cur);
|
||||
}
|
||||
return next;
|
||||
});
|
||||
};
|
||||
|
||||
const handleSave = async () => {
|
||||
if (edits.size === 0) return;
|
||||
setSaving(true);
|
||||
const errors: string[] = [];
|
||||
for (const [fieldKey, newValue] of edits) {
|
||||
const fullKey = branchPath + fieldKey;
|
||||
try {
|
||||
if (newValue === null) await KVAPI.del(fullKey);
|
||||
else await KVAPI.put(fullKey, newValue);
|
||||
} catch (e: any) {
|
||||
errors.push(`${fieldKey}: ${e.message}`);
|
||||
}
|
||||
}
|
||||
setSaving(false);
|
||||
if (errors.length === 0) {
|
||||
onChanged(`Saved ${edits.size} field${edits.size === 1 ? '' : 's'} on ${fileName ?? hashId}`);
|
||||
} else {
|
||||
onChanged(
|
||||
`Saved with ${errors.length} failure(s) on ${fileName ?? hashId}`,
|
||||
errors,
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
const handleDiscard = () => setEdits(new Map());
|
||||
|
||||
const toggleGroup = (prefix: string) => {
|
||||
setCollapsedGroups((cur) => {
|
||||
const next = new Set(cur);
|
||||
if (next.has(prefix)) next.delete(prefix);
|
||||
else next.add(prefix);
|
||||
return next;
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="kv-file">
|
||||
<div className="kv-file-header">
|
||||
<div className="kv-file-name">
|
||||
{fileName ?? <span className="kv-file-name-fallback">(no fileName)</span>}
|
||||
</div>
|
||||
<div className="kv-file-meta">
|
||||
<code className="kv-file-hash" title={hashId}>
|
||||
{hashId.slice(0, 8)}…{hashId.slice(-6)}
|
||||
</code>
|
||||
{filePath && <span className="kv-file-path" title={filePath}>{filePath}</span>}
|
||||
</div>
|
||||
<div className="kv-file-actions">
|
||||
<button
|
||||
className="kv-btn kv-btn-primary"
|
||||
disabled={edits.size === 0 || saving}
|
||||
onClick={handleSave}
|
||||
>
|
||||
{saving ? 'saving…' : `Save (${edits.size})`}
|
||||
</button>
|
||||
<button
|
||||
className="kv-btn"
|
||||
disabled={edits.size === 0 || saving}
|
||||
onClick={handleDiscard}
|
||||
>
|
||||
Discard
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="kv-file-rows">
|
||||
{groups.length === 0 && (
|
||||
<div className="kv-pane-status">No data yet for this file.</div>
|
||||
)}
|
||||
{groups.map((g) => (
|
||||
<FieldGroupView
|
||||
key={g.prefix}
|
||||
group={g}
|
||||
edits={edits}
|
||||
collapsed={collapsedGroups.has(g.prefix)}
|
||||
pulse={pulse}
|
||||
onToggle={() => toggleGroup(g.prefix)}
|
||||
onLeafChange={onLeafChange}
|
||||
onLeafDeleteToggle={onLeafDeleteToggle}
|
||||
onLanguageChange={onLanguageGroupChange}
|
||||
onJumpToLeaf={(fieldKey) => onSelectLeaf(branchPath + fieldKey)}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="kv-file-add">
|
||||
<span className="kv-file-add-prefix">{branchPath}</span>
|
||||
<input
|
||||
type="text"
|
||||
className="kv-leaf-input kv-leaf-mono"
|
||||
placeholder="field path (may contain /)"
|
||||
value={newFieldKey}
|
||||
onChange={(e) => setNewFieldKey(e.target.value)}
|
||||
disabled={addingField}
|
||||
/>
|
||||
<input
|
||||
type="text"
|
||||
className="kv-leaf-input"
|
||||
placeholder="value"
|
||||
value={newFieldValue}
|
||||
onChange={(e) => setNewFieldValue(e.target.value)}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === 'Enter' && newFieldKey.trim()) handleAddField();
|
||||
}}
|
||||
disabled={addingField}
|
||||
/>
|
||||
<button
|
||||
className="kv-btn kv-btn-primary"
|
||||
disabled={!newFieldKey.trim() || addingField}
|
||||
onClick={handleAddField}
|
||||
>
|
||||
{addingField ? 'adding…' : '+ Add field'}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function FieldGroupView({
|
||||
group,
|
||||
edits,
|
||||
collapsed,
|
||||
pulse,
|
||||
onToggle,
|
||||
onLeafChange,
|
||||
onLeafDeleteToggle,
|
||||
onLanguageChange,
|
||||
onJumpToLeaf,
|
||||
}: {
|
||||
group: RowGroup;
|
||||
edits: Map<string, string | null>;
|
||||
collapsed: boolean;
|
||||
pulse: string | null;
|
||||
onToggle: () => void;
|
||||
onLeafChange: (fieldKey: string, value: string) => void;
|
||||
onLeafDeleteToggle: (fieldKey: string) => void;
|
||||
onLanguageChange: (
|
||||
groupKey: string,
|
||||
nextMap: Record<string, string>,
|
||||
originalMap: Record<string, string>,
|
||||
) => void;
|
||||
onJumpToLeaf: (fieldKey: string) => void;
|
||||
}) {
|
||||
if (!group.isCluster) {
|
||||
return (
|
||||
<>
|
||||
{group.rows.map((row) => (
|
||||
<RowView
|
||||
key={row.fieldKey}
|
||||
row={row}
|
||||
edits={edits}
|
||||
pulse={pulse}
|
||||
onLeafChange={onLeafChange}
|
||||
onLeafDeleteToggle={onLeafDeleteToggle}
|
||||
onLanguageChange={onLanguageChange}
|
||||
onJumpToLeaf={onJumpToLeaf}
|
||||
/>
|
||||
))}
|
||||
</>
|
||||
);
|
||||
}
|
||||
return (
|
||||
<div className={`kv-file-group ${collapsed ? 'collapsed' : ''}`}>
|
||||
<button
|
||||
type="button"
|
||||
className="kv-file-group-header"
|
||||
onClick={onToggle}
|
||||
title={collapsed ? 'expand' : 'collapse'}
|
||||
>
|
||||
<span className="kv-file-group-chevron">{collapsed ? '▸' : '▾'}</span>
|
||||
<span className="kv-file-group-name">{group.prefix}</span>
|
||||
<span className="kv-file-group-count">{group.rows.length}</span>
|
||||
</button>
|
||||
{!collapsed && (
|
||||
<div className="kv-file-group-body">
|
||||
{group.rows.map((row) => (
|
||||
<RowView
|
||||
key={row.fieldKey}
|
||||
row={row}
|
||||
edits={edits}
|
||||
pulse={pulse}
|
||||
onLeafChange={onLeafChange}
|
||||
onLeafDeleteToggle={onLeafDeleteToggle}
|
||||
onLanguageChange={onLanguageChange}
|
||||
onJumpToLeaf={onJumpToLeaf}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function RowView({
|
||||
row,
|
||||
edits,
|
||||
pulse,
|
||||
onLeafChange,
|
||||
onLeafDeleteToggle,
|
||||
onLanguageChange,
|
||||
onJumpToLeaf,
|
||||
}: {
|
||||
row: Row;
|
||||
edits: Map<string, string | null>;
|
||||
pulse: string | null;
|
||||
onLeafChange: (fieldKey: string, value: string) => void;
|
||||
onLeafDeleteToggle: (fieldKey: string) => void;
|
||||
onLanguageChange: (
|
||||
groupKey: string,
|
||||
nextMap: Record<string, string>,
|
||||
originalMap: Record<string, string>,
|
||||
) => void;
|
||||
onJumpToLeaf: (fieldKey: string) => void;
|
||||
}) {
|
||||
const pulsed = pulse === row.fieldKey;
|
||||
if (row.kind === 'leaf') {
|
||||
const pendingDelete = edits.get(row.fieldKey) === null;
|
||||
const draft = edits.has(row.fieldKey) ? (edits.get(row.fieldKey) ?? '') : row.value;
|
||||
const dirty = edits.has(row.fieldKey);
|
||||
return (
|
||||
<div
|
||||
className={`kv-file-row ${dirty ? 'dirty' : ''} ${pendingDelete ? 'pending-delete' : ''} ${pulsed ? 'pulsed' : ''}`}
|
||||
data-row-key={row.fieldKey}
|
||||
>
|
||||
<button
|
||||
type="button"
|
||||
className="kv-file-row-label"
|
||||
onClick={() => onJumpToLeaf(row.fieldKey)}
|
||||
title="open in single-leaf editor"
|
||||
>
|
||||
{row.fieldKey}
|
||||
</button>
|
||||
<div className="kv-file-row-value">
|
||||
{pendingDelete ? (
|
||||
<div className="kv-file-row-deleted-note">marked for deletion</div>
|
||||
) : (
|
||||
<LeafValueEditor
|
||||
type={row.fieldType}
|
||||
value={draft}
|
||||
onChange={(v) => onLeafChange(row.fieldKey, v)}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
className="kv-file-row-delete"
|
||||
onClick={() => onLeafDeleteToggle(row.fieldKey)}
|
||||
title={pendingDelete ? 'undo deletion' : 'delete this field'}
|
||||
aria-label={pendingDelete ? 'undo deletion' : 'delete this field'}
|
||||
>
|
||||
{pendingDelete ? '↺' : '×'}
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
return (
|
||||
<LanguageGroupRow
|
||||
row={row}
|
||||
edits={edits}
|
||||
pulsed={pulsed}
|
||||
onLanguageChange={onLanguageChange}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
function LanguageGroupRow({
|
||||
row,
|
||||
edits,
|
||||
pulsed,
|
||||
onLanguageChange,
|
||||
}: {
|
||||
row: LanguageRow;
|
||||
edits: Map<string, string | null>;
|
||||
pulsed: boolean;
|
||||
onLanguageChange: (
|
||||
groupKey: string,
|
||||
nextMap: Record<string, string>,
|
||||
originalMap: Record<string, string>,
|
||||
) => void;
|
||||
}) {
|
||||
// Apply pending edits on top of the original language map.
|
||||
const effectiveMap: Record<string, string> = { ...row.languageMap };
|
||||
for (const [k, v] of edits) {
|
||||
if (!k.startsWith(`${row.fieldKey}/`)) continue;
|
||||
const lang = k.slice(row.fieldKey.length + 1);
|
||||
if (v === null) delete effectiveMap[lang];
|
||||
else effectiveMap[lang] = v;
|
||||
}
|
||||
|
||||
const entries = Object.entries(effectiveMap);
|
||||
const dirty = [...edits.keys()].some((k) => k.startsWith(`${row.fieldKey}/`));
|
||||
|
||||
const updateLang = (lang: string, text: string) => {
|
||||
onLanguageChange(row.fieldKey, { ...effectiveMap, [lang]: text }, row.languageMap);
|
||||
};
|
||||
|
||||
const renameLang = (oldLang: string, newLang: string) => {
|
||||
if (oldLang === newLang) return;
|
||||
const next = { ...effectiveMap };
|
||||
const text = next[oldLang];
|
||||
delete next[oldLang];
|
||||
next[newLang] = text;
|
||||
onLanguageChange(row.fieldKey, next, row.languageMap);
|
||||
};
|
||||
|
||||
const removeLang = (lang: string) => {
|
||||
const next = { ...effectiveMap };
|
||||
delete next[lang];
|
||||
onLanguageChange(row.fieldKey, next, row.languageMap);
|
||||
};
|
||||
|
||||
const addLang = () => {
|
||||
const used = new Set(entries.map(([k]) => k));
|
||||
const defaults = ['eng', 'jpn', 'zho', 'kor', 'fra', 'deu', 'spa', 'fre'];
|
||||
const defaultLang = defaults.find((l) => !used.has(l)) || 'eng';
|
||||
onLanguageChange(row.fieldKey, { ...effectiveMap, [defaultLang]: '' }, row.languageMap);
|
||||
};
|
||||
|
||||
return (
|
||||
<div
|
||||
className={`kv-file-row kv-file-row-lang ${dirty ? 'dirty' : ''} ${pulsed ? 'pulsed' : ''}`}
|
||||
data-row-key={row.fieldKey}
|
||||
>
|
||||
<div className="kv-file-row-label-static">{row.fieldKey}</div>
|
||||
<div className="kv-file-row-value">
|
||||
<div className="kv-file-lang-entries">
|
||||
{entries.map(([lang, text]) => (
|
||||
<div key={lang} className="kv-file-lang-entry">
|
||||
<LanguageCombobox
|
||||
value={lang}
|
||||
onChange={(newLang) => renameLang(lang, newLang)}
|
||||
/>
|
||||
<input
|
||||
type="text"
|
||||
className="kv-leaf-input"
|
||||
value={text}
|
||||
title={formatLanguageOption(lang)}
|
||||
onChange={(e) => updateLang(lang, e.target.value)}
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
className="kv-btn-icon kv-file-lang-remove"
|
||||
onClick={() => removeLang(lang)}
|
||||
title="remove this language"
|
||||
>
|
||||
×
|
||||
</button>
|
||||
</div>
|
||||
))}
|
||||
<button
|
||||
type="button"
|
||||
className="kv-btn kv-file-lang-add"
|
||||
onClick={addLang}
|
||||
>
|
||||
+ Add language
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// ──────────────────────────────────────────────────────────────────────────
|
||||
// Row model — kept local because it's only used here and is small.
|
||||
// ──────────────────────────────────────────────────────────────────────────
|
||||
|
||||
function buildRows(
|
||||
flat: Record<string, string>,
|
||||
schema: ReturnType<typeof useSchema>['schema'],
|
||||
): Row[] {
|
||||
const languageGroupKeys = new Set<string>();
|
||||
if (schema) {
|
||||
for (const [k, info] of Object.entries(schema.fields)) {
|
||||
if (info.key_hint === 'language-code') languageGroupKeys.add(k);
|
||||
}
|
||||
}
|
||||
|
||||
const langMaps: Record<string, Record<string, string>> = {};
|
||||
const rows: Row[] = [];
|
||||
|
||||
for (const [key, value] of Object.entries(flat)) {
|
||||
const slash = key.lastIndexOf('/');
|
||||
if (slash > 0) {
|
||||
const prefix = key.slice(0, slash);
|
||||
const tail = key.slice(slash + 1);
|
||||
if (languageGroupKeys.has(prefix) && LANG_CODE_RE.test(tail)) {
|
||||
if (!langMaps[prefix]) langMaps[prefix] = {};
|
||||
langMaps[prefix][tail] = value;
|
||||
continue;
|
||||
}
|
||||
}
|
||||
const info = schema?.fields[key];
|
||||
rows.push({
|
||||
kind: 'leaf',
|
||||
fieldKey: key,
|
||||
value,
|
||||
// Schema decides when it can; otherwise heuristic on (path, value).
|
||||
fieldType: schemaToFieldType(info) ?? detectType(key, value),
|
||||
info,
|
||||
});
|
||||
}
|
||||
|
||||
for (const [groupKey, langMap] of Object.entries(langMaps)) {
|
||||
rows.push({
|
||||
kind: 'language-group',
|
||||
fieldKey: groupKey,
|
||||
languageMap: langMap,
|
||||
info: schema?.fields[groupKey],
|
||||
});
|
||||
}
|
||||
|
||||
rows.sort((a, b) => a.fieldKey.localeCompare(b.fieldKey));
|
||||
return rows;
|
||||
}
|
||||
|
||||
/** Escape characters that would break a CSS attribute selector value. */
|
||||
function cssEscape(s: string): string {
|
||||
return s.replace(/["\\]/g, (c) => `\\${c}`);
|
||||
}
|
||||
|
||||
function groupRows(rows: Row[]): RowGroup[] {
|
||||
const out: RowGroup[] = [];
|
||||
for (const row of rows) {
|
||||
const prefix = row.fieldKey.split('/', 1)[0];
|
||||
const last = out[out.length - 1];
|
||||
if (last && last.prefix === prefix) {
|
||||
last.rows.push(row);
|
||||
} else {
|
||||
out.push({ prefix, isCluster: false, rows: [row] });
|
||||
}
|
||||
}
|
||||
for (const g of out) g.isCluster = g.rows.length > 1;
|
||||
return out;
|
||||
}
|
||||
+11
-108
@@ -1,7 +1,9 @@
|
||||
import { useEffect, useState } from 'react';
|
||||
import { KVAPI } from '../api/kvApi';
|
||||
import { LanguageCombobox } from '../components/LanguageCombobox';
|
||||
import { useSchema } from '../api/schemaApi';
|
||||
import { ALL_TYPES, describeType, detectType } from './typeHeuristics';
|
||||
import { lookupSchemaForKey } from './schemaLookup';
|
||||
import { LeafValueEditor } from './leafRenderers';
|
||||
import { FieldType } from './types';
|
||||
|
||||
interface Props {
|
||||
@@ -22,9 +24,12 @@ export function KVLeafEditor({ selectedKey, reloadToken, onSaved, onDeleted, onE
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [saving, setSaving] = useState(false);
|
||||
|
||||
// Manual override for the inferred type. "auto" defers to detectType.
|
||||
// Manual override for the inferred type. "auto" defers to schema → heuristic.
|
||||
const [typeOverride, setTypeOverride] = useState<FieldType>('auto');
|
||||
const detected = detectType(selectedKey, original);
|
||||
const { schema } = useSchema();
|
||||
const schemaLookup = lookupSchemaForKey(schema, selectedKey);
|
||||
// Schema is authoritative when it has an opinion; heuristics fill the gap.
|
||||
const detected = schemaLookup.fieldType ?? detectType(selectedKey, original);
|
||||
const effectiveType = typeOverride === 'auto' ? detected : typeOverride;
|
||||
|
||||
// Reset override when the selected key changes — the previous override
|
||||
@@ -113,7 +118,7 @@ export function KVLeafEditor({ selectedKey, reloadToken, onSaved, onDeleted, onE
|
||||
{!exists && <span className="kv-leaf-hint">new key — save to create</span>}
|
||||
</div>
|
||||
|
||||
<ValueEditor type={effectiveType} value={draft} onChange={setDraft} />
|
||||
<LeafValueEditor type={effectiveType} value={draft} onChange={setDraft} />
|
||||
|
||||
<div className="kv-leaf-actions">
|
||||
<button
|
||||
@@ -151,107 +156,5 @@ function KeyHeader({ keyPath }: { keyPath: string }) {
|
||||
);
|
||||
}
|
||||
|
||||
interface ValueProps {
|
||||
type: FieldType;
|
||||
value: string;
|
||||
onChange: (v: string) => void;
|
||||
}
|
||||
|
||||
function ValueEditor({ type, value, onChange }: ValueProps) {
|
||||
switch (type) {
|
||||
case 'bool':
|
||||
return (
|
||||
<select
|
||||
className="kv-leaf-input"
|
||||
value={value === 'true' ? 'true' : value === 'false' ? 'false' : ''}
|
||||
onChange={(e) => onChange(e.target.value)}
|
||||
>
|
||||
<option value="">(unset)</option>
|
||||
<option value="true">true</option>
|
||||
<option value="false">false</option>
|
||||
</select>
|
||||
);
|
||||
case 'number':
|
||||
return (
|
||||
<input
|
||||
type="number"
|
||||
className="kv-leaf-input"
|
||||
value={value}
|
||||
onChange={(e) => onChange(e.target.value)}
|
||||
/>
|
||||
);
|
||||
case 'datetime':
|
||||
return (
|
||||
<input
|
||||
type="datetime-local"
|
||||
className="kv-leaf-input"
|
||||
value={value}
|
||||
onChange={(e) => onChange(e.target.value)}
|
||||
/>
|
||||
);
|
||||
case 'lang':
|
||||
return (
|
||||
<LanguageCombobox value={value} onChange={onChange} />
|
||||
);
|
||||
case 'url':
|
||||
return (
|
||||
<div className="kv-leaf-url">
|
||||
<input
|
||||
type="url"
|
||||
className="kv-leaf-input"
|
||||
value={value}
|
||||
onChange={(e) => onChange(e.target.value)}
|
||||
/>
|
||||
{value && (
|
||||
<a className="kv-leaf-url-open" href={value} target="_blank" rel="noreferrer">open ↗</a>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
case 'json':
|
||||
return (
|
||||
<textarea
|
||||
className="kv-leaf-textarea kv-leaf-mono"
|
||||
rows={12}
|
||||
value={value}
|
||||
onChange={(e) => onChange(e.target.value)}
|
||||
spellCheck={false}
|
||||
/>
|
||||
);
|
||||
case 'text':
|
||||
return (
|
||||
<textarea
|
||||
className="kv-leaf-textarea"
|
||||
rows={8}
|
||||
value={value}
|
||||
onChange={(e) => onChange(e.target.value)}
|
||||
/>
|
||||
);
|
||||
case 'hash':
|
||||
return (
|
||||
<div className="kv-leaf-url">
|
||||
<input
|
||||
type="text"
|
||||
className="kv-leaf-input kv-leaf-mono"
|
||||
value={value}
|
||||
onChange={(e) => onChange(e.target.value)}
|
||||
spellCheck={false}
|
||||
/>
|
||||
<button
|
||||
className="kv-btn-icon"
|
||||
onClick={() => navigator.clipboard.writeText(value)}
|
||||
title="copy"
|
||||
>⧉</button>
|
||||
</div>
|
||||
);
|
||||
case 'string':
|
||||
default:
|
||||
return (
|
||||
<input
|
||||
type="text"
|
||||
className="kv-leaf-input"
|
||||
value={value}
|
||||
onChange={(e) => onChange(e.target.value)}
|
||||
/>
|
||||
);
|
||||
}
|
||||
}
|
||||
// Leaf value rendering moved to leafRenderers.tsx (LeafValueEditor)
|
||||
// so the file-detail view can reuse it per row.
|
||||
|
||||
+90
-18
@@ -1,6 +1,57 @@
|
||||
import { useEffect, useMemo, useState } from 'react';
|
||||
import { useEffect, useState } from 'react';
|
||||
import { KVAPI } from '../api/kvApi';
|
||||
|
||||
const FILE_BRANCH_RE = /^file:[^/]+\/$/;
|
||||
const fileNameCache = new Map<string, string | null>();
|
||||
const fileNamePromises = new Map<string, Promise<void>>();
|
||||
const fileNameSubscribers = new Set<() => void>();
|
||||
|
||||
function notifyFileNameSubscribers() {
|
||||
for (const cb of fileNameSubscribers) cb();
|
||||
}
|
||||
|
||||
function ensureFileName(branchPath: string): void {
|
||||
if (fileNameCache.has(branchPath) || fileNamePromises.has(branchPath)) return;
|
||||
const p = KVAPI.get(branchPath + 'fileName')
|
||||
.then((r) => {
|
||||
fileNameCache.set(branchPath, r.exists && r.value ? r.value : null);
|
||||
})
|
||||
.catch(() => {
|
||||
fileNameCache.set(branchPath, null);
|
||||
})
|
||||
.finally(() => {
|
||||
fileNamePromises.delete(branchPath);
|
||||
notifyFileNameSubscribers();
|
||||
});
|
||||
fileNamePromises.set(branchPath, p);
|
||||
}
|
||||
|
||||
function useFileName(branchPath: string | null): string | null {
|
||||
const [, force] = useState(0);
|
||||
useEffect(() => {
|
||||
if (!branchPath || !FILE_BRANCH_RE.test(branchPath)) return;
|
||||
ensureFileName(branchPath);
|
||||
const cb = () => force((n) => n + 1);
|
||||
fileNameSubscribers.add(cb);
|
||||
return () => {
|
||||
fileNameSubscribers.delete(cb);
|
||||
};
|
||||
}, [branchPath]);
|
||||
if (!branchPath || !FILE_BRANCH_RE.test(branchPath)) return null;
|
||||
return fileNameCache.get(branchPath) ?? null;
|
||||
}
|
||||
|
||||
function isFileBranch(path: string): boolean {
|
||||
return FILE_BRANCH_RE.test(path);
|
||||
}
|
||||
|
||||
function shortHashFromFileBranch(path: string): string {
|
||||
// path = "file:<hash>/" → last 6 chars of hash
|
||||
const hash = path.slice('file:'.length, -1);
|
||||
if (hash.length <= 12) return hash;
|
||||
return `…${hash.slice(-6)}`;
|
||||
}
|
||||
|
||||
// A node in the lazy tree. branch-typed nodes have an associated path that
|
||||
// ends with the delimiter and lazy-load their children on first expand.
|
||||
type NodeKind = 'branch' | 'leaf';
|
||||
@@ -174,17 +225,15 @@ function Branch({
|
||||
const childState = branches[node.path];
|
||||
return (
|
||||
<li key={node.path}>
|
||||
<div
|
||||
className={`kv-tree-row kv-tree-branch${open ? ' open' : ''}`}
|
||||
style={{ paddingLeft: depth * 14 + 4 }}
|
||||
onClick={() => {
|
||||
<BranchRow
|
||||
node={node}
|
||||
open={open}
|
||||
depth={depth}
|
||||
onToggle={() => {
|
||||
onToggleBranch(node.path, !open);
|
||||
onSelectBranch(node.path);
|
||||
}}
|
||||
>
|
||||
<span className="kv-tree-toggle">{open ? '▾' : '▸'}</span>
|
||||
<span className="kv-tree-label">{node.label}</span>
|
||||
</div>
|
||||
/>
|
||||
{open && (
|
||||
<Branch
|
||||
path={node.path}
|
||||
@@ -219,6 +268,38 @@ function Branch({
|
||||
);
|
||||
}
|
||||
|
||||
interface BranchRowProps {
|
||||
node: TreeNode;
|
||||
open: boolean;
|
||||
depth: number;
|
||||
onToggle: () => void;
|
||||
}
|
||||
|
||||
function BranchRow({ node, open, depth, onToggle }: BranchRowProps) {
|
||||
// Surface the actual filename next to file:<hash>/ branches so the tree
|
||||
// reads like a file list at that level instead of a wall of hashes.
|
||||
const fileName = useFileName(isFileBranch(node.path) ? node.path : null);
|
||||
|
||||
return (
|
||||
<div
|
||||
className={`kv-tree-row kv-tree-branch${open ? ' open' : ''}`}
|
||||
style={{ paddingLeft: depth * 14 + 4 }}
|
||||
onClick={onToggle}
|
||||
title={isFileBranch(node.path) ? node.path : undefined}
|
||||
>
|
||||
<span className="kv-tree-toggle">{open ? '▾' : '▸'}</span>
|
||||
{fileName ? (
|
||||
<>
|
||||
<span className="kv-tree-label kv-tree-filename">{fileName}</span>
|
||||
<span className="kv-tree-hash-pill">{shortHashFromFileBranch(node.path)}</span>
|
||||
</>
|
||||
) : (
|
||||
<span className="kv-tree-label">{node.label}</span>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// Helper: given a key path with both ":" and "/" separators, return the list
|
||||
// of ancestor branch paths that need to be expanded to reveal it.
|
||||
export function ancestorBranches(key: string): string[] {
|
||||
@@ -242,14 +323,5 @@ function nextSep(s: string, from: number): number {
|
||||
return best;
|
||||
}
|
||||
|
||||
// Memoize the ancestor calculation across renders (used by the search-hit
|
||||
// auto-expand).
|
||||
export function useAncestorBranches(key: string | null): Set<string> {
|
||||
return useMemo(() => {
|
||||
if (!key) return new Set();
|
||||
return new Set(ancestorBranches(key));
|
||||
}, [key]);
|
||||
}
|
||||
|
||||
// Re-export for convenience in the shell
|
||||
export type { TreeNode };
|
||||
|
||||
@@ -0,0 +1,295 @@
|
||||
import { useEffect, useState } from 'react';
|
||||
import { LanguageCombobox } from '../components/LanguageCombobox';
|
||||
import { FieldType } from './types';
|
||||
|
||||
interface ValueRendererProps {
|
||||
value: string;
|
||||
onChange: (v: string) => void;
|
||||
}
|
||||
|
||||
interface LeafValueEditorProps extends ValueRendererProps {
|
||||
type: FieldType;
|
||||
}
|
||||
|
||||
/**
|
||||
* Type-dispatched leaf value editor. Used by both the single-leaf editor
|
||||
* (KVLeafEditor) and the per-row editor in the file-detail view.
|
||||
*/
|
||||
export function LeafValueEditor({ type, value, onChange }: LeafValueEditorProps) {
|
||||
switch (type) {
|
||||
case 'bool':
|
||||
return (
|
||||
<select
|
||||
className="kv-leaf-input"
|
||||
value={value === 'true' ? 'true' : value === 'false' ? 'false' : ''}
|
||||
onChange={(e) => onChange(e.target.value)}
|
||||
>
|
||||
<option value="">(unset)</option>
|
||||
<option value="true">true</option>
|
||||
<option value="false">false</option>
|
||||
</select>
|
||||
);
|
||||
case 'number':
|
||||
return (
|
||||
<input
|
||||
type="number"
|
||||
className="kv-leaf-input"
|
||||
value={value}
|
||||
onChange={(e) => onChange(e.target.value)}
|
||||
/>
|
||||
);
|
||||
case 'datetime':
|
||||
return <DateTimeLeaf value={value} onChange={onChange} />;
|
||||
case 'lang':
|
||||
return <LanguageCombobox value={value} onChange={onChange} />;
|
||||
case 'url':
|
||||
return (
|
||||
<div className="kv-leaf-url">
|
||||
<input
|
||||
type="url"
|
||||
className="kv-leaf-input"
|
||||
value={value}
|
||||
onChange={(e) => onChange(e.target.value)}
|
||||
/>
|
||||
{value && (
|
||||
<a className="kv-leaf-url-open" href={value} target="_blank" rel="noreferrer">
|
||||
open ↗
|
||||
</a>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
case 'json':
|
||||
return (
|
||||
<textarea
|
||||
className="kv-leaf-textarea kv-leaf-mono"
|
||||
rows={12}
|
||||
value={value}
|
||||
onChange={(e) => onChange(e.target.value)}
|
||||
spellCheck={false}
|
||||
/>
|
||||
);
|
||||
case 'text':
|
||||
return (
|
||||
<textarea
|
||||
className="kv-leaf-textarea"
|
||||
rows={8}
|
||||
value={value}
|
||||
onChange={(e) => onChange(e.target.value)}
|
||||
/>
|
||||
);
|
||||
case 'hash':
|
||||
return <CidLeaf value={value} onChange={onChange} />;
|
||||
case 'auto':
|
||||
case 'string':
|
||||
default:
|
||||
return (
|
||||
<input
|
||||
type="text"
|
||||
className="kv-leaf-input"
|
||||
value={value}
|
||||
onChange={(e) => onChange(e.target.value)}
|
||||
/>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
interface CidFileInfo {
|
||||
exists: boolean;
|
||||
contentType?: string;
|
||||
size?: number;
|
||||
filePath?: string;
|
||||
}
|
||||
|
||||
/**
|
||||
* CID leaf editor. Shows the value as an editable monospace input plus a
|
||||
* content-typed preview when meta-core can resolve the CID to a file on disk
|
||||
* (`/api/file/{cid}/info` → image/video/audio rendering, else download-only).
|
||||
*/
|
||||
function CidLeaf({ value, onChange }: ValueRendererProps) {
|
||||
const [info, setInfo] = useState<CidFileInfo | null>(null);
|
||||
const cid = value.trim();
|
||||
const fileUrl = cid ? `/file/${cid}` : '';
|
||||
const downloadName = info?.filePath?.split('/').pop() || cid;
|
||||
|
||||
useEffect(() => {
|
||||
if (!cid) {
|
||||
setInfo(null);
|
||||
return;
|
||||
}
|
||||
let alive = true;
|
||||
fetch(`/api/file/${cid}/info`)
|
||||
.then((r) => (r.ok ? r.json() : { exists: false }))
|
||||
.then((data: CidFileInfo) => {
|
||||
if (alive) setInfo(data);
|
||||
})
|
||||
.catch(() => {
|
||||
if (alive) setInfo({ exists: false });
|
||||
});
|
||||
return () => {
|
||||
alive = false;
|
||||
};
|
||||
}, [cid]);
|
||||
|
||||
const renderPreview = () => {
|
||||
if (!info?.exists || !info.contentType || !cid) return null;
|
||||
if (info.contentType.startsWith('image/')) {
|
||||
return <img src={fileUrl} alt="" className="kv-leaf-cid-preview" loading="lazy" />;
|
||||
}
|
||||
if (info.contentType.startsWith('video/')) {
|
||||
return (
|
||||
<video
|
||||
src={fileUrl}
|
||||
className="kv-leaf-cid-preview kv-leaf-cid-preview-media"
|
||||
controls
|
||||
preload="metadata"
|
||||
/>
|
||||
);
|
||||
}
|
||||
if (info.contentType.startsWith('audio/')) {
|
||||
return (
|
||||
<audio
|
||||
src={fileUrl}
|
||||
className="kv-leaf-cid-preview-media"
|
||||
controls
|
||||
preload="metadata"
|
||||
/>
|
||||
);
|
||||
}
|
||||
return null;
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="kv-leaf-cid">
|
||||
{renderPreview()}
|
||||
<div className="kv-leaf-cid-controls">
|
||||
<input
|
||||
type="text"
|
||||
className="kv-leaf-input kv-leaf-mono"
|
||||
value={value}
|
||||
onChange={(e) => onChange(e.target.value)}
|
||||
spellCheck={false}
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
className="kv-btn-icon"
|
||||
onClick={() => navigator.clipboard.writeText(value)}
|
||||
title="copy CID"
|
||||
>
|
||||
⧉
|
||||
</button>
|
||||
</div>
|
||||
{info?.exists && cid && (
|
||||
<div className="kv-leaf-cid-actions">
|
||||
<a
|
||||
href={fileUrl}
|
||||
download={downloadName}
|
||||
className="kv-btn kv-btn-primary"
|
||||
title={`Download ${downloadName}${info.size ? ` (${formatBytes(info.size)})` : ''}`}
|
||||
>
|
||||
⬇ Download
|
||||
</a>
|
||||
<a href={fileUrl} className="kv-btn" target="_blank" rel="noreferrer">
|
||||
open ↗
|
||||
</a>
|
||||
<span className="kv-leaf-cid-meta">
|
||||
{info.contentType}
|
||||
{info.size != null ? ` · ${formatBytes(info.size)}` : ''}
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
/** Timestamp shapes we round-trip through the picker. */
|
||||
type TimestampShape = 'iso-date' | 'iso-datetime' | 'unix-s' | 'unix-ms';
|
||||
|
||||
function detectShape(raw: string): TimestampShape | null {
|
||||
const trimmed = raw.trim();
|
||||
if (!trimmed) return null;
|
||||
if (/^\d{4}-\d{2}-\d{2}$/.test(trimmed)) return 'iso-date';
|
||||
if (/^\d+$/.test(trimmed)) {
|
||||
const n = Number.parseInt(trimmed, 10);
|
||||
if (n >= 1_000_000_000 && n <= 4_102_444_800) return 'unix-s';
|
||||
if (n >= 1_000_000_000_000 && n <= 4_102_444_800_000) return 'unix-ms';
|
||||
return null;
|
||||
}
|
||||
if (!Number.isNaN(Date.parse(trimmed))) return 'iso-datetime';
|
||||
return null;
|
||||
}
|
||||
|
||||
function rawToDate(raw: string, shape: TimestampShape): Date | null {
|
||||
const trimmed = raw.trim();
|
||||
if (!trimmed) return null;
|
||||
if (shape === 'unix-s') return new Date(Number.parseInt(trimmed, 10) * 1000);
|
||||
if (shape === 'unix-ms') return new Date(Number.parseInt(trimmed, 10));
|
||||
const d = new Date(trimmed);
|
||||
return Number.isNaN(d.getTime()) ? null : d;
|
||||
}
|
||||
|
||||
function dateToRaw(d: Date, shape: TimestampShape): string {
|
||||
switch (shape) {
|
||||
case 'unix-s':
|
||||
return String(Math.floor(d.getTime() / 1000));
|
||||
case 'unix-ms':
|
||||
return String(d.getTime());
|
||||
case 'iso-date':
|
||||
return d.toISOString().slice(0, 10);
|
||||
case 'iso-datetime':
|
||||
return d.toISOString();
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Datetime leaf editor. Preserves the original storage shape — ISO date stays
|
||||
* ISO date, unix seconds stay unix seconds, etc. Unknown shapes fall back to
|
||||
* iso-datetime.
|
||||
*/
|
||||
function DateTimeLeaf({ value, onChange }: ValueRendererProps) {
|
||||
const shape: TimestampShape = detectShape(value) ?? 'iso-datetime';
|
||||
const date = rawToDate(value, shape);
|
||||
const inputType = shape === 'iso-date' ? 'date' : 'datetime-local';
|
||||
|
||||
const inputValue = (() => {
|
||||
if (!date || Number.isNaN(date.getTime())) return '';
|
||||
if (inputType === 'date') return date.toISOString().slice(0, 10);
|
||||
// datetime-local wants YYYY-MM-DDTHH:mm in the user's local timezone.
|
||||
const local = new Date(date.getTime() - date.getTimezoneOffset() * 60000);
|
||||
return local.toISOString().slice(0, 16);
|
||||
})();
|
||||
|
||||
return (
|
||||
<div className="kv-leaf-datetime">
|
||||
<input
|
||||
type={inputType}
|
||||
className="kv-leaf-input"
|
||||
value={inputValue}
|
||||
onChange={(e) => {
|
||||
const v = e.target.value;
|
||||
if (!v) {
|
||||
onChange('');
|
||||
return;
|
||||
}
|
||||
const parsed = new Date(v);
|
||||
if (Number.isNaN(parsed.getTime())) return;
|
||||
onChange(dateToRaw(parsed, shape));
|
||||
}}
|
||||
/>
|
||||
<span className="kv-leaf-datetime-shape" title="Storage format preserved on save">
|
||||
{shape}
|
||||
</span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function formatBytes(n: number): string {
|
||||
if (n < 1024) return `${n} B`;
|
||||
const units = ['KB', 'MB', 'GB', 'TB'];
|
||||
let v = n / 1024;
|
||||
let i = 0;
|
||||
while (v >= 1024 && i < units.length - 1) {
|
||||
v /= 1024;
|
||||
i++;
|
||||
}
|
||||
return `${v.toFixed(v >= 10 ? 0 : 1)} ${units[i]}`;
|
||||
}
|
||||
@@ -0,0 +1,90 @@
|
||||
import { SchemaFieldInfo, SchemaResponse } from '../api/schemaApi';
|
||||
import { FieldType } from './types';
|
||||
|
||||
export interface SchemaLookup {
|
||||
/** The matched schema entry, if any. */
|
||||
info?: SchemaFieldInfo;
|
||||
/** Suggested FieldType for the leaf editor, or null when schema can't decide. */
|
||||
fieldType: FieldType | null;
|
||||
/**
|
||||
* True when the leaf is one variant under a language-keyed group
|
||||
* (e.g. plot/eng). The schema entry returned is the group's, not the leaf's.
|
||||
*/
|
||||
isLanguageVariant: boolean;
|
||||
}
|
||||
|
||||
/**
|
||||
* Resolve the logical schema entry for a full Redis key.
|
||||
*
|
||||
* - "file:<hash>/releasedate" → schema.fields["releasedate"]
|
||||
* - "file:<hash>/plot/eng" → schema.fields["plot"] (language-keyed group)
|
||||
* - non-file keys → undefined (schema is per-file today)
|
||||
*/
|
||||
export function lookupSchemaForKey(
|
||||
schema: SchemaResponse | null,
|
||||
key: string,
|
||||
): SchemaLookup {
|
||||
if (!schema) {
|
||||
return { fieldType: null, isLanguageVariant: false };
|
||||
}
|
||||
|
||||
const propertyPath = stripFilePrefix(key);
|
||||
if (!propertyPath) {
|
||||
return { fieldType: null, isLanguageVariant: false };
|
||||
}
|
||||
|
||||
const direct = schema.fields[propertyPath];
|
||||
if (direct) {
|
||||
return {
|
||||
info: direct,
|
||||
fieldType: schemaToFieldType(direct),
|
||||
isLanguageVariant: false,
|
||||
};
|
||||
}
|
||||
|
||||
// Language-keyed collapse: tail is a 2/3-letter lang code under a known group.
|
||||
const lastSlash = propertyPath.lastIndexOf('/');
|
||||
if (lastSlash > 0) {
|
||||
const tail = propertyPath.slice(lastSlash + 1);
|
||||
if (/^[a-z]{2,3}$/.test(tail)) {
|
||||
const group = schema.fields[propertyPath.slice(0, lastSlash)];
|
||||
if (group?.key_hint === 'language-code') {
|
||||
return {
|
||||
info: group,
|
||||
fieldType: schemaToFieldType(group),
|
||||
isLanguageVariant: true,
|
||||
};
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return { fieldType: null, isLanguageVariant: false };
|
||||
}
|
||||
|
||||
export function schemaToFieldType(info: SchemaFieldInfo | undefined): FieldType | null {
|
||||
if (!info) return null;
|
||||
if (info.hint === 'cid') return 'hash';
|
||||
if (info.hint === 'timestamp') return 'datetime';
|
||||
switch (info.type) {
|
||||
case 'bool':
|
||||
return 'bool';
|
||||
case 'int':
|
||||
case 'float':
|
||||
return 'number';
|
||||
case 'json-object':
|
||||
case 'json-array':
|
||||
return 'json';
|
||||
case 'string':
|
||||
case 'mixed':
|
||||
case 'undefined':
|
||||
default:
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
function stripFilePrefix(key: string): string {
|
||||
if (!key.startsWith('file:')) return '';
|
||||
const slash = key.indexOf('/');
|
||||
if (slash < 0) return '';
|
||||
return key.slice(slash + 1);
|
||||
}
|
||||
@@ -12,14 +12,14 @@ const PATH_PATTERNS: Array<[RegExp, FieldType]> = [
|
||||
[/(^|\/)(description|overview|notes?|comment|summary|nfo)$/i, 'text'],
|
||||
];
|
||||
|
||||
export function detectFromPath(path: string): FieldType | null {
|
||||
function detectFromPath(path: string): FieldType | null {
|
||||
for (const [re, t] of PATH_PATTERNS) {
|
||||
if (re.test(path)) return t;
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
export function detectFromValue(v: string): FieldType {
|
||||
function detectFromValue(v: string): FieldType {
|
||||
if (v === '') return 'string';
|
||||
if (v === 'true' || v === 'false') return 'bool';
|
||||
if (/^-?\d+$/.test(v)) return 'number';
|
||||
|
||||
@@ -1,155 +0,0 @@
|
||||
// API Response Types
|
||||
export interface FileMetadata {
|
||||
// File info
|
||||
fileName?: string;
|
||||
extension?: string;
|
||||
byteSize?: number;
|
||||
mimeType?: string;
|
||||
fileType?: string;
|
||||
|
||||
// Filename parsing
|
||||
title?: string;
|
||||
titles?: string[];
|
||||
originaltitle?: string;
|
||||
showtitle?: string;
|
||||
season?: number;
|
||||
episode?: number;
|
||||
movieYear?: number;
|
||||
videoType?: string;
|
||||
|
||||
// General media metadata
|
||||
year?: number;
|
||||
imdbid?: string;
|
||||
tmdbid?: string;
|
||||
anidbid?: string;
|
||||
premiered?: string;
|
||||
genre?: string[];
|
||||
releasedate?: string;
|
||||
plot?: string;
|
||||
director?: string;
|
||||
rating?: number;
|
||||
runtime?: number;
|
||||
studio?: string;
|
||||
art?: any;
|
||||
actor?: any[];
|
||||
aired?: string;
|
||||
customrating?: string;
|
||||
dateadded?: string;
|
||||
sorttitle?: string;
|
||||
mpaa?: string;
|
||||
aspectratio?: string;
|
||||
collectionnumber?: number;
|
||||
criticrating?: number;
|
||||
|
||||
// Hashes
|
||||
cid_crc32?: string;
|
||||
cid_md5?: string;
|
||||
cid_sha1?: string;
|
||||
'cid_sha2-256'?: string;
|
||||
'cid_sha3-256'?: string;
|
||||
cid_sha3_384?: string;
|
||||
|
||||
// Video info
|
||||
video?: {
|
||||
codec?: string;
|
||||
width?: number;
|
||||
height?: number;
|
||||
bitrate?: number;
|
||||
fps?: number;
|
||||
};
|
||||
|
||||
// Audio info
|
||||
audio?: Array<{
|
||||
codec?: string;
|
||||
channels?: number;
|
||||
language?: string;
|
||||
bitrate?: number;
|
||||
}>;
|
||||
|
||||
// Subtitles
|
||||
subtitles?: Array<{
|
||||
language?: string;
|
||||
codec?: string;
|
||||
}>;
|
||||
|
||||
// Other
|
||||
extra?: any;
|
||||
anime?: any;
|
||||
fileinfo?: any;
|
||||
trackers?: string[];
|
||||
|
||||
// Allow any additional properties
|
||||
[key: string]: any;
|
||||
}
|
||||
|
||||
export interface SearchResult {
|
||||
hashId: string;
|
||||
metadata: FileMetadata;
|
||||
score?: number;
|
||||
}
|
||||
|
||||
export interface SearchResponse {
|
||||
results: SearchResult[];
|
||||
count: number;
|
||||
total?: number;
|
||||
}
|
||||
|
||||
export interface UpdateResult {
|
||||
status: string;
|
||||
hashId: string;
|
||||
message?: string;
|
||||
error?: string;
|
||||
}
|
||||
|
||||
export interface BatchUpdateResponse {
|
||||
status: string;
|
||||
total: number;
|
||||
success: number;
|
||||
errors: number;
|
||||
results: Array<{
|
||||
hashId: string;
|
||||
status: string;
|
||||
error?: string;
|
||||
}>;
|
||||
}
|
||||
|
||||
// Plugin Schema Types
|
||||
export type SchemaFieldType = 'string' | 'number' | 'boolean' | 'select' | 'text' | 'array' | 'json' | 'cid' | 'languageString';
|
||||
|
||||
export interface SelectOption {
|
||||
value: string;
|
||||
label: string;
|
||||
}
|
||||
|
||||
export interface SchemaField {
|
||||
label: string;
|
||||
type?: SchemaFieldType;
|
||||
readonly?: boolean;
|
||||
indexed?: boolean;
|
||||
options?: SelectOption[];
|
||||
hint?: string;
|
||||
link?: string;
|
||||
pattern?: string;
|
||||
min?: number;
|
||||
max?: number;
|
||||
placeholder?: string;
|
||||
}
|
||||
|
||||
export interface PluginSchema {
|
||||
id: string;
|
||||
name: string;
|
||||
version: string;
|
||||
description?: string;
|
||||
priority?: number;
|
||||
color?: string;
|
||||
dependencies: string[];
|
||||
active: boolean;
|
||||
metadataSchema?: Record<string, SchemaField>;
|
||||
}
|
||||
|
||||
export interface PluginsResponse {
|
||||
plugins: PluginSchema[];
|
||||
executionOrder: string[];
|
||||
activeCount: number;
|
||||
totalCount: number;
|
||||
}
|
||||
@@ -1,53 +0,0 @@
|
||||
/**
|
||||
* Format bytes to human readable format
|
||||
*/
|
||||
export function formatBytes(bytes: number | undefined): string {
|
||||
if (!bytes) return 'N/A';
|
||||
|
||||
const sizes = ['B', 'KB', 'MB', 'GB', 'TB'];
|
||||
if (bytes === 0) return '0 B';
|
||||
|
||||
const i = Math.floor(Math.log(bytes) / Math.log(1024));
|
||||
return Math.round((bytes / Math.pow(1024, i)) * 100) / 100 + ' ' + sizes[i];
|
||||
}
|
||||
|
||||
/**
|
||||
* Format duration in seconds to HH:MM:SS
|
||||
*/
|
||||
export function formatDuration(seconds: number | undefined): string {
|
||||
if (!seconds) return 'N/A';
|
||||
|
||||
const hours = Math.floor(seconds / 3600);
|
||||
const minutes = Math.floor((seconds % 3600) / 60);
|
||||
const secs = Math.floor(seconds % 60);
|
||||
|
||||
if (hours > 0) {
|
||||
return `${hours}:${minutes.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`;
|
||||
}
|
||||
return `${minutes}:${secs.toString().padStart(2, '0')}`;
|
||||
}
|
||||
|
||||
/**
|
||||
* Truncate hash to first and last 6 characters
|
||||
*/
|
||||
export function truncateHash(hash: string | undefined): string {
|
||||
if (!hash) return 'N/A';
|
||||
if (hash.length <= 16) return hash;
|
||||
return `${hash.slice(0, 6)}...${hash.slice(-6)}`;
|
||||
}
|
||||
|
||||
/**
|
||||
* Get display name for a file from metadata
|
||||
*/
|
||||
export function getDisplayName(metadata: any): string {
|
||||
if (metadata.title) {
|
||||
if (metadata.season && metadata.episode) {
|
||||
return `${metadata.title} S${String(metadata.season).padStart(2, '0')}E${String(metadata.episode).padStart(2, '0')}`;
|
||||
}
|
||||
if (metadata.movieYear) {
|
||||
return `${metadata.title} (${metadata.movieYear})`;
|
||||
}
|
||||
return metadata.title;
|
||||
}
|
||||
return metadata.fileName || 'Unknown';
|
||||
}
|
||||
Reference in New Issue
Block a user