Make highlight sidebar a singleton

client/src/helpers/highlight-sidebar.ts

@@ -1,9 +1,28 @@
-import { createApp } from 'vue';
+import { App, createApp, ref } from 'vue';
 import HighlightSidebar from '@/components/highlights/HighlightSidebar.vue';
 import autoGrow from '@/directives/auto-grow';
 import { HighlightNode } from '@/__generated__/graphql';
+
+interface Options {
+  highlight: HighlightNode;
+  onUpdateText: (text: string) => void;
+}
+
+interface Instance {
+  app: App;
+  cleanUp: () => void;
+}
+
+// track previous instance
+const previous = ref<Instance | null>(null);
+
 export default {
   open(highlight: HighlightNode) {
+    // close previous instance
+    if (previous.value) {
+      previous.value.cleanUp();
+      previous.value = null;
+    }
     const app = document.getElementById('app');
     const mountEl = document.createElement('div');
     app?.appendChild(mountEl);
@@ -20,6 +39,11 @@ export default {
       },
     });
 
+    previous.value = {
+      app: sidebar,
+      cleanUp: cleanUp,
+    };
+
     sidebar.directive('auto-grow', autoGrow); // todo: can this be done a different way? maybe use this declaration inside the component itself
 
     sidebar.mount(mountEl);