Fix frontend HMR so the page doesn't break upon saving TS files and restructure frontend architecture (#3871)

* Clean up component setup/tear-down side effects

* Clean up more component setup/tear-down side effects

* Remove nonfunctional debouncer

* Clean up even more component setup/tear-down side effects

* Reuse backend state

* Fix HMR for IO Managers and for State Providers

* Rename IO Managers -> Managers and State Providers -> Stores

* Restructure and partially flatten managers/stores

* Code review fixes

* Review fixes

frontend/src/managers/localization.ts

@@ -0,0 +1,43 @@
+import type { Editor } from "@graphite/editor";
+
+let currentCleanup: (() => void) | undefined;
+let currentArgs: [Editor] | undefined;
+
+export function createLocalizationManager(editor: Editor) {
+	currentArgs = [editor];
+
+	// Subscribe to process backend event
+	editor.subscriptions.subscribeFrontendMessage("TriggerAboutGraphiteLocalizedCommitDate", (data) => {
+		const localized = localizeTimestamp(data.commitDate);
+		editor.handle.requestAboutGraphiteDialogWithLocalizedCommitDate(localized.timestamp, localized.year);
+	});
+
+	function destroy() {
+		editor.subscriptions.unsubscribeFrontendMessage("TriggerAboutGraphiteLocalizedCommitDate");
+	}
+
+	currentCleanup = destroy;
+	return { destroy };
+}
+export type LocalizationManager = ReturnType<typeof createLocalizationManager>;
+
+function localizeTimestamp(utc: string): { timestamp: string; year: string } {
+	// Timestamp
+	const date = new Date(utc);
+	if (Number.isNaN(date.getTime())) return { timestamp: utc, year: `${new Date().getFullYear()}` };
+
+	const timezoneName = Intl.DateTimeFormat(undefined, { timeZoneName: "longGeneric" })
+		.formatToParts(new Date())
+		.find((part) => part.type === "timeZoneName");
+
+	const dateString = `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, "0")}-${String(date.getDate()).padStart(2, "0")}`;
+	const timeString = `${String(date.getHours()).padStart(2, "0")}:${String(date.getMinutes()).padStart(2, "0")}`;
+	const timezoneNameString = timezoneName?.value;
+	return { timestamp: `${dateString} ${timeString} ${timezoneNameString}`, year: String(date.getFullYear()) };
+}
+
+// Self-accepting HMR: tear down the old instance and re-create with the new module's code
+import.meta.hot?.accept((newModule) => {
+	currentCleanup?.();
+	if (currentArgs) newModule?.createLocalizationManager(...currentArgs);
+});