feat: Update DateDisplay

- formatDate now distinguishes direction
- Update task bar options with hierarchy
- Add direction to options
- Rename setPosition to setOptions

source/code/hippie/app.js

@@ -273,9 +273,10 @@ class TimeDisplay {
 }
 
 class DateDisplay {
-	constructor(element, options) {
+	constructor(element, options, direction) {
 		this.element = element;
 		this.options = options || {year: 'numeric', month: 'long', day: 'numeric'};
+		this.direction = direction || 0;
 
 		this.updateDate();
 		this.checkForDateChange();
@@ -287,17 +288,38 @@ class DateDisplay {
 	}
 
 	formatDate(date) {
-		return new Intl.DateTimeFormat(navigator.language, this.options).format(date);
+		const formatter = new Intl.DateTimeFormat(navigator.language, this.options);
+
+		switch (this.direction) {
+			case 1:
+				const dateString = formatter
+					.formatToParts(date)
+					.map(({type, value}) => {
+						// if (type === 'day' || type === 'month') {
+						if (type === 'literal') {
+							return `${value}<br>`;
+						} else {
+							return value;
+						}
+					})
+					.join('');
+
+				return dateString;
+			case 0:
+			default:
+				return formatter.format(date);
+		}
 	}
 
 	updateDate() {
 		const now = new Date();
 
-		this.element.textContent = this.formatDate(now);
+		this.element.innerHTML = this.formatDate(now);
 	}
 
-	changeFormat(format) {
+	changeFormat(format, direction) {
 		this.options = format;
+		this.direction = direction;
 
 		this.updateDate();
 	}