chore: refactor packages/app files (#13236)

Co-authored-by: opencode-agent[bot] <opencode-agent[bot]@users.noreply.github.com>
Co-authored-by: Frank <frank@anoma.ly>

packages/app/src/utils/solid-dnd.tsx

@@ -1,55 +1,49 @@
 import { useDragDropContext } from "@thisbeyond/solid-dnd"
-import { JSXElement } from "solid-js"
 import type { Transformer } from "@thisbeyond/solid-dnd"
+import { createRoot, onCleanup, type JSXElement } from "solid-js"
+
+type DragEvent = { draggable?: { id?: unknown } }
+
+const isDragEvent = (event: unknown): event is DragEvent => {
+  if (typeof event !== "object" || event === null) return false
+  return "draggable" in event
+}
 
 export const getDraggableId = (event: unknown): string | undefined => {
-  if (typeof event !== "object" || event === null) return undefined
-  if (!("draggable" in event)) return undefined
-  const draggable = (event as { draggable?: { id?: unknown } }).draggable
+  if (!isDragEvent(event)) return undefined
+  const draggable = event.draggable
   if (!draggable) return undefined
   return typeof draggable.id === "string" ? draggable.id : undefined
 }
 
-export const ConstrainDragXAxis = (): JSXElement => {
+const createTransformer = (id: string, axis: "x" | "y"): Transformer => ({
+  id,
+  order: 100,
+  callback: (transform) => (axis === "x" ? { ...transform, x: 0 } : { ...transform, y: 0 }),
+})
+
+const createAxisConstraint = (axis: "x" | "y", transformerId: string) => (): JSXElement => {
   const context = useDragDropContext()
-  if (!context) return <></>
+  if (!context) return null
   const [, { onDragStart, onDragEnd, addTransformer, removeTransformer }] = context
-  const transformer: Transformer = {
-    id: "constrain-x-axis",
-    order: 100,
-    callback: (transform) => ({ ...transform, x: 0 }),
-  }
-  onDragStart((event) => {
-    const id = getDraggableId(event)
-    if (!id) return
-    addTransformer("draggables", id, transformer)
+  const transformer = createTransformer(transformerId, axis)
+  const dispose = createRoot((dispose) => {
+    onDragStart((event) => {
+      const id = getDraggableId(event)
+      if (!id) return
+      addTransformer("draggables", id, transformer)
+    })
+    onDragEnd((event) => {
+      const id = getDraggableId(event)
+      if (!id) return
+      removeTransformer("draggables", id, transformer.id)
+    })
+    return dispose
   })
-  onDragEnd((event) => {
-    const id = getDraggableId(event)
-    if (!id) return
-    removeTransformer("draggables", id, transformer.id)
-  })
-  return <></>
+  onCleanup(dispose)
+  return null
 }
 
-export const ConstrainDragYAxis = (): JSXElement => {
-  const context = useDragDropContext()
-  if (!context) return <></>
-  const [, { onDragStart, onDragEnd, addTransformer, removeTransformer }] = context
-  const transformer: Transformer = {
-    id: "constrain-y-axis",
-    order: 100,
-    callback: (transform) => ({ ...transform, y: 0 }),
-  }
-  onDragStart((event) => {
-    const id = getDraggableId(event)
-    if (!id) return
-    addTransformer("draggables", id, transformer)
-  })
-  onDragEnd((event) => {
-    const id = getDraggableId(event)
-    if (!id) return
-    removeTransformer("draggables", id, transformer.id)
-  })
-  return <></>
-}
+export const ConstrainDragXAxis = createAxisConstraint("x", "constrain-x-axis")
+
+export const ConstrainDragYAxis = createAxisConstraint("y", "constrain-y-axis")