mirror of
https://github.com/nexu-io/open-design.git
synced 2026-06-01 03:14:35 +07:00
Polish Design Systems settings gallery controls (#2392)
* Polish design systems gallery settings * Address design systems settings review --------- Co-authored-by: chaoxiaoche <chaoxiaoche@chaoxiaochedeMacBook-Pro.local>
This commit is contained in:
chaoxiaoche
GitHub
parent
7b80e3e85a
commit
6359132d04
23 changed files with 1102 additions and 214 deletions
|
|
@ -1,14 +1,13 @@
|
|||
import { useCallback, useEffect, useMemo, useState } from 'react';
|
||||
import { useEffect, useMemo, useRef, useState } from 'react';
|
||||
import type { Dispatch, FormEvent, SetStateAction } from 'react';
|
||||
import { useT } from '../i18n';
|
||||
import type { AppConfig } from '../types';
|
||||
import type { DesignSystemSummary } from '@open-design/contracts';
|
||||
import type { AppConfig, DesignSystemSummary } from '../types';
|
||||
import {
|
||||
fetchDesignSystem,
|
||||
fetchDesignSystems,
|
||||
importGitHubDesignSystem,
|
||||
importLocalDesignSystem,
|
||||
} from '../providers/registry';
|
||||
import { DesignSystemPreviewModal } from './DesignSystemPreviewModal';
|
||||
|
||||
// Sibling Settings section that hosts the design-systems registry.
|
||||
// Lifted out of the previous LibrarySection so each surface (functional
|
||||
|
|
@ -29,18 +28,21 @@ function toggleCraftSlug(current: string[], slug: string, enabled: boolean): str
|
|||
|
||||
export function DesignSystemsSection({ cfg, setCfg }: Props) {
|
||||
const t = useT();
|
||||
const cardRefs = useRef(new Map<string, HTMLDivElement>());
|
||||
const [designSystems, setDesignSystems] = useState<DesignSystemSummary[]>([]);
|
||||
const [search, setSearch] = useState('');
|
||||
const [categoryFilter, setCategoryFilter] = useState('All');
|
||||
const [previewId, setPreviewId] = useState<string | null>(null);
|
||||
const [previewBody, setPreviewBody] = useState<string | null>(null);
|
||||
const [previewLoading, setPreviewLoading] = useState(false);
|
||||
const [previewSystem, setPreviewSystem] = useState<DesignSystemSummary | null>(null);
|
||||
const [importPath, setImportPath] = useState('');
|
||||
const [importSource, setImportSource] = useState<'local' | 'github'>('local');
|
||||
const [packageImportMode, setPackageImportMode] = useState<'normalized' | 'hybrid' | 'verbatim'>('hybrid');
|
||||
const [craftApplies, setCraftApplies] = useState<string[]>([]);
|
||||
const [addOpen, setAddOpen] = useState(false);
|
||||
const [showOnlyHidden, setShowOnlyHidden] = useState(false);
|
||||
const [importing, setImporting] = useState(false);
|
||||
const [importMessage, setImportMessage] = useState<string | null>(null);
|
||||
const [importedDesignSystem, setImportedDesignSystem] = useState<DesignSystemSummary | null>(null);
|
||||
const [highlightedDesignSystemId, setHighlightedDesignSystemId] = useState<string | null>(null);
|
||||
const [importError, setImportError] = useState<string | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
|
|
@ -51,6 +53,10 @@ export function DesignSystemsSection({ cfg, setCfg }: Props) {
|
|||
() => new Set(cfg.disabledDesignSystems ?? []),
|
||||
[cfg.disabledDesignSystems],
|
||||
);
|
||||
const hiddenDesignSystemCount = useMemo(
|
||||
() => designSystems.filter((system) => disabledDS.has(system.id)).length,
|
||||
[designSystems, disabledDS],
|
||||
);
|
||||
|
||||
const categories = useMemo(() => {
|
||||
const cats = new Set(designSystems.map((d) => d.category));
|
||||
|
|
@ -60,6 +66,7 @@ export function DesignSystemsSection({ cfg, setCfg }: Props) {
|
|||
const filtered = useMemo(() => {
|
||||
const q = search.toLowerCase();
|
||||
return designSystems.filter((d) => {
|
||||
if (showOnlyHidden && !disabledDS.has(d.id)) return false;
|
||||
if (categoryFilter !== 'All' && d.category !== categoryFilter) return false;
|
||||
if (
|
||||
q &&
|
||||
|
|
@ -69,7 +76,7 @@ export function DesignSystemsSection({ cfg, setCfg }: Props) {
|
|||
return false;
|
||||
return true;
|
||||
});
|
||||
}, [designSystems, categoryFilter, search]);
|
||||
}, [designSystems, categoryFilter, disabledDS, search, showOnlyHidden]);
|
||||
|
||||
const grouped = useMemo(() => {
|
||||
const groups = new Map<string, DesignSystemSummary[]>();
|
||||
|
|
@ -81,36 +88,28 @@ export function DesignSystemsSection({ cfg, setCfg }: Props) {
|
|||
return groups;
|
||||
}, [filtered]);
|
||||
|
||||
const openPreview = useCallback(
|
||||
async (id: string) => {
|
||||
if (previewId === id) {
|
||||
setPreviewId(null);
|
||||
setPreviewBody(null);
|
||||
return;
|
||||
}
|
||||
setPreviewId(id);
|
||||
setPreviewBody(null);
|
||||
setPreviewLoading(true);
|
||||
try {
|
||||
const detail = await fetchDesignSystem(id);
|
||||
setPreviewId((cur) => {
|
||||
if (cur === id) setPreviewBody(detail?.body ?? null);
|
||||
return cur;
|
||||
});
|
||||
} catch {
|
||||
setPreviewId((cur) => {
|
||||
if (cur === id) setPreviewBody(null);
|
||||
return cur;
|
||||
});
|
||||
} finally {
|
||||
setPreviewId((cur) => {
|
||||
if (cur === id) setPreviewLoading(false);
|
||||
return cur;
|
||||
});
|
||||
}
|
||||
},
|
||||
[previewId],
|
||||
);
|
||||
useEffect(() => {
|
||||
if (!highlightedDesignSystemId) return;
|
||||
const raf = window.requestAnimationFrame(() => {
|
||||
cardRefs.current.get(highlightedDesignSystemId)?.scrollIntoView({
|
||||
behavior: 'smooth',
|
||||
block: 'center',
|
||||
});
|
||||
});
|
||||
const timeout = window.setTimeout(() => {
|
||||
setHighlightedDesignSystemId((current) =>
|
||||
current === highlightedDesignSystemId ? null : current,
|
||||
);
|
||||
}, 2200);
|
||||
return () => {
|
||||
window.cancelAnimationFrame(raf);
|
||||
window.clearTimeout(timeout);
|
||||
};
|
||||
}, [filtered, highlightedDesignSystemId]);
|
||||
|
||||
useEffect(() => {
|
||||
if (hiddenDesignSystemCount === 0) setShowOnlyHidden(false);
|
||||
}, [hiddenDesignSystemCount]);
|
||||
|
||||
function toggleDSDisabled(id: string, enabled: boolean) {
|
||||
setCfg((c) => {
|
||||
|
|
@ -121,6 +120,12 @@ export function DesignSystemsSection({ cfg, setCfg }: Props) {
|
|||
});
|
||||
}
|
||||
|
||||
function clearImportFeedback() {
|
||||
setImportError(null);
|
||||
setImportMessage(null);
|
||||
setImportedDesignSystem(null);
|
||||
}
|
||||
|
||||
async function handleLocalImport(e: FormEvent<HTMLFormElement>) {
|
||||
e.preventDefault();
|
||||
const importTarget = importPath.trim();
|
||||
|
|
@ -128,6 +133,7 @@ export function DesignSystemsSection({ cfg, setCfg }: Props) {
|
|||
setImporting(true);
|
||||
setImportError(null);
|
||||
setImportMessage(null);
|
||||
setImportedDesignSystem(null);
|
||||
const importOptions = {
|
||||
importMode: packageImportMode,
|
||||
craftApplies,
|
||||
|
|
@ -145,104 +151,207 @@ export function DesignSystemsSection({ cfg, setCfg }: Props) {
|
|||
const withoutDuplicate = current.filter((system) => system.id !== result.designSystem.id);
|
||||
return [...withoutDuplicate, result.designSystem].sort((a, b) => a.title.localeCompare(b.title));
|
||||
});
|
||||
setCategoryFilter(result.designSystem.category);
|
||||
setPreviewId(null);
|
||||
setPreviewBody(null);
|
||||
setPreviewSystem(null);
|
||||
setImportPath('');
|
||||
setImportMessage(`Imported ${result.designSystem.title}`);
|
||||
setImportedDesignSystem(result.designSystem);
|
||||
setImportMessage(result.designSystem.title);
|
||||
}
|
||||
|
||||
function viewImportedDesignSystem() {
|
||||
if (!importedDesignSystem) return;
|
||||
setSearch('');
|
||||
setShowOnlyHidden(false);
|
||||
setCategoryFilter(importedDesignSystem.category);
|
||||
setPreviewSystem(null);
|
||||
setHighlightedDesignSystemId(importedDesignSystem.id);
|
||||
}
|
||||
|
||||
function toggleShowOnlyHidden() {
|
||||
setShowOnlyHidden((current) => {
|
||||
const next = !current;
|
||||
if (next) {
|
||||
setSearch('');
|
||||
setCategoryFilter('All');
|
||||
}
|
||||
return next;
|
||||
});
|
||||
}
|
||||
|
||||
return (
|
||||
<section className="settings-section settings-design-systems">
|
||||
<form className="library-install-form" onSubmit={handleLocalImport}>
|
||||
<div className="library-import-controls">
|
||||
<div className="seg-control library-import-source-control">
|
||||
<button
|
||||
type="button"
|
||||
className={importSource === 'local' ? 'active' : ''}
|
||||
onClick={() => setImportSource('local')}
|
||||
>
|
||||
Local
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className={importSource === 'github' ? 'active' : ''}
|
||||
onClick={() => setImportSource('github')}
|
||||
>
|
||||
GitHub
|
||||
</button>
|
||||
</div>
|
||||
<div className="library-import-options">
|
||||
<div className="library-import-option-group">
|
||||
<span className="library-import-option-label">Structure</span>
|
||||
<div className="seg-control library-import-mode-control">
|
||||
<button
|
||||
type="button"
|
||||
className={packageImportMode === 'hybrid' ? 'active' : ''}
|
||||
onClick={() => setPackageImportMode('hybrid')}
|
||||
>
|
||||
Hybrid
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className={packageImportMode === 'normalized' ? 'active' : ''}
|
||||
onClick={() => setPackageImportMode('normalized')}
|
||||
>
|
||||
Normalized
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className={packageImportMode === 'verbatim' ? 'active' : ''}
|
||||
onClick={() => setPackageImportMode('verbatim')}
|
||||
>
|
||||
Verbatim
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="library-import-option-group">
|
||||
<span className="library-import-option-label">Craft</span>
|
||||
<label className="library-import-checkbox">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={craftApplies.includes('color')}
|
||||
onChange={(e) => setCraftApplies((current) => toggleCraftSlug(current, 'color', e.target.checked))}
|
||||
/>
|
||||
<span>Color</span>
|
||||
</label>
|
||||
<label className="library-import-checkbox">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={craftApplies.includes('accessibility-baseline')}
|
||||
onChange={(e) =>
|
||||
setCraftApplies((current) => toggleCraftSlug(current, 'accessibility-baseline', e.target.checked))
|
||||
}
|
||||
/>
|
||||
<span>Accessibility</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="library-install-row">
|
||||
<input
|
||||
type="text"
|
||||
className="library-search"
|
||||
placeholder={importSource === 'github' ? 'https://github.com/owner/repo' : '/path/to/project'}
|
||||
value={importPath}
|
||||
onChange={(e) => setImportPath(e.target.value)}
|
||||
/>
|
||||
<div className="library-section-header">
|
||||
<h4 className="library-section-title">
|
||||
{t('settings.designSystemsInstalled')}{' '}
|
||||
<span className="library-section-count">{designSystems.length}</span>
|
||||
</h4>
|
||||
<button
|
||||
type="button"
|
||||
className="primary-ghost library-add-btn"
|
||||
aria-expanded={addOpen}
|
||||
onClick={() => setAddOpen((v) => !v)}
|
||||
>
|
||||
<span aria-hidden="true" className="library-add-btn-icon">+</span>
|
||||
<span>{t('settings.designSystemsAdd')}</span>
|
||||
</button>
|
||||
</div>
|
||||
{hiddenDesignSystemCount > 0 ? (
|
||||
<div className="library-hidden-banner">
|
||||
<span>
|
||||
{t('settings.designSystemsHiddenCount', { count: hiddenDesignSystemCount })}
|
||||
</span>
|
||||
<button
|
||||
type="submit"
|
||||
className="library-install-submit"
|
||||
disabled={importing || importPath.trim().length === 0}
|
||||
type="button"
|
||||
className="library-hidden-banner-link"
|
||||
onClick={toggleShowOnlyHidden}
|
||||
>
|
||||
{importing ? t('settings.libraryLoading') : 'Import from project'}
|
||||
{showOnlyHidden
|
||||
? t('settings.designSystemsShowAll')
|
||||
: t('settings.designSystemsShowHidden')}
|
||||
</button>
|
||||
</div>
|
||||
{importError ? <p className="library-install-error">{importError}</p> : null}
|
||||
{importMessage ? <p className="library-install-status">{importMessage}</p> : null}
|
||||
</form>
|
||||
) : null}
|
||||
|
||||
<div className="library-toolbar">
|
||||
<div className={`accordion-collapsible library-add-panel${addOpen ? ' open' : ''}`}>
|
||||
<div className="accordion-collapsible-inner">
|
||||
<form className="library-install-form" onSubmit={handleLocalImport}>
|
||||
<div className="library-import-controls">
|
||||
<div className="library-import-row">
|
||||
<span className="library-import-option-label">
|
||||
{t('settings.designSystemsSource')}
|
||||
</span>
|
||||
<div className="seg-control library-import-source-control">
|
||||
<button
|
||||
type="button"
|
||||
className={importSource === 'local' ? 'active' : ''}
|
||||
onClick={() => {
|
||||
setImportSource('local');
|
||||
clearImportFeedback();
|
||||
}}
|
||||
>
|
||||
{t('settings.designSystemsSourceLocal')}
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className={importSource === 'github' ? 'active' : ''}
|
||||
onClick={() => {
|
||||
setImportSource('github');
|
||||
clearImportFeedback();
|
||||
}}
|
||||
>
|
||||
{t('settings.designSystemsSourceGithub')}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="library-import-row">
|
||||
<span className="library-import-option-label">
|
||||
{t('settings.designSystemsStructure')}
|
||||
</span>
|
||||
<div className="seg-control library-import-mode-control">
|
||||
<button
|
||||
type="button"
|
||||
className={packageImportMode === 'hybrid' ? 'active' : ''}
|
||||
onClick={() => setPackageImportMode('hybrid')}
|
||||
>
|
||||
{t('settings.designSystemsModeHybrid')}
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className={packageImportMode === 'normalized' ? 'active' : ''}
|
||||
onClick={() => setPackageImportMode('normalized')}
|
||||
>
|
||||
{t('settings.designSystemsModeNormalized')}
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className={packageImportMode === 'verbatim' ? 'active' : ''}
|
||||
onClick={() => setPackageImportMode('verbatim')}
|
||||
>
|
||||
{t('settings.designSystemsModeVerbatim')}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="library-import-row">
|
||||
<span className="library-import-option-label">
|
||||
{t('settings.designSystemsCraft')}
|
||||
</span>
|
||||
<div className="library-import-checkboxes">
|
||||
<label className="library-import-checkbox">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={craftApplies.includes('color')}
|
||||
onChange={(e) =>
|
||||
setCraftApplies((current) =>
|
||||
toggleCraftSlug(current, 'color', e.target.checked),
|
||||
)
|
||||
}
|
||||
/>
|
||||
<span>{t('settings.designSystemsCraftColor')}</span>
|
||||
</label>
|
||||
<label className="library-import-checkbox">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={craftApplies.includes('accessibility-baseline')}
|
||||
onChange={(e) =>
|
||||
setCraftApplies((current) =>
|
||||
toggleCraftSlug(current, 'accessibility-baseline', e.target.checked),
|
||||
)
|
||||
}
|
||||
/>
|
||||
<span>{t('settings.designSystemsCraftAccessibility')}</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div className="library-import-row">
|
||||
<span className="library-import-option-label">
|
||||
{importSource === 'github'
|
||||
? t('settings.designSystemsGithubUrl')
|
||||
: t('settings.designSystemsProjectPath')}
|
||||
</span>
|
||||
<div className="library-install-row">
|
||||
<input
|
||||
type="text"
|
||||
className="library-import-input"
|
||||
placeholder={importSource === 'github' ? 'https://github.com/owner/repo' : '/path/to/project'}
|
||||
value={importPath}
|
||||
onChange={(e) => {
|
||||
setImportPath(e.target.value);
|
||||
clearImportFeedback();
|
||||
}}
|
||||
/>
|
||||
<button
|
||||
type="submit"
|
||||
className="library-install-submit"
|
||||
disabled={importing || importPath.trim().length === 0}
|
||||
>
|
||||
{importing
|
||||
? t('settings.libraryLoading')
|
||||
: importSource === 'github'
|
||||
? t('settings.designSystemsImportGithub')
|
||||
: t('settings.designSystemsImportProject')}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{importError ? <p className="library-install-error">{importError}</p> : null}
|
||||
{importMessage ? (
|
||||
<p className="library-install-status">
|
||||
<span>{t('settings.designSystemsImportedStatus', { title: importMessage })}</span>
|
||||
{importedDesignSystem ? (
|
||||
<button
|
||||
type="button"
|
||||
className="library-install-status-link"
|
||||
onClick={viewImportedDesignSystem}
|
||||
>
|
||||
{t('settings.designSystemsViewImported')}
|
||||
</button>
|
||||
) : null}
|
||||
</p>
|
||||
) : null}
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="library-toolbar library-toolbar-row">
|
||||
<input
|
||||
type="search"
|
||||
className="library-search"
|
||||
|
|
@ -250,25 +359,29 @@ export function DesignSystemsSection({ cfg, setCfg }: Props) {
|
|||
value={search}
|
||||
onChange={(e) => setSearch(e.target.value)}
|
||||
/>
|
||||
<div className="library-filters">
|
||||
{categories.map((cat) => {
|
||||
const count =
|
||||
cat === 'All'
|
||||
? designSystems.length
|
||||
: designSystems.filter((d) => d.category === cat).length;
|
||||
return (
|
||||
<button
|
||||
key={cat}
|
||||
type="button"
|
||||
className={`filter-pill${categoryFilter === cat ? ' active' : ''}`}
|
||||
onClick={() => setCategoryFilter(cat)}
|
||||
>
|
||||
{cat}
|
||||
<span className="filter-pill-count">{count}</span>
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
<label className="library-filter-select">
|
||||
<select
|
||||
aria-label={t('settings.designSystemsCategory')}
|
||||
value={categoryFilter}
|
||||
data-active={categoryFilter !== 'All' ? 'true' : undefined}
|
||||
onChange={(e) => setCategoryFilter(e.target.value)}
|
||||
>
|
||||
{categories.map((cat) => {
|
||||
const count =
|
||||
cat === 'All'
|
||||
? designSystems.length
|
||||
: designSystems.filter((d) => d.category === cat).length;
|
||||
return (
|
||||
<option
|
||||
key={cat}
|
||||
value={cat}
|
||||
>
|
||||
{cat === 'All' ? t('settings.designSystemsAllCategories') : cat} ({count})
|
||||
</option>
|
||||
);
|
||||
})}
|
||||
</select>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div className="library-content">
|
||||
|
|
@ -278,21 +391,37 @@ export function DesignSystemsSection({ cfg, setCfg }: Props) {
|
|||
<>
|
||||
{Array.from(grouped.entries()).map(([category, items]) => (
|
||||
<div key={category} className="library-group">
|
||||
<h4 className="library-group-title">
|
||||
{category}{' '}
|
||||
<span className="library-group-count">{items.length}</span>
|
||||
</h4>
|
||||
{categoryFilter === 'All' ? (
|
||||
<h4 className="library-group-title">
|
||||
{category}{' '}
|
||||
<span className="library-group-count">{items.length}</span>
|
||||
</h4>
|
||||
) : null}
|
||||
<div className="ds-grid">
|
||||
{items.map((ds) => (
|
||||
<div
|
||||
key={ds.id}
|
||||
ref={(node) => {
|
||||
if (node) cardRefs.current.set(ds.id, node);
|
||||
else cardRefs.current.delete(ds.id);
|
||||
}}
|
||||
className={`library-ds-card${
|
||||
disabledDS.has(ds.id) ? ' disabled' : ''
|
||||
}${
|
||||
highlightedDesignSystemId === ds.id ? ' highlighted' : ''
|
||||
}`}
|
||||
>
|
||||
<div
|
||||
className="library-ds-card-content"
|
||||
onClick={() => openPreview(ds.id)}
|
||||
role="button"
|
||||
tabIndex={0}
|
||||
aria-haspopup="dialog"
|
||||
onClick={() => setPreviewSystem(ds)}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key !== 'Enter' && e.key !== ' ') return;
|
||||
e.preventDefault();
|
||||
setPreviewSystem(ds);
|
||||
}}
|
||||
>
|
||||
{ds.swatches && ds.swatches.length > 0 && (
|
||||
<div className="library-ds-swatches">
|
||||
|
|
@ -308,36 +437,36 @@ export function DesignSystemsSection({ cfg, setCfg }: Props) {
|
|||
<div className="library-ds-title">{ds.title}</div>
|
||||
<div className="library-ds-summary">{ds.summary}</div>
|
||||
</div>
|
||||
<label
|
||||
className="toggle-switch toggle-switch-sm"
|
||||
title={t('settings.libraryToggleLabel')}
|
||||
>
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={!disabledDS.has(ds.id)}
|
||||
onChange={(e) =>
|
||||
toggleDSDisabled(ds.id, e.target.checked)
|
||||
}
|
||||
/>
|
||||
<span className="toggle-slider" />
|
||||
</label>
|
||||
<div className="library-ds-toggle-cell">
|
||||
<label
|
||||
className="toggle-switch toggle-switch-sm"
|
||||
title={t('settings.designSystemsShowInHomeGallery')}
|
||||
>
|
||||
<input
|
||||
type="checkbox"
|
||||
aria-label={t('settings.designSystemsShowInHomeGallery')}
|
||||
checked={!disabledDS.has(ds.id)}
|
||||
onChange={(e) =>
|
||||
toggleDSDisabled(ds.id, e.target.checked)
|
||||
}
|
||||
/>
|
||||
<span className="toggle-slider" />
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
{previewId && filtered.some((d) => d.id === previewId) && (
|
||||
<div className="library-preview">
|
||||
{previewLoading ? (
|
||||
<p>{t('settings.libraryLoading')}</p>
|
||||
) : previewBody ? (
|
||||
<pre className="library-preview-body">{previewBody}</pre>
|
||||
) : null}
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
{previewSystem ? (
|
||||
<DesignSystemPreviewModal
|
||||
system={previewSystem}
|
||||
onClose={() => setPreviewSystem(null)}
|
||||
/>
|
||||
) : null}
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1380,6 +1380,30 @@ export const ar: Dict = {
|
|||
'settings.skillsBodyRequired': 'محتوى المهارة مطلوب.',
|
||||
'settings.designSystems': 'أنظمة التصميم',
|
||||
'settings.designSystemsHint': 'تصفح وتفعيل أنظمة التصميم المتاحة للوكيل',
|
||||
'settings.designSystemsInstalled': 'مثبّتة',
|
||||
'settings.designSystemsAdd': 'إضافة نظام تصميم',
|
||||
'settings.designSystemsHiddenCount': '{count} مخفية من معرض الصفحة الرئيسية',
|
||||
'settings.designSystemsShowAll': 'عرض الكل',
|
||||
'settings.designSystemsShowHidden': 'عرض المخفية',
|
||||
'settings.designSystemsSource': 'المصدر',
|
||||
'settings.designSystemsSourceLocal': 'محلي',
|
||||
'settings.designSystemsSourceGithub': 'GitHub',
|
||||
'settings.designSystemsStructure': 'البنية',
|
||||
'settings.designSystemsModeHybrid': 'مختلط',
|
||||
'settings.designSystemsModeNormalized': 'مطبّع',
|
||||
'settings.designSystemsModeVerbatim': 'كما هو',
|
||||
'settings.designSystemsCraft': 'Craft',
|
||||
'settings.designSystemsCraftColor': 'اللون',
|
||||
'settings.designSystemsCraftAccessibility': 'إمكانية الوصول',
|
||||
'settings.designSystemsGithubUrl': 'رابط GitHub',
|
||||
'settings.designSystemsProjectPath': 'مسار المشروع',
|
||||
'settings.designSystemsImportGithub': 'استيراد من GitHub',
|
||||
'settings.designSystemsImportProject': 'استيراد من المشروع',
|
||||
'settings.designSystemsImportedStatus': 'تم استيراد {title}',
|
||||
'settings.designSystemsViewImported': 'عرض نظام التصميم المستورد',
|
||||
'settings.designSystemsCategory': 'الفئة',
|
||||
'settings.designSystemsAllCategories': 'كل الفئات',
|
||||
'settings.designSystemsShowInHomeGallery': 'إظهار في معرض الصفحة الرئيسية',
|
||||
'settings.librarySkills': 'المهارات',
|
||||
'settings.libraryDesignSystems': 'أنظمة التصميم',
|
||||
'settings.librarySearch': 'بحث...',
|
||||
|
|
|
|||
|
|
@ -1318,6 +1318,30 @@ export const de: Dict = {
|
|||
'settings.skillsBodyRequired': 'Skill-Inhalt ist erforderlich.',
|
||||
'settings.designSystems': 'Design-Systeme',
|
||||
'settings.designSystemsHint': 'Verfügbare Design-Systeme durchsuchen und umschalten',
|
||||
'settings.designSystemsInstalled': 'Installiert',
|
||||
'settings.designSystemsAdd': 'Design-System hinzufügen',
|
||||
'settings.designSystemsHiddenCount': '{count} in der Home-Galerie ausgeblendet',
|
||||
'settings.designSystemsShowAll': 'Alle anzeigen',
|
||||
'settings.designSystemsShowHidden': 'Ausgeblendete anzeigen',
|
||||
'settings.designSystemsSource': 'Quelle',
|
||||
'settings.designSystemsSourceLocal': 'Lokal',
|
||||
'settings.designSystemsSourceGithub': 'GitHub',
|
||||
'settings.designSystemsStructure': 'Struktur',
|
||||
'settings.designSystemsModeHybrid': 'Hybrid',
|
||||
'settings.designSystemsModeNormalized': 'Normalisiert',
|
||||
'settings.designSystemsModeVerbatim': 'Unverändert',
|
||||
'settings.designSystemsCraft': 'Craft',
|
||||
'settings.designSystemsCraftColor': 'Farbe',
|
||||
'settings.designSystemsCraftAccessibility': 'Barrierefreiheit',
|
||||
'settings.designSystemsGithubUrl': 'GitHub-URL',
|
||||
'settings.designSystemsProjectPath': 'Projektpfad',
|
||||
'settings.designSystemsImportGithub': 'Aus GitHub importieren',
|
||||
'settings.designSystemsImportProject': 'Aus Projekt importieren',
|
||||
'settings.designSystemsImportedStatus': '{title} importiert',
|
||||
'settings.designSystemsViewImported': 'Importiertes Design-System anzeigen',
|
||||
'settings.designSystemsCategory': 'Kategorie',
|
||||
'settings.designSystemsAllCategories': 'Alle Kategorien',
|
||||
'settings.designSystemsShowInHomeGallery': 'In Home-Galerie anzeigen',
|
||||
'settings.librarySkills': 'Fähigkeiten',
|
||||
'settings.libraryDesignSystems': 'Designsysteme',
|
||||
'settings.librarySearch': 'Suchen...',
|
||||
|
|
|
|||
|
|
@ -2031,7 +2031,31 @@ export const en: Dict = {
|
|||
'settings.skillsNameRequired': 'Skill name is required.',
|
||||
'settings.skillsBodyRequired': 'Skill body is required.',
|
||||
'settings.designSystems': 'Design Systems',
|
||||
'settings.designSystemsHint': 'Browse and toggle the design systems your agent can use',
|
||||
'settings.designSystemsHint': 'Manage which design systems appear in the home gallery',
|
||||
'settings.designSystemsInstalled': 'Installed',
|
||||
'settings.designSystemsAdd': 'Add design system',
|
||||
'settings.designSystemsHiddenCount': '{count} hidden from home gallery',
|
||||
'settings.designSystemsShowAll': 'Show all',
|
||||
'settings.designSystemsShowHidden': 'Show hidden',
|
||||
'settings.designSystemsSource': 'Source',
|
||||
'settings.designSystemsSourceLocal': 'Local',
|
||||
'settings.designSystemsSourceGithub': 'GitHub',
|
||||
'settings.designSystemsStructure': 'Structure',
|
||||
'settings.designSystemsModeHybrid': 'Hybrid',
|
||||
'settings.designSystemsModeNormalized': 'Normalized',
|
||||
'settings.designSystemsModeVerbatim': 'Verbatim',
|
||||
'settings.designSystemsCraft': 'Craft',
|
||||
'settings.designSystemsCraftColor': 'Color',
|
||||
'settings.designSystemsCraftAccessibility': 'Accessibility',
|
||||
'settings.designSystemsGithubUrl': 'GitHub URL',
|
||||
'settings.designSystemsProjectPath': 'Project path',
|
||||
'settings.designSystemsImportGithub': 'Import from GitHub',
|
||||
'settings.designSystemsImportProject': 'Import from project',
|
||||
'settings.designSystemsImportedStatus': 'Imported {title}',
|
||||
'settings.designSystemsViewImported': 'View imported design system',
|
||||
'settings.designSystemsCategory': 'Category',
|
||||
'settings.designSystemsAllCategories': 'All categories',
|
||||
'settings.designSystemsShowInHomeGallery': 'Show in home gallery',
|
||||
'settings.librarySkills': 'Skills',
|
||||
'settings.libraryDesignSystems': 'Design Systems',
|
||||
'settings.librarySearch': 'Search...',
|
||||
|
|
|
|||
|
|
@ -1269,6 +1269,30 @@ export const esES: Dict = {
|
|||
'settings.skillsBodyRequired': 'El contenido de la habilidad es obligatorio.',
|
||||
'settings.designSystems': 'Sistemas de diseño',
|
||||
'settings.designSystemsHint': 'Explora y activa los sistemas de diseño disponibles',
|
||||
'settings.designSystemsInstalled': 'Instalados',
|
||||
'settings.designSystemsAdd': 'Añadir sistema de diseño',
|
||||
'settings.designSystemsHiddenCount': '{count} ocultos en la galería de inicio',
|
||||
'settings.designSystemsShowAll': 'Mostrar todo',
|
||||
'settings.designSystemsShowHidden': 'Mostrar ocultos',
|
||||
'settings.designSystemsSource': 'Origen',
|
||||
'settings.designSystemsSourceLocal': 'Local',
|
||||
'settings.designSystemsSourceGithub': 'GitHub',
|
||||
'settings.designSystemsStructure': 'Estructura',
|
||||
'settings.designSystemsModeHybrid': 'Híbrido',
|
||||
'settings.designSystemsModeNormalized': 'Normalizado',
|
||||
'settings.designSystemsModeVerbatim': 'Literal',
|
||||
'settings.designSystemsCraft': 'Craft',
|
||||
'settings.designSystemsCraftColor': 'Color',
|
||||
'settings.designSystemsCraftAccessibility': 'Accesibilidad',
|
||||
'settings.designSystemsGithubUrl': 'URL de GitHub',
|
||||
'settings.designSystemsProjectPath': 'Ruta del proyecto',
|
||||
'settings.designSystemsImportGithub': 'Importar desde GitHub',
|
||||
'settings.designSystemsImportProject': 'Importar desde proyecto',
|
||||
'settings.designSystemsImportedStatus': '{title} importado',
|
||||
'settings.designSystemsViewImported': 'Ver sistema de diseño importado',
|
||||
'settings.designSystemsCategory': 'Categoría',
|
||||
'settings.designSystemsAllCategories': 'Todas las categorías',
|
||||
'settings.designSystemsShowInHomeGallery': 'Mostrar en la galería de inicio',
|
||||
'settings.librarySkills': 'Habilidades',
|
||||
'settings.libraryDesignSystems': 'Sistemas de diseño',
|
||||
'settings.librarySearch': 'Buscar...',
|
||||
|
|
|
|||
|
|
@ -1423,6 +1423,30 @@ export const fa: Dict = {
|
|||
'settings.skillsBodyRequired': 'محتوای مهارت الزامی است.',
|
||||
'settings.designSystems': 'سیستمهای طراحی',
|
||||
'settings.designSystemsHint': 'سیستمهای طراحی موجود را مرور و فعال کنید',
|
||||
'settings.designSystemsInstalled': 'نصبشده',
|
||||
'settings.designSystemsAdd': 'افزودن سیستم طراحی',
|
||||
'settings.designSystemsHiddenCount': '{count} مورد از گالری خانه پنهان شده',
|
||||
'settings.designSystemsShowAll': 'نمایش همه',
|
||||
'settings.designSystemsShowHidden': 'نمایش پنهانها',
|
||||
'settings.designSystemsSource': 'منبع',
|
||||
'settings.designSystemsSourceLocal': 'محلی',
|
||||
'settings.designSystemsSourceGithub': 'GitHub',
|
||||
'settings.designSystemsStructure': 'ساختار',
|
||||
'settings.designSystemsModeHybrid': 'ترکیبی',
|
||||
'settings.designSystemsModeNormalized': 'نرمالشده',
|
||||
'settings.designSystemsModeVerbatim': 'بدون تغییر',
|
||||
'settings.designSystemsCraft': 'Craft',
|
||||
'settings.designSystemsCraftColor': 'رنگ',
|
||||
'settings.designSystemsCraftAccessibility': 'دسترسپذیری',
|
||||
'settings.designSystemsGithubUrl': 'نشانی GitHub',
|
||||
'settings.designSystemsProjectPath': 'مسیر پروژه',
|
||||
'settings.designSystemsImportGithub': 'درونریزی از GitHub',
|
||||
'settings.designSystemsImportProject': 'درونریزی از پروژه',
|
||||
'settings.designSystemsImportedStatus': '{title} درونریزی شد',
|
||||
'settings.designSystemsViewImported': 'مشاهده سیستم طراحی درونریزیشده',
|
||||
'settings.designSystemsCategory': 'دستهبندی',
|
||||
'settings.designSystemsAllCategories': 'همه دستهبندیها',
|
||||
'settings.designSystemsShowInHomeGallery': 'نمایش در گالری خانه',
|
||||
'settings.librarySkills': 'مهارتها',
|
||||
'settings.libraryDesignSystems': 'سیستمهای طراحی',
|
||||
'settings.librarySearch': 'جستجو...',
|
||||
|
|
|
|||
|
|
@ -1396,6 +1396,30 @@ export const fr: Dict = {
|
|||
'settings.skillsBodyRequired': 'Le contenu de la compétence est requis.',
|
||||
'settings.designSystems': 'Systèmes de design',
|
||||
'settings.designSystemsHint': 'Parcourez et activez les systèmes de design disponibles',
|
||||
'settings.designSystemsInstalled': 'Installés',
|
||||
'settings.designSystemsAdd': 'Ajouter un système de design',
|
||||
'settings.designSystemsHiddenCount': '{count} masqués dans la galerie d’accueil',
|
||||
'settings.designSystemsShowAll': 'Tout afficher',
|
||||
'settings.designSystemsShowHidden': 'Afficher les masqués',
|
||||
'settings.designSystemsSource': 'Source',
|
||||
'settings.designSystemsSourceLocal': 'Local',
|
||||
'settings.designSystemsSourceGithub': 'GitHub',
|
||||
'settings.designSystemsStructure': 'Structure',
|
||||
'settings.designSystemsModeHybrid': 'Hybride',
|
||||
'settings.designSystemsModeNormalized': 'Normalisé',
|
||||
'settings.designSystemsModeVerbatim': 'Tel quel',
|
||||
'settings.designSystemsCraft': 'Craft',
|
||||
'settings.designSystemsCraftColor': 'Couleur',
|
||||
'settings.designSystemsCraftAccessibility': 'Accessibilité',
|
||||
'settings.designSystemsGithubUrl': 'URL GitHub',
|
||||
'settings.designSystemsProjectPath': 'Chemin du projet',
|
||||
'settings.designSystemsImportGithub': 'Importer depuis GitHub',
|
||||
'settings.designSystemsImportProject': 'Importer depuis le projet',
|
||||
'settings.designSystemsImportedStatus': '{title} importé',
|
||||
'settings.designSystemsViewImported': 'Voir le système de design importé',
|
||||
'settings.designSystemsCategory': 'Catégorie',
|
||||
'settings.designSystemsAllCategories': 'Toutes les catégories',
|
||||
'settings.designSystemsShowInHomeGallery': 'Afficher dans la galerie d’accueil',
|
||||
'settings.librarySkills': 'Compétences',
|
||||
'settings.libraryDesignSystems': 'Systèmes de design',
|
||||
'settings.librarySearch': 'Rechercher...',
|
||||
|
|
|
|||
|
|
@ -1390,6 +1390,30 @@ export const hu: Dict = {
|
|||
'settings.skillsBodyRequired': 'A készség tartalma kötelező.',
|
||||
'settings.designSystems': 'Designrendszerek',
|
||||
'settings.designSystemsHint': 'Böngészd és kapcsold be az elérhető designrendszereket',
|
||||
'settings.designSystemsInstalled': 'Telepítve',
|
||||
'settings.designSystemsAdd': 'Designrendszer hozzáadása',
|
||||
'settings.designSystemsHiddenCount': '{count} elrejtve a kezdő galériából',
|
||||
'settings.designSystemsShowAll': 'Összes megjelenítése',
|
||||
'settings.designSystemsShowHidden': 'Rejtettek megjelenítése',
|
||||
'settings.designSystemsSource': 'Forrás',
|
||||
'settings.designSystemsSourceLocal': 'Helyi',
|
||||
'settings.designSystemsSourceGithub': 'GitHub',
|
||||
'settings.designSystemsStructure': 'Struktúra',
|
||||
'settings.designSystemsModeHybrid': 'Hibrid',
|
||||
'settings.designSystemsModeNormalized': 'Normalizált',
|
||||
'settings.designSystemsModeVerbatim': 'Változatlan',
|
||||
'settings.designSystemsCraft': 'Craft',
|
||||
'settings.designSystemsCraftColor': 'Szín',
|
||||
'settings.designSystemsCraftAccessibility': 'Akadálymentesség',
|
||||
'settings.designSystemsGithubUrl': 'GitHub URL',
|
||||
'settings.designSystemsProjectPath': 'Projekt útvonala',
|
||||
'settings.designSystemsImportGithub': 'Importálás GitHubból',
|
||||
'settings.designSystemsImportProject': 'Importálás projektből',
|
||||
'settings.designSystemsImportedStatus': '{title} importálva',
|
||||
'settings.designSystemsViewImported': 'Importált designrendszer megtekintése',
|
||||
'settings.designSystemsCategory': 'Kategória',
|
||||
'settings.designSystemsAllCategories': 'Minden kategória',
|
||||
'settings.designSystemsShowInHomeGallery': 'Megjelenítés a kezdő galériában',
|
||||
'settings.librarySkills': 'Készségek',
|
||||
'settings.libraryDesignSystems': 'Tervezőrendszerek',
|
||||
'settings.librarySearch': 'Keresés...',
|
||||
|
|
|
|||
|
|
@ -1527,6 +1527,30 @@ export const id: Dict = {
|
|||
'settings.skillsBodyRequired': 'Isi keterampilan wajib diisi.',
|
||||
'settings.designSystems': 'Sistem desain',
|
||||
'settings.designSystemsHint': 'Telusuri dan aktifkan sistem desain yang tersedia',
|
||||
'settings.designSystemsInstalled': 'Terpasang',
|
||||
'settings.designSystemsAdd': 'Tambah sistem desain',
|
||||
'settings.designSystemsHiddenCount': '{count} disembunyikan dari galeri beranda',
|
||||
'settings.designSystemsShowAll': 'Tampilkan semua',
|
||||
'settings.designSystemsShowHidden': 'Tampilkan tersembunyi',
|
||||
'settings.designSystemsSource': 'Sumber',
|
||||
'settings.designSystemsSourceLocal': 'Lokal',
|
||||
'settings.designSystemsSourceGithub': 'GitHub',
|
||||
'settings.designSystemsStructure': 'Struktur',
|
||||
'settings.designSystemsModeHybrid': 'Hibrida',
|
||||
'settings.designSystemsModeNormalized': 'Dinormalisasi',
|
||||
'settings.designSystemsModeVerbatim': 'Apa adanya',
|
||||
'settings.designSystemsCraft': 'Craft',
|
||||
'settings.designSystemsCraftColor': 'Warna',
|
||||
'settings.designSystemsCraftAccessibility': 'Aksesibilitas',
|
||||
'settings.designSystemsGithubUrl': 'URL GitHub',
|
||||
'settings.designSystemsProjectPath': 'Path proyek',
|
||||
'settings.designSystemsImportGithub': 'Impor dari GitHub',
|
||||
'settings.designSystemsImportProject': 'Impor dari proyek',
|
||||
'settings.designSystemsImportedStatus': '{title} diimpor',
|
||||
'settings.designSystemsViewImported': 'Lihat sistem desain yang diimpor',
|
||||
'settings.designSystemsCategory': 'Kategori',
|
||||
'settings.designSystemsAllCategories': 'Semua kategori',
|
||||
'settings.designSystemsShowInHomeGallery': 'Tampilkan di galeri beranda',
|
||||
'settings.librarySkills': 'Skill',
|
||||
'settings.libraryDesignSystems': 'Sistem desain',
|
||||
'settings.librarySearch': 'Cari...',
|
||||
|
|
|
|||
|
|
@ -1261,6 +1261,30 @@ export const it: Dict = {
|
|||
'settings.skillsNoFiles': 'Nessun file in questa cartella di competenza.',
|
||||
'settings.designSystems': 'Design system',
|
||||
'settings.designSystemsHint': 'Sfoglia e attiva i design system disponibili',
|
||||
'settings.designSystemsInstalled': 'Installati',
|
||||
'settings.designSystemsAdd': 'Aggiungi design system',
|
||||
'settings.designSystemsHiddenCount': '{count} nascosti dalla galleria iniziale',
|
||||
'settings.designSystemsShowAll': 'Mostra tutti',
|
||||
'settings.designSystemsShowHidden': 'Mostra nascosti',
|
||||
'settings.designSystemsSource': 'Origine',
|
||||
'settings.designSystemsSourceLocal': 'Locale',
|
||||
'settings.designSystemsSourceGithub': 'GitHub',
|
||||
'settings.designSystemsStructure': 'Struttura',
|
||||
'settings.designSystemsModeHybrid': 'Ibrido',
|
||||
'settings.designSystemsModeNormalized': 'Normalizzato',
|
||||
'settings.designSystemsModeVerbatim': 'Invariato',
|
||||
'settings.designSystemsCraft': 'Craft',
|
||||
'settings.designSystemsCraftColor': 'Colore',
|
||||
'settings.designSystemsCraftAccessibility': 'Accessibilità',
|
||||
'settings.designSystemsGithubUrl': 'URL GitHub',
|
||||
'settings.designSystemsProjectPath': 'Percorso progetto',
|
||||
'settings.designSystemsImportGithub': 'Importa da GitHub',
|
||||
'settings.designSystemsImportProject': 'Importa dal progetto',
|
||||
'settings.designSystemsImportedStatus': '{title} importato',
|
||||
'settings.designSystemsViewImported': 'Vedi design system importato',
|
||||
'settings.designSystemsCategory': 'Categoria',
|
||||
'settings.designSystemsAllCategories': 'Tutte le categorie',
|
||||
'settings.designSystemsShowInHomeGallery': 'Mostra nella galleria iniziale',
|
||||
'settings.librarySkills': 'Competenze',
|
||||
'settings.libraryDesignSystems': 'Sistemi di design',
|
||||
'settings.librarySearch': 'Cerca...',
|
||||
|
|
|
|||
|
|
@ -1317,6 +1317,30 @@ export const ja: Dict = {
|
|||
'settings.skillsBodyRequired': 'スキルの内容は必須です。',
|
||||
'settings.designSystems': 'デザインシステム',
|
||||
'settings.designSystemsHint': 'エージェントが利用できるデザインシステムを管理',
|
||||
'settings.designSystemsInstalled': 'インストール済み',
|
||||
'settings.designSystemsAdd': 'デザインシステムを追加',
|
||||
'settings.designSystemsHiddenCount': '{count} 件をホームギャラリーから非表示',
|
||||
'settings.designSystemsShowAll': 'すべて表示',
|
||||
'settings.designSystemsShowHidden': '非表示を表示',
|
||||
'settings.designSystemsSource': 'ソース',
|
||||
'settings.designSystemsSourceLocal': 'ローカル',
|
||||
'settings.designSystemsSourceGithub': 'GitHub',
|
||||
'settings.designSystemsStructure': '構造',
|
||||
'settings.designSystemsModeHybrid': 'ハイブリッド',
|
||||
'settings.designSystemsModeNormalized': '正規化',
|
||||
'settings.designSystemsModeVerbatim': 'そのまま',
|
||||
'settings.designSystemsCraft': 'Craft',
|
||||
'settings.designSystemsCraftColor': 'カラー',
|
||||
'settings.designSystemsCraftAccessibility': 'アクセシビリティ',
|
||||
'settings.designSystemsGithubUrl': 'GitHub URL',
|
||||
'settings.designSystemsProjectPath': 'プロジェクトパス',
|
||||
'settings.designSystemsImportGithub': 'GitHub からインポート',
|
||||
'settings.designSystemsImportProject': 'プロジェクトからインポート',
|
||||
'settings.designSystemsImportedStatus': '{title} をインポートしました',
|
||||
'settings.designSystemsViewImported': 'インポートしたデザインシステムを表示',
|
||||
'settings.designSystemsCategory': 'カテゴリー',
|
||||
'settings.designSystemsAllCategories': 'すべてのカテゴリー',
|
||||
'settings.designSystemsShowInHomeGallery': 'ホームギャラリーに表示',
|
||||
'settings.librarySkills': 'スキル',
|
||||
'settings.libraryDesignSystems': 'デザインシステム',
|
||||
'settings.librarySearch': '検索...',
|
||||
|
|
|
|||
|
|
@ -1430,6 +1430,30 @@ export const ko: Dict = {
|
|||
'settings.skillsBodyRequired': '스킬 내용은 필수입니다.',
|
||||
'settings.designSystems': '디자인 시스템',
|
||||
'settings.designSystemsHint': '사용 가능한 디자인 시스템을 탐색하고 전환하세요',
|
||||
'settings.designSystemsInstalled': '설치됨',
|
||||
'settings.designSystemsAdd': '디자인 시스템 추가',
|
||||
'settings.designSystemsHiddenCount': '{count}개가 홈 갤러리에서 숨겨짐',
|
||||
'settings.designSystemsShowAll': '모두 보기',
|
||||
'settings.designSystemsShowHidden': '숨김 보기',
|
||||
'settings.designSystemsSource': '소스',
|
||||
'settings.designSystemsSourceLocal': '로컬',
|
||||
'settings.designSystemsSourceGithub': 'GitHub',
|
||||
'settings.designSystemsStructure': '구조',
|
||||
'settings.designSystemsModeHybrid': '하이브리드',
|
||||
'settings.designSystemsModeNormalized': '정규화',
|
||||
'settings.designSystemsModeVerbatim': '원본 유지',
|
||||
'settings.designSystemsCraft': 'Craft',
|
||||
'settings.designSystemsCraftColor': '색상',
|
||||
'settings.designSystemsCraftAccessibility': '접근성',
|
||||
'settings.designSystemsGithubUrl': 'GitHub URL',
|
||||
'settings.designSystemsProjectPath': '프로젝트 경로',
|
||||
'settings.designSystemsImportGithub': 'GitHub에서 가져오기',
|
||||
'settings.designSystemsImportProject': '프로젝트에서 가져오기',
|
||||
'settings.designSystemsImportedStatus': '{title} 가져옴',
|
||||
'settings.designSystemsViewImported': '가져온 디자인 시스템 보기',
|
||||
'settings.designSystemsCategory': '카테고리',
|
||||
'settings.designSystemsAllCategories': '모든 카테고리',
|
||||
'settings.designSystemsShowInHomeGallery': '홈 갤러리에 표시',
|
||||
'settings.librarySkills': '스킬',
|
||||
'settings.libraryDesignSystems': '디자인 시스템',
|
||||
'settings.librarySearch': '검색...',
|
||||
|
|
|
|||
|
|
@ -1380,6 +1380,30 @@ export const pl: Dict = {
|
|||
'settings.skillsBodyRequired': 'Treść umiejętności jest wymagana.',
|
||||
'settings.designSystems': 'Systemy projektowe',
|
||||
'settings.designSystemsHint': 'Przeglądaj i przełączaj dostępne systemy projektowe',
|
||||
'settings.designSystemsInstalled': 'Zainstalowane',
|
||||
'settings.designSystemsAdd': 'Dodaj system projektowy',
|
||||
'settings.designSystemsHiddenCount': '{count} ukryte w galerii głównej',
|
||||
'settings.designSystemsShowAll': 'Pokaż wszystkie',
|
||||
'settings.designSystemsShowHidden': 'Pokaż ukryte',
|
||||
'settings.designSystemsSource': 'Źródło',
|
||||
'settings.designSystemsSourceLocal': 'Lokalnie',
|
||||
'settings.designSystemsSourceGithub': 'GitHub',
|
||||
'settings.designSystemsStructure': 'Struktura',
|
||||
'settings.designSystemsModeHybrid': 'Hybrydowa',
|
||||
'settings.designSystemsModeNormalized': 'Znormalizowana',
|
||||
'settings.designSystemsModeVerbatim': 'Bez zmian',
|
||||
'settings.designSystemsCraft': 'Craft',
|
||||
'settings.designSystemsCraftColor': 'Kolor',
|
||||
'settings.designSystemsCraftAccessibility': 'Dostępność',
|
||||
'settings.designSystemsGithubUrl': 'URL GitHub',
|
||||
'settings.designSystemsProjectPath': 'Ścieżka projektu',
|
||||
'settings.designSystemsImportGithub': 'Importuj z GitHub',
|
||||
'settings.designSystemsImportProject': 'Importuj z projektu',
|
||||
'settings.designSystemsImportedStatus': 'Zaimportowano {title}',
|
||||
'settings.designSystemsViewImported': 'Pokaż zaimportowany system projektowy',
|
||||
'settings.designSystemsCategory': 'Kategoria',
|
||||
'settings.designSystemsAllCategories': 'Wszystkie kategorie',
|
||||
'settings.designSystemsShowInHomeGallery': 'Pokaż w galerii głównej',
|
||||
'settings.librarySkills': 'Umiejętności',
|
||||
'settings.libraryDesignSystems': 'Systemy projektowe',
|
||||
'settings.librarySearch': 'Szukaj...',
|
||||
|
|
|
|||
|
|
@ -1421,6 +1421,30 @@ export const ptBR: Dict = {
|
|||
'settings.skillsBodyRequired': 'O conteúdo da habilidade é obrigatório.',
|
||||
'settings.designSystems': 'Design systems',
|
||||
'settings.designSystemsHint': 'Explore e ative os design systems disponíveis',
|
||||
'settings.designSystemsInstalled': 'Instalados',
|
||||
'settings.designSystemsAdd': 'Adicionar design system',
|
||||
'settings.designSystemsHiddenCount': '{count} ocultos da galeria inicial',
|
||||
'settings.designSystemsShowAll': 'Mostrar todos',
|
||||
'settings.designSystemsShowHidden': 'Mostrar ocultos',
|
||||
'settings.designSystemsSource': 'Origem',
|
||||
'settings.designSystemsSourceLocal': 'Local',
|
||||
'settings.designSystemsSourceGithub': 'GitHub',
|
||||
'settings.designSystemsStructure': 'Estrutura',
|
||||
'settings.designSystemsModeHybrid': 'Híbrido',
|
||||
'settings.designSystemsModeNormalized': 'Normalizado',
|
||||
'settings.designSystemsModeVerbatim': 'Literal',
|
||||
'settings.designSystemsCraft': 'Craft',
|
||||
'settings.designSystemsCraftColor': 'Cor',
|
||||
'settings.designSystemsCraftAccessibility': 'Acessibilidade',
|
||||
'settings.designSystemsGithubUrl': 'URL do GitHub',
|
||||
'settings.designSystemsProjectPath': 'Caminho do projeto',
|
||||
'settings.designSystemsImportGithub': 'Importar do GitHub',
|
||||
'settings.designSystemsImportProject': 'Importar do projeto',
|
||||
'settings.designSystemsImportedStatus': '{title} importado',
|
||||
'settings.designSystemsViewImported': 'Ver design system importado',
|
||||
'settings.designSystemsCategory': 'Categoria',
|
||||
'settings.designSystemsAllCategories': 'Todas as categorias',
|
||||
'settings.designSystemsShowInHomeGallery': 'Mostrar na galeria inicial',
|
||||
'settings.librarySkills': 'Habilidades',
|
||||
'settings.libraryDesignSystems': 'Sistemas de design',
|
||||
'settings.librarySearch': 'Pesquisar...',
|
||||
|
|
|
|||
|
|
@ -1421,6 +1421,30 @@ export const ru: Dict = {
|
|||
'settings.skillsBodyRequired': 'Содержимое навыка обязательно.',
|
||||
'settings.designSystems': 'Дизайн-системы',
|
||||
'settings.designSystemsHint': 'Просматривайте и переключайте доступные дизайн-системы',
|
||||
'settings.designSystemsInstalled': 'Установлено',
|
||||
'settings.designSystemsAdd': 'Добавить дизайн-систему',
|
||||
'settings.designSystemsHiddenCount': '{count} скрыто из домашней галереи',
|
||||
'settings.designSystemsShowAll': 'Показать все',
|
||||
'settings.designSystemsShowHidden': 'Показать скрытые',
|
||||
'settings.designSystemsSource': 'Источник',
|
||||
'settings.designSystemsSourceLocal': 'Локально',
|
||||
'settings.designSystemsSourceGithub': 'GitHub',
|
||||
'settings.designSystemsStructure': 'Структура',
|
||||
'settings.designSystemsModeHybrid': 'Гибридно',
|
||||
'settings.designSystemsModeNormalized': 'Нормализовано',
|
||||
'settings.designSystemsModeVerbatim': 'Без изменений',
|
||||
'settings.designSystemsCraft': 'Craft',
|
||||
'settings.designSystemsCraftColor': 'Цвет',
|
||||
'settings.designSystemsCraftAccessibility': 'Доступность',
|
||||
'settings.designSystemsGithubUrl': 'URL GitHub',
|
||||
'settings.designSystemsProjectPath': 'Путь проекта',
|
||||
'settings.designSystemsImportGithub': 'Импортировать из GitHub',
|
||||
'settings.designSystemsImportProject': 'Импортировать из проекта',
|
||||
'settings.designSystemsImportedStatus': 'Импортировано: {title}',
|
||||
'settings.designSystemsViewImported': 'Открыть импортированную дизайн-систему',
|
||||
'settings.designSystemsCategory': 'Категория',
|
||||
'settings.designSystemsAllCategories': 'Все категории',
|
||||
'settings.designSystemsShowInHomeGallery': 'Показывать в домашней галерее',
|
||||
'settings.librarySkills': 'Навыки',
|
||||
'settings.libraryDesignSystems': 'Системы дизайна',
|
||||
'settings.librarySearch': 'Поиск...',
|
||||
|
|
|
|||
|
|
@ -1451,4 +1451,29 @@ export const th: Dict = {
|
|||
'settings.skillsNoFiles': 'ไม่มีไฟล์ในโฟลเดอร์ทักษะนี้',
|
||||
'settings.skillsNameRequired': 'ต้องระบุชื่อทักษะ',
|
||||
'settings.skillsBodyRequired': 'ต้องระบุเนื้อหาทักษะ',
|
||||
|
||||
'settings.designSystemsInstalled': 'ติดตั้งแล้ว',
|
||||
'settings.designSystemsAdd': 'เพิ่มระบบออกแบบ',
|
||||
'settings.designSystemsHiddenCount': 'ซ่อน {count} รายการจากแกลเลอรีหน้าแรก',
|
||||
'settings.designSystemsShowAll': 'แสดงทั้งหมด',
|
||||
'settings.designSystemsShowHidden': 'แสดงรายการที่ซ่อน',
|
||||
'settings.designSystemsSource': 'แหล่งที่มา',
|
||||
'settings.designSystemsSourceLocal': 'ในเครื่อง',
|
||||
'settings.designSystemsSourceGithub': 'GitHub',
|
||||
'settings.designSystemsStructure': 'โครงสร้าง',
|
||||
'settings.designSystemsModeHybrid': 'ไฮบริด',
|
||||
'settings.designSystemsModeNormalized': 'ปรับมาตรฐาน',
|
||||
'settings.designSystemsModeVerbatim': 'คงเดิม',
|
||||
'settings.designSystemsCraft': 'Craft',
|
||||
'settings.designSystemsCraftColor': 'สี',
|
||||
'settings.designSystemsCraftAccessibility': 'การเข้าถึง',
|
||||
'settings.designSystemsGithubUrl': 'URL GitHub',
|
||||
'settings.designSystemsProjectPath': 'พาธโปรเจกต์',
|
||||
'settings.designSystemsImportGithub': 'นำเข้าจาก GitHub',
|
||||
'settings.designSystemsImportProject': 'นำเข้าจากโปรเจกต์',
|
||||
'settings.designSystemsImportedStatus': 'นำเข้า {title} แล้ว',
|
||||
'settings.designSystemsViewImported': 'ดูระบบออกแบบที่นำเข้า',
|
||||
'settings.designSystemsCategory': 'หมวดหมู่',
|
||||
'settings.designSystemsAllCategories': 'ทุกหมวดหมู่',
|
||||
'settings.designSystemsShowInHomeGallery': 'แสดงในแกลเลอรีหน้าแรก',
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1367,6 +1367,30 @@ export const tr: Dict = {
|
|||
'settings.skillsBodyRequired': 'Beceri içeriği gereklidir.',
|
||||
'settings.designSystems': 'Tasarım sistemleri',
|
||||
'settings.designSystemsHint': 'Mevcut tasarım sistemlerini görün ve etkinleştirin',
|
||||
'settings.designSystemsInstalled': 'Yüklü',
|
||||
'settings.designSystemsAdd': 'Tasarım sistemi ekle',
|
||||
'settings.designSystemsHiddenCount': '{count} ana galeriden gizlendi',
|
||||
'settings.designSystemsShowAll': 'Tümünü göster',
|
||||
'settings.designSystemsShowHidden': 'Gizlenenleri göster',
|
||||
'settings.designSystemsSource': 'Kaynak',
|
||||
'settings.designSystemsSourceLocal': 'Yerel',
|
||||
'settings.designSystemsSourceGithub': 'GitHub',
|
||||
'settings.designSystemsStructure': 'Yapı',
|
||||
'settings.designSystemsModeHybrid': 'Hibrit',
|
||||
'settings.designSystemsModeNormalized': 'Normalize',
|
||||
'settings.designSystemsModeVerbatim': 'Olduğu gibi',
|
||||
'settings.designSystemsCraft': 'Craft',
|
||||
'settings.designSystemsCraftColor': 'Renk',
|
||||
'settings.designSystemsCraftAccessibility': 'Erişilebilirlik',
|
||||
'settings.designSystemsGithubUrl': 'GitHub URL’si',
|
||||
'settings.designSystemsProjectPath': 'Proje yolu',
|
||||
'settings.designSystemsImportGithub': 'GitHub’dan içe aktar',
|
||||
'settings.designSystemsImportProject': 'Projeden içe aktar',
|
||||
'settings.designSystemsImportedStatus': '{title} içe aktarıldı',
|
||||
'settings.designSystemsViewImported': 'İçe aktarılan tasarım sistemini görüntüle',
|
||||
'settings.designSystemsCategory': 'Kategori',
|
||||
'settings.designSystemsAllCategories': 'Tüm kategoriler',
|
||||
'settings.designSystemsShowInHomeGallery': 'Ana galeride göster',
|
||||
'settings.librarySkills': 'Beceriler',
|
||||
'settings.libraryDesignSystems': 'Tasarım sistemleri',
|
||||
'settings.librarySearch': 'Ara...',
|
||||
|
|
|
|||
|
|
@ -1422,6 +1422,30 @@ export const uk: Dict = {
|
|||
'settings.skillsBodyRequired': 'Вміст навички обов\'язковий.',
|
||||
'settings.designSystems': 'Дизайн-системи',
|
||||
'settings.designSystemsHint': 'Переглядайте та вмикайте доступні дизайн-системи',
|
||||
'settings.designSystemsInstalled': 'Встановлено',
|
||||
'settings.designSystemsAdd': 'Додати дизайн-систему',
|
||||
'settings.designSystemsHiddenCount': '{count} приховано з домашньої галереї',
|
||||
'settings.designSystemsShowAll': 'Показати всі',
|
||||
'settings.designSystemsShowHidden': 'Показати приховані',
|
||||
'settings.designSystemsSource': 'Джерело',
|
||||
'settings.designSystemsSourceLocal': 'Локально',
|
||||
'settings.designSystemsSourceGithub': 'GitHub',
|
||||
'settings.designSystemsStructure': 'Структура',
|
||||
'settings.designSystemsModeHybrid': 'Гібридна',
|
||||
'settings.designSystemsModeNormalized': 'Нормалізована',
|
||||
'settings.designSystemsModeVerbatim': 'Без змін',
|
||||
'settings.designSystemsCraft': 'Craft',
|
||||
'settings.designSystemsCraftColor': 'Колір',
|
||||
'settings.designSystemsCraftAccessibility': 'Доступність',
|
||||
'settings.designSystemsGithubUrl': 'URL GitHub',
|
||||
'settings.designSystemsProjectPath': 'Шлях проєкту',
|
||||
'settings.designSystemsImportGithub': 'Імпортувати з GitHub',
|
||||
'settings.designSystemsImportProject': 'Імпортувати з проєкту',
|
||||
'settings.designSystemsImportedStatus': 'Імпортовано {title}',
|
||||
'settings.designSystemsViewImported': 'Переглянути імпортовану дизайн-систему',
|
||||
'settings.designSystemsCategory': 'Категорія',
|
||||
'settings.designSystemsAllCategories': 'Усі категорії',
|
||||
'settings.designSystemsShowInHomeGallery': 'Показувати в домашній галереї',
|
||||
'settings.librarySkills': 'Навички',
|
||||
'settings.libraryDesignSystems': 'Системи дизайну',
|
||||
'settings.librarySearch': 'Пошук...',
|
||||
|
|
|
|||
|
|
@ -1997,7 +1997,31 @@ export const zhCN: Dict = {
|
|||
'settings.skillsNameRequired': '技能名称为必填项。',
|
||||
'settings.skillsBodyRequired': '技能内容为必填项。',
|
||||
'settings.designSystems': '设计系统',
|
||||
'settings.designSystemsHint': '浏览并启用智能体可使用的设计系统',
|
||||
'settings.designSystemsHint': '管理首页 Gallery 中显示的设计系统',
|
||||
'settings.designSystemsInstalled': '已安装',
|
||||
'settings.designSystemsAdd': '添加设计系统',
|
||||
'settings.designSystemsHiddenCount': '{count} 个已从首页 Gallery 隐藏',
|
||||
'settings.designSystemsShowAll': '显示全部',
|
||||
'settings.designSystemsShowHidden': '显示隐藏项',
|
||||
'settings.designSystemsSource': '来源',
|
||||
'settings.designSystemsSourceLocal': '本地',
|
||||
'settings.designSystemsSourceGithub': 'GitHub',
|
||||
'settings.designSystemsStructure': '结构',
|
||||
'settings.designSystemsModeHybrid': '混合',
|
||||
'settings.designSystemsModeNormalized': '规范化',
|
||||
'settings.designSystemsModeVerbatim': '原样保留',
|
||||
'settings.designSystemsCraft': '工艺',
|
||||
'settings.designSystemsCraftColor': '颜色',
|
||||
'settings.designSystemsCraftAccessibility': '无障碍',
|
||||
'settings.designSystemsGithubUrl': 'GitHub URL',
|
||||
'settings.designSystemsProjectPath': '项目路径',
|
||||
'settings.designSystemsImportGithub': '从 GitHub 导入',
|
||||
'settings.designSystemsImportProject': '从项目导入',
|
||||
'settings.designSystemsImportedStatus': '已导入 {title}',
|
||||
'settings.designSystemsViewImported': '查看导入的设计系统',
|
||||
'settings.designSystemsCategory': '分类',
|
||||
'settings.designSystemsAllCategories': '所有分类',
|
||||
'settings.designSystemsShowInHomeGallery': '在首页 Gallery 中显示',
|
||||
'settings.librarySkills': '技能',
|
||||
'settings.libraryDesignSystems': '设计系统',
|
||||
'settings.librarySearch': '搜索...',
|
||||
|
|
|
|||
|
|
@ -1555,7 +1555,31 @@ export const zhTW: Dict = {
|
|||
'settings.skillsNameRequired': '技能名稱為必填項。',
|
||||
'settings.skillsBodyRequired': '技能內容為必填項。',
|
||||
'settings.designSystems': '設計系統',
|
||||
'settings.designSystemsHint': '瀏覽並啟用代理可使用的設計系統',
|
||||
'settings.designSystemsHint': '管理首頁 Gallery 中顯示的設計系統',
|
||||
'settings.designSystemsInstalled': '已安裝',
|
||||
'settings.designSystemsAdd': '新增設計系統',
|
||||
'settings.designSystemsHiddenCount': '{count} 個已從首頁 Gallery 隱藏',
|
||||
'settings.designSystemsShowAll': '顯示全部',
|
||||
'settings.designSystemsShowHidden': '顯示隱藏項目',
|
||||
'settings.designSystemsSource': '來源',
|
||||
'settings.designSystemsSourceLocal': '本機',
|
||||
'settings.designSystemsSourceGithub': 'GitHub',
|
||||
'settings.designSystemsStructure': '結構',
|
||||
'settings.designSystemsModeHybrid': '混合',
|
||||
'settings.designSystemsModeNormalized': '規範化',
|
||||
'settings.designSystemsModeVerbatim': '原樣保留',
|
||||
'settings.designSystemsCraft': '工藝',
|
||||
'settings.designSystemsCraftColor': '色彩',
|
||||
'settings.designSystemsCraftAccessibility': '無障礙',
|
||||
'settings.designSystemsGithubUrl': 'GitHub URL',
|
||||
'settings.designSystemsProjectPath': '專案路徑',
|
||||
'settings.designSystemsImportGithub': '從 GitHub 匯入',
|
||||
'settings.designSystemsImportProject': '從專案匯入',
|
||||
'settings.designSystemsImportedStatus': '已匯入 {title}',
|
||||
'settings.designSystemsViewImported': '查看匯入的設計系統',
|
||||
'settings.designSystemsCategory': '分類',
|
||||
'settings.designSystemsAllCategories': '所有分類',
|
||||
'settings.designSystemsShowInHomeGallery': '在首頁 Gallery 中顯示',
|
||||
'settings.librarySkills': '技能',
|
||||
'settings.libraryDesignSystems': '設計系統',
|
||||
'settings.librarySearch': '搜尋...',
|
||||
|
|
|
|||
|
|
@ -375,6 +375,30 @@ export interface Dict {
|
|||
'settings.skillsBodyRequired': string;
|
||||
'settings.designSystems': string;
|
||||
'settings.designSystemsHint': string;
|
||||
'settings.designSystemsInstalled': string;
|
||||
'settings.designSystemsAdd': string;
|
||||
'settings.designSystemsHiddenCount': string;
|
||||
'settings.designSystemsShowAll': string;
|
||||
'settings.designSystemsShowHidden': string;
|
||||
'settings.designSystemsSource': string;
|
||||
'settings.designSystemsSourceLocal': string;
|
||||
'settings.designSystemsSourceGithub': string;
|
||||
'settings.designSystemsStructure': string;
|
||||
'settings.designSystemsModeHybrid': string;
|
||||
'settings.designSystemsModeNormalized': string;
|
||||
'settings.designSystemsModeVerbatim': string;
|
||||
'settings.designSystemsCraft': string;
|
||||
'settings.designSystemsCraftColor': string;
|
||||
'settings.designSystemsCraftAccessibility': string;
|
||||
'settings.designSystemsGithubUrl': string;
|
||||
'settings.designSystemsProjectPath': string;
|
||||
'settings.designSystemsImportGithub': string;
|
||||
'settings.designSystemsImportProject': string;
|
||||
'settings.designSystemsImportedStatus': string;
|
||||
'settings.designSystemsViewImported': string;
|
||||
'settings.designSystemsCategory': string;
|
||||
'settings.designSystemsAllCategories': string;
|
||||
'settings.designSystemsShowInHomeGallery': string;
|
||||
'settings.librarySkills': string;
|
||||
'settings.libraryDesignSystems': string;
|
||||
'settings.librarySearch': string;
|
||||
|
|
|
|||
|
|
@ -19624,6 +19624,26 @@ body.desktop-pet-shell .pet-task-item {
|
|||
max-width: 180px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.library-toolbar.library-toolbar-row {
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.library-toolbar.library-toolbar-row .library-search {
|
||||
flex: 1 1 0;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.library-toolbar.library-toolbar-row .library-filter-select {
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
.library-toolbar.library-toolbar-row .library-filter-select select {
|
||||
min-height: 36px;
|
||||
}
|
||||
|
||||
.library-filter-select select:hover:not(:disabled) {
|
||||
border-color: var(--border-strong);
|
||||
}
|
||||
|
|
@ -19828,21 +19848,48 @@ body.desktop-pet-shell .pet-task-item {
|
|||
|
||||
.library-ds-card {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr) auto;
|
||||
align-items: stretch;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 12px;
|
||||
overflow: hidden;
|
||||
padding: 12px;
|
||||
gap: 8px;
|
||||
padding: 10px;
|
||||
gap: 10px;
|
||||
transition:
|
||||
border-color 160ms cubic-bezier(0.23, 1, 0.32, 1),
|
||||
box-shadow 160ms cubic-bezier(0.23, 1, 0.32, 1),
|
||||
background 160ms cubic-bezier(0.23, 1, 0.32, 1);
|
||||
}
|
||||
|
||||
.library-ds-card.disabled {
|
||||
opacity: 0.45;
|
||||
}
|
||||
|
||||
.library-ds-card.highlighted {
|
||||
border-color: var(--accent);
|
||||
background: color-mix(in srgb, var(--accent) 6%, var(--bg-panel));
|
||||
box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
|
||||
}
|
||||
|
||||
.library-ds-card-content {
|
||||
min-width: 0;
|
||||
padding: 2px;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
transition:
|
||||
background 120ms cubic-bezier(0.23, 1, 0.32, 1),
|
||||
box-shadow 120ms cubic-bezier(0.23, 1, 0.32, 1);
|
||||
}
|
||||
|
||||
.library-ds-card-content:hover {
|
||||
background: var(--bg-hover);
|
||||
}
|
||||
|
||||
.library-ds-card-content:focus-visible {
|
||||
outline: none;
|
||||
box-shadow: 0 0 0 2px var(--selected-soft);
|
||||
background: var(--bg-hover);
|
||||
}
|
||||
|
||||
.library-ds-swatches {
|
||||
|
|
@ -19874,8 +19921,17 @@ body.desktop-pet-shell .pet-task-item {
|
|||
overflow: hidden;
|
||||
}
|
||||
|
||||
.library-ds-card .toggle-switch {
|
||||
align-self: flex-end;
|
||||
.library-ds-toggle-cell {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: center;
|
||||
padding-left: 10px;
|
||||
border-left: 1px solid var(--border-subtle);
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.library-ds-toggle-cell .toggle-switch {
|
||||
margin-top: 1px;
|
||||
}
|
||||
|
||||
.library-preview {
|
||||
|
|
@ -21246,12 +21302,6 @@ body.desktop-pet-shell .pet-task-item {
|
|||
|
||||
/* Library install UI */
|
||||
|
||||
.library-toolbar-row {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.library-install-btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
|
|
@ -21274,19 +21324,100 @@ body.desktop-pet-shell .pet-task-item {
|
|||
.library-install-form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
padding: 10px;
|
||||
margin-top: 8px;
|
||||
gap: 12px;
|
||||
margin: 0;
|
||||
border: none;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.library-section-header {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
margin: 8px 0;
|
||||
}
|
||||
|
||||
.library-section-title {
|
||||
margin: 0;
|
||||
color: var(--text-primary);
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
line-height: 1.25;
|
||||
}
|
||||
|
||||
.library-section-count {
|
||||
margin-left: 6px;
|
||||
color: var(--text-muted);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.library-add-btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding: 5px 10px;
|
||||
white-space: nowrap;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.library-add-btn[aria-expanded="true"] {
|
||||
border-color: var(--border-strong);
|
||||
background: var(--bg-subtle);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.library-add-btn-icon {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 13px;
|
||||
color: currentColor;
|
||||
font-size: 13px;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.library-hidden-banner {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
width: fit-content;
|
||||
margin: -2px 0 10px;
|
||||
padding: 5px 8px;
|
||||
border: 1px solid var(--border-subtle);
|
||||
border-radius: 6px;
|
||||
background: var(--bg-subtle);
|
||||
color: var(--text-muted);
|
||||
font-size: 12px;
|
||||
line-height: 1.25;
|
||||
}
|
||||
|
||||
.library-hidden-banner-link {
|
||||
padding: 0;
|
||||
border: none;
|
||||
background: transparent;
|
||||
color: var(--accent);
|
||||
font: inherit;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.library-hidden-banner-link:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.library-add-panel .library-install-form {
|
||||
padding: 12px;
|
||||
margin: 0 0 12px;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 8px;
|
||||
background: var(--bg-primary);
|
||||
}
|
||||
|
||||
.library-import-controls {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
gap: 8px 14px;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.library-install-form .library-import-source-control,
|
||||
|
|
@ -21328,53 +21459,79 @@ body.desktop-pet-shell .pet-task-item {
|
|||
box-shadow: var(--shadow-xs);
|
||||
}
|
||||
|
||||
.library-import-options {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px 14px;
|
||||
.library-import-row {
|
||||
display: grid;
|
||||
grid-template-columns: 96px minmax(0, 1fr);
|
||||
gap: 14px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.library-import-option-group {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.library-import-option-label {
|
||||
color: var(--text-muted);
|
||||
font-size: 11px;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.08em;
|
||||
line-height: 1.2;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.library-import-mode-control {
|
||||
--seg-cols: 3;
|
||||
}
|
||||
|
||||
.library-import-checkbox {
|
||||
display: inline-flex;
|
||||
flex-direction: row;
|
||||
.library-import-checkboxes {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
gap: 8px 12px;
|
||||
min-height: 30px;
|
||||
}
|
||||
|
||||
.library-import-checkbox {
|
||||
display: inline-grid;
|
||||
grid-template-columns: auto auto;
|
||||
align-items: center;
|
||||
column-gap: 6px;
|
||||
color: var(--text-secondary);
|
||||
font-size: 12px;
|
||||
line-height: 1.2;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.library-import-checkbox input {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
margin: 0;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
.library-install-row {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
align-items: center;
|
||||
min-width: 0;
|
||||
}
|
||||
.library-install-row .library-search {
|
||||
|
||||
.library-import-input {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
min-height: 30px;
|
||||
padding: 4px 10px;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 6px;
|
||||
background: var(--bg-panel);
|
||||
color: var(--text-primary);
|
||||
font-size: 13px;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.library-import-input:hover {
|
||||
border-color: var(--border-strong);
|
||||
}
|
||||
|
||||
.library-import-input:focus {
|
||||
border-color: var(--selected);
|
||||
box-shadow: 0 0 0 3px var(--selected-soft);
|
||||
}
|
||||
|
||||
.library-install-submit {
|
||||
|
|
@ -21389,7 +21546,10 @@ body.desktop-pet-shell .pet-task-item {
|
|||
flex-shrink: 0;
|
||||
}
|
||||
.library-install-submit:disabled {
|
||||
opacity: 0.5;
|
||||
border-color: var(--border-subtle);
|
||||
background: var(--bg-subtle);
|
||||
color: var(--text-muted);
|
||||
opacity: 1;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
|
|
@ -21400,11 +21560,59 @@ body.desktop-pet-shell .pet-task-item {
|
|||
}
|
||||
|
||||
.library-install-status {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
color: var(--text-secondary);
|
||||
font-size: 12px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.library-install-status-link {
|
||||
padding: 0;
|
||||
border: none;
|
||||
background: transparent;
|
||||
color: var(--accent);
|
||||
font: inherit;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.library-install-status-link:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
@media (max-width: 720px) {
|
||||
.library-import-controls {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.library-import-row,
|
||||
.library-install-row {
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.library-install-form .library-import-source-control,
|
||||
.library-install-form .library-import-mode-control {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.library-install-form .library-import-source-control button,
|
||||
.library-install-form .library-import-mode-control button {
|
||||
flex: 1 1 0;
|
||||
}
|
||||
|
||||
.library-install-submit {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.library-source-badge {
|
||||
display: inline-block;
|
||||
font-size: 10px;
|
||||
|
|
|
|||
|
|
@ -15,6 +15,8 @@ const {
|
|||
fetchDesignSystemsMock,
|
||||
fetchSkillMock,
|
||||
fetchDesignSystemMock,
|
||||
importLocalDesignSystemMock,
|
||||
importGitHubDesignSystemMock,
|
||||
fetchProviderModelsMock,
|
||||
} = vi.hoisted(() => ({
|
||||
playSoundMock: vi.fn(),
|
||||
|
|
@ -27,6 +29,8 @@ const {
|
|||
fetchDesignSystemsMock: vi.fn(),
|
||||
fetchSkillMock: vi.fn(),
|
||||
fetchDesignSystemMock: vi.fn(),
|
||||
importLocalDesignSystemMock: vi.fn(),
|
||||
importGitHubDesignSystemMock: vi.fn(),
|
||||
fetchProviderModelsMock: vi.fn(),
|
||||
}));
|
||||
|
||||
|
|
@ -55,6 +59,8 @@ vi.mock('../../src/providers/registry', async () => {
|
|||
fetchDesignSystems: fetchDesignSystemsMock,
|
||||
fetchSkill: fetchSkillMock,
|
||||
fetchDesignSystem: fetchDesignSystemMock,
|
||||
importLocalDesignSystem: importLocalDesignSystemMock,
|
||||
importGitHubDesignSystem: importGitHubDesignSystemMock,
|
||||
codexPetSpritesheetUrl: (pet: { spritesheetUrl: string }) => pet.spritesheetUrl,
|
||||
};
|
||||
});
|
||||
|
|
@ -274,6 +280,8 @@ beforeEach(() => {
|
|||
fetchDesignSystemsMock.mockReset();
|
||||
fetchSkillMock.mockReset();
|
||||
fetchDesignSystemMock.mockReset();
|
||||
importLocalDesignSystemMock.mockReset();
|
||||
importGitHubDesignSystemMock.mockReset();
|
||||
fetchProviderModelsMock.mockReset();
|
||||
notificationPermissionMock.mockReturnValue('default');
|
||||
requestNotificationPermissionMock.mockResolvedValue('granted');
|
||||
|
|
@ -300,6 +308,24 @@ beforeEach(() => {
|
|||
id,
|
||||
body: `design system body for ${id}`,
|
||||
}));
|
||||
importLocalDesignSystemMock.mockResolvedValue({
|
||||
designSystem: {
|
||||
id: 'imported-system',
|
||||
title: 'Imported System',
|
||||
summary: 'A newly imported system.',
|
||||
category: 'Imported',
|
||||
swatches: ['#0f766e', '#ccfbf1'],
|
||||
},
|
||||
});
|
||||
importGitHubDesignSystemMock.mockResolvedValue({
|
||||
designSystem: {
|
||||
id: 'github-system',
|
||||
title: 'GitHub System',
|
||||
summary: 'A GitHub imported system.',
|
||||
category: 'Imported',
|
||||
swatches: ['#1d4ed8', '#bfdbfe'],
|
||||
},
|
||||
});
|
||||
fetchProviderModelsMock.mockResolvedValue({
|
||||
ok: true,
|
||||
kind: 'success',
|
||||
|
|
@ -2479,7 +2505,9 @@ describe('SettingsDialog design systems section', () => {
|
|||
expect(screen.getByText('Signal Green')).toBeTruthy();
|
||||
});
|
||||
|
||||
fireEvent.click(screen.getByRole('button', { name: /Experimental1/i }));
|
||||
fireEvent.change(screen.getByLabelText('Category'), {
|
||||
target: { value: 'Experimental' },
|
||||
});
|
||||
expect(screen.queryByText('Neutral Modern')).toBeNull();
|
||||
expect(screen.getByText('Signal Green')).toBeTruthy();
|
||||
|
||||
|
|
@ -2489,7 +2517,7 @@ describe('SettingsDialog design systems section', () => {
|
|||
expect(screen.getByText('design system body for signal-green')).toBeTruthy();
|
||||
});
|
||||
|
||||
fireEvent.click(screen.getAllByTitle('Toggle')[0] as HTMLElement);
|
||||
fireEvent.click(screen.getAllByLabelText('Show in home gallery')[0] as HTMLElement);
|
||||
|
||||
await waitForPersist(
|
||||
onPersist,
|
||||
|
|
@ -2499,6 +2527,48 @@ describe('SettingsDialog design systems section', () => {
|
|||
{},
|
||||
);
|
||||
});
|
||||
|
||||
it('shows an imported design system from the hidden-only import CTA', async () => {
|
||||
renderSettingsDialog(
|
||||
{
|
||||
mode: 'daemon',
|
||||
agentId: 'codex',
|
||||
disabledDesignSystems: ['neutral-modern'],
|
||||
},
|
||||
{ initialSection: 'designSystems' },
|
||||
);
|
||||
|
||||
await waitFor(() => {
|
||||
expect(screen.getByText('Neutral Modern')).toBeTruthy();
|
||||
expect(screen.getByText('Signal Green')).toBeTruthy();
|
||||
});
|
||||
|
||||
fireEvent.click(screen.getByRole('button', { name: 'Show hidden' }));
|
||||
expect(screen.getByText('Neutral Modern')).toBeTruthy();
|
||||
expect(screen.queryByText('Signal Green')).toBeNull();
|
||||
|
||||
fireEvent.click(screen.getByRole('button', { name: 'Add design system' }));
|
||||
fireEvent.change(screen.getByPlaceholderText('/path/to/project'), {
|
||||
target: { value: '/tmp/imported-system' },
|
||||
});
|
||||
fireEvent.click(screen.getByRole('button', { name: 'Import from project' }));
|
||||
|
||||
await waitFor(() => {
|
||||
expect(importLocalDesignSystemMock).toHaveBeenCalledWith({
|
||||
baseDir: '/tmp/imported-system',
|
||||
importMode: 'hybrid',
|
||||
craftApplies: [],
|
||||
});
|
||||
expect(screen.getByText('Imported Imported System')).toBeTruthy();
|
||||
});
|
||||
|
||||
fireEvent.click(screen.getByRole('button', { name: 'View imported design system' }));
|
||||
|
||||
await waitFor(() => {
|
||||
expect(screen.getByText('Imported System')).toBeTruthy();
|
||||
});
|
||||
expect(screen.queryByText('No items match your search.')).toBeNull();
|
||||
});
|
||||
});
|
||||
|
||||
describe('SettingsDialog about interactions', () => {
|
||||
|
|
|
|||
Loading…
Reference in a new issue