238 lines
9.1 KiB
TypeScript
238 lines
9.1 KiB
TypeScript
'use client'
|
|
|
|
import dynamic from 'next/dynamic'
|
|
import Link from 'next/link'
|
|
import { useState, useCallback, useEffect, useRef } from 'react'
|
|
import { starterNodes } from '@/lib/presets'
|
|
import { serializeState, deserializeState, saveToLocal, loadFromLocal, listSavedSpaces, deleteFromLocal } from '@/lib/state'
|
|
import type { FlowNode, SpaceConfig } from '@/lib/types'
|
|
|
|
const FlowCanvas = dynamic(() => import('@/components/FlowCanvas'), {
|
|
ssr: false,
|
|
loading: () => (
|
|
<div className="w-full h-full flex items-center justify-center bg-slate-50">
|
|
<div className="flex items-center gap-3">
|
|
<div className="w-8 h-8 border-4 border-blue-500 border-t-transparent rounded-full animate-spin" />
|
|
<span className="text-slate-600">Loading flow editor...</span>
|
|
</div>
|
|
</div>
|
|
),
|
|
})
|
|
|
|
export default function SpacePage() {
|
|
const [currentNodes, setCurrentNodes] = useState<FlowNode[]>(starterNodes)
|
|
const [spaceName, setSpaceName] = useState('')
|
|
const [showSaveDialog, setShowSaveDialog] = useState(false)
|
|
const [showLoadDialog, setShowLoadDialog] = useState(false)
|
|
const [savedSpaces, setSavedSpaces] = useState<SpaceConfig[]>([])
|
|
const [copied, setCopied] = useState(false)
|
|
const [loaded, setLoaded] = useState(false)
|
|
const nodesRef = useRef<FlowNode[]>(starterNodes)
|
|
|
|
// Load from URL hash on mount
|
|
useEffect(() => {
|
|
if (typeof window === 'undefined') return
|
|
const hash = window.location.hash.slice(1)
|
|
if (hash.startsWith('s=')) {
|
|
const compressed = hash.slice(2)
|
|
const state = deserializeState(compressed)
|
|
if (state) {
|
|
setCurrentNodes(state.nodes)
|
|
nodesRef.current = state.nodes
|
|
}
|
|
}
|
|
setLoaded(true)
|
|
}, [])
|
|
|
|
const handleNodesChange = useCallback((nodes: FlowNode[]) => {
|
|
nodesRef.current = nodes
|
|
}, [])
|
|
|
|
const handleShare = useCallback(() => {
|
|
const compressed = serializeState(nodesRef.current)
|
|
const url = `${window.location.origin}/space#s=${compressed}`
|
|
navigator.clipboard.writeText(url).then(() => {
|
|
setCopied(true)
|
|
setTimeout(() => setCopied(false), 2000)
|
|
})
|
|
}, [])
|
|
|
|
const handleSave = useCallback(() => {
|
|
if (!spaceName.trim()) return
|
|
saveToLocal(spaceName.trim(), nodesRef.current)
|
|
setShowSaveDialog(false)
|
|
setSpaceName('')
|
|
}, [spaceName])
|
|
|
|
const handleLoadOpen = useCallback(() => {
|
|
setSavedSpaces(listSavedSpaces())
|
|
setShowLoadDialog(true)
|
|
}, [])
|
|
|
|
const handleLoadSpace = useCallback((config: SpaceConfig) => {
|
|
setCurrentNodes(config.nodes)
|
|
nodesRef.current = config.nodes
|
|
setShowLoadDialog(false)
|
|
}, [])
|
|
|
|
const handleDeleteSpace = useCallback((name: string) => {
|
|
deleteFromLocal(name)
|
|
setSavedSpaces(listSavedSpaces())
|
|
}, [])
|
|
|
|
const handleReset = useCallback(() => {
|
|
if (confirm('Reset canvas to a single empty funnel? This cannot be undone.')) {
|
|
setCurrentNodes([...starterNodes])
|
|
nodesRef.current = [...starterNodes]
|
|
// Clear URL hash
|
|
window.history.replaceState(null, '', window.location.pathname)
|
|
}
|
|
}, [])
|
|
|
|
if (!loaded) {
|
|
return (
|
|
<div className="h-screen w-screen flex items-center justify-center bg-slate-50">
|
|
<div className="flex items-center gap-3">
|
|
<div className="w-8 h-8 border-4 border-blue-500 border-t-transparent rounded-full animate-spin" />
|
|
<span className="text-slate-600">Loading...</span>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
return (
|
|
<main className="h-screen w-screen flex flex-col">
|
|
{/* Toolbar */}
|
|
<div className="bg-slate-800 text-white px-4 py-2 flex items-center justify-between text-sm flex-shrink-0">
|
|
<div className="flex items-center gap-3">
|
|
<Link href="/" className="flex items-center gap-2 hover:opacity-80 transition-opacity">
|
|
<div className="w-6 h-6 bg-gradient-to-br from-amber-400 to-emerald-500 rounded flex items-center justify-center font-bold text-slate-900 text-[10px]">
|
|
rF
|
|
</div>
|
|
<span className="font-medium">rFunds</span>
|
|
</Link>
|
|
<span className="text-slate-500">|</span>
|
|
<span className="text-slate-300">Your Space</span>
|
|
</div>
|
|
|
|
<div className="flex items-center gap-2">
|
|
<button
|
|
onClick={() => setShowSaveDialog(true)}
|
|
className="px-3 py-1 bg-blue-600 hover:bg-blue-500 rounded text-xs font-medium transition-colors"
|
|
>
|
|
Save
|
|
</button>
|
|
<button
|
|
onClick={handleLoadOpen}
|
|
className="px-3 py-1 bg-slate-600 hover:bg-slate-500 rounded text-xs font-medium transition-colors"
|
|
>
|
|
Load
|
|
</button>
|
|
<button
|
|
onClick={handleShare}
|
|
className="px-3 py-1 bg-emerald-600 hover:bg-emerald-500 rounded text-xs font-medium transition-colors"
|
|
>
|
|
{copied ? 'Copied!' : 'Share'}
|
|
</button>
|
|
<button
|
|
onClick={handleReset}
|
|
className="px-3 py-1 bg-slate-700 hover:bg-red-600 rounded text-xs font-medium transition-colors"
|
|
>
|
|
Reset
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Canvas */}
|
|
<div className="flex-1">
|
|
<FlowCanvas
|
|
key={JSON.stringify(currentNodes.map(n => n.id))}
|
|
initialNodes={currentNodes}
|
|
mode="space"
|
|
onNodesChange={handleNodesChange}
|
|
/>
|
|
</div>
|
|
|
|
{/* Save Dialog */}
|
|
{showSaveDialog && (
|
|
<div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50" onClick={() => setShowSaveDialog(false)}>
|
|
<div className="bg-white rounded-xl shadow-2xl p-6 w-80" onClick={e => e.stopPropagation()}>
|
|
<h3 className="text-lg font-bold text-slate-800 mb-4">Save Space</h3>
|
|
<input
|
|
type="text"
|
|
value={spaceName}
|
|
onChange={e => setSpaceName(e.target.value)}
|
|
placeholder="Space name..."
|
|
className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mb-4 text-slate-800"
|
|
autoFocus
|
|
onKeyDown={e => e.key === 'Enter' && handleSave()}
|
|
/>
|
|
<div className="flex gap-2">
|
|
<button
|
|
onClick={handleSave}
|
|
disabled={!spaceName.trim()}
|
|
className="flex-1 px-4 py-2 bg-blue-600 text-white rounded-lg text-sm font-medium hover:bg-blue-500 disabled:opacity-40 disabled:cursor-not-allowed transition-colors"
|
|
>
|
|
Save
|
|
</button>
|
|
<button
|
|
onClick={() => setShowSaveDialog(false)}
|
|
className="px-4 py-2 text-slate-600 hover:text-slate-800 text-sm"
|
|
>
|
|
Cancel
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Load Dialog */}
|
|
{showLoadDialog && (
|
|
<div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50" onClick={() => setShowLoadDialog(false)}>
|
|
<div className="bg-white rounded-xl shadow-2xl p-6 w-96 max-h-[60vh] overflow-y-auto" onClick={e => e.stopPropagation()}>
|
|
<h3 className="text-lg font-bold text-slate-800 mb-4">Load Space</h3>
|
|
{savedSpaces.length === 0 ? (
|
|
<p className="text-sm text-slate-500 py-4 text-center">No saved spaces yet.</p>
|
|
) : (
|
|
<div className="space-y-2">
|
|
{savedSpaces.map((space) => (
|
|
<div
|
|
key={space.name}
|
|
className="flex items-center justify-between p-3 bg-slate-50 rounded-lg hover:bg-slate-100 transition-colors"
|
|
>
|
|
<button
|
|
onClick={() => handleLoadSpace(space)}
|
|
className="flex-1 text-left"
|
|
>
|
|
<div className="text-sm font-medium text-slate-800">{space.name}</div>
|
|
<div className="text-[10px] text-slate-500">
|
|
{space.nodes.filter(n => n.type === 'funnel').length} funnels •{' '}
|
|
{space.nodes.filter(n => n.type === 'outcome').length} outcomes •{' '}
|
|
{new Date(space.updatedAt).toLocaleDateString()}
|
|
</div>
|
|
</button>
|
|
<button
|
|
onClick={() => handleDeleteSpace(space.name)}
|
|
className="text-slate-400 hover:text-red-500 p-1 transition-colors"
|
|
>
|
|
<svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
))}
|
|
</div>
|
|
)}
|
|
<button
|
|
onClick={() => setShowLoadDialog(false)}
|
|
className="w-full mt-4 px-4 py-2 text-slate-600 hover:text-slate-800 text-sm border border-slate-200 rounded-lg"
|
|
>
|
|
Close
|
|
</button>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</main>
|
|
)
|
|
}
|