From 3bb55fbae0b13291cd15d58cedc5b6c11d62f9b2 Mon Sep 17 00:00:00 2001
From: ThishakaM <thishanka.methshan@gmail.com>
Date: Wed, 14 Oct 2026 09:29:30 +0530
Subject: [PATCH 1/7] style(nav-rail): improve reorder handle visibility in
 light mode

---
 worklenz-frontend/src/components/nav-rail/NavRailItem.tsx | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/worklenz-frontend/src/components/nav-rail/NavRailItem.tsx b/worklenz-frontend/src/components/nav-rail/NavRailItem.tsx
index 70071e3e9..99ec19e0e 100644
--- a/worklenz-frontend/src/components/nav-rail/NavRailItem.tsx
+++ b/worklenz-frontend/src/components/nav-rail/NavRailItem.tsx
@@ -242,11 +242,12 @@ const NavRailItem: React.FC<NavRailItemProps> = ({
               aria-label={`Reorder ${typeof label === 'string' ? label : item.key}`}
               style={{
                 position: 'absolute',
-                bottom: 2,
+                top: 2,
                 right: 2,
                 fontSize: 14,
                 color: token.colorPrimary,
-                background: token.colorBgContainer,
+                background: isDark ? token.colorBgContainer : token.colorPrimaryBg,
+                border: `1px solid ${token.colorBorder}`,
                 borderRadius: token.borderRadiusSM,
                 padding: '2px',
                 cursor: 'grab',

From e73cc844151758cfdf33e565ac5ef6905c8c8fc3 Mon Sep 17 00:00:00 2001
From: ThishakaM <thishanka.methshan@gmail.com>
Date: Wed, 14 Oct 2026 09:46:51 +0530
Subject: [PATCH 2/7] style(nav-rail): reduce font size of reorder icon for
 improved visibility

---
 worklenz-frontend/src/components/nav-rail/NavRailItem.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/worklenz-frontend/src/components/nav-rail/NavRailItem.tsx b/worklenz-frontend/src/components/nav-rail/NavRailItem.tsx
index 99ec19e0e..958d84ada 100644
--- a/worklenz-frontend/src/components/nav-rail/NavRailItem.tsx
+++ b/worklenz-frontend/src/components/nav-rail/NavRailItem.tsx
@@ -244,7 +244,7 @@ const NavRailItem: React.FC<NavRailItemProps> = ({
                 position: 'absolute',
                 top: 2,
                 right: 2,
-                fontSize: 14,
+                fontSize: 12,
                 color: token.colorPrimary,
                 background: isDark ? token.colorBgContainer : token.colorPrimaryBg,
                 border: `1px solid ${token.colorBorder}`,

From 711cd83615b5ab56566d145ac26e30c6f8066412 Mon Sep 17 00:00:00 2001
From: ThishakaM <thishanka.methshan@gmail.com>
Date: Wed, 14 Oct 2026 14:03:17 +0530
Subject: [PATCH 3/7] feat(nav-rail): optimize item interactions, fix pin
 toggle, and add soft icon glow

- Enable full-item dragging by binding dnd-kit attributes directly to the item button, removing the separate drag handle.
- Fix pin toggle affordance:
  - Reposition to top-left (top: 4, left: 4) to prevent overlap with unread badges and Soon tags.
  - Intercept pointer-down events on the pin to prevent dnd-kit from capturing clicks as drag initiations.
  - Show pin affordance when an item is active, pinned, or hovered.
- Replace blocky background hover highlight with a subtle, soft icon-only glow using CSS drop-shadow (3px radius, 45% opacity).
- Optimize performance by delegating all hover states, transitions, and glow effects to CSS, eliminating React hover states and preventing unnecessary re-renders.
- Reposition indicators (badge at top: 4, right: 5; Soon tag at top: 22, right: 4) with pointer-events: none to maintain hit-test integrity.
---
 .../src/components/nav-rail/NavRailItem.tsx   | 288 ++++++++++--------
 .../src/components/nav-rail/nav-rail.css      |  67 +++-
 2 files changed, 212 insertions(+), 143 deletions(-)

diff --git a/worklenz-frontend/src/components/nav-rail/NavRailItem.tsx b/worklenz-frontend/src/components/nav-rail/NavRailItem.tsx
index 958d84ada..20f5ac635 100644
--- a/worklenz-frontend/src/components/nav-rail/NavRailItem.tsx
+++ b/worklenz-frontend/src/components/nav-rail/NavRailItem.tsx
@@ -1,8 +1,8 @@
-import React from 'react';
+import React, { useMemo, useCallback, useRef } from 'react';
 import { useSortable } from '@dnd-kit/sortable';
 import { CSS } from '@dnd-kit/utilities';
 import { Tooltip, theme } from '@/shared/antd-imports';
-import { HolderOutlined, PushpinFilled, PushpinOutlined } from '@/shared/antd-imports';
+import { PushpinFilled, PushpinOutlined } from '@/shared/antd-imports';
 import type { NavItem } from '@/features/navigation/nav-registry.types';
 import './nav-rail.css';
 
@@ -48,112 +48,176 @@ const NavRailItem: React.FC<NavRailItemProps> = ({
     disabled: !draggable,
   });
 
-  // Matches PlannerLeftSidebar.tsx's existing fix for antd Tooltip's dark
-  // chip reading as a mismatched box against a light-mode rail — reused here
-  // so every surface gets the same theme-matched tooltip instead of each
-  // rewriting the same workaround.
-  const tooltipProps = {
-    color: isDark ? undefined : '#fff',
-    styles: { body: isDark ? undefined : { color: token.colorText, boxShadow: '0 2px 8px rgba(0,0,0,.15)' } },
-  };
+  // Track whether we're interacting with the pin so we can suppress the
+  // item's own click/drag when the user intends to click the pin.
+  const pinInteracting = useRef(false);
 
-  // `soon` items are non-clickable by default; `soonClickable` opts a
-  // specific item (e.g. Client Portal's Ticketing) out of that while
-  // keeping the dimmed styling and "Soon" tag below.
   const clickDisabled = item.soon && !item.soonClickable;
 
   const tooltipTitle = isPinned ? `${label} (Pinned)` : label;
+  const iconColor = active
+    ? token.colorPrimary
+    : isDark
+      ? 'rgba(255,255,255,.45)'
+      : 'rgba(0,0,0,.45)';
 
-  const iconColor = active ? token.colorPrimary : isDark ? 'rgba(255,255,255,.45)' : 'rgba(0,0,0,.45)';
+  // ─── Memoized styles ────────────────────────────────────────────────────────
 
-  const wrapperStyle: React.CSSProperties = {
-    position: 'relative',
-    width: '100%',
-    transform: CSS.Transform.toString(transform),
-    transition,
-    opacity: isDragging ? 0.5 : 1,
-    zIndex: isDragging ? 1 : undefined,
-  };
+  const wrapperStyle = useMemo(
+    () => ({
+      position: 'relative' as const,
+      width: '100%',
+      transform: CSS.Transform.toString(transform),
+      transition,
+      opacity: isDragging ? 0.5 : 1,
+      zIndex: isDragging ? 1 : undefined,
+      // Pass token colors to CSS for pure-CSS hover glow (zero JS re-renders on hover)
+      '--nav-rail-color-primary': token.colorPrimary,
+      '--nav-rail-glow': token.colorPrimary,
+    } as React.CSSProperties),
+    [transform, transition, isDragging, token.colorPrimary],
+  );
+
+  const buttonStyle = useMemo(
+    () => ({
+      display: 'flex',
+      flexDirection: 'column' as const,
+      alignItems: 'center',
+      justifyContent: 'center',
+      gap: 3,
+      width: '100%',
+      padding: collapsed ? '3px 2px' : '6px 4px 6px',
+      cursor: clickDisabled ? 'default' : 'pointer',
+      opacity: item.soon ? 0.45 : 1,
+      position: 'relative' as const,
+      background: 'transparent',
+    }),
+    [collapsed, clickDisabled, item.soon],
+  );
+
+  // Pin icon colour: primary when already pinned, muted otherwise.
+  // The :hover glow and color are handled in CSS without re-renders.
+  const pinIconColor = useMemo(
+    () => (isPinned ? token.colorPrimary : isDark ? 'rgba(255,255,255,.40)' : 'rgba(0,0,0,.35)'),
+    [isPinned, isDark, token.colorPrimary],
+  );
+
+  const pinIconStyle = useMemo(
+    () => ({
+      fontSize: 10,
+      color: pinIconColor,
+      transition: 'color .15s',
+    }),
+    [pinIconColor],
+  );
+
+  const pinWrapperStyle = useMemo(
+    () => ({
+      position: 'absolute' as const,
+      // Top-left corner — clear of badge (top-right) and Soon tag (right side)
+      top: 4,
+      left: 4,
+      width: 16,
+      height: 16,
+      borderRadius: token.borderRadiusSM,
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      zIndex: 3,
+      cursor: 'pointer',
+    }),
+    [token.borderRadiusSM],
+  );
+
+  const tooltipProps = useMemo(
+    () => ({
+      color: isDark ? undefined : '#fff',
+      styles: {
+        body: isDark ? undefined : { color: token.colorText, boxShadow: '0 2px 8px rgba(0,0,0,.15)' },
+      },
+    }),
+    [isDark, token.colorText],
+  );
+
+  // ─── Stable callbacks ────────────────────────────────────────────────────────
+
+  const handleSelect = useCallback(() => {
+    if (!clickDisabled) onSelect();
+  }, [clickDisabled, onSelect]);
+
+  const handleKeyDown = useCallback(
+    (e: React.KeyboardEvent) => activateOnKey(handleSelect)(e),
+    [handleSelect],
+  );
 
-  // Affordances (pin, drag handle) are always in the DOM — visibility is
-  // driven by CSS :hover/:focus-within (see nav-rail.css) so a keyboard user
-  // tabbing to them can actually find and use them, not just a mouse user.
-  const affordanceClassName = `nav-rail-affordance${isPinned ? ' nav-rail-affordance-visible' : ''}`;
+  // Pin click: stop propagation so the item click / DnD listeners don't fire.
+  const handlePinClick = useCallback(
+    (e: React.MouseEvent) => {
+      e.stopPropagation();
+      pinInteracting.current = false;
+      onTogglePin();
+    },
+    [onTogglePin],
+  );
+
+  const handlePinKeyDown = useCallback(
+    (e: React.KeyboardEvent) => {
+      e.stopPropagation();
+      activateOnKey(onTogglePin)(e);
+    },
+    [onTogglePin],
+  );
 
-  const togglePin = () => onTogglePin();
+  // Intercept DnD pointer events on the pin so they don't start a drag.
+  const handlePinPointerDown = useCallback((e: React.PointerEvent) => {
+    e.stopPropagation();
+    pinInteracting.current = true;
+  }, []);
 
   return (
     <div ref={setNodeRef} style={wrapperStyle} className="nav-rail-item-wrapper">
-      <Tooltip title={tooltipTitle} placement="right" mouseEnterDelay={0.3} mouseLeaveDelay={0} {...tooltipProps}>
-        {/* A <div> with button semantics, not a real <button> — it hosts the
-            pin/drag-handle affordances below, and nested <button>s inside a
-            <button> are invalid HTML. */}
+      <Tooltip
+        title={tooltipTitle}
+        placement="right"
+        mouseEnterDelay={0.3}
+        mouseLeaveDelay={0}
+        {...tooltipProps}
+      >
         <div
-          role="button"
+          {...attributes}
+          {...listeners}
           tabIndex={clickDisabled ? -1 : 0}
           aria-disabled={clickDisabled}
-          onClick={() => !clickDisabled && onSelect()}
-          onKeyDown={activateOnKey(() => !clickDisabled && onSelect())}
-          style={{
-            display: 'flex',
-            flexDirection: 'column',
-            alignItems: 'center',
-            justifyContent: 'center',
-            gap: 3,
-            width: '100%',
-            // Kept compact — on dense lists (e.g. Projects' 8 items, most
-            // with a "Soon" badge pinned to the item's top edge) taller
-            // padding pushes the centered icon/label away from that badge
-            // and inflates the gap between rows, which reads worse than a
-            // slightly-wide highlight.
-            padding: collapsed ? '3px 2px' : '6px 4px 6px',
-            cursor: clickDisabled ? 'default' : 'pointer',
-            opacity: item.soon ? 0.45 : 1,
-            transition: 'all .15s',
-            position: 'relative',
-          }}
+          onClick={handleSelect}
+          onKeyDown={handleKeyDown}
+          style={buttonStyle}
         >
+          {/* ── Pin affordance (top-left, visible when active/pinned or hovered) ── */}
           <span
             role="button"
             tabIndex={0}
-            className={affordanceClassName}
-            onClick={e => {
-              e.stopPropagation();
-              togglePin();
-            }}
-            onKeyDown={e => {
-              e.stopPropagation();
-              activateOnKey(togglePin)(e);
-            }}
+            aria-label={isPinned ? 'Unpin this view' : 'Pin as default view'}
             title={isPinned ? 'Pinned as default' : 'Pin as default view'}
-            style={{
-              position: 'absolute',
-              top: 4,
-              left: 4,
-              width: 16,
-              height: 16,
-              borderRadius: 3,
-              display: 'flex',
-              alignItems: 'center',
-              justifyContent: 'center',
-              background: isPinned ? token.colorPrimaryBg : isDark ? 'rgba(255,255,255,.08)' : 'rgba(0,0,0,.06)',
-              zIndex: 2,
-              cursor: 'pointer',
-            }}
+            className={`nav-rail-pin-affordance ${active || isPinned ? 'nav-rail-pin-visible' : ''}`}
+            onClick={handlePinClick}
+            onKeyDown={handlePinKeyDown}
+            onPointerDown={handlePinPointerDown}
+            style={pinWrapperStyle}
           >
             {isPinned ? (
-              <PushpinFilled style={{ fontSize: 9, color: token.colorPrimary }} />
+              <PushpinFilled style={pinIconStyle} />
             ) : (
-              <PushpinOutlined style={{ fontSize: 9, color: isDark ? 'rgba(255,255,255,.55)' : 'rgba(0,0,0,.45)' }} />
+              <PushpinOutlined style={pinIconStyle} />
             )}
           </span>
 
+          {/* ── Unread badge ───────────────────────────────────────────────── */}
           {typeof badgeValue === 'number' && badgeValue > 0 && (
             <span
               style={{
                 position: 'absolute',
-                top: 5,
-                right: 7,
+                top: 4,
+                right: 5,
                 minWidth: 15,
                 height: 15,
                 borderRadius: 8,
@@ -166,104 +230,60 @@ const NavRailItem: React.FC<NavRailItemProps> = ({
                 fontWeight: 700,
                 padding: '0 3px',
                 zIndex: 2,
+                pointerEvents: 'none',
               }}
             >
               {badgeValue > 99 ? '99+' : badgeValue}
             </span>
           )}
 
+          {/* ── Soon tag ───────────────────────────────────────────────────── */}
           {item.soon && (
             <span
               style={{
                 position: 'absolute',
-                top: 4,
+                top: 22,
                 right: 4,
                 fontSize: 8,
                 background: 'rgba(250,173,20,.15)',
                 color: '#d46b08',
-                borderRadius: 3,
+                borderRadius: token.borderRadiusSM,
                 padding: '1px 4px',
                 fontWeight: 600,
+                zIndex: 2,
+                pointerEvents: 'none',
               }}
             >
               Soon
             </span>
           )}
 
-          {/* No background fill for the active state — just the icon/label
-              color change below (iconColor already swaps to colorPrimary
-              when active). */}
+          {/* ── Nav icon (glows on hover via CSS drop-shadow, no background box) ── */}
           <span
+            className="nav-rail-item-icon"
             style={{
-              width: 24,
-              height: 24,
-              fontSize: 24,
               color: iconColor,
-              display: 'flex',
-              alignItems: 'center',
-              justifyContent: 'center',
-              transition: 'color .15s',
             }}
           >
             {item.icon}
           </span>
 
+          {/* ── Label ─────────────────────────────────────────────────────── */}
           {!collapsed && (
             <span
+              className="nav-rail-item-label"
               style={{
-                fontSize: 11,
                 fontWeight: active ? 600 : 500,
-                textAlign: 'center',
-                lineHeight: 1.2,
                 color: iconColor,
-                whiteSpace: 'pre-line',
-                transition: 'color .15s',
               }}
             >
               {label}
             </span>
           )}
-
-          {draggable && (
-            <span
-              className="nav-rail-affordance"
-              {...attributes}
-              {...listeners}
-              onClick={e => e.stopPropagation()}
-              onKeyDown={e => {
-                // dnd-kit's own activation handler (Space/Enter) calls
-                // preventDefault but not stopPropagation — without this, the
-                // key event would also bubble up and trigger onSelect on the
-                // outer item, navigating away at the same moment a keyboard
-                // drag starts.
-                listeners?.onKeyDown?.(e);
-                if (e.key === 'Enter' || e.key === ' ') e.stopPropagation();
-              }}
-              aria-label={`Reorder ${typeof label === 'string' ? label : item.key}`}
-              style={{
-                position: 'absolute',
-                top: 2,
-                right: 2,
-                fontSize: 12,
-                color: token.colorPrimary,
-                background: isDark ? token.colorBgContainer : token.colorPrimaryBg,
-                border: `1px solid ${token.colorBorder}`,
-                borderRadius: token.borderRadiusSM,
-                padding: '2px',
-                cursor: 'grab',
-                display: 'flex',
-                alignItems: 'center',
-                justifyContent: 'center',
-                zIndex: 2,
-              }}
-            >
-              <HolderOutlined />
-            </span>
-          )}
         </div>
       </Tooltip>
     </div>
   );
 };
 
-export default NavRailItem;
+export default React.memo(NavRailItem);
diff --git a/worklenz-frontend/src/components/nav-rail/nav-rail.css b/worklenz-frontend/src/components/nav-rail/nav-rail.css
index 51e41d0a3..79100cf71 100644
--- a/worklenz-frontend/src/components/nav-rail/nav-rail.css
+++ b/worklenz-frontend/src/components/nav-rail/nav-rail.css
@@ -10,19 +10,68 @@
   }
 }
 
-/* Pin + drag-handle affordances on a NavRailItem: always in the DOM (so a
-   keyboard user tabbing through can reach them), hidden until the item is
-   hovered or something inside it has focus, or the affordance is forced
-   visible (a pinned item's pin icon stays showing even without hover). */
-.nav-rail-affordance {
+/* ── Main nav icon & label glow (icon glows on hover, NO background highlight) ── */
+.nav-rail-item-icon {
+  width: 24px;
+  height: 24px;
+  font-size: 24px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: color 0.18s ease, filter 0.18s ease;
+  overflow: visible;
+  filter: none;
+}
+
+.nav-rail-item-label {
+  font-size: 11px;
+  text-align: center;
+  line-height: 1.2;
+  white-space: pre-line;
+  transition: color 0.18s ease;
+}
+
+/* On item hover / focus: subtle, soft glow on the icon only, never the background */
+.nav-rail-item-wrapper:hover .nav-rail-item-icon,
+.nav-rail-item-wrapper:focus-within .nav-rail-item-icon {
+  color: var(--nav-rail-color-primary, #1890ff) !important;
+  filter: drop-shadow(0 0 3px rgba(24, 144, 255, 0.4));
+  filter: drop-shadow(0 0 3px color-mix(in srgb, var(--nav-rail-glow, #1890ff) 45%, transparent));
+}
+
+.nav-rail-item-wrapper:hover .nav-rail-item-label,
+.nav-rail-item-wrapper:focus-within .nav-rail-item-label {
+  color: var(--nav-rail-color-primary, #1890ff) !important;
+}
+
+/* ── Pin affordance ────────────────────────────────────────────────────────
+   Always in DOM for accessibility. Shown when:
+   - item is active or pinned (.nav-rail-pin-visible)
+   - item is hovered or focused (.nav-rail-item-wrapper:hover / :focus-within)
+*/
+.nav-rail-pin-affordance {
   opacity: 0;
   pointer-events: none;
-  transition: opacity 0.15s;
+  transition: opacity 0.15s ease, filter 0.15s ease, color 0.15s ease;
+  overflow: visible;
+  filter: none;
 }
 
-.nav-rail-item-wrapper:hover .nav-rail-affordance,
-.nav-rail-item-wrapper:focus-within .nav-rail-affordance,
-.nav-rail-affordance.nav-rail-affordance-visible {
+.nav-rail-item-wrapper:hover .nav-rail-pin-affordance,
+.nav-rail-item-wrapper:focus-within .nav-rail-pin-affordance,
+.nav-rail-pin-affordance.nav-rail-pin-visible {
   opacity: 1;
   pointer-events: auto;
 }
+
+/* Soft glow and highlight on pin icon when hovered directly */
+.nav-rail-pin-affordance:hover,
+.nav-rail-pin-affordance:focus-visible {
+  filter: drop-shadow(0 0 2.5px rgba(24, 144, 255, 0.4));
+  filter: drop-shadow(0 0 2.5px color-mix(in srgb, var(--nav-rail-glow, #1890ff) 45%, transparent));
+}
+
+.nav-rail-pin-affordance:hover .anticon,
+.nav-rail-pin-affordance:focus-visible .anticon {
+  color: var(--nav-rail-color-primary, #1890ff) !important;
+}

From ddff1bcd56469c9f08a5f3fd6a25ce5ae2224607 Mon Sep 17 00:00:00 2001
From: ThishakaM <thishanka.methshan@gmail.com>
Date: Wed, 14 Oct 2026 15:08:08 +0530
Subject: [PATCH 4/7] fix(nav-rail): un-nest pin control and preserve dnd-kit
 keyboard listeners

- Move the pin affordance out of the sortable item element to avoid nested interactive controls while preserving its styling, visual layout, and keyboard accessibility.
- Update handleKeyDown to invoke listeners.onKeyDown from dnd-kit and check defaultPrevented to prevent keyboard drag activations from triggering item selection.
- Remove the unused pinInteracting ref and unused useRef import while retaining event propagation stops on the pin control.
---
 .../src/components/nav-rail/NavRailItem.tsx   | 72 ++++++++++---------
 1 file changed, 40 insertions(+), 32 deletions(-)

diff --git a/worklenz-frontend/src/components/nav-rail/NavRailItem.tsx b/worklenz-frontend/src/components/nav-rail/NavRailItem.tsx
index 20f5ac635..4d127d6bc 100644
--- a/worklenz-frontend/src/components/nav-rail/NavRailItem.tsx
+++ b/worklenz-frontend/src/components/nav-rail/NavRailItem.tsx
@@ -1,4 +1,4 @@
-import React, { useMemo, useCallback, useRef } from 'react';
+import React, { useMemo, useCallback } from 'react';
 import { useSortable } from '@dnd-kit/sortable';
 import { CSS } from '@dnd-kit/utilities';
 import { Tooltip, theme } from '@/shared/antd-imports';
@@ -20,9 +20,7 @@ interface NavRailItemProps {
 }
 
 // Fires `action` on Enter/Space, mirroring a native <button>'s keyboard
-// behavior for the plain <span role="button"> affordances below (real
-// <button> elements can't nest inside the outer item, which is itself
-// interactive — nested buttons are invalid HTML).
+// behavior for the plain <span role="button"> affordances below.
 const activateOnKey = (action: () => void) => (e: React.KeyboardEvent) => {
   if (e.key === 'Enter' || e.key === ' ') {
     e.preventDefault();
@@ -48,10 +46,6 @@ const NavRailItem: React.FC<NavRailItemProps> = ({
     disabled: !draggable,
   });
 
-  // Track whether we're interacting with the pin so we can suppress the
-  // item's own click/drag when the user intends to click the pin.
-  const pinInteracting = useRef(false);
-
   const clickDisabled = item.soon && !item.soonClickable;
 
   const tooltipTitle = isPinned ? `${label} (Pinned)` : label;
@@ -146,15 +140,28 @@ const NavRailItem: React.FC<NavRailItemProps> = ({
   }, [clickDisabled, onSelect]);
 
   const handleKeyDown = useCallback(
-    (e: React.KeyboardEvent) => activateOnKey(handleSelect)(e),
-    [handleSelect],
+    (e: React.KeyboardEvent) => {
+      // First invoke dnd-kit's onKeyDown listener if present
+      listeners?.onKeyDown?.(e);
+
+      // If dnd-kit handled the key (e.g. Space to initiate keyboard drag), don't trigger selection
+      if (e.isDefaultPrevented() || e.defaultPrevented) {
+        return;
+      }
+
+      // Keyboard activation for selection on Enter or Space
+      if (e.key === 'Enter' || e.key === ' ') {
+        e.preventDefault();
+        handleSelect();
+      }
+    },
+    [listeners, handleSelect],
   );
 
-  // Pin click: stop propagation so the item click / DnD listeners don't fire.
+  // Pin click: stop propagation so surrounding elements don't trigger.
   const handlePinClick = useCallback(
     (e: React.MouseEvent) => {
       e.stopPropagation();
-      pinInteracting.current = false;
       onTogglePin();
     },
     [onTogglePin],
@@ -171,11 +178,31 @@ const NavRailItem: React.FC<NavRailItemProps> = ({
   // Intercept DnD pointer events on the pin so they don't start a drag.
   const handlePinPointerDown = useCallback((e: React.PointerEvent) => {
     e.stopPropagation();
-    pinInteracting.current = true;
   }, []);
 
   return (
     <div ref={setNodeRef} style={wrapperStyle} className="nav-rail-item-wrapper">
+      {/* ── Pin affordance (top-left, visible when active/pinned or hovered) ──
+          Positioned as a sibling outside the interactive sortable item to avoid
+          nested interactive controls while remaining independently keyboard-accessible. */}
+      <span
+        role="button"
+        tabIndex={0}
+        aria-label={isPinned ? 'Unpin this view' : 'Pin as default view'}
+        title={isPinned ? 'Pinned as default' : 'Pin as default view'}
+        className={`nav-rail-pin-affordance ${active || isPinned ? 'nav-rail-pin-visible' : ''}`}
+        onClick={handlePinClick}
+        onKeyDown={handlePinKeyDown}
+        onPointerDown={handlePinPointerDown}
+        style={pinWrapperStyle}
+      >
+        {isPinned ? (
+          <PushpinFilled style={pinIconStyle} />
+        ) : (
+          <PushpinOutlined style={pinIconStyle} />
+        )}
+      </span>
+
       <Tooltip
         title={tooltipTitle}
         placement="right"
@@ -192,25 +219,6 @@ const NavRailItem: React.FC<NavRailItemProps> = ({
           onKeyDown={handleKeyDown}
           style={buttonStyle}
         >
-          {/* ── Pin affordance (top-left, visible when active/pinned or hovered) ── */}
-          <span
-            role="button"
-            tabIndex={0}
-            aria-label={isPinned ? 'Unpin this view' : 'Pin as default view'}
-            title={isPinned ? 'Pinned as default' : 'Pin as default view'}
-            className={`nav-rail-pin-affordance ${active || isPinned ? 'nav-rail-pin-visible' : ''}`}
-            onClick={handlePinClick}
-            onKeyDown={handlePinKeyDown}
-            onPointerDown={handlePinPointerDown}
-            style={pinWrapperStyle}
-          >
-            {isPinned ? (
-              <PushpinFilled style={pinIconStyle} />
-            ) : (
-              <PushpinOutlined style={pinIconStyle} />
-            )}
-          </span>
-
           {/* ── Unread badge ───────────────────────────────────────────────── */}
           {typeof badgeValue === 'number' && badgeValue > 0 && (
             <span

From c867812aa9a374b18d34dfd377de2a57c5d45491 Mon Sep 17 00:00:00 2001
From: ThishakaM <thishanka.methshan@gmail.com>
Date: Thu, 15 Oct 2026 12:34:34 +0530
Subject: [PATCH 5/7] fix(nav-rail): separate navigation activation from
 keyboard drag controls

- Remove dnd-kit onKeyDown listener from the navigation item button so pressing Enter or Space always activates selection instead of initiating a drag.
- Provide a dedicated reorder handle affordance as a distinct focusable control to activate keyboard reordering via KeyboardSensor.
- Position the reorder handle dynamically at the bottom-right when an unread badge or Soon tag is present, preventing visual and hit-test overlaps.
- Retain whole-item mouse dragging by binding onPointerDown to the navigation item with the 4px distance constraint.
- Keep the pin, navigation item, and reorder handle as siblings to prevent nested interactive controls.
---
 .../src/components/nav-rail/NavRailItem.tsx   | 29 +++++++++----------
 .../src/components/nav-rail/nav-rail.css      | 16 ++++++++++
 2 files changed, 30 insertions(+), 15 deletions(-)

diff --git a/worklenz-frontend/src/components/nav-rail/NavRailItem.tsx b/worklenz-frontend/src/components/nav-rail/NavRailItem.tsx
index 4d127d6bc..8323a90ed 100644
--- a/worklenz-frontend/src/components/nav-rail/NavRailItem.tsx
+++ b/worklenz-frontend/src/components/nav-rail/NavRailItem.tsx
@@ -41,7 +41,13 @@ const NavRailItem: React.FC<NavRailItemProps> = ({
   onTogglePin,
 }) => {
   const { token } = theme.useToken();
-  const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({
+  const {
+    listeners,
+    setNodeRef,
+    transform,
+    transition,
+    isDragging,
+  } = useSortable({
     id: item.key,
     disabled: !draggable,
   });
@@ -139,23 +145,15 @@ const NavRailItem: React.FC<NavRailItemProps> = ({
     if (!clickDisabled) onSelect();
   }, [clickDisabled, onSelect]);
 
+  // Keep navigation activation strictly on Enter or Space for the item itself.
   const handleKeyDown = useCallback(
     (e: React.KeyboardEvent) => {
-      // First invoke dnd-kit's onKeyDown listener if present
-      listeners?.onKeyDown?.(e);
-
-      // If dnd-kit handled the key (e.g. Space to initiate keyboard drag), don't trigger selection
-      if (e.isDefaultPrevented() || e.defaultPrevented) {
-        return;
-      }
-
-      // Keyboard activation for selection on Enter or Space
       if (e.key === 'Enter' || e.key === ' ') {
         e.preventDefault();
         handleSelect();
       }
     },
-    [listeners, handleSelect],
+    [handleSelect],
   );
 
   // Pin click: stop propagation so surrounding elements don't trigger.
@@ -183,8 +181,7 @@ const NavRailItem: React.FC<NavRailItemProps> = ({
   return (
     <div ref={setNodeRef} style={wrapperStyle} className="nav-rail-item-wrapper">
       {/* ── Pin affordance (top-left, visible when active/pinned or hovered) ──
-          Positioned as a sibling outside the interactive sortable item to avoid
-          nested interactive controls while remaining independently keyboard-accessible. */}
+          Positioned as an independent sibling outside the interactive sortable item. */}
       <span
         role="button"
         tabIndex={0}
@@ -203,6 +200,7 @@ const NavRailItem: React.FC<NavRailItemProps> = ({
         )}
       </span>
 
+      {/* ── Navigation item (navigates on click/Enter/Space; whole item supports mouse drag) ── */}
       <Tooltip
         title={tooltipTitle}
         placement="right"
@@ -211,12 +209,12 @@ const NavRailItem: React.FC<NavRailItemProps> = ({
         {...tooltipProps}
       >
         <div
-          {...attributes}
-          {...listeners}
+          role="button"
           tabIndex={clickDisabled ? -1 : 0}
           aria-disabled={clickDisabled}
           onClick={handleSelect}
           onKeyDown={handleKeyDown}
+          onPointerDown={draggable && listeners ? e => listeners.onPointerDown(e) : undefined}
           style={buttonStyle}
         >
           {/* ── Unread badge ───────────────────────────────────────────────── */}
@@ -290,6 +288,7 @@ const NavRailItem: React.FC<NavRailItemProps> = ({
           )}
         </div>
       </Tooltip>
+
     </div>
   );
 };
diff --git a/worklenz-frontend/src/components/nav-rail/nav-rail.css b/worklenz-frontend/src/components/nav-rail/nav-rail.css
index 79100cf71..a9b3e9895 100644
--- a/worklenz-frontend/src/components/nav-rail/nav-rail.css
+++ b/worklenz-frontend/src/components/nav-rail/nav-rail.css
@@ -75,3 +75,19 @@
 .nav-rail-pin-affordance:focus-visible .anticon {
   color: var(--nav-rail-color-primary, #1890ff) !important;
 }
+
+/* ── Reorder handle affordance ─────────────────────────────────────────────
+   Always in DOM for accessibility. Shown when item is hovered or focused. */
+.nav-rail-affordance {
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 0.15s ease;
+}
+
+.nav-rail-item-wrapper:hover .nav-rail-affordance,
+.nav-rail-item-wrapper:focus-within .nav-rail-affordance,
+.nav-rail-affordance.nav-rail-affordance-visible {
+  opacity: 1;
+  pointer-events: auto;
+}
+

From 3230e1cd6b643f3a66045d3ed32191b344ec13ae Mon Sep 17 00:00:00 2001
From: ThishakaM <thishanka.methshan@gmail.com>
Date: Fri, 16 Oct 2026 15:34:15 +0530
Subject: [PATCH 6/7] fix(nav-rail): restore keyboard-accessible item
 reordering
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Add a separate focusable sortable control wired to dnd-kit’s KeyboardSensor,
with localized instructions for picking up and moving items. Keep Enter/Space
on the navigation item dedicated to navigation, and leave pin behavior unchanged.
Remove the reorder glyph while retaining the accessible control.
---
 .../src/components/nav-rail/NavRailItem.tsx   | 39 +++++++++++++++++++
 1 file changed, 39 insertions(+)

diff --git a/worklenz-frontend/src/components/nav-rail/NavRailItem.tsx b/worklenz-frontend/src/components/nav-rail/NavRailItem.tsx
index 8323a90ed..a787c47e3 100644
--- a/worklenz-frontend/src/components/nav-rail/NavRailItem.tsx
+++ b/worklenz-frontend/src/components/nav-rail/NavRailItem.tsx
@@ -1,6 +1,7 @@
 import React, { useMemo, useCallback } from 'react';
 import { useSortable } from '@dnd-kit/sortable';
 import { CSS } from '@dnd-kit/utilities';
+import { useTranslation } from 'react-i18next';
 import { Tooltip, theme } from '@/shared/antd-imports';
 import { PushpinFilled, PushpinOutlined } from '@/shared/antd-imports';
 import type { NavItem } from '@/features/navigation/nav-registry.types';
@@ -41,9 +42,12 @@ const NavRailItem: React.FC<NavRailItemProps> = ({
   onTogglePin,
 }) => {
   const { token } = theme.useToken();
+  const { t } = useTranslation('home');
   const {
+    attributes,
     listeners,
     setNodeRef,
+    setActivatorNodeRef,
     transform,
     transition,
     isDragging,
@@ -178,6 +182,18 @@ const NavRailItem: React.FC<NavRailItemProps> = ({
     e.stopPropagation();
   }, []);
 
+  const handleReorderKeyDown = useCallback(
+    (e: React.KeyboardEvent<HTMLButtonElement>) => {
+      listeners?.onKeyDown?.(e);
+    },
+    [listeners],
+  );
+
+  const reorderLabel = t('customize.dragHandle', {
+    defaultValue: 'Reorder {{name}}. Press space to pick up, then use the arrow keys.',
+    name: typeof item.label === 'string' ? item.label : item.label.defaultValue,
+  });
+
   return (
     <div ref={setNodeRef} style={wrapperStyle} className="nav-rail-item-wrapper">
       {/* ── Pin affordance (top-left, visible when active/pinned or hovered) ──
@@ -200,6 +216,29 @@ const NavRailItem: React.FC<NavRailItemProps> = ({
         )}
       </span>
 
+      {draggable && (
+        <button
+          ref={setActivatorNodeRef}
+          type="button"
+          {...attributes}
+          aria-label={reorderLabel}
+          title={reorderLabel}
+          className="nav-rail-affordance"
+          onKeyDown={handleReorderKeyDown}
+          style={{
+            ...pinWrapperStyle,
+            left: 'auto',
+            right: 4,
+            border: 'none',
+            padding: 0,
+            background: 'transparent',
+            color: isDark ? 'rgba(255,255,255,.40)' : 'rgba(0,0,0,.35)',
+            fontSize: 10,
+            cursor: 'grab',
+          }}
+        />
+      )}
+
       {/* ── Navigation item (navigates on click/Enter/Space; whole item supports mouse drag) ── */}
       <Tooltip
         title={tooltipTitle}

From cd7269628717ebc93c166bd6ad871b149d200906 Mon Sep 17 00:00:00 2001
From: chamikaJ <chamika@ceydigital.com>
Date: Mon, 19 Oct 2026 11:15:27 +0530
Subject: [PATCH 7/7] fix(nav-rail): keep keyboard reorder control from
 covering badge and Soon tag

---
 .../src/components/nav-rail/NavRailItem.tsx     |  2 ++
 .../src/components/nav-rail/nav-rail.css        | 17 ++++++++++++-----
 2 files changed, 14 insertions(+), 5 deletions(-)

diff --git a/worklenz-frontend/src/components/nav-rail/NavRailItem.tsx b/worklenz-frontend/src/components/nav-rail/NavRailItem.tsx
index a787c47e3..cfd91e92f 100644
--- a/worklenz-frontend/src/components/nav-rail/NavRailItem.tsx
+++ b/worklenz-frontend/src/components/nav-rail/NavRailItem.tsx
@@ -227,7 +227,9 @@ const NavRailItem: React.FC<NavRailItemProps> = ({
           onKeyDown={handleReorderKeyDown}
           style={{
             ...pinWrapperStyle,
+            top: 'auto',
             left: 'auto',
+            bottom: 4,
             right: 4,
             border: 'none',
             padding: 0,
diff --git a/worklenz-frontend/src/components/nav-rail/nav-rail.css b/worklenz-frontend/src/components/nav-rail/nav-rail.css
index a9b3e9895..43b1b96a1 100644
--- a/worklenz-frontend/src/components/nav-rail/nav-rail.css
+++ b/worklenz-frontend/src/components/nav-rail/nav-rail.css
@@ -77,17 +77,24 @@
 }
 
 /* ── Reorder handle affordance ─────────────────────────────────────────────
-   Always in DOM for accessibility. Shown when item is hovered or focused. */
+   Keyboard-only reorder control (mouse users drag the whole item). It never
+   takes pointer events, so it can't cover the unread badge or Soon tag; it is
+   revealed only while it has keyboard focus. */
 .nav-rail-affordance {
   opacity: 0;
   pointer-events: none;
   transition: opacity 0.15s ease;
 }
 
-.nav-rail-item-wrapper:hover .nav-rail-affordance,
-.nav-rail-item-wrapper:focus-within .nav-rail-affordance,
-.nav-rail-affordance.nav-rail-affordance-visible {
+.nav-rail-affordance:focus-visible {
   opacity: 1;
-  pointer-events: auto;
+  outline: 2px solid var(--nav-rail-color-primary, #1890ff);
+  outline-offset: 1px;
+}
+
+.nav-rail-affordance:focus-visible::before {
+  content: '\22EE\22EE';
+  letter-spacing: -2px;
+  line-height: 1;
 }