From fc9864afef83d25822d77c2ca45794c956d8f29b Mon Sep 17 00:00:00 2001 From: sid597 Date: Fri, 26 Dec 2025 10:16:20 +0530 Subject: [PATCH] update zod scheema to facilitate global settings --- .../settings/BlockPropFeatureFlagPanel.tsx | 40 --------- .../components/settings/GeneralSettings.tsx | 7 +- .../settings/block-prop/FlagPanel.tsx | 82 +++++++++++++++++++ apps/roam/src/utils/Settings/accessors.ts | 41 +++++++++- apps/roam/src/utils/Settings/zodSchema.ts | 6 +- 5 files changed, 126 insertions(+), 50 deletions(-) delete mode 100644 apps/roam/src/components/settings/BlockPropFeatureFlagPanel.tsx create mode 100644 apps/roam/src/components/settings/block-prop/FlagPanel.tsx diff --git a/apps/roam/src/components/settings/BlockPropFeatureFlagPanel.tsx b/apps/roam/src/components/settings/BlockPropFeatureFlagPanel.tsx deleted file mode 100644 index 7b5d1046f..000000000 --- a/apps/roam/src/components/settings/BlockPropFeatureFlagPanel.tsx +++ /dev/null @@ -1,40 +0,0 @@ -import { - getFeatureFlag, - setFeatureFlag, -} from "~/utils/Settings/accessors"; -import { type FeatureFlags } from "~/utils/Settings/zodSchema"; -import { Checkbox } from "@blueprintjs/core"; -import Description from "roamjs-components/components/Description"; -import idToTitle from "roamjs-components/util/idToTitle"; -import React, { useState } from "react"; - -export const BlockPropFeatureFlagPanel = ({ - title, - description, - featureKey, -}: { - title: string; - description: string; - featureKey: keyof FeatureFlags; -}) => { - const [value, setValue] = useState(() => getFeatureFlag(featureKey)); - - const handleChange = (e: React.ChangeEvent) => { - const { checked } = e.target; - setFeatureFlag(featureKey, checked); - setValue(checked); - }; - - return ( - - {idToTitle(title)} - - - } - /> - ); -}; diff --git a/apps/roam/src/components/settings/GeneralSettings.tsx b/apps/roam/src/components/settings/GeneralSettings.tsx index 46ced2c33..0ab5a1ce9 100644 --- a/apps/roam/src/components/settings/GeneralSettings.tsx +++ b/apps/roam/src/components/settings/GeneralSettings.tsx @@ -3,8 +3,9 @@ import TextPanel from "roamjs-components/components/ConfigPanels/TextPanel"; import { getFormattedConfigTree } from "~/utils/discourseConfigRef"; import refreshConfigTree from "~/utils/refreshConfigTree"; import { DEFAULT_CANVAS_PAGE_FORMAT } from "~/index"; +import { TOP_LEVEL_BLOCK_PROP_KEYS } from "~/data/blockPropsSettingsConfig"; import { Alert, Intent } from "@blueprintjs/core"; -import { BlockPropFeatureFlagPanel } from "./BlockPropFeatureFlagPanel"; +import { FlagPanel } from "./block-prop/FlagPanel"; const DiscourseGraphHome = () => { const settings = useMemo(() => { @@ -33,10 +34,10 @@ const DiscourseGraphHome = () => { value={settings.canvasPageFormat.value} defaultValue={DEFAULT_CANVAS_PAGE_FORMAT} /> - { + const [root, ...rest] = flag; + + if (root === TOP_LEVEL_BLOCK_PROP_KEYS.featureFlags) { + const key = rest[0] as keyof FeatureFlags; + return { + getValue: () => getFeatureFlag(key), + setValue: (checked: boolean) => setFeatureFlag(key, checked), + }; + } + + if (root === TOP_LEVEL_BLOCK_PROP_KEYS.global) { + return { + getValue: () => { + const current = getGlobalSetting(rest); + const parsed = z.boolean().safeParse(current); + return parsed.success ? parsed.data : false; + }, + setValue: (checked: boolean) => setGlobalSetting(rest, checked), + }; + } + + return { + getValue: () => false, + setValue: (checked: boolean) => { + console.warn(`Unknown flag root: ${root} - received value: ${checked}`); + }, + }; +}; + +export const FlagPanel = ({ title, description, disabled, flag }: Props) => { + const adapter = useMemo(() => getAdapter(flag), [flag]); + const [value, setLocalValue] = useState(() => adapter.getValue()); + + const handleChange = (e: React.ChangeEvent) => { + const { checked } = e.target; + adapter.setValue(checked); + setLocalValue(checked); + }; + + return ( + + {idToTitle(title)} + + + } + /> + ); +}; diff --git a/apps/roam/src/utils/Settings/accessors.ts b/apps/roam/src/utils/Settings/accessors.ts index e91a861db..4e81a09a5 100644 --- a/apps/roam/src/utils/Settings/accessors.ts +++ b/apps/roam/src/utils/Settings/accessors.ts @@ -1,9 +1,19 @@ import getBlockProps, { type json } from "../getBlockProps"; import getBlockUidByTextOnPage from "roamjs-components/queries/getBlockUidByTextOnPage"; import setBlockProps from "../setBlockProps"; -import { DG_BLOCK_PROP_SETTINGS_PAGE_TITLE, TOP_LEVEL_BLOCK_PROP_KEYS } from "~/data/blockPropsSettingsConfig"; +import { + DG_BLOCK_PROP_SETTINGS_PAGE_TITLE, + TOP_LEVEL_BLOCK_PROP_KEYS, +} from "~/data/blockPropsSettingsConfig"; import z from "zod"; -import { FeatureFlags, FeatureFlagsSchema } from "./zodSchema"; +import { + FeatureFlags, + FeatureFlagsSchema, + GlobalSettingsSchema, +} from "./zodSchema"; + +const isRecord = (value: unknown): value is Record => + typeof value === "object" && value !== null && !Array.isArray(value); export const getBlockPropBasedSettings = ({ keys, @@ -103,7 +113,6 @@ export const setBlockPropBasedSettings = ({ setBlockProps(blockUid, updatedProps, true); }; - export const getFeatureFlag = (key: keyof FeatureFlags): boolean => { const featureFlagKey = TOP_LEVEL_BLOCK_PROP_KEYS.featureFlags; @@ -128,4 +137,28 @@ export const setFeatureFlag = ( keys: [featureFlagKey, key], value: validatedValue, }); -}; \ No newline at end of file +}; + +export const getGlobalSetting = (keys: string[]): unknown => { + const globalKey = TOP_LEVEL_BLOCK_PROP_KEYS.global; + + const { blockProps } = getBlockPropBasedSettings({ + keys: [globalKey], + }); + + const settings = GlobalSettingsSchema.parse(blockProps || {}); + + return keys.reduce((current, key) => { + if (!isRecord(current) || !(key in current)) return undefined; + return current[key]; + }, settings); +}; + +export const setGlobalSetting = (keys: string[], value: json): void => { + const globalKey = TOP_LEVEL_BLOCK_PROP_KEYS.global; + + void setBlockPropBasedSettings({ + keys: [globalKey, ...keys], + value, + }); +}; diff --git a/apps/roam/src/utils/Settings/zodSchema.ts b/apps/roam/src/utils/Settings/zodSchema.ts index 092b5fd74..ecab73e52 100644 --- a/apps/roam/src/utils/Settings/zodSchema.ts +++ b/apps/roam/src/utils/Settings/zodSchema.ts @@ -7,10 +7,10 @@ export const FeatureFlagsSchema = z.object({ export const GlobalSettingsSchema = z.object({ "Left Sidebar": z.object({ - Children: z.array(z.string()), + Children: z.array(z.string()).default([]), Settings: z.object({ - Foldable: z.boolean(), - "Truncate at": z.number().int(), + Collapsable: z.boolean().default(false), + Folded: z.boolean().default(false), }), }), });