From c75f50e99a154e1939721bb9d24d4e54de85530d Mon Sep 17 00:00:00 2001
From: Jeremy Ruston <jeremy@jermolene.com>
Date: Thu, 9 Jan 2025 14:51:48 +0000
Subject: [PATCH] Fix palette switcher used in the sidebar

by adding a new "thumbnails" parameter to the template
---
 core/language/en-GB/ControlPanel.multids |  1 +
 core/ui/ControlPanel/Palette.tid         | 13 ++++++++++---
 core/wiki/paletteswitcher.tid            | 19 +++++++++----------
 themes/tiddlywiki/vanilla/base.tid       | 13 ++++---------
 4 files changed, 24 insertions(+), 22 deletions(-)

diff --git a/core/language/en-GB/ControlPanel.multids b/core/language/en-GB/ControlPanel.multids
index 129dab0b4..b095ffc5f 100644
--- a/core/language/en-GB/ControlPanel.multids
+++ b/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
diff --git a/core/ui/ControlPanel/Palette.tid b/core/ui/ControlPanel/Palette.tid
index 0d22d9743..3cac62122 100644
--- a/core/ui/ControlPanel/Palette.tid
+++ b/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[]] %>
-		<$transclude $tiddler=<<paletteEditor>> $mode="block"/>
+		<div>
+			<<lingo CustomEditor/Prompt>>
+			<$transclude $tiddler=<<paletteEditor>> $mode="block"/>
+		</div>
 	<%endif%>
 </$let>
 
diff --git a/core/wiki/paletteswitcher.tid b/core/wiki/paletteswitcher.tid
index 6ea2d1711..81052e9c5 100644
--- a/core/wiki/paletteswitcher.tid
+++ b/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]]}$`>
-					{{||$:/snippets/currpalettepreview}}
-					<div class="tc-chooser-item-description">
-						''<$view field="name" format="text"/>''
-						<div class="tc-chooser-item-subtitle">
-							<$view field="description" format="text"/>
-						</div>
-					</div>
+					<%if [<thumbnails>match[yes]] %>
+						{{||$:/snippets/currpalettepreview}}
+					<%endif%>
+					''<$view field="name" format="text"/>''
+					<br>
+					<$view field="description" format="text"/>
 				</$link>
 			</div>
 		</$list>
 	</div>
 </$linkcatcher>
-
-{{$:/snippets/palettetests}}
diff --git a/themes/tiddlywiki/vanilla/base.tid b/themes/tiddlywiki/vanilla/base.tid
index 1a7ddd402..51a1a0159 100644
--- a/themes/tiddlywiki/vanilla/base.tid
+++ b/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;