improve editor for KV
This commit is contained in:
Pierre
@@ -0,0 +1,136 @@
|
||||
// Client for the meta-core /api/kv endpoints. The keyspace is a slash-tree of
|
||||
// string-valued keys; this module wraps the S3-style listing, search, and
|
||||
// per-key get/put/delete operations.
|
||||
|
||||
const API_BASE = '/api/kv';
|
||||
|
||||
export interface KVTreeResponse {
|
||||
prefix: string;
|
||||
delimiter: string;
|
||||
branches: string[];
|
||||
leaves: string[];
|
||||
cursor: string;
|
||||
hasMore: boolean;
|
||||
}
|
||||
|
||||
export interface KVSearchResponse {
|
||||
contains: string;
|
||||
keys: string[];
|
||||
truncated: boolean;
|
||||
}
|
||||
|
||||
export interface KVFindMatch {
|
||||
key: string;
|
||||
value: string;
|
||||
entryPath: string;
|
||||
field: string;
|
||||
}
|
||||
|
||||
export interface KVFindResponse {
|
||||
contains: string;
|
||||
fields: string[];
|
||||
matches: KVFindMatch[];
|
||||
truncated: boolean;
|
||||
}
|
||||
|
||||
export interface KVValueResponse {
|
||||
key: string;
|
||||
type: string;
|
||||
value: string;
|
||||
exists: boolean;
|
||||
}
|
||||
|
||||
export interface KVInfoResponse {
|
||||
prefix: string;
|
||||
fileCount: number;
|
||||
keyCount: number;
|
||||
totalSize: number;
|
||||
memoryUsage: string;
|
||||
}
|
||||
|
||||
async function jsonOrThrow<T>(res: Response): Promise<T> {
|
||||
if (!res.ok) {
|
||||
let msg = `HTTP ${res.status}`;
|
||||
try {
|
||||
const body = await res.json();
|
||||
if (body?.message) msg = body.message;
|
||||
else if (body?.error) msg = body.error;
|
||||
} catch {}
|
||||
throw new Error(msg);
|
||||
}
|
||||
return res.json();
|
||||
}
|
||||
|
||||
export const KVAPI = {
|
||||
async info(): Promise<KVInfoResponse> {
|
||||
return jsonOrThrow(await fetch(`${API_BASE}/info`));
|
||||
},
|
||||
|
||||
async tree(params: {
|
||||
prefix?: string;
|
||||
delimiter?: string;
|
||||
cursor?: string;
|
||||
max?: number;
|
||||
}): Promise<KVTreeResponse> {
|
||||
const q = new URLSearchParams();
|
||||
if (params.prefix !== undefined) q.set('prefix', params.prefix);
|
||||
if (params.delimiter !== undefined) q.set('delimiter', params.delimiter);
|
||||
if (params.cursor) q.set('cursor', params.cursor);
|
||||
if (params.max) q.set('max', String(params.max));
|
||||
return jsonOrThrow(await fetch(`${API_BASE}/tree?${q}`));
|
||||
},
|
||||
|
||||
// Walk multiple SCAN cycles until the keyspace is exhausted or a soft cap
|
||||
// is reached. Useful for branches with up to a few thousand children where
|
||||
// pagination UX would just be a worse spinner.
|
||||
async treeAll(prefix: string, delimiter: string, softCap = 5000): Promise<KVTreeResponse> {
|
||||
const seenLeaves = new Set<string>();
|
||||
const seenBranches = new Set<string>();
|
||||
let cursor = '';
|
||||
while (true) {
|
||||
const page = await this.tree({ prefix, delimiter, cursor, max: 1000 });
|
||||
for (const k of page.leaves) seenLeaves.add(k);
|
||||
for (const k of page.branches) seenBranches.add(k);
|
||||
cursor = page.cursor;
|
||||
if (!page.hasMore) break;
|
||||
if (seenLeaves.size + seenBranches.size >= softCap) break;
|
||||
}
|
||||
return {
|
||||
prefix,
|
||||
delimiter,
|
||||
branches: [...seenBranches].sort(),
|
||||
leaves: [...seenLeaves].sort(),
|
||||
cursor,
|
||||
hasMore: cursor !== '0' && cursor !== '',
|
||||
};
|
||||
},
|
||||
|
||||
async search(contains: string, limit = 500): Promise<KVSearchResponse> {
|
||||
const q = new URLSearchParams({ contains, limit: String(limit) });
|
||||
return jsonOrThrow(await fetch(`${API_BASE}/search?${q}`));
|
||||
},
|
||||
|
||||
async find(contains: string, fields: string[], limit = 200): Promise<KVFindResponse> {
|
||||
const q = new URLSearchParams({ contains, fields: fields.join(','), limit: String(limit) });
|
||||
return jsonOrThrow(await fetch(`${API_BASE}/find?${q}`));
|
||||
},
|
||||
|
||||
async get(key: string): Promise<KVValueResponse> {
|
||||
const q = new URLSearchParams({ key });
|
||||
return jsonOrThrow(await fetch(`${API_BASE}/value?${q}`));
|
||||
},
|
||||
|
||||
async put(key: string, value: string): Promise<KVValueResponse> {
|
||||
const res = await fetch(`${API_BASE}/value`, {
|
||||
method: 'PUT',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ key, value }),
|
||||
});
|
||||
return jsonOrThrow(res);
|
||||
},
|
||||
|
||||
async del(key: string): Promise<{ key: string; deleted: boolean }> {
|
||||
const q = new URLSearchParams({ key });
|
||||
return jsonOrThrow(await fetch(`${API_BASE}/value?${q}`, { method: 'DELETE' }));
|
||||
},
|
||||
};
|
||||
@@ -0,0 +1,233 @@
|
||||
import { useEffect, useMemo, useState } from 'react';
|
||||
import { KVAPI, KVFindMatch } from '../api/kvApi';
|
||||
|
||||
interface Props {
|
||||
matches: KVFindMatch[];
|
||||
truncated: boolean;
|
||||
searching: boolean;
|
||||
selectedKey: string | null;
|
||||
expandedPaths: Set<string>;
|
||||
onSelectLeaf: (key: string) => void;
|
||||
onSelectBranch: (path: string) => void;
|
||||
onToggleBranch: (path: string, willOpen: boolean) => void;
|
||||
}
|
||||
|
||||
// FilteredKVTree is the search-active counterpart to KVTree. Instead of
|
||||
// replacing the tree with a flat results list, it shows only the file
|
||||
// branches that contain matches, with the matched (field, value) pairs
|
||||
// rendered inline as sub-lines under each branch.
|
||||
//
|
||||
// Branches remain expandable: clicking one fetches the full subtree via
|
||||
// KVAPI.treeAll just like the main tree, so the user can drill into every
|
||||
// key of a matching file without clearing the search first.
|
||||
export function FilteredKVTree({
|
||||
matches, truncated, searching,
|
||||
selectedKey, expandedPaths,
|
||||
onSelectLeaf, onSelectBranch, onToggleBranch,
|
||||
}: Props) {
|
||||
// Group matches by their entryPath (file:<hash>/) so each entry is one row
|
||||
// with potentially multiple hit previews.
|
||||
const groups = useMemo(() => {
|
||||
const m = new Map<string, KVFindMatch[]>();
|
||||
for (const x of matches) {
|
||||
const arr = m.get(x.entryPath);
|
||||
if (arr) arr.push(x);
|
||||
else m.set(x.entryPath, [x]);
|
||||
}
|
||||
return m;
|
||||
}, [matches]);
|
||||
|
||||
return (
|
||||
<div className="kv-filtered">
|
||||
<div className="kv-search-header">
|
||||
{searching
|
||||
? 'searching…'
|
||||
: `${matches.length} match${matches.length === 1 ? '' : 'es'} in ${groups.size} file${groups.size === 1 ? '' : 's'}${truncated ? ' (truncated)' : ''}`}
|
||||
</div>
|
||||
{[...groups.entries()]
|
||||
.sort(([a], [b]) => a.localeCompare(b))
|
||||
.map(([entryPath, hits]) => (
|
||||
<FilteredEntry
|
||||
key={entryPath}
|
||||
entryPath={entryPath}
|
||||
hits={hits}
|
||||
selectedKey={selectedKey}
|
||||
expanded={expandedPaths.has(entryPath)}
|
||||
onSelectLeaf={onSelectLeaf}
|
||||
onSelectBranch={onSelectBranch}
|
||||
onToggleBranch={onToggleBranch}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
interface EntryProps {
|
||||
entryPath: string;
|
||||
hits: KVFindMatch[];
|
||||
selectedKey: string | null;
|
||||
expanded: boolean;
|
||||
onSelectLeaf: (key: string) => void;
|
||||
onSelectBranch: (path: string) => void;
|
||||
onToggleBranch: (path: string, willOpen: boolean) => void;
|
||||
}
|
||||
|
||||
function FilteredEntry({
|
||||
entryPath, hits, selectedKey, expanded,
|
||||
onSelectLeaf, onSelectBranch, onToggleBranch,
|
||||
}: EntryProps) {
|
||||
// We deliberately do NOT mark the matched-leaf rows as "selected" via the
|
||||
// tree row's selected style — the inline hit lines are themselves the
|
||||
// selected indicator (they're highlighted when their key is current).
|
||||
const isBranchSelected = entryPath === selectedKey;
|
||||
const HIT_PREVIEW = 4;
|
||||
|
||||
return (
|
||||
<div className="kv-filtered-entry">
|
||||
<div
|
||||
className={`kv-tree-row kv-tree-branch${isBranchSelected ? ' selected' : ''}`}
|
||||
style={{ paddingLeft: 4 }}
|
||||
onClick={() => {
|
||||
onToggleBranch(entryPath, !expanded);
|
||||
onSelectBranch(entryPath);
|
||||
}}
|
||||
>
|
||||
<span className="kv-tree-toggle">{expanded ? '▾' : '▸'}</span>
|
||||
<span className="kv-tree-label">{entryPath}</span>
|
||||
<span className="kv-filtered-count" title={`${hits.length} match${hits.length === 1 ? '' : 'es'}`}>
|
||||
{hits.length}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="kv-filtered-hits">
|
||||
{hits.slice(0, HIT_PREVIEW).map((h) => (
|
||||
<div
|
||||
key={h.key}
|
||||
className={`kv-filtered-hit${h.key === selectedKey ? ' selected' : ''}`}
|
||||
onClick={(e) => { e.stopPropagation(); onSelectLeaf(h.key); }}
|
||||
title={h.value}
|
||||
>
|
||||
<span className="kv-filtered-hit-field">{h.field}</span>
|
||||
<span className="kv-filtered-hit-value">{h.value}</span>
|
||||
</div>
|
||||
))}
|
||||
{hits.length > HIT_PREVIEW && (
|
||||
<div className="kv-filtered-more">
|
||||
+{hits.length - HIT_PREVIEW} more match{hits.length - HIT_PREVIEW === 1 ? '' : 'es'}
|
||||
{!expanded && ' · expand to see all keys'}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{expanded && (
|
||||
<LazySubtree
|
||||
path={entryPath}
|
||||
depth={1}
|
||||
selectedKey={selectedKey}
|
||||
onSelectLeaf={onSelectLeaf}
|
||||
onSelectBranch={onSelectBranch}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
interface SubtreeProps {
|
||||
path: string;
|
||||
depth: number;
|
||||
selectedKey: string | null;
|
||||
onSelectLeaf: (key: string) => void;
|
||||
onSelectBranch: (path: string) => void;
|
||||
}
|
||||
|
||||
interface SubtreeData {
|
||||
loading: boolean;
|
||||
branches: string[];
|
||||
leaves: string[];
|
||||
error?: string;
|
||||
}
|
||||
|
||||
// LazySubtree fetches its children once on mount and renders them. Sub-
|
||||
// branches are themselves LazyBranch components that fetch their own
|
||||
// children on first expand — recursion all the way down without the global
|
||||
// expandedPaths state of the main KVTree.
|
||||
function LazySubtree({ path, depth, selectedKey, onSelectLeaf, onSelectBranch }: SubtreeProps) {
|
||||
const [data, setData] = useState<SubtreeData>({ loading: true, branches: [], leaves: [] });
|
||||
|
||||
useEffect(() => {
|
||||
let cancelled = false;
|
||||
KVAPI.treeAll(path, '/', 5000)
|
||||
.then((r) => { if (!cancelled) setData({ loading: false, branches: r.branches, leaves: r.leaves }); })
|
||||
.catch((e) => { if (!cancelled) setData({ loading: false, branches: [], leaves: [], error: e.message }); });
|
||||
return () => { cancelled = true; };
|
||||
}, [path]);
|
||||
|
||||
if (data.loading) {
|
||||
return <div className="kv-tree-loading" style={{ paddingLeft: depth * 14 + 18 }}>loading…</div>;
|
||||
}
|
||||
if (data.error) {
|
||||
return <div className="kv-tree-error" style={{ paddingLeft: depth * 14 + 18 }}>{data.error}</div>;
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
{data.branches.map((b) => (
|
||||
<LazyBranch
|
||||
key={b}
|
||||
path={b}
|
||||
parentPath={path}
|
||||
depth={depth}
|
||||
selectedKey={selectedKey}
|
||||
onSelectLeaf={onSelectLeaf}
|
||||
onSelectBranch={onSelectBranch}
|
||||
/>
|
||||
))}
|
||||
{data.leaves.map((l) => (
|
||||
<div
|
||||
key={l}
|
||||
className={`kv-tree-row kv-tree-leaf${l === selectedKey ? ' selected' : ''}`}
|
||||
style={{ paddingLeft: depth * 14 + 4 }}
|
||||
onClick={() => onSelectLeaf(l)}
|
||||
>
|
||||
<span className="kv-tree-leaf-dot">•</span>
|
||||
<span className="kv-tree-label">{l.slice(path.length)}</span>
|
||||
</div>
|
||||
))}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
interface LazyBranchProps {
|
||||
path: string;
|
||||
parentPath: string;
|
||||
depth: number;
|
||||
selectedKey: string | null;
|
||||
onSelectLeaf: (key: string) => void;
|
||||
onSelectBranch: (path: string) => void;
|
||||
}
|
||||
|
||||
function LazyBranch({ path, parentPath, depth, selectedKey, onSelectLeaf, onSelectBranch }: LazyBranchProps) {
|
||||
const [expanded, setExpanded] = useState(false);
|
||||
const label = path.slice(parentPath.length);
|
||||
return (
|
||||
<>
|
||||
<div
|
||||
className={`kv-tree-row kv-tree-branch${path === selectedKey ? ' selected' : ''}`}
|
||||
style={{ paddingLeft: depth * 14 + 4 }}
|
||||
onClick={() => { setExpanded(!expanded); onSelectBranch(path); }}
|
||||
>
|
||||
<span className="kv-tree-toggle">{expanded ? '▾' : '▸'}</span>
|
||||
<span className="kv-tree-label">{label}</span>
|
||||
</div>
|
||||
{expanded && (
|
||||
<LazySubtree
|
||||
path={path}
|
||||
depth={depth + 1}
|
||||
selectedKey={selectedKey}
|
||||
onSelectLeaf={onSelectLeaf}
|
||||
onSelectBranch={onSelectBranch}
|
||||
/>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,524 @@
|
||||
/* KV Tree Editor — fills the iframe viewport with a 2-pane layout. */
|
||||
|
||||
.kv-app {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100vh;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
background: #fafbfc;
|
||||
color: #1f2330;
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
/* ── Header ───────────────────────────────────────────────────────────── */
|
||||
.kv-app-header {
|
||||
border-bottom: 1px solid #e2e6ee;
|
||||
padding: 8px 12px;
|
||||
background: #fff;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
.kv-app-search {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.kv-search-input {
|
||||
flex: 1;
|
||||
padding: 7px 11px;
|
||||
border: 1px solid #d1d6e0;
|
||||
border-radius: 6px;
|
||||
font-size: 13px;
|
||||
background: #fff;
|
||||
outline: none;
|
||||
}
|
||||
.kv-search-input:focus { border-color: #6c7afa; box-shadow: 0 0 0 2px rgba(108, 122, 250, 0.2); }
|
||||
|
||||
.kv-app-stats {
|
||||
font-size: 12px;
|
||||
color: #8089a0;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.kv-app-breadcrumb {
|
||||
margin-top: 6px;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
gap: 2px;
|
||||
font-size: 12px;
|
||||
}
|
||||
.kv-crumb-label {
|
||||
color: #8089a0;
|
||||
margin-right: 4px;
|
||||
}
|
||||
.kv-crumb {
|
||||
border: none;
|
||||
background: transparent;
|
||||
padding: 1px 4px;
|
||||
border-radius: 3px;
|
||||
cursor: pointer;
|
||||
color: #4a5170;
|
||||
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
|
||||
}
|
||||
.kv-crumb:hover { background: #eef0fb; color: #2a2f48; }
|
||||
|
||||
/* ── Body ─────────────────────────────────────────────────────────────── */
|
||||
.kv-app-body {
|
||||
flex: 1 1 auto;
|
||||
display: flex;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.kv-app-left {
|
||||
flex: 0 0 38%;
|
||||
min-width: 280px;
|
||||
max-width: 600px;
|
||||
border-right: 1px solid #e2e6ee;
|
||||
background: #fff;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.kv-app-right {
|
||||
flex: 1 1 auto;
|
||||
overflow: auto;
|
||||
padding: 16px 20px;
|
||||
background: #fafbfc;
|
||||
}
|
||||
|
||||
/* ── Tree ─────────────────────────────────────────────────────────────── */
|
||||
.kv-tree {
|
||||
padding: 4px 0;
|
||||
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
|
||||
font-size: 12.5px;
|
||||
}
|
||||
|
||||
.kv-tree-list {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.kv-tree-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
padding: 2px 4px;
|
||||
cursor: pointer;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.kv-tree-row:hover { background: #f3f5fb; }
|
||||
|
||||
.kv-tree-toggle {
|
||||
display: inline-block;
|
||||
width: 12px;
|
||||
color: #8089a0;
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
.kv-tree-leaf-dot {
|
||||
display: inline-block;
|
||||
width: 12px;
|
||||
color: #c5cad6;
|
||||
}
|
||||
|
||||
.kv-tree-label {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.kv-tree-branch .kv-tree-label {
|
||||
color: #2a3050;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.kv-tree-leaf .kv-tree-label {
|
||||
color: #4a5170;
|
||||
}
|
||||
|
||||
.kv-tree-row.selected {
|
||||
background: #e7eafd;
|
||||
color: #2532a3;
|
||||
}
|
||||
.kv-tree-row.selected:hover { background: #dde2fc; }
|
||||
|
||||
.kv-tree-loading,
|
||||
.kv-tree-empty,
|
||||
.kv-tree-error {
|
||||
font-size: 12px;
|
||||
color: #8089a0;
|
||||
padding: 4px 8px;
|
||||
font-style: italic;
|
||||
}
|
||||
.kv-tree-error { color: #c0392b; }
|
||||
|
||||
/* ── Right pane (leaf / branch) ───────────────────────────────────────── */
|
||||
.kv-leaf, .kv-branch {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 14px;
|
||||
}
|
||||
|
||||
.kv-leaf-key {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
background: #f0f2f8;
|
||||
border: 1px solid #e2e6ee;
|
||||
border-radius: 6px;
|
||||
padding: 8px 10px;
|
||||
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
|
||||
font-size: 12px;
|
||||
}
|
||||
.kv-leaf-key-text {
|
||||
flex: 1;
|
||||
word-break: break-all;
|
||||
color: #2a3050;
|
||||
}
|
||||
|
||||
.kv-leaf-meta {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
.kv-leaf-label {
|
||||
font-size: 12px;
|
||||
color: #6e7790;
|
||||
font-weight: 500;
|
||||
}
|
||||
.kv-leaf-type {
|
||||
border: 1px solid #d1d6e0;
|
||||
border-radius: 5px;
|
||||
padding: 4px 8px;
|
||||
font-size: 12px;
|
||||
background: #fff;
|
||||
}
|
||||
.kv-leaf-hint {
|
||||
font-size: 12px;
|
||||
color: #6e7790;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.kv-leaf-input {
|
||||
width: 100%;
|
||||
padding: 8px 10px;
|
||||
border: 1px solid #d1d6e0;
|
||||
border-radius: 5px;
|
||||
font-size: 13px;
|
||||
background: #fff;
|
||||
outline: none;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.kv-leaf-input:focus { border-color: #6c7afa; box-shadow: 0 0 0 2px rgba(108, 122, 250, 0.2); }
|
||||
|
||||
.kv-leaf-textarea {
|
||||
width: 100%;
|
||||
padding: 8px 10px;
|
||||
border: 1px solid #d1d6e0;
|
||||
border-radius: 5px;
|
||||
font-size: 13px;
|
||||
background: #fff;
|
||||
outline: none;
|
||||
resize: vertical;
|
||||
box-sizing: border-box;
|
||||
font-family: inherit;
|
||||
}
|
||||
.kv-leaf-textarea:focus { border-color: #6c7afa; box-shadow: 0 0 0 2px rgba(108, 122, 250, 0.2); }
|
||||
|
||||
.kv-leaf-mono {
|
||||
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
|
||||
}
|
||||
|
||||
.kv-leaf-url {
|
||||
display: flex;
|
||||
gap: 6px;
|
||||
align-items: center;
|
||||
}
|
||||
.kv-leaf-url-open {
|
||||
font-size: 12px;
|
||||
color: #6c7afa;
|
||||
text-decoration: none;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.kv-leaf-actions {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
/* ── Branch ───────────────────────────────────────────────────────────── */
|
||||
.kv-branch-section {
|
||||
border: 1px solid #e2e6ee;
|
||||
border-radius: 6px;
|
||||
background: #fff;
|
||||
padding: 12px 14px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
}
|
||||
.kv-branch-section h4 {
|
||||
margin: 0;
|
||||
font-size: 13px;
|
||||
color: #2a3050;
|
||||
}
|
||||
.kv-branch-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
}
|
||||
.kv-branch-prefix {
|
||||
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
|
||||
font-size: 12px;
|
||||
color: #6e7790;
|
||||
background: #f0f2f8;
|
||||
padding: 6px 8px;
|
||||
border-radius: 4px;
|
||||
white-space: nowrap;
|
||||
max-width: 50%;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.kv-branch-note {
|
||||
margin: 0;
|
||||
font-size: 12px;
|
||||
color: #6e7790;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
/* ── Buttons ──────────────────────────────────────────────────────────── */
|
||||
.kv-btn {
|
||||
border: 1px solid #d1d6e0;
|
||||
background: #fff;
|
||||
color: #2a3050;
|
||||
padding: 6px 14px;
|
||||
border-radius: 5px;
|
||||
font-size: 12.5px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.kv-btn:hover:not(:disabled) { background: #f3f5fb; border-color: #b8c0d0; }
|
||||
.kv-btn:disabled { opacity: 0.45; cursor: not-allowed; }
|
||||
|
||||
.kv-btn-primary {
|
||||
background: #6c7afa;
|
||||
border-color: #6c7afa;
|
||||
color: #fff;
|
||||
}
|
||||
.kv-btn-primary:hover:not(:disabled) {
|
||||
background: #5868e8;
|
||||
border-color: #5868e8;
|
||||
}
|
||||
|
||||
.kv-btn-danger {
|
||||
border-color: #e0788a;
|
||||
color: #c0392b;
|
||||
}
|
||||
.kv-btn-danger:hover:not(:disabled) {
|
||||
background: #fdecef;
|
||||
border-color: #c0392b;
|
||||
}
|
||||
|
||||
.kv-btn-icon {
|
||||
border: 1px solid transparent;
|
||||
background: transparent;
|
||||
color: #6e7790;
|
||||
padding: 2px 6px;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
font-size: 13px;
|
||||
}
|
||||
.kv-btn-icon:hover { background: #eef0fb; color: #2a3050; }
|
||||
|
||||
/* ── Pane status ──────────────────────────────────────────────────────── */
|
||||
.kv-pane-status {
|
||||
color: #6e7790;
|
||||
font-size: 12.5px;
|
||||
padding: 8px 0;
|
||||
}
|
||||
.kv-pane-empty {
|
||||
text-align: center;
|
||||
padding: 80px 20px;
|
||||
font-size: 14px;
|
||||
}
|
||||
.kv-pane-hint {
|
||||
margin-top: 8px;
|
||||
font-size: 12px;
|
||||
color: #8089a0;
|
||||
}
|
||||
|
||||
/* ── Field chips (configure search-in fields) ─────────────────────────── */
|
||||
.kv-chips {
|
||||
margin-top: 6px;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
}
|
||||
.kv-chips-label {
|
||||
font-size: 12px;
|
||||
color: #8089a0;
|
||||
margin-right: 4px;
|
||||
}
|
||||
.kv-chip {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
background: #eef0fb;
|
||||
border: 1px solid #d5dafa;
|
||||
color: #2a3050;
|
||||
border-radius: 12px;
|
||||
padding: 1px 4px 1px 8px;
|
||||
font-size: 11.5px;
|
||||
}
|
||||
.kv-chip code {
|
||||
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
|
||||
font-size: 11.5px;
|
||||
}
|
||||
.kv-chip-x {
|
||||
border: none;
|
||||
background: transparent;
|
||||
color: #6e7790;
|
||||
cursor: pointer;
|
||||
padding: 0 4px;
|
||||
font-size: 14px;
|
||||
line-height: 1;
|
||||
}
|
||||
.kv-chip-x:hover { color: #c0392b; }
|
||||
.kv-chip-input {
|
||||
border: 1px dashed #c5cad6;
|
||||
background: transparent;
|
||||
border-radius: 12px;
|
||||
padding: 2px 8px;
|
||||
font-size: 11.5px;
|
||||
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
|
||||
outline: none;
|
||||
min-width: 90px;
|
||||
}
|
||||
.kv-chip-input:focus { border-style: solid; border-color: #6c7afa; }
|
||||
|
||||
/* ── Search header (shared across filter mode) ────────────────────────── */
|
||||
.kv-search-header {
|
||||
padding: 6px 10px;
|
||||
font-size: 11px;
|
||||
color: #6e7790;
|
||||
background: #f3f5fb;
|
||||
border-bottom: 1px solid #e2e6ee;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
/* ── Filtered tree (search-active state) ──────────────────────────────── */
|
||||
.kv-filtered {
|
||||
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
|
||||
font-size: 12.5px;
|
||||
}
|
||||
.kv-filtered-entry {
|
||||
border-bottom: 1px solid #f0f2f8;
|
||||
}
|
||||
.kv-filtered-count {
|
||||
margin-left: auto;
|
||||
background: #eef0fb;
|
||||
color: #4a5170;
|
||||
padding: 0 6px;
|
||||
border-radius: 9px;
|
||||
font-size: 10.5px;
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
||||
font-weight: 600;
|
||||
}
|
||||
.kv-filtered-hits {
|
||||
padding: 2px 4px 4px 24px;
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
||||
font-size: 12px;
|
||||
}
|
||||
.kv-filtered-hit {
|
||||
display: flex;
|
||||
gap: 6px;
|
||||
align-items: baseline;
|
||||
padding: 2px 6px;
|
||||
border-radius: 3px;
|
||||
cursor: pointer;
|
||||
line-height: 1.35;
|
||||
}
|
||||
.kv-filtered-hit:hover { background: #f3f5fb; }
|
||||
.kv-filtered-hit.selected {
|
||||
background: #e7eafd;
|
||||
}
|
||||
.kv-filtered-hit-field {
|
||||
background: #eef0fb;
|
||||
color: #4a5170;
|
||||
padding: 0 5px;
|
||||
border-radius: 3px;
|
||||
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
|
||||
font-size: 10.5px;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
.kv-filtered-hit-value {
|
||||
color: #2a3050;
|
||||
word-break: break-word;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
}
|
||||
.kv-filtered-more {
|
||||
padding: 2px 6px 0;
|
||||
font-size: 11px;
|
||||
font-style: italic;
|
||||
color: #8089a0;
|
||||
}
|
||||
|
||||
/* ── Toasts ───────────────────────────────────────────────────────────── */
|
||||
.kv-toast-stack {
|
||||
position: fixed;
|
||||
bottom: 16px;
|
||||
right: 16px;
|
||||
display: flex;
|
||||
flex-direction: column-reverse;
|
||||
gap: 6px;
|
||||
z-index: 1000;
|
||||
max-width: 480px;
|
||||
}
|
||||
.kv-toast {
|
||||
background: #2a3050;
|
||||
color: #fff;
|
||||
border-radius: 6px;
|
||||
padding: 9px 12px;
|
||||
box-shadow: 0 4px 14px rgba(0,0,0,0.15);
|
||||
font-size: 12.5px;
|
||||
}
|
||||
.kv-toast-success { background: #2f9e44; }
|
||||
.kv-toast-error { background: #c0392b; }
|
||||
.kv-toast-row {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 8px;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.kv-toast-text {
|
||||
flex: 1;
|
||||
word-break: break-word;
|
||||
}
|
||||
.kv-toast-close {
|
||||
border: none;
|
||||
background: transparent;
|
||||
color: rgba(255,255,255,0.8);
|
||||
cursor: pointer;
|
||||
font-size: 16px;
|
||||
line-height: 1;
|
||||
}
|
||||
.kv-toast-close:hover { color: #fff; }
|
||||
.kv-toast-details {
|
||||
margin: 6px 0 0;
|
||||
padding-left: 18px;
|
||||
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
|
||||
font-size: 11px;
|
||||
color: rgba(255,255,255,0.85);
|
||||
max-height: 160px;
|
||||
overflow: auto;
|
||||
}
|
||||
@@ -0,0 +1,244 @@
|
||||
import { useEffect, useMemo, useRef, useState } from 'react';
|
||||
import { KVAPI, KVFindMatch, KVInfoResponse } from '../api/kvApi';
|
||||
import { ancestorBranches, KVTree } from './KVTree';
|
||||
import { FilteredKVTree } from './FilteredKVTree';
|
||||
import { KVLeafEditor } from './KVLeafEditor';
|
||||
import { KVBranchEditor } from './KVBranchEditor';
|
||||
import { SearchFieldChips } from './SearchFieldChips';
|
||||
import { ToastStack, makeToast } from './Toast';
|
||||
import { ToastEntry } from './types';
|
||||
import './KVApp.css';
|
||||
|
||||
const SEARCH_FIELDS_LS_KEY = 'kv-editor.searchFields.v1';
|
||||
const DEFAULT_SEARCH_FIELDS = ['originalTitle', 'filePath', 'fileName', 'plot/eng'];
|
||||
|
||||
function loadSearchFields(): string[] {
|
||||
try {
|
||||
const raw = localStorage.getItem(SEARCH_FIELDS_LS_KEY);
|
||||
if (!raw) return DEFAULT_SEARCH_FIELDS;
|
||||
const parsed = JSON.parse(raw);
|
||||
if (Array.isArray(parsed) && parsed.every((x) => typeof x === 'string')) return parsed;
|
||||
} catch {}
|
||||
return DEFAULT_SEARCH_FIELDS;
|
||||
}
|
||||
|
||||
// Top-level shell. Two panes inside the iframe:
|
||||
// left — lazy tree of the keyspace
|
||||
// right — leaf editor (when a leaf is selected) or branch editor (branch).
|
||||
//
|
||||
// A sticky header carries the search bar, the breadcrumb, and basic stats.
|
||||
export default function KVApp() {
|
||||
// Selected node. branchPath is set when a branch is selected; selectedKey
|
||||
// when a leaf is. Mutually exclusive.
|
||||
const [selectedKey, setSelectedKey] = useState<string | null>(null);
|
||||
const [branchPath, setBranchPath] = useState<string | null>(null);
|
||||
const [expandedPaths, setExpandedPaths] = useState<Set<string>>(new Set(['']));
|
||||
const [searchInput, setSearchInput] = useState('');
|
||||
const [searchFields, setSearchFields] = useState<string[]>(loadSearchFields);
|
||||
const [searchResults, setSearchResults] = useState<KVFindMatch[] | null>(null);
|
||||
const [searchTruncated, setSearchTruncated] = useState(false);
|
||||
const [searching, setSearching] = useState(false);
|
||||
const [info, setInfo] = useState<KVInfoResponse | null>(null);
|
||||
const [reloadToken, setReloadToken] = useState(0);
|
||||
const [toasts, setToasts] = useState<ToastEntry[]>([]);
|
||||
const searchTimerRef = useRef<number | null>(null);
|
||||
|
||||
const pushToast = (t: ToastEntry) => setToasts((cur) => [...cur, t]);
|
||||
const dismissToast = (id: number) => setToasts((cur) => cur.filter((t) => t.id !== id));
|
||||
|
||||
useEffect(() => {
|
||||
KVAPI.info().then(setInfo).catch(() => {});
|
||||
}, [reloadToken]);
|
||||
|
||||
// Deep-link: /editor/file/<hashId> opens the tree pre-expanded at that hash.
|
||||
useEffect(() => {
|
||||
const m = window.location.pathname.match(/\/file\/([a-z0-9]+)$/i);
|
||||
if (m) {
|
||||
const hashId = m[1];
|
||||
const branch = `file:${hashId}/`;
|
||||
setExpandedPaths((cur) => new Set([...cur, '', 'file:', branch]));
|
||||
setBranchPath(branch);
|
||||
}
|
||||
}, []);
|
||||
|
||||
// Persist field list across reloads.
|
||||
useEffect(() => {
|
||||
try { localStorage.setItem(SEARCH_FIELDS_LS_KEY, JSON.stringify(searchFields)); } catch {}
|
||||
}, [searchFields]);
|
||||
|
||||
// Debounced live value-search across configured fields. Empty input clears.
|
||||
useEffect(() => {
|
||||
if (searchTimerRef.current) window.clearTimeout(searchTimerRef.current);
|
||||
if (!searchInput.trim() || searchFields.length === 0) {
|
||||
setSearchResults(null);
|
||||
setSearchTruncated(false);
|
||||
setSearching(false);
|
||||
return;
|
||||
}
|
||||
setSearching(true);
|
||||
searchTimerRef.current = window.setTimeout(async () => {
|
||||
try {
|
||||
const r = await KVAPI.find(searchInput.trim(), searchFields, 200);
|
||||
setSearchResults(r.matches);
|
||||
setSearchTruncated(r.truncated);
|
||||
} catch (e: any) {
|
||||
pushToast(makeToast('error', `Search failed: ${e.message}`));
|
||||
} finally {
|
||||
setSearching(false);
|
||||
}
|
||||
}, 250);
|
||||
return () => {
|
||||
if (searchTimerRef.current) window.clearTimeout(searchTimerRef.current);
|
||||
};
|
||||
}, [searchInput, searchFields]);
|
||||
|
||||
// Jump to a key from a search hit: select it, expand all ancestor branches.
|
||||
const jumpToKey = (key: string) => {
|
||||
const ancestors = ancestorBranches(key);
|
||||
setExpandedPaths((cur) => new Set([...cur, '', ...ancestors]));
|
||||
if (key.endsWith('/') || key.endsWith(':')) {
|
||||
setBranchPath(key);
|
||||
setSelectedKey(null);
|
||||
} else {
|
||||
setSelectedKey(key);
|
||||
setBranchPath(null);
|
||||
}
|
||||
};
|
||||
|
||||
const breadcrumb = useMemo(() => {
|
||||
const target = selectedKey ?? branchPath ?? '';
|
||||
if (!target) return null;
|
||||
const parts: { label: string; path: string }[] = [];
|
||||
let i = 0;
|
||||
while (i < target.length) {
|
||||
let next = -1;
|
||||
for (const d of [':', '/']) {
|
||||
const idx = target.indexOf(d, i);
|
||||
if (idx >= 0 && (next < 0 || idx < next)) next = idx;
|
||||
}
|
||||
if (next < 0) {
|
||||
parts.push({ label: target.slice(i), path: target });
|
||||
break;
|
||||
}
|
||||
parts.push({ label: target.slice(i, next + 1), path: target.slice(0, next + 1) });
|
||||
i = next + 1;
|
||||
}
|
||||
return parts;
|
||||
}, [selectedKey, branchPath]);
|
||||
|
||||
return (
|
||||
<div className="kv-app">
|
||||
<header className="kv-app-header">
|
||||
<div className="kv-app-search">
|
||||
<input
|
||||
type="search"
|
||||
className="kv-search-input"
|
||||
placeholder="filter by value across configured fields…"
|
||||
value={searchInput}
|
||||
onChange={(e) => setSearchInput(e.target.value)}
|
||||
autoFocus
|
||||
/>
|
||||
{searchInput && (
|
||||
<button className="kv-btn-icon" onClick={() => setSearchInput('')} title="clear">×</button>
|
||||
)}
|
||||
<span className="kv-app-stats">
|
||||
{info ? `${info.keyCount} files · ${info.memoryUsage}` : ''}
|
||||
</span>
|
||||
<button
|
||||
className="kv-btn"
|
||||
onClick={() => setReloadToken((n) => n + 1)}
|
||||
title="refresh tree"
|
||||
>Refresh</button>
|
||||
</div>
|
||||
<SearchFieldChips fields={searchFields} onChange={setSearchFields} />
|
||||
{breadcrumb && breadcrumb.length > 0 && (
|
||||
<div className="kv-app-breadcrumb">
|
||||
<span className="kv-crumb-label">path:</span>
|
||||
{breadcrumb.map((b, i) => (
|
||||
<button
|
||||
key={i}
|
||||
className="kv-crumb"
|
||||
onClick={() => jumpToKey(b.path)}
|
||||
>{b.label}</button>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</header>
|
||||
|
||||
<div className="kv-app-body">
|
||||
<aside className="kv-app-left">
|
||||
{searchResults !== null ? (
|
||||
<FilteredKVTree
|
||||
matches={searchResults}
|
||||
truncated={searchTruncated}
|
||||
searching={searching}
|
||||
selectedKey={selectedKey}
|
||||
expandedPaths={expandedPaths}
|
||||
onSelectLeaf={(k) => { setSelectedKey(k); setBranchPath(null); }}
|
||||
onSelectBranch={(p) => { setBranchPath(p); setSelectedKey(null); }}
|
||||
onToggleBranch={(p, willOpen) => {
|
||||
setExpandedPaths((cur) => {
|
||||
const next = new Set(cur);
|
||||
if (willOpen) next.add(p); else next.delete(p);
|
||||
return next;
|
||||
});
|
||||
}}
|
||||
/>
|
||||
) : (
|
||||
<KVTree
|
||||
selectedKey={selectedKey}
|
||||
expandedPaths={expandedPaths}
|
||||
reloadToken={reloadToken}
|
||||
onSelectLeaf={(k) => { setSelectedKey(k); setBranchPath(null); }}
|
||||
onSelectBranch={(p) => { setBranchPath(p); setSelectedKey(null); }}
|
||||
onToggleBranch={(p, willOpen) => {
|
||||
setExpandedPaths((cur) => {
|
||||
const next = new Set(cur);
|
||||
if (willOpen) next.add(p); else next.delete(p);
|
||||
return next;
|
||||
});
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</aside>
|
||||
<main className="kv-app-right">
|
||||
{selectedKey ? (
|
||||
<KVLeafEditor
|
||||
selectedKey={selectedKey}
|
||||
reloadToken={reloadToken}
|
||||
onSaved={() => {
|
||||
pushToast(makeToast('success', `Saved ${selectedKey}`));
|
||||
setReloadToken((n) => n + 1);
|
||||
}}
|
||||
onDeleted={() => {
|
||||
pushToast(makeToast('success', `Deleted ${selectedKey}`));
|
||||
setSelectedKey(null);
|
||||
setReloadToken((n) => n + 1);
|
||||
}}
|
||||
onError={(msg) => pushToast(makeToast('error', msg))}
|
||||
/>
|
||||
) : branchPath ? (
|
||||
<KVBranchEditor
|
||||
branchPath={branchPath}
|
||||
reloadToken={reloadToken}
|
||||
onChanged={(info, errors) => {
|
||||
pushToast(makeToast(errors && errors.length > 0 ? 'error' : 'success', info, errors));
|
||||
setReloadToken((n) => n + 1);
|
||||
}}
|
||||
/>
|
||||
) : (
|
||||
<div className="kv-pane-status kv-pane-empty">
|
||||
Select a key from the tree.
|
||||
<div className="kv-pane-hint">
|
||||
Click a branch to add / rename / delete a subtree, or a leaf to edit its value.
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</main>
|
||||
</div>
|
||||
|
||||
<ToastStack toasts={toasts} onDismiss={dismissToast} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -0,0 +1,194 @@
|
||||
import { useEffect, useState } from 'react';
|
||||
import { KVAPI } from '../api/kvApi';
|
||||
|
||||
interface Props {
|
||||
// Branch path, ends with the delimiter (":" or "/").
|
||||
branchPath: string;
|
||||
reloadToken: number;
|
||||
onChanged: (info: string, errors?: string[]) => void;
|
||||
}
|
||||
|
||||
// Branch operations are non-atomic — each per-key write/delete goes one round
|
||||
// trip to Redis and may fail individually. Failures collect into a list and
|
||||
// surface via the parent's toast stack. Per the design, we accept partial
|
||||
// failure and surface what failed.
|
||||
export function KVBranchEditor({ branchPath, reloadToken, onChanged }: Props) {
|
||||
const [count, setCount] = useState<number | null>(null);
|
||||
const [busy, setBusy] = useState(false);
|
||||
const [newChild, setNewChild] = useState('');
|
||||
const [newValue, setNewValue] = useState('');
|
||||
const [renameTo, setRenameTo] = useState('');
|
||||
|
||||
// Use the search endpoint with the branch path as the substring to count
|
||||
// descendants. Truncated when there are more than the limit; we just show
|
||||
// an approximate count.
|
||||
useEffect(() => {
|
||||
let cancelled = false;
|
||||
KVAPI.search(branchPath, 5000)
|
||||
.then((r) => {
|
||||
if (cancelled) return;
|
||||
// Filter to true descendants (those starting with branchPath).
|
||||
const descendants = r.keys.filter((k) => k.startsWith(branchPath));
|
||||
setCount(descendants.length);
|
||||
})
|
||||
.catch(() => { if (!cancelled) setCount(null); });
|
||||
return () => { cancelled = true; };
|
||||
}, [branchPath, reloadToken]);
|
||||
|
||||
// Walk all descendants and run an op against each, collecting failures.
|
||||
const forEachDescendant = async (op: (key: string) => Promise<void>): Promise<string[]> => {
|
||||
const r = await KVAPI.search(branchPath, 5000);
|
||||
const keys = r.keys.filter((k) => k.startsWith(branchPath));
|
||||
const errors: string[] = [];
|
||||
for (const k of keys) {
|
||||
try { await op(k); } catch (e: any) { errors.push(`${k}: ${e.message}`); }
|
||||
}
|
||||
return errors;
|
||||
};
|
||||
|
||||
const addChild = async () => {
|
||||
if (!newChild) return;
|
||||
const childKey = branchPath + newChild;
|
||||
setBusy(true);
|
||||
try {
|
||||
await KVAPI.put(childKey, newValue);
|
||||
setNewChild('');
|
||||
setNewValue('');
|
||||
onChanged(`Created ${childKey}`);
|
||||
} catch (e: any) {
|
||||
onChanged(`Failed to create ${childKey}`, [e.message]);
|
||||
} finally {
|
||||
setBusy(false);
|
||||
}
|
||||
};
|
||||
|
||||
const deleteSubtree = async () => {
|
||||
if (!confirm(`Delete every key under ${branchPath} (${count ?? '?'} entries)?`)) return;
|
||||
setBusy(true);
|
||||
try {
|
||||
const errors = await forEachDescendant((k) => KVAPI.del(k).then(() => undefined));
|
||||
if (errors.length === 0) {
|
||||
onChanged(`Deleted subtree ${branchPath}`);
|
||||
} else {
|
||||
onChanged(`Deleted subtree ${branchPath} with ${errors.length} failure(s)`, errors);
|
||||
}
|
||||
} finally {
|
||||
setBusy(false);
|
||||
}
|
||||
};
|
||||
|
||||
const renameBranch = async () => {
|
||||
if (!renameTo) return;
|
||||
const target = renameTo.endsWith('/') || renameTo.endsWith(':') ? renameTo : renameTo + '/';
|
||||
if (target === branchPath) return;
|
||||
if (!confirm(`Rename ${branchPath} → ${target}? This copies ${count ?? '?'} keys then deletes the originals.`)) return;
|
||||
setBusy(true);
|
||||
try {
|
||||
// Pass 1: copy
|
||||
const r = await KVAPI.search(branchPath, 5000);
|
||||
const keys = r.keys.filter((k) => k.startsWith(branchPath));
|
||||
const copyErrors: string[] = [];
|
||||
for (const oldKey of keys) {
|
||||
try {
|
||||
const v = await KVAPI.get(oldKey);
|
||||
if (!v.exists || v.type !== 'string') {
|
||||
copyErrors.push(`${oldKey}: skipped (type ${v.type || 'missing'})`);
|
||||
continue;
|
||||
}
|
||||
const newKey = target + oldKey.slice(branchPath.length);
|
||||
await KVAPI.put(newKey, v.value);
|
||||
} catch (e: any) {
|
||||
copyErrors.push(`${oldKey}: ${e.message}`);
|
||||
}
|
||||
}
|
||||
// Pass 2: delete originals (only the ones we successfully copied)
|
||||
const failedOldKeys = new Set(copyErrors.map((e) => e.split(':')[0]));
|
||||
const deleteErrors: string[] = [];
|
||||
for (const oldKey of keys) {
|
||||
if (failedOldKeys.has(oldKey)) continue;
|
||||
try { await KVAPI.del(oldKey); } catch (e: any) { deleteErrors.push(`${oldKey}: ${e.message}`); }
|
||||
}
|
||||
const allErrors = [...copyErrors, ...deleteErrors];
|
||||
if (allErrors.length === 0) {
|
||||
onChanged(`Renamed ${branchPath} → ${target}`);
|
||||
} else {
|
||||
onChanged(`Renamed ${branchPath} → ${target} with ${allErrors.length} failure(s)`, allErrors);
|
||||
}
|
||||
setRenameTo('');
|
||||
} finally {
|
||||
setBusy(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="kv-branch">
|
||||
<div className="kv-leaf-key">
|
||||
<code className="kv-leaf-key-text">{branchPath}</code>
|
||||
<button
|
||||
className="kv-btn-icon"
|
||||
onClick={() => navigator.clipboard.writeText(branchPath)}
|
||||
title="copy path"
|
||||
>⧉</button>
|
||||
</div>
|
||||
|
||||
<div className="kv-pane-status">
|
||||
{count == null ? 'counting…' : `${count} descendant key${count === 1 ? '' : 's'}`}
|
||||
</div>
|
||||
|
||||
<section className="kv-branch-section">
|
||||
<h4>Add child</h4>
|
||||
<div className="kv-branch-row">
|
||||
<span className="kv-branch-prefix">{branchPath}</span>
|
||||
<input
|
||||
className="kv-leaf-input"
|
||||
placeholder="child path (may contain /)"
|
||||
value={newChild}
|
||||
onChange={(e) => setNewChild(e.target.value)}
|
||||
disabled={busy}
|
||||
/>
|
||||
</div>
|
||||
<input
|
||||
className="kv-leaf-input"
|
||||
placeholder="value"
|
||||
value={newValue}
|
||||
onChange={(e) => setNewValue(e.target.value)}
|
||||
disabled={busy}
|
||||
/>
|
||||
<button className="kv-btn kv-btn-primary" disabled={!newChild || busy} onClick={addChild}>
|
||||
Add
|
||||
</button>
|
||||
</section>
|
||||
|
||||
<section className="kv-branch-section">
|
||||
<h4>Rename branch</h4>
|
||||
<div className="kv-branch-row">
|
||||
<span className="kv-branch-prefix">→</span>
|
||||
<input
|
||||
className="kv-leaf-input"
|
||||
placeholder="new prefix (e.g. file:newhash/)"
|
||||
value={renameTo}
|
||||
onChange={(e) => setRenameTo(e.target.value)}
|
||||
disabled={busy}
|
||||
/>
|
||||
</div>
|
||||
<p className="kv-branch-note">
|
||||
Non-atomic: copies each descendant to the new prefix then deletes the original.
|
||||
Failures are surfaced individually.
|
||||
</p>
|
||||
<button className="kv-btn" disabled={!renameTo || busy} onClick={renameBranch}>
|
||||
Rename
|
||||
</button>
|
||||
</section>
|
||||
|
||||
<section className="kv-branch-section">
|
||||
<h4>Delete subtree</h4>
|
||||
<p className="kv-branch-note">
|
||||
Deletes every descendant key. Cannot be undone.
|
||||
</p>
|
||||
<button className="kv-btn kv-btn-danger" disabled={busy || count === 0} onClick={deleteSubtree}>
|
||||
Delete {count ?? ''} key{count === 1 ? '' : 's'}
|
||||
</button>
|
||||
</section>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,257 @@
|
||||
import { useEffect, useState } from 'react';
|
||||
import { KVAPI } from '../api/kvApi';
|
||||
import { LanguageCombobox } from '../components/LanguageCombobox';
|
||||
import { ALL_TYPES, describeType, detectType } from './typeHeuristics';
|
||||
import { FieldType } from './types';
|
||||
|
||||
interface Props {
|
||||
// Full Redis key path of the selected leaf.
|
||||
selectedKey: string;
|
||||
// Bumped after a delete or external change to force refetch.
|
||||
reloadToken: number;
|
||||
onSaved: () => void;
|
||||
onDeleted: () => void;
|
||||
onError: (msg: string) => void;
|
||||
}
|
||||
|
||||
export function KVLeafEditor({ selectedKey, reloadToken, onSaved, onDeleted, onError }: Props) {
|
||||
const [original, setOriginal] = useState<string>('');
|
||||
const [draft, setDraft] = useState<string>('');
|
||||
const [exists, setExists] = useState<boolean>(true);
|
||||
const [redisType, setRedisType] = useState<string>('');
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [saving, setSaving] = useState(false);
|
||||
|
||||
// Manual override for the inferred type. "auto" defers to detectType.
|
||||
const [typeOverride, setTypeOverride] = useState<FieldType>('auto');
|
||||
const detected = detectType(selectedKey, original);
|
||||
const effectiveType = typeOverride === 'auto' ? detected : typeOverride;
|
||||
|
||||
// Reset override when the selected key changes — the previous override
|
||||
// doesn't apply to a different leaf.
|
||||
useEffect(() => { setTypeOverride('auto'); }, [selectedKey]);
|
||||
|
||||
useEffect(() => {
|
||||
let cancelled = false;
|
||||
setLoading(true);
|
||||
KVAPI.get(selectedKey)
|
||||
.then((r) => {
|
||||
if (cancelled) return;
|
||||
setOriginal(r.value);
|
||||
setDraft(r.value);
|
||||
setExists(r.exists);
|
||||
setRedisType(r.type);
|
||||
})
|
||||
.catch((e) => onError(e.message))
|
||||
.finally(() => { if (!cancelled) setLoading(false); });
|
||||
return () => { cancelled = true; };
|
||||
}, [selectedKey, reloadToken, onError]);
|
||||
|
||||
const dirty = draft !== original;
|
||||
const editable = exists ? redisType === 'string' || redisType === '' : true;
|
||||
|
||||
const save = async () => {
|
||||
setSaving(true);
|
||||
try {
|
||||
await KVAPI.put(selectedKey, draft);
|
||||
setOriginal(draft);
|
||||
setExists(true);
|
||||
setRedisType('string');
|
||||
onSaved();
|
||||
} catch (e: any) {
|
||||
onError(e.message);
|
||||
} finally {
|
||||
setSaving(false);
|
||||
}
|
||||
};
|
||||
|
||||
const del = async () => {
|
||||
if (!confirm(`Delete ${selectedKey}?`)) return;
|
||||
setSaving(true);
|
||||
try {
|
||||
await KVAPI.del(selectedKey);
|
||||
onDeleted();
|
||||
} catch (e: any) {
|
||||
onError(e.message);
|
||||
} finally {
|
||||
setSaving(false);
|
||||
}
|
||||
};
|
||||
|
||||
if (loading) {
|
||||
return <div className="kv-pane-status">loading…</div>;
|
||||
}
|
||||
|
||||
if (!editable) {
|
||||
return (
|
||||
<div className="kv-leaf">
|
||||
<KeyHeader keyPath={selectedKey} />
|
||||
<div className="kv-pane-status">
|
||||
Key has Redis type <code>{redisType}</code> — only string-typed values are editable here.
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="kv-leaf">
|
||||
<KeyHeader keyPath={selectedKey} />
|
||||
|
||||
<div className="kv-leaf-meta">
|
||||
<label className="kv-leaf-label">Type</label>
|
||||
<select
|
||||
className="kv-leaf-type"
|
||||
value={typeOverride}
|
||||
onChange={(e) => setTypeOverride(e.target.value as FieldType)}
|
||||
>
|
||||
{ALL_TYPES.map((t) => (
|
||||
<option key={t} value={t}>
|
||||
{t === 'auto' ? `auto (${describeType(detected)})` : describeType(t)}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
{!exists && <span className="kv-leaf-hint">new key — save to create</span>}
|
||||
</div>
|
||||
|
||||
<ValueEditor type={effectiveType} value={draft} onChange={setDraft} />
|
||||
|
||||
<div className="kv-leaf-actions">
|
||||
<button
|
||||
className="kv-btn kv-btn-primary"
|
||||
onClick={save}
|
||||
disabled={!dirty || saving}
|
||||
>{saving ? 'saving…' : exists ? 'Save' : 'Create'}</button>
|
||||
<button
|
||||
className="kv-btn"
|
||||
onClick={() => setDraft(original)}
|
||||
disabled={!dirty || saving}
|
||||
>Reset</button>
|
||||
{exists && (
|
||||
<button
|
||||
className="kv-btn kv-btn-danger"
|
||||
onClick={del}
|
||||
disabled={saving}
|
||||
>Delete</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function KeyHeader({ keyPath }: { keyPath: string }) {
|
||||
return (
|
||||
<div className="kv-leaf-key">
|
||||
<code className="kv-leaf-key-text">{keyPath}</code>
|
||||
<button
|
||||
className="kv-btn-icon"
|
||||
onClick={() => navigator.clipboard.writeText(keyPath)}
|
||||
title="copy key"
|
||||
>⧉</button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
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)}
|
||||
/>
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,255 @@
|
||||
import { useEffect, useMemo, useState } from 'react';
|
||||
import { KVAPI } from '../api/kvApi';
|
||||
|
||||
// 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';
|
||||
|
||||
interface TreeNode {
|
||||
kind: NodeKind;
|
||||
// Display label: the segment of the path under the parent.
|
||||
label: string;
|
||||
// Full key path. For branches, ends with the delimiter.
|
||||
path: string;
|
||||
}
|
||||
|
||||
interface BranchState {
|
||||
loaded: boolean;
|
||||
loading: boolean;
|
||||
error?: string;
|
||||
children: TreeNode[];
|
||||
}
|
||||
|
||||
// Sub-segment of a path used as the visible label for a branch / leaf.
|
||||
// Splits on either ":" or "/" so file:abc/title/eng becomes file: > abc > title > eng.
|
||||
function labelOf(path: string, parentPath: string): string {
|
||||
const rest = path.slice(parentPath.length);
|
||||
// The "rest" includes a trailing delimiter for branches; strip it for display.
|
||||
return rest.replace(/[/:]+$/, '');
|
||||
}
|
||||
|
||||
// Hide internal Redis structures from the tree:
|
||||
// - the `meta:` namespace (event streams, internal state)
|
||||
// - bare top-level leaves under a colon-namespace like file:__index__ and
|
||||
// file:events (Redis sets / streams that aren't user data).
|
||||
function isHiddenNode(node: TreeNode): boolean {
|
||||
if (node.kind === 'branch' && node.path === 'meta:') return true;
|
||||
if (node.kind === 'leaf' && /^[^/]+:[^/]+$/.test(node.path)) return true;
|
||||
return false;
|
||||
}
|
||||
|
||||
interface Props {
|
||||
// Selected leaf path (full key) — highlighted.
|
||||
selectedKey: string | null;
|
||||
// When set, the tree forces these branches open (used for auto-expand on
|
||||
// search hit or deep-link).
|
||||
expandedPaths: Set<string>;
|
||||
onSelectLeaf: (key: string) => void;
|
||||
onSelectBranch: (path: string) => void;
|
||||
onToggleBranch: (path: string, willOpen: boolean) => void;
|
||||
// Bumping this triggers a full reload of root and any expanded branches.
|
||||
reloadToken: number;
|
||||
}
|
||||
|
||||
export function KVTree({
|
||||
selectedKey,
|
||||
expandedPaths,
|
||||
onSelectLeaf,
|
||||
onSelectBranch,
|
||||
onToggleBranch,
|
||||
reloadToken,
|
||||
}: Props) {
|
||||
// Map of branch path → load state. The empty key "" represents the root.
|
||||
const [branches, setBranches] = useState<Record<string, BranchState>>({});
|
||||
|
||||
// Load (or reload) a branch's children from the API. The root is special-
|
||||
// cased: we list at prefix="" with delimiter=":" to surface the namespaces.
|
||||
const loadBranch = async (path: string) => {
|
||||
setBranches((b) => ({
|
||||
...b,
|
||||
[path]: { loaded: false, loading: true, children: b[path]?.children ?? [] },
|
||||
}));
|
||||
try {
|
||||
const isRoot = path === '';
|
||||
const delim = isRoot ? ':' : '/';
|
||||
const resp = await KVAPI.treeAll(path, delim, 5000);
|
||||
const branchNodes: TreeNode[] = resp.branches.map((p) => ({
|
||||
kind: 'branch',
|
||||
label: labelOf(p, path) + delim,
|
||||
path: p,
|
||||
}));
|
||||
const leafNodes: TreeNode[] = resp.leaves.map((p) => ({
|
||||
kind: 'leaf',
|
||||
label: labelOf(p, path),
|
||||
path: p,
|
||||
}));
|
||||
const children = [...branchNodes, ...leafNodes];
|
||||
setBranches((b) => ({
|
||||
...b,
|
||||
[path]: { loaded: true, loading: false, children },
|
||||
}));
|
||||
} catch (err: any) {
|
||||
setBranches((b) => ({
|
||||
...b,
|
||||
[path]: { loaded: false, loading: false, children: [], error: err.message },
|
||||
}));
|
||||
}
|
||||
};
|
||||
|
||||
// On reloadToken change, refetch root and every currently-expanded branch.
|
||||
useEffect(() => {
|
||||
loadBranch('');
|
||||
for (const p of expandedPaths) {
|
||||
if (p !== '') loadBranch(p);
|
||||
}
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [reloadToken]);
|
||||
|
||||
// Whenever expandedPaths gains a path we haven't loaded yet, lazy-load it.
|
||||
useEffect(() => {
|
||||
for (const p of expandedPaths) {
|
||||
if (p === '') continue;
|
||||
const state = branches[p];
|
||||
if (!state || (!state.loaded && !state.loading)) {
|
||||
loadBranch(p);
|
||||
}
|
||||
}
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [expandedPaths]);
|
||||
|
||||
return (
|
||||
<div className="kv-tree">
|
||||
<Branch
|
||||
path=""
|
||||
state={branches['']}
|
||||
depth={0}
|
||||
expandedPaths={expandedPaths}
|
||||
branches={branches}
|
||||
selectedKey={selectedKey}
|
||||
onSelectLeaf={onSelectLeaf}
|
||||
onSelectBranch={onSelectBranch}
|
||||
onToggleBranch={(p, open) => {
|
||||
onToggleBranch(p, open);
|
||||
if (open && (!branches[p] || !branches[p].loaded)) loadBranch(p);
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
interface BranchProps {
|
||||
path: string;
|
||||
state: BranchState | undefined;
|
||||
depth: number;
|
||||
expandedPaths: Set<string>;
|
||||
branches: Record<string, BranchState>;
|
||||
selectedKey: string | null;
|
||||
onSelectLeaf: (key: string) => void;
|
||||
onSelectBranch: (path: string) => void;
|
||||
onToggleBranch: (path: string, willOpen: boolean) => void;
|
||||
}
|
||||
|
||||
function Branch({
|
||||
state, depth, expandedPaths, branches,
|
||||
selectedKey, onSelectLeaf, onSelectBranch, onToggleBranch,
|
||||
}: BranchProps) {
|
||||
if (!state) {
|
||||
return null;
|
||||
}
|
||||
if (state.loading && state.children.length === 0) {
|
||||
return <div className="kv-tree-loading" style={{ paddingLeft: depth * 14 + 18 }}>loading…</div>;
|
||||
}
|
||||
if (state.error) {
|
||||
return <div className="kv-tree-error" style={{ paddingLeft: depth * 14 + 18 }}>error: {state.error}</div>;
|
||||
}
|
||||
const visibleChildren = state.children.filter((c) => !isHiddenNode(c));
|
||||
if (visibleChildren.length === 0) {
|
||||
return <div className="kv-tree-empty" style={{ paddingLeft: depth * 14 + 18 }}>(empty)</div>;
|
||||
}
|
||||
return (
|
||||
<ul className="kv-tree-list">
|
||||
{visibleChildren.map((node) => {
|
||||
if (node.kind === 'branch') {
|
||||
const open = expandedPaths.has(node.path);
|
||||
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={() => {
|
||||
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}
|
||||
state={childState}
|
||||
depth={depth + 1}
|
||||
expandedPaths={expandedPaths}
|
||||
branches={branches}
|
||||
selectedKey={selectedKey}
|
||||
onSelectLeaf={onSelectLeaf}
|
||||
onSelectBranch={onSelectBranch}
|
||||
onToggleBranch={onToggleBranch}
|
||||
/>
|
||||
)}
|
||||
</li>
|
||||
);
|
||||
}
|
||||
const isSelected = node.path === selectedKey;
|
||||
return (
|
||||
<li key={node.path}>
|
||||
<div
|
||||
className={`kv-tree-row kv-tree-leaf${isSelected ? ' selected' : ''}`}
|
||||
style={{ paddingLeft: depth * 14 + 4 }}
|
||||
onClick={() => onSelectLeaf(node.path)}
|
||||
>
|
||||
<span className="kv-tree-leaf-dot">•</span>
|
||||
<span className="kv-tree-label">{node.label}</span>
|
||||
</div>
|
||||
</li>
|
||||
);
|
||||
})}
|
||||
</ul>
|
||||
);
|
||||
}
|
||||
|
||||
// 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[] {
|
||||
const out: string[] = [];
|
||||
let i = 0;
|
||||
while (i < key.length) {
|
||||
const next = nextSep(key, i);
|
||||
if (next < 0) break;
|
||||
out.push(key.slice(0, next + 1));
|
||||
i = next + 1;
|
||||
}
|
||||
return out;
|
||||
}
|
||||
|
||||
function nextSep(s: string, from: number): number {
|
||||
let best = -1;
|
||||
for (const d of [':', '/']) {
|
||||
const idx = s.indexOf(d, from);
|
||||
if (idx >= 0 && (best < 0 || idx < best)) best = idx;
|
||||
}
|
||||
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,57 @@
|
||||
import { useState } from 'react';
|
||||
|
||||
interface Props {
|
||||
fields: string[];
|
||||
onChange: (fields: string[]) => void;
|
||||
}
|
||||
|
||||
// Pill list of field names that the value-search uses. Each pill is removable;
|
||||
// the inline input adds a new field on Enter or comma. Persisting to
|
||||
// localStorage is the parent's responsibility.
|
||||
export function SearchFieldChips({ fields, onChange }: Props) {
|
||||
const [input, setInput] = useState('');
|
||||
|
||||
const add = (raw: string) => {
|
||||
const next = raw.trim().replace(/,+$/, '');
|
||||
if (!next) return;
|
||||
if (fields.includes(next)) return;
|
||||
onChange([...fields, next]);
|
||||
setInput('');
|
||||
};
|
||||
|
||||
const remove = (f: string) => onChange(fields.filter((x) => x !== f));
|
||||
|
||||
return (
|
||||
<div className="kv-chips">
|
||||
<span className="kv-chips-label">search in:</span>
|
||||
{fields.map((f) => (
|
||||
<span key={f} className="kv-chip">
|
||||
<code>{f}</code>
|
||||
<button
|
||||
className="kv-chip-x"
|
||||
onClick={() => remove(f)}
|
||||
title={`remove ${f}`}
|
||||
aria-label={`remove ${f}`}
|
||||
>×</button>
|
||||
</span>
|
||||
))}
|
||||
<input
|
||||
className="kv-chip-input"
|
||||
type="text"
|
||||
value={input}
|
||||
placeholder="+ field"
|
||||
onChange={(e) => {
|
||||
const v = e.target.value;
|
||||
if (v.endsWith(',')) add(v);
|
||||
else setInput(v);
|
||||
}}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === 'Enter') { e.preventDefault(); add(input); }
|
||||
if (e.key === 'Backspace' && input === '' && fields.length > 0) {
|
||||
remove(fields[fields.length - 1]);
|
||||
}
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,45 @@
|
||||
import { useEffect } from 'react';
|
||||
import { ToastEntry } from './types';
|
||||
|
||||
interface Props {
|
||||
toasts: ToastEntry[];
|
||||
onDismiss: (id: number) => void;
|
||||
}
|
||||
|
||||
export function ToastStack({ toasts, onDismiss }: Props) {
|
||||
return (
|
||||
<div className="kv-toast-stack">
|
||||
{toasts.map((t) => (
|
||||
<Toast key={t.id} entry={t} onDismiss={() => onDismiss(t.id)} />
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function Toast({ entry, onDismiss }: { entry: ToastEntry; onDismiss: () => void }) {
|
||||
useEffect(() => {
|
||||
if (entry.kind === 'error') return;
|
||||
const timer = setTimeout(onDismiss, 4500);
|
||||
return () => clearTimeout(timer);
|
||||
}, [entry.kind, onDismiss]);
|
||||
|
||||
return (
|
||||
<div className={`kv-toast kv-toast-${entry.kind}`}>
|
||||
<div className="kv-toast-row">
|
||||
<span className="kv-toast-text">{entry.text}</span>
|
||||
<button className="kv-toast-close" onClick={onDismiss} aria-label="dismiss">×</button>
|
||||
</div>
|
||||
{entry.details && entry.details.length > 0 && (
|
||||
<ul className="kv-toast-details">
|
||||
{entry.details.slice(0, 8).map((d, i) => <li key={i}>{d}</li>)}
|
||||
{entry.details.length > 8 && <li>… {entry.details.length - 8} more</li>}
|
||||
</ul>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
let nextId = 1;
|
||||
export function makeToast(kind: ToastEntry['kind'], text: string, details?: string[]): ToastEntry {
|
||||
return { id: nextId++, kind, text, details };
|
||||
}
|
||||
@@ -0,0 +1,59 @@
|
||||
import { FieldType } from './types';
|
||||
|
||||
// Path-pattern table. The leftmost segment of the path that matches wins.
|
||||
// Order matters: more specific patterns should appear first.
|
||||
const PATH_PATTERNS: Array<[RegExp, FieldType]> = [
|
||||
[/(^|\/)(language|lang|audioLang|subLang)$/i, 'lang'],
|
||||
[/(^|\/)(cid_|hash$|sha\d|midhash|md5|crc32)/i, 'hash'],
|
||||
[/(^|\/)(duration|bitrate|fps|width|height|count|size|sizeByte|increment|episode|season|year|runtime|trackId|index)$/i, 'number'],
|
||||
[/(^|\/)(enabled|active|disabled|isHidden|hidden|favorite|watched)$/i, 'bool'],
|
||||
[/(^|\/)(url|uri|href|link|posterUrl|backdropUrl|imageUrl)$/i, 'url'],
|
||||
[/(^|\/)(.+_at|.+At|.+Date|.+Time|timestamp|createdAt|updatedAt)$/i, 'datetime'],
|
||||
[/(^|\/)(description|overview|notes?|comment|summary|nfo)$/i, 'text'],
|
||||
];
|
||||
|
||||
export 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 {
|
||||
if (v === '') return 'string';
|
||||
if (v === 'true' || v === 'false') return 'bool';
|
||||
if (/^-?\d+$/.test(v)) return 'number';
|
||||
if (/^-?\d*\.\d+$/.test(v)) return 'number';
|
||||
if (/^https?:\/\//i.test(v)) return 'url';
|
||||
const trimmed = v.trim();
|
||||
if ((trimmed.startsWith('{') && trimmed.endsWith('}')) || (trimmed.startsWith('[') && trimmed.endsWith(']'))) {
|
||||
try { JSON.parse(trimmed); return 'json'; } catch {}
|
||||
}
|
||||
if (v.includes('\n') || v.length > 200) return 'text';
|
||||
return 'string';
|
||||
}
|
||||
|
||||
// Combine path and value heuristics. Path wins when it matches; otherwise
|
||||
// fall back to value shape.
|
||||
export function detectType(path: string, value: string): FieldType {
|
||||
return detectFromPath(path) ?? detectFromValue(value);
|
||||
}
|
||||
|
||||
export const ALL_TYPES: FieldType[] = [
|
||||
'auto', 'string', 'text', 'number', 'bool', 'json', 'url', 'lang', 'datetime', 'hash',
|
||||
];
|
||||
|
||||
export function describeType(t: FieldType): string {
|
||||
switch (t) {
|
||||
case 'auto': return 'auto';
|
||||
case 'string': return 'string';
|
||||
case 'text': return 'text (multiline)';
|
||||
case 'number': return 'number';
|
||||
case 'bool': return 'bool';
|
||||
case 'json': return 'json';
|
||||
case 'url': return 'url';
|
||||
case 'lang': return 'language code';
|
||||
case 'datetime': return 'datetime';
|
||||
case 'hash': return 'hash / cid';
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,19 @@
|
||||
// Inferred type for a leaf value. "auto" defers to the heuristic detector.
|
||||
export type FieldType =
|
||||
| 'auto'
|
||||
| 'string'
|
||||
| 'number'
|
||||
| 'bool'
|
||||
| 'json'
|
||||
| 'url'
|
||||
| 'text'
|
||||
| 'lang'
|
||||
| 'datetime'
|
||||
| 'hash';
|
||||
|
||||
export interface ToastEntry {
|
||||
id: number;
|
||||
kind: 'info' | 'success' | 'error';
|
||||
text: string;
|
||||
details?: string[];
|
||||
}
|
||||
+2
-2
@@ -1,10 +1,10 @@
|
||||
import { StrictMode } from 'react';
|
||||
import { createRoot } from 'react-dom/client';
|
||||
import './index.css';
|
||||
import App from './App.tsx';
|
||||
import KVApp from './kv/KVApp.tsx';
|
||||
|
||||
createRoot(document.getElementById('root')!).render(
|
||||
<StrictMode>
|
||||
<App />
|
||||
<KVApp />
|
||||
</StrictMode>,
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user