client/pageurl: migrate note origin to info bar

apps/client/src/layouts/desktop_layout.tsx

@@ -31,6 +31,7 @@ import ScrollingContainer from "../widgets/containers/scrolling_container.js";
 import ScrollPadding from "../widgets/scroll_padding.js";
 import SearchResult from "../widgets/search_result.jsx";
 import SharedInfo from "../widgets/shared_info.jsx";
+import OriginInfo from "../widgets/note_origin.jsx";
 import SpacerWidget from "../widgets/spacer.js";
 import SplitNoteContainer from "../widgets/containers/split_note_container.js";
 import SqlResults from "../widgets/sql_result.js";
@@ -137,6 +138,7 @@ export default class DesktopLayout {
                                                             new ScrollingContainer()
                                                                 .filling()
                                                                 .child(new ContentHeader()
+                                                                    .child(<OriginInfo />)
                                                                     .child(<ReadOnlyNoteInfoBar />)
                                                                     .child(<SharedInfo />)
                                                                 )

apps/client/src/widgets/note_origin.tsx

@@ -0,0 +1,43 @@
+import { t } from "../services/i18n";
+import { useNoteContext, useTriliumEvent, useTriliumOption } from "./react/hooks";
+import { useEffect, useState } from "preact/hooks";
+import attributes from "../services/attributes";
+import InfoBar from "./react/InfoBar";
+import RawHtml from "./react/RawHtml";
+import FNote from "../entities/fnote";
+
+export default function OriginInfo() {
+    const { note } = useNoteContext();
+    const [link, setLink] = useState<string>();
+
+    function refresh() {
+        if (!note) return;
+        const pageUrl = getPageUrl(note);
+        if (!pageUrl) {
+            setLink(undefined);
+            return;
+        }
+        setLink(`<a href="${pageUrl}" class="external tn-link">${pageUrl}</a>`);
+    }
+
+    useEffect(refresh, [note]);
+    useTriliumEvent("entitiesReloaded", ({ loadResults }) => {
+        if (loadResults.getAttributeRows().find((attr) => attr.type === "label" && attr.name?.toString() === "pageUrl" && attributes.isAffecting(attr, note))) {
+            refresh();
+        }
+    });
+
+    return (
+        <InfoBar className="origin-info-widget" type="subtle" style={{ display: (!link) ? "none" : undefined }}>
+            {link && (
+                <RawHtml
+                    html={`${t("note_properties.this_note_was_originally_taken_from")} ${link}`}
+                />
+            )}
+        </InfoBar>
+    )
+}
+
+function getPageUrl(note: FNote) {
+    return note.getOwnedLabelValue("pageUrl");
+}

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

@@ -28,7 +28,7 @@ export default function CollectionPropertiesTab({ note }: TabContext) {
   const defaultViewType = (note?.type === "search" ? "list" : "grid");
   const viewTypeWithDefault = (viewType ?? defaultViewType) as ViewTypeOptions;
   const properties = bookPropertiesConfig[viewTypeWithDefault].properties;
-
+  console.warn('CollectionPropertiesTab:', properties)
   return (
     <div className="book-properties-widget">
       {note && (
@@ -137,7 +137,7 @@ function NumberPropertyView({ note, property }: { note: FNote, property: NumberP
 
 function ComboBoxPropertyView({ note, property }: { note: FNote, property: ComboBoxProperty }) {
     const [ value, setValue ] = useNoteLabel(note, property.bindToLabel);
-
+    console.warn('ComboBoxPropertyView:', value)
     return (
         <LabelledEntry label={property.label}>
             <FormSelectWithGroups
@@ -150,6 +150,7 @@ function ComboBoxPropertyView({ note, property }: { note: FNote, property: Combo
 }
 
 function LabelledEntry({ label, children }: { label: string, children: ComponentChildren }) {
+    console.warn('LabelledEntry:', label)
     return (
         <>
             <label>

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

@@ -1,20 +0,0 @@
-import { t } from "../../services/i18n";
-import { useNoteLabel } from "../react/hooks";
-import { TabContext } from "./ribbon-interface";
-
-/**
- * TODO: figure out better name or conceptualize better.
- */
-export default function NotePropertiesTab({ note }: TabContext) {
-    const [ pageUrl ] = useNoteLabel(note, "pageUrl");
-
-    return (
-        <div className="note-properties-widget" style={{ padding: "12px", color: "var(--muted-text-color)" }}>
-            { pageUrl && (
-                <div style={{ overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>
-                    {t("note_properties.this_note_was_originally_taken_from")} <a href={pageUrl} class="page-url external">{pageUrl}</a>
-                </div>
-            )}
-        </div>
-    )
-}

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

@@ -1,6 +1,5 @@
 import ScriptTab from "./ScriptTab";
 import EditedNotesTab from "./EditedNotesTab";
-import NotePropertiesTab from "./NotePropertiesTab";
 import NoteInfoTab from "./NoteInfoTab";
 import SimilarNotesTab from "./SimilarNotesTab";
 import FilePropertiesTab from "./FilePropertiesTab";
@@ -59,13 +58,6 @@ export const RIBBON_TAB_DEFINITIONS: TabConfiguration[] = [
         show: ({ note }) => note?.type === "book" || note?.type === "search",
         toggleCommand: "toggleRibbonTabBookProperties"
     },
-    {
-        title: t("note_properties.info"),
-        icon: "bx bx-info-square",
-        content: NotePropertiesTab,
-        show: ({ note }) => !!note?.getLabelValue("pageUrl"),
-        activate: true
-    },
     {
         title: t("file_properties.title"),
         icon: "bx bx-file",