diff --git a/apps/roam/src/components/DiscourseFloatingMenu.tsx b/apps/roam/src/components/DiscourseFloatingMenu.tsx index 713ecc9a5..07f71b694 100644 --- a/apps/roam/src/components/DiscourseFloatingMenu.tsx +++ b/apps/roam/src/components/DiscourseFloatingMenu.tsx @@ -13,7 +13,6 @@ import { import { FeedbackWidget } from "./BirdEatsBugs"; import { render as renderSettings } from "~/components/settings/Settings"; import posthog from "posthog-js"; -import { getPersonalSetting } from "./settings/utils/accessors"; type DiscourseFloatingMenuProps = { // CSS placement class @@ -129,7 +128,7 @@ export const installDiscourseFloatingMenu = ( floatingMenuAnchor.id = ANCHOR_ID; document.getElementById("app")?.appendChild(floatingMenuAnchor); } - if (getPersonalSetting(["Hide feedback button"])) { + if (onLoadArgs.extensionAPI.settings.get("hide-feedback-button") as boolean) { floatingMenuAnchor.classList.add("hidden"); } ReactDOM.render( diff --git a/apps/roam/src/components/canvas/DiscourseNodeUtil.tsx b/apps/roam/src/components/canvas/DiscourseNodeUtil.tsx index c362e420f..fc2f1d742 100644 --- a/apps/roam/src/components/canvas/DiscourseNodeUtil.tsx +++ b/apps/roam/src/components/canvas/DiscourseNodeUtil.tsx @@ -35,7 +35,11 @@ import calcCanvasNodeSizeAndImg from "~/utils/calcCanvasNodeSizeAndImg"; import { createTextJsxFromSpans } from "./DiscourseRelationShape/helpers"; import { loadImage } from "~/utils/loadImage"; import { getRelationColor } from "./DiscourseRelationShape/DiscourseRelationUtil"; -import { getPersonalSetting } from "~/components/settings/utils/accessors"; +import { + AUTO_CANVAS_RELATIONS_KEY, + DISCOURSE_CONTEXT_OVERLAY_IN_CANVAS_KEY, +} from "~/data/userSettings"; +import { getSetting } from "~/utils/extensionSettings"; import DiscourseContextOverlay from "~/components/DiscourseContextOverlay"; import { getDiscourseNodeColors } from "~/utils/getDiscourseNodeColors"; import { render as renderToast } from "roamjs-components/components/Toast"; @@ -431,7 +435,7 @@ export class BaseDiscourseNodeUtil extends BaseBoxShapeUtil } = discourseContext.nodes[shape.type] || {}; // eslint-disable-next-line react-hooks/rules-of-hooks const isOverlayEnabled = useMemo( - () => getPersonalSetting(["Overlay in canvas"]), + () => getSetting(DISCOURSE_CONTEXT_OVERLAY_IN_CANVAS_KEY, false), [], ); @@ -512,9 +516,10 @@ export class BaseDiscourseNodeUtil extends BaseBoxShapeUtil uid, }); - const autoCanvasRelations = getPersonalSetting([ - "Auto canvas relations", - ]); + const autoCanvasRelations = getSetting( + AUTO_CANVAS_RELATIONS_KEY, + false, + ); if (autoCanvasRelations) { try { const relationIds = getRelationIds(); diff --git a/apps/roam/src/components/canvas/Tldraw.tsx b/apps/roam/src/components/canvas/Tldraw.tsx index 24f94b8ab..074a438a3 100644 --- a/apps/roam/src/components/canvas/Tldraw.tsx +++ b/apps/roam/src/components/canvas/Tldraw.tsx @@ -96,6 +96,8 @@ import ToastListener, { dispatchToastEvent } from "./ToastListener"; import { CanvasDrawerPanel } from "./CanvasDrawer"; import { ClipboardPanel, ClipboardProvider } from "./Clipboard"; import internalError from "~/utils/internalError"; +import { AUTO_CANVAS_RELATIONS_KEY } from "~/data/userSettings"; +import { getSetting } from "~/utils/extensionSettings"; import { isPluginTimerReady, waitForPluginTimer } from "~/utils/pluginTimer"; import { HistoryEntry } from "@tldraw/store"; import { TLRecord } from "@tldraw/tlschema"; @@ -103,7 +105,6 @@ import { WHITE_LOGO_SVG } from "~/icons"; import { BLOCK_REF_REGEX } from "roamjs-components/dom"; import { defaultHandleExternalTextContent } from "./defaultHandleExternalTextContent"; import posthog from "posthog-js"; -import { getPersonalSetting } from "~/components/settings/utils/accessors"; declare global { // eslint-disable-next-line @typescript-eslint/consistent-type-definitions @@ -1131,9 +1132,10 @@ const InsideEditorAndUiContext = ({ editor.sideEffects.registerAfterCreateHandler("shape", (shape) => { const util = editor.getShapeUtil(shape); if (util instanceof BaseDiscourseNodeUtil) { - const autoCanvasRelations = getPersonalSetting([ - "Auto canvas relations", - ]); + const autoCanvasRelations = getSetting( + AUTO_CANVAS_RELATIONS_KEY, + false, + ); if (autoCanvasRelations) { void util.createExistingRelations({ shape: shape as DiscourseNodeShape, diff --git a/apps/roam/src/components/canvas/uiOverrides.tsx b/apps/roam/src/components/canvas/uiOverrides.tsx index 3f48f1ec2..c3aafa80e 100644 --- a/apps/roam/src/components/canvas/uiOverrides.tsx +++ b/apps/roam/src/components/canvas/uiOverrides.tsx @@ -42,9 +42,10 @@ import calcCanvasNodeSizeAndImg from "~/utils/calcCanvasNodeSizeAndImg"; import { AddReferencedNodeType } from "./DiscourseRelationShape/DiscourseRelationTool"; import { getRelationColor } from "./DiscourseRelationShape/DiscourseRelationUtil"; import DiscourseGraphPanel from "./DiscourseToolPanel"; +import { DISCOURSE_TOOL_SHORTCUT_KEY } from "~/data/userSettings"; +import { getSetting } from "~/utils/extensionSettings"; import { CustomDefaultToolbar } from "./CustomDefaultToolbar"; import { renderModifyNodeDialog } from "~/components/ModifyNodeDialog"; -import { getPersonalSetting } from "~/components/settings/utils/accessors"; export const getOnSelectForShape = ({ shape, @@ -270,12 +271,10 @@ export const createUiOverrides = ({ }): TLUiOverrides => ({ tools: (editor, tools) => { // Get the custom keyboard shortcut for the discourse tool - const discourseToolCombo = getPersonalSetting([ - "Discourse tool shortcut", - ]) || { + const discourseToolCombo = getSetting(DISCOURSE_TOOL_SHORTCUT_KEY, { key: "", modifiers: 0, - }; + }) as IKeyCombo; // For discourse tool, just use the key directly since we don't allow modifiers const discourseToolShortcut = discourseToolCombo?.key?.toUpperCase() || ""; diff --git a/apps/roam/src/components/settings/HomePersonalSettings.tsx b/apps/roam/src/components/settings/HomePersonalSettings.tsx index a21b01d82..f4d2c74a3 100644 --- a/apps/roam/src/components/settings/HomePersonalSettings.tsx +++ b/apps/roam/src/components/settings/HomePersonalSettings.tsx @@ -22,7 +22,7 @@ import { STREAMLINE_STYLING_KEY, DISALLOW_DIAGNOSTICS, } from "~/data/userSettings"; -import { setSetting } from "~/utils/extensionSettings"; +import { getSetting, setSetting } from "~/utils/extensionSettings"; import { enablePostHog, disablePostHog } from "~/utils/posthog"; import KeyboardShortcutInput from "./KeyboardShortcutInput"; import streamlineStyling from "~/styles/streamlineStyling"; @@ -67,6 +67,7 @@ const HomePersonalSettings = ({ onloadArgs }: { onloadArgs: OnloadArgs }) => { title="Overlay" description="Whether or not to overlay discourse context information over discourse node references." settingKeys={["Discourse context overlay"]} + initialValue={getSetting("discourse-context-overlay", false)} onChange={(checked) => { void setSetting("discourse-context-overlay", checked); onPageRefObserverChange(overlayHandler)(checked); @@ -80,6 +81,7 @@ const HomePersonalSettings = ({ onloadArgs }: { onloadArgs: OnloadArgs }) => { title="Suggestive mode overlay" description="Whether or not to overlay suggestive mode button over discourse node references." settingKeys={["Suggestive mode overlay"]} + initialValue={getSetting("suggestive-mode-overlay", false)} onChange={(checked) => { void setSetting("suggestive-mode-overlay", checked); onPageRefObserverChange(getSuggestiveOverlayHandler(onloadArgs))( @@ -92,6 +94,7 @@ const HomePersonalSettings = ({ onloadArgs }: { onloadArgs: OnloadArgs }) => { title="Text selection popup" description="Whether or not to show the discourse node menu when selecting text." settingKeys={["Text selection popup"]} + initialValue={getSetting("text-selection-popup", true)} onChange={(checked) => { void setSetting("text-selection-popup", checked); }} @@ -100,6 +103,7 @@ const HomePersonalSettings = ({ onloadArgs }: { onloadArgs: OnloadArgs }) => { title="Disable sidebar open" description="Disable opening new nodes in the sidebar when created" settingKeys={["Disable sidebar open"]} + initialValue={getSetting("disable-sidebar-open", false)} onChange={(checked) => { void setSetting("disable-sidebar-open", checked); }} @@ -108,6 +112,7 @@ const HomePersonalSettings = ({ onloadArgs }: { onloadArgs: OnloadArgs }) => { title="Page preview" description="Whether or not to display page previews when hovering over page refs" settingKeys={["Page preview"]} + initialValue={getSetting("page-preview", false)} onChange={(checked) => { void setSetting("page-preview", checked); onPageRefObserverChange(previewPageRefHandler)(checked); @@ -117,6 +122,7 @@ const HomePersonalSettings = ({ onloadArgs }: { onloadArgs: OnloadArgs }) => { title="Hide feedback button" description="Hide the 'Send feedback' button at the bottom right of the screen." settingKeys={["Hide feedback button"]} + initialValue={getSetting("hide-feedback-button", false)} onChange={(checked) => { void setSetting("hide-feedback-button", checked); if (checked) { @@ -130,6 +136,7 @@ const HomePersonalSettings = ({ onloadArgs }: { onloadArgs: OnloadArgs }) => { title="Auto canvas relations" description="Automatically add discourse relations to canvas when a node is added" settingKeys={["Auto canvas relations"]} + initialValue={getSetting(AUTO_CANVAS_RELATIONS_KEY, false)} onChange={(checked) => { void setSetting(AUTO_CANVAS_RELATIONS_KEY, checked); }} @@ -139,6 +146,10 @@ const HomePersonalSettings = ({ onloadArgs }: { onloadArgs: OnloadArgs }) => { title="(BETA) Overlay in canvas" description="Whether or not to overlay discourse context information over canvas nodes." settingKeys={["Overlay in canvas"]} + initialValue={getSetting( + DISCOURSE_CONTEXT_OVERLAY_IN_CANVAS_KEY, + false, + )} onChange={(checked) => { void setSetting(DISCOURSE_CONTEXT_OVERLAY_IN_CANVAS_KEY, checked); }} @@ -147,6 +158,7 @@ const HomePersonalSettings = ({ onloadArgs }: { onloadArgs: OnloadArgs }) => { title="Streamline styling" description="Apply streamlined styling to your personal graph for a cleaner appearance." settingKeys={["Streamline styling"]} + initialValue={getSetting(STREAMLINE_STYLING_KEY, false)} onChange={(checked) => { void setSetting(STREAMLINE_STYLING_KEY, checked); const existingStyleElement = @@ -164,6 +176,7 @@ const HomePersonalSettings = ({ onloadArgs }: { onloadArgs: OnloadArgs }) => { title="Disable product diagnostics" description="Disable sending usage signals and error reports that help us improve the product." settingKeys={["Disable product diagnostics"]} + initialValue={getSetting(DISALLOW_DIAGNOSTICS, false)} onChange={(checked) => { void setSetting(DISALLOW_DIAGNOSTICS, checked); if (checked) { diff --git a/apps/roam/src/components/settings/QuerySettings.tsx b/apps/roam/src/components/settings/QuerySettings.tsx index 121e69c95..e40613c0c 100644 --- a/apps/roam/src/components/settings/QuerySettings.tsx +++ b/apps/roam/src/components/settings/QuerySettings.tsx @@ -23,6 +23,9 @@ const QuerySettings = ({ title="Hide query metadata" description="Hide the Roam blocks that are used to power each query" settingKeys={["Query", "Hide query metadata"]} + initialValue={ + (extensionAPI.settings.get(HIDE_METADATA_KEY) as boolean) ?? true + } onChange={(checked) => { void extensionAPI.settings.set(HIDE_METADATA_KEY, checked); posthog.capture("Query Settings: Hide Metadata Toggled", { diff --git a/apps/roam/src/index.ts b/apps/roam/src/index.ts index eadb9cf3a..9eb8095aa 100644 --- a/apps/roam/src/index.ts +++ b/apps/roam/src/index.ts @@ -35,18 +35,20 @@ import { getUidAndBooleanSetting } from "./utils/getExportSettings"; import getBasicTreeByParentUid from "roamjs-components/queries/getBasicTreeByParentUid"; import getPageUidByPageTitle from "roamjs-components/queries/getPageUidByPageTitle"; import { DISCOURSE_CONFIG_PAGE_TITLE } from "./utils/renderNodeConfigPage"; +import { getSetting } from "./utils/extensionSettings"; import { initPostHog } from "./utils/posthog"; +import { + STREAMLINE_STYLING_KEY, + DISALLOW_DIAGNOSTICS, +} from "./data/userSettings"; import { initSchema } from "./components/settings/utils/init"; -import { getPersonalSetting } from "./components/settings/utils/accessors"; export const DEFAULT_CANVAS_PAGE_FORMAT = "Canvas/*"; export default runExtension(async (onloadArgs) => { const isEncrypted = window.roamAlphaAPI.graph.isEncrypted; const isOffline = window.roamAlphaAPI.graph.type === "offline"; - const disallowDiagnostics = getPersonalSetting([ - "Disable product diagnostics", - ]); + const disallowDiagnostics = getSetting(DISALLOW_DIAGNOSTICS, false); if (!isEncrypted && !isOffline && !disallowDiagnostics) { initPostHog(); } @@ -89,9 +91,7 @@ export default runExtension(async (onloadArgs) => { const discourseFloatingMenuStyle = addStyle(discourseFloatingMenuStyles); // Add streamline styling only if enabled - const isStreamlineStylingEnabled = getPersonalSetting([ - "Streamline styling", - ]); + const isStreamlineStylingEnabled = getSetting(STREAMLINE_STYLING_KEY, false); let streamlineStyleElement: HTMLStyleElement | null = null; if (isStreamlineStylingEnabled) { streamlineStyleElement = addStyle(streamlineStyling); diff --git a/apps/roam/src/utils/createDiscourseNode.ts b/apps/roam/src/utils/createDiscourseNode.ts index f4e749d2e..851cba630 100644 --- a/apps/roam/src/utils/createDiscourseNode.ts +++ b/apps/roam/src/utils/createDiscourseNode.ts @@ -12,7 +12,6 @@ import { OnloadArgs, RoamBasicNode } from "roamjs-components/types"; import runQuery from "./runQuery"; import updateBlock from "roamjs-components/writes/updateBlock"; import posthog from "posthog-js"; -import { getPersonalSetting } from "~/components/settings/utils/accessors"; type Props = { text: string; @@ -33,8 +32,8 @@ const createDiscourseNode = async ({ text: text, }); const handleOpenInSidebar = (uid: string) => { - if (getPersonalSetting(["Disable sidebar open"])) return; - void openBlockInSidebar(uid); + if (extensionAPI?.settings.get("disable-sidebar-open")) return; + openBlockInSidebar(uid); setTimeout(() => { const sidebarTitle = document.querySelector( ".rm-sidebar-outline .rm-title-display", diff --git a/apps/roam/src/utils/initializeObserversAndListeners.ts b/apps/roam/src/utils/initializeObserversAndListeners.ts index c5f431c97..4f2a3fa68 100644 --- a/apps/roam/src/utils/initializeObserversAndListeners.ts +++ b/apps/roam/src/utils/initializeObserversAndListeners.ts @@ -61,7 +61,6 @@ import { renderPossibleDuplicates } from "~/components/VectorDuplicateMatches"; import getPageUidByPageTitle from "roamjs-components/queries/getPageUidByPageTitle"; import getPageTitleByPageUid from "roamjs-components/queries/getPageTitleByPageUid"; import findDiscourseNode from "./findDiscourseNode"; -import { getPersonalSetting } from "~/components/settings/utils/accessors"; const debounce = (fn: () => void, delay = 250) => { let timeout: number; @@ -192,11 +191,11 @@ export const initObservers = async ({ }>, ) => { if (!/page/i.test(e.detail.action)) return; - void window.roamAlphaAPI.ui.mainWindow + window.roamAlphaAPI.ui.mainWindow .getOpenPageOrBlockUid() .then((u) => u || window.roamAlphaAPI.util.dateToPageUid(new Date())) .then((parentUid) => { - return createBlock({ + createBlock({ parentUid, order: Number.MAX_VALUE, node: { text: `[[${e.detail.val}]]` }, @@ -204,7 +203,7 @@ export const initObservers = async ({ }); }) as EventListener; - if (getPersonalSetting(["Suggestive mode overlay"])) { + if (onloadArgs.extensionAPI.settings.get("suggestive-mode-overlay")) { addPageRefObserver(getSuggestiveOverlayHandler(onloadArgs)); } @@ -227,9 +226,9 @@ export const initObservers = async ({ }, }); - if (getPersonalSetting(["Page preview"])) + if (onloadArgs.extensionAPI.settings.get("page-preview")) addPageRefObserver(previewPageRefHandler); - if (getPersonalSetting(["Discourse context overlay"])) { + if (onloadArgs.extensionAPI.settings.get("discourse-context-overlay")) { const overlayHandler = getOverlayHandler(onloadArgs); onPageRefObserverChange(overlayHandler)(true); } @@ -384,7 +383,7 @@ export const initObservers = async ({ const nodeCreationPopoverListener = debounce(() => { const isTextSelectionPopupEnabled = - getPersonalSetting(["Text selection popup"]) !== false; + onloadArgs.extensionAPI.settings.get("text-selection-popup") !== false; if (!isTextSelectionPopupEnabled) return; diff --git a/apps/roam/src/utils/internalError.ts b/apps/roam/src/utils/internalError.ts index 201909ef6..6a1be6508 100644 --- a/apps/roam/src/utils/internalError.ts +++ b/apps/roam/src/utils/internalError.ts @@ -2,7 +2,8 @@ import posthog from "posthog-js"; import type { Properties } from "posthog-js"; import renderToast from "roamjs-components/components/Toast"; import sendErrorEmail from "~/utils/sendErrorEmail"; -import { getPersonalSetting } from "~/components/settings/utils/accessors"; +import { getSetting } from "~/utils/extensionSettings"; +import { DISALLOW_DIAGNOSTICS } from "~/data/userSettings"; const NON_WORD = /\W+/g; @@ -22,7 +23,7 @@ const internalError = ({ forceSendInDev?: boolean; }): void => { if ( - getPersonalSetting(["Disable product diagnostics"]) || + getSetting(DISALLOW_DIAGNOSTICS, false) || (process.env.NODE_ENV === "development" && forceSendInDev !== true) ) { console.error(error, context); diff --git a/apps/roam/src/utils/posthog.ts b/apps/roam/src/utils/posthog.ts index 65aca92b9..b1cc4a8dd 100644 --- a/apps/roam/src/utils/posthog.ts +++ b/apps/roam/src/utils/posthog.ts @@ -2,7 +2,8 @@ import getCurrentUserUid from "roamjs-components/queries/getCurrentUserUid"; import { getVersionWithDate } from "./getVersion"; import posthog from "posthog-js"; import type { CaptureResult } from "posthog-js"; -import { getPersonalSetting } from "~/components/settings/utils/accessors"; +import { getSetting } from "./extensionSettings"; +import { DISALLOW_DIAGNOSTICS } from "~/data/userSettings"; let initialized = false; @@ -69,7 +70,7 @@ export const disablePostHog = (): void => { }; export const initPostHog = (): void => { - const disabled = getPersonalSetting(["Disable product diagnostics"]); + const disabled = getSetting(DISALLOW_DIAGNOSTICS, false); if (!disabled) { doInitPostHog(); } diff --git a/apps/roam/src/utils/registerCommandPaletteCommands.ts b/apps/roam/src/utils/registerCommandPaletteCommands.ts index fb9489265..e3643ca1a 100644 --- a/apps/roam/src/utils/registerCommandPaletteCommands.ts +++ b/apps/roam/src/utils/registerCommandPaletteCommands.ts @@ -18,10 +18,6 @@ import { } from "./pageRefObserverHandlers"; import { HIDE_METADATA_KEY } from "~/data/userSettings"; import posthog from "posthog-js"; -import { - getPersonalSetting, - setPersonalSetting, -} from "~/components/settings/utils/accessors"; export const registerCommandPaletteCommands = (onloadArgs: OnloadArgs) => { const { extensionAPI } = onloadArgs; @@ -160,13 +156,12 @@ export const registerCommandPaletteCommands = (onloadArgs: OnloadArgs) => { }; const toggleDiscourseContextOverlay = async () => { - const currentValue = getPersonalSetting([ - "Discourse context overlay", - ]); + const currentValue = + (extensionAPI.settings.get("discourse-context-overlay") as boolean) ?? + false; const newValue = !currentValue; try { await extensionAPI.settings.set("discourse-context-overlay", newValue); - setPersonalSetting(["Discourse context overlay"], newValue); } catch (error) { const e = error as Error; renderToast({ @@ -187,14 +182,11 @@ export const registerCommandPaletteCommands = (onloadArgs: OnloadArgs) => { }; const toggleQueryMetadata = async () => { - const currentValue = getPersonalSetting([ - "Query", - "Hide query metadata", - ]); + const currentValue = + (extensionAPI.settings.get(HIDE_METADATA_KEY) as boolean) ?? true; const newValue = !currentValue; try { await extensionAPI.settings.set(HIDE_METADATA_KEY, newValue); - setPersonalSetting(["Query", "Hide query metadata"], newValue); } catch (error) { const e = error as Error; renderToast({