diff options
Diffstat (limited to 'frontend/src/components/VNInterface.tsx')
| -rw-r--r-- | frontend/src/components/VNInterface.tsx | 50 |
1 files changed, 20 insertions, 30 deletions
diff --git a/frontend/src/components/VNInterface.tsx b/frontend/src/components/VNInterface.tsx index 48b150a..0a77f39 100644 --- a/frontend/src/components/VNInterface.tsx +++ b/frontend/src/components/VNInterface.tsx @@ -9,11 +9,11 @@ import { showSettingsModalStore, isVisibleStore, yenBalanceStore, - documentUiEnabledStore, + documentEditorEnabledStore, toggleStandby, toggleShowChoices, updateTime, - setDocumentUiEnabled, + setDocumentEditorEnabled } from '../stores' interface VNInterfaceProps { @@ -28,7 +28,7 @@ export function VNInterface({ onLogout }: VNInterfaceProps) { const showSettingsModal = useStore(showSettingsModalStore) const isVisible = useStore(isVisibleStore) const yenBalance = useStore(yenBalanceStore) - const documentUiEnabled = useStore(documentUiEnabledStore) + const documentEditorEnabled = useStore(documentEditorEnabledStore) // Fade in effect on mount useEffect(() => { @@ -110,20 +110,20 @@ export function VNInterface({ onLogout }: VNInterfaceProps) { <span className="info-value">Daemons</span> </Link> </div> - {documentUiEnabled && ( + <div className="status-item"> + <Link to="/contracts" style={{ color: '#66ccff', textDecoration: 'none', display: 'flex', alignItems: 'center', gap: '4px' }}> + <span className="info-label">View:</span> + <span className="info-value">Contracts</span> + </Link> + </div> + {documentEditorEnabled && ( <div className="status-item"> - <Link to="/directives" style={{ color: '#ff66cc', textDecoration: 'none', display: 'flex', alignItems: 'center', gap: '4px', fontWeight: 600 }}> - <span className="info-label">View:</span> + <Link to="/directives" style={{ color: '#66ccff', textDecoration: 'none', display: 'flex', alignItems: 'center', gap: '4px' }}> + <span className="info-label">Edit:</span> <span className="info-value">Directives</span> </Link> </div> )} - <div className="status-item"> - <Link to="/contracts" style={{ color: documentUiEnabled ? '#8899bb' : '#66ccff', textDecoration: 'none', display: 'flex', alignItems: 'center', gap: '4px', fontSize: documentUiEnabled ? '0.85em' : undefined }}> - <span className="info-label">{documentUiEnabled ? 'Legacy:' : 'View:'}</span> - <span className="info-value">Contracts</span> - </Link> - </div> </div> </div> </div> @@ -209,28 +209,18 @@ export function VNInterface({ onLogout }: VNInterfaceProps) { </div> </div> <div className="settings-section"> - <h3>Experimental</h3> + <h3>Feature Flags</h3> <div className="setting-item"> - <label style={{ display: 'flex', alignItems: 'center', gap: '8px', cursor: 'pointer' }}> + <label> <input type="checkbox" - checked={documentUiEnabled} - onChange={(e) => setDocumentUiEnabled(e.target.checked)} - /> - Document UI (Experimental) + checked={documentEditorEnabled} + onChange={(e) => setDocumentEditorEnabled(e.target.checked)} + /> Document Editor (Directives) </label> - <p style={{ fontSize: '0.8em', color: '#9ca3af', marginTop: '4px' }}> - Replace the directive management interface with an interactive document editor. This is a proof of concept. - </p> - {documentUiEnabled && ( - <Link - to="/directives" - style={{ display: 'inline-block', marginTop: '8px', color: '#ff66cc', fontSize: '0.9em' }} - onClick={() => showSettingsModalStore.set(false)} - > - Open Directives Editor {'\u2192'} - </Link> - )} + <div style={{ fontSize: '0.8em', opacity: 0.7, marginTop: '4px' }}> + Enable the directive document editor interface + </div> </div> </div> <div className="settings-section"> |