Better organisation for the tag image dropdown

core/ui/TagManager.tid

@@ -1,17 +1,27 @@
 title: $:/TagManager
 
 \define lingo-base() $:/language/TagManager/
+\define iconEditorTab(type)
+<$list filter="[all[shadows+tiddlers]is[image]] [all[shadows+tiddlers]tag[$:/tags/Image]] -[type[application/pdf]] +[sort[title]] +[$type$is[system]]">
+<$link to={{!!title}}>
+<$transclude/> <$view field="title"/>
+</$link>
+</$list>
+\end
 \define iconEditor(title)
 <div class="tw-drop-down-wrapper">
 <$edit-text field="icon" tag="input" size="20"/> <$button popup=<<qualify "$:/state/popup/icon/$title$">> class="btn-invisible btn-dropdown">{{$:/core/images/down-arrow}}</$button>
 <$reveal state=<<qualify "$:/state/popup/icon/$title$">> type="popup" position="belowleft" text="" default="">
 <div class="tw-drop-down">
 <$linkcatcher to="$title$!!icon">
-<$list filter="[all[shadows+tiddlers]is[image]] [all[shadows+tiddlers]tag[$:/tags/Image]] -[type[application/pdf]] +[sort[title]]">
-<$link to={{!!title}}>
-<$transclude/> <$view field="title"/>
-</$link>
-</$list>
+<div class="tw-dropdown-item">
+Images
+</div>
+<<iconEditorTab type:"!">>
+<div class="tw-dropdown-item">
+System Images
+</div>
+<<iconEditorTab type:"">>
 </$linkcatcher>
 </div>
 </$reveal>

themes/tiddlywiki/vanilla/base.tid

@@ -952,6 +952,7 @@ canvas.tw-edit-bitmapeditor  {
 	padding: 4px 14px 4px 14px;
 }
 
+.tw-drop-down .tw-dropdown-item,
 .tw-block-dropdown .tw-dropdown-item {
 	padding: 4px 14px 4px 7px;
 	color: <<colour muted-foreground>>;