Refactor CanvasView: externalize styles and tooltips

Moved inline CSS from CanvasView.js to a dedicated canvas_view.css file and added dynamic stylesheet loading. Extracted tooltip and shortcut HTML into separate template files and implemented a ResourceManager utility for loading stylesheets and templates. Updated CanvasInteractions.js and CanvasView.js to use the new resource management and template loading approach, improving maintainability and modularity.

js/utils/ResourceManager.js

@@ -0,0 +1,30 @@
+import {$el} from "../../../scripts/ui.js";
+
+export function addStylesheet(url) {
+    if (url.endsWith(".js")) {
+        url = url.substr(0, url.length - 2) + "css";
+    }
+    $el("link", {
+        parent: document.head,
+        rel: "stylesheet",
+        type: "text/css",
+        href: url.startsWith("http") ? url : getUrl(url),
+    });
+}
+
+export function getUrl(path, baseUrl) {
+    if (baseUrl) {
+        return new URL(path, baseUrl).toString();
+    } else {
+        return new URL("../" + path, import.meta.url).toString();
+    }
+}
+
+export async function loadTemplate(path, baseUrl) {
+    const url = getUrl(path, baseUrl);
+    const response = await fetch(url);
+    if (!response.ok) {
+        throw new Error(`Failed to load template: ${url}`);
+    }
+    return await response.text();
+}