fix: React Flow dark theme and procedural editor routing #83

Merged
chihlasm merged 1 commits from fix/flow-editor-bugs into main 2026-02-19 06:56:48 +00:00
4 changed files with 7 additions and 4 deletions

View File

@@ -4,6 +4,7 @@ import type { TreeListItem } from '@/types'
import { TagBadges } from '@/components/common/TagBadges' import { TagBadges } from '@/components/common/TagBadges'
import { cn } from '@/lib/utils' import { cn } from '@/lib/utils'
import { usePermissions } from '@/hooks/usePermissions' import { usePermissions } from '@/hooks/usePermissions'
import { getTreeEditorPath } from '@/lib/routing'
interface TreeGridViewProps { interface TreeGridViewProps {
trees: TreeListItem[] trees: TreeListItem[]
@@ -95,7 +96,7 @@ export function TreeGridView({
)} )}
{canEditTree({ author_id: tree.author_id, account_id: tree.account_id }) && ( {canEditTree({ author_id: tree.author_id, account_id: tree.account_id }) && (
<Link <Link
to={`/trees/${tree.id}/edit`} to={getTreeEditorPath(tree.id, tree.tree_type)}
className={cn( className={cn(
'rounded-md border border-border p-2 text-muted-foreground', 'rounded-md border border-border p-2 text-muted-foreground',
'hover:bg-accent hover:text-foreground' 'hover:bg-accent hover:text-foreground'

View File

@@ -4,6 +4,7 @@ import type { TreeListItem } from '@/types'
import { TagBadges } from '@/components/common/TagBadges' import { TagBadges } from '@/components/common/TagBadges'
import { cn } from '@/lib/utils' import { cn } from '@/lib/utils'
import { usePermissions } from '@/hooks/usePermissions' import { usePermissions } from '@/hooks/usePermissions'
import { getTreeEditorPath } from '@/lib/routing'
interface TreeListViewProps { interface TreeListViewProps {
trees: TreeListItem[] trees: TreeListItem[]
@@ -100,7 +101,7 @@ export function TreeListView({
{canEditTree({ author_id: tree.author_id, account_id: tree.account_id }) && ( {canEditTree({ author_id: tree.author_id, account_id: tree.account_id }) && (
<> <>
<Link <Link
to={`/trees/${tree.id}/edit`} to={getTreeEditorPath(tree.id, tree.tree_type)}
className={cn( className={cn(
'rounded-md border border-border p-1.5 text-muted-foreground', 'rounded-md border border-border p-1.5 text-muted-foreground',
'hover:bg-accent hover:text-foreground' 'hover:bg-accent hover:text-foreground'

View File

@@ -5,6 +5,7 @@ import type { TreeListItem } from '@/types'
import { TagBadges } from '@/components/common/TagBadges' import { TagBadges } from '@/components/common/TagBadges'
import { cn } from '@/lib/utils' import { cn } from '@/lib/utils'
import { usePermissions } from '@/hooks/usePermissions' import { usePermissions } from '@/hooks/usePermissions'
import { getTreeEditorPath } from '@/lib/routing'
interface TreeTableViewProps { interface TreeTableViewProps {
trees: TreeListItem[] trees: TreeListItem[]
@@ -204,7 +205,7 @@ export function TreeTableView({
{canEditTree({ author_id: tree.author_id, account_id: tree.account_id }) && ( {canEditTree({ author_id: tree.author_id, account_id: tree.account_id }) && (
<> <>
<Link <Link
to={`/trees/${tree.id}/edit`} to={getTreeEditorPath(tree.id, tree.tree_type)}
className={cn( className={cn(
'rounded-md border border-border p-1.5 text-muted-foreground', 'rounded-md border border-border p-1.5 text-muted-foreground',
'hover:bg-accent hover:text-foreground' 'hover:bg-accent hover:text-foreground'

View File

@@ -136,7 +136,7 @@ function FlowCanvasInner({ selectedNodeId, onNodeSelect, onSelectAnswerType }: F
nodesDraggable={false} nodesDraggable={false}
nodesConnectable={false} nodesConnectable={false}
proOptions={{ hideAttribution: true }} proOptions={{ hideAttribution: true }}
className="bg-accent/30" className="dark bg-accent/30"
> >
<Background variant={BackgroundVariant.Dots} gap={20} size={1.5} color="hsl(var(--muted-foreground) / 0.25)" /> <Background variant={BackgroundVariant.Dots} gap={20} size={1.5} color="hsl(var(--muted-foreground) / 0.25)" />
<Controls showInteractive={false} className="!bg-card !border-border !shadow-lg" /> <Controls showInteractive={false} className="!bg-card !border-border !shadow-lg" />