Lots of improvements to the plugin library

* Moved “add new plugin” into a modal wizard
* Adopt big friendly buttons
* Add plugin icons and readmes to “add new plugin” modal
* Use tabs for splitting plugins/themes/languages
* Consistent styling between the “add new plugin” modal and the
“installed plugins” control panel tab
* Behind the scenes, moved from addressing the library as
`recipes/defaults/tiddlers/<etc>` to `recipes/library/tiddlers<etc>`

core/language/en-GB/ControlPanel.multids

@@ -38,8 +38,8 @@ Palette/Editor/Reset/Caption: reset
 Palette/HideEditor/Caption: hide editor
 Palette/Prompt: Current palette:
 Palette/ShowEditor/Caption: show editor
-Plugins/Add/Hint: Install new plugins
+Plugins/Add/Hint: Install plugins from the official library
-Plugins/Add/Caption: Add
+Plugins/Add/Caption: Get more plugins
 Plugins/Caption: Plugins
 Plugins/Disable/Caption: disable
 Plugins/Disable/Hint: Disable this plugin when reloading page
@@ -47,11 +47,13 @@ Plugins/Disabled/Status: (disabled)
 Plugins/Empty/Hint: None
 Plugins/Enable/Caption: enable
 Plugins/Enable/Hint: Enable this plugin when reloading page
-Plugins/Installed/Hint: Currently installed plugins
+Plugins/Installed/Hint: Currently installed plugins:
-Plugins/Installed/Caption: Installed
+Plugins/Languages/Caption: Languages
-Plugins/Language/Prompt: Languages
+Plugins/Languages/Hint: Language pack plugins
-Plugins/Plugin/Prompt: Plugins
+Plugins/Plugins/Caption: Plugins
-Plugins/Theme/Prompt: Themes
+Plugins/Plugins/Hint: Plugins
+Plugins/Themes/Caption: Themes
+Plugins/Themes/Hint: Theme plugins
 Saving/Caption: Saving
 Saving/Heading: Saving
 Saving/TiddlySpot/Advanced/Heading: Advanced Settings

core/modules/commands/savelibrarytiddlers.js

@@ -39,20 +39,44 @@ Command.prototype.execute = function() {
 		fs = require("fs"),
 		path = require("path"),
 		containerTitle = this.params[0],
-		basepath = this.params[1],
+		filter = this.params[1],
-		skinnyListTitle = this.params[2];
+		basepath = this.params[2],
+		skinnyListTitle = this.params[3];
 	// Get the container tiddler as data
 	var containerData = self.commander.wiki.getTiddlerData(containerTitle,undefined);
 	if(!containerData) {
 		return "'" + containerTitle + "' is not a tiddler bundle";
 	}
-	// Save each JSON file and collect the skinny data
+	// Filter the list of plugins
-	var skinnyList = [];
+	var pluginList = [];
 	$tw.utils.each(containerData.tiddlers,function(tiddler,title) {
+		pluginList.push(title);
+	});
+	var filteredPluginList;
+	if(filter) {
+		filteredPluginList = self.commander.wiki.filterTiddlers(filter,null,self.commander.wiki.makeTiddlerIterator(pluginList));
+	} else {
+		filteredPluginList = pluginList;
+	}
+	// Iterate through the plugins
+	var skinnyList = [];
+	$tw.utils.each(filteredPluginList,function(title) {
+		var tiddler = containerData.tiddlers[title];
+		// Save each JSON file and collect the skinny data
 		var pathname = path.resolve(self.commander.outputPath,basepath + encodeURIComponent(title) + ".json");
 		$tw.utils.createFileDirectories(pathname);
 		fs.writeFileSync(pathname,JSON.stringify(tiddler,null,$tw.config.preferences.jsonSpaces),"utf8");
-		skinnyList.push($tw.utils.extend({},tiddler,{text: undefined}));
+		// Collect the skinny list data
+		var pluginTiddlers = JSON.parse(tiddler.text),
+			readmeContent = (pluginTiddlers.tiddlers[title + "/readme"] || {}).text,
+			iconTiddler = pluginTiddlers.tiddlers[title + "/icon"] || {},
+			iconType = iconTiddler.type,
+			iconText = iconTiddler.text,
+			iconContent;
+		if(iconType && iconText) {
+			iconContent = $tw.utils.makeDataUri(iconText,iconType);
+		}
+		skinnyList.push($tw.utils.extend({},tiddler,{text: undefined, readme: readmeContent, icon: iconContent}));
 	});
 	// Save the catalogue tiddler
 	if(skinnyListTitle) {

core/modules/startup/browser-messaging.js

@@ -82,7 +82,7 @@ exports.startup = function() {
 				} else {
 					iframeInfo.domNode.contentWindow.postMessage({
 						verb: "GET",
-						url: "recipes/default/tiddlers.json",
+						url: "recipes/library/tiddlers.json",
 						cookies: {
 							type: "save-info",
 							infoTitlePrefix: paramObject.infoTitlePrefix || "$:/temp/RemoteAssetInfo/",
@@ -104,7 +104,7 @@ exports.startup = function() {
 				} else {
 					iframeInfo.domNode.contentWindow.postMessage({
 						verb: "GET",
-						url: "recipes/default/tiddlers/" + encodeURIComponent(title) + ".json",
+						url: "recipes/library/tiddlers/" + encodeURIComponent(title) + ".json",
 						cookies: {
 							type: "save-tiddler",
 							url: url

core/ui/ControlPanel/AddPlugins.tid

@@ -1,88 +0,0 @@
-title: $:/core/ui/ControlPanel/Plugins/Add
-tags: $:/tags/ControlPanel/Plugins
-caption: {{$:/language/ControlPanel/Plugins/Add/Caption}}
-
-\define lingo-base() $:/language/ControlPanel/Plugins/
-
-\define install-plugin-button()
-<$button>
-<$action-sendmessage $message="tm-load-plugin-from-library" url={{!!url}} title={{$(assetInfo)$!!original-title}}/>
-<$list filter="[<assetInfo>get[original-title]get[version]]" variable="installedVersion" emptyMessage="""install""">
-reinstall
-</$list>
-</$button>
-\end
-
-\define display-plugin-info()
-<tr>
-<td>
-<<install-plugin-button>>
-<br>
-</td>
-<td>
-''<$view tiddler=<<assetInfo>> field="description"/>''
-<br>
-<$view tiddler=<<assetInfo>> field="original-title"/>
-</td>
-<td>
-<$view tiddler=<<assetInfo>> field="version"/>
-<$list filter="[<assetInfo>get[original-title]get[version]]" variable="installedVersion">
-<br>
-<em>
-Installed:
-<br>
-<$text text=<<installedVersion>>/>
-</em>
-</$list>
-</td>
-</tr>
-\end
-
-\define load-plugin-library-button()
-<$button>
-<$action-sendmessage $message="tm-load-plugin-library" url={{!!url}} infoTitlePrefix="$:/temp/RemoteAssetInfo/"/>
-open plugin library
-</$button>
-\end
-
-\define display-server-connection()
-<$list filter="[all[tiddlers+shadows]tag[$:/tags/ServerConnection]suffix{!!url}]" variable="connectionTiddler" emptyMessage=<<load-plugin-library-button>>>
-
-Search: <$edit-text tiddler="""$:/temp/RemoteAssetSearch/$(currentTiddler)$""" default="" type="search" tag="input" focus="true"/>
-<$select tiddler="$:/temp/RemoteAssetCategory/$(currentTiddler)$" default="plugin">
-<option value="plugin">Plugins</option>
-<option value="theme">Themes</option>
-<option value="language">Languages</option>
-</$select>
-
-<$set name="pluginType" filter="[[$:/temp/RemoteAssetCategory/$(currentTiddler)$]is[tiddler]]" value={{$:/temp/RemoteAssetCategory/$(currentTiddler)$}} emptyValue="plugin">
-<table class="tc-plugin-library-listing">
-<tbody>
-<$list filter="[all[tiddlers+shadows]tag[$:/tags/RemoteAssetInfo]server-url{!!url}original-plugin-type<pluginType>search{$:/temp/RemoteAssetSearch/$(currentTiddler)$}sort[description]]" variable="assetInfo">
-<<display-plugin-info>>
-</$list>
-</tbody>
-</table>
-</$set>
-</$list>
-\end
-
-\define plugin-library-listing()
-<$list filter="[all[tiddlers+shadows]tag[$:/tags/PluginLibrary]]">
-<div class="tc-plugin-library">
-
-!! <$link><$transclude field="caption"><$view field="title"/></$transclude></$link>
-
-//<$view field="url"/>//
-
-<$transclude/>
-
-<<display-server-connection>>
-</div>
-</$list>
-\end
-
-<div>
-<<plugin-library-listing>>
-</div>
-

core/ui/ControlPanel/InstalledPlugins.tid

@@ -1,101 +0,0 @@
-title: $:/core/ui/ControlPanel/Plugins/Installed
-tags: $:/tags/ControlPanel/Plugins
-caption: {{$:/language/ControlPanel/Plugins/Installed/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">
-<$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">
-<div>
-''<$view field="description"><$view field="title"/></$view>'' $disabledMessage$
-</div>
-<div>
-<$view field="title"/>
-</div>
-<div>
-<$view field="version"/>
-</div>
-</div>
-\end
-\define plugin-table(type)
-<$set name="qualified-state" value=<<qualify "$:/state/plugin-info">>>
-<$list filter="[!has[draft.of]plugin-type[$type$]sort[description]]" emptyMessage=<<lingo "Empty/Hint">>>
-<$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">
-<$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">
-No information provided
-</$reveal>
-</div>
-</$reveal>
-</$set>
-</$list>
-</$set>
-\end
-
-! <<lingo Plugin/Prompt>>
-
-<<plugin-table plugin>>
-
-! <<lingo Theme/Prompt>>
-
-<<plugin-table theme>>
-
-! <<lingo Language/Prompt>>
-
-<<plugin-table language>>

core/ui/ControlPanel/Modals/AddPlugins.tid

@@ -0,0 +1,116 @@
+title: $:/core/ui/ControlPanel/Modals/AddPlugins
+subtitle: {{$:/core/images/download-button}} {{$:/language/ControlPanel/Plugins/Add/Caption}}
+
+\define lingo-base() $:/language/ControlPanel/Plugins/
+
+\define install-plugin-button()
+<$button>
+<$action-sendmessage $message="tm-load-plugin-from-library" url={{!!url}} title={{$(assetInfo)$!!original-title}}/>
+<$list filter="[<assetInfo>get[original-title]get[version]]" variable="installedVersion" emptyMessage="""install""">
+reinstall
+</$list>
+</$button>
+\end
+
+\define popup-state-macro()
+$:/state/add-plugin-info/$(connectionTiddler)$/$(assetInfo)$
+\end
+
+\define display-plugin-info(type)
+<$set name="popup-state" value=<<popup-state-macro>>>
+<div class="tc-plugin-info">
+<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">
+<$list filter="[<assetInfo>has[icon]]" emptyMessage="""<$transclude tiddler="$:/core/images/plugin-generic-$type$"/>""">
+<img src={{$(assetInfo)$!!icon}}/>
+</$list>
+</div>
+<div class="tc-plugin-info-chunk">
+<h1><$view tiddler=<<assetInfo>> field="description"/></h1>
+<h2><$view tiddler=<<assetInfo>> field="original-title"/></h2>
+<div><em><$view tiddler=<<assetInfo>> field="version"/></em></div>
+</div>
+<div class="tc-plugin-info-chunk">
+<<install-plugin-button>>
+</div>
+</div>
+<$reveal type="match" text="yes" state=<<popup-state>>>
+<div class="tc-plugin-info-dropdown">
+<div class="tc-plugin-info-dropdown-message">
+<$list filter="[<assetInfo>get[original-title]get[version]]" variable="installedVersion" emptyMessage="""This plugin is not currently installed""">
+<em>
+This plugin is already installed at version <$text text=<<installedVersion>>/>
+</em>
+</$list>
+</div>
+<div class="tc-plugin-info-dropdown-body">
+<$transclude tiddler=<<assetInfo>> field="readme" mode="block"/>
+</div>
+</div>
+</$reveal>
+</$set>
+\end
+
+\define load-plugin-library-button()
+<$button class="tc-btn-big-green">
+<$action-sendmessage $message="tm-load-plugin-library" url={{!!url}} infoTitlePrefix="$:/temp/RemoteAssetInfo/"/>
+{{$:/core/images/chevron-right}} open plugin library
+</$button>
+\end
+
+\define display-server-assets(type)
+Search: <$edit-text tiddler="""$:/temp/RemoteAssetSearch/$(currentTiddler)$""" default="" type="search" tag="input" focus="true"/>
+<$reveal state="""$:/temp/RemoteAssetSearch/$(currentTiddler)$""" type="nomatch" text="">
+<$button class="tc-btn-invisible">
+<$action-setfield $tiddler="""$:/temp/RemoteAssetSearch/$(currentTiddler)$""" $field="text" $value=""/>
+{{$:/core/images/close-button}}
+</$button>
+</$reveal>
+<div class="tc-plugin-library-listing">
+<$list filter="[all[tiddlers+shadows]tag[$:/tags/RemoteAssetInfo]server-url{!!url}original-plugin-type[$type$]search{$:/temp/RemoteAssetSearch/$(currentTiddler)$}sort[description]]" variable="assetInfo">
+<<display-plugin-info "$type$">>
+</$list>
+</div>
+\end
+
+\define display-server-connection()
+<$list filter="[all[tiddlers+shadows]tag[$:/tags/ServerConnection]suffix{!!url}]" variable="connectionTiddler" emptyMessage=<<load-plugin-library-button>>>
+
+<<tabs "[[$:/core/ui/ControlPanel/Plugins/Add/Plugins]] [[$:/core/ui/ControlPanel/Plugins/Add/Themes]] [[$:/core/ui/ControlPanel/Plugins/Add/Languages]]" "$:/core/ui/ControlPanel/Plugins/Add/Plugins">>
+
+</$list>
+\end
+
+\define plugin-library-listing()
+<$list filter="[all[tiddlers+shadows]tag[$:/tags/PluginLibrary]]">
+<div class="tc-plugin-library">
+
+!! <$link><$transclude field="caption"><$view field="title"/></$transclude></$link>
+
+//<$view field="url"/>//
+
+<$transclude/>
+
+<<display-server-connection>>
+</div>
+</$list>
+\end
+
+<$importvariables filter="[[$:/core/ui/PageMacros]] [all[shadows+tiddlers]tag[$:/tags/Macro]!has[draft.of]]">
+
+<div>
+<<plugin-library-listing>>
+</div>
+
+</$importvariables>

core/ui/ControlPanel/Plugins.tid

@@ -1,7 +0,0 @@
-title: $:/core/ui/ControlPanel/Plugins
-tags: $:/tags/ControlPanel
-caption: {{$:/language/ControlPanel/Plugins/Caption}}
-
-<div class="tc-control-panel">
-<<tabs "[all[shadows+tiddlers]tag[$:/tags/ControlPanel/Plugins]!has[draft.of]]" "$:/core/ui/ControlPanel/Plugins/Installed">>
-</div>

core/ui/ControlPanel/Plugins/Add/Languages.tid

@@ -0,0 +1,4 @@
+title: $:/core/ui/ControlPanel/Plugins/Add/Languages
+caption: {{$:/language/ControlPanel/Plugins/Languages/Caption}} (<$count filter="[all[tiddlers+shadows]tag[$:/tags/RemoteAssetInfo]server-url{!!url}original-plugin-type[language]]"/>)
+
+<<display-server-assets language>>

core/ui/ControlPanel/Plugins/Add/Plugins.tid

@@ -0,0 +1,4 @@
+title: $:/core/ui/ControlPanel/Plugins/Add/Plugins
+caption: {{$:/language/ControlPanel/Plugins/Plugins/Caption}}  (<$count filter="[all[tiddlers+shadows]tag[$:/tags/RemoteAssetInfo]server-url{!!url}original-plugin-type[plugin]]"/>)
+
+<<display-server-assets plugin>>

core/ui/ControlPanel/Plugins/Add/Themes.tid

@@ -0,0 +1,4 @@
+title: $:/core/ui/ControlPanel/Plugins/Add/Themes
+caption: {{$:/language/ControlPanel/Plugins/Themes/Caption}}  (<$count filter="[all[tiddlers+shadows]tag[$:/tags/RemoteAssetInfo]server-url{!!url}original-plugin-type[theme]]"/>)
+
+<<display-server-assets theme>>

core/ui/ControlPanel/Plugins/Installed/Languages.tid

@@ -0,0 +1,4 @@
+title: $:/core/ui/ControlPanel/Plugins/Installed/Languages
+caption: {{$:/language/ControlPanel/Plugins/Languages/Caption}} (<$count filter="[!has[draft.of]plugin-type[language]]"/>)
+
+<<plugin-table language>>

core/ui/ControlPanel/Plugins/Installed/Plugins.tid

@@ -0,0 +1,4 @@
+title: $:/core/ui/ControlPanel/Plugins/Installed/Plugins
+caption: {{$:/language/ControlPanel/Plugins/Plugins/Caption}} (<$count filter="[!has[draft.of]plugin-type[plugin]]"/>)
+
+<<plugin-table plugin>>

core/ui/ControlPanel/Plugins/Installed/Themes.tid

@@ -0,0 +1,4 @@
+title: $:/core/ui/ControlPanel/Plugins/Installed/Themes
+caption: {{$:/language/ControlPanel/Plugins/Themes/Caption}} (<$count filter="[!has[draft.of]plugin-type[theme]]"/>)
+
+<<plugin-table theme>>

editions/pluginlibrary/tiddlywiki.info

@@ -10,8 +10,8 @@
 	"build": {
 		"library": [
 			"--makelibrary","$:/UpgradeLibrary",
-   			"--savelibrarytiddlers","$:/UpgradeLibrary","recipes/default/tiddlers/","$:/UpgradeLibrary/List",
+   			"--savelibrarytiddlers","$:/UpgradeLibrary","[prefix[$:/]] -[[$:/plugins/tiddlywiki/upgrade]] -[[$:/plugins/tiddlywiki/translators]] -[[$:/plugins/tiddlywiki/pluginlibrary]] -[[$:/plugins/tiddlywiki/jasmine]]","recipes/library/tiddlers/","$:/UpgradeLibrary/List",
-   			"--savetiddler","$:/UpgradeLibrary/List","recipes/default/tiddlers.json",
+   			"--savetiddler","$:/UpgradeLibrary/List","recipes/library/tiddlers.json",
 			"--rendertiddler","$:/plugins/tiddlywiki/pluginlibrary/library.template.html","index.html","text/plain"]
 	}
 }

plugins/tiddlywiki/pluginlibrary/libraryserver.js

@@ -18,8 +18,8 @@ window.addEventListener("message",function listener(event){
 	console.log("plugin library: Message content",event.data);
 	switch(event.data.verb) {
 		case "GET":
-			if(event.data.url === "recipes/default/tiddlers.json") {
+			if(event.data.url === "recipes/library/tiddlers.json") {
-				// Route for recipes/default/tiddlers.json
+				// Route for recipes/library/tiddlers.json
 				event.source.postMessage({
 					verb: "GET-RESPONSE",
 					status: "200",
@@ -28,9 +28,9 @@ window.addEventListener("message",function listener(event){
 					type: "application/json",
 					body: JSON.stringify(assetList,null,4)
 				},"*");
-			} else if(event.data.url.indexOf("recipes/default/tiddlers/") === 0) {
+			} else if(event.data.url.indexOf("recipes/library/tiddlers/") === 0) {
-				var url = "recipes/default/tiddlers/" + encodeURIComponent(removePrefix(event.data.url,"recipes/default/tiddlers/"));
+				var url = "recipes/library/tiddlers/" + encodeURIComponent(removePrefix(event.data.url,"recipes/library/tiddlers/"));
-				// Route for recipes/default/tiddlers/<uri-encoded-tiddler-title>.json
+				// Route for recipes/library/tiddlers/<uri-encoded-tiddler-title>.json
 				httpGet(url,function(err,responseText) {
 					if(err) {
 						event.source.postMessage({

themes/tiddlywiki/snowwhite/base.tid

@@ -114,5 +114,5 @@ canvas.tc-edit-bitmapeditor  {
 }
 
 .tc-plugin-info {
-	<<box-shadow "2px 2px 4px rgba(0,0,0,0.2)">>
+	<<box-shadow "1px 1px 3px rgba(0,0,0,0.5)">>
 }

themes/tiddlywiki/vanilla/base.tid

@@ -1110,6 +1110,11 @@ canvas.tc-edit-bitmapeditor  {
 	line-height: 30px;
 }
 
+.tc-modal-header img, .tc-modal-header svg {
+	width: 1em;
+	height: 1em;
+}
+
 .tc-modal-body {
 	padding: 15px;
 }
@@ -1330,8 +1335,8 @@ canvas.tc-edit-bitmapeditor  {
 	display: block;
 	border: 1px solid <<colour muted-foreground>>;
 	background-colour: <<colour background>>;
-	margin: 1em 0 1em 0;
+	margin: 0.5em 0 0.5em 0;
-	padding: 8px;
+	padding: 4px;
 }
 
 .tc-plugin-info-disabled {
@@ -1360,16 +1365,46 @@ a.tc-tiddlylink.tc-plugin-info:hover svg {
 	vertical-align: middle;
 }
 
-a.tc-plugin-info img, a.tc-plugin-info svg {
+.tc-plugin-info-chunk h1 {
+	font-size: 1em;
+	margin: 2px 0 2px 0;
+}
+
+.tc-plugin-info-chunk h2 {
+	font-size: 0.8em;
+	margin: 2px 0 2px 0;
+}
+
+.tc-plugin-info-chunk div {
+	font-size: 0.7em;	
+	margin: 2px 0 2px 0;
+}
+
+.tc-plugin-info img, .tc-plugin-info svg {
 	width: 2em;
 	height: 2em;
 	fill: <<colour muted-foreground>>;
 }
 
+.tc-plugin-info.tc-small-icon img, .tc-plugin-info.tc-small-icon svg {
+	width: 1em;
+	height: 1em;
+}
+
 .tc-plugin-info-dropdown {
 	border: 1px solid <<colour muted-foreground>>;
+	margin-top: -8px;
+}
+
+.tc-plugin-info-dropdown-message {
+	background: <<colour message-background>>;
+	padding: 0.5em 1em 0.5em 1em;
+	font-weight: bold;
+	font-size: 0.8em;
+}
+
+.tc-plugin-info-dropdown-body {
 	padding: 1em 1em 1em 1em;
-	margin-top: -1em;
 }
 
 /*