Commit 490eb17d31d3037930d0e6b549393e9dbcebde60 | the-knife

author	Julius Marminge <julius0216@outlook.com> 2026-09-06 20:36:19-07:00
committer	GitHub <noreply@github.com> 2026-09-06 20:36:19-07:00
log	490eb17d31d3037930d0e6b549393e9dbcebde60
tree	f022c2da1c082146ab0a5d6269b59860fe6cd116
parent	f5fb056d248be557e14358d08525361eca047e01
signature	Signed by PGP key B5690EEEBB952194

fix(web): clarify sidebar drag dividers and empty targets (#10464)

2 files changed, 50 insertions(+), 16 deletions(-)

apps
- web
  - src
    components
    Sidebar.drag.test.ts
    Sidebar.tsx

apps/web/src/components/Sidebar.drag.test.ts+25

...	@@ -622,6 +622,31 @@ describe("sidebar drag projection", () => {	...	@@ -622,6 +622,31 @@ describe("sidebar drag projection", () => {
622	expect(strategy({ ...smaller, index: 2 })?.y).toBe(-62.5);	622	expect(strategy({ ...smaller, index: 2 })?.y).toBe(-62.5);
623	});	623	});
624		624
		625	it.each(["active", "settled"] as const)(
		626	"reveals the mounted empty %s target when its last row leaves and hides it on return",
		627	(section) => {
		628	const items = [
		629	pinnedHeader,
		630	thread("p", "pinned"),
		631	divider,
		632	marker("active-placeholder"),
		633	thread("a", "active"),
		634	settledHeader,
		635	marker("settled-placeholder"),
		636	thread("s", "settled"),
		637	];
		638	const active = section === "active" ? "a" : "s";
		639	const input = { items, settledOrder: ["s"], settledExpanded: true };
		640	const placeholderId = sidebarMarkerId(`${section}-placeholder`);
		641	const resting = preview(input, active, active);
		642	expect(resting.get(placeholderId)?.scaleY).toBe(0);
		643	const leaving = preview(input, active, sidebarMarkerId("pinned-header"));
		644	expect(leaving.get(placeholderId)?.scaleY).toBe(1);
		645	const returning = preview(input, active, active);
		646	expect(returning.get(placeholderId)?.scaleY).toBe(0);
		647	},
		648	);
		649
625	it("uses shelf height for empty target sizing when card height differs from its default", () => {	650	it("uses shelf height for empty target sizing when card height differs from its default", () => {
626	const items = [	651	const items = [
627	pinnedHeader,	652	pinnedHeader,

apps/web/src/components/Sidebar.tsx+25-16

 @@ -545,7 +545,8 @@ function SortableSidebarMarker(props: {
       className={cn("list-none", props.className)}
       style={{
         transform: CSS.Translate.toString(transform),
-        transition,
+        // A newly revealed target must not slide from its hidden position.
+        transition: props.marker.endsWith("-placeholder") ? "none" : transition,
         visibility: transform?.scaleY === 0 ? "hidden" : undefined,
       }}
     >
 @@ -599,13 +600,11 @@ function SidebarDragBoundary(props: {
       className="pointer-events-none relative mx-0.5 h-0"
     >
       {props.visible ? (
-        <div className="sidebar-drag-boundary-label absolute inset-x-2 top-1 flex h-4 items-center gap-1.5">
+        <div className="sidebar-drag-boundary-label absolute inset-x-2 top-1 flex h-4 items-center gap-2">
           <span
             className={cn(
-              "inline-flex h-4 shrink-0 items-center rounded-sm border bg-sidebar px-1.5 text-[10px] leading-none font-medium",
+              "shrink-0 text-xs font-medium",
-              props.isDropTarget
+              props.isDropTarget ? "text-primary" : "text-sidebar-foreground/80",
-                ? "border-primary/40 text-primary"
-                : "border-sidebar-foreground/25 text-sidebar-foreground/80",
             )}
           >
             {props.label}
 @@ -635,10 +634,10 @@ function SidebarSectionHeader(props: {
 }) {
   const snoozed = props.marker === "snoozed-header";
   const className = cn(
-    "flex h-full w-full items-center gap-2 rounded-md border border-dashed border-transparent px-2 text-left text-xs font-medium",
+    "flex h-full w-full items-center gap-2 px-2 text-left text-xs font-medium",
     snoozed ? "text-blue-600 dark:text-blue-400" : "text-sidebar-muted-foreground/60",
     props.dragging && "text-sidebar-foreground/80",
-    props.isDropTarget && "border-primary/40 bg-primary/5 text-primary",
+    props.isDropTarget && "text-primary",
   );
   const content = (
     <>
 @@ -3261,9 +3260,7 @@ export default function Sidebar() {
     items.push(...pinnedRows);
     items.push({ kind: "marker", marker: "pinned-divider" });
     const activeRows = rowsOf(activeThreads, "active");
-    if (activeRows.length === 0) {
+    items.push({ kind: "marker", marker: "active-placeholder" });
-      items.push({ kind: "marker", marker: "active-placeholder" });
-    }
     items.push(...activeRows);
     if (snoozedThreads.length > 0) {
       items.push({ kind: "marker", marker: "snoozed-header" });
 @@ -3271,9 +3268,7 @@ export default function Sidebar() {
     }
     items.push({ kind: "marker", marker: "settled-header" });
     const settledRows = rowsOf(renderedSettledThreads, "settled");
-    if (settledRows.length === 0) {
+    items.push({ kind: "marker", marker: "settled-placeholder" });
-      items.push({ kind: "marker", marker: "settled-placeholder" });
-    }
     items.push(...settledRows);
     return items;
   }, [
 @@ -4805,7 +4800,14 @@ export default function Sidebar() {
                                 key="active-placeholder"
                                 marker="active-placeholder"
                                 label="Active"
-                                showHint={from !== null}
+                                showHint={
+                                  from !== null &&
+                                  (activeThreads.length === 0 ||
+                                    (from === "active" &&
+                                      activeThreads.length === 1 &&
+                                      dragTargetSection !== null &&
+                                      dragTargetSection !== "active"))
+                                }
                                 isDropTarget={dragTargetSection === "active"}
                               />,
                             );
 @@ -4852,7 +4854,14 @@ export default function Sidebar() {
                                 key="settled-placeholder"
                                 marker="settled-placeholder"
                                 label="Settled"
-                                showHint={from !== null && from !== "settled"}
+                                showHint={
+                                  from !== null &&
+                                  (renderedSettledThreads.length === 0 ||
+                                    (from === "settled" &&
+                                      renderedSettledThreads.length === 1 &&
+                                      dragTargetSection !== null &&
+                                      dragTargetSection !== "settled"))
+                                }
                                 isDropTarget={dragTargetSection === "settled"}
                               />,
                             );