Projekt-Settings-Dialog + Library Phase A + Material-Merger
- Project-Settings-Dialog (Voreinstellungen Geschoss/Schnitt + Material-Editor) ueber Zahnrad-Icon in Oberleiste; Defaults werden in schnitte.pick_schnitt + GeschossManager als Vorgabe genommen, pro-Element-Werte unangetastet - Dossier-Library Phase A (lokal, read-only): rhino/library.py + LibraryBrowser Satellite; Seed-Manifest unter ~/Library/Application Support/Dossier/library/ - Material-Merger: _get_all_materials(doc) merged builtin _MATERIAL_LIBRARY mit Projekt-Settings-Materialien (inkl. Library-Imports); Wand-Erstellung, Sub-Layer-Anlage + Elemente-Material-Dropdown ziehen jetzt aus dem Merge Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
@@ -0,0 +1,202 @@
|
||||
import { useState, useMemo } from 'react'
|
||||
import Icon from './Icon'
|
||||
|
||||
/* MaterialCard — Preview-Swatch + Name + Tags + Import-Button. */
|
||||
function MaterialCard({ item, imported, onImport }) {
|
||||
const color = item.data?.color || '#888888'
|
||||
return (
|
||||
<div style={{
|
||||
display: 'flex', flexDirection: 'column',
|
||||
border: '1px solid var(--border)', borderRadius: 6,
|
||||
background: 'var(--bg-section)',
|
||||
overflow: 'hidden',
|
||||
cursor: imported ? 'default' : 'pointer',
|
||||
opacity: imported ? 0.75 : 1,
|
||||
}}
|
||||
onDoubleClick={() => { if (!imported) onImport(item.id) }}
|
||||
title={imported ? 'Bereits importiert' : 'Doppelklick = importieren'}>
|
||||
<div style={{
|
||||
height: 64,
|
||||
background: color,
|
||||
borderBottom: '1px solid var(--border-light)',
|
||||
}} />
|
||||
<div style={{ padding: '6px 8px', display: 'flex',
|
||||
flexDirection: 'column', gap: 4 }}>
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: 4 }}>
|
||||
<span style={{ flex: 1, fontSize: 11, fontWeight: 600,
|
||||
color: 'var(--text-primary)',
|
||||
overflow: 'hidden', textOverflow: 'ellipsis',
|
||||
whiteSpace: 'nowrap' }}>
|
||||
{item.name}
|
||||
</span>
|
||||
{imported && (
|
||||
<Icon name="check" size={12}
|
||||
style={{ color: 'var(--accent)' }} />
|
||||
)}
|
||||
</div>
|
||||
{(item.tags || []).length > 0 && (
|
||||
<div style={{ display: 'flex', flexWrap: 'wrap', gap: 3 }}>
|
||||
{(item.tags || []).slice(0, 4).map(t => (
|
||||
<span key={t} style={{
|
||||
fontSize: 9, color: 'var(--text-muted)',
|
||||
background: 'var(--bg-input)',
|
||||
padding: '1px 5px', borderRadius: 999,
|
||||
}}>{t}</span>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
<button
|
||||
onClick={() => { if (!imported) onImport(item.id) }}
|
||||
disabled={imported}
|
||||
style={{
|
||||
marginTop: 2, padding: '3px 6px', fontSize: 10,
|
||||
background: imported ? 'transparent' : 'var(--accent)',
|
||||
color: imported ? 'var(--text-muted)' : '#fff',
|
||||
border: imported ? '1px solid var(--border)' : 'none',
|
||||
borderRadius: 999, cursor: imported ? 'default' : 'pointer',
|
||||
}}>
|
||||
{imported ? 'Importiert' : 'Importieren'}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default function LibraryBrowser({
|
||||
manifest, importedIds, libraryRoot,
|
||||
onImport, onReload, onClose,
|
||||
}) {
|
||||
const [search, setSearch] = useState('')
|
||||
const [typeFilter, setTypeFilter] = useState('all')
|
||||
|
||||
const items = manifest?.items || []
|
||||
const importedSet = useMemo(() => new Set(importedIds || []),
|
||||
[importedIds])
|
||||
|
||||
const filtered = useMemo(() => {
|
||||
const q = search.trim().toLowerCase()
|
||||
return items.filter(it => {
|
||||
if (typeFilter !== 'all' && it.type !== typeFilter) return false
|
||||
if (!q) return true
|
||||
if ((it.name || '').toLowerCase().includes(q)) return true
|
||||
if ((it.tags || []).some(t => t.toLowerCase().includes(q))) return true
|
||||
return false
|
||||
})
|
||||
}, [items, search, typeFilter])
|
||||
|
||||
const types = useMemo(() => {
|
||||
const s = new Set(items.map(i => i.type))
|
||||
return ['all', ...Array.from(s)]
|
||||
}, [items])
|
||||
|
||||
return (
|
||||
<div style={{
|
||||
width: '100%', height: '100%',
|
||||
background: 'var(--bg-dialog)',
|
||||
display: 'flex', flexDirection: 'column',
|
||||
overflow: 'hidden',
|
||||
fontFamily: 'var(--font)', color: 'var(--text-primary)', fontSize: 11,
|
||||
}}>
|
||||
{/* Header */}
|
||||
<div style={{
|
||||
display: 'flex', alignItems: 'center', gap: 6,
|
||||
padding: '10px 12px',
|
||||
borderBottom: '1px solid var(--border)',
|
||||
}}>
|
||||
<Icon name="inventory_2" size={14}
|
||||
style={{ color: 'var(--accent)', flexShrink: 0 }} />
|
||||
<span style={{ flex: 1, fontWeight: 600, fontSize: 11 }}>
|
||||
{manifest?.name || 'Dossier-Library'}
|
||||
</span>
|
||||
<button onClick={onReload}
|
||||
title="Manifest neu laden"
|
||||
style={{ background: 'transparent', border: 'none',
|
||||
cursor: 'pointer', color: 'var(--text-muted)',
|
||||
padding: '0 4px' }}>
|
||||
<Icon name="refresh" size={14} />
|
||||
</button>
|
||||
<button onClick={onClose}
|
||||
style={{ color: 'var(--text-muted)', fontSize: 16,
|
||||
padding: '0 4px', lineHeight: 1 }}>×</button>
|
||||
</div>
|
||||
|
||||
{/* Toolbar */}
|
||||
<div style={{
|
||||
display: 'flex', alignItems: 'center', gap: 6,
|
||||
padding: '8px 12px',
|
||||
borderBottom: '1px solid var(--border)',
|
||||
}}>
|
||||
<input type="text" value={search}
|
||||
onChange={(ev) => setSearch(ev.target.value)}
|
||||
placeholder="Suchen (Name oder Tag)…"
|
||||
style={{ flex: 1, fontSize: 11, padding: '4px 8px',
|
||||
borderRadius: 999 }} />
|
||||
<div style={{ display: 'flex', gap: 0,
|
||||
border: '1px solid var(--border)',
|
||||
borderRadius: 999, overflow: 'hidden' }}>
|
||||
{types.map(t => (
|
||||
<button key={t}
|
||||
onClick={() => setTypeFilter(t)}
|
||||
style={{
|
||||
background: typeFilter === t ? 'var(--accent)' : 'transparent',
|
||||
color: typeFilter === t ? '#fff' : 'var(--text-muted)',
|
||||
border: 'none', padding: '4px 10px', fontSize: 10,
|
||||
cursor: 'pointer',
|
||||
}}>
|
||||
{t === 'all' ? 'Alle' : t}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Grid */}
|
||||
<div style={{ flex: 1, minHeight: 0, overflowY: 'auto',
|
||||
padding: '10px 12px' }}>
|
||||
{filtered.length === 0 ? (
|
||||
<div style={{ padding: 24, textAlign: 'center',
|
||||
color: 'var(--text-muted)', fontSize: 11 }}>
|
||||
{items.length === 0
|
||||
? 'Library ist leer. Manifest unter:'
|
||||
: 'Nichts gefunden — Filter aendern?'}
|
||||
{items.length === 0 && libraryRoot && (
|
||||
<div style={{ marginTop: 6, fontSize: 9, fontFamily: 'monospace' }}>
|
||||
{libraryRoot}/library.json
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
) : (
|
||||
<div style={{
|
||||
display: 'grid',
|
||||
gridTemplateColumns: 'repeat(auto-fill, minmax(140px, 1fr))',
|
||||
gap: 8,
|
||||
}}>
|
||||
{filtered.map(it => (
|
||||
<MaterialCard key={it.id}
|
||||
item={it}
|
||||
imported={importedSet.has(it.id)}
|
||||
onImport={onImport} />
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Footer */}
|
||||
<div style={{
|
||||
display: 'flex', alignItems: 'center', gap: 6,
|
||||
padding: '6px 12px',
|
||||
borderTop: '1px solid var(--border)',
|
||||
background: 'var(--bg-section)',
|
||||
fontSize: 9, color: 'var(--text-muted)',
|
||||
}}>
|
||||
<span>{filtered.length} / {items.length} Items</span>
|
||||
<div style={{ flex: 1 }} />
|
||||
<span title={libraryRoot}
|
||||
style={{ fontFamily: 'monospace',
|
||||
overflow: 'hidden', textOverflow: 'ellipsis',
|
||||
whiteSpace: 'nowrap', maxWidth: 320 }}>
|
||||
{libraryRoot || ''}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user