#268

frontend/src/components/DraggableDroppableTagRow.tsx

@@ -57,7 +57,8 @@ const DraggableDroppableTagRow: FC<Props> = ({ tag, nestLevel, pathKey, parentTa
 	  isDragging: dragging } = useDraggable ({ id:    dndId,
 						   data:  { kind:   'tag',
 							    tagId:  tag.id,
-							    parentTagId } })
+							    parentTagId,
+							    nestLevel } })
 
   const { setNodeRef: setDropRef, isOver: over } = useDroppable ({
       id:   dndId,
@@ -77,12 +78,16 @@ const DraggableDroppableTagRow: FC<Props> = ({ tag, nestLevel, pathKey, parentTa
 	      return
 	    const dx = e.clientX - p.x
 	    const dy = e.clientY - p.y
+
 	    if (dx * dx + dy * dy >= 9)
 	      armEatNextClick ()
 	  }}
 	  onPointerUpCapture={() => {
 	    downPosRef.current = null
 	  }}
+	  onPointerCancelCapture={() => {
+	    downPosRef.current = null
+	  }}
 	  onClickCapture={e => {
 	    if (suppressClickRef.current)
 	      {
@@ -90,18 +95,20 @@ const DraggableDroppableTagRow: FC<Props> = ({ tag, nestLevel, pathKey, parentTa
 		e.stopPropagation ()
 	      }
 	  }}
-	  ref={node => {
+	  ref={setDropRef}
-	    setDragRef (node)
-	    setDropRef (node)
-	  }}
-	  style={style}
 	  className={cn (
 	      'min-w-0 max-w-full overflow-hidden rounded select-none',
+	      sp && 'touch-pan-y',
 	      over && 'ring-2 ring-offset-2')}
-	  {...attributes}
+	  >
-	  {...listeners}>
 	<motion.div
-	    className="flex min-w-0 max-w-full items-baseline overflow-hidden"
+	    ref={setDragRef}
+	    style={style}
+	    className={cn (
+		'inline-flex min-w-0 max-w-full items-baseline overflow-hidden',
+		sp && 'touch-pan-y')}
+	    {...attributes}
+	    {...listeners}
 	    transition={{ layout: layoutTransition }}
 	    layoutId={animationMode === 'off'
 		? undefined

frontend/src/components/TagDetailSidebar.tsx

@@ -1,7 +1,9 @@
 import { DndContext,
 	 DragOverlay,
+	 MeasuringStrategy,
 	 MouseSensor,
 	 TouchSensor,
+	 pointerWithin,
 	 useDroppable,
 	 useSensor,
 	 useSensors } from '@dnd-kit/core'
@@ -25,13 +27,20 @@ import { postsKeys, tagsKeys } from '@/lib/queryKeys'
 import { useClientBehaviourSettings } from '@/lib/useClientBehaviourSettings'
 import { dateString, originalCreatedAtString } from '@/lib/utils'
 
-import type { DragEndEvent } from '@dnd-kit/core'
+import type { CollisionDetection, DragEndEvent } from '@dnd-kit/core'
 import type { FC, MutableRefObject, ReactNode } from 'react'
 
 import type { Category, Post, TagWithSections } from '@/types'
 
 type TagByCategory = { [key in Category]: TagWithSections[] }
 
+const tagCollisionDetection: CollisionDetection = args => {
+  return pointerWithin (args)
+}
+
+const alwaysMeasureDroppables = {
+    droppable: { strategy: MeasuringStrategy.Always } } as const
+
 
 const renderTagTree = (
     tag:              TagWithSections,
@@ -177,12 +186,34 @@ const DropSlot = ({ cat }: { cat: Category }) => {
       </li>)
 }
 
+const EmptyCategoryDropSection = (
+    { cat, children }: { cat: Category
+			 children: ReactNode }) => {
+  const { setNodeRef, isOver: over } = useDroppable ({
+      id:   `slot:${ cat }`,
+      data: { kind: 'slot', cat } })
+
+  return (
+      <div ref={setNodeRef} className="my-3">
+	{children}
+	<ul>
+	  <li className="h-1">
+	    {over && <div className="h-0.5 w-full rounded bg-sky-400"/>}
+	  </li>
+	</ul>
+      </div>)
+}
+
 
 type Props = {
     className?: string
     post:       Post
     sp?:        boolean }
 
+type ActiveTagDrag = {
+    tagId:      number
+    nestLevel:  number }
+
 
 const TagDetailSidebar: FC<Props> = ({ className, post, sp }) => {
   sp = Boolean (sp)
@@ -212,7 +243,7 @@ const TagDetailSidebar: FC<Props> = ({ className, post, sp }) => {
     return tagsTmp
   }, [post])
 
-  const [activeTagId, setActiveTagId] = useState<number | null> (null)
+  const [activeTagDrag, setActiveTagDrag] = useState<ActiveTagDrag | null> (null)
   const [dragging, setDragging] = useState (false)
   const [saving, setSaving] = useState (false)
   const [tags, setTags] = useState (baseTags)
@@ -328,9 +359,18 @@ const TagDetailSidebar: FC<Props> = ({ className, post, sp }) => {
 	<TagSearch/>
 	<DndContext
 	    sensors={sensors}
+	    collisionDetection={sp ? tagCollisionDetection : undefined}
+	    measuring={sp ? alwaysMeasureDroppables : undefined}
 	    onDragStart={e => {
 	      if (e.active.data.current?.kind === 'tag')
-		setActiveTagId (e.active.data.current?.tagId ?? null)
+		{
+		  const tagId = e.active.data.current?.tagId
+		  const nestLevel = e.active.data.current?.nestLevel
+		  setActiveTagDrag (
+		      tagId == null || nestLevel == null
+		      ? null
+		      : { tagId, nestLevel })
+		}
 	      setDragging (true)
 	      suppressClickRef.current = true
 	      document.body.style.userSelect = 'none'
@@ -341,13 +381,13 @@ const TagDetailSidebar: FC<Props> = ({ className, post, sp }) => {
 		suppressClickRef.current = false}, { capture: true, once: true })
 	    }}
 	    onDragCancel={() => {
-	      setActiveTagId (null)
+	      setActiveTagDrag (null)
 	      setDragging (false)
 	      document.body.style.userSelect = ''
 	      suppressClickRef.current = false
 	    }}
 	    onDragEnd={async e => {
-	      setActiveTagId (null)
+	      setActiveTagDrag (null)
 	      setDragging (false)
 	      await onDragEnd (e)
 	      document.body.style.userSelect = ''
@@ -362,8 +402,7 @@ const TagDetailSidebar: FC<Props> = ({ className, post, sp }) => {
 	    if (!(categoryTags.length > 0 || dragging))
 	      return null
 
-	    return (
+	    const sectionTitle = (
-		<div className="my-3" key={cat}>
 		<SubsectionTitle>
 		  <motion.div
 		      layoutId={animationMode === 'off'
@@ -372,8 +411,17 @@ const TagDetailSidebar: FC<Props> = ({ className, post, sp }) => {
 		      transition={{ layout: layoutTransition }}>
 		    {CATEGORY_NAMES[cat]}
 		  </motion.div>
-		  </SubsectionTitle>
+		</SubsectionTitle>)
 
+	    if (!(categoryTags.length > 0))
+	      return (
+		  <EmptyCategoryDropSection cat={cat} key={cat}>
+		    {sectionTitle}
+		  </EmptyCategoryDropSection>)
+
+	    return (
+		<div className="my-3" key={cat}>
+		  {sectionTitle}
 		  <ul>
 		    {(tagRelationDisplay === 'grouped'
 		      ? (tags[cat] ?? []).flatMap (tag =>
@@ -443,9 +491,9 @@ const TagDetailSidebar: FC<Props> = ({ className, post, sp }) => {
 
 	  <DragOverlay adjustScale={false}>
 	    <div className="pointer-events-none">
-	      {activeTagId != null && (() => {
+	      {activeTagDrag != null && (() => {
-		const tag = findTag (tags, activeTagId)
+		const tag = findTag (tags, activeTagDrag.tagId)
-		return tag && <TagLink tag={tag}/>
+		return tag && <TagLink tag={tag} nestLevel={activeTagDrag.nestLevel}/>
 	      }) ()}
 	    </div>
 	  </DragOverlay>