From 904cfde5683b42d6a3088ebd8e40eb753b65dd21 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Th=C3=A9ophile=20Desmedt?=
 <34781168+DesignThinkerer@users.noreply.github.com>
Date: Mon, 2 Dec 2024 19:03:53 +0100
Subject: [PATCH 1/2] refactor to use modern tiddlywiki features:

Replace reveal widget by conditional shortcut syntax, use string substitution, let widget
---
 core/wiki/peek-stylesheets.tid | 73 +++++++++++++++-------------------
 1 file changed, 32 insertions(+), 41 deletions(-)

diff --git a/core/wiki/peek-stylesheets.tid b/core/wiki/peek-stylesheets.tid
index 7d9726fbeda..6f364de7760 100644
--- a/core/wiki/peek-stylesheets.tid
+++ b/core/wiki/peek-stylesheets.tid
@@ -1,35 +1,28 @@
 title: $:/snippets/peek-stylesheets
 
-\define expandable-stylesheets-list()
+\procedure expandable-stylesheets-list()
 \whitespace trim
 <ol>
 <$list filter="[all[shadows+tiddlers]tag[$:/tags/Stylesheet]!has[draft.of]]">
-<$vars state=<<qualify "$:/state/peek-stylesheets/open/">>>
-<$set name="state" value={{{ [<state>addsuffix<currentTiddler>] }}}>
+<$let openState=`$:/state/peek-tiddler/open/$(currentTiddler)$$(qualify)$` open={{{ [<openState>get[text]else[no]] }}}>
 <li>
-<$reveal type="match" state=<<state>> text="yes" tag="span">
-<$button set=<<state>> setTo="no" class="tc-btn-invisible">
-{{$:/core/images/down-arrow}}
-</$button>
-</$reveal>
-<$reveal type="nomatch" state=<<state>> text="yes" tag="span">
-<$button set=<<state>> setTo="yes" class="tc-btn-invisible">
-{{$:/core/images/right-arrow}}
-</$button>
-</$reveal>
-<$link>
-<$view field="title"/>
-</$link>
-<$reveal type="match" state=<<state>> text="yes" tag="div">
-<$set name="source" tiddler=<<currentTiddler>>>
-<$wikify name="styles" text=<<source>>>
+<$checkbox tiddler=<<openState>> field="text" checked="yes" style.appearance="none">
+<span style.cursor="pointer">
+<%if [<open>match[yes]]%>
+{{$:/core/images/down-arrow|1em}}
+<%else%>
+{{$:/core/images/right-arrow|1em}}
+<%endif%>
+</span>
+</$checkbox>
+<$link/>
+<%if [<open>match[yes]]%>
+<$wikify name="styles" text={{!!text}}>
 <$codeblock code=<<styles>> language="css"/>
 </$wikify>
-</$set>
-</$reveal>
+<%endif%>
 </li>
-</$set>
-</$vars>
+</$let>
 </$list>
 </ol>
 \end
@@ -39,38 +32,36 @@ title: $:/snippets/peek-stylesheets
 <ol>
 <$list filter="[all[shadows+tiddlers]tag[$:/tags/Stylesheet]!has[draft.of]]">
 <li>
-<$link>
-<$view field="title"/>
-</$link>
-<$set name="source" tiddler=<<currentTiddler>>>
-<$wikify name="styles" text=<<source>>>
+<$link/>
+<$wikify name="styles" text={{!!text}}>
 <pre>
 <code>
 <$text text=<<styles>>/>
 </code>
 </pre>
 </$wikify>
-</$set>
 </li>
 </$list>
 </ol>
 \end
 \whitespace trim
 
-<$vars modeState=<<qualify "$:/state/peek-stylesheets/mode/">>>
+<$let modeState=`$:/state/peek-stylesheets/mode/$(qualify)$` mode={{{ [<modeState>get[text]else[expand]] }}}>
 
-<$reveal type="nomatch" state=<<modeState>> text="expanded" tag="div">
-<$button set=<<modeState>> setTo="expanded" class="tc-btn-invisible">{{$:/core/images/chevron-right}} {{$:/language/ControlPanel/Stylesheets/Expand/Caption}}</$button>
-</$reveal>
-<$reveal type="match" state=<<modeState>> text="expanded" tag="div">
-<$button set=<<modeState>> setTo="restored" class="tc-btn-invisible">{{$:/core/images/chevron-down}} {{$:/language/ControlPanel/Stylesheets/Restore/Caption}}</$button>
-</$reveal>
+<$checkbox tiddler=<<modeState>> field="text" checked="yes" style.appearance="none">
+<span style.cursor="pointer">
+<%if [<mode>match[expand]]%>
+{{$:/core/images/chevron-right|1em}} {{$:/language/ControlPanel/Stylesheets/Expand/Caption}}
+<%else%>
+{{$:/core/images/chevron-down|1em}} {{$:/language/ControlPanel/Stylesheets/Restore/Caption}}
+<%endif%>
+</span>
+</$checkbox>
 
-<$reveal type="nomatch" state=<<modeState>> text="expanded" tag="div">
+<%if [<mode>match[expand]]%>
 <<expandable-stylesheets-list>>
-</$reveal>
-<$reveal type="match" state=<<modeState>> text="expanded" tag="div">
+<%else%>
 <<stylesheets-list>>
-</$reveal>
+<%endif%>
 
-</$vars>
+</$let>
\ No newline at end of file

From 62e1f9442190fc4cf0216e88d25d972ee0b7d440 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Th=C3=A9ophile=20Desmedt?=
 <34781168+DesignThinkerer@users.noreply.github.com>
Date: Mon, 2 Dec 2024 20:11:21 +0100
Subject: [PATCH 2/2] Improve macro for better modularity

---
 core/wiki/peek-stylesheets.tid | 67 +++++++++++++---------------------
 1 file changed, 26 insertions(+), 41 deletions(-)

diff --git a/core/wiki/peek-stylesheets.tid b/core/wiki/peek-stylesheets.tid
index 6f364de7760..58ffaebcac4 100644
--- a/core/wiki/peek-stylesheets.tid
+++ b/core/wiki/peek-stylesheets.tid
@@ -1,67 +1,52 @@
 title: $:/snippets/peek-stylesheets
 
-\procedure expandable-stylesheets-list()
-\whitespace trim
-<ol>
-<$list filter="[all[shadows+tiddlers]tag[$:/tags/Stylesheet]!has[draft.of]]">
-<$let openState=`$:/state/peek-tiddler/open/$(currentTiddler)$$(qualify)$` open={{{ [<openState>get[text]else[no]] }}}>
-<li>
-<$checkbox tiddler=<<openState>> field="text" checked="yes" style.appearance="none">
+\procedure expandable-content()
+<$wikify name="styles" text={{!!text}}>
+<$codeblock code=<<styles>> language="css"/>
+</$wikify>
+\end
+
+\procedure toggle-content()
+<$parameters openState="" open="[<openState>substitute[]get[text]else[no]]" openImage="$:/core/images/down-arrow" closedImage="$:/core/images/right-arrow" openCaption="" closedCaption="">
+<%if [<openState>!is[blank]] %>
+<$checkbox tiddler={{{ [<openState>substitute[]] }}} field="text" checked="yes" style.appearance="none">
 <span style.cursor="pointer">
-<%if [<open>match[yes]]%>
-{{$:/core/images/down-arrow|1em}}
+<%if [subfilter<open>match[yes]] %>
+<$transclude $tiddler=<<openImage>> size="1em" /> <<openCaption>>
 <%else%>
-{{$:/core/images/right-arrow|1em}}
+<$transclude $tiddler=<<closedImage>> size="1em" /> <<closedCaption>>
 <%endif%>
 </span>
 </$checkbox>
-<$link/>
-<%if [<open>match[yes]]%>
-<$wikify name="styles" text={{!!text}}>
-<$codeblock code=<<styles>> language="css"/>
-</$wikify>
 <%endif%>
-</li>
-</$let>
-</$list>
-</ol>
+</$parameters>
 \end
 
-\define stylesheets-list()
+\procedure expandable-list()
 \whitespace trim
+<$parameters filter="" openState="" open="[<openState>substitute[]get[text]else[no]]">
 <ol>
-<$list filter="[all[shadows+tiddlers]tag[$:/tags/Stylesheet]!has[draft.of]]">
+<$list filter=<<filter>> >
 <li>
+<$transclude $variable="toggle-content" open=<<open>> openState=<<openState>> />
 <$link/>
-<$wikify name="styles" text={{!!text}}>
-<pre>
-<code>
-<$text text=<<styles>>/>
-</code>
-</pre>
-</$wikify>
+<%if [subfilter<open>match[yes]]%>
+<<expandable-content>>
+<%endif%>
 </li>
 </$list>
 </ol>
+</$parameters>
 \end
-\whitespace trim
 
-<$let modeState=`$:/state/peek-stylesheets/mode/$(qualify)$` mode={{{ [<modeState>get[text]else[expand]] }}}>
+<$let modeState=`$:/state/peek-stylesheets/mode/$(qualify)$` mode={{{ [<modeState>get[text]else[expand]] }}} listFilter="[all[shadows+tiddlers]tag[$:/tags/Stylesheet]!has[draft.of]]">
 
-<$checkbox tiddler=<<modeState>> field="text" checked="yes" style.appearance="none">
-<span style.cursor="pointer">
-<%if [<mode>match[expand]]%>
-{{$:/core/images/chevron-right|1em}} {{$:/language/ControlPanel/Stylesheets/Expand/Caption}}
-<%else%>
-{{$:/core/images/chevron-down|1em}} {{$:/language/ControlPanel/Stylesheets/Restore/Caption}}
-<%endif%>
-</span>
-</$checkbox>
+<$transclude $variable="toggle-content" openImage="$:/core/images/chevron-right" closedImage="$:/core/images/chevron-down" openState=<<modeState>> openCaption={{$:/language/ControlPanel/Stylesheets/Expand/Caption}} closedCaption={{$:/language/ControlPanel/Stylesheets/Restore/Caption}}/>
 
 <%if [<mode>match[expand]]%>
-<<expandable-stylesheets-list>>
+<$transclude $variable="expandable-list" filter=<<listFilter>> open="yes"/>
 <%else%>
-<<stylesheets-list>>
+<$transclude $variable="expandable-list" filter=<<listFilter>> openState="$:/state/peek-tiddler/open/$(currentTiddler)$$(qualify)$"/>
 <%endif%>
 
 </$let>
\ No newline at end of file