Add search and tag support for the wikilist (#262)

* Add search and tag support for the wikilist

* Update WikiList SearchList Style.tid

* updated class names to tiddlydesktop format

* Corrected class names

* corrected class names

* Fix for duplicate results

plugins/tiddlydesktop/WikiList Edit Tags Template.tid

@@ -0,0 +1,117 @@
+title: WikiList/edit-tags-template
+
+\import [[$:/core/ui/EditTemplate/tags]]
+\define tag-button(classes)
+	<$let button-classes='tc-btn-invisible $classes$' currentTiddler=<<tag>>>
+		{{||$:/core/ui/TagPickerTagTemplate}}
+	</$let>
+\end
+\define tagsAutoComplete()
+<$list filter=<<tagsAutoCompleteFilter>> emptyMessage=<<tagsAutoCompleteEmptyMessage>> variable="listItem">
+	<$list filter=<<tagsFilter>> variable="tag">
+		<$list
+			filter="[<tag>addsuffix<suffix>] -[<tagSelectionState>get[text]]"
+			emptyMessage=<<tag-button 'tc-tag-button-selected'>>
+			variable="ignore"
+		>
+			<<tag-button>>
+		</$list>
+	</$list>
+</$list>
+\end
+\define tag-picker-inner(actions,tagField:"tags")
+\whitespace trim
+<$let 
+	newTagNameInputTiddlerQualified=<<qualify "$:/temp/NewTagName/input">> 
+	newTagNameSelectionTiddlerQualified=<<qualify "$:/temp/NewTagName/selected-item">> 
+	fallbackTarget={{$(palette)$##tag-background}}
+	colourA={{$(palette)$##foreground}}
+	colourB={{$(palette)$##background}}
+	storeTitle={{{ [<newTagNameInputTiddler>!match[]] ~[<newTagNameInputTiddlerQualified>] }}} 
+	tagSelectionState={{{ [<newTagNameSelectionTiddler>!match[]] ~[<newTagNameSelectionTiddlerQualified>] }}}
+	refreshTitle=<<qualify "$:/temp/NewTagName/refresh">>
+	nonSystemTagsFilter="[tags[]] $(tagListFilter)$ +[!is[system]] -[<storyTiddler>tags[]] :filter[search:title<userInput>]+[sort[]]"
+	systemTagsFilter="[tags[]] $(tagListFilter)$ +[is[system]] -[<storyTiddler>tags[]] :filter[search:title<userInput>]+[sort[]]"
+	displayTagsPopup="[all[tiddlers]subfilter<systemTagsFilter>][all[tiddlers]subfilter<nonSystemTagsFilter>] +[limit[1]]"
+>
+<div class="tc-edit-add-tag">
+	<div>
+		<span class="tc-add-tag-name tc-small-gap-right">
+			<$macrocall $name="keyboard-driven-input"
+				tiddler=<<newTagNameTiddler>>
+				storeTitle=<<storeTitle>>
+				refreshTitle=<<refreshTitle>>
+				selectionStateTitle=<<tagSelectionState>>
+				inputAcceptActions="<$macrocall $name='add-tag-actions'
+				actions=<<__actions__>>
+				tagField=<<__tagField__>>/>"
+				inputCancelActions=<<clear-tags-actions>>
+				tag="input"
+				placeholder={{$:/language/EditTemplate/Tags/Add/Placeholder}}
+				focusPopup=<<qualify "$:/state/popup/tags-auto-complete">>
+				class="tc-edit-texteditor tc-popup-handle"
+				tabindex=<<tabIndex>> 
+				focus={{{ [{$:/config/AutoFocus}match[tags]then[true]] ~[[false]] }}}
+				filterMinLength={{$:/config/Tags/MinLength}} 
+				cancelPopups=<<cancelPopups>>
+				configTiddlerFilter="[[$:/core/macros/tag-picker]]"
+			/>
+		</span>
+		<$button
+			popup=<<qualify "$:/state/popup/tags-auto-complete">>
+			class="tc-btn-invisible tc-btn-dropdown"
+			tooltip={{$:/language/EditTemplate/Tags/Dropdown/Hint}}
+			aria-label={{$:/language/EditTemplate/Tags/Dropdown/Caption}}
+		>
+			{{$:/core/images/down-arrow}}
+		</$button>
+		<$reveal state=<<storeTitle>> type="nomatch" text="">
+			<$button
+				class="tc-btn-invisible tc-small-gap tc-btn-dropdown"
+				tooltip={{$:/language/EditTemplate/Tags/ClearInput/Hint}}
+				aria-label={{$:/language/EditTemplate/Tags/ClearInput/Caption}}
+				actions=<<delete-tag-state-tiddlers>>
+			>
+				{{$:/core/images/close-button}}
+			</$button>
+		</$reveal>
+		<span class="tc-add-tag-button tc-small-gap-left">
+			<$let tag={{{ [<newTagNameTiddler>get[text]] }}} currentTiddlerCSSEscaped={{{ [<saveTiddler>escapecss[]] }}}>
+				<$button set=<<newTagNameTiddler>> setTo="">
+					<$action-listops $tiddler=<<saveTiddler>> $field=<<__tagField__>> $subfilter="[<tag>trim[]]"/>
+					$actions$
+					<<delete-tag-state-tiddlers>>
+					<$action-sendmessage $message="tm-focus-selector" $param=<<get-tagpicker-focus-selector>>/>
+					{{$:/language/EditTemplate/Tags/Add/Button}}
+				</$button>
+			</$let>
+		</span>
+	</div>
+	<$reveal
+		class="tc-block-dropdown tc-block-tags-dropdown tc-block-dropdown-wrapper"
+		default={{{ [subfilter<displayTagsPopup>then[]else[hide]] }}}
+		state=<<qualify "$:/state/popup/tags-auto-complete">>
+		tag={{{ [subfilter<displayTagsPopup>then[div]else[template]] }}}
+		text=""
+		type="nomatch"
+	>
+		<$let
+			actions=<<__actions__>> 
+			currentTiddler=<<tag>>
+			tagField=<<__tagField__>>
+			userInput={{{ [<storeTitle>get[text]] }}}
+			tagsAutoCompleteFilter="[<userInput>minlength{$:/config/Tags/MinLength}limit[1]]"
+			tagsAutoCompleteEmptyMessage="<div class='tc-search-results'>{{$:/language/Search/Search/TooShort}}</div>"
+		>
+			<$let tagsFilter=<<nonSystemTagsFilter>> suffix="-primaryList"><<tagsAutoComplete>></$let>
+			<hr>
+			<$let tagsFilter=<<systemTagsFilter>> suffix="-secondaryList"><<tagsAutoComplete>></$let>
+		</$let>
+	</$reveal>
+</div>
+</$let>
+\end
+
+<$let saveTiddler=<<currentTiddler>> tagListFilter="+[all[tiddlers]tag[wikilist]addprefix[$:/TiddlyDesktop/Config/wiki-tags/]tags[]]">
+<$macrocall $name="edit-tags-template" tagField=<<tagField>>/>
+</$let>

plugins/tiddlydesktop/WikiList SearchList Style.tid

@@ -0,0 +1,18 @@
+tags: $:/tags/Stylesheet
+title: WikiList/SearchListStyle
+
+.td-search{
+display:flex;
+gap:1ch;
+flex-wrap:wrap;
+}
+
+.td-search,.td-tags{
+padding:10px;
+padding-bottom:0;
+padding-top:0;
+}
+
+.td-search .tc-edit-texteditor{
+flex:1;
+}

plugins/tiddlydesktop/WikiList ui Buttons DeleteUnusedTags.tid

@@ -0,0 +1,12 @@
+tags: $:/tags/StartupAction
+title: WikiList/ui/Buttons/DeleteUnusedTags
+
+\define delete-unused-tags()
+<$action-deletetiddler $filter="[all[tiddlers]prefix[$:/TiddlyDesktop/Config/wiki-tags/]]:filter[removeprefix[$:/TiddlyDesktop/Config/wiki-tags/]!is[tiddler]]"/>
+\end
+
+<$list filter="[prefix[$:/TiddlyDesktop/Config/wiki-tags/]removeprefix[$:/TiddlyDesktop/Config/wiki-tags/]!is[tiddler]limit[1]]">
+<$button actions=<<delete-unused-tags>> tooltip="delete unused tags" class="tc-btn-invisible">
+{{$:/core/images/refresh-button}}
+</$button>
+</$list>

plugins/tiddlydesktop/WikiList.tid

@@ -1,7 +1,33 @@
 title: WikiList
 
+<p class="td-search">
+<$edit-text tiddler=<<qualify '$:/temp/WikiList/search'>> tag="input" class="tc-edit-texteditor" placeholder="search"/>
+
+<$list filter="[<qualify '$:/temp/WikiList/search'>get[text]minlength[1]]">
+<$button class="tc-btn-invisible" tooltip="Clear search" set=<<qualify '$:/temp/WikiList/search'>> setTo="">{{$:/core/images/close-button}}</$button>
+</$list>
+</p>
+
+<p class="td-tags">
+<$list filter="[prefix[$:/TiddlyDesktop/Config/wiki-tags/]tags[]]" variable="tag">
+<$button set=<<qualify '$:/temp/WikiList/search'>> setTo={{{ "[tag["[<tag>]"]]"+[join[]] }}} class="tc-tag-label tc-btn-invisible" style="background-color:;
+fill:#333333;
+color:#333333;"><<tag>></$button>
+</$list>
+
+{{WikiList/ui/Buttons/DeleteUnusedTags}}
+</p>
+
+<$let
+input={{{ [<qualify '$:/temp/WikiList/search'>get[text]] }}}
+textsearch="[prefix[$:/TiddlyDesktop/Config/title/]search<input>removeprefix[$:/TiddlyDesktop/Config/title/]]"
+filtersearch="[all[tiddlers]subfilter<input>removeprefix[$:/TiddlyDesktop/Config/wiki-tags/]tag[wikilist]] ~[all[tiddlers]subfilter<input>tag[wikilist]]"
+beginfilter="["
+filter={{{ [<input>minlength[3]]:map[search<beginfilter>then<filtersearch>else<textsearch>]~"[all[tiddlers]tag[wikilist]]" }}}
+>
+
 <div class="td-wikilist">
-<$macrocall $name="list-tagged-draggable" tag="wikilist" itemTemplate="WikiListRow" emptyMessage="Add a ~TiddlyWiki file or folder to get started.
+<$macrocall $name="list-tagged-draggable" subFilter="all[tiddlers]subfilter<filter>unique[]" itemTemplate="WikiListRow" emptyMessage="Add a ~TiddlyWiki file or folder to get started.
 
 Click the buttons above to browse, or drag and drop from your file Explorer/Finder"/>
 </div>

plugins/tiddlydesktop/WikiListRow.tid

@@ -47,6 +47,13 @@ remove
 advanced
 </$button>
 </div>
+<div class="td-wiki-toolbar-item">
+<$let storyTiddler="$:/TiddlyDesktop/Config/wiki-tags/$(currentTiddler)$">
+<$tiddler tiddler=<<storyTiddler>>>
+{{||WikiList/edit-tags-template}}
+</$tiddler>
+</$let>
+</div>
 </div>
 <$reveal type="nomatch" state="""$:/TiddlyDesktop/Config/advanced/$(currentTiddler)$""" text="">
 <div class="td-wiki-advanced tc-popup-handle">
@@ -88,4 +95,4 @@ Writers: <$edit-text tag="input" tiddler="""$:/TiddlyDesktop/Config/writers/$(cu
 </$draggable>
 \end
 
-<<wikilist-row>>
+<<wikilist-row>>