Better updating of decorations

type/web.ts

@@ -4,8 +4,8 @@ import { AppCommand } from "../lib/command.ts";
 import { defaultSettings } from "$common/settings.ts";
 import {
   ActionButton,
-  EmojiConfig,
   Decoration,
+  EmojiConfig,
   FilterOption,
   Notification,
   PanelMode,
@@ -125,6 +125,7 @@ export type Action =
   | { type: "page-changed" }
   | { type: "page-saved" }
   | { type: "sync-change"; syncSuccess: boolean }
+  | { type: "update-current-page-meta"; meta: PageMeta }
   | { type: "update-page-list"; allPages: PageMeta[] }
   | { type: "settings-loaded"; settings: BuiltinSettings }
   | { type: "start-navigate"; mode: "page" | "meta" }

web/client.ts

@@ -713,6 +713,18 @@ export class Client {
                   this.currentPage,
                   meta,
                 );
+                const enrichedMeta = await this.clientSystem.getObjectByRef<
+                  PageMeta
+                >(
+                  this.currentPage,
+                  "page",
+                  this.currentPage,
+                );
+                this.ui.viewDispatch({
+                  type: "update-current-page-meta",
+                  meta: enrichedMeta,
+                });
+
                 resolve();
               })
               .catch((e) => {

web/client_system.ts

@@ -240,4 +240,11 @@ export class ClientSystem extends CommonSystem {
       ["index.queryObjects", tag, query],
     );
   }
+
+  getObjectByRef<T>(page: string, tag: string, ref: string) {
+    return this.localSyscall(
+      "system.invokeFunction",
+      ["index.getObjectByRef", page, tag, ref],
+    );
+  }
 }

web/cm_plugins/wiki_link.ts

@@ -66,9 +66,12 @@ export function cleanWikiLinkPlugin(client: Client) {
           }
           return;
         }
-        const pageMeta = client.ui.viewState.allPages.find(p => p.name == url);
+        const pageMeta = client.ui.viewState.allPages.find((p) =>
+          p.name == url
+        );
         const linkText = alias ||
-          (pageMeta?.pageDecorations.prefix ?? "") + (url.includes("/") ? url.split("/").pop()! : url);
+          (pageMeta?.pageDecorations?.prefix ?? "") +
+            (url.includes("/") ? url.split("/").pop()! : url);
 
         // And replace it with a widget
         widgets.push(

web/reducer.ts

@@ -1,6 +1,6 @@
+import { Decoration } from "$lib/web.ts";
 import { PageMeta } from "../plug-api/types.ts";
 import { Action, AppViewState } from "../type/web.ts";
-import { PageState } from "./navigator.ts";
 
 export default function reducer(
   state: AppViewState,
@@ -22,11 +22,13 @@ export default function reducer(
       };
     case "page-loaded": {
       const mouseDetected = window.matchMedia("(pointer:fine)").matches;
-      const pageMeta = state.allPages.find(p => p.name == action.meta.name);
-      const decor = state.settings.decorations?.filter(d => pageMeta?.tags?.some(t => d.tag === t));
+      const pageMeta = state.allPages.find((p) => p.name == action.meta.name);
+      const decor = state.settings.decorations?.filter((d) =>
+        pageMeta?.tags?.some((t) => d.tag === t)
+      );
       if (decor && decor.length > 0) {
         const mergedDecorations = decor.reduceRight((accumulator, el) => {
-          accumulator = {...accumulator, ...el};
+          accumulator = { ...accumulator, ...el };
           return accumulator;
         });
         if (mergedDecorations) {
@@ -52,11 +54,26 @@ export default function reducer(
         ...state,
         unsavedChanges: true,
       };
-    case "page-saved":
+    case "page-saved": {
       return {
         ...state,
         unsavedChanges: false,
       };
+    }
+    case "update-current-page-meta": {
+      if (state.settings.decorations) {
+        decoratePageMeta(
+          action.meta,
+          "",
+          action.meta,
+          state.settings.decorations,
+        );
+      }
+      return {
+        ...state,
+        currentPageMeta: action.meta,
+      };
+    }
     case "sync-change":
       return {
         ...state,
@@ -81,22 +98,13 @@ export default function reducer(
         if (oldPageMetaItem && oldPageMetaItem.lastOpened) {
           pageMeta.lastOpened = oldPageMetaItem.lastOpened;
         }
-        const decor = state.settings.decorations?.filter(d => pageMeta.tags?.some((t: any) => d.tag === t));
-        // Page can have multiple decorations applied via different tags, accumulate them.
-        // The decorations higher in the decorations list defined in SETTINGS gets
-        // higher precedence.
-        if (decor && decor.length > 0) {
-          const mergedDecorations = decor.reduceRight((accumulator, el) => {
-            accumulator = {...accumulator, ...el};
-            return accumulator;
-          });
-          if (mergedDecorations) {
-            const { tag, ...currPageDecorations} = mergedDecorations;
-            pageMeta.pageDecorations = currPageDecorations;
-            if (pageMeta.name === state.currentPage) {
-              currPageMeta!.pageDecorations = currPageDecorations;
-            }
-          }
+        if (state.settings.decorations) {
+          decoratePageMeta(
+            pageMeta,
+            state.currentPage!,
+            currPageMeta,
+            state.settings.decorations,
+          );
         }
       }
       return {
@@ -237,5 +245,34 @@ export default function reducer(
         progressPerc: action.progressPerc,
       };
   }
-  return state;
+}
+
+/**
+ * Decorates (= attaches a pageDecorations field) to the pageMeta object when a matching decorator is found
+ */
+function decoratePageMeta(
+  pageMeta: PageMeta,
+  currentPage: string,
+  currPageMeta: PageMeta,
+  decorations: Decoration[],
+) {
+  const decor = decorations.filter((d) =>
+    pageMeta.tags?.some((t: any) => d.tag === t)
+  );
+  // Page can have multiple decorations applied via different tags, accumulate them.
+  // The decorations higher in the decorations list defined in SETTINGS gets
+  // higher precedence.
+  if (decor && decor.length > 0) {
+    const mergedDecorations = decor.reduceRight((accumulator, el) => {
+      accumulator = { ...accumulator, ...el };
+      return accumulator;
+    });
+    if (mergedDecorations) {
+      const { tag, ...currPageDecorations } = mergedDecorations;
+      pageMeta.pageDecorations = currPageDecorations;
+      if (pageMeta.name === currentPage) {
+        currPageMeta!.pageDecorations = currPageDecorations;
+      }
+    }
+  }
 }

web/styles/main.scss

@@ -215,6 +215,11 @@ body {
   padding: 1px;
   margin-right: 3px;
   font-family: var(--ui-font);
+
+  &:empty {
+    margin-right: 0;
+    padding: 0;
+  }
 }
 
 .sb-panel {