feat(react/ribbon): port note properties

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

@@ -0,0 +1,20 @@
+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/Ribbon.tsx

@@ -12,6 +12,7 @@ import { CommandNames } from "../../components/app_context";
 import FNote from "../../entities/fnote";
 import ScriptTab from "./ScriptTab";
 import EditedNotesTab from "./EditedNotesTab";
+import NotePropertiesTab from "./NotePropertiesTab";
 
 interface TitleContext {
     note: FNote | null | undefined;
@@ -67,9 +68,11 @@ const TAB_CONFIGURATION = numberObjectsInPlace<TabConfiguration>([
         icon: "bx bx-book"
     },
     {
-        // NotePropertiesWidget
         title: t("note_properties.info"),
-        icon: "bx bx-info-square"
+        icon: "bx bx-info-square",
+        content: NotePropertiesTab,
+        show: ({ note }) => !!note?.getLabelValue("pageUrl"),
+        activate: true
     },
     {
         // FilePropertiesWidget

apps/client/src/widgets/ribbon_widgets/note_properties.ts

@@ -1,53 +0,0 @@
-import type FNote from "../../entities/fnote.js";
-import { t } from "../../services/i18n.js";
-import NoteContextAwareWidget from "../note_context_aware_widget.js";
-
-const TPL = /*html*/`
-<div class="note-properties-widget">
-    <style>
-        .note-properties-widget {
-            padding: 12px;
-            color: var(--muted-text-color);
-        }
-    </style>
-
-    <div style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap">
-        ${t("note_properties.this_note_was_originally_taken_from")} <a class="page-url external"></a>
-    </div>
-</div>`;
-
-/**
- * TODO: figure out better name or conceptualize better.
- */
-export default class NotePropertiesWidget extends NoteContextAwareWidget {
-
-    private $pageUrl!: JQuery<HTMLElement>;
-
-    isEnabled() {
-        return this.note && !!this.note.getLabelValue("pageUrl");
-    }
-
-    getTitle() {
-        return {
-            show: this.isEnabled(),
-            activate: true,
-
-        };
-    }
-
-    doRender() {
-        this.$widget = $(TPL);
-        this.contentSized();
-
-        this.$pageUrl = this.$widget.find(".page-url");
-    }
-
-    async refreshWithNote(note: FNote) {
-        const pageUrl = note.getLabelValue("pageUrl");
-
-        this.$pageUrl
-            .attr("href", pageUrl)
-            .attr("title", pageUrl)
-            .text(pageUrl ?? "");
-    }
-}