Enhance tiddler title for system tiddlers

Now the $:/ part of the name is rendered in grey, making the main part
of the title more prominent.

@tobibeer suggested this a long time ago; good idea!

core/language/en-GB/Misc.multids

@@ -3,3 +3,4 @@ title: $:/language/
 RecentChanges/DateFormat: DDth MMM YYYY
 CloseAll/Button: close all
 MissingTiddler/Hint: Missing tiddler "<$text text=<<currentTiddler>>/>" - click {{$:/core/images/edit-button}} to create
+SystemTiddler/Tooltip: This is a system tiddler

core/modules/filters/removeprefix.js

@@ -0,0 +1,40 @@
+/*\
+title: $:/core/modules/filters/removeprefix.js
+type: application/javascript
+module-type: filteroperator
+
+Filter operator for removing a prefix from each title in the list. Titles that do not start with the prefix are removed.
+
+\*/
+(function(){
+
+/*jslint node: true, browser: true */
+/*global $tw: false */
+"use strict";
+
+/*
+Export our filter function
+*/
+exports.removeprefix = function(source,operator,options) {
+	var results = [];
+	// Function to check an individual title
+	function checkTiddler(title) {
+		var match = title.substr(0,operator.operand.length).toLowerCase() === operator.operand.toLowerCase();
+		if(match) {
+			results.push(title.substr(operator.operand.length));
+		}
+	}
+	// Iterate through the source tiddlers
+	if($tw.utils.isArray(source)) {
+		$tw.utils.each(source,function(title) {
+			checkTiddler(title);
+		});
+	} else {
+		$tw.utils.each(source,function(element,title) {
+			checkTiddler(title);
+		});
+	}
+	return results;
+};
+
+})();

core/ui/ViewTemplate/title.tid

@@ -4,12 +4,33 @@ tags: $:/tags/ViewTemplate
 \define title-styles()
 fill:$(foregroundColor)$;
 \end
-<div class="tw-tiddler-title"><div class="titlebar"><span class="tw-tiddler-controls"><$list filter="[is[shadow]!has[draft.of]tag[$:/tags/ViewToolbar]] [!is[shadow]!has[draft.of]tag[$:/tags/ViewToolbar]] +[tag[$:/tags/ViewToolbar]]" variable="listItem"><$transclude tiddler=<<listItem>>/></$list>
+<div class="tw-tiddler-title">
-
+<div class="titlebar">
-</span><$set name="foregroundColor" value={{!!color}}><span style=<<title-styles>>><$transclude tiddler={{!!icon}}/></span></$set> <span class="title"><$view field="title"/></span></div>
+<span class="tw-tiddler-controls">
+<$list filter="[is[shadow]!has[draft.of]tag[$:/tags/ViewToolbar]] [!is[shadow]!has[draft.of]tag[$:/tags/ViewToolbar]] +[tag[$:/tags/ViewToolbar]]" variable="listItem">
+<$transclude tiddler=<<listItem>>/>
+</$list>
+</span>
+<$set name="foregroundColor" value={{!!color}}>
+<span style=<<title-styles>>>
+<$transclude tiddler={{!!icon}}/>
+</span>
+</$set>
+<$list filter="[is[current]removeprefix[$:/]]">
+<span class="title" title={{$:/language/SystemTiddler/Tooltip}}>
+<span class="tw-system-title-prefix">$:/</span><$text text=<<currentTiddler>>/>
+</span>
+</$list>
+<$list filter="[is[current]!prefix[$:/]]">
+<span class="title">
+<$view field="title"/>
+</span>
+</$list>
+</div>
 
 <$reveal type="nomatch" text="" default="" state=<<tiddlerInfoState>> class="tw-tiddler-info tw-popup" animate="yes" retain="yes">
 
 <$transclude tiddler="$:/core/ui/TiddlerInfo"/>
 
-</$reveal></div>
+</$reveal>
+</div>

themes/tiddlywiki/vanilla/base.tid

@@ -492,6 +492,10 @@ a.tw-tiddlylink-external:hover {
 	color: <<colour tiddler-title-foreground>>;
 }
 
+.tw-system-title-prefix {
+	color: <<colour muted-foreground>>;
+}
+
 .titlebar img {
 	height: 1em;
 }