Fix palette switcher used in the sidebar

by adding a new "thumbnails" parameter to the template

core/language/en-GB/ControlPanel.multids

@@ -57,6 +57,7 @@ LayoutSwitcher/Caption: Layout
 LoadedModules/Caption: Loaded Modules
 LoadedModules/Hint: These are the currently loaded tiddler modules linked to their source tiddlers. Any italicised modules lack a source tiddler, typically because they were setup during the boot process.
 Palette/Caption: Palette
+Palette/CustomEditor/Prompt: Custom editor for current palette:
 Palette/Editor/Clone/Caption: clone
 Palette/Editor/Clone/Prompt: It is recommended that you clone this shadow palette before editing it
 Palette/Editor/Delete/Hint: delete this entry from the current palette

core/ui/ControlPanel/Palette.tid

@@ -4,11 +4,18 @@ caption: {{$:/language/ControlPanel/Palette/Caption}}
 
 \define lingo-base() $:/language/ControlPanel/Palette/
 
-{{$:/snippets/paletteswitcher}}
+<$transclude $tiddler="$:/snippets/paletteswitcher" thumbnails="yes"/>
 
-<$let paletteEditor={{{ [{$:/palette}get[editor]] :else[{$:/palette}get[palette-import]!match[]get[editor]] }}}>
+{{$:/snippets/palettetests}}
+
+<$let
+	paletteEditor={{{ [{$:/palette}get[editor]] :else[{$:/palette}get[palette-import]!match[]get[editor]] }}}
+>
 	<%if [<paletteEditor>!match[]] %>
+		<div>
+			<<lingo CustomEditor/Prompt>>
 			<$transclude $tiddler=<<paletteEditor>> $mode="block"/>
+		</div>
 	<%endif%>
 </$let>
 

core/wiki/paletteswitcher.tid

@@ -1,26 +1,25 @@
 title: $:/snippets/paletteswitcher
 
+\parameters (thumbnails)
+
 \whitespace trim
 \procedure actions()
 <$transclude $variable="actions-switch-colour-palette" paletteTitle=<<navigateTo>>/>
 \end actions
 
 <$linkcatcher actions=<<actions>>>
-	<div class="tc-chooser tc-chooser-cards">
+	<div class={{{ tc-chooser [<thumbnails>match[yes]then[tc-chooser-cards]] +[join[ ]] }}}>
 		<$list filter="[all[shadows+tiddlers]tag[$:/tags/Palette]sort[name]]">
 			<div class={{{ [<currentTiddler>match{$:/palette}then[tc-chosen]] tc-chooser-item +[join[ ]] }}}>
 				<$link to={{!!title}} aria-label=`${[[$:/language/ControlPanel/Palette/Caption]get[text]]}$ - ${[all[current]get[name]]}$. ${[all[current]get[description]]}$`>
+					<%if [<thumbnails>match[yes]] %>
 						{{||$:/snippets/currpalettepreview}}
-					<div class="tc-chooser-item-description">
+					<%endif%>
 					''<$view field="name" format="text"/>''
-						<div class="tc-chooser-item-subtitle">
+					<br>
 					<$view field="description" format="text"/>
-						</div>
-					</div>
 				</$link>
 			</div>
 		</$list>
 	</div>
 </$linkcatcher>
-
-{{$:/snippets/palettetests}}

themes/tiddlywiki/vanilla/base.tid

@@ -2830,8 +2830,11 @@ a.tc-tiddlylink.tc-plugin-info:hover > .tc-plugin-info-chunk .tc-plugin-info-sta
 }
 
 .tc-chooser.tc-chooser-cards {
+	border-radius: 6px;
+	background-color: <<colour table-header-background>>;
 	display: flex;
 	flex-wrap: wrap;
+	border: none;
 }
 
 .tc-chooser-item {
@@ -2841,6 +2844,7 @@ a.tc-tiddlylink.tc-plugin-info:hover > .tc-plugin-info-chunk .tc-plugin-info-sta
 }
 
 .tc-chooser.tc-chooser-cards .tc-chooser-item {
+	background-color: <<colour background>>;
 	width: 220px;
 	margin: 0.5em;
 	padding: 6px;
@@ -2897,15 +2901,6 @@ a.tc-tiddlylink.tc-plugin-info:hover > .tc-plugin-info-chunk .tc-plugin-info-sta
 	vertical-align: middle;
 }
 
-.tc-chooser-item .tc-chooser-item-description {
-	padding: 3px;
-}
-
-.tc-chooser-item .tc-chooser-item-subtitle {
-	font-size: 0.8em;
-	line-height: 1.2;
-}
-
 .tc-language-chooser .tc-image-button img {
 	max-width: 2em;
 	max-height: 1em;