diff --git a/apps/roam/src/components/CreateRelationDialog.tsx b/apps/roam/src/components/CreateRelationDialog.tsx index d880bf0fe..4d05f592b 100644 --- a/apps/roam/src/components/CreateRelationDialog.tsx +++ b/apps/roam/src/components/CreateRelationDialog.tsx @@ -12,7 +12,6 @@ import { render as renderToast } from "roamjs-components/components/Toast"; import MenuItemSelect from "roamjs-components/components/MenuItemSelect"; import AutocompleteInput from "roamjs-components/components/AutocompleteInput"; import getPageTitleByPageUid from "roamjs-components/queries/getPageTitleByPageUid"; -import { getSetting } from "~/utils/extensionSettings"; import getDiscourseRelations, { type DiscourseRelation, } from "~/utils/getDiscourseRelations"; @@ -23,7 +22,7 @@ import type { DiscourseNode } from "~/utils/getDiscourseNodes"; import type { Result } from "~/utils/types"; import internalError from "~/utils/internalError"; import getDiscourseNodes from "~/utils/getDiscourseNodes"; -import { USE_REIFIED_RELATIONS } from "~/data/userSettings"; +import { useFeatureFlag } from "~/components/settings/utils/hooks"; export type CreateRelationDialogProps = { onClose: () => void; @@ -379,7 +378,7 @@ export const renderCreateRelationDialog = ( export const CreateRelationButton = ( props: CreateRelationDialogProps, ): React.JSX.Element | null => { - const showAddRelation = getSetting(USE_REIFIED_RELATIONS, false); + const showAddRelation = useFeatureFlag("Reified Relation Triples"); if (!showAddRelation) return null; let extProps: ExtendedCreateRelationDialogProps | null = null; try { diff --git a/apps/roam/src/components/LeftSidebarView.tsx b/apps/roam/src/components/LeftSidebarView.tsx index 34ce369ca..5635c1d00 100644 --- a/apps/roam/src/components/LeftSidebarView.tsx +++ b/apps/roam/src/components/LeftSidebarView.tsx @@ -508,12 +508,20 @@ const migrateFavorites = async () => { refreshConfigTree(); }; +let cachedOnloadArgs: OnloadArgs | null = null; + +export const cacheOnloadArgs = (onloadArgs: OnloadArgs): void => { + cachedOnloadArgs = onloadArgs; +}; + export const mountLeftSidebar = async ( wrapper: HTMLElement, onloadArgs: OnloadArgs, ): Promise => { if (!wrapper) return; + cachedOnloadArgs = onloadArgs; + const id = "dg-left-sidebar-root"; let root = wrapper.querySelector(`#${id}`) as HTMLDivElement; if (!root) { @@ -531,4 +539,24 @@ export const mountLeftSidebar = async ( ReactDOM.render(, root); }; +export const unmountLeftSidebar = (): void => { + const wrapper = document.querySelector(".starred-pages-wrapper") as HTMLDivElement; + if (!wrapper) return; + + const root = wrapper.querySelector("#dg-left-sidebar-root") as HTMLDivElement; + if (root) { + ReactDOM.unmountComponentAtNode(root); + root.remove(); + } + wrapper.style.padding = ""; +}; + +export const remountLeftSidebar = async (): Promise => { + const wrapper = document.querySelector(".starred-pages-wrapper") as HTMLDivElement; + if (!wrapper || !cachedOnloadArgs) return; + + wrapper.style.padding = "0"; + await mountLeftSidebar(wrapper, cachedOnloadArgs); +}; + export default LeftSidebarView; diff --git a/apps/roam/src/components/SuggestionsBody.tsx b/apps/roam/src/components/SuggestionsBody.tsx index 89cf7f7c9..1e84ec839 100644 --- a/apps/roam/src/components/SuggestionsBody.tsx +++ b/apps/roam/src/components/SuggestionsBody.tsx @@ -26,9 +26,8 @@ import normalizePageTitle from "roamjs-components/queries/normalizePageTitle"; import { type RelationDetails } from "~/utils/hyde"; import { getFormattedConfigTree } from "~/utils/discourseConfigRef"; import { render as renderToast } from "roamjs-components/components/Toast"; -import { getSetting } from "~/utils/extensionSettings"; -import { USE_REIFIED_RELATIONS } from "~/data/userSettings"; import { createReifiedRelation } from "~/utils/createReifiedBlock"; +import { getFeatureFlag } from "~/components/settings/utils/accessors"; export type DiscourseData = { results: Awaited>; @@ -309,7 +308,7 @@ const SuggestionsBody = ({ }; const handleCreateBlock = async (node: SuggestedNode) => { - if (getSetting(USE_REIFIED_RELATIONS, false)) { + if (getFeatureFlag("Reified Relation Triples")) { if (discourseNode === false) { renderToast({ id: "suggestions-create-block-error", diff --git a/apps/roam/src/components/canvas/DiscourseRelationShape/DiscourseRelationUtil.tsx b/apps/roam/src/components/canvas/DiscourseRelationShape/DiscourseRelationUtil.tsx index f5b4e6c02..ef3fc767a 100644 --- a/apps/roam/src/components/canvas/DiscourseRelationShape/DiscourseRelationUtil.tsx +++ b/apps/roam/src/components/canvas/DiscourseRelationShape/DiscourseRelationUtil.tsx @@ -63,7 +63,6 @@ import { shapeAtTranslationStart, updateArrowTerminal, } from "./helpers"; -import { getSetting } from "~/utils/extensionSettings"; import { createReifiedRelation } from "~/utils/createReifiedBlock"; import { discourseContext, isPageUid } from "~/components/canvas/Tldraw"; import getPageUidByPageTitle from "roamjs-components/queries/getPageUidByPageTitle"; @@ -81,7 +80,7 @@ import getPageTitleByPageUid from "roamjs-components/queries/getPageTitleByPageU import { AddReferencedNodeType } from "./DiscourseRelationTool"; import { dispatchToastEvent } from "~/components/canvas/ToastListener"; import internalError from "~/utils/internalError"; -import { USE_REIFIED_RELATIONS } from "~/data/userSettings"; +import { getFeatureFlag } from "~/components/settings/utils/accessors"; const COLOR_ARRAY = Array.from(textShapeProps.color.values) .filter((c) => !["red", "green", "grey"].includes(c)) @@ -612,7 +611,7 @@ export const createAllRelationShapeUtils = ( if (arrow.type !== target.type) { editor.updateShapes([{ id: arrow.id, type: target.type }]); } - if (getSetting(USE_REIFIED_RELATIONS, false)) { + if (getFeatureFlag("Reified Relation Triples")) { const sourceAsDNS = asDiscourseNodeShape(source, editor); const targetAsDNS = asDiscourseNodeShape(target, editor); diff --git a/apps/roam/src/components/results-view/ResultsTable.tsx b/apps/roam/src/components/results-view/ResultsTable.tsx index 86641a852..8b14dd10f 100644 --- a/apps/roam/src/components/results-view/ResultsTable.tsx +++ b/apps/roam/src/components/results-view/ResultsTable.tsx @@ -22,10 +22,9 @@ import toCellValue from "~/utils/toCellValue"; import { ContextContent } from "~/components/DiscourseContext"; import DiscourseContextOverlay from "~/components/DiscourseContextOverlay"; import { CONTEXT_OVERLAY_SUGGESTION } from "~/utils/predefinedSelections"; -import { USE_REIFIED_RELATIONS } from "~/data/userSettings"; -import { getSetting } from "~/utils/extensionSettings"; import { strictQueryForReifiedBlocks } from "~/utils/createReifiedBlock"; import internalError from "~/utils/internalError"; +import { useFeatureFlag } from "~/components/settings/utils/hooks"; const EXTRA_ROW_TYPES = ["context", "discourse"] as const; type ExtraRowType = (typeof EXTRA_ROW_TYPES)[number] | null; @@ -263,7 +262,7 @@ const ResultRow = ({ onDragEnd, onRefresh, }: ResultRowProps) => { - const useReifiedRel = getSetting(USE_REIFIED_RELATIONS, false); + const useReifiedRel = useFeatureFlag("Reified Relation Triples"); const cell = (key: string) => { const value = toCellValue({ value: r[`${key}-display`] || r[key] || "", diff --git a/apps/roam/src/components/settings/AdminPanel.tsx b/apps/roam/src/components/settings/AdminPanel.tsx index d0ded2d64..edbb1e279 100644 --- a/apps/roam/src/components/settings/AdminPanel.tsx +++ b/apps/roam/src/components/settings/AdminPanel.tsx @@ -1,4 +1,4 @@ -import React, { useState, useEffect, useMemo } from "react"; +import React, { useState, useEffect, useRef } from "react"; import { Button, Checkbox, @@ -12,9 +12,7 @@ import { TabId, Tabs, } from "@blueprintjs/core"; -import Description from "roamjs-components/components/Description"; import { Select } from "@blueprintjs/select"; -import { getSetting, setSetting } from "~/utils/extensionSettings"; import { getSupabaseContext, getLoggedInClient, @@ -32,11 +30,8 @@ import { countReifiedRelations } from "~/utils/createReifiedBlock"; import { DGSupabaseClient } from "@repo/database/lib/client"; import internalError from "~/utils/internalError"; import SuggestiveModeSettings from "./SuggestiveModeSettings"; -import { getFormattedConfigTree } from "~/utils/discourseConfigRef"; -import refreshConfigTree from "~/utils/refreshConfigTree"; -import createBlock from "roamjs-components/writes/createBlock"; -import deleteBlock from "roamjs-components/writes/deleteBlock"; -import { USE_REIFIED_RELATIONS } from "~/data/userSettings"; +import { FeatureFlagPanel } from "./components/BlockPropSettingPanels"; +import { useFeatureFlag } from "./utils/hooks"; const NodeRow = ({ node }: { node: PConceptFull }) => { return ( @@ -261,7 +256,7 @@ const MigrationTab = (): React.ReactElement => { const [useMigrationResults, setMigrationResults] = useState(""); const [useOngoing, setOngoing] = useState(false); const [useDryRun, setDryRun] = useState(false); - const enabled = getSetting(USE_REIFIED_RELATIONS, false); + const enabled = useFeatureFlag("Reified Relation Triples"); const doMigrateRelations = async () => { setOngoing(true); try { @@ -331,64 +326,40 @@ const MigrationTab = (): React.ReactElement => { }; const FeatureFlagsTab = (): React.ReactElement => { - const [useReifiedRelations, setUseReifiedRelations] = useState( - getSetting(USE_REIFIED_RELATIONS, false), - ); - const settings = useMemo(() => { - refreshConfigTree(); - return getFormattedConfigTree(); - }, []); - - const [suggestiveModeEnabled, setSuggestiveModeEnabled] = useState( - settings.suggestiveModeEnabled.value || false, - ); - const [suggestiveModeUid, setSuggestiveModeUid] = useState( - settings.suggestiveModeEnabled.uid, - ); const [isAlertOpen, setIsAlertOpen] = useState(false); const [isInstructionOpen, setIsInstructionOpen] = useState(false); + const confirmResolverRef = useRef<((value: boolean) => void) | null>(null); + + const handleSuggestiveModeBeforeEnable = (): Promise => { + return new Promise((resolve) => { + confirmResolverRef.current = resolve; + setIsAlertOpen(true); + }); + }; return (
- { - const checked = (e.target as HTMLInputElement).checked; - if (checked) { - setIsAlertOpen(true); - } else { - if (suggestiveModeUid) { - void deleteBlock(suggestiveModeUid); - setSuggestiveModeUid(undefined); - } - setSuggestiveModeEnabled(false); - } + { + if (checked) setIsInstructionOpen(true); }} - labelElement={ - <> - (BETA) Suggestive Mode Enabled - Sync Config -> Click on 'Generate & Upload All Node Embeddings'" - } - /> - - } /> { - void createBlock({ - parentUid: settings.settingsUid, - node: { text: "(BETA) Suggestive Mode Enabled" }, - }).then((uid) => { - setSuggestiveModeUid(uid); - setSuggestiveModeEnabled(true); - setIsAlertOpen(false); - setIsInstructionOpen(true); - }); + confirmResolverRef.current?.(true); + confirmResolverRef.current = null; + setIsAlertOpen(false); + }} + onCancel={() => { + confirmResolverRef.current?.(false); + confirmResolverRef.current = null; + setIsAlertOpen(false); }} - onCancel={() => setIsAlertOpen(false)} canEscapeKeyCancel={true} canOutsideClickCancel={true} intent={Intent.PRIMARY} @@ -404,10 +375,9 @@ const FeatureFlagsTab = (): React.ReactElement => { window.location.reload()} + onConfirm={() => setIsInstructionOpen(false)} onCancel={() => setIsInstructionOpen(false)} - confirmButtonText="Reload Graph" - cancelButtonText="Later" + confirmButtonText="Got it" intent={Intent.PRIMARY} >

@@ -415,34 +385,15 @@ const FeatureFlagsTab = (): React.ReactElement => { upload all node embeddings to supabase.

- Please reload the graph to see the new 'Suggestive Mode' - tab. -

-

- Then go to Suggestive Mode{" "} - {"-> Sync Config -> Click on 'Generate & Upload All Node Embeddings'"} + Go to the new 'Suggestive Mode' tab, then Sync Config{" "} + {"-> Click on 'Generate & Upload All Node Embeddings'"}

- { - const target = e.target as HTMLInputElement; - setUseReifiedRelations(target.checked); - void setSetting(USE_REIFIED_RELATIONS, target.checked).catch( - () => undefined, - ); - }} - labelElement={ - <> - Reified Relation Triples - - - } +
} /> - {settings.suggestiveModeEnabled.value && ( + {suggestiveModeEnabled && ( { const settings = useMemo(() => { @@ -12,8 +11,6 @@ const DiscourseGraphHome = () => { return getFormattedConfigTree(); }, []); - const [isAlertOpen, setIsAlertOpen] = useState(false); - return (
{ value={settings.canvasPageFormat.value} defaultValue={DEFAULT_CANVAS_PAGE_FORMAT} /> - { - if (checked) { - setIsAlertOpen(true); - } - }, - }} + featureKey="Enable Left Sidebar" /> - window.location.reload()} - onCancel={() => setIsAlertOpen(false)} - confirmButtonText="Reload Graph" - cancelButtonText="Later" - intent={Intent.PRIMARY} - > -

Enabling the Left Sidebar requires a graph reload to take effect.

-

Would you like to reload now?

-
); }; diff --git a/apps/roam/src/components/settings/HomePersonalSettings.tsx b/apps/roam/src/components/settings/HomePersonalSettings.tsx index 7b833b4ec..d0283e48f 100644 --- a/apps/roam/src/components/settings/HomePersonalSettings.tsx +++ b/apps/roam/src/components/settings/HomePersonalSettings.tsx @@ -1,4 +1,4 @@ -import React, { useMemo } from "react"; +import React from "react"; import { OnloadArgs } from "roamjs-components/types"; import { Label, Checkbox } from "@blueprintjs/core"; import Description from "roamjs-components/components/Description"; @@ -27,12 +27,12 @@ import internalError from "~/utils/internalError"; import KeyboardShortcutInput from "./KeyboardShortcutInput"; import { getSetting, setSetting } from "~/utils/extensionSettings"; import streamlineStyling from "~/styles/streamlineStyling"; -import { getFormattedConfigTree } from "~/utils/discourseConfigRef"; +import { useFeatureFlag } from "./utils/hooks"; const HomePersonalSettings = ({ onloadArgs }: { onloadArgs: OnloadArgs }) => { const extensionAPI = onloadArgs.extensionAPI; const overlayHandler = getOverlayHandler(onloadArgs); - const settings = useMemo(() => getFormattedConfigTree(), []); + const suggestiveModeEnabled = useFeatureFlag("Suggestive Mode Enabled"); return (
@@ -85,7 +85,7 @@ const HomePersonalSettings = ({ onloadArgs }: { onloadArgs: OnloadArgs }) => { } /> - {settings.suggestiveModeEnabled?.value && ( + {suggestiveModeEnabled && ( { @@ -172,10 +171,7 @@ const NodeConfig = ({ node: DiscourseNode; onloadArgs: OnloadArgs; }) => { - const settings = useMemo(() => { - refreshConfigTree(); - return getFormattedConfigTree(); - }, []); + const suggestiveModeEnabled = useFeatureFlag("Suggestive Mode Enabled"); const getUid = (key: string) => getSubTree({ parentUid: node.type, @@ -410,7 +406,7 @@ const NodeConfig = ({
} /> - {settings.suggestiveModeEnabled.value && ( + {suggestiveModeEnabled && ( { + window.dispatchEvent( + new CustomEvent(FEATURE_FLAG_CHANGE_EVENT, { + detail: { key, value }, + }), + ); +}; + +export const useFeatureFlag = (key: keyof FeatureFlags): boolean => { + const [value, setValue] = useState(() => getFeatureFlag(key)); + + useEffect(() => { + const handleChange = (event: Event) => { + const customEvent = event as CustomEvent; + if (customEvent.detail.key === key) { + setValue(customEvent.detail.value); + } + }; + + window.addEventListener(FEATURE_FLAG_CHANGE_EVENT, handleChange); + return () => { + window.removeEventListener(FEATURE_FLAG_CHANGE_EVENT, handleChange); + }; + }, [key]); + + return value; +}; diff --git a/apps/roam/src/components/settings/utils/pullWatchers.ts b/apps/roam/src/components/settings/utils/pullWatchers.ts index e188e7c82..b60bf73a5 100644 --- a/apps/roam/src/components/settings/utils/pullWatchers.ts +++ b/apps/roam/src/components/settings/utils/pullWatchers.ts @@ -14,6 +14,15 @@ import { type PersonalSettings, type DiscourseNodeSettings, } from "./zodSchema"; +import { + unmountLeftSidebar, + remountLeftSidebar, +} from "~/components/LeftSidebarView"; +import { + initializeSupabaseSync, + setSyncActivity, +} from "~/utils/syncDgNodesToSupabase"; +import { emitFeatureFlagChange } from "./hooks"; type PullWatchCallback = (before: unknown, after: unknown) => void; @@ -70,13 +79,17 @@ type FeatureFlagHandler = ( allSettings: FeatureFlags, ) => void; -type GlobalSettingHandler = ( +type GlobalSettingHandler< + K extends keyof GlobalSettings = keyof GlobalSettings, +> = ( newValue: GlobalSettings[K], oldValue: GlobalSettings[K], allSettings: GlobalSettings, ) => void; -type PersonalSettingHandler = ( +type PersonalSettingHandler< + K extends keyof PersonalSettings = keyof PersonalSettings, +> = ( newValue: PersonalSettings[K], oldValue: PersonalSettings[K], allSettings: PersonalSettings, @@ -91,10 +104,31 @@ type DiscourseNodeHandler = ( export const featureFlagHandlers: Partial< Record > = { - // Add handlers as needed: - // "Enable Left Sidebar": (newValue) => { ... }, - // "Suggestive Mode Enabled": (newValue) => { ... }, - // "Reified Relation Triples": (newValue) => { ... }, + "Enable Left Sidebar": (newValue, oldValue) => { + if (newValue !== oldValue) { + emitFeatureFlagChange("Enable Left Sidebar", newValue); + if (newValue) { + void remountLeftSidebar(); + } else { + unmountLeftSidebar(); + } + } + }, + "Suggestive Mode Enabled": (newValue, oldValue) => { + if (newValue !== oldValue) { + emitFeatureFlagChange("Suggestive Mode Enabled", newValue); + if (newValue) { + initializeSupabaseSync(); + } else { + setSyncActivity(false); + } + } + }, + "Reified Relation Triples": (newValue, oldValue) => { + if (newValue !== oldValue) { + emitFeatureFlagChange("Reified Relation Triples", newValue); + } + }, }; export const globalSettingsHandlers: Partial< @@ -118,13 +152,11 @@ export const personalSettingsHandlers: Partial< // etc. }; - export const discourseNodeHandlers: DiscourseNodeHandler[] = [ // Add handlers as needed: // (nodeType, newSettings, oldSettings) => { ... }, ]; - export const setupPullWatchSettings = ( blockUids: Record, ): (() => void) => { @@ -163,7 +195,10 @@ export const setupPullWatchSettings = ( }); } - if (globalSettingsBlockUid && Object.keys(globalSettingsHandlers).length > 0) { + if ( + globalSettingsBlockUid && + Object.keys(globalSettingsHandlers).length > 0 + ) { addPullWatch(watches, globalSettingsBlockUid, (before, after) => { if (!hasPropChanged(before, after)) return; @@ -190,7 +225,10 @@ export const setupPullWatchSettings = ( }); } - if (personalSettingsBlockUid && Object.keys(personalSettingsHandlers).length > 0) { + if ( + personalSettingsBlockUid && + Object.keys(personalSettingsHandlers).length > 0 + ) { addPullWatch(watches, personalSettingsBlockUid, (before, after) => { if (!hasPropChanged(before, after)) return; @@ -220,7 +258,6 @@ export const setupPullWatchSettings = ( return createCleanupFn(watches); }; - export const setupPullWatchDiscourseNodes = ( nodePageUids: Record, ): (() => void) => { @@ -253,5 +290,4 @@ export const setupPullWatchDiscourseNodes = ( return createCleanupFn(watches); }; - export { hasPropChanged, getNormalizedProps }; diff --git a/apps/roam/src/index.ts b/apps/roam/src/index.ts index b48e079de..5b71e2785 100644 --- a/apps/roam/src/index.ts +++ b/apps/roam/src/index.ts @@ -31,10 +31,6 @@ import { setSyncActivity, } from "./utils/syncDgNodesToSupabase"; import { initPluginTimer } from "./utils/pluginTimer"; -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 { @@ -42,6 +38,8 @@ import { DISALLOW_DIAGNOSTICS, } from "./data/userSettings"; import { initSchema } from "./components/settings/utils/init"; +import { setupPullWatchSettings } from "./components/settings/utils/pullWatchers"; +import { getFeatureFlag } from "./components/settings/utils/accessors"; export const DEFAULT_CANVAS_PAGE_FORMAT = "Canvas/*"; @@ -76,8 +74,8 @@ export default runExtension(async (onloadArgs) => { initPluginTimer(); - // For testing purposes - await initSchema(); + const { blockUids } = await initSchema(); + const cleanupPullWatch = setupPullWatchSettings(blockUids); addGraphViewNodeStyling(); registerCommandPaletteCommands(onloadArgs); createSettingsPanel(onloadArgs); @@ -111,14 +109,9 @@ export default runExtension(async (onloadArgs) => { document.addEventListener("input", discourseNodeSearchTriggerListener); document.addEventListener("selectionchange", nodeCreationPopoverListener); - const isSuggestiveModeEnabled = getUidAndBooleanSetting({ - tree: getBasicTreeByParentUid( - getPageUidByPageTitle(DISCOURSE_CONFIG_PAGE_TITLE), - ), - text: "(BETA) Suggestive Mode Enabled", - }).value; - - if (isSuggestiveModeEnabled) { + // Initialize sync if suggestive mode was already enabled before plugin load + // (pull watcher handles reactive changes after this) + if (getFeatureFlag("Suggestive Mode Enabled")) { initializeSupabaseSync(); } @@ -164,6 +157,7 @@ export default runExtension(async (onloadArgs) => { ], observers: observers, unload: () => { + cleanupPullWatch(); setSyncActivity(false); window.roamjs.extension?.smartblocks?.unregisterCommand("QUERYBUILDER"); // @ts-expect-error - tldraw throws a warning on multiple loads diff --git a/apps/roam/src/utils/discourseConfigRef.ts b/apps/roam/src/utils/discourseConfigRef.ts index 24f758269..bb9f101bc 100644 --- a/apps/roam/src/utils/discourseConfigRef.ts +++ b/apps/roam/src/utils/discourseConfigRef.ts @@ -4,8 +4,6 @@ import { StringSetting, ExportConfigWithUids, getUidAndStringSetting, - getUidAndBooleanSetting, - BooleanSetting, } from "./getExportSettings"; import { DISCOURSE_CONFIG_PAGE_TITLE } from "~/utils/renderNodeConfigPage"; import getPageUidByPageTitle from "roamjs-components/queries/getPageUidByPageTitle"; @@ -44,8 +42,6 @@ type FormattedConfigTree = { canvasPageFormat: StringSetting; suggestiveMode: SuggestiveModeConfigWithUids; leftSidebar: LeftSidebarConfig; - leftSidebarEnabled: BooleanSetting; - suggestiveModeEnabled: BooleanSetting; }; export const getFormattedConfigTree = (): FormattedConfigTree => { @@ -74,14 +70,6 @@ export const getFormattedConfigTree = (): FormattedConfigTree => { }), suggestiveMode: getSuggestiveModeConfigAndUids(configTreeRef.tree), leftSidebar: getLeftSidebarSettings(configTreeRef.tree), - leftSidebarEnabled: getUidAndBooleanSetting({ - tree: configTreeRef.tree, - text: "(BETA) Left Sidebar", - }), - suggestiveModeEnabled: getUidAndBooleanSetting({ - tree: configTreeRef.tree, - text: "(BETA) Suggestive Mode Enabled", - }), }; }; export default configTreeRef; diff --git a/apps/roam/src/utils/initializeObserversAndListeners.ts b/apps/roam/src/utils/initializeObserversAndListeners.ts index cdb8e4d00..9a596a0fa 100644 --- a/apps/roam/src/utils/initializeObserversAndListeners.ts +++ b/apps/roam/src/utils/initializeObserversAndListeners.ts @@ -49,9 +49,10 @@ import { renderNodeTagPopupButton } from "./renderNodeTagPopup"; import { renderImageToolsMenu } from "./renderImageToolsMenu"; import { formatHexColor } from "~/components/settings/DiscourseNodeCanvasSettings"; import { getSetting } from "./extensionSettings"; -import { mountLeftSidebar } from "~/components/LeftSidebarView"; +import { mountLeftSidebar, cacheOnloadArgs } from "~/components/LeftSidebarView"; import { getUidAndBooleanSetting } from "./getExportSettings"; import { getCleanTagText } from "~/components/settings/NodeConfig"; +import { getFeatureFlag } from "~/components/settings/utils/accessors"; import getPleasingColors from "@repo/utils/getPleasingColors"; import { colord } from "colord"; import { renderPossibleDuplicates } from "~/components/VectorDuplicateMatches"; @@ -88,12 +89,7 @@ export const initObservers = async ({ const title = getPageTitleValueByHtmlElement(h1); const props = { title, h1, onloadArgs }; - const isSuggestiveModeEnabled = getUidAndBooleanSetting({ - tree: getBasicTreeByParentUid( - getPageUidByPageTitle(DISCOURSE_CONFIG_PAGE_TITLE), - ), - text: "(BETA) Suggestive Mode Enabled", - }).value; + const isSuggestiveModeEnabled = getFeatureFlag("Suggestive Mode Enabled"); const uid = getPageUidByPageTitle(title); const node = findDiscourseNode({ uid, title }); @@ -262,10 +258,9 @@ export const initObservers = async ({ className: "starred-pages-wrapper", callback: (el) => { void (async () => { - const isLeftSidebarEnabled = getUidAndBooleanSetting({ - tree: configTree, - text: "(BETA) Left Sidebar", - }).value; + cacheOnloadArgs(onloadArgs); + + const isLeftSidebarEnabled = getFeatureFlag("Enable Left Sidebar"); const container = el as HTMLDivElement; if (isLeftSidebarEnabled) { container.style.padding = "0"; diff --git a/apps/roam/src/utils/migrateRelations.ts b/apps/roam/src/utils/migrateRelations.ts index 41cba8014..4ccf0cd06 100644 --- a/apps/roam/src/utils/migrateRelations.ts +++ b/apps/roam/src/utils/migrateRelations.ts @@ -2,20 +2,19 @@ import getRelationData from "./getRelationData"; import getBlockProps from "./getBlockProps"; import type { json } from "./getBlockProps"; import setBlockProps from "./setBlockProps"; -import { getSetting, setSetting } from "./extensionSettings"; -import { USE_REIFIED_RELATIONS } from "~/data/userSettings"; import { createReifiedRelation, DISCOURSE_GRAPH_PROP_NAME, } from "./createReifiedBlock"; +import { getFeatureFlag, setFeatureFlag } from "~/components/settings/utils/accessors"; const MIGRATION_PROP_NAME = "relation-migration"; const migrateRelations = async (dryRun = false): Promise => { - const authorized = getSetting(USE_REIFIED_RELATIONS, false); + const authorized = getFeatureFlag("Reified Relation Triples"); if (!authorized) return 0; let numProcessed = 0; - await setSetting(USE_REIFIED_RELATIONS, false); // so queries use patterns + setFeatureFlag("Reified Relation Triples", false); // so queries use patterns // wait for the settings to propagate await new Promise((resolve) => setTimeout(resolve, 150)); try { @@ -65,7 +64,7 @@ const migrateRelations = async (dryRun = false): Promise => { numProcessed++; } } finally { - await setSetting(USE_REIFIED_RELATIONS, true); + setFeatureFlag("Reified Relation Triples", true); } return numProcessed; }; diff --git a/apps/roam/src/utils/registerDiscourseDatalogTranslators.ts b/apps/roam/src/utils/registerDiscourseDatalogTranslators.ts index ce2bbbfce..7395b8e9e 100644 --- a/apps/roam/src/utils/registerDiscourseDatalogTranslators.ts +++ b/apps/roam/src/utils/registerDiscourseDatalogTranslators.ts @@ -19,9 +19,8 @@ import replaceDatalogVariables from "./replaceDatalogVariables"; import parseQuery from "./parseQuery"; import { fireQuerySync, getWhereClauses } from "./fireQuery"; import { toVar } from "./compileDatalog"; -import { getSetting } from "./extensionSettings"; import { getExistingRelationPageUid } from "./createReifiedBlock"; -import { USE_REIFIED_RELATIONS } from "~/data/userSettings"; +import { getFeatureFlag } from "~/components/settings/utils/accessors"; const hasTag = (node: DiscourseNode): node is DiscourseNode & { tag: string } => !!node.tag; @@ -410,10 +409,7 @@ const registerDiscourseDatalogTranslators = () => { registerDatalogTranslator({ key: label, callback: ({ source, target, uid }) => { - const useReifiedRelations = getSetting( - USE_REIFIED_RELATIONS, - false, - ); + const useReifiedRelations = getFeatureFlag("Reified Relation Triples"); const relationPageUid = getExistingRelationPageUid(); const filteredRelations = getFilteredRelations({