spacedriveapp · StarbirdTech · Feb 8, 2026
diff --git a/packages/interface/src/components/Inspector/variants/LocationInspector.tsx b/packages/interface/src/components/Inspector/variants/LocationInspector.tsx
@@ -24,6 +24,7 @@ import { useState } from "react";
 import { useForm } from "react-hook-form";
 import { useQueryClient } from "@tanstack/react-query";
 import { useLocation, useNavigate } from "react-router-dom";
+import { shouldNavigate } from "../../../util/navigation";
 import {
 	InfoRow,
 	Section,
@@ -172,7 +173,8 @@ function OverviewTab({ location }: { location: Location }) {
 				{isOverview && (
 					<TopBarButton
 						icon={FolderOpen}
-						onClick={() => {
+						onClick={(e: React.MouseEvent) => {
+							if (!shouldNavigate(e)) return;
 							const encodedPath = encodeURIComponent(JSON.stringify(location.sd_path));
 							navigate(`/explorer?path=${encodedPath}`);
 						}}

diff --git a/packages/interface/src/components/JobManager/JobManagerPopover.tsx b/packages/interface/src/components/JobManager/JobManagerPopover.tsx
@@ -3,6 +3,7 @@ import { Popover, usePopover, TopBarButton } from "@sd/ui";
 import clsx from "clsx";
 import { useState, useEffect } from "react";
 import { useNavigate } from "react-router-dom";
+import { shouldNavigate } from "../../util/navigation";
 import { motion, AnimatePresence } from "framer-motion";
 import { JobList } from "./components/JobList";
 import { useJobsContext } from "./hooks/JobsContext";
@@ -75,7 +76,7 @@ export function JobManagerPopover({ className }: JobManagerPopoverProps) {
           {/* Expand to full screen button */}
           <TopBarButton
             icon={ArrowsOut}
-            onClick={() => navigate("/jobs")}
+            onClick={(e: React.MouseEvent) => { if (!shouldNavigate(e)) return; navigate("/jobs"); }}
             title="Open full jobs screen"
           />
 

diff --git a/packages/interface/src/components/JobManager/JobsScreen/index.tsx b/packages/interface/src/components/JobManager/JobsScreen/index.tsx
@@ -2,6 +2,7 @@ import { X, FunnelSimple } from "@phosphor-icons/react";
 import { TopBarButton } from "@sd/ui";
 import { useState } from "react";
 import { useNavigate } from "react-router-dom";
+import { shouldNavigate } from "../../../util/navigation";
 import { useJobsContext } from "../hooks/JobsContext";
 import { JobRow } from "./JobRow";
 
@@ -58,7 +59,7 @@ export function JobsScreen() {
 						{/* Back button */}
 						<TopBarButton
 							icon={X}
-							onClick={() => navigate(-1)}
+							onClick={(e: React.MouseEvent) => { if (!shouldNavigate(e)) return; navigate(-1); }}
 							title="Go back"
 						/>
 					</div>

diff --git a/packages/interface/src/components/SpacesSidebar/SpaceItem.tsx b/packages/interface/src/components/SpacesSidebar/SpaceItem.tsx
@@ -1,4 +1,5 @@
 import { useNavigate } from "react-router-dom";
+import { shouldNavigate } from "../../util/navigation";
 import clsx from "clsx";
 import type { SpaceItem as SpaceItemType } from "@sd/ts-client";
 import { Thumb } from "../../routes/explorer/File/Thumb";
@@ -236,6 +237,7 @@ export function SpaceItem({
 
 	// Event handlers
 	const handleClick = (e: React.MouseEvent) => {
+		if (!shouldNavigate(e)) return;
 		if (effectiveOverrides.onClick) {
 			effectiveOverrides.onClick(e);
 		} else if (path) {

diff --git a/packages/interface/src/components/SpacesSidebar/TagsGroup.tsx b/packages/interface/src/components/SpacesSidebar/TagsGroup.tsx
@@ -1,6 +1,6 @@
 import { Tag as TagIcon, Plus, CaretRight } from '@phosphor-icons/react';
 import { useState } from 'react';
-import { useNavigate } from 'react-router-dom';
+import { NavLink, useNavigate } from 'react-router-dom';
 import clsx from 'clsx';
 import { useNormalizedQuery, useLibraryMutation } from '../../contexts/SpacedriveContext';
 import type { Tag } from '@sd/ts-client';
@@ -20,25 +20,23 @@ interface TagItemProps {
 }
 
 function TagItem({ tag, depth = 0 }: TagItemProps) {
-	const navigate = useNavigate();
 	const { loadPreferencesForSpaceItem } = useExplorer();
 	const [isExpanded, setIsExpanded] = useState(false);
 
 	// TODO: Fetch children when hierarchy is implemented
 	const children: Tag[] = [];
 	const hasChildren = children.length > 0;
 
-	const handleClick = () => {
-		loadPreferencesForSpaceItem(`tag:${tag.id}`);
-		navigate(`/tag/${tag.id}`);
-	};
-
 	return (
 		<div>
-			<button
-				onClick={handleClick}
-				className={clsx(
-					'flex w-full items-center gap-2 rounded-lg px-2 py-1.5 text-sm font-medium text-sidebar-ink-dull hover:bg-sidebar-box hover:text-sidebar-ink transition-colors',
+			<NavLink
+				to={`/tag/${tag.id}`}
+				onClick={() => loadPreferencesForSpaceItem(`tag:${tag.id}`)}
+				className={({ isActive }) => clsx(
+					'flex w-full items-center gap-2 rounded-lg px-2 py-1.5 text-sm font-medium transition-colors',
+					isActive
+						? 'bg-sidebar-selected/30 text-sidebar-ink'
+						: 'text-sidebar-ink-dull hover:bg-sidebar-box hover:text-sidebar-ink',
 					tag.privacy_level === 'Archive' && 'opacity-50',
 					tag.privacy_level === 'Hidden' && 'opacity-25'
 				)}
@@ -54,6 +52,7 @@ function TagItem({ tag, depth = 0 }: TagItemProps) {
 							isExpanded && 'rotate-90'
 						)}
 						onClick={(e) => {
+							e.preventDefault();
 							e.stopPropagation();
 							setIsExpanded(!isExpanded);
 						}}
@@ -75,7 +74,7 @@ function TagItem({ tag, depth = 0 }: TagItemProps) {
 
 				{/* File count badge (if available) */}
 				{/* TODO: Add file count when available from backend */}
-			</button>
+			</NavLink>
 
 			{/* Children (recursive) */}
 			{isExpanded &&

diff --git a/packages/interface/src/components/SpacesSidebar/index.tsx b/packages/interface/src/components/SpacesSidebar/index.tsx
@@ -25,6 +25,7 @@ import { useDroppable, useDndContext } from "@dnd-kit/core";
 import { SortableContext, verticalListSortingStrategy, useSortable } from "@dnd-kit/sortable";
 import { CSS } from "@dnd-kit/utilities";
 import { useNavigate } from "react-router-dom";
+import { shouldNavigate } from "../../util/navigation";
 
 // Wrapper that adds a space-level drop zone before each group and makes it sortable
 function SpaceGroupWithDropZone({
@@ -157,7 +158,7 @@ const SyncButton = memo(function SyncButton() {
 
           <TopBarButton
             icon={ArrowsOut}
-            onClick={() => navigate("/sync")}
+            onClick={(e: React.MouseEvent) => { if (!shouldNavigate(e)) return; navigate("/sync"); }}
             title="Open full sync monitor"
           />
 
@@ -263,7 +264,7 @@ const JobsButton = memo(function JobsButton({
 
           <TopBarButton
             icon={ArrowsOut}
-            onClick={() => navigate("/jobs")}
+            onClick={(e: React.MouseEvent) => { if (!shouldNavigate(e)) return; navigate("/jobs"); }}
             title="Open full jobs screen"
           />
 

diff --git a/packages/interface/src/components/SyncMonitor/SyncMonitorPopover.tsx b/packages/interface/src/components/SyncMonitor/SyncMonitorPopover.tsx
@@ -8,6 +8,7 @@ import { Popover, usePopover, TopBarButton } from "@sd/ui";
 import clsx from "clsx";
 import { useState, useEffect } from "react";
 import { useNavigate } from "react-router-dom";
+import { shouldNavigate } from "../../util/navigation";
 import { motion } from "framer-motion";
 import { PeerList } from "./components/PeerList";
 import { ActivityFeed } from "./components/ActivityFeed";
@@ -79,7 +80,7 @@ export function SyncMonitorPopover({ className }: SyncMonitorPopoverProps) {
 
 					<TopBarButton
 						icon={ArrowsOut}
-						onClick={() => navigate("/sync")}
+						onClick={(e: React.MouseEvent) => { if (!shouldNavigate(e)) return; navigate("/sync"); }}
 						title="Open full sync monitor"
 					/>
 

diff --git a/packages/interface/src/routes/explorer/Sidebar.tsx b/packages/interface/src/routes/explorer/Sidebar.tsx
@@ -1,5 +1,4 @@
 import { useState, useEffect } from "react";
-import { useNavigate, useLocation } from "react-router-dom";
 import clsx from "clsx";
 import {
   House,
@@ -26,14 +25,10 @@ export function Sidebar() {
   const client = useSpacedriveClient();
   const platform = usePlatform();
   const { data: libraries } = useLibraries();
-  const navigate = useNavigate();
-  const location = useLocation();
   const [currentLibraryId, setCurrentLibraryId] = useState<string | null>(
     () => client.getCurrentLibraryId(),
   );
 
-  const isActive = (path: string) => location.pathname === path;
-
   // Listen for library changes from client and update local state
   useEffect(() => {
     const handleLibraryChange = (newLibraryId: string) => {
@@ -141,25 +136,9 @@ export function Sidebar() {
 
           <div className="no-scrollbar mask-fade-out flex grow flex-col space-y-5 overflow-x-hidden overflow-y-scroll pb-10">
             <div className="space-y-0.5">
-              <SidebarItem
-                icon={Planet}
-                label="Overview"
-                active={isActive("/")}
-                weight={isActive("/") ? "fill" : "bold"}
-                onClick={() => navigate("/")}
-              />
-              <SidebarItem
-                icon={Clock}
-                label="Recents"
-                active={isActive("/recents")}
-                onClick={() => navigate("/recents")}
-              />
-              <SidebarItem
-                icon={Heart}
-                label="Favorites"
-                active={isActive("/favorites")}
-                onClick={() => navigate("/favorites")}
-              />
+              <SidebarItem icon={Planet} label="Overview" to="/" end />
+              <SidebarItem icon={Clock} label="Recents" to="/recents" />
+              <SidebarItem icon={Heart} label="Favorites" to="/favorites" />
             </div>
 
             <LocationsSection />