Refactor user interface for plugin tiddlers

* Refactored control panel “Plugins” tab to make the elements more
reusable
* Refactored the display of plugin tiddlers to use the same format as
the control panel (as suggested, I think by @danielo515), adding the
shadow tiddler listing as an overridable extension tab
* Added a new tab in the “More” sidebar providing quick access to all
installed plugins

core/ui/Components/plugin-info.tid

@@ -0,0 +1,95 @@
+title: $:/core/ui/Components/plugin-info
+
+\define lingo-base() $:/language/ControlPanel/Plugins/
+
+\define popup-state-macro()
+$(qualified-state)$-$(currentTiddler)$
+\end
+
+\define tabs-state-macro()
+$(popup-state)$-$(pluginInfoType)$
+\end
+
+\define plugin-icon-title()
+$(currentTiddler)$/icon
+\end
+
+\define plugin-disable-title()
+$:/config/Plugins/Disabled/$(currentTiddler)$
+\end
+
+\define plugin-table-body(type,disabledMessage,default-popup-state)
+<div class="tc-plugin-info-chunk tc-small-icon">
+<$reveal type="nomatch" state=<<popup-state>> text="yes" default="""$default-popup-state$""">
+<$button class="tc-btn-invisible tc-btn-dropdown" set=<<popup-state>> setTo="yes">
+{{$:/core/images/right-arrow}}
+</$button>
+</$reveal>
+<$reveal type="match" state=<<popup-state>> text="yes" default="""$default-popup-state$""">
+<$button class="tc-btn-invisible tc-btn-dropdown" set=<<popup-state>> setTo="no">
+{{$:/core/images/down-arrow}}
+</$button>
+</$reveal>
+</div>
+<div class="tc-plugin-info-chunk">
+<$transclude tiddler=<<currentTiddler>> subtiddler=<<plugin-icon-title>>>
+<$transclude tiddler="$:/core/images/plugin-generic-$type$"/>
+</$transclude>
+</div>
+<div class="tc-plugin-info-chunk">
+<h1>
+''<$view field="description"><$view field="title"/></$view>'' $disabledMessage$
+</h1>
+<h2>
+<$view field="title"/>
+</h2>
+<h2>
+<div><em><$view field="version"/></em></div>
+</h2>
+</div>
+\end
+
+\define plugin-info(type,default-popup-state)
+<$set name="popup-state" value=<<popup-state-macro>>>
+<$reveal type="nomatch" state=<<plugin-disable-title>> text="yes">
+<$link to={{!!title}} class="tc-plugin-info">
+<<plugin-table-body type:"$type$" default-popup-state:"""$default-popup-state$""">>
+</$link>
+</$reveal>
+<$reveal type="match" state=<<plugin-disable-title>> text="yes">
+<$link to={{!!title}} class="tc-plugin-info tc-plugin-info-disabled">
+<<plugin-table-body type:"$type$" default-popup-state:"""$default-popup-state$""" disabledMessage:"<$macrocall $name='lingo' title='Disabled/Status'/>">>
+</$link>
+</$reveal>
+<$reveal type="match" text="yes" state=<<popup-state>> default="""$default-popup-state$""">
+<div class="tc-plugin-info-dropdown">
+<div class="tc-plugin-info-dropdown-body">
+<$list filter="[all[current]] -[[$:/core]]">
+<div style="float:right;">
+<$reveal type="nomatch" state=<<plugin-disable-title>> text="yes">
+<$button set=<<plugin-disable-title>> setTo="yes" tooltip={{$:/language/ControlPanel/Plugins/Disable/Hint}} aria-label={{$:/language/ControlPanel/Plugins/Disable/Caption}}>
+<<lingo Disable/Caption>>
+</$button>
+</$reveal>
+<$reveal type="match" state=<<plugin-disable-title>> text="yes">
+<$button set=<<plugin-disable-title>> setTo="no" tooltip={{$:/language/ControlPanel/Plugins/Enable/Hint}} aria-label={{$:/language/ControlPanel/Plugins/Enable/Caption}}>
+<<lingo Enable/Caption>>
+</$button>
+</$reveal>
+</div>
+</$list>
+<$reveal type="nomatch" text="" state="!!list">
+<$set name="tabsList" filter="[<currentTiddler>list[]] contents">
+<$macrocall $name="tabs" state=<<tabs-state-macro>> tabsList=<<tabsList>> default="readme" template="$:/core/ui/PluginInfo"/>
+</$set>
+</$reveal>
+<$reveal type="match" text="" state="!!list">
+<<lingo NoInformation/Hint>>
+</$reveal>
+</div>
+</div>
+</$reveal>
+</$set>
+\end
+
+<$macrocall $name="plugin-info" type=<<plugin-type>> default-popup-state=<<default-popup-state>>/>

core/ui/ControlPanel/Plugins.tid

@@ -4,95 +4,11 @@ caption: {{$:/language/ControlPanel/Plugins/Caption}}
 
 \define lingo-base() $:/language/ControlPanel/Plugins/
 
-\define popup-state-macro()
-$(qualified-state)$-$(currentTiddler)$
-\end
-
-\define tabs-state-macro()
-$(popup-state)$-$(pluginInfoType)$
-\end
-
-\define plugin-icon-title()
-$(currentTiddler)$/icon
-\end
-
-\define plugin-disable-title()
-$:/config/Plugins/Disabled/$(currentTiddler)$
-\end
-
-\define plugin-table-body(type,disabledMessage)
-<div class="tc-plugin-info-chunk tc-small-icon">
-<$reveal type="nomatch" state=<<popup-state>> text="yes">
-<$button class="tc-btn-invisible tc-btn-dropdown" set=<<popup-state>> setTo="yes">
-{{$:/core/images/right-arrow}}
-</$button>
-</$reveal>
-<$reveal type="match" state=<<popup-state>> text="yes">
-<$button class="tc-btn-invisible tc-btn-dropdown" set=<<popup-state>> setTo="no">
-{{$:/core/images/down-arrow}}
-</$button>
-</$reveal>
-</div>
-<div class="tc-plugin-info-chunk">
-<$transclude tiddler=<<currentTiddler>> subtiddler=<<plugin-icon-title>>>
-<$transclude tiddler="$:/core/images/plugin-generic-$type$"/>
-</$transclude>
-</div>
-<div class="tc-plugin-info-chunk">
-<h1>
-''<$view field="description"><$view field="title"/></$view>'' $disabledMessage$
-</h1>
-<h2>
-<$view field="title"/>
-</h2>
-<h2>
-<div><em><$view field="version"/></em></div>
-</h2>
-</div>
-\end
-
 \define plugin-table(type)
+<$set name="plugin-type" value="""$type$""">
 <$set name="qualified-state" value=<<qualify "$:/state/plugin-info">>>
-<$list filter="[!has[draft.of]plugin-type[$type$]sort[description]]" emptyMessage=<<lingo "Empty/Hint">>>
+<$list filter="[!has[draft.of]plugin-type[$type$]sort[description]]" emptyMessage=<<lingo "Empty/Hint">> template="$:/core/ui/Components/plugin-info"/>
-<$set name="popup-state" value=<<popup-state-macro>>>
-<$reveal type="nomatch" state=<<plugin-disable-title>> text="yes">
-<$link to={{!!title}} class="tc-plugin-info">
-<<plugin-table-body type:"$type$">>
-</$link>
-</$reveal>
-<$reveal type="match" state=<<plugin-disable-title>> text="yes">
-<$link to={{!!title}} class="tc-plugin-info tc-plugin-info-disabled">
-<<plugin-table-body type:"$type$" disabledMessage:"<$macrocall $name='lingo' title='Disabled/Status'/>">>
-</$link>
-</$reveal>
-<$reveal type="match" text="yes" state=<<popup-state>>>
-<div class="tc-plugin-info-dropdown">
-<div class="tc-plugin-info-dropdown-body">
-<$list filter="[all[current]] -[[$:/core]]">
-<div style="float:right;">
-<$reveal type="nomatch" state=<<plugin-disable-title>> text="yes">
-<$button set=<<plugin-disable-title>> setTo="yes" tooltip={{$:/language/ControlPanel/Plugins/Disable/Hint}} aria-label={{$:/language/ControlPanel/Plugins/Disable/Caption}}>
-<<lingo Disable/Caption>>
-</$button>
-</$reveal>
-<$reveal type="match" state=<<plugin-disable-title>> text="yes">
-<$button set=<<plugin-disable-title>> setTo="no" tooltip={{$:/language/ControlPanel/Plugins/Enable/Hint}} aria-label={{$:/language/ControlPanel/Plugins/Enable/Caption}}>
-<<lingo Enable/Caption>>
-</$button>
-</$reveal>
-</div>
-</$list>
-<$reveal type="nomatch" text="" state="!!list">
-<$macrocall $name="tabs" state=<<tabs-state-macro>> tabsList={{!!list}} default="readme" template="$:/core/ui/PluginInfo"/>
-</$reveal>
-<$reveal type="match" text="" state="!!list">
-<<lingo NoInformation/Hint>>
-</$reveal>
-</div>
-</div>
-</$reveal>
 </$set>
-</$list>
 </$set>
 \end
 

core/ui/MoreSideBar/Plugins.tid

@@ -0,0 +1,8 @@
+title: $:/core/ui/MoreSideBar/Plugins
+tags: $:/tags/MoreSideBar
+caption: {{$:/language/ControlPanel/Plugins/Caption}}
+
+
+{{$:/language/ControlPanel/Plugins/Installed/Hint}}
+
+<<tabs "[all[shadows+tiddlers]tag[$:/tags/MoreSideBar/Plugins]!has[draft.of]]" "$:/core/ui/MoreSideBar/Plugins/Plugins">>

core/ui/MoreSideBar/plugins/Languages.tid

@@ -0,0 +1,5 @@
+title: $:/core/ui/MoreSideBar/Plugins/Languages
+tags: $:/tags/MoreSideBar/Plugins
+caption: {{$:/language/ControlPanel/Plugins/Languages/Caption}}
+
+<$list filter="[!has[draft.of]plugin-type[language]sort[description]]" template="$:/core/ui/PluginListItemTemplate" emptyMessage={{$:/language/ControlPanel/Plugins/Empty/Hint}}/>

core/ui/MoreSideBar/plugins/Plugins.tid

@@ -0,0 +1,5 @@
+title: $:/core/ui/MoreSideBar/Plugins/Plugins
+tags: $:/tags/MoreSideBar/Plugins
+caption: {{$:/language/ControlPanel/Plugins/Plugins/Caption}}
+
+<$list filter="[!has[draft.of]plugin-type[plugin]sort[description]]" template="$:/core/ui/PluginListItemTemplate" emptyMessage={{$:/language/ControlPanel/Plugins/Empty/Hint}}>>/>

core/ui/MoreSideBar/plugins/Theme.tid

@@ -0,0 +1,5 @@
+title: $:/core/ui/MoreSideBar/Plugins/Theme
+tags: $:/tags/MoreSideBar/Plugins
+caption: {{$:/language/ControlPanel/Plugins/Themes/Caption}}
+
+<$list filter="[!has[draft.of]plugin-type[theme]sort[description]]" template="$:/core/ui/PluginListItemTemplate" emptyMessage={{$:/language/ControlPanel/Plugins/Empty/Hint}}/>

core/ui/PluginInfo.tid

@@ -6,10 +6,15 @@ $(currentTiddler)$/$(languageTitle)$/$(currentTab)$
 \define info-tiddler-title()
 $(currentTiddler)$/$(currentTab)$
 \end
+\define default-tiddler-title()
+$:/core/ui/PluginInfo/Default/$(currentTab)$
+\end
 <$transclude tiddler=<<localised-info-tiddler-title>> mode="block">
 <$transclude tiddler=<<currentTiddler>> subtiddler=<<localised-info-tiddler-title>> mode="block">
 <$transclude tiddler=<<currentTiddler>> subtiddler=<<info-tiddler-title>> mode="block">
+<$transclude tiddler=<<default-tiddler-title>> mode="block">
 {{$:/language/ControlPanel/Plugin/NoInfoFound/Hint}}
 </$transclude>
 </$transclude>
 </$transclude>
+</$transclude>

core/ui/PluginInfoDefaultContents.tid

@@ -0,0 +1,13 @@
+title: $:/core/ui/PluginInfo/Default/contents
+
+\define lingo-base() $:/language/TiddlerInfo/Advanced/PluginInfo/
+<<lingo Hint>>
+<ul>
+<$list filter="[all[current]plugintiddlers[]sort[title]]" emptyMessage=<<lingo Empty/Hint>>>
+<li>
+<$link to={{!!title}}>
+<$view field="title"/>
+</$link>
+</li>
+</$list>
+</ul>

core/ui/PluginListItemTemplate.tid

@@ -0,0 +1,9 @@
+title: $:/core/ui/PluginListItemTemplate
+
+<div class="tc-menu-list-item">
+<$link to={{!!title}}>
+<$view field="description">
+<$view field="title"/>
+</$view>
+</$link>
+</div>

core/ui/ViewTemplate/plugin.tid

@@ -2,7 +2,11 @@ title: $:/core/ui/ViewTemplate/plugin
 tags: $:/tags/ViewTemplate
 
 <$list filter="[all[current]has[plugin-type]] -[all[current]field:plugin-type[import]]">
-
+<$set name="plugin-type" value={{!!plugin-type}}>
-{{||$:/core/ui/TiddlerInfo/Advanced/PluginInfo}}
+<$set name="default-popup-state" value="yes">
-
+<$set name="qualified-state" value=<<qualify "$:/state/plugin-info">>>
+{{||$:/core/ui/Components/plugin-info}}
+</$set>
+</$set>
+</$set>
 </$list>

core/wiki/tags/MoreSideBar.tid

@@ -1,3 +1,3 @@
 title: $:/tags/MoreSideBar
-list: [[$:/core/ui/MoreSideBar/All]] [[$:/core/ui/MoreSideBar/Recent]] [[$:/core/ui/MoreSideBar/Tags]] [[$:/core/ui/MoreSideBar/Missing]] [[$:/core/ui/MoreSideBar/Drafts]] [[$:/core/ui/MoreSideBar/Orphans]] [[$:/core/ui/MoreSideBar/Types]] [[$:/core/ui/MoreSideBar/System]] [[$:/core/ui/MoreSideBar/Shadows]]
+list: [[$:/core/ui/MoreSideBar/All]] [[$:/core/ui/MoreSideBar/Recent]] [[$:/core/ui/MoreSideBar/Tags]] [[$:/core/ui/MoreSideBar/Missing]] [[$:/core/ui/MoreSideBar/Drafts]] [[$:/core/ui/MoreSideBar/Orphans]] [[$:/core/ui/MoreSideBar/Types]] [[$:/core/ui/MoreSideBar/System]] [[$:/core/ui/MoreSideBar/Shadows]] [[$:/core/ui/MoreSideBar/Plugins]]
 

themes/tiddlywiki/snowwhite/base.tid

@@ -88,11 +88,11 @@ canvas.tc-edit-bitmapeditor  {
 	<<background-linear-gradient "left, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0.0) 100%">>
 }
 
-.tc-more-sidebar .tc-tab-buttons button {
+.tc-more-sidebar > .tc-tab-set > .tc-tab-buttons > button {
 	<<background-linear-gradient "left, rgba(0,0,0,0.01) 0%, rgba(0,0,0,0.1) 100%">>
 }
 
-.tc-more-sidebar .tc-tab-buttons button.tc-tab-selected {
+.tc-more-sidebar > .tc-tab-set > .tc-tab-buttons > button.tc-tab-selected {
 	<<background-linear-gradient "left, rgba(0,0,0,0.05) 0%, rgba(255,255,255,0.05) 100%">>
 }
 

themes/tiddlywiki/vanilla/base.tid

@@ -1707,7 +1707,7 @@ html body.tc-body.tc-single-tiddler-window {
 	border-top: 1px solid <<colour sidebar-tab-divider>>;
 }
 
-.tc-more-sidebar .tc-tab-buttons button {
+.tc-more-sidebar > .tc-tab-set > .tc-tab-buttons > button {
 	display: block;
 	width: 100%;
 	background-color: <<colour sidebar-tab-background>>;
@@ -1718,7 +1718,7 @@ html body.tc-body.tc-single-tiddler-window {
 	margin-bottom: inherit;
 }
 
-.tc-more-sidebar .tc-tab-buttons button.tc-tab-selected {
+.tc-more-sidebar > .tc-tab-set > .tc-tab-buttons > button.tc-tab-selected {
 	background-color: <<colour sidebar-tab-background-selected>>;
 	border: none;
 }