Commit 9a47c7bd40522977c7df022a5b64759aae7b58e0 | the-knife

author	Julius Marminge <julius0216@outlook.com> 2026-09-06 11:10:14-07:00
committer	GitHub <noreply@github.com> 2026-09-06 11:10:14-07:00
log	9a47c7bd40522977c7df022a5b64759aae7b58e0
tree	4cf0187d05c2eff497f102cf330d82f11a4b5ec5
parent	4023d93bce3f610349fbf38e991f737c1c5e0c98
signature	Signed by PGP key B5690EEEBB952194

feat(web): simplify sidebar drag destination cues (#9750)

2 files changed, 47 insertions(+), 56 deletions(-)

apps
- web
  - src
    components
    Sidebar.tsx
docs
- user
  - thread-sidebar.md

apps/web/src/components/Sidebar.tsx+42-53

 @@ -568,7 +568,6 @@ function SidebarSectionPlaceholder(props: {
 function SidebarDragBoundary(props: {
   marker: "pinned-header" | "pinned-divider";
   label: string;
-  hint: string | null;
   visible: boolean;
   isDropTarget: boolean;
 }) {
 @@ -587,7 +586,6 @@ function SidebarDragBoundary(props: {
             )}
           >
             {props.label}
-            {props.hint ? <span className="font-normal">{props.hint}</span> : null}
           </span>
           <span
             aria-hidden
 @@ -603,7 +601,6 @@ function SidebarDragBoundary(props: {
 function SidebarSectionHeader(props: {
   marker: "snoozed-header" | "settled-header";
   label: string;
-  hint?: string | null;
   isDropTarget?: boolean;
   toggle: { expanded: boolean; onToggle: () => void };
 }) {
 @@ -624,7 +621,6 @@ function SidebarSectionHeader(props: {
           props.isDropTarget && "bg-primary/30",
         )}
       />
-      {props.hint ? <span className="truncate text-[11px] font-normal">{props.hint}</span> : null}
       <ChevronDownIcon
         aria-hidden
         className={cn(
 @@ -910,7 +906,7 @@ const SidebarThreadRow = memo(function SidebarThreadRow(props: {
   // sortable bag applied to the row root so the whole row drags (the
   // pointer sensor's distance constraint keeps plain clicks working).
   sortable?: SortableThreadRowBag | undefined;
-  dropSection: SidebarSection | null;
+  dropSection: Exclude<SidebarSection, "snoozed"> | null;
   // Compact wake countdown ("2h") for rows in the snoozed shelf.
   snoozeWakeLabelText: string | null;
   // When a snooze ended (timer or early wake); drives the Woke pill until
 @@ -1331,14 +1327,13 @@ const SidebarThreadRow = memo(function SidebarThreadRow(props: {
         role="status"
         className="pointer-events-none ml-auto inline-flex h-5 shrink-0 items-center gap-1 rounded-sm border border-primary/30 bg-sidebar px-1.5 text-[11px] font-medium text-primary"
       >
+        <span className="sr-only">Move to </span>
         <span aria-hidden>→</span>
         {props.dropSection === "pinned"
           ? "Pinned"
           : props.dropSection === "active"
             ? "Active"
-            : props.dropSection === "settled"
+            : "Settled"}
-              ? "Settled"
-              : "Snoozed"}
       </span>
     ) : null;
 @@ -1442,31 +1437,32 @@ const SidebarThreadRow = memo(function SidebarThreadRow(props: {
       <TooltipPopup side="top">Unsent draft</TooltipPopup>
     </Tooltip>
   ) : null;
-  const pinIndicator = props.isPinned ? (
+  const pinIndicator =
-    props.pinningSupported ? (
+    props.isPinned && !sortable?.isDragging ? (
-      <Tooltip>
+      props.pinningSupported ? (
-        <TooltipTrigger
+        <Tooltip>
-          render={
+          <TooltipTrigger
-            <button
+            render={
-              type="button"
+              <button
-              aria-label="Unpin thread"
+                type="button"
-              onClick={handleUnpinClick}
+                aria-label="Unpin thread"
-              className="inline-flex cursor-pointer items-center rounded-sm text-muted-foreground/65 outline-none transition-colors hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring"
+                onClick={handleUnpinClick}
-            />
+                className="inline-flex cursor-pointer items-center rounded-sm text-muted-foreground/65 outline-none transition-colors hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring"
-          }
+              />
-        >
+            }
-          <PinIcon aria-hidden className="size-3 shrink-0" />
+          >
-        </TooltipTrigger>
+            <PinIcon aria-hidden className="size-3 shrink-0" />
-        <TooltipPopup>Unpin thread</TooltipPopup>
+          </TooltipTrigger>
-      </Tooltip>
+          <TooltipPopup>Unpin thread</TooltipPopup>
-    ) : (
+        </Tooltip>
-      <PinIcon
+      ) : (
-        aria-label="Pinned"
+        <PinIcon
-        role="img"
+          aria-label="Pinned"
-        className="size-3 shrink-0 text-muted-foreground/65"
+          role="img"
-      />
+          className="size-3 shrink-0 text-muted-foreground/65"
-    )
+        />
-  ) : null;
+      )
+    ) : null;
   if (variant === "slim") {
     return (
 @@ -1526,7 +1522,9 @@ const SidebarThreadRow = memo(function SidebarThreadRow(props: {
               remain visible AND clickable while the row is hovered. Only
               the time/jump label yields to the settle affordance. */}
             {prBadge}
-            {dragDestination ?? (
+            {sortable?.isDragging ? (
+              dragDestination
+            ) : (
               <span className="relative ml-auto flex h-6 min-w-8 shrink-0 items-center justify-end">
                 <span
                   className={cn(
 @@ -1679,7 +1677,9 @@ const SidebarThreadRow = memo(function SidebarThreadRow(props: {
                   actions on hover/keyboard focus or while the popover is open. Keeping
                   the hidden state out of flow lets the project label reclaim
                   space without either state overlapping it. */}
-              {dragDestination ?? (
+              {sortable?.isDragging ? (
+                dragDestination
+              ) : (
                 <span className="group/sidebar-status-slot relative ml-auto flex h-5 min-w-8 shrink-0 items-stretch justify-end text-xs">
                   {/* Read-only status labels yield to the hover actions. Woke is
                     itself an action, so it stays pointer-enabled and visible
 @@ -4534,7 +4534,11 @@ export default function Sidebar() {
                             isPinned={thread.pinnedAt != null}
                             sortable={sortable}
                             dropSection={
-                              dragState?.activeKey === threadKey ? dragTargetSection : null
+                              dragState?.activeKey === threadKey &&
+                              dragTargetSection !== dragState.activeSection &&
+                              dragTargetSection !== "snoozed"
+                                ? dragTargetSection
+                                : null
                             }
                             snoozeWakeLabelText={
                               section === "snoozed" && thread.snoozedUntil != null
 @@ -4634,14 +4638,6 @@ export default function Sidebar() {
                         dragTargetSection !== "pinned"
                           ? 1
                           : 0);
-                      const activeHint =
-                        from === "pinned"
-                          ? "Drop to unpin"
-                          : from === "settled"
-                            ? "Drop to un-settle"
-                            : from === "snoozed"
-                              ? "Drop to wake"
-                              : null;
                       const items: ReactNode[] = [
                         <SidebarDraftBlock
                           key="draft-sessions"
 @@ -4667,7 +4663,6 @@ export default function Sidebar() {
                                 key="pinned-header"
                                 marker="pinned-header"
                                 label="Pinned"
-                                hint={from !== null && from !== "pinned" ? "Drop to pin" : null}
                                 isDropTarget={dragTargetSection === "pinned"}
                                 visible={from !== null}
                               />,
 @@ -4679,7 +4674,6 @@ export default function Sidebar() {
                                 key="pinned-divider"
                                 marker="pinned-divider"
                                 label="Active"
-                                hint={dragTargetSection === "active" ? activeHint : null}
                                 isDropTarget={dragTargetSection === "active"}
                                 visible={from !== null && previewPinnedCount > 0}
                               />,
 @@ -4690,7 +4684,7 @@ export default function Sidebar() {
                               <SidebarSectionPlaceholder
                                 key="active-placeholder"
                                 marker="active-placeholder"
-                                label={activeHint ?? "Drop here"}
+                                label="Active"
                                 showHint={from !== null}
                                 isDropTarget={dragTargetSection === "active"}
                               />,
 @@ -4723,11 +4717,6 @@ export default function Sidebar() {
                                     ? "Settled"
                                     : `Settled (${settledThreads.length})`
                                 }
-                                hint={
-                                  dragTargetSection === "settled" && from !== "settled"
-                                    ? "Drop to settle"
-                                    : null
-                                }
                                 isDropTarget={dragTargetSection === "settled"}
                                 toggle={{
                                   expanded: settledShelfExpanded,
 @@ -4741,7 +4730,7 @@ export default function Sidebar() {
                               <SidebarSectionPlaceholder
                                 key="settled-placeholder"
                                 marker="settled-placeholder"
-                                label="Drop to settle"
+                                label="Settled"
                                 showHint={from !== null && from !== "settled"}
                                 isDropTarget={dragTargetSection === "settled"}
                               />,

docs/user/thread-sidebar.md+5-3

...	@@ -33,9 +33,11 @@ thread into the active list un-settles it. A snoozed thread can be dragged out o	...	@@ -33,9 +33,11 @@ thread into the active list un-settles it. A snoozed thread can be dragged out o
33	shelf, which wakes it, but threads cannot be dragged into the shelf because snoozing needs a wake	33	shelf, which wakes it, but threads cannot be dragged into the shelf because snoozing needs a wake
34	time. Dragging a pinned thread out of the pinned section does not ask for unpin confirmation.	34	time. Dragging a pinned thread out of the pinned section does not ask for unpin confirmation.
35	Pinned and active boundary labels appear only while dragging, without moving the rows. The	35	Pinned and active boundary labels appear only while dragging, without moving the rows. The
36	destination boundary highlights and the thread shows which section it will land in. When there	36	destination boundary highlights. When you cross into another section, the dragged thread shows
37	are no pins, drag to the top edge to pin a thread. Drop instructions also appear for empty sections	37	its destination, such as → Active. Its usual pin, status, and hover actions hide during the
38	and a collapsed settled shelf.	38	drag. Reordering within the same section does not show a destination badge. When there are no
		39	pins, drag to the top edge to pin a thread. Section labels also identify empty sections and a
		40	collapsed settled shelf.
39		41
40	Drag within the pinned or active section to change its order. Other rows slide aside to show the	42	Drag within the pinned or active section to change its order. Other rows slide aside to show the
41	spot where the thread will land. Drops into either section keep the position you choose. On	43	spot where the thread will land. Drops into either section keep the position you choose. On