From def29144eb8f984192ceff2bb84cd1f7c969842e Mon Sep 17 00:00:00 2001
From: bjst0ne <bjst0ne@gmail.com>
Date: Mon, 16 Mar 2026 00:37:03 +0300
Subject: [PATCH] fix(app): fixed lists/arrays render in 'details-panel'

---
 .../sketches/details-panel/details-panel.tsx     | 16 +++++++++++++---
 flowsint-app/src/components/ui/tags-input.tsx    | 16 ++++++++--------
 2 files changed, 21 insertions(+), 11 deletions(-)

diff --git a/flowsint-app/src/components/sketches/details-panel/details-panel.tsx b/flowsint-app/src/components/sketches/details-panel/details-panel.tsx
index 7d7c9fd..ac5035d 100644
--- a/flowsint-app/src/components/sketches/details-panel/details-panel.tsx
+++ b/flowsint-app/src/components/sketches/details-panel/details-panel.tsx
@@ -10,6 +10,7 @@ import {
 } from '@/components/ui/popover'
 import { memo, useState, useEffect, useCallback, useRef } from 'react'
 import { cn } from '@/lib/utils'
+import { FieldType, FormField, findActionItemByKey } from '@/lib/action-items'
 import { CopyButton } from '@/components/copy'
 import {
   Rocket,
@@ -24,6 +25,7 @@ import NodeActions from '../graph/node/actions/node-actions'
 import { useParams } from '@tanstack/react-router'
 import { useGraphStore } from '@/stores/graph-store'
 import { useIcon } from '@/hooks/use-icon'
+import { useActionItems } from '@/hooks/use-action-items'
 import { Switch } from '@/components/ui/switch'
 import type { GraphNode, NodeProperties, NodeMetadata, NodeShape } from '@/types'
 import { sketchService } from '@/api/sketch-service'
@@ -265,10 +267,18 @@ const DetailsPanel = memo(() => {
   const { id: sketchId } = useParams({ strict: false })
   const nodesLength = useGraphStore((s) => s.nodesLength)
   const node = useGraphStore((s) => s.getCurrentNode())
-  const setCurrentNodeId = useGraphStore((s) => s.setCurrentNodeId)
   const updateNode = useGraphStore((s) => s.updateNode)
   const [openIconPicker, setOpenIconPicker] = useState(false)
 
+  const { actionItems } = useActionItems()
+  const currentNodeType = findActionItemByKey(node!.nodeType, actionItems)
+
+  const getNodePropertyType = (propertyName: string): FieldType | undefined => {
+    const field = currentNodeType?.fields.find((f: FormField) => f.name === propertyName);
+
+    return field?.type;
+  }
+
   const [formData, setFormData] = useState<FormData>({
     nodeLabel: '',
     nodeColor: null,
@@ -570,12 +580,12 @@ const DetailsPanel = memo(() => {
                     </a>
                   ) : value && typeof value === 'object' && value.constructor === Object ? (
                     <PopoverProperty label={key} property={value as object} />
-                  ) : Array.isArray(value) ? (
+                  ) : getNodePropertyType(key) === 'list' ? (
                     <TagsInput
                       value={value || []}
                       onChange={(tags) => handlePropertyBlur(key, tags)}
                       orientation='vertical'
-                      placeholder={value.length === 0 ? "Empty" : `Enter ${key.toLowerCase()}`}
+                      placeholder={value?.length === 0 ? "Empty" : `Enter ${key.toLowerCase()}`}
                     />
                   ) : (
                     <PropertyInput
diff --git a/flowsint-app/src/components/ui/tags-input.tsx b/flowsint-app/src/components/ui/tags-input.tsx
index 26b9c2f..ff998a1 100644
--- a/flowsint-app/src/components/ui/tags-input.tsx
+++ b/flowsint-app/src/components/ui/tags-input.tsx
@@ -78,14 +78,14 @@ function TagsInput({
       ))}
       {variant === 'compact' ? (
         <input
-        id={id}
-        type="text"
-        value={inputValue}
-        onChange={(e) => setInputValue(e.target.value)}
-        onKeyDown={handleKeyDown}
-        onBlur={addTag}
-        placeholder={placeholder}
-        className="w-28 text-right text-[12px] bg-transparent outline-none placeholder:text-muted-foreground/30 focus:bg-muted/20 px-1 rounded transition-colors truncate"
+          id={id}
+          type="text"
+          value={inputValue}
+          onChange={(e) => setInputValue(e.target.value)}
+          onKeyDown={handleKeyDown}
+          onBlur={addTag}
+          className="w-full bg-transparent outline-none placeholder:text-muted-foreground/30 focus:bg-muted/20 px-1 rounded transition-colors"
+          placeholder={placeholder ?? 'Empty'}
       />) : (
         <Input
           id={id}