fix: update routing in settings and onboarding components to use 'tab' query parameter instead of 'section' for improved navigation consistency

surfsense_web/components/assistant-ui/connector-popup.tsx

@@ -379,7 +379,7 @@ export const ConnectorIndicator: FC = () => {
 														: "You need to configure a Document Summary LLM before adding connectors. This LLM is used to process and summarize documents from your connected sources."}
 												</p>
 												<Button asChild size="sm" variant="outline">
-													<Link href={`/dashboard/${searchSpaceId}/settings?section=models`}>
+													<Link href={`/dashboard/${searchSpaceId}/settings?tab=models`}>
 														<Settings className="mr-2 h-4 w-4" />
 														Go to Settings
 													</Link>

surfsense_web/components/assistant-ui/document-upload-popup.tsx

@@ -158,7 +158,7 @@ const DocumentUploadPopupContent: FC<{
 											: "You need to configure a Document Summary LLM before uploading files. This LLM is used to process and summarize your uploaded documents."}
 									</p>
 									<Button asChild size="sm" variant="outline">
-										<Link href={`/dashboard/${searchSpaceId}/settings?section=models`}>
+										<Link href={`/dashboard/${searchSpaceId}/settings?tab=models`}>
 											<Settings className="mr-2 h-4 w-4" />
 											Go to Settings
 										</Link>

surfsense_web/components/layout/providers/LayoutDataProvider.tsx

@@ -309,7 +309,7 @@ export function LayoutDataProvider({ searchSpaceId, children }: LayoutDataProvid
 
 	const handleSearchSpaceSettings = useCallback(
 		(space: SearchSpace) => {
-			router.push(`/dashboard/${space.id}/settings?section=general`);
+			router.push(`/dashboard/${space.id}/settings?tab=general`);
 		},
 		[router]
 	);
@@ -478,7 +478,7 @@ export function LayoutDataProvider({ searchSpaceId, children }: LayoutDataProvid
 	);
 
 	const handleSettings = useCallback(() => {
-		router.push(`/dashboard/${searchSpaceId}/settings?section=general`);
+		router.push(`/dashboard/${searchSpaceId}/settings?tab=general`);
 	}, [router, searchSpaceId]);
 
 	const handleManageMembers = useCallback(() => {

surfsense_web/components/new-chat/chat-share-button.tsx

@@ -148,7 +148,7 @@ export function ChatShareButton({ thread, onVisibilityChange, className }: ChatS
 						<button
 							type="button"
 							onClick={() =>
-								router.push(`/dashboard/${params.search_space_id}/settings?section=public-links`)
+								router.push(`/dashboard/${params.search_space_id}/settings?tab=public-links`)
 							}
 							className="flex items-center justify-center h-8 w-8 rounded-md bg-muted/50 hover:bg-muted transition-colors"
 						>

surfsense_web/components/ui/animated-tabs.tsx

@@ -79,6 +79,29 @@ const XScrollable = forwardRef<
   const dragging = useRef(false)
   const startX = useRef(0)
   const startScrollLeft = useRef(0)
+  const [scrollPos, setScrollPos] = useState<"start" | "middle" | "end">("start")
+
+  const updateScrollPos = useCallback(() => {
+    const el = scrollRef.current
+    if (!el) return
+    const canScroll = el.scrollWidth > el.clientWidth + 1
+    if (!canScroll) {
+      setScrollPos("start")
+      return
+    }
+    const atStart = el.scrollLeft <= 2
+    const atEnd = el.scrollWidth - el.scrollLeft - el.clientWidth <= 2
+    setScrollPos(atStart ? "start" : atEnd ? "end" : "middle")
+  }, [])
+
+  useEffect(() => {
+    updateScrollPos()
+    const el = scrollRef.current
+    if (!el) return
+    const ro = new ResizeObserver(updateScrollPos)
+    ro.observe(el)
+    return () => ro.disconnect()
+  }, [updateScrollPos])
 
   const onMouseDown = (e: React.MouseEvent) => {
     if (!scrollRef.current) return
@@ -106,6 +129,14 @@ const XScrollable = forwardRef<
     }
   }
 
+  const handleScroll = useCallback(() => {
+    updateScrollPos()
+  }, [updateScrollPos])
+
+  const maskStart = scrollPos === "start" ? "black" : "transparent"
+  const maskEnd = scrollPos === "end" ? "black" : "transparent"
+  const maskImage = `linear-gradient(to right, ${maskStart}, black 24px, black calc(100% - 24px), ${maskEnd})`
+
   return (
     // biome-ignore lint/a11y/noStaticElementInteractions: drag-scroll container needs mouse events
     <div
@@ -124,8 +155,13 @@ const XScrollable = forwardRef<
           !showScrollbar && "scrollbar-none",
           contentClassName
         )}
+        style={{
+          maskImage,
+          WebkitMaskImage: maskImage,
+        }}
         onWheel={onWheel}
         onMouseDown={onMouseDown}
+        onScroll={handleScroll}
       >
         {children}
       </div>
@@ -329,16 +365,16 @@ const TabsList = forwardRef<
         aria-label={ariaLabel}
         {...props}
       >
+        {showBottomBorder && (
+          <div
+            className={cn(
+              "absolute bottom-0 left-0 right-0 h-px bg-border dark:bg-border z-0",
+              bottomBorderClassName
+            )}
+          />
+        )}
         <XScrollable showScrollbar={false}>
           <div className={cn("relative", showBottomBorder && "pb-px")}>
-            {showBottomBorder && (
-              <div
-                className={cn(
-                  "absolute bottom-0 left-0 right-0 h-px bg-border dark:bg-border",
-                  bottomBorderClassName
-                )}
-              />
-            )}
 
             {showHoverEffect && (
               <div