feat: refactoeing
This commit is contained in:
@@ -0,0 +1,243 @@
|
||||
/**
|
||||
* Context for shared recollection actions: two slots (flux and logos) and layout-level import/export.
|
||||
* Consumers use pathname to pick the active slot for title (save status, Save) and Edit/View menus (undo, redo, etc.).
|
||||
*/
|
||||
|
||||
import React, { createContext, useCallback, useContext, useRef, useState } from 'react'
|
||||
import { useLocation, useParams } from 'react-router-dom'
|
||||
import type { SaveStatus } from '@/app/canvas/useCanvasGraph'
|
||||
import {
|
||||
getGraph,
|
||||
setGraph,
|
||||
getLogosContent,
|
||||
setLogosContent,
|
||||
upsertRenderOutputEntry,
|
||||
RECOLLECTION_FILE_EXT,
|
||||
RECOLLECTION_VERSION,
|
||||
type StoredGraphState,
|
||||
type StoredLogosContent,
|
||||
type RenderOutputCacheEntry,
|
||||
} from '../state/recollectionStore'
|
||||
|
||||
export type { RenderOutputCacheEntry }
|
||||
import type { AppNode, AppEdge } from '@/lib/graph/nodeTypes'
|
||||
import { backfillEdgeTargetTypes } from '@/app/canvas/canvasGraphUtils'
|
||||
import { toast } from 'sonner'
|
||||
|
||||
export type { SaveStatus }
|
||||
|
||||
/** Parsed recollection file format (import/export). */
|
||||
export type RecollectionFilePayload = {
|
||||
version?: number
|
||||
graph?: { nodes: unknown[]; edges: unknown[] }
|
||||
logos?: StoredLogosContent
|
||||
}
|
||||
|
||||
export type FluxSlot = {
|
||||
saveStatus: SaveStatus
|
||||
onSave: () => void
|
||||
canSave: boolean
|
||||
undo: () => void
|
||||
redo: () => void
|
||||
canUndo: boolean
|
||||
canRedo: boolean
|
||||
onRefreshFromStore: (graph: StoredGraphState) => void
|
||||
onDuplicate?: () => void
|
||||
onCopy?: () => void
|
||||
onPaste?: () => void
|
||||
canDuplicate?: boolean
|
||||
canCopy?: boolean
|
||||
onFitView?: () => void
|
||||
}
|
||||
|
||||
export type LogosSlot = {
|
||||
saveStatus: SaveStatus
|
||||
onSave: () => void
|
||||
canSave: boolean
|
||||
undo: () => void
|
||||
redo: () => void
|
||||
canUndo: boolean
|
||||
canRedo: boolean
|
||||
onRefreshFromStore: () => void
|
||||
}
|
||||
|
||||
export type RecollectionActionsContextValue = {
|
||||
flux: FluxSlot | null
|
||||
logos: LogosSlot | null
|
||||
setFluxSlot: (slot: FluxSlot | null) => void
|
||||
setLogosSlot: (slot: LogosSlot | null) => void
|
||||
/** Whether the Flux view is active (pathname ends with /flux). */
|
||||
isFluxActive: boolean
|
||||
/** Whether the Logos view is active. */
|
||||
isLogosActive: boolean
|
||||
/** Active slot (flux or logos by pathname). */
|
||||
activeSlot: FluxSlot | LogosSlot | null
|
||||
onImport: () => void
|
||||
onExport: () => void
|
||||
/** Upsert a rendering node's output into the cache so Logos "Insert from Flux" block can show it. */
|
||||
upsertRenderOutputToLogos: (entry: RenderOutputCacheEntry) => void
|
||||
}
|
||||
|
||||
const RecollectionActionsContext = createContext<RecollectionActionsContextValue | null>(null)
|
||||
|
||||
function validateAndWritePayload(
|
||||
recollectionId: string,
|
||||
payload: RecollectionFilePayload,
|
||||
backfillEdges: (nodes: AppNode[], edges: AppEdge[]) => AppEdge[]
|
||||
): { graph?: StoredGraphState; logos?: StoredLogosContent } {
|
||||
const result: { graph?: StoredGraphState; logos?: StoredLogosContent } = {}
|
||||
if (payload.graph && Array.isArray(payload.graph.nodes) && Array.isArray(payload.graph.edges)) {
|
||||
const nodes = payload.graph.nodes as AppNode[]
|
||||
const edges = backfillEdges(nodes, payload.graph.edges as AppEdge[])
|
||||
const graphState: StoredGraphState = {
|
||||
version: payload.version ?? RECOLLECTION_VERSION,
|
||||
nodes,
|
||||
edges,
|
||||
}
|
||||
setGraph(recollectionId, graphState)
|
||||
result.graph = graphState
|
||||
}
|
||||
if (payload.logos != null && Array.isArray(payload.logos)) {
|
||||
if (payload.logos.every((item) => item != null && typeof item === 'object')) {
|
||||
setLogosContent(recollectionId, payload.logos as StoredLogosContent)
|
||||
result.logos = payload.logos as StoredLogosContent
|
||||
}
|
||||
}
|
||||
return result
|
||||
}
|
||||
|
||||
export function RecollectionActionsProvider({ children }: { children: React.ReactNode }) {
|
||||
const { recollectionId } = useParams<{ recollectionId: string }>()
|
||||
const { pathname } = useLocation()
|
||||
const [flux, setFluxSlotState] = useState<FluxSlot | null>(null)
|
||||
const [logos, setLogosSlotState] = useState<LogosSlot | null>(null)
|
||||
const importInputRef = useRef<HTMLInputElement>(null)
|
||||
const fluxRef = useRef<FluxSlot | null>(null)
|
||||
const logosRef = useRef<LogosSlot | null>(null)
|
||||
const pathnameRef = useRef(pathname)
|
||||
fluxRef.current = flux
|
||||
logosRef.current = logos
|
||||
pathnameRef.current = pathname
|
||||
|
||||
const isFluxActive = pathname.endsWith('/flux')
|
||||
const isLogosActive = pathname.endsWith('/logos') || /\/recollections\/[^/]+\/?$/.test(pathname)
|
||||
const activeSlot = isFluxActive ? flux : isLogosActive ? logos : null
|
||||
|
||||
const setFluxSlot = useCallback((slot: FluxSlot | null) => {
|
||||
setFluxSlotState(() => slot)
|
||||
}, [])
|
||||
const setLogosSlot = useCallback((slot: LogosSlot | null) => {
|
||||
setLogosSlotState(() => slot)
|
||||
}, [])
|
||||
|
||||
const onExport = useCallback(() => {
|
||||
if (!recollectionId) return
|
||||
const graph = getGraph(recollectionId)
|
||||
const logosContent = getLogosContent(recollectionId)
|
||||
const payload: RecollectionFilePayload = {
|
||||
version: RECOLLECTION_VERSION,
|
||||
...(graph && { graph: { nodes: graph.nodes, edges: graph.edges } }),
|
||||
...(logosContent && { logos: logosContent }),
|
||||
}
|
||||
const blob = new Blob([JSON.stringify(payload, null, 2)], { type: 'application/json' })
|
||||
const url = URL.createObjectURL(blob)
|
||||
const a = document.createElement('a')
|
||||
a.href = url
|
||||
a.download = `recollection${RECOLLECTION_FILE_EXT}`
|
||||
a.click()
|
||||
URL.revokeObjectURL(url)
|
||||
toast.success('Recollection exported')
|
||||
}, [recollectionId])
|
||||
|
||||
const onImport = useCallback(() => {
|
||||
importInputRef.current?.click()
|
||||
}, [])
|
||||
|
||||
const upsertRenderOutputToLogos = useCallback(
|
||||
(entry: RenderOutputCacheEntry) => {
|
||||
if (recollectionId) upsertRenderOutputEntry(recollectionId, entry)
|
||||
},
|
||||
[recollectionId]
|
||||
)
|
||||
|
||||
const onImportFileChange = useCallback(
|
||||
(e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const file = e.target.files?.[0]
|
||||
e.target.value = ''
|
||||
if (!file || !recollectionId) return
|
||||
const reader = new FileReader()
|
||||
reader.onload = () => {
|
||||
try {
|
||||
const text = reader.result as string
|
||||
const payload = JSON.parse(text) as RecollectionFilePayload
|
||||
if (!payload || typeof payload !== 'object') {
|
||||
toast.error('Invalid file: not valid JSON')
|
||||
return
|
||||
}
|
||||
const written = validateAndWritePayload(recollectionId, payload, (nodes, edges) =>
|
||||
backfillEdgeTargetTypes(nodes, edges)
|
||||
)
|
||||
const currentPath = pathnameRef.current
|
||||
const fluxActive = currentPath.endsWith('/flux')
|
||||
const logosActive = currentPath.endsWith('/logos') || /\/recollections\/[^/]+\/?$/.test(currentPath)
|
||||
if (written.graph && fluxActive && fluxRef.current?.onRefreshFromStore) {
|
||||
fluxRef.current.onRefreshFromStore(written.graph)
|
||||
}
|
||||
if ((written.graph != null || written.logos != null) && logosActive && logosRef.current?.onRefreshFromStore) {
|
||||
logosRef.current.onRefreshFromStore()
|
||||
}
|
||||
if (payload.version != null && payload.version > RECOLLECTION_VERSION) {
|
||||
toast.error('Recollection was created with a newer app version')
|
||||
} else {
|
||||
toast.success('Recollection loaded')
|
||||
}
|
||||
} catch {
|
||||
toast.error('Invalid file: not valid JSON')
|
||||
}
|
||||
}
|
||||
reader.readAsText(file)
|
||||
},
|
||||
[recollectionId]
|
||||
)
|
||||
|
||||
const value: RecollectionActionsContextValue = React.useMemo(
|
||||
() => ({
|
||||
flux,
|
||||
logos,
|
||||
setFluxSlot,
|
||||
setLogosSlot,
|
||||
isFluxActive,
|
||||
isLogosActive,
|
||||
activeSlot,
|
||||
onImport,
|
||||
onExport,
|
||||
upsertRenderOutputToLogos,
|
||||
}),
|
||||
[flux, logos, setFluxSlot, setLogosSlot, isFluxActive, isLogosActive, activeSlot, onImport, onExport, upsertRenderOutputToLogos]
|
||||
)
|
||||
|
||||
return (
|
||||
<RecollectionActionsContext.Provider value={value}>
|
||||
{children}
|
||||
<input
|
||||
ref={importInputRef}
|
||||
type="file"
|
||||
accept=".json,application/json"
|
||||
className="hidden"
|
||||
aria-hidden
|
||||
onChange={onImportFileChange}
|
||||
/>
|
||||
</RecollectionActionsContext.Provider>
|
||||
)
|
||||
}
|
||||
|
||||
export function useRecollectionActions(): RecollectionActionsContextValue {
|
||||
const ctx = useContext(RecollectionActionsContext)
|
||||
if (!ctx) throw new Error('useRecollectionActions must be used within RecollectionActionsProvider')
|
||||
return ctx
|
||||
}
|
||||
|
||||
/** Returns the context value or null when outside RecollectionActionsProvider. Use when the consumer may render outside recollection layout. */
|
||||
export function useOptionalRecollectionActions(): RecollectionActionsContextValue | null {
|
||||
return useContext(RecollectionActionsContext)
|
||||
}
|
||||
@@ -0,0 +1,145 @@
|
||||
/**
|
||||
* Shared Edit and View menus for recollections. Always rendered in the menubar;
|
||||
* uses the active slot (flux or logos by pathname) for undo, redo, and Flux-only actions.
|
||||
*/
|
||||
|
||||
import React, { useEffect, useMemo } from 'react'
|
||||
import {
|
||||
Menubar,
|
||||
MenubarContent,
|
||||
MenubarItem,
|
||||
MenubarMenu,
|
||||
MenubarSeparator,
|
||||
MenubarTrigger,
|
||||
} from '@/components/ui/menubar'
|
||||
import { Kbd, KbdGroup } from '@/components/ui/kbd'
|
||||
import { useRecollectionActions } from './RecollectionActionsContext'
|
||||
import { ClipboardPaste, Copy, CopyPlus, Redo2, Undo2 } from 'lucide-react'
|
||||
|
||||
const UNDO_KEYS = { key: 'z', shiftKey: false }
|
||||
const REDO_KEYS = { key: 'z', shiftKey: true }
|
||||
|
||||
function matchKey(ev: KeyboardEvent, want: { key: string; shiftKey: boolean }) {
|
||||
const mod = ev.ctrlKey || ev.metaKey
|
||||
return ev.key.toLowerCase() === want.key && !!mod && !!ev.shiftKey === want.shiftKey
|
||||
}
|
||||
|
||||
export function RecollectionEditViewMenus() {
|
||||
const { activeSlot, flux, isFluxActive } = useRecollectionActions()
|
||||
|
||||
const fluxSlot = isFluxActive ? flux : null
|
||||
|
||||
useEffect(() => {
|
||||
if (!activeSlot) return
|
||||
const onKeyDown = (ev: KeyboardEvent) => {
|
||||
if (matchKey(ev, UNDO_KEYS) && activeSlot.canUndo) {
|
||||
ev.preventDefault()
|
||||
ev.stopPropagation()
|
||||
activeSlot.undo()
|
||||
} else if (matchKey(ev, REDO_KEYS) && activeSlot.canRedo) {
|
||||
ev.preventDefault()
|
||||
ev.stopPropagation()
|
||||
activeSlot.redo()
|
||||
}
|
||||
}
|
||||
window.addEventListener('keydown', onKeyDown, true)
|
||||
return () => window.removeEventListener('keydown', onKeyDown, true)
|
||||
}, [activeSlot])
|
||||
|
||||
const menus = useMemo(() => {
|
||||
if (!activeSlot) return null
|
||||
const hasFluxOnly =
|
||||
fluxSlot &&
|
||||
(fluxSlot.onDuplicate != null || fluxSlot.onCopy != null || fluxSlot.onPaste != null)
|
||||
return (
|
||||
<Menubar className="shrink-0 rounded-none border-0 bg-transparent p-0 shadow-none">
|
||||
<MenubarMenu>
|
||||
<MenubarTrigger className="font-normal text-muted-foreground">Edit</MenubarTrigger>
|
||||
<MenubarContent>
|
||||
<MenubarItem onClick={activeSlot.undo} disabled={!activeSlot.canUndo} className="gap-2">
|
||||
<Undo2 className="h-4 w-4" />
|
||||
Undo
|
||||
<span className="ml-auto pl-4">
|
||||
<KbdGroup>
|
||||
<Kbd>⌘ + Z</Kbd>
|
||||
</KbdGroup>
|
||||
</span>
|
||||
</MenubarItem>
|
||||
<MenubarItem onClick={activeSlot.redo} disabled={!activeSlot.canRedo} className="gap-2">
|
||||
<Redo2 className="h-4 w-4" />
|
||||
Redo
|
||||
<span className="ml-auto pl-4">
|
||||
<KbdGroup>
|
||||
<Kbd>⌘ + ⇧ + Z</Kbd>
|
||||
</KbdGroup>
|
||||
</span>
|
||||
</MenubarItem>
|
||||
{hasFluxOnly && (
|
||||
<>
|
||||
<MenubarSeparator />
|
||||
{fluxSlot!.onDuplicate != null && (
|
||||
<MenubarItem
|
||||
onClick={fluxSlot!.onDuplicate}
|
||||
disabled={!fluxSlot!.canDuplicate}
|
||||
className="gap-2"
|
||||
>
|
||||
<CopyPlus className="h-4 w-4" />
|
||||
Duplicate
|
||||
<span className="ml-auto pl-4">
|
||||
<KbdGroup>
|
||||
<Kbd>⌘D</Kbd>
|
||||
</KbdGroup>
|
||||
</span>
|
||||
</MenubarItem>
|
||||
)}
|
||||
{fluxSlot!.onCopy != null && (
|
||||
<MenubarItem
|
||||
onClick={fluxSlot!.onCopy}
|
||||
disabled={!fluxSlot!.canCopy}
|
||||
className="gap-2"
|
||||
>
|
||||
<Copy className="h-4 w-4" />
|
||||
Copy
|
||||
<span className="ml-auto pl-4">
|
||||
<KbdGroup>
|
||||
<Kbd>⌘C</Kbd>
|
||||
</KbdGroup>
|
||||
</span>
|
||||
</MenubarItem>
|
||||
)}
|
||||
{fluxSlot!.onPaste != null && (
|
||||
<MenubarItem onClick={fluxSlot!.onPaste} className="gap-2">
|
||||
<ClipboardPaste className="h-4 w-4" />
|
||||
Paste
|
||||
<span className="ml-auto pl-4">
|
||||
<KbdGroup>
|
||||
<Kbd>⌘V</Kbd>
|
||||
</KbdGroup>
|
||||
</span>
|
||||
</MenubarItem>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</MenubarContent>
|
||||
</MenubarMenu>
|
||||
<MenubarMenu>
|
||||
<MenubarTrigger className="font-normal text-muted-foreground">View</MenubarTrigger>
|
||||
<MenubarContent>
|
||||
{fluxSlot?.onFitView && (
|
||||
<MenubarItem onClick={fluxSlot.onFitView} className="gap-2">
|
||||
Fit View
|
||||
<span className="ml-auto pl-4">
|
||||
<KbdGroup>
|
||||
<Kbd>⌘0</Kbd>
|
||||
</KbdGroup>
|
||||
</span>
|
||||
</MenubarItem>
|
||||
)}
|
||||
</MenubarContent>
|
||||
</MenubarMenu>
|
||||
</Menubar>
|
||||
)
|
||||
}, [activeSlot, fluxSlot])
|
||||
|
||||
return menus
|
||||
}
|
||||
102
frontend/src/app/recollections/layout/RecollectionFileMenu.tsx
Normal file
102
frontend/src/app/recollections/layout/RecollectionFileMenu.tsx
Normal file
@@ -0,0 +1,102 @@
|
||||
/**
|
||||
* File menu for a recollection (emanation).
|
||||
* Hosts Save, Rename, Import, Export that used to live under the title dropdown.
|
||||
*/
|
||||
|
||||
import React, { useMemo, useState } from 'react'
|
||||
import {
|
||||
DropdownMenu,
|
||||
DropdownMenuContent,
|
||||
DropdownMenuItem,
|
||||
DropdownMenuPortal,
|
||||
DropdownMenuSeparator,
|
||||
DropdownMenuTrigger,
|
||||
} from '@/components/ui/dropdown-menu'
|
||||
import { Kbd, KbdGroup } from '@/components/ui/kbd'
|
||||
import { useRecollectionActions } from './RecollectionActionsContext'
|
||||
import { usePlatform } from '@/app/kosmos/KosmosContext'
|
||||
import { RenameRecollectionDialog } from './RenameRecollectionDialog'
|
||||
import { Download, FolderOpen, Pencil, Save } from 'lucide-react'
|
||||
import { useParams } from 'react-router-dom'
|
||||
|
||||
export function RecollectionFileMenu() {
|
||||
const { activeSlot, onImport, onExport } = useRecollectionActions()
|
||||
const { recollections, renameRecollection } = usePlatform()
|
||||
const { recollectionId } = useParams<{ recollectionId: string }>()
|
||||
|
||||
const [renameModalOpen, setRenameModalOpen] = useState(false)
|
||||
|
||||
const onSave = activeSlot?.onSave
|
||||
const canSave = activeSlot?.canSave ?? false
|
||||
|
||||
const recollectionName = useMemo(
|
||||
() => (recollectionId ? recollections.find((p) => p.id === recollectionId)?.name ?? '' : ''),
|
||||
[recollectionId, recollections]
|
||||
)
|
||||
|
||||
const menuItems = useMemo(
|
||||
() => (
|
||||
<>
|
||||
{recollectionId && onSave != null && (
|
||||
<>
|
||||
<DropdownMenuItem onClick={onSave} disabled={!canSave} className="gap-2">
|
||||
<Save className="h-4 w-4" />
|
||||
Save
|
||||
<span className="ml-auto pl-4">
|
||||
<KbdGroup>
|
||||
<Kbd>⌘S</Kbd>
|
||||
</KbdGroup>
|
||||
</span>
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuSeparator />
|
||||
</>
|
||||
)}
|
||||
{recollectionId && (
|
||||
<>
|
||||
<DropdownMenuItem onClick={() => setRenameModalOpen(true)} className="gap-2">
|
||||
<Pencil className="h-4 w-4" />
|
||||
Rename
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuSeparator />
|
||||
</>
|
||||
)}
|
||||
<DropdownMenuItem onClick={onImport} className="gap-2">
|
||||
<FolderOpen className="h-4 w-4" />
|
||||
Import…
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem onClick={onExport} className="gap-2">
|
||||
<Download className="h-4 w-4" />
|
||||
Export…
|
||||
</DropdownMenuItem>
|
||||
</>
|
||||
),
|
||||
[recollectionId, onSave, canSave, onImport, onExport]
|
||||
)
|
||||
|
||||
return (
|
||||
<>
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger className="rounded-sm px-2 py-1 text-sm font-normal text-muted-foreground outline-none focus:bg-accent focus:text-accent-foreground hover:bg-accent hover:text-accent-foreground data-[state=open]:bg-accent">
|
||||
File
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuPortal>
|
||||
<DropdownMenuContent align="start" className="z-[200] min-w-[12rem]">
|
||||
{menuItems}
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenuPortal>
|
||||
</DropdownMenu>
|
||||
<RenameRecollectionDialog
|
||||
open={renameModalOpen}
|
||||
onOpenChange={setRenameModalOpen}
|
||||
recollectionId={recollectionId ?? ''}
|
||||
initialName={recollectionName}
|
||||
recollections={recollections}
|
||||
onRename={(id, newName) => {
|
||||
renameRecollection(id, newName)
|
||||
setRenameModalOpen(false)
|
||||
}}
|
||||
/>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -0,0 +1,45 @@
|
||||
/**
|
||||
* Recollection menubar: Back | title + save status | registered menus (middle).
|
||||
*/
|
||||
|
||||
import React from 'react'
|
||||
import { Link, useParams } from 'react-router-dom'
|
||||
import { usePlatform } from '@/app/kosmos/KosmosContext'
|
||||
import { ArrowLeft } from 'lucide-react'
|
||||
import { useRecollectionMenubar } from './RecollectionMenubarContext'
|
||||
import { RecollectionEditViewMenus } from './RecollectionEditViewMenus'
|
||||
import { RecollectionViewSwitcher } from './RecollectionViewSwitcher'
|
||||
import { RecollectionFileMenu } from './RecollectionFileMenu'
|
||||
|
||||
export function RecollectionMenubar() {
|
||||
const { recollectionId } = useParams<{ recollectionId: string }>()
|
||||
const { recollections } = usePlatform()
|
||||
const { titleContent } = useRecollectionMenubar()
|
||||
|
||||
const recollection = recollectionId ? recollections.find((p) => p.id === recollectionId) : null
|
||||
const defaultTitle = recollection ? (
|
||||
<span className="truncate text-sm font-medium text-muted-foreground">{recollection.name}</span>
|
||||
) : null
|
||||
|
||||
return (
|
||||
<div className="flex h-9 w-full shrink-0 items-center justify-between gap-2 overflow-visible border-b border-border/40 bg-background px-2">
|
||||
<div className="flex min-w-0 flex-1 items-center gap-2 overflow-hidden">
|
||||
<Link
|
||||
to="/recollections"
|
||||
aria-label="Back to recollections"
|
||||
className="flex shrink-0 items-center rounded-sm px-2 py-1 text-sm outline-none focus:bg-accent focus:text-accent-foreground hover:bg-accent hover:text-accent-foreground"
|
||||
>
|
||||
<ArrowLeft className="size-4" />
|
||||
</Link>
|
||||
<div className="flex min-w-0 shrink-0 items-center gap-1.5">
|
||||
{titleContent ?? defaultTitle}
|
||||
</div>
|
||||
<RecollectionViewSwitcher />
|
||||
</div>
|
||||
<div className="flex shrink-0 items-center gap-2 pl-2">
|
||||
<RecollectionFileMenu />
|
||||
<RecollectionEditViewMenus />
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,37 @@
|
||||
/**
|
||||
* Context for the recollection menubar:
|
||||
* - Title (next to back): optional title + status, e.g. recollection name and save state.
|
||||
* - Middle: shared Edit/View menus (RecollectionEditViewMenus), no longer registrable.
|
||||
*/
|
||||
|
||||
import React, { createContext, useCallback, useContext, useState } from 'react'
|
||||
|
||||
export type RecollectionMenubarContextValue = {
|
||||
/** Content next to the back button (e.g. title + save status, with optional dropdown). Null = use default recollection name. */
|
||||
titleContent: React.ReactNode
|
||||
setTitleContent: (content: React.ReactNode) => void
|
||||
}
|
||||
|
||||
const RecollectionMenubarContext = createContext<RecollectionMenubarContextValue | null>(null)
|
||||
|
||||
export function RecollectionMenubarProvider({ children }: { children: React.ReactNode }) {
|
||||
const [titleContent, setTitleContentState] = useState<React.ReactNode>(null)
|
||||
const setTitleContent = useCallback((content: React.ReactNode) => {
|
||||
setTitleContentState(() => content)
|
||||
}, [])
|
||||
const value: RecollectionMenubarContextValue = React.useMemo(
|
||||
() => ({ titleContent, setTitleContent }),
|
||||
[titleContent, setTitleContent]
|
||||
)
|
||||
return (
|
||||
<RecollectionMenubarContext.Provider value={value}>
|
||||
{children}
|
||||
</RecollectionMenubarContext.Provider>
|
||||
)
|
||||
}
|
||||
|
||||
export function useRecollectionMenubar(): RecollectionMenubarContextValue {
|
||||
const ctx = useContext(RecollectionMenubarContext)
|
||||
if (!ctx) throw new Error('useRecollectionMenubar must be used within RecollectionMenubarProvider')
|
||||
return ctx
|
||||
}
|
||||
@@ -0,0 +1,123 @@
|
||||
/**
|
||||
* Shared title + save status block (same for Logos and Flux). Gets save status and Save from
|
||||
* the active slot (RecollectionActionsContext); Import/Export from layout-level handlers.
|
||||
*/
|
||||
|
||||
import React, { useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react'
|
||||
import { useParams } from 'react-router-dom'
|
||||
import { usePlatform } from '@/app/kosmos/KosmosContext'
|
||||
import { useRecollectionMenubar } from './RecollectionMenubarContext'
|
||||
import { useRecollectionActions } from './RecollectionActionsContext'
|
||||
import { CheckCircle2, CircleDot, Loader2 } from 'lucide-react'
|
||||
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip'
|
||||
|
||||
const SAVE_KEYS = { key: 's', shiftKey: false }
|
||||
|
||||
function matchKey(ev: KeyboardEvent, want: { key: string; shiftKey: boolean }) {
|
||||
const mod = ev.ctrlKey || ev.metaKey
|
||||
return ev.key.toLowerCase() === want.key && !!mod && !!ev.shiftKey === want.shiftKey
|
||||
}
|
||||
|
||||
/** Registers the shared title + save dropdown as titleContent. Renders nothing. */
|
||||
export function RecollectionTitleContent() {
|
||||
const { setTitleContent } = useRecollectionMenubar()
|
||||
const { activeSlot } = useRecollectionActions()
|
||||
const { recollectionId } = useParams<{ recollectionId: string }>()
|
||||
const { recollections } = usePlatform()
|
||||
const recollectionName = useMemo(
|
||||
() => (recollectionId ? recollections.find((p) => p.id === recollectionId)?.name ?? null : null),
|
||||
[recollectionId, recollections]
|
||||
)
|
||||
|
||||
const [showSavedBriefly, setShowSavedBriefly] = useState(false)
|
||||
const savedBrieflyTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null)
|
||||
const prevSaveStatusRef = useRef<string>('saved')
|
||||
const saveStatus = activeSlot?.saveStatus ?? 'saved'
|
||||
const onSave = activeSlot?.onSave
|
||||
const canSave = activeSlot?.canSave ?? false
|
||||
|
||||
useEffect(() => {
|
||||
if (saveStatus === 'unsaved') {
|
||||
setShowSavedBriefly(false)
|
||||
if (savedBrieflyTimerRef.current) {
|
||||
clearTimeout(savedBrieflyTimerRef.current)
|
||||
savedBrieflyTimerRef.current = null
|
||||
}
|
||||
} else if (prevSaveStatusRef.current === 'saving' && saveStatus === 'saved') {
|
||||
setShowSavedBriefly(true)
|
||||
if (savedBrieflyTimerRef.current) clearTimeout(savedBrieflyTimerRef.current)
|
||||
savedBrieflyTimerRef.current = setTimeout(() => {
|
||||
savedBrieflyTimerRef.current = null
|
||||
setShowSavedBriefly(false)
|
||||
}, 2500)
|
||||
}
|
||||
prevSaveStatusRef.current = saveStatus
|
||||
}, [saveStatus])
|
||||
|
||||
useEffect(() => {
|
||||
return () => {
|
||||
if (savedBrieflyTimerRef.current) clearTimeout(savedBrieflyTimerRef.current)
|
||||
}
|
||||
}, [])
|
||||
|
||||
useEffect(() => {
|
||||
const onKeyDown = (ev: KeyboardEvent) => {
|
||||
if (matchKey(ev, SAVE_KEYS) && onSave && canSave) {
|
||||
ev.preventDefault()
|
||||
ev.stopPropagation()
|
||||
onSave()
|
||||
}
|
||||
}
|
||||
window.addEventListener('keydown', onKeyDown, true)
|
||||
return () => window.removeEventListener('keydown', onKeyDown, true)
|
||||
}, [onSave, canSave])
|
||||
|
||||
const trigger = useMemo(
|
||||
() => (
|
||||
<span className="flex items-center gap-1.5 truncate">
|
||||
<span className="truncate text-sm font-medium font-serif max-w-[180px]">
|
||||
{recollectionName ?? 'Untitled'}
|
||||
</span>
|
||||
<TooltipProvider delayDuration={300}>
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<span
|
||||
className="shrink-0 flex items-center text-muted-foreground cursor-default"
|
||||
aria-live="polite"
|
||||
aria-label={
|
||||
saveStatus === 'saving' ? 'Saving' : saveStatus === 'unsaved' ? 'Unsaved changes' : 'All changes saved'
|
||||
}
|
||||
>
|
||||
{saveStatus === 'saving' && <Loader2 className="size-3.5 animate-spin" aria-hidden />}
|
||||
{saveStatus === 'unsaved' && <CircleDot className="size-3.5" aria-hidden />}
|
||||
{saveStatus !== 'unsaved' && (saveStatus === 'saved' || showSavedBriefly) && (
|
||||
<CheckCircle2 className="size-3.5 text-muted-foreground/70" aria-hidden />
|
||||
)}
|
||||
</span>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent side="bottom">
|
||||
{saveStatus === 'saving' ? 'Saving…' : saveStatus === 'unsaved' ? 'Unsaved changes' : 'All changes saved'}
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
</TooltipProvider>
|
||||
</span>
|
||||
),
|
||||
[recollectionName, saveStatus, showSavedBriefly]
|
||||
)
|
||||
|
||||
const titleNode = useMemo(
|
||||
() => (
|
||||
<span className="flex items-center gap-1.5 rounded-sm px-2 py-1 text-sm">
|
||||
{trigger}
|
||||
</span>
|
||||
),
|
||||
[trigger]
|
||||
)
|
||||
|
||||
useLayoutEffect(() => {
|
||||
setTitleContent(titleNode)
|
||||
return () => setTitleContent(null)
|
||||
}, [titleNode, setTitleContent])
|
||||
|
||||
return null
|
||||
}
|
||||
@@ -0,0 +1,141 @@
|
||||
/**
|
||||
* Circular view switcher: icon and title use the same vertical elevator-style animation.
|
||||
* Click toggles; tooltip includes shortcut.
|
||||
*/
|
||||
|
||||
import React, { useCallback, useEffect } from 'react'
|
||||
import { useLocation, useNavigate, useParams } from 'react-router-dom'
|
||||
import { FluxIcon, LogosIcon, RecollectionsIcon } from '@/lib/icons'
|
||||
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip'
|
||||
|
||||
function shortcutLabel() {
|
||||
const isMac = typeof navigator !== 'undefined' && /Mac|iPod|iPhone|iPad/.test(navigator.platform)
|
||||
return isMac ? '⌘⇧↑ / ⌘⇧↓' : 'Ctrl+Shift+↑ / Ctrl+Shift+↓'
|
||||
}
|
||||
|
||||
export function RecollectionViewSwitcher() {
|
||||
const { recollectionId } = useParams<{ recollectionId: string }>()
|
||||
const { pathname } = useLocation()
|
||||
const navigate = useNavigate()
|
||||
const base = recollectionId ? `/recollections/${recollectionId}` : ''
|
||||
|
||||
type Mode = 'logos' | 'katalogos' | 'flux'
|
||||
const mode: Mode = pathname.endsWith('/flux')
|
||||
? 'flux'
|
||||
: pathname.endsWith('/katalogos')
|
||||
? 'katalogos'
|
||||
: 'logos'
|
||||
|
||||
const goRelative = useCallback(
|
||||
(delta: 1 | -1) => {
|
||||
if (!base) return
|
||||
const order: Mode[] = ['logos', 'katalogos', 'flux']
|
||||
const currentIndex = order.indexOf(mode)
|
||||
const nextMode = order[(currentIndex + (delta === 1 ? 1 : order.length - 1)) % order.length]
|
||||
navigate(`${base}/${nextMode}`)
|
||||
},
|
||||
[base, mode, navigate]
|
||||
)
|
||||
|
||||
const toggle = useCallback(() => {
|
||||
goRelative(1)
|
||||
}, [goRelative])
|
||||
|
||||
useEffect(() => {
|
||||
const onKeyDown = (ev: KeyboardEvent) => {
|
||||
const isMod = ev.ctrlKey || ev.metaKey
|
||||
const isShortcut = isMod && ev.shiftKey && (ev.key === 'ArrowDown' || ev.key === 'ArrowUp')
|
||||
if (!isShortcut) return
|
||||
ev.preventDefault()
|
||||
if (ev.key === 'ArrowDown') {
|
||||
goRelative(1)
|
||||
} else if (ev.key === 'ArrowUp') {
|
||||
goRelative(-1)
|
||||
}
|
||||
}
|
||||
window.addEventListener('keydown', onKeyDown, true)
|
||||
return () => window.removeEventListener('keydown', onKeyDown, true)
|
||||
}, [goRelative])
|
||||
|
||||
if (!base) return null
|
||||
|
||||
const shortcut = shortcutLabel()
|
||||
const tooltipText =
|
||||
mode === 'logos'
|
||||
? `Logos · Next: Katalogos (${shortcut})`
|
||||
: mode === 'katalogos'
|
||||
? `Katalogos · Next: Flux (${shortcut})`
|
||||
: `Flux · Next: Logos (${shortcut})`
|
||||
|
||||
return (
|
||||
<div className="flex shrink-0 items-center gap-2">
|
||||
<TooltipProvider delayDuration={300}>
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<button
|
||||
type="button"
|
||||
onClick={toggle}
|
||||
aria-label={
|
||||
mode === 'logos'
|
||||
? 'Switch to Katalogos'
|
||||
: mode === 'katalogos'
|
||||
? 'Switch to Flux'
|
||||
: 'Switch to Logos'
|
||||
}
|
||||
className="h-7 w-7 shrink-0 overflow-hidden rounded-full border border-border/60 bg-background shadow-md transition-colors hover:bg-accent hover:text-accent-foreground focus:outline-none focus-visible:ring-2 focus-visible:ring-ring"
|
||||
>
|
||||
<div className="h-full w-full overflow-hidden">
|
||||
<div
|
||||
className="flex w-full flex-col transition-transform duration-200 ease-out"
|
||||
style={{
|
||||
height: '300%',
|
||||
transform:
|
||||
mode === 'logos'
|
||||
? 'translateY(0)'
|
||||
: mode === 'katalogos'
|
||||
? 'translateY(-33.3333%)'
|
||||
: 'translateY(-66.6667%)',
|
||||
}}
|
||||
>
|
||||
<div className="flex h-9 w-full items-center justify-center">
|
||||
<LogosIcon className="size-3.5 shrink-0 text-muted-foreground" />
|
||||
</div>
|
||||
<div className="flex h-9 w-full items-center justify-center">
|
||||
<RecollectionsIcon className="size-3.5 shrink-0 text-muted-foreground" />
|
||||
</div>
|
||||
<div className="flex h-9 w-full items-center justify-center">
|
||||
<FluxIcon className="size-3.5 shrink-0 text-muted-foreground" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</button>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent side="bottom">{tooltipText}</TooltipContent>
|
||||
</Tooltip>
|
||||
</TooltipProvider>
|
||||
<div className="h-9 min-w-[3.5rem] overflow-hidden">
|
||||
<div
|
||||
className="flex w-full flex-col transition-transform duration-200 ease-out"
|
||||
style={{
|
||||
transform:
|
||||
mode === 'logos'
|
||||
? 'translateY(0)'
|
||||
: mode === 'katalogos'
|
||||
? 'translateY(-33.3333%)'
|
||||
: 'translateY(-66.6667%)',
|
||||
}}
|
||||
>
|
||||
<span className="flex h-9 flex-shrink-0 items-center text-sm font-medium text-foreground">
|
||||
Logos
|
||||
</span>
|
||||
<span className="flex h-9 flex-shrink-0 items-center text-sm font-medium text-foreground">
|
||||
Katalogos
|
||||
</span>
|
||||
<span className="flex h-9 flex-shrink-0 items-center text-sm font-medium text-foreground">
|
||||
Flux
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,99 @@
|
||||
/**
|
||||
* Subtle animated dot grid background for RecollectionsPage.
|
||||
* Matches canvas grid (20px gap), with gentle wave movement.
|
||||
*/
|
||||
|
||||
import React, { useCallback, useEffect, useRef } from 'react'
|
||||
|
||||
const GAP = 20
|
||||
const SPEED = 0.010
|
||||
const AMPLITUDE = 4
|
||||
const DOT_SIZE = 1.2
|
||||
const PULSE_AMOUNT = 0.25
|
||||
|
||||
function getDotColor(): string {
|
||||
if (typeof document === 'undefined') return 'rgba(128,128,128,0.25)'
|
||||
const isDark = document.documentElement.classList.contains('dark')
|
||||
return isDark ? 'rgba(255,255,255,0.18)' : 'rgba(0,0,0,0.12)'
|
||||
}
|
||||
|
||||
export function RecollectionsPageBackground({ className }: { className?: string }) {
|
||||
const canvasRef = useRef<HTMLCanvasElement>(null)
|
||||
const timeRef = useRef(0)
|
||||
const rafRef = useRef<number>(0)
|
||||
|
||||
const draw = useCallback(() => {
|
||||
const canvas = canvasRef.current
|
||||
if (!canvas) return
|
||||
|
||||
const ctx = canvas.getContext('2d')
|
||||
if (!ctx) return
|
||||
|
||||
const { width, height } = canvas
|
||||
const cols = Math.floor(width / GAP) + 2
|
||||
const rows = Math.floor(height / GAP) + 2
|
||||
const t = timeRef.current
|
||||
|
||||
ctx.fillStyle = 'transparent'
|
||||
ctx.clearRect(0, 0, width, height)
|
||||
|
||||
const dotColor = getDotColor()
|
||||
|
||||
for (let row = 0; row < rows; row++) {
|
||||
for (let col = 0; col < cols; col++) {
|
||||
const baseX = col * GAP
|
||||
const baseY = row * GAP
|
||||
|
||||
const w1 = Math.sin(t * SPEED + baseX * 0.008 + baseY * 0.006) * AMPLITUDE
|
||||
const w2 = Math.sin(t * SPEED * 0.7 - baseX * 0.012 + baseY * 0.01) * AMPLITUDE * 0.5
|
||||
const w3 = Math.sin(t * SPEED * 1.2 + baseY * 0.015) * AMPLITUDE * 0.3
|
||||
|
||||
const x = baseX + w1 + w2 + w3
|
||||
const y = baseY + w1 * 0.6 + w3 * 0.4
|
||||
|
||||
const size = DOT_SIZE + Math.sin(t * SPEED * 2 + baseX * 0.02) * PULSE_AMOUNT
|
||||
|
||||
ctx.beginPath()
|
||||
ctx.arc(x, y, size, 0, Math.PI * 2)
|
||||
ctx.fillStyle = dotColor
|
||||
ctx.fill()
|
||||
}
|
||||
}
|
||||
|
||||
timeRef.current += 1
|
||||
rafRef.current = requestAnimationFrame(draw)
|
||||
}, [])
|
||||
|
||||
useEffect(() => {
|
||||
const canvas = canvasRef.current
|
||||
if (!canvas) return
|
||||
|
||||
const resize = () => {
|
||||
const dpr = Math.min(window.devicePixelRatio ?? 1, 2)
|
||||
const rect = canvas.getBoundingClientRect()
|
||||
canvas.width = Math.round(rect.width * dpr)
|
||||
canvas.height = Math.round(rect.height * dpr)
|
||||
canvas.style.width = `${rect.width}px`
|
||||
canvas.style.height = `${rect.height}px`
|
||||
const ctx = canvas.getContext('2d')
|
||||
if (ctx) ctx.setTransform(dpr, 0, 0, dpr, 0, 0)
|
||||
}
|
||||
|
||||
resize()
|
||||
window.addEventListener('resize', resize)
|
||||
rafRef.current = requestAnimationFrame(draw)
|
||||
return () => {
|
||||
window.removeEventListener('resize', resize)
|
||||
if (rafRef.current) cancelAnimationFrame(rafRef.current)
|
||||
}
|
||||
}, [draw])
|
||||
|
||||
return (
|
||||
<canvas
|
||||
ref={canvasRef}
|
||||
className={className}
|
||||
aria-hidden
|
||||
style={{ display: 'block', width: '100%', height: '100%' }}
|
||||
/>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,94 @@
|
||||
/**
|
||||
* Shared modal for renaming a recollection. Used by RecollectionsPage and RecollectionTitleContent.
|
||||
*/
|
||||
|
||||
import React, { useCallback, useEffect, useRef, useState } from 'react'
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogFooter,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
} from '@/components/ui/dialog'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { Input } from '@/components/ui/input'
|
||||
|
||||
export type RenameRecollectionDialogProps = {
|
||||
open: boolean
|
||||
onOpenChange: (open: boolean) => void
|
||||
recollectionId: string
|
||||
initialName: string
|
||||
recollections: { id: string; name: string }[]
|
||||
onRename: (id: string, newName: string) => void
|
||||
}
|
||||
|
||||
export function RenameRecollectionDialog({
|
||||
open,
|
||||
onOpenChange,
|
||||
recollectionId,
|
||||
initialName,
|
||||
recollections,
|
||||
onRename,
|
||||
}: RenameRecollectionDialogProps) {
|
||||
const [value, setValue] = useState(initialName)
|
||||
const inputRef = useRef<HTMLInputElement>(null)
|
||||
|
||||
useEffect(() => {
|
||||
if (open) {
|
||||
setValue(initialName)
|
||||
const t = setTimeout(() => inputRef.current?.focus(), 0)
|
||||
return () => clearTimeout(t)
|
||||
}
|
||||
}, [open, initialName])
|
||||
|
||||
const handleClose = useCallback(() => onOpenChange(false), [onOpenChange])
|
||||
|
||||
const handleSubmit = useCallback(() => {
|
||||
const trimmed = value.trim()
|
||||
if (!trimmed) return
|
||||
onRename(recollectionId, trimmed)
|
||||
onOpenChange(false)
|
||||
}, [recollectionId, value, onRename, onOpenChange])
|
||||
|
||||
const isDuplicateName =
|
||||
!!value.trim() &&
|
||||
recollections.some(
|
||||
(p) => p.id !== recollectionId && p.name.toLowerCase() === value.trim().toLowerCase()
|
||||
)
|
||||
|
||||
return (
|
||||
<Dialog open={open} onOpenChange={onOpenChange}>
|
||||
<DialogContent onCloseAutoFocus={(e) => e.preventDefault()}>
|
||||
<DialogHeader>
|
||||
<DialogTitle>Rename recollection</DialogTitle>
|
||||
<DialogDescription>Enter a new name for this recollection.</DialogDescription>
|
||||
</DialogHeader>
|
||||
<Input
|
||||
ref={inputRef}
|
||||
value={value}
|
||||
onChange={(e) => setValue(e.target.value)}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === 'Enter') handleSubmit()
|
||||
if (e.key === 'Escape') handleClose()
|
||||
}}
|
||||
placeholder="Recollection name"
|
||||
aria-label="Recollection name"
|
||||
/>
|
||||
{isDuplicateName && (
|
||||
<p className="text-xs text-amber-600 dark:text-amber-500">
|
||||
A recollection with this name already exists.
|
||||
</p>
|
||||
)}
|
||||
<DialogFooter>
|
||||
<Button variant="outline" onClick={handleClose}>
|
||||
Cancel
|
||||
</Button>
|
||||
<Button onClick={handleSubmit} disabled={!value.trim()}>
|
||||
Save
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user