apunkt/SurfSense
1
0
Fork 0
mirror of https://github.com/MODSetter/SurfSense.git synced 2026-06-10 20:35:17 +02:00
Code Issues Projects Releases Packages Wiki Activity

feat: expand onboarding tour with inbox step and update tooltip positioning

Browse source 
- Added a new onboarding tour step for the inbox, guiding users to view mentions and notifications.
- Updated tooltip positioning logic to accommodate the new inbox step, ensuring proper alignment during the tour.
- Enhanced the check for required elements to include the inbox step, improving the tour initiation process.
This commit is contained in:
Anish Sarkar 2026-01-24 19:53:56 +05:30
parent 22bd5e0f39
commit ce9e3b01b7
2 changed files with 16 additions and 6 deletions
Download patch file Download diff file Expand all files Collapse all files

4
surfsense_web/components/layout/ui/sidebar/NavSection.tsx
View file

@ -20,7 +20,9 @@ export function NavSection({ items, onItemClick, isCollapsed = false }: NavSecti
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" }
: {};
if (isCollapsed) {
return (

18
surfsense_web/components/onboarding-tour.tsx
View file

@ -32,6 +32,12 @@ const TOUR_STEPS: TourStep[] = [
content: "Access and manage all your uploaded documents.",
placement: "right",
},
{
target: '[data-joyride="inbox-sidebar"]',
title: "Check your inbox",
content: "View mentions and notifications in one place.",
placement: "right",
},
];
interface TooltipPosition {
@ -188,14 +194,15 @@ function TourTooltip({
const getPointerStyles = (): React.CSSProperties => {
const lineLength = 16;
const dotSize = 6;
// Check if this is the documents step (stepIndex === 1)
// Check if this is the documents step (stepIndex === 1) or inbox step (stepIndex === 2)
const isDocumentsStep = stepIndex === 1;
const isInboxStep = stepIndex === 2;
if (position.pointerPosition === "left") {
return {
position: "absolute",
left: -lineLength - dotSize,
top: isDocumentsStep ? "calc(50% - 8px)" : "50%",
top: isDocumentsStep || isInboxStep ? "calc(50% - 8px)" : "50%",
transform: "translateY(-50%)",
display: "flex",
alignItems: "center",
@ -518,12 +525,13 @@ export function OnboardingTour() {
// User is new and hasn't seen tour - wait for DOM elements and start tour
const checkAndStartTour = () => {
// Check if both required elements exist
// Check if all required elements exist
const connectorEl = document.querySelector(TOUR_STEPS[0].target);
const documentsEl = document.querySelector(TOUR_STEPS[1].target);
const inboxEl = document.querySelector(TOUR_STEPS[2].target);
if (connectorEl && documentsEl) {
// Both elements found, start tour
if (connectorEl && documentsEl && inboxEl) {
// All elements found, start tour
setIsActive(true);
setTargetEl(connectorEl);
setSpotlightTargetEl(connectorEl);