Display gold status in userbar( Closes #1915 )

- new module option: showGold (Display gilded icon if current user has
  gold status)
- new module function updateUserSpan (If the user has gold and would
  like to, display the gilded-icon in the user span.)
- basically borrow a bunch of JS from various functions to make
  everything work smoothly.
- new import needed for nice date on hover
- also comments for things :)

lib/modules/showKarma.js

@@ -1,5 +1,5 @@
 import { $ } from '../vendor';
-import { formatNumber, getUserInfo, loggedInUser } from '../utils';
+import { formatDateDiff, formatNumber, getUserInfo, loggedInUser } from '../utils';
 
 export const module = {};
 
@@ -24,6 +24,11 @@ module.options = {
 		value: true,
 		description: 'Use commas for large karma numbers',
 	},
+	showGold: {
+		type: 'boolean',
+		value: true,
+		description: 'Display gilded icon if current user has gold status',
+	},
 };
 
 module.go = async () => {
@@ -33,6 +38,9 @@ module.go = async () => {
 		} else {
 			formatPostKarma();
 		}
+		if (module.options.showGold.value) {
+			updateUserSpan();
+		}
 	}
 };
 
@@ -62,6 +70,32 @@ async function updateKarmaDiv() {
 	}
 }
 
+// If the user has gold and would like to, display the gilded-icon in the user span.
+async function updateUserSpan() {
+	// Get the user <span> located in the userbar
+	const userSpan = document.querySelector('#header-bottom-right .user');
+
+	if (userSpan) {
+		// Let's get the user's data.
+		const { data } = await getUserInfo();
+
+		// If the user has gold, display the icon and set the title text to the
+		// time remaining till it expires.
+		if (data.is_gold) {
+			const $gilded = $('<span>', { class: 'gilded-icon' });
+
+			if (data.gold_expiration) {
+				const today = new Date();
+				const expDate = new Date(data.gold_expiration * 1000); // s -> ms
+				$gilded.attr('title', `Until ${expDate.toDateString()} (${formatDateDiff(today, expDate)})`);
+			}
+
+			// Prepend the icon to user <span> s/t it appears before the username.
+			$(userSpan).prepend($gilded);
+		}
+	}
+}
+
 function formatPostKarma(value) {
 	const container = document.querySelector('#header-bottom-right .user .userkarma');
 	value = (typeof value !== 'undefined') ? value : container.textContent;