feat(breadcrumb_badges): integrate query/script tab

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

@@ -2148,6 +2148,10 @@
     "backlinks_description_one": "This note is linked from {{count}} other note.\n\nClick to view the list of backlinks.",
     "backlinks_description_other": "This note is linked from {{count}} other notes.\n\nClick to view the list of backlinks.",
     "clipped_note": "Web clip",
-    "clipped_note_description": "This note was originally taken from {{url}}.\n\nClick to navigate to the source webpage."
+    "clipped_note_description": "This note was originally taken from {{url}}.\n\nClick to navigate to the source webpage.",
+    "execute_script": "Run script",
+    "execute_script_description": "This note is a script note. Click to execute the script.",
+    "execute_sql": "Run SQL",
+    "execute_sql_description": "This note is a SQL note. Click to execute the SQL query."
   }
 }

apps/client/src/widgets/BreadcrumbBadges.css

@@ -35,6 +35,7 @@
     &.share-badge { --color: #3b82f6; }
     &.clipped-note-badge { --color: #57a2a5; }
     &.backlinks-badge { color: var(--badge-text-color); }
+    &.execute-badge { --color: #f59e0b; }
 
     a {
         color: inherit !important;

apps/client/src/widgets/BreadcrumbBadges.tsx

@@ -8,7 +8,7 @@ import { t } from "../services/i18n";
 import { formatDateTime } from "../utils/formatters";
 import { BacklinksList, useBacklinkCount } from "./FloatingButtonsDefinitions";
 import Dropdown, { DropdownProps } from "./react/Dropdown";
-import { useIsNoteReadOnly, useNoteContext, useNoteLabel, useStaticTooltip } from "./react/hooks";
+import { useIsNoteReadOnly, useNoteContext, useNoteLabel, useNoteLabelBoolean, useStaticTooltip } from "./react/hooks";
 import Icon from "./react/Icon";
 import { NoteSizeWidget, useNoteMetadata } from "./ribbon/NoteInfoTab";
 import { useShareInfo } from "./shared_info";
@@ -21,6 +21,7 @@ export default function BreadcrumbBadges() {
             <ShareBadge />
             <BacklinksBadge />
             <ClippedNoteBadge />
+            <ExecuteBadge />
         </div>
     );
 }
@@ -130,6 +131,25 @@ function ClippedNoteBadge() {
     );
 }
 
+function ExecuteBadge() {
+    const { note, parentComponent } = useNoteContext();
+    const isScript = note?.isTriliumScript();
+    const isSql = note?.isTriliumSqlite();
+    const isExecutable = isScript || isSql;
+    const [ executeDescription ] = useNoteLabel(note, "executeDescription");
+    const [ executeButton ] = useNoteLabelBoolean(note, "executeButton");
+
+    return (note && isExecutable && (executeDescription || executeButton) &&
+        <Badge
+            className="execute-badge"
+            icon="bx bx-play"
+            text={isScript ? t("breadcrumb_badges.execute_script") : t("breadcrumb_badges.execute_sql")}
+            tooltip={executeDescription || (isScript ? t("breadcrumb_badges.execute_script_description") : t("breadcrumb_badges.execute_sql_description"))}
+            onClick={() => parentComponent.triggerCommand("runActiveNote")}
+        />
+    );
+}
+
 interface BadgeProps {
     text?: string;
     icon?: string;

apps/client/src/widgets/ribbon/RibbonDefinition.ts

@@ -38,7 +38,7 @@ export const RIBBON_TAB_DEFINITIONS: TabConfiguration[] = [
         icon: "bx bx-play",
         content: ScriptTab,
         activate: true,
-        show: ({ note }) => note &&
+        show: ({ note }) => note && !isNewLayout &&
             (note.isTriliumScript() || note.isTriliumSqlite()) &&
             (note.hasLabel("executeDescription") || note.hasLabel("executeButton"))
     },

packages/commons/src/lib/attribute_names.ts

@@ -5,6 +5,7 @@ type Labels = {
     color: string;
     iconClass: string;
     workspaceIconClass: string;
+    executeButton: boolean;
     executeDescription: string;
     executeTitle: string;
     limit: string; // should be probably be number