Add bootstrap-icons, make sidebar work with bundle logic

I'm starting to get a sense how to do all of this with these new tools.
I've semi-ported the sidebar at this point.

build.js

@@ -13,7 +13,7 @@ const config = {
 	plugins: [
 		sassPlugin({
 			quietDeps: true,
-			silenceDeprecations: ["import"], // silence known issue with Bootstrap #40962
+			silenceDeprecations: ["import"],
 			type: "css",
 		}),
 		vue(),
@@ -26,10 +26,14 @@ const config = {
 	minify,
 	loader: {
 		".css": "css",
+		".woff": "file",
+		".woff2": "file",
+		".ttf": "file",
+		".eot": "file",
 	},
 	outdir: "static/gen",
 	outbase: "ts",
-	assetNames: "css/[name]",
+	assetNames: "fonts/[name]",
 };
 
 if (watch) {

html/template/sync/layout/authenticated.html

@@ -10,9 +10,7 @@
 		<script src="/static/js/events.js"></script>
 		<script src="{{ bundlePathJS }}"></script>
 		{{ block "extraheader" . }}{{ end }}
-		<script>
-			const USER = {{ .User.AsJSON|json }};
-		</script> {{ if not .Config.IsProductionEnvironment }}
+		{{ if not .Config.IsProductionEnvironment }}
 			<script src="/.flogo/injector.js"></script>
 		{{ end }}
 	</head>

ts/main.ts

@@ -5,6 +5,8 @@ import { SSEManager } from './sse-manager';
 import { SetupSidebar } from "./sidebar";
 import 'maplibre-gl/dist/maplibre-gl.css';
 
+// Import Bootstrap Icons CSS
+import 'bootstrap-icons/font/bootstrap-icons.css';
 // Import Bootstrap SCSS
 import './style/style.scss';
 
@@ -37,6 +39,24 @@ document.addEventListener("DOMContentLoaded", () => {
 	SSEManager.connect("/api/events");
 	SetupSidebar();
 });
+	document.addEventListener("alpine:init", () => {
+		 const user = {
+			"display_name":"",
+			"initials":"",
+			"notifications":[],
+			"notification_counts":{
+				"communication":0,
+				"home":0,
+				"review":0
+			},
+			"organization":{
+				"name":""
+			},
+			"role":"",
+			"username":""
+		};
+		 Alpine.store("user",user);
+	})
 interface GreetingComponent {
     message: string;
     name: string;

ts/sidebar.ts

@@ -1,5 +1,4 @@
 export function SetupSidebar() {
-	console.log("setting up sidebar");
 	var popoverTriggerList = [].slice.call(
 		document.querySelectorAll('[data-bs-toggle="popover"]'),
 	);
@@ -23,9 +22,6 @@ export function SetupSidebar() {
 			updateUserState();
 		}
 	});
-	document.addEventListener("alpine:init", () => {
-		Alpine.store("user", USER);
-	})
 	document.getElementById("sidebarToggle").addEventListener("click", () => {
 		const sidebar = document.getElementById("sidebar");
 		sidebar.classList.toggle("collapsed");
@@ -36,6 +32,7 @@ export function SetupSidebar() {
 			(!sidebar.classList.contains("collapsed")).toString(),
 		);
 	});
+	updateUserState();
 }
 function restoreLocalStorage() {
 	const expanded = localStorage.getItem("sidebar.expanded");

ts/style/style.scss

@@ -60,4 +60,7 @@ i.bi svg {
 // Import all of Bootstrap (or pick specific components)
 @import "bootstrap/scss/bootstrap";
 
+// Import Bootstrap Icons
+//@import "bootstrap-icons/font/bootstrap-icons.scss";
+
 @import "./sidebar.scss";