From 54e6a4a2cf99e0647255201495d93e398bc7eef8 Mon Sep 17 00:00:00 2001
From: Anish Sarkar <104695310+AnishSarkar22@users.noreply.github.com>
Date: Tue, 17 Mar 2026 02:52:21 +0530
Subject: [PATCH] refactor: simplify joyride attributes and enhance skeleton
 loading styles

- Removed the joyride attribute for the "Documents" section in the sidebar.
- Updated skeleton loading components in MorePagesContent to include a muted background for improved visibility.
---
 .../layout/ui/sidebar/NavSection.tsx          | 10 ++++------
 .../settings/more-pages-content.tsx           | 20 +++++++++----------
 2 files changed, 14 insertions(+), 16 deletions(-)

diff --git a/surfsense_web/components/layout/ui/sidebar/NavSection.tsx b/surfsense_web/components/layout/ui/sidebar/NavSection.tsx
index 0e3decd82..6b3a4315a 100644
--- a/surfsense_web/components/layout/ui/sidebar/NavSection.tsx
+++ b/surfsense_web/components/layout/ui/sidebar/NavSection.tsx
@@ -73,12 +73,10 @@ export function NavSection({ items, onItemClick, isCollapsed = false }: NavSecti
 				const Icon = item.icon;
 				const indicator = item.statusIndicator;
 
-				const joyrideAttr =
-					item.title === "Documents" || item.title.toLowerCase().includes("documents")
-						? { "data-joyride": "documents-sidebar" }
-						: item.title === "Inbox" || item.title.toLowerCase().includes("inbox")
-							? { "data-joyride": "inbox-sidebar" }
-							: {};
+			const joyrideAttr =
+				item.title === "Inbox" || item.title.toLowerCase().includes("inbox")
+					? { "data-joyride": "inbox-sidebar" }
+					: {};
 
 				if (isCollapsed) {
 					return (
diff --git a/surfsense_web/components/settings/more-pages-content.tsx b/surfsense_web/components/settings/more-pages-content.tsx
index 3f3b42fb2..324a67a23 100644
--- a/surfsense_web/components/settings/more-pages-content.tsx
+++ b/surfsense_web/components/settings/more-pages-content.tsx
@@ -85,16 +85,16 @@ export function MorePagesContent() {
 			</div>
 
 			{isLoading ? (
-				<Card>
-					<CardContent className="flex items-center gap-3 p-3">
-						<Skeleton className="h-9 w-9 rounded-full" />
-						<div className="flex-1 space-y-2">
-							<Skeleton className="h-4 w-3/4" />
-							<Skeleton className="h-3 w-1/4" />
-						</div>
-						<Skeleton className="h-8 w-16" />
-					</CardContent>
-				</Card>
+			<Card>
+				<CardContent className="flex items-center gap-3 p-3">
+					<Skeleton className="h-9 w-9 rounded-full bg-muted" />
+					<div className="flex-1 space-y-2">
+						<Skeleton className="h-4 w-3/4 bg-muted" />
+						<Skeleton className="h-3 w-1/4 bg-muted" />
+					</div>
+					<Skeleton className="h-8 w-16 bg-muted" />
+				</CardContent>
+			</Card>
 			) : (
 				<div className="space-y-2">
 					{data?.tasks.map((task) => (