feat: Integrate date in task bar

- Date format can now be changed dynamically
- Date element is now created in task bar class
- Class can accept options, currently only for date
- Date format is changed according to position
- Changed dom structure for clock
- Refactor setPosition method to be more flexible
- Changed flex style for task bar items to inherit the direction

source/screens/demo/examples/ui/windows.liquid

@@ -29,9 +29,10 @@ tags:
 			<button><i class="bi bi-mic"></i></button>
 			<button><i class="bi bi-volume-down"></i></button>
 		</nav>
-		<nav class="clock">
-			<span><span id="time">##:##</span><br><span id="date">TT.MM.JJJJ</span></span>
-		</nav>
+		<div class="clock">
+			<span id="time">##:##</span>
+			<br>
+		</div>
 		<nav>
 			<button data-action="notification"><i class="bi bi-bell-fill"></i></button>
 		</nav>
@@ -42,6 +43,7 @@ tags:
 {% endblock %}
 
 {%- block script %}
+<script src="{{ pageBase }}js/globals.js"></script>
 <script src="{{ pageBase }}js/app.js"></script>
 <script src="{{ pageBase }}js/windows.js"></script>
 <script>
@@ -59,10 +61,6 @@ tags:
 	const timeElement = document.getElementById('time');
 	const timeFormat = {hour: '2-digit', minute: '2-digit'};
 	const timeDisplay = new TimeDisplay(timeElement, timeFormat);
-	const dateElement = document.getElementById('date');
-	const dateFormat = {year: 'numeric', month: '2-digit', day: '2-digit'}
-	const dateDisplay = new DateDisplay(dateElement, dateFormat);
-
 
 	document.getElementById('pauseButton').addEventListener('click', () => {
 		timeDisplay.pause();