feat(react/ribbon): port shared switch

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

@@ -13,6 +13,8 @@ import FNote from "../../entities/fnote";
 import protected_session from "../../services/protected_session";
 import FormDropdownList from "../react/FormDropdownList";
 import toast from "../../services/toast";
+import branches from "../../services/branches";
+import sync from "../../services/sync";
 
 export default function BasicPropertiesTab() {
     const { note } = useNoteContext();
@@ -23,6 +25,7 @@ export default function BasicPropertiesTab() {
             <ProtectedNoteSwitch note={note} />
             <EditabilitySelect note={note} />
             <BookmarkSwitch note={note} />
+            <SharedSwitch note={note} />
         </div>
     );
 }
@@ -199,6 +202,51 @@ function BookmarkSwitch({ note }: { note?: FNote | null }) {
     )
 }
 
+function SharedSwitch({ note }: { note?: FNote | null }) {
+    const [ isShared, setIsShared ] = useState(false);
+    const refreshState = useCallback(() => {
+        setIsShared(!!note?.hasAncestor("_share"));
+    }, [ note ]);
+
+    useEffect(() => refreshState(), [ note ]);
+    useTriliumEventBeta("entitiesReloaded", ({ loadResults }) => {
+        if (note && loadResults.getBranchRows().find((b) => b.noteId === note.noteId)) {
+            refreshState();
+        }
+    });
+
+    const switchShareState = useCallback(async (shouldShare: boolean) => {
+        if (!note) return;
+
+        if (shouldShare) {
+            await branches.cloneNoteToParentNote(note.noteId, "_share");
+        } else {
+            if (note?.getParentBranches().length === 1 && !(await dialog.confirm(t("shared_switch.shared-branch")))) {
+                return;
+            }            
+
+            const shareBranch = note?.getParentBranches().find((b) => b.parentNoteId === "_share");
+            if (!shareBranch?.branchId) return;
+            await server.remove(`branches/${shareBranch.branchId}?taskId=no-progress-reporting`);            
+        }
+
+        sync.syncNow(true);
+    }, [ note ]);
+
+    return (
+        <div className="shared-switch-container">
+            <FormToggle
+                currentValue={isShared}
+                onChange={switchShareState}
+                switchOnName={t("shared_switch.shared")} switchOnTooltip={t("shared_switch.toggle-on-title")}
+                switchOffName={t("shared_switch.shared")} switchOffTooltip={t("shared_switch.toggle-off-title")}
+                helpPage="R9pX4DGra2Vt"
+                disabled={["root", "_share", "_hidden"].includes(note?.noteId ?? "") || note?.noteId.startsWith("_options")}
+            />
+        </div>
+    )
+}
+
 function findTypeTitle(type?: NoteType, mime?: string | null) {
     if (type === "code") {
         const mimeTypes = mime_types.getMimeTypes();

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

@@ -10,8 +10,6 @@ import type FNote from "../../entities/fnote.js";
 import NoteLanguageWidget from "../note_language.js";
 
 const TPL = /*html*/`
-    <div class="shared-switch-container"></div>
-
     <div class="template-switch-container"></div>
 
     <div class="note-language-container">
@@ -28,7 +26,6 @@ export default class BasicPropertiesWidget extends NoteContextAwareWidget {
     constructor() {
         super();
 
-        this.sharedSwitchWidget = new SharedSwitchWidget().contentSized();
         this.templateSwitchWidget = new TemplateSwitchWidget().contentSized();
         this.noteLanguageWidget = new NoteLanguageWidget().contentSized();
 

apps/client/src/widgets/shared_switch.ts

@@ -1,81 +0,0 @@
-import SwitchWidget from "./switch.js";
-import branchService from "../services/branches.js";
-import server from "../services/server.js";
-import utils from "../services/utils.js";
-import syncService from "../services/sync.js";
-import dialogService from "../services/dialog.js";
-import { t } from "../services/i18n.js";
-import type FNote from "../entities/fnote.js";
-import type { EventData } from "../components/app_context.js";
-
-export default class SharedSwitchWidget extends SwitchWidget {
-
-    isEnabled() {
-        return super.isEnabled()
-            && !["root", "_share", "_hidden"].includes(this.noteId ?? "")
-            && !this.noteId?.startsWith("_options");
-    }
-
-    doRender() {
-        super.doRender();
-
-        this.switchOnName = t("shared_switch.shared");
-        this.switchOnTooltip = t("shared_switch.toggle-on-title");
-
-        this.switchOffName = t("shared_switch.shared");
-        this.switchOffTooltip = t("shared_switch.toggle-off-title");
-
-        this.$helpButton.attr("data-help-page", "sharing.html").show();
-        this.$helpButton.on("click", (e) => utils.openHelp($(e.target)));
-    }
-
-    async switchOn() {
-        if (!this.noteId) {
-            return;
-        }
-
-        await branchService.cloneNoteToParentNote(this.noteId, "_share");
-
-        syncService.syncNow(true);
-    }
-
-    async switchOff() {
-        const shareBranch = this.note?.getParentBranches().find((b) => b.parentNoteId === "_share");
-
-        if (!shareBranch) {
-            return;
-        }
-
-        if (this.note?.getParentBranches().length === 1) {
-            if (!(await dialogService.confirm(t("shared_switch.shared-branch")))) {
-                return;
-            }
-        }
-
-        await server.remove(`branches/${shareBranch.branchId}?taskId=no-progress-reporting`);
-
-        syncService.syncNow(true);
-    }
-
-    async refreshWithNote(note: FNote) {
-        const isShared = note.hasAncestor("_share");
-        const canBeUnshared = isShared && note.getParentBranches().find((b) => b.parentNoteId === "_share");
-        const switchDisabled = isShared && !canBeUnshared;
-
-        this.isToggled = isShared;
-
-        if (switchDisabled) {
-            this.disabledTooltip = t("shared_switch.inherited");
-            this.canToggle = false;
-        } else {
-            this.disabledTooltip = "";
-            this.canToggle = true;
-        }
-    }
-
-    entitiesReloadedEvent({ loadResults }: EventData<"entitiesReloaded">) {
-        if (loadResults.getBranchRows().find((b) => b.noteId === this.noteId)) {
-            this.refresh();
-        }
-    }
-}