From 5fe542a05b3e4b1f2e576082f7bed37f63726f95 Mon Sep 17 00:00:00 2001
From: "jeremy@jermolene.com" <jeremy@jermolene.com>
Date: Wed, 1 Feb 2023 21:14:29 +0000
Subject: [PATCH] Use new element spotlight to provide hints

---
 editions/tw5.com/tiddlywiki.info                      | 1 +
 plugins/tiddlywiki/tour/steps/close-control-panel.tid | 3 ++-
 plugins/tiddlywiki/tour/steps/create-tiddler.tid      | 2 +-
 plugins/tiddlywiki/tour/steps/open-control-panel.tid  | 3 ++-
 plugins/tiddlywiki/tour/steps/recent.tid              | 4 +++-
 plugins/tiddlywiki/tour/steps/search.tid              | 3 ++-
 plugins/tiddlywiki/tour/tour-panel.tid                | 9 +++++----
 7 files changed, 16 insertions(+), 9 deletions(-)

diff --git a/editions/tw5.com/tiddlywiki.info b/editions/tw5.com/tiddlywiki.info
index c4fc4b315..ca6a42ea3 100644
--- a/editions/tw5.com/tiddlywiki.info
+++ b/editions/tw5.com/tiddlywiki.info
@@ -8,6 +8,7 @@
 		"tiddlywiki/internals",
 		"tiddlywiki/menubar",
 		"tiddlywiki/confetti",
+		"tiddlywiki/dynannotate",
 		"tiddlywiki/tour"
 	],
 	"themes": [
diff --git a/plugins/tiddlywiki/tour/steps/close-control-panel.tid b/plugins/tiddlywiki/tour/steps/close-control-panel.tid
index 27293aaf4..837958137 100644
--- a/plugins/tiddlywiki/tour/steps/close-control-panel.tid
+++ b/plugins/tiddlywiki/tour/steps/close-control-panel.tid
@@ -1,5 +1,6 @@
 title: $:/plugins/tiddlywiki/tour/steps/close-control-panel
 tags: $:/tags/TourStep
+selector: .tc-story-river div[data-tiddler-title='$:/ControlPanel'] .tc-btn-\%24\%3A\%2Fcore\%2Fui\%2FButtons\%2Fclose
 
 ! Close the control panel
 
@@ -11,6 +12,6 @@ Your task now is to close the control panel.
 
 Congratulations, you may proceed
 
-<<tour-previous-step-button>> <<tour-next-step-button>>
+<<tour-buttons>>
 
 </$list>
\ No newline at end of file
diff --git a/plugins/tiddlywiki/tour/steps/create-tiddler.tid b/plugins/tiddlywiki/tour/steps/create-tiddler.tid
index effd530fd..ce581b3fe 100644
--- a/plugins/tiddlywiki/tour/steps/create-tiddler.tid
+++ b/plugins/tiddlywiki/tour/steps/create-tiddler.tid
@@ -11,6 +11,6 @@ Your task is to create and open a tiddler titled "Congratulations"
 
 Congratulations, you may proceed
 
-<<tour-previous-step-button>> <<tour-next-step-button>>
+<<tour-buttons>>
 
 </$list>
\ No newline at end of file
diff --git a/plugins/tiddlywiki/tour/steps/open-control-panel.tid b/plugins/tiddlywiki/tour/steps/open-control-panel.tid
index 11c48176c..b735bebe9 100644
--- a/plugins/tiddlywiki/tour/steps/open-control-panel.tid
+++ b/plugins/tiddlywiki/tour/steps/open-control-panel.tid
@@ -1,5 +1,6 @@
 title: $:/plugins/tiddlywiki/tour/steps/open-control-panel
 tags: $:/tags/TourStep
+selector: .tc-btn-\%24\%3A\%2Fcore\%2Fui\%2FButtons\%2Fcontrol-panel
 
 ! Welcome to ~TiddlyWiki
 
@@ -13,6 +14,6 @@ Your first task is to open the control panel.
 
 Congratulations, you may proceed
 
-<<tour-previous-step-button>> <<tour-next-step-button>>
+<<tour-buttons>>
 
 </$list>
\ No newline at end of file
diff --git a/plugins/tiddlywiki/tour/steps/recent.tid b/plugins/tiddlywiki/tour/steps/recent.tid
index d0903e193..9983f8b96 100644
--- a/plugins/tiddlywiki/tour/steps/recent.tid
+++ b/plugins/tiddlywiki/tour/steps/recent.tid
@@ -1,5 +1,7 @@
 title: $:/plugins/tiddlywiki/tour/steps/recent
 tags: $:/tags/TourStep
+selector: .tc-sidebar-tabs-main .tc-timeline > .tc-menu-list-item:nth-child(1) .tc-menu-list-subitem:nth-child(1) .tc-tiddlylink
+selector-fallback-1: .tc-sidebar-tabs-main button:nth-child(3)
 
 ! Searching
 
@@ -13,7 +15,7 @@ Your task is to use the "Recent" tab of the sidebar to open the most recently ed
 
 Congratulations! You may now proceed
 
-<<tour-previous-step-button>> <<tour-next-step-button>>
+<<tour-buttons>>
 
 </$list>
 
diff --git a/plugins/tiddlywiki/tour/steps/search.tid b/plugins/tiddlywiki/tour/steps/search.tid
index 413f8ea52..94285be51 100644
--- a/plugins/tiddlywiki/tour/steps/search.tid
+++ b/plugins/tiddlywiki/tour/steps/search.tid
@@ -1,5 +1,6 @@
 title: $:/plugins/tiddlywiki/tour/steps/search
 tags: $:/tags/TourStep
+selector: .tc-sidebar-search .tc-popup-handle
 
 ! Searching
 
@@ -11,6 +12,6 @@ Your task is to search for the phrase "help".
 
 Congratulations! You may now proceed
 
-<<tour-previous-step-button>> <<tour-next-step-button>>
+<<tour-buttons>>
 
 </$list>
\ No newline at end of file
diff --git a/plugins/tiddlywiki/tour/tour-panel.tid b/plugins/tiddlywiki/tour/tour-panel.tid
index e12686cc5..2494639e7 100644
--- a/plugins/tiddlywiki/tour/tour-panel.tid
+++ b/plugins/tiddlywiki/tour/tour-panel.tid
@@ -1,14 +1,11 @@
 title: $:/plugins/tiddlywiki/tour/panel
 tags: $:/tags/PageTemplate
 
-\define tour-previous-step-button()
+\define tour-buttons()
 <$button>
 <$action-setfield $tiddler="$:/state/tour/step" $field="text" $value={{{ [all[shadows+tiddlers]tag[$:/tags/TourStep]before{$:/state/tour/step}] }}}/>
 back
 </$button>
-\end
-
-\define tour-next-step-button()
 <$button>
 <$action-setfield $tiddler="$:/state/tour/step" $field="text" $value={{{ [all[shadows+tiddlers]tag[$:/tags/TourStep]after{$:/state/tour/step}else[$:/plugins/tiddlywiki/tour/steps/finished]] }}}/>
 next
@@ -21,5 +18,9 @@ next
 <$button set="$:/config/ShowTour" setTo="no" class="tc-btn-invisible">{{$:/core/images/close-button}}</$button> ''Tour''
 </div>
 <$transclude tiddler={{$:/state/tour/step}} mode="block"/>
+<$button>
+<$action-sendmessage $message="tm-spotlight-element" selector={{{ [{$:/state/tour/step}get[selector]] }}} selector-fallback-1={{{ [{$:/state/tour/step}get[selector-fallback-1]] }}} selector-fallback-2={{{ [{$:/state/tour/step}get[selector-fallback-2]] }}}/>
+show hint
+</$button>
 </div>
 </$list>