From ed24e0aa805ce73c4ac8ed6238d8fd6d864f7d8e Mon Sep 17 00:00:00 2001
From: Alejandro Celaya <alejandro.celaya@hypothes.is>
Date: Wed, 27 Mar 2024 10:07:43 +0100
Subject: [PATCH] Schedule help panel auto-dismiss when automatically opened

---
 src/sidebar/components/HypothesisApp.tsx | 25 +++++++++++++++++++++++-
 1 file changed, 24 insertions(+), 1 deletion(-)

diff --git a/src/sidebar/components/HypothesisApp.tsx b/src/sidebar/components/HypothesisApp.tsx
index 0a5be11a673..bbdd1a5361b 100644
--- a/src/sidebar/components/HypothesisApp.tsx
+++ b/src/sidebar/components/HypothesisApp.tsx
@@ -1,6 +1,6 @@
 import { confirm } from '@hypothesis/frontend-shared';
 import classnames from 'classnames';
-import { useEffect, useMemo } from 'preact/hooks';
+import { useEffect, useMemo, useRef } from 'preact/hooks';
 
 import type { SidebarSettings } from '../../types/config';
 import { serviceConfig } from '../config/service-config';
@@ -47,8 +47,15 @@ function HypothesisApp({
 }: HypothesisAppProps) {
   const store = useSidebarStore();
   const profile = store.profile();
+  const currentUser = profile.userid;
   const route = store.route();
   const isModalRoute = route === 'notebook' || route === 'profile';
+  const allAnnotations = store.savedAnnotations();
+  const currentUserHasAnnotations = useMemo(
+    () => allAnnotations.filter(ann => ann.user === currentUser).length > 0,
+    [allAnnotations, currentUser],
+  );
+  const timer = useRef<number>();
 
   const backgroundStyle = useMemo(
     () => applyTheme(['appBackgroundColor'], settings),
@@ -64,6 +71,22 @@ function HypothesisApp({
     }
   }, [isSidebar, profile, settings, store]);
 
+  // As soon as the user interacts with the page creating annotations, if the
+  // help panel was auto-displayed, schedule a task that will close it after 5
+  // minutes
+  useEffect(() => {
+    if (
+      shouldAutoDisplayTutorial(isSidebar, profile, settings) &&
+      currentUserHasAnnotations &&
+      !timer.current
+    ) {
+      timer.current = setTimeout(() => {
+        store.closeSidebarPanel('help');
+        session.dismissSidebarTutorial();
+      }, 5 /** 60*/ * 1000);
+    }
+  }, [currentUserHasAnnotations, isSidebar, profile, session, settings, store]);
+
   const isThirdParty = isThirdPartyService(settings);
 
   const login = async () => {