From 17fbe2fadc7c8a4ce9c796f92f1f86a7fb3d60fe Mon Sep 17 00:00:00 2001
From: Victor Giers <mail@victorgiers.com>
Date: Tue, 31 Mar 2026 06:49:10 +0200
Subject: [PATCH] Refactor interaction links rendering in App.tsx

---
 src/app/App.tsx | 146 ++----------------------------------------------
 1 file changed, 6 insertions(+), 140 deletions(-)

diff --git a/src/app/App.tsx b/src/app/App.tsx
index d1d8da3a..62e0f69d 100644
--- a/src/app/App.tsx
+++ b/src/app/App.tsx
@@ -2892,146 +2892,12 @@ export function App({ store, initialStatusMessage }: AppProps) {
                       </div>
                     </div>
 
-                    <div className="form-section">
-                      <div className="label">Links</div>
-                      {selectedTriggerVolumeLinks.length === 0 ? (
-                        <div className="outliner-empty">No trigger links authored yet.</div>
-                      ) : (
-                        <div className="outliner-list">
-                          {selectedTriggerVolumeLinks.map((link, index) => (
-                            <div key={link.id} className="outliner-item">
-                              <div className="outliner-item__select">
-                                <span className="outliner-item__title">{`Link ${index + 1}`}</span>
-                                <span className="outliner-item__meta">{getInteractionActionLabel(link)}</span>
-                              </div>
-
-                              <div className="form-section">
-                                <div className="vector-inputs vector-inputs--two">
-                                  <label className="form-field">
-                                    <span className="label">Trigger</span>
-                                    <select
-                                      data-testid={`interaction-link-trigger-${link.id}`}
-                                      className="text-input"
-                                      value={link.trigger}
-                                      onChange={(event) =>
-                                        updateInteractionLinkTrigger(link, event.currentTarget.value as InteractionTriggerKind)
-                                      }
-                                    >
-                                      <option value="enter">On Enter</option>
-                                      <option value="exit">On Exit</option>
-                                    </select>
-                                  </label>
-                                  <label className="form-field">
-                                    <span className="label">Action</span>
-                                    <select
-                                      data-testid={`interaction-link-action-${link.id}`}
-                                      className="text-input"
-                                      value={link.action.type}
-                                      onChange={(event) =>
-                                        updateInteractionLinkActionType(link, event.currentTarget.value as InteractionLink["action"]["type"])
-                                      }
-                                    >
-                                      <option value="teleportPlayer">Teleport Player</option>
-                                      <option value="toggleVisibility">Toggle Visibility</option>
-                                    </select>
-                                  </label>
-                                </div>
-                              </div>
-
-                              {link.action.type === "teleportPlayer" ? (
-                                <div className="form-section">
-                                  <label className="form-field">
-                                    <span className="label">Target</span>
-                                    <select
-                                      data-testid={`interaction-link-teleport-target-${link.id}`}
-                                      className="text-input"
-                                      value={link.action.targetEntityId}
-                                      onChange={(event) => updateTeleportInteractionLinkTarget(link, event.currentTarget.value)}
-                                    >
-                                      {teleportTargetOptions.map(({ entity, label }) => (
-                                        <option key={entity.id} value={entity.id}>
-                                          {label}
-                                        </option>
-                                      ))}
-                                    </select>
-                                  </label>
-                                </div>
-                              ) : (
-                                <div className="form-section">
-                                  <div className="vector-inputs vector-inputs--two">
-                                    <label className="form-field">
-                                      <span className="label">Brush</span>
-                                      <select
-                                        data-testid={`interaction-link-visibility-target-${link.id}`}
-                                        className="text-input"
-                                        value={link.action.targetBrushId}
-                                        onChange={(event) => updateVisibilityInteractionLinkTarget(link, event.currentTarget.value)}
-                                      >
-                                        {visibilityBrushOptions.map(({ brush, label }) => (
-                                          <option key={brush.id} value={brush.id}>
-                                            {label}
-                                          </option>
-                                        ))}
-                                      </select>
-                                    </label>
-                                    <label className="form-field">
-                                      <span className="label">Mode</span>
-                                      <select
-                                        data-testid={`interaction-link-visibility-mode-${link.id}`}
-                                        className="text-input"
-                                        value={getVisibilityModeSelectValue(link.action.visible)}
-                                        onChange={(event) =>
-                                          updateVisibilityInteractionMode(
-                                            link,
-                                            event.currentTarget.value as ReturnType<typeof getVisibilityModeSelectValue>
-                                          )
-                                        }
-                                      >
-                                        <option value="toggle">Toggle</option>
-                                        <option value="show">Show</option>
-                                        <option value="hide">Hide</option>
-                                      </select>
-                                    </label>
-                                  </div>
-                                </div>
-                              )}
-
-                              <div className="inline-actions">
-                                <button
-                                  className="toolbar__button"
-                                  type="button"
-                                  data-testid={`delete-interaction-link-${link.id}`}
-                                  onClick={() => handleDeleteInteractionLink(link.id)}
-                                >
-                                  Delete Link
-                                </button>
-                              </div>
-                            </div>
-                          ))}
-                        </div>
-                      )}
-
-                      <div className="inline-actions">
-                        <button
-                          className="toolbar__button"
-                          type="button"
-                          data-testid="add-trigger-teleport-link"
-                          disabled={teleportTargetOptions.length === 0}
-                          onClick={handleAddTeleportInteractionLink}
-                        >
-                          Add Teleport Link
-                        </button>
-                        <button
-                          className="toolbar__button"
-                          type="button"
-                          data-testid="add-trigger-visibility-link"
-                          disabled={visibilityBrushOptions.length === 0}
-                          onClick={handleAddVisibilityInteractionLink}
-                        >
-                          Add Visibility Link
-                        </button>
-                      </div>
-                    </div>
+                    {renderInteractionLinksSection(
+                      selectedTriggerVolume,
+                      selectedTriggerVolumeLinks,
+                      "add-trigger-teleport-link",
+                      "add-trigger-visibility-link"
+                    )}
                   </>
                 ) : null}