feat: implement navigation on mousedown (#459)

Author: letstri

.agents/skills/tamery-ui/patterns.md

@@ -16,6 +16,7 @@
 - **Copy**: kit `CopyButton` (copy→check morph); silent `copy(text)` when the morph is confirmation enough.
 - **Interactive icons — app-wide rule**: hover surface (`ghost` icon Button + `hover:bg-foreground/10`), icon `muted → foreground`, `Tooltip` naming the action. Toggles (pin/unpin) swap icon on button hover (`group/pin` + hidden/block pair). In cmdk rows, reveal via `group-data-selected/command-item:opacity-100` (keyboard too) and wrap the button in `CommandShortcut`. Reference: `ResourceRow` in `connections-list.tsx`. Upgrade bare icons whenever touching a file.
 - **Count badges**: absolute `-top-1.5 -right-1.5 h-4 min-w-4 rounded-full bg-primary text-2xs`; Button needs `relative overflow-visible`.
+- **Nav fires on mousedown, not click** — for instant (Linear-style) feel, route navigation activates on press. **Always import `Link` from `~/components/link.tsx`, never from `@tanstack/react-router`** (the two wrappers `SidebarLink`/`ConnectionResourceLink` already route through it). It's a `createLink` wrapper whose anchor fires a synthetic `.click()` on mousedown, then swallows the real follow-up click in the capture phase — telling the two apart by `e.detail` (synthetic `.click()` and keyboard Enter are `detail 0`; a real mouse click is `detail >= 1`). Guards preserve cmd/ctrl/shift/alt-click (open-in-new-tab) and skip `target=_blank`. **Menus are the exception** — base-ui `DropdownMenuItem render={<Link/>}` must pass `activateOn="click"` to keep native mouseup activation (macOS menu semantics). For imperative press-nav on plain buttons/tabs (not `<Link>`), spread `pressNavProps(fire)` from `~/lib/press-nav.ts` (`onMouseDown` on plain press + `onClick` keyboard fallback via `detail 0`); if the button has a nested click target (e.g. a tab's close ✕), give that child `onMouseDown={e => e.stopPropagation()}` so the press doesn't navigate first. Reference: `tab-bar.tsx` `Tab`.
 - **Sidebar-style nav rows** (definitions nav, dialog rails): `SidebarLink`/`SidebarButton` from `~/components/sidebar-link.tsx` — `h-7 rounded-md text-sm`, solid `bg-primary` active.
 - **Unified filter field** (`table/-components/toolbar/filter-search-bar.tsx`): input-styled container (`min-h-8 flex-wrap bg-input rounded-xl`, `has-[input:focus]` ring) with chips inline + bare `CommandPrimitive.Input`. Suggestion panel opens upward (`absolute bottom-full mb-2 bg-popover rounded-xl p-1`, kit `CommandList` in unstyled `CommandPrimitive`); `onMouseDown preventDefault` keeps focus. Stage machine column → operator → value; pending chip styled like committed chips minus eye/✕. Value stage adds "Suggested values" (enums via `column.availableValues`, booleans true/false) — pick applies immediately, or toggles into the comma list for `isArray`. Backspace on empty steps back / pops last chip; ⌘F focuses; Escape cancels stage then blurs. Chips are `h-5 bg-[color-mix(in_oklch,var(--input),var(--foreground)_4%)] shadow-2xs` (search icon gets `mr-1` so chips/text don't crowd it) — the foreground-mix over the field's own surface reads slightly darker in light and slightly lighter in dark (`bg-background` was rejected: darker than the field in dark mode).
 - **Command palette** (`routes/-components/actions-center.tsx` + kit `CommandDialog`): shell is `top-[16svh] translate-y-0` with `max-h-[min(35rem,calc(84svh-2rem))] flex flex-col sm:max-w-xl` so it never overflows short viewports; surface is `bg-background` (from DialogContent), inner `Command` gets `bg-transparent p-0 min-h-0 flex-1`. Header is a borderless large input row (`border-b px-4`, search icon + bare `CommandPrimitive.Input` `h-12 text-base`), not the boxed kit `CommandInput`. List: `flex-1 max-h-none scroll-fade scroll-py-2 p-1` (kit default `max-h-72` must be overridden). Footer: `border-t px-4 py-2 text-2xs` kbd hints. Item icons rely on kit auto `size-4` — pass `text-muted-foreground` only.

apps/app/src/components/link.tsx

@@ -0,0 +1,48 @@
+// oxlint-disable jsx-a11y/anchor-has-content, jsx-a11y/no-static-element-interactions
+import type { LinkComponent } from '@tanstack/react-router'
+import { createLink } from '@tanstack/react-router'
+import type { ComponentProps } from 'react'
+import { forwardRef, useRef } from 'react'
+
+import { isPlainPress } from '~/lib/press-nav'
+
+interface PressAnchorProps extends ComponentProps<'a'> {
+  activateOn?: 'press' | 'click'
+}
+
+const PressAnchor = forwardRef<HTMLAnchorElement, PressAnchorProps>(
+  ({ activateOn = 'press', onMouseDown, onClickCapture, ...props }, ref) => {
+    const pressNavRef = useRef(false)
+
+    if (activateOn === 'click') {
+      return <a ref={ref} onMouseDown={onMouseDown} onClickCapture={onClickCapture} {...props} />
+    }
+
+    return (
+      <a
+        ref={ref}
+        {...props}
+        onMouseDown={e => {
+          onMouseDown?.(e)
+          if (e.defaultPrevented || !isPlainPress(e)) return
+          if (props.target && props.target !== '_self') return
+          pressNavRef.current = true
+          e.currentTarget.click()
+        }}
+        onClickCapture={e => {
+          onClickCapture?.(e)
+          if (e.detail === 0) return
+          if (pressNavRef.current) {
+            pressNavRef.current = false
+            e.preventDefault()
+            e.stopPropagation()
+          }
+        }}
+      />
+    )
+  },
+)
+
+const CreatedLink = createLink(PressAnchor)
+
+export const Link: LinkComponent<typeof PressAnchor> = props => <CreatedLink {...props} />

apps/app/src/components/sidebar-link.tsx

@@ -1,8 +1,9 @@
 import { cn } from '@tamery/ui/lib/utils'
 import type { LinkProps } from '@tanstack/react-router'
-import { Link } from '@tanstack/react-router'
 import type { ComponentProps } from 'react'
 
+import { Link } from '~/components/link'
+
 const baseClasses = `
   flex h-7 w-full cursor-default items-center gap-2 rounded-md px-2 text-sm
   text-foreground select-none

apps/app/src/entities/connection/components/connection-resource-link.tsx

@@ -1,13 +1,18 @@
 import type { LinkProps } from '@tanstack/react-router'
-import { Link } from '@tanstack/react-router'
 import type { ComponentProps } from 'react'
 
+import { Link } from '~/components/link'
+
 import { useConnectionResourceLinkParams } from '../hooks'
 
 export function ConnectionResourceLink({
   resourceId,
   ...props
-}: { resourceId: string } & Omit<LinkProps, 'to' | 'params' | 'search'> & ComponentProps<'a'>) {
+}: { resourceId: string; activateOn?: 'press' | 'click' } & Omit<
+  LinkProps,
+  'to' | 'params' | 'search'
+> &
+  ComponentProps<'a'>) {
   const params = useConnectionResourceLinkParams(resourceId)
   return <Link {...params} {...props} />
 }

apps/app/src/entities/connection/components/react-flow-node.tsx

@@ -10,10 +10,11 @@ import {
 import { Button } from '@tamery/ui/components/button'
 import { Tooltip, TooltipContent, TooltipTrigger } from '@tamery/ui/components/tooltip'
 import { cn } from '@tamery/ui/lib/utils'
-import { Link } from '@tanstack/react-router'
 import type { Edge, Node, NodeProps } from '@xyflow/react'
 import { Handle, Position } from '@xyflow/react'
 
+import { Link } from '~/components/link'
+
 import type { Column } from './table/cell'
 
 export type NodeType = Node<

apps/app/src/entities/connection/components/table/cell/cell-table.tsx

@@ -7,8 +7,9 @@ import { DEFAULT_COLUMN_WIDTH } from '@tamery/table/constants'
 import { Badge } from '@tamery/ui/components/badge'
 import { Button } from '@tamery/ui/components/button'
 import { useInfiniteQuery } from '@tanstack/react-query'
-import { getRouteApi, Link } from '@tanstack/react-router'
+import { getRouteApi } from '@tanstack/react-router'
 
+import { Link } from '~/components/link'
 import { resourceRowsQueryInfiniteOptions } from '~/entities/connection/queries'
 import { createTransformer } from '~/entities/connection/transformers'
 import { TableError } from '~/routes/_protected/connection/$resourceId/table/-components/table/table'

apps/app/src/lib/press-nav.ts

@@ -0,0 +1,16 @@
+import type { MouseEvent } from 'react'
+
+export function isPlainPress(e: MouseEvent) {
+  return e.button === 0 && !e.metaKey && !e.ctrlKey && !e.shiftKey && !e.altKey
+}
+
+export function pressNavProps(fire: () => void) {
+  return {
+    onMouseDown: (e: MouseEvent) => {
+      if (isPlainPress(e)) fire()
+    },
+    onClick: (e: MouseEvent) => {
+      if (e.detail === 0) fire()
+    },
+  }
+}

apps/app/src/routes/_protected/-components/connections-list.tsx

@@ -32,7 +32,6 @@ import { copy } from '@tamery/ui/lib/copy'
 import { cn } from '@tamery/ui/lib/utils'
 import { caseWhen, eq, useLiveQuery } from '@tanstack/react-db'
 import { useQuery } from '@tanstack/react-query'
-import { Link } from '@tanstack/react-router'
 import { type } from 'arktype'
 import { AnimatePresence, motion } from 'motion/react'
 import type { ComponentRef } from 'react'
@@ -43,6 +42,7 @@ import { toast } from 'sonner'
 
 import type { AppMenuNode } from '~/components/app-context-menu'
 import { AppContextMenu } from '~/components/app-context-menu'
+import { Link } from '~/components/link'
 import { useCollections } from '~/entities/collections'
 import type { Connection } from '~/entities/connection'
 import {

apps/app/src/routes/_protected/-components/last-opened-resources.tsx

@@ -2,9 +2,9 @@ import { RiCloseLine } from '@remixicon/react'
 import { Button } from '@tamery/ui/components/button'
 import { Tooltip, TooltipContent, TooltipTrigger } from '@tamery/ui/components/tooltip'
 import { eq, useLiveQuery } from '@tanstack/react-db'
-import { Link } from '@tanstack/react-router'
 import { useSubscription } from 'seitu/react'
 
+import { Link } from '~/components/link'
 import { useCollections } from '~/entities/collections'
 import { ConnectionIcon } from '~/entities/connection/components'
 import type { Connection, ConnectionResource } from '~/entities/connection/core'

apps/app/src/routes/_protected/-components/protected-titlebar.tsx

@@ -21,11 +21,12 @@ import {
 } from '@tamery/ui/components/dropdown-menu'
 import { Tooltip, TooltipContent, TooltipTrigger } from '@tamery/ui/components/tooltip'
 import { eq, useLiveQuery } from '@tanstack/react-db'
-import { Link, useNavigate, useParams } from '@tanstack/react-router'
+import { useNavigate, useParams } from '@tanstack/react-router'
 import type { ComponentRef } from 'react'
 import { useRef, useState } from 'react'
 import { useSubscription } from 'seitu/react'
 
+import { Link } from '~/components/link'
 import { TitleBar } from '~/components/title-bar'
 import { UpdateButton } from '~/components/update-button'
 import { useCollections } from '~/entities/collections'
@@ -84,7 +85,7 @@ function ConnectionSubMenu({
         {resources.map(resource => (
           <DropdownMenuItem
             key={resource.id}
-            render={<ConnectionResourceLink resourceId={resource.id} />}
+            render={<ConnectionResourceLink resourceId={resource.id} activateOn="click" />}
           >
             <span data-mask className="truncate">
               {resource.name || CONNECTION_RESOURCE_ROOT_LABEL}
@@ -154,7 +155,7 @@ function ConnectionsDropdown({
           )
         })}
         <DropdownMenuSeparator />
-        <DropdownMenuItem render={<Link to="/create" />}>
+        <DropdownMenuItem render={<Link to="/create" activateOn="click" />}>
           <RiAddLine className="size-4 shrink-0" />
           Add new connection
         </DropdownMenuItem>
@@ -184,7 +185,7 @@ function ResourcesDropdown({
         {resources.map(resource => (
           <DropdownMenuItem
             key={resource.id}
-            render={<ConnectionResourceLink resourceId={resource.id} />}
+            render={<ConnectionResourceLink resourceId={resource.id} activateOn="click" />}
           >
             <span data-mask className="truncate">
               {resource.name || CONNECTION_RESOURCE_ROOT_LABEL}