chore(client): address requested changes

apps/client/src/entities/fnote.ts

@@ -700,6 +700,15 @@ export default class FNote {
         return this.hasAttribute(LABEL, name);
     }
 
+    /**
+     * Returns `true` if the note has a label with the given name (same as {@link hasOwnedLabel}), or it has a label with the `disabled:` prefix (for example due to a safe import).
+     * @param name the name of the label to look for.
+     * @returns `true` if the label exists, or its version with the `disabled:` prefix.
+     */
+    hasLabelOrDisabled(name: string) {
+        return this.hasLabel(name) || this.hasLabel(`disabled:${name}`);
+    }
+
     /**
      * @param name - label name
      * @returns true if label exists (including inherited) and does not have "false" value.

apps/client/src/stylesheets/theme-next-dark.css

@@ -210,6 +210,7 @@
     --badge-share-background-color: #4d4d4d;
     --badge-clipped-note-background-color: #295773;
     --badge-execute-background-color: #604180;
+    --badge-active-content-background-color: rgb(12, 68, 70);
 
     --note-icon-background-color: #444444;
     --note-icon-color: #d4d4d4;
@@ -238,9 +239,9 @@
 
     --bottom-panel-background-color: #11111180;
     --bottom-panel-title-bar-background-color: #3F3F3F80;
-    
+
     --status-bar-border-color: var(--main-border-color);
-    
+
     --scrollbar-thumb-color: #fdfdfd5c;
     --scrollbar-thumb-hover-color: #ffffff7d;
     --scrollbar-background-color: transparent;
@@ -351,4 +352,4 @@ body .todo-list input[type="checkbox"]:not(:checked):before {
 .note-split.with-hue *::selection,
 .quick-edit-dialog-wrapper.with-hue *::selection {
     --selection-background-color: hsl(var(--custom-color-hue), 49.2%, 35%);
-}
+}

apps/client/src/stylesheets/theme-next-light.css

@@ -202,6 +202,7 @@
     --badge-share-background-color: #6b6b6b;
     --badge-clipped-note-background-color: #2284c0;
     --badge-execute-background-color: #7b47af;
+    --badge-active-content-background-color: rgb(27, 164, 168);
 
     --note-icon-background-color: #4f4f4f;
     --note-icon-color: white;
@@ -322,4 +323,4 @@
 .note-split.with-hue *::selection,
 .quick-edit-dialog-wrapper.with-hue *::selection {
     --selection-background-color: hsl(var(--custom-color-hue), 60%, 90%);
-}
+}

apps/client/src/translations/en/translation.json

@@ -2288,5 +2288,27 @@
   },
   "bookmark_buttons": {
     "bookmarks": "Bookmarks"
+  },
+  "active_content_badges": {
+    "type_icon_pack": "Icon pack",
+    "type_backend_script": "Backend script",
+    "type_frontend_script": "Frontend script",
+    "type_widget": "Widget",
+    "type_app_css": "Custom CSS",
+    "type_render_note": "Render note",
+    "type_web_view": "Web view",
+    "toggle_tooltip_enable_tooltip": "Click to enable this {{type}}.",
+    "toggle_tooltip_disable_tooltip": "Click to disable this {{type}}.",
+    "menu_docs": "Open documentation",
+    "menu_execute_now": "Execute script now",
+    "menu_run": "Run automatically",
+    "menu_run_disabled": "Manually",
+    "menu_run_backend_startup": "When the backend starts up",
+    "menu_run_hourly": "Hourly",
+    "menu_run_daily": "Daily",
+    "menu_run_frontend_startup": "When the desktop frontend starts up",
+    "menu_run_mobile_startup": "When the mobile frontend starts up",
+    "menu_change_to_widget": "Change to widget",
+    "menu_change_to_frontend_script": "Change to frontend script"
   }
 }

apps/client/src/widgets/layout/ActiveContentBadges.tsx

@@ -0,0 +1,310 @@
+import { BUILTIN_ATTRIBUTES } from "@triliumnext/commons";
+import clsx from "clsx";
+import { useEffect, useState } from "preact/hooks";
+
+import FNote from "../../entities/fnote";
+import attributes from "../../services/attributes";
+import { t } from "../../services/i18n";
+import { openInAppHelpFromUrl } from "../../services/utils";
+import { BadgeWithDropdown } from "../react/Badge";
+import { FormDropdownDivider, FormDropdownSubmenu, FormListItem } from "../react/FormList";
+import FormToggle from "../react/FormToggle";
+import { useNoteContext, useNoteLabel, useNoteLabelBoolean, useTriliumEvent } from "../react/hooks";
+
+const DANGEROUS_ATTRIBUTES = BUILTIN_ATTRIBUTES.filter(a => a.isDangerous || a.name === "appCss");
+const activeContentLabels = [ "iconPack", "widget", "appCss" ] as const;
+
+interface ActiveContentInfo {
+    type: "iconPack" | "backendScript" | "frontendScript" | "widget" | "appCss" | "renderNote" | "webView";
+    isEnabled: boolean;
+    canToggleEnabled: boolean;
+}
+
+const typeMappings: Record<ActiveContentInfo["type"], {
+    icon: string;
+    helpPage: string;
+    apiDocsPage?: string;
+    isExecutable?: boolean
+}> = {
+    iconPack: {
+        icon: "bx bx-package",
+        helpPage: "g1mlRoU8CsqC",
+    },
+    backendScript: {
+        icon: "bx bx-server",
+        helpPage: "SPirpZypehBG",
+        apiDocsPage: "MEtfsqa5VwNi",
+        isExecutable: true,
+    },
+    frontendScript: {
+        icon: "bx bx-window",
+        helpPage: "yIhgI5H7A2Sm",
+        apiDocsPage: "Q2z6av6JZVWm",
+        isExecutable: true
+    },
+    widget: {
+        icon: "bx bxs-widget",
+        helpPage: "MgibgPcfeuGz"
+    },
+    appCss: {
+        icon: "bx bxs-file-css",
+        helpPage: "AlhDUqhENtH7"
+    },
+    renderNote: {
+        icon: "bx bx-extension",
+        helpPage: "HcABDtFCkbFN"
+    },
+    webView: {
+        icon: "bx bx-globe",
+        helpPage: "1vHRoWCEjj0L"
+    }
+};
+
+export function ActiveContentBadges() {
+    const { note } = useNoteContext();
+    const info = useActiveContentInfo(note);
+
+    return (note && info &&
+        <>
+            {info.canToggleEnabled && <ActiveContentToggle info={info} note={note} />}
+            <ActiveContentBadge info={info} note={note} />
+        </>
+    );
+}
+
+function ActiveContentBadge({ info, note }: { note: FNote, info: ActiveContentInfo }) {
+    const { icon, helpPage, apiDocsPage, isExecutable } = typeMappings[info.type];
+    return (
+        <BadgeWithDropdown
+            className={clsx("active-content-badge", info.canToggleEnabled && !info.isEnabled && "disabled")}
+            icon={icon}
+            text={getTranslationForType(info.type)}
+        >
+            {isExecutable && (
+                <>
+                    <FormListItem
+                        icon="bx bx-play"
+                        triggerCommand="runActiveNote"
+                    >{t("active_content_badges.menu_execute_now")}</FormListItem>
+                    <ScriptRunOptions note={note} info={info} />
+                    <FormDropdownDivider />
+                </>
+            )}
+
+            {(info.type === "frontendScript" || info.type === "widget") && (
+                <>
+                    <WidgetSwitcher note={note} />
+                    <FormDropdownDivider />
+                </>
+            )}
+
+            <FormListItem
+                icon="bx bx-help-circle"
+                onClick={() => openInAppHelpFromUrl(helpPage)}
+            >{t("active_content_badges.menu_docs")}</FormListItem>
+
+            {apiDocsPage && <FormListItem
+                icon="bx bx-book-content"
+                onClick={() => openInAppHelpFromUrl(apiDocsPage)}
+            >{t("code_buttons.trilium_api_docs_button_title")}</FormListItem>}
+        </BadgeWithDropdown>
+    );
+}
+
+function ScriptRunOptions({ info, note }: { note: FNote, info: ActiveContentInfo }) {
+    const [ run, setRun ] = useNoteLabel(note, "run");
+
+    const options: {
+        title: string;
+        value: string | null;
+        type: "both" | "backendScript" | "frontendScript";
+    }[] = ([
+        {
+            title: t("active_content_badges.menu_run_disabled"),
+            value: null,
+            type: "both"
+        },
+        {
+            title: t("active_content_badges.menu_run_backend_startup"),
+            value: "backendStartup",
+            type: "backendScript"
+        },
+        {
+            title: t("active_content_badges.menu_run_daily"),
+            value: "daily",
+            type: "backendScript"
+        },
+        {
+            title: t("active_content_badges.menu_run_hourly"),
+            value: "hourly",
+            type: "backendScript"
+        },
+        {
+            title: t("active_content_badges.menu_run_frontend_startup"),
+            value: "frontendStartup",
+            type: "frontendScript"
+        },
+        {
+            title: t("active_content_badges.menu_run_mobile_startup"),
+            value: "mobileStartup",
+            type: "frontendScript"
+        }
+    ] as const).filter(option => option.type === "both" || option.type === info.type);
+
+    return (
+        <FormDropdownSubmenu title={t("active_content_badges.menu_run")} icon="bx bx-rss" dropStart>
+            {options.map(({ title, value }) => (
+                <FormListItem
+                    key={value}
+                    onClick={() => setRun(value)}
+                    checked={run ? run === value : value === null }
+                >{title}</FormListItem>
+            ))}
+        </FormDropdownSubmenu>
+    );
+}
+
+function WidgetSwitcher({ note }: { note: FNote }) {
+    const [ widget, setWidget ] = useNoteLabelBoolean(note, "widget");
+    const [ disabledWidget, setDisabledWidget ] = useNoteLabelBoolean(note, "disabled:widget");
+
+    return (widget || disabledWidget)
+        ? <FormListItem
+            icon="bx bx-window"
+            onClick={() => {
+                setWidget(false);
+                setDisabledWidget(false);
+            }}
+        >{t("active_content_badges.menu_change_to_frontend_script")}</FormListItem>
+        : <FormListItem
+            icon={widget ? "bx bx-window" : "bx bxs-widget"}
+            onClick={() => {
+                setWidget(true);
+            }}
+        >{t("active_content_badges.menu_change_to_widget")}</FormListItem>;
+
+}
+
+function getTranslationForType(type: ActiveContentInfo["type"]) {
+    switch (type) {
+        case "iconPack":
+            return t("active_content_badges.type_icon_pack");
+        case "backendScript":
+            return t("active_content_badges.type_backend_script");
+        case "frontendScript":
+            return t("active_content_badges.type_frontend_script");
+        case "widget":
+            return t("active_content_badges.type_widget");
+        case "appCss":
+            return t("active_content_badges.type_app_css");
+        case "renderNote":
+            return t("active_content_badges.type_render_note");
+        case "webView":
+            return t("active_content_badges.type_web_view");
+    }
+}
+
+function ActiveContentToggle({ note, info }: { note: FNote, info: ActiveContentInfo }) {
+    const typeTranslation = getTranslationForType(info.type);
+
+    return info && <FormToggle
+        switchOnName="" switchOffName=""
+        currentValue={info.isEnabled}
+        switchOffTooltip={t("active_content_badges.toggle_tooltip_disable_tooltip", { type: typeTranslation })}
+        switchOnTooltip={t("active_content_badges.toggle_tooltip_enable_tooltip", { type: typeTranslation })}
+        onChange={async (willEnable) => {
+            const attrs = note.getOwnedAttributes()
+                .filter(attr => {
+                    if (attr.isInheritable) return false;
+                    const baseName = getNameWithoutPrefix(attr.name);
+                    return DANGEROUS_ATTRIBUTES.some(item => item.name === baseName && item.type === attr.type);
+                });
+
+            for (const attr of attrs) {
+                const baseName = getNameWithoutPrefix(attr.name);
+                const newName = willEnable ? baseName : `disabled:${baseName}`;
+                if (newName === attr.name) continue;
+
+                // We are adding and removing afterwards to avoid a flicker (because for a moment there would be no active content attribute anymore) because the operations are done in sequence and not atomically.
+                if (attr.type === "label") {
+                    await attributes.setLabel(note.noteId, newName, attr.value);
+                } else {
+                    await attributes.setRelation(note.noteId, newName, attr.value);
+                }
+                await attributes.removeAttributeById(note.noteId, attr.attributeId);
+            }
+        }}
+    />;
+}
+
+function getNameWithoutPrefix(name: string) {
+    return name.startsWith("disabled:") ? name.substring(9) : name;
+}
+
+function useActiveContentInfo(note: FNote | null | undefined) {
+    const [ info, setInfo ] = useState<ActiveContentInfo | null>(null);
+
+    function refresh() {
+        let type: ActiveContentInfo["type"] | null = null;
+        let isEnabled = false;
+        let canToggleEnabled = false;
+
+        if (!note) {
+            setInfo(null);
+            return;
+        }
+
+        if (note.type === "render") {
+            type = "renderNote";
+            isEnabled = note.hasRelation("renderNote");
+            canToggleEnabled = note.hasRelation("renderNote") || note.hasRelation("disabled:renderNote");
+        } else if (note.type === "webView") {
+            type = "webView";
+            isEnabled = note.hasLabel("webViewSrc");
+            canToggleEnabled = note.hasLabelOrDisabled("webViewSrc");
+        } else if (note.type === "code" && note.mime === "application/javascript;env=backend") {
+            type = "backendScript";
+            for (const backendLabel of [ "run", "customRequestHandler", "customResourceProvider" ]) {
+                isEnabled ||= note.hasLabel(backendLabel);
+
+                if (!canToggleEnabled && note.hasLabelOrDisabled(backendLabel)) {
+                    canToggleEnabled = true;
+                }
+            }
+        } else if (note.type === "code" && note.mime === "application/javascript;env=frontend") {
+            type = "frontendScript";
+            isEnabled = note.hasLabel("widget") || note.hasLabel("run");
+            canToggleEnabled = note.hasLabelOrDisabled("widget") || note.hasLabelOrDisabled("run");
+        }
+
+        for (const labelToCheck of activeContentLabels ) {
+            if (note.hasLabel(labelToCheck)) {
+                type = labelToCheck;
+                break;
+            } else if (note.hasLabel(`disabled:${labelToCheck}`)) {
+                type = labelToCheck;
+                isEnabled = false;
+                break;
+            }
+        }
+
+        console.log({ type, isEnabled, canToggleEnabled });
+
+        if (type) {
+            setInfo({ type, isEnabled, canToggleEnabled });
+        } else {
+            setInfo(null);
+        }
+    }
+
+    // Refresh on note change.
+    useEffect(refresh, [ note ]);
+
+    useTriliumEvent("entitiesReloaded", ({ loadResults }) => {
+        if (loadResults.getAttributeRows().some(attr => attributes.isAffecting(attr, note))) {
+            refresh();
+        }
+    });
+
+    return info;
+}

apps/client/src/widgets/layout/NoteBadges.css

@@ -37,6 +37,10 @@
                 pointer-events: none;
             }
         }
+        &.active-content-badge { --color: var(--badge-active-content-background-color); }
+        &.active-content-badge.disabled {
+            opacity: 0.5;
+        }
 
         min-width: 0;
 
@@ -45,6 +49,11 @@
             text-overflow: ellipsis;
             min-width: 0;
         }
+
+        .switch-button {
+            --switch-track-height: 8px;
+            --switch-track-width: 30px;
+        }
     }
 
     .dropdown-badge {

apps/client/src/widgets/layout/NoteBadges.tsx

@@ -10,6 +10,7 @@ import { FormDropdownDivider, FormListItem } from "../react/FormList";
 import { useGetContextData, useIsNoteReadOnly, useNoteContext, useNoteLabel, useNoteLabelBoolean } from "../react/hooks";
 import { useShareState } from "../ribbon/BasicPropertiesTab";
 import { useShareInfo } from "../shared_info";
+import { ActiveContentBadges } from "./ActiveContentBadges";
 
 export default function NoteBadges() {
     return (
@@ -19,6 +20,7 @@ export default function NoteBadges() {
             <ShareBadge />
             <ClippedNoteBadge />
             <ExecuteBadge />
+            <ActiveContentBadges />
         </div>
     );
 }

apps/client/src/widgets/ribbon/NoteActionsCustom.tsx

@@ -70,7 +70,6 @@ export default function NoteActionsCustom(props: NoteActionsCustomProps) {
         >
             <AddChildButton {...innerProps} />
             <RunActiveNoteButton {...innerProps } />
-            <OpenTriliumApiDocsButton {...innerProps} />
             <SwitchSplitOrientationButton {...innerProps} />
             <ToggleReadOnlyButton {...innerProps} />
             <SaveToNoteButton {...innerProps} />
@@ -230,15 +229,6 @@ function SaveToNoteButton({ note, noteMime }: NoteActionsCustomInnerProps) {
     />;
 }
 
-function OpenTriliumApiDocsButton({ noteMime }: NoteActionsCustomInnerProps) {
-    const isEnabled = noteMime.startsWith("application/javascript;env=");
-    return isEnabled && <NoteAction
-        icon="bx bx-help-circle"
-        text={t("code_buttons.trilium_api_docs_button_title")}
-        onClick={() => openInAppHelpFromUrl(noteMime.endsWith("frontend") ? "Q2z6av6JZVWm" : "MEtfsqa5VwNi")}
-    />;
-}
-
 function InAppHelpButton({ note }: NoteActionsCustomInnerProps) {
     const helpUrl = getHelpUrlForNote(note);
     const isEnabled = !!helpUrl;

apps/server/src/services/anonymization.ts

@@ -1,11 +1,11 @@
-import BUILTIN_ATTRIBUTES from "./builtin_attributes.js";
+import { AnonymizedDbResponse, BUILTIN_ATTRIBUTES, DatabaseAnonymizeResponse } from "@triliumnext/commons";
+import Database from "better-sqlite3";
 import fs from "fs";
+import path from "path";
+
 import dataDir from "./data_dir.js";
 import dateUtils from "./date_utils.js";
-import Database from "better-sqlite3";
 import sql from "./sql.js";
-import path from "path";
-import { AnonymizedDbResponse, DatabaseAnonymizeResponse } from "@triliumnext/commons";
 
 function getFullAnonymizationScript() {
     // we want to delete all non-builtin attributes because they can contain sensitive names and values
@@ -86,7 +86,7 @@ function getExistingAnonymizedDatabases() {
         .readdirSync(dataDir.ANONYMIZED_DB_DIR)
         .filter((fileName) => fileName.includes("anonymized"))
         .map((fileName) => ({
-            fileName: fileName,
+            fileName,
             filePath: path.resolve(dataDir.ANONYMIZED_DB_DIR, fileName)
         })) satisfies AnonymizedDbResponse[];
 }

apps/server/src/services/attributes.ts

@@ -1,13 +1,11 @@
-"use strict";
+import { type AttributeRow, BUILTIN_ATTRIBUTES } from "@triliumnext/commons";
 
-import searchService from "./search/services/search.js";
-import sql from "./sql.js";
 import becca from "../becca/becca.js";
 import BAttribute from "../becca/entities/battribute.js";
-import attributeFormatter from "./attribute_formatter.js";
-import BUILTIN_ATTRIBUTES from "./builtin_attributes.js";
 import type BNote from "../becca/entities/bnote.js";
-import type { AttributeRow } from "@triliumnext/commons";
+import attributeFormatter from "./attribute_formatter.js";
+import searchService from "./search/services/search.js";
+import sql from "./sql.js";
 
 const ATTRIBUTE_TYPES = new Set(["label", "relation"]);
 
@@ -41,18 +39,18 @@ function getNoteWithLabel(name: string, value?: string): BNote | null {
 
 function createLabel(noteId: string, name: string, value: string = "") {
     return createAttribute({
-        noteId: noteId,
+        noteId,
         type: "label",
-        name: name,
-        value: value
+        name,
+        value
     });
 }
 
 function createRelation(noteId: string, name: string, targetNoteId: string) {
     return createAttribute({
-        noteId: noteId,
+        noteId,
         type: "relation",
-        name: name,
+        name,
         value: targetNoteId
     });
 }

packages/commons/src/index.ts

@@ -13,3 +13,4 @@ export * from "./lib/attribute_names.js";
 export * from "./lib/utils.js";
 export * from "./lib/dayjs.js";
 export * from "./lib/notes.js";
+export { default as BUILTIN_ATTRIBUTES } from "./lib/builtin_attributes.js";

packages/commons/src/lib/attribute_names.ts

@@ -22,6 +22,11 @@ type Labels = {
     pageUrl: string;
     dateNote: string;
 
+    // Scripting
+    run: string;
+    widget: boolean;
+    "disabled:widget": boolean;
+
     // Tree specific
     subtreeHidden: boolean;