LZH-YS1998
379 lines
13 KiB
TypeScript
379 lines
13 KiB
TypeScript
/**
|
|
* OrgVersionSwitcher — editor-toolbar "version picker" for the org.
|
|
*
|
|
* Conceptually equivalent to Figma's page switcher or VS Code's git-branch
|
|
* indicator: a compact pill showing the active saved-org name (+ modified
|
|
* indicator when the editor has changed since the last loaded snapshot),
|
|
* plus a glass popover command-menu for search / load / save-as-copy
|
|
* / delete.
|
|
*
|
|
* All visual tokens match the house dialect (refined-technical, dark, no
|
|
* emoji, no purple gradients). Styles live in structure.css under `.sos-*`.
|
|
*
|
|
* Lives in the StructureEditor toolbar (Team tab, org mode only).
|
|
*/
|
|
import { useCallback, useEffect, useRef, useState } from 'react'
|
|
|
|
interface SavedOrg {
|
|
name: string
|
|
organization_name?: string
|
|
saved_at: number
|
|
roles_count: number
|
|
employees_count: number
|
|
}
|
|
|
|
export interface OrgVersionSwitcherProps {
|
|
savedOrgs: SavedOrg[] | null
|
|
activeName: string | null
|
|
isDirty: boolean
|
|
onRefresh: () => void
|
|
onSaveAs: (name: string, overwrite: boolean) => void
|
|
onLoad: (name: string) => void
|
|
onDelete: (name: string) => void
|
|
}
|
|
|
|
const MAX_DISPLAY_NAME = 80
|
|
|
|
function formatRelativeTime(epochSeconds: number): string {
|
|
const now = Date.now() / 1000
|
|
const diff = Math.max(0, now - epochSeconds)
|
|
if (diff < 60) return 'just now'
|
|
if (diff < 3600) return `${Math.floor(diff / 60)}m ago`
|
|
if (diff < 86400) return `${Math.floor(diff / 3600)}h ago`
|
|
if (diff < 604800) return `${Math.floor(diff / 86400)}d ago`
|
|
try {
|
|
return new Date(epochSeconds * 1000).toLocaleDateString()
|
|
} catch {
|
|
return ''
|
|
}
|
|
}
|
|
|
|
function displayOrgName(org: SavedOrg): string {
|
|
return (org.organization_name || org.name).trim() || org.name
|
|
}
|
|
|
|
function isValidDisplayName(value: string): boolean {
|
|
const trimmed = value.trim()
|
|
return trimmed.length > 0
|
|
&& trimmed.length <= MAX_DISPLAY_NAME
|
|
&& !/[\\/]/.test(trimmed)
|
|
&& !/[\u0000-\u001f]/.test(trimmed)
|
|
}
|
|
|
|
function slugifyOrgDisplayName(value: string): string {
|
|
const ascii = value.normalize('NFKD').replace(/[^\x00-\x7F]/g, '')
|
|
const slug = ascii
|
|
.toLowerCase()
|
|
.trim()
|
|
.replace(/\s+/g, '_')
|
|
.replace(/[^a-z0-9_-]+/g, '_')
|
|
.replace(/_+/g, '_')
|
|
.replace(/^[_-]+|[_-]+$/g, '')
|
|
return slug.slice(0, 64) || 'org'
|
|
}
|
|
|
|
/* Inline SVG glyphs — match the house convention (no emoji, no font icons). */
|
|
function LayersGlyph({ className }: { className?: string }) {
|
|
return (
|
|
<svg className={className} width="12" height="12" viewBox="0 0 16 16" fill="none" aria-hidden>
|
|
<path d="M8 1.5L1.5 4.5L8 7.5L14.5 4.5L8 1.5Z" stroke="currentColor" strokeWidth="1.3" strokeLinejoin="round" />
|
|
<path d="M2 8L8 10.8L14 8" stroke="currentColor" strokeWidth="1.3" strokeLinejoin="round" opacity="0.6" />
|
|
<path d="M2 11.5L8 14.2L14 11.5" stroke="currentColor" strokeWidth="1.3" strokeLinejoin="round" opacity="0.35" />
|
|
</svg>
|
|
)
|
|
}
|
|
|
|
function Caret({ className }: { className?: string }) {
|
|
return (
|
|
<svg className={className} width="10" height="10" viewBox="0 0 12 12" fill="none" aria-hidden>
|
|
<path d="M3 4.5L6 7.5L9 4.5" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round" />
|
|
</svg>
|
|
)
|
|
}
|
|
|
|
function SearchGlyph({ className }: { className?: string }) {
|
|
return (
|
|
<svg className={className} width="11" height="11" viewBox="0 0 12 12" fill="none" aria-hidden>
|
|
<circle cx="5" cy="5" r="3.2" stroke="currentColor" strokeWidth="1.3" />
|
|
<path d="M7.5 7.5L10 10" stroke="currentColor" strokeWidth="1.3" strokeLinecap="round" />
|
|
</svg>
|
|
)
|
|
}
|
|
|
|
export function OrgVersionSwitcher({
|
|
savedOrgs, activeName, isDirty, onRefresh, onSaveAs, onLoad, onDelete,
|
|
}: OrgVersionSwitcherProps) {
|
|
const [open, setOpen] = useState(false)
|
|
const [search, setSearch] = useState('')
|
|
const [highlighted, setHighlighted] = useState(0)
|
|
const [saveAsMode, setSaveAsMode] = useState(false)
|
|
const [saveAsName, setSaveAsName] = useState('')
|
|
const [confirmDelete, setConfirmDelete] = useState<string | null>(null)
|
|
const [loadingName, setLoadingName] = useState<string | null>(null)
|
|
const wrapperRef = useRef<HTMLDivElement>(null)
|
|
const saveInputRef = useRef<HTMLInputElement>(null)
|
|
|
|
// Clear loading state once the list or activeName updates (proxy for ack).
|
|
useEffect(() => { setLoadingName(null) }, [activeName, savedOrgs])
|
|
|
|
// Filter list by search.
|
|
const filtered = (savedOrgs ?? []).filter(o =>
|
|
!search.trim() || o.name.toLowerCase().includes(search.trim().toLowerCase()),
|
|
)
|
|
|
|
// Refresh once on first open.
|
|
const firstOpenRef = useRef(false)
|
|
useEffect(() => {
|
|
if (open && !firstOpenRef.current) {
|
|
firstOpenRef.current = true
|
|
onRefresh()
|
|
}
|
|
}, [open, onRefresh])
|
|
|
|
// Auto-focus save input when entering save-as mode.
|
|
useEffect(() => {
|
|
if (saveAsMode) saveInputRef.current?.focus()
|
|
}, [saveAsMode])
|
|
|
|
// Clamp highlight when filtered list shrinks.
|
|
useEffect(() => {
|
|
setHighlighted(h => Math.min(h, Math.max(0, filtered.length - 1)))
|
|
}, [filtered.length])
|
|
|
|
// Close on outside click.
|
|
useEffect(() => {
|
|
if (!open) return
|
|
const onDocClick = (e: MouseEvent) => {
|
|
if (wrapperRef.current && !wrapperRef.current.contains(e.target as Node)) {
|
|
closePopover()
|
|
}
|
|
}
|
|
document.addEventListener('mousedown', onDocClick)
|
|
return () => document.removeEventListener('mousedown', onDocClick)
|
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
}, [open])
|
|
|
|
const closePopover = useCallback(() => {
|
|
setOpen(false)
|
|
setSearch('')
|
|
setHighlighted(0)
|
|
setSaveAsMode(false)
|
|
setSaveAsName('')
|
|
setConfirmDelete(null)
|
|
}, [])
|
|
|
|
const handleLoad = useCallback((name: string) => {
|
|
if (name === activeName) {
|
|
// Already active — no need to round-trip; just close the popover.
|
|
closePopover()
|
|
return
|
|
}
|
|
setLoadingName(name)
|
|
onLoad(name)
|
|
closePopover()
|
|
}, [onLoad, closePopover, activeName])
|
|
|
|
const handleDelete = useCallback((name: string) => {
|
|
onDelete(name)
|
|
setConfirmDelete(null)
|
|
}, [onDelete])
|
|
|
|
const saveAsTrimmed = saveAsName.trim()
|
|
const saveAsValid = isValidDisplayName(saveAsTrimmed)
|
|
const saveAsSlug = slugifyOrgDisplayName(saveAsTrimmed)
|
|
const saveAsExists = (savedOrgs ?? []).some(o =>
|
|
o.name === saveAsSlug || displayOrgName(o).toLowerCase() === saveAsTrimmed.toLowerCase(),
|
|
)
|
|
|
|
const handleSaveAs = useCallback(() => {
|
|
if (!saveAsValid) return
|
|
onSaveAs(saveAsTrimmed, saveAsExists)
|
|
setSaveAsMode(false)
|
|
setSaveAsName('')
|
|
closePopover()
|
|
}, [saveAsValid, saveAsTrimmed, saveAsExists, onSaveAs, closePopover])
|
|
|
|
// Keyboard navigation inside the popover.
|
|
const onKeyDown = (e: React.KeyboardEvent) => {
|
|
if (e.key === 'Escape') {
|
|
e.preventDefault()
|
|
closePopover()
|
|
return
|
|
}
|
|
if (saveAsMode) {
|
|
if (e.key === 'Enter') {
|
|
e.preventDefault()
|
|
handleSaveAs()
|
|
}
|
|
return
|
|
}
|
|
if (e.key === 'ArrowDown') {
|
|
e.preventDefault()
|
|
setHighlighted(h => Math.min(h + 1, Math.max(0, filtered.length - 1)))
|
|
} else if (e.key === 'ArrowUp') {
|
|
e.preventDefault()
|
|
setHighlighted(h => Math.max(0, h - 1))
|
|
} else if (e.key === 'Enter') {
|
|
const target = filtered[highlighted]
|
|
if (target) handleLoad(target.name)
|
|
} else if ((e.key === 'Backspace' || e.key === 'Delete') && (e.metaKey || e.ctrlKey)) {
|
|
const target = filtered[highlighted]
|
|
if (target) {
|
|
e.preventDefault()
|
|
setConfirmDelete(target.name)
|
|
}
|
|
}
|
|
}
|
|
|
|
return (
|
|
<div className="sos-wrap" ref={wrapperRef}>
|
|
<button
|
|
type="button"
|
|
className="sos-pill"
|
|
data-open={open ? 'true' : 'false'}
|
|
onClick={() => setOpen(o => !o)}
|
|
aria-haspopup="listbox"
|
|
aria-expanded={open}
|
|
title={activeName ? `Active saved architecture: ${activeName}` : 'No saved architecture loaded'}
|
|
>
|
|
<LayersGlyph className="sos-pill-glyph" />
|
|
{activeName ? (
|
|
<span className="sos-pill-name">{activeName}</span>
|
|
) : (
|
|
<span className="sos-pill-name sos-pill-name--placeholder">draft</span>
|
|
)}
|
|
{isDirty && <span className="sos-pill-dirty" aria-label="Modified since opened" />}
|
|
<Caret className="sos-pill-caret" />
|
|
</button>
|
|
|
|
{open && (
|
|
<div className="sos-popover" role="listbox" onKeyDown={onKeyDown} tabIndex={-1}>
|
|
<div className="sos-search-row">
|
|
<SearchGlyph className="sos-search-glyph" />
|
|
<input
|
|
type="text"
|
|
className="sos-search-input"
|
|
placeholder="Search architectures…"
|
|
value={search}
|
|
onChange={e => { setSearch(e.target.value); setHighlighted(0) }}
|
|
autoFocus
|
|
onKeyDown={onKeyDown}
|
|
/>
|
|
<kbd className="sos-search-hint">↑↓ ↵</kbd>
|
|
</div>
|
|
|
|
<div className="sos-list">
|
|
{savedOrgs === null ? (
|
|
<div className="sos-empty">Loading…</div>
|
|
) : filtered.length === 0 ? (
|
|
<div className="sos-empty">
|
|
{(savedOrgs ?? []).length === 0 ? 'No saved architectures.' : 'No matches.'}
|
|
</div>
|
|
) : (
|
|
filtered.map((org, idx) => {
|
|
const isActive = activeName === org.name
|
|
const isHighlighted = highlighted === idx
|
|
const title = displayOrgName(org)
|
|
return (
|
|
<div
|
|
key={org.name}
|
|
className={`sos-row${isActive ? ' sos-row--active' : ''}`}
|
|
data-highlighted={isHighlighted ? 'true' : 'false'}
|
|
onMouseEnter={() => setHighlighted(idx)}
|
|
onClick={() => handleLoad(org.name)}
|
|
role="option"
|
|
aria-selected={isActive}
|
|
>
|
|
<div className="sos-row-meta">
|
|
<span className="sos-row-name">{title}</span>
|
|
<span className="sos-row-stats">
|
|
{title !== org.name && `${org.name} · `}
|
|
{org.roles_count} {org.roles_count === 1 ? 'role' : 'roles'}
|
|
{' · '}
|
|
{org.employees_count} {org.employees_count === 1 ? 'employee' : 'employees'}
|
|
{' · '}
|
|
{formatRelativeTime(org.saved_at)}
|
|
</span>
|
|
</div>
|
|
{loadingName === org.name ? (
|
|
<span className="sos-row-loading">loading…</span>
|
|
) : isActive ? (
|
|
<span className="sos-row-active-chip">active</span>
|
|
) : confirmDelete === org.name ? (
|
|
<button
|
|
type="button"
|
|
className="sos-row-delete sos-row-delete--confirm"
|
|
onClick={e => { e.stopPropagation(); handleDelete(org.name) }}
|
|
>
|
|
confirm
|
|
</button>
|
|
) : (
|
|
<button
|
|
type="button"
|
|
className="sos-row-delete"
|
|
onClick={e => { e.stopPropagation(); setConfirmDelete(org.name) }}
|
|
title="Delete"
|
|
>
|
|
delete
|
|
</button>
|
|
)}
|
|
</div>
|
|
)
|
|
})
|
|
)}
|
|
</div>
|
|
|
|
<div className="sos-save-as">
|
|
{saveAsMode ? (
|
|
<div className="sos-save-as-form">
|
|
<input
|
|
ref={saveInputRef}
|
|
type="text"
|
|
className="sos-save-as-input"
|
|
placeholder="Organization name"
|
|
value={saveAsName}
|
|
onChange={e => setSaveAsName(e.target.value)}
|
|
onKeyDown={onKeyDown}
|
|
/>
|
|
<button
|
|
type="button"
|
|
className="btn btn-primary btn-sm"
|
|
onClick={handleSaveAs}
|
|
disabled={!saveAsValid}
|
|
>
|
|
{saveAsExists ? 'Overwrite copy' : 'Save as copy'}
|
|
</button>
|
|
<button
|
|
type="button"
|
|
className="btn btn-ghost btn-sm"
|
|
onClick={() => { setSaveAsMode(false); setSaveAsName('') }}
|
|
>
|
|
Cancel
|
|
</button>
|
|
</div>
|
|
) : (
|
|
<button
|
|
type="button"
|
|
className="sos-save-as-trigger"
|
|
onClick={() => setSaveAsMode(true)}
|
|
>
|
|
+ Save as copy...
|
|
</button>
|
|
)}
|
|
{saveAsMode && saveAsName && !saveAsValid && (
|
|
<div className="sos-save-as-hint sos-save-as-hint--warn">
|
|
Use up to 80 characters. Slashes are not allowed.
|
|
</div>
|
|
)}
|
|
{saveAsMode && saveAsValid && saveAsExists && (
|
|
<div className="sos-save-as-hint sos-save-as-hint--warn">
|
|
Name exists - this will overwrite that copy.
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
)
|
|
}
|