diff --git a/apps/roam/src/components/LeftSidebarView.tsx b/apps/roam/src/components/LeftSidebarView.tsx index 8e42ef64b0..5aae1c8bbd 100644 --- a/apps/roam/src/components/LeftSidebarView.tsx +++ b/apps/roam/src/components/LeftSidebarView.tsx @@ -60,6 +60,7 @@ import getTextByBlockUid from "roamjs-components/queries/getTextByBlockUid"; import refreshConfigTree from "~/utils/refreshConfigTree"; import { Dispatch, SetStateAction } from "react"; import { SettingsDialog } from "./settings/Settings"; +import { SETTINGS_TAB_IDS } from "./settings/utils/settingsTabs"; import { OnloadArgs } from "roamjs-components/types"; import renderOverlay from "roamjs-components/util/renderOverlay"; import getBasicTreeByParentUid from "roamjs-components/queries/getBasicTreeByParentUid"; @@ -862,16 +863,9 @@ const FavoritesPopover = ({ onloadArgs }: { onloadArgs: OnloadArgs }) => { content={ { - renderSettingsDialog("left-sidebar-global-settings"); - setIsMenuOpen(false); - }} - /> - { - renderSettingsDialog("left-sidebar-personal-settings"); + renderSettingsDialog(SETTINGS_TAB_IDS.featuresLeftSidebar); setIsMenuOpen(false); }} /> diff --git a/apps/roam/src/components/settings/CanvasSettings.tsx b/apps/roam/src/components/settings/CanvasSettings.tsx new file mode 100644 index 0000000000..d749ddde96 --- /dev/null +++ b/apps/roam/src/components/settings/CanvasSettings.tsx @@ -0,0 +1,69 @@ +import React from "react"; +import { OnloadArgs } from "roamjs-components/types"; +import { + DISCOURSE_TOOL_SHORTCUT_KEY, + AUTO_CANVAS_RELATIONS_KEY, +} from "~/data/userSettings"; +import { setSetting } from "~/utils/extensionSettings"; +import KeyboardShortcutInput from "./KeyboardShortcutInput"; +import CanvasShortcutSettings from "./CanvasShortcutSettings"; +import { + GlobalTextPanel, + PersonalFlagPanel, +} from "./components/BlockPropSettingPanels"; +import { GLOBAL_KEYS, PERSONAL_KEYS } from "./utils/settingKeys"; +import { type SettingsSnapshot } from "./utils/accessors"; +import { useLegacyConfigBlocks } from "./utils/useLegacyConfigBlocks"; +import { SettingsSectionHeading } from "./components/SettingsHeadings"; +import { ROAM_DOCS, withDocsLink } from "./utils/docs"; + +const CanvasSettings = ({ + onloadArgs, + globalSettings, + personalSettings, +}: { + onloadArgs: OnloadArgs; + globalSettings: SettingsSnapshot["globalSettings"]; + personalSettings: SettingsSnapshot["personalSettings"]; +}): React.ReactElement => { + const legacyBlocks = useLegacyConfigBlocks(); + return ( +
+ + + { + void setSetting(AUTO_CANVAS_RELATIONS_KEY, checked); + }} + /> + Node on canvas + +
+ ); +}; + +export default CanvasSettings; diff --git a/apps/roam/src/components/settings/CanvasShortcutSettings.tsx b/apps/roam/src/components/settings/CanvasShortcutSettings.tsx index f109b6cdf7..26a3815c9a 100644 --- a/apps/roam/src/components/settings/CanvasShortcutSettings.tsx +++ b/apps/roam/src/components/settings/CanvasShortcutSettings.tsx @@ -1,5 +1,5 @@ import React, { useState } from "react"; -import { Checkbox, InputGroup, Tabs, Tab } from "@blueprintjs/core"; +import { Checkbox, InputGroup } from "@blueprintjs/core"; import Description from "~/components/settings/SettingsDescription"; import getDiscourseNodes, { excludeDefaultNodes, @@ -7,6 +7,7 @@ import getDiscourseNodes, { import { setPersonalSetting } from "~/components/settings/utils/accessors"; import { PERSONAL_KEYS } from "~/components/settings/utils/settingKeys"; import { setSetting } from "~/utils/extensionSettings"; +import { settingAnchor } from "~/components/settings/utils/settingAnchor"; import { CANVAS_NODE_SHORTCUTS_KEY } from "~/data/userSettings"; import type { CanvasNodeShortcuts, PersonalSettings } from "./utils/zodSchema"; @@ -55,7 +56,7 @@ const ShortcutRow = ({ }; return ( - <> +
- +
); }; @@ -103,45 +104,36 @@ const CanvasShortcutSettings = ({ }; return ( - - -
-
- Override the canvas keyboard shortcuts -
-
- Changes take effect next time a canvas is opened -
-
- {nodes.map((node) => { - const override = shortcuts[node.type]; - return ( - - updateShortcut(node.type, { - enabled, - ...(enabled ? {} : { value: "" }), - }) - } - onValueChange={(value) => - updateShortcut(node.type, { value }) - } - /> - ); - })} - - } - /> - +
+
+
Override the canvas keyboard shortcuts
+
+ Changes take effect next time a canvas is opened +
+
+ {nodes.map((node) => { + const override = shortcuts[node.type]; + return ( + + updateShortcut(node.type, { + enabled, + ...(enabled ? {} : { value: "" }), + }) + } + onValueChange={(value) => updateShortcut(node.type, { value })} + /> + ); + })} +
); }; diff --git a/apps/roam/src/components/settings/DiscourseContextSettings.tsx b/apps/roam/src/components/settings/DiscourseContextSettings.tsx new file mode 100644 index 0000000000..276fbce439 --- /dev/null +++ b/apps/roam/src/components/settings/DiscourseContextSettings.tsx @@ -0,0 +1,44 @@ +import React from "react"; +import { OnloadArgs } from "roamjs-components/types"; +import posthog from "posthog-js"; +import { + getOverlayHandler, + onPageRefObserverChange, +} from "~/utils/pageRefObserverHandlers"; +import { setSetting } from "~/utils/extensionSettings"; +import { PersonalFlagPanel } from "./components/BlockPropSettingPanels"; +import { PERSONAL_KEYS } from "./utils/settingKeys"; +import { type SettingsSnapshot } from "./utils/accessors"; +import { ROAM_DOCS, withDocsLink } from "./utils/docs"; + +const DiscourseContextSettings = ({ + onloadArgs, + personalSettings, +}: { + onloadArgs: OnloadArgs; + personalSettings: SettingsSnapshot["personalSettings"]; +}) => { + const overlayHandler = getOverlayHandler(onloadArgs); + return ( +
+ { + void setSetting("discourse-context-overlay", checked); + onPageRefObserverChange(overlayHandler)(checked); + posthog.capture("Personal Settings: Overlay Toggled", { + enabled: checked, + }); + }} + /> +
+ ); +}; + +export default DiscourseContextSettings; diff --git a/apps/roam/src/components/settings/GeneralSettings.tsx b/apps/roam/src/components/settings/GeneralSettings.tsx deleted file mode 100644 index 5e73eb2f08..0000000000 --- a/apps/roam/src/components/settings/GeneralSettings.tsx +++ /dev/null @@ -1,102 +0,0 @@ -import React, { useMemo, useState } from "react"; -import discourseConfigRef from "~/utils/discourseConfigRef"; -import refreshConfigTree from "~/utils/refreshConfigTree"; -import { Alert, Intent } from "@blueprintjs/core"; -import { - GlobalTextPanel, - FeatureFlagPanel, -} from "./components/BlockPropSettingPanels"; -import { GLOBAL_KEYS } from "~/components/settings/utils/settingKeys"; -import { type SettingsSnapshot } from "./utils/accessors"; -import posthog from "posthog-js"; -import getPageUidByPageTitle from "roamjs-components/queries/getPageUidByPageTitle"; -import { - getUidAndBooleanSetting, - getUidAndStringSetting, -} from "~/utils/getExportSettings"; -import { DISCOURSE_CONFIG_PAGE_TITLE } from "~/data/constants"; -import { ROAM_DOCS, withDocsLink } from "./utils/docs"; - -const DiscourseGraphHome = ({ - globalSettings, - featureFlags, -}: { - globalSettings: SettingsSnapshot["globalSettings"]; - featureFlags: SettingsSnapshot["featureFlags"]; -}) => { - const settings = useMemo(() => { - refreshConfigTree(); - const tree = discourseConfigRef.tree; - return { - settingsUid: getPageUidByPageTitle(DISCOURSE_CONFIG_PAGE_TITLE), - triggerUid: getUidAndStringSetting({ tree, text: "trigger" }).uid, - canvasPageFormatUid: getUidAndStringSetting({ - tree, - text: "Canvas Page Format", - }).uid, - leftSidebarEnabledUid: getUidAndBooleanSetting({ - tree, - text: "(BETA) Left Sidebar", - }).uid, - }; - }, []); - - const [isAlertOpen, setIsAlertOpen] = useState(false); - return ( -
- {/* TODO: Titles kept as legacy casing to match readers in discourseConfigRef.ts and initializeObserversAndListeners.ts. - Update titles to Sentence case once read side is migrated to block props. */} - - - { - if (checked && !featureFlags["Use new settings store"]) { - setIsAlertOpen(true); - } - posthog.capture("General Settings: Left Sidebar Toggled", { - enabled: checked, - }); - }} - /> - 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?

- -
- ); -}; - -export default DiscourseGraphHome; diff --git a/apps/roam/src/components/settings/KeyboardShortcutInput.tsx b/apps/roam/src/components/settings/KeyboardShortcutInput.tsx index a03969250f..2c73144953 100644 --- a/apps/roam/src/components/settings/KeyboardShortcutInput.tsx +++ b/apps/roam/src/components/settings/KeyboardShortcutInput.tsx @@ -8,6 +8,7 @@ import { Label, } from "@blueprintjs/core"; import Description from "~/components/settings/SettingsDescription"; +import { settingAnchor } from "~/components/settings/utils/settingAnchor"; import { DISCOURSE_TOOL_SHORTCUT_KEY } from "~/data/userSettings"; import { setPersonalSetting } from "~/components/settings/utils/accessors"; import { comboToString } from "~/components/DiscourseNodeMenu"; @@ -92,7 +93,7 @@ const KeyboardShortcutInput = ({ }, [extensionAPI, settingKey, blockPropKey]); return ( -