Make entire ui store state public

gdn-app/src/App.vue

@@ -10,7 +10,7 @@ window.addEventListener("keypress", (ev) => {
   if (document.activeElement !== document.body) return;
 
   if (ev.key === "Escape") {
-    if (ui.mode !== "focus") {
+    if (ui.mode.type !== "focus") {
       ui.focus();
       return;
     }

gdn-app/src/stores/ui.ts

@@ -1,6 +1,6 @@
 import { Segment, Path as UiPath } from "@/lib/path";
 import { defineStore } from "pinia";
-import { computed, ref, watchEffect } from "vue";
+import { ref, watchEffect } from "vue";
 
 interface HistoryEntry {
   anchorId: string;
@@ -17,22 +17,22 @@ export const useUiStore = defineStore("ui", () => {
   const history = ref<HistoryEntry[]>([]);
 
   // Managed by history
-  const _anchorId = ref<string>();
-  const _focusPath = ref<UiPath>(new UiPath());
+  const anchorId = ref<string>();
+  const focusPath = ref<UiPath>(new UiPath());
   const openPaths = ref<Set<string>>(new Set());
 
-  const _mode = ref<Mode>({ type: "focus" });
+  const mode = ref<Mode>({ type: "focus" });
   const pinned = ref<{ segment: Segment; parentId?: string }>();
 
   // Ensure the currently focused note is visible.
   watchEffect(() => {
-    if (_mode.value.type === "insert") {
-      for (const ancestor of _mode.value.path.ancestors()) {
+    if (mode.value.type === "insert") {
+      for (const ancestor of mode.value.path.ancestors()) {
         setOpen(ancestor, true);
       }
     } else {
       // The node pointed to by the path itself doesn't need to be unfolded.
-      for (const ancestor of _focusPath.value.ancestors().slice(1)) {
+      for (const ancestor of focusPath.value.ancestors().slice(1)) {
         setOpen(ancestor, true);
       }
     }
@@ -42,22 +42,20 @@ export const useUiStore = defineStore("ui", () => {
   // History and anchor management //
   ///////////////////////////////////
 
-  const anchorId = computed(() => _anchorId.value); // Getter
-
   function pushAnchorId(id: string): void {
-    if (_anchorId.value) {
+    if (anchorId.value) {
       history.value.push({
-        anchorId: _anchorId.value,
-        focusPath: _focusPath.value,
+        anchorId: anchorId.value,
+        focusPath: focusPath.value,
         openPaths: openPaths.value,
       });
     }
 
-    _anchorId.value = id;
-    _focusPath.value = new UiPath();
+    anchorId.value = id;
+    focusPath.value = new UiPath();
     openPaths.value = new Set();
 
-    _mode.value = { type: "focus" };
+    mode.value = { type: "focus" };
   }
 
   function popAnchorId(): void {
@@ -66,55 +64,52 @@ export const useUiStore = defineStore("ui", () => {
 
     const entry = history.value.pop();
     if (entry) {
-      _anchorId.value = entry.anchorId;
-      _focusPath.value = entry.focusPath;
+      anchorId.value = entry.anchorId;
+      focusPath.value = entry.focusPath;
       openPaths.value = entry.openPaths;
     } else {
-      _anchorId.value = undefined;
-      _focusPath.value = new UiPath();
+      anchorId.value = undefined;
+      focusPath.value = new UiPath();
       openPaths.value = new Set();
     }
 
-    _mode.value = { type: "focus" };
+    mode.value = { type: "focus" };
   }
 
   ///////////////////////////////
   // Mode and focus management //
   ///////////////////////////////
 
-  const mode = computed(() => _mode.value.type);
-  const focusPath = computed(() => _focusPath.value);
-
   function isFocused(path: UiPath): boolean {
-    return _mode.value.type === "focus" && _focusPath.value.eq(path);
+    return mode.value.type === "focus" && focusPath.value.eq(path);
   }
 
   function isEditing(path: UiPath): boolean {
-    return _mode.value.type === "edit" && _mode.value.path.eq(path);
+    return mode.value.type === "edit" && mode.value.path.eq(path);
   }
 
   function getInsertIndex(path: UiPath): number | undefined {
-    if (_mode.value.type !== "insert") return;
-    if (!_mode.value.path.eq(path)) return;
-    if (_mode.value.index < 0) return;
-    return _mode.value.index;
+    if (mode.value.type !== "insert") return;
+    if (!mode.value.path.eq(path)) return;
+    if (mode.value.index < 0) return;
+    return mode.value.index;
   }
 
   function focus(): void {
-    _mode.value = { type: "focus" };
+    mode.value = { type: "focus" };
   }
 
   function focusOn(path: UiPath): void {
     focus();
-    _focusPath.value = path;
+    focusPath.value = path;
   }
 
   function edit(path: UiPath): void {
-    _mode.value = { type: "edit", path };
+    mode.value = { type: "edit", path };
   }
 
   function insertAt(path: UiPath, index: number): void {
-    _mode.value = { type: "insert", path, index };
+    mode.value = { type: "insert", path, index };
   }
 
   //////////////////
@@ -132,7 +127,7 @@ export const useUiStore = defineStore("ui", () => {
       openPaths.value.add(path.fmt());
     } else if (!value && isOpen(path)) {
       // Move the focusPath if necessary
-      if (path.isPrefixOf(_focusPath.value)) _focusPath.value = path;
+      if (path.isPrefixOf(focusPath.value)) focusPath.value = path;
 
       openPaths.value.delete(path.fmt());
     }
@@ -160,21 +155,32 @@ export const useUiStore = defineStore("ui", () => {
   }
 
   return {
+    history,
     anchorId,
+    focusPath,
+    openPaths,
+    mode,
+    pinned,
+
+    // History and anchor management
     pushAnchorId,
     popAnchorId,
+
+    // Mode and focus management
     isFocused,
     isEditing,
     getInsertIndex,
-    mode,
-    focusPath,
     focus,
     focusOn,
     edit,
     insertAt,
+
+    // Node folding
     isOpen,
     setOpen,
     toggleOpen,
+
+    // Pinning
     isPinned,
     setPinned,
     unsetPinned,