port query settings

apps/roam/src/components/ModifyNodeDialog.tsx

@@ -283,12 +283,8 @@ const ModifyNodeDialog = ({
       }
 
       if (keyImageOption === "query-builder") {
-        const parentUid = resolveQueryBuilderRef({
-          queryRef: qbAlias,
-          extensionAPI,
-        });
+        const parentUid = resolveQueryBuilderRef({ queryRef: qbAlias });
         const results = await runQuery({
-          extensionAPI,
           parentUid,
           // due to query format
           // eslint-disable-next-line @typescript-eslint/naming-convention

apps/roam/src/components/QueryBuilder.tsx

@@ -25,7 +25,7 @@ import { Column } from "~/utils/types";
 import getPageUidByPageTitle from "roamjs-components/queries/getPageUidByPageTitle";
 import posthog from "posthog-js";
 import parseResultSettings from "~/utils/parseResultSettings";
-import { HIDE_METADATA_KEY } from "~/data/userSettings";
+import { getPersonalSetting } from "~/components/settings/utils/accessors";
 
 type QueryPageComponent = (props: {
   pageUid: string;
@@ -36,12 +36,10 @@ type QueryPageComponent = (props: {
 type Props = Parameters<QueryPageComponent>[0];
 
 const QueryBuilder = ({ pageUid, isEditBlock, showAlias }: Props) => {
-  const extensionAPI = useExtensionAPI();
   const hideMetadata = useMemo(
     () =>
-      (extensionAPI?.settings.get(HIDE_METADATA_KEY) as boolean | undefined) ??
-      true,
-    [extensionAPI],
+      getPersonalSetting<boolean>(["Query", "Hide Query Metadata"]) ?? true,
+    [],
   );
   const tree = useMemo(() => getBasicTreeByParentUid(pageUid), [pageUid]);
   const [isEdit, _setIsEdit] = useState(

apps/roam/src/components/index.ts

@@ -15,7 +15,6 @@ export { render as renderQueryDrawer } from "./QueryDrawer";
 export { openQueryDrawer as QueryDrawer } from "./QueryDrawer";
 export { default as QueryEditor } from "./QueryEditor";
 export { default as QueryBuilder } from "./QueryBuilder";
-export { default as QueryPagesPanel } from "./settings/QueryPagesPanel";
 export { default as ResizableDrawer } from "./ResizableDrawer";
 export { default as ResultsView } from "./results-view/ResultsView";
 export { default as Timeline } from "./results-view/Timeline";

apps/roam/src/components/results-view/ResultsView.tsx

@@ -288,9 +288,8 @@ const ResultsView: ResultsViewComponent = ({
   exportIsOpen = false,
   toggleExport,
 }) => {
-  const extensionAPI = useExtensionAPI();
   const settings = useMemo(
-    () => parseResultSettings(parentUid, columns, extensionAPI),
+    () => parseResultSettings(parentUid, columns),
     [parentUid],
   );
   const [activeSort, setActiveSort] = useState(settings.activeSort);

apps/roam/src/components/settings/DefaultFilters.tsx

@@ -1,7 +1,10 @@
 import { Button, Intent, InputGroup } from "@blueprintjs/core";
 import React, { useEffect, useState } from "react";
-import type { OnloadArgs } from "roamjs-components/types";
 import type { Filters } from "roamjs-components/components/Filter";
+import {
+  getPersonalSetting,
+  setPersonalSetting,
+} from "./utils/accessors";
 
 //
 // TODO - REWORK THIS COMPONENT
@@ -95,19 +98,15 @@ const Filter = ({
   );
 };
 
-const DefaultFilters = ({
-  extensionAPI,
-}: {
-  extensionAPI: OnloadArgs["extensionAPI"];
-}) => {
+const DefaultFilters = () => {
   const [newColumn, setNewColumn] = useState("");
   const [filters, setFilters] = useState(() =>
     Object.fromEntries(
       Object.entries(
-        (extensionAPI.settings.get("default-filters") as Record<
-          string,
-          StoredFilters
-        >) || {},
+        getPersonalSetting<Record<string, StoredFilters>>([
+          "Query",
+          "Default Filters",
+        ]) || {},
       ).map(([k, v]) => [
         k,
         {
@@ -123,8 +122,8 @@ const DefaultFilters = ({
   );
 
   useEffect(() => {
-    extensionAPI.settings.set(
-      "default-filters",
+    setPersonalSetting(
+      ["Query", "Default Filters"],
       Object.fromEntries(
         Object.entries(filters).map(([k, v]) => [
           k,
@@ -198,7 +197,6 @@ const DefaultFilters = ({
               },
             };
             setFilters(newFilters);
-            // extensionAPI.settings.set("default-filters", newFilters);
             setNewColumn("");
           }}
         />

apps/roam/src/components/settings/QuerySettings.tsx

@@ -1,67 +1,43 @@
 import React from "react";
-import { OnloadArgs } from "roamjs-components/types";
-import { Label, NumericInput, Checkbox } from "@blueprintjs/core";
+import { Label } from "@blueprintjs/core";
 import Description from "roamjs-components/components/Description";
-import { getSettings } from "~/utils/parseResultSettings";
-import { DEFAULT_PAGE_SIZE_KEY, HIDE_METADATA_KEY } from "~/data/userSettings";
 import DefaultFilters from "./DefaultFilters";
-import QueryPagesPanel from "./QueryPagesPanel";
-import { setSetting } from "~/utils/extensionSettings";
+import {
+  PersonalFlagPanel,
+  PersonalNumberPanel,
+  PersonalMultiTextPanel,
+} from "./components/BlockPropSettingPanels";
 
-const QuerySettings = ({
-  extensionAPI,
-}: {
-  extensionAPI: OnloadArgs["extensionAPI"];
-}) => {
-  const { globalPageSize, hideMetadata } = getSettings(extensionAPI);
+const QuerySettings = () => {
   return (
     <div className="flex flex-col gap-4 p-1">
-      <Checkbox
-        defaultChecked={hideMetadata}
-        onChange={(e) => {
-          const target = e.target as HTMLInputElement;
-          void setSetting<boolean>(HIDE_METADATA_KEY, target.checked);
-        }}
-        labelElement={
-          <>
-            Hide Query Metadata
-            <Description
-              description={
-                "Hide the Roam blocks that are used to power each query"
-              }
-            />
-          </>
-        }
+      <PersonalFlagPanel
+        title="Hide Query Metadata"
+        description="Hide the Roam blocks that are used to power each query"
+        settingKeys={["Query", "Hide Query Metadata"]}
+        defaultValue={false}
+      />
+      <PersonalNumberPanel
+        title="Default Page Size"
+        description="The default page size used for query results"
+        settingKeys={["Query", "Default Page Size"]}
+        defaultValue={10}
+        min={1}
+      />
+      <PersonalMultiTextPanel
+        title="Query Pages"
+        description="The title formats of pages that you would like to serve as pages that generate queries"
+        settingKeys={["Query", "Query Pages"]}
+        defaultValue={[]}
       />
-      <Label>
-        Default Page Size
-        <Description
-          description={"The default page size used for query results"}
-        />
-        <NumericInput
-          defaultValue={globalPageSize.toString()}
-          onValueChange={(value) =>
-            void extensionAPI.settings.set(DEFAULT_PAGE_SIZE_KEY, value)
-          }
-        />
-      </Label>
-      <Label>
-        Query Pages
-        <Description
-          description={
-            "The title formats of pages that you would like to serve as pages that generate queries"
-          }
-        />
-        <QueryPagesPanel extensionAPI={extensionAPI} />
-      </Label>
       <Label>
         Default Filters
         <Description
           description={
             "Any filters that should be applied to your results by default"
           }
         />
-        <DefaultFilters extensionAPI={extensionAPI} />
+        <DefaultFilters />
       </Label>
     </div>
   );

apps/roam/src/components/settings/Settings.tsx

@@ -148,7 +148,7 @@ export const SettingsDialog = ({
             id="query-settings"
             title="Queries"
             className="overflow-y-auto"
-            panel={<QuerySettings extensionAPI={extensionAPI} />}
+            panel={<QuerySettings />}
           />
           <Tab
             id="left-sidebar-personal-settings"

apps/roam/src/components/settings/utils/accessors.ts

@@ -292,6 +292,11 @@ export const setDiscourseNodeSetting = (
   setBlockPropsByUid(pageUid, keys, value);
 };
 
+export const getQueryPages = (): string[] => {
+  const value = getPersonalSetting<string[]>(["Query", "Query Pages"]);
+  return Array.isArray(value) && value.length > 0 ? value : ["queries/*"];
+};
+
 export const getAllDiscourseNodes = (): DiscourseNodeSettings[] => {
   const results = window.roamAlphaAPI.q(`
     [:find ?uid ?title

apps/roam/src/data/userSettings.ts

@@ -1,7 +1,4 @@
-export const DEFAULT_PAGE_SIZE_KEY = "default-page-size";
 export const DEFAULT_CANVAS_PAGE_FORMAT_KEY = "default-canvas-page-format";
-export const HIDE_METADATA_KEY = "hide-metadata";
-export const DEFAULT_FILTERS_KEY = "default-filters";
 export const QUERY_BUILDER_SETTINGS_KEY = "query-builder-settings";
 export const AUTO_CANVAS_RELATIONS_KEY = "auto-canvas-relations";
 export const DISCOURSE_TOOL_SHORTCUT_KEY = "discourse-tool-shortcut";

apps/roam/src/index.ts

@@ -124,17 +124,16 @@ export default runExtension(async (onloadArgs) => {
     initializeSupabaseSync();
   }
 
-  const { extensionAPI } = onloadArgs;
   window.roamjs.extension.queryBuilder = {
     runQuery: (parentUid: string) =>
-      runQuery({ parentUid, extensionAPI }).then(
+      runQuery({ parentUid }).then(
         ({ allProcessedResults }) => allProcessedResults,
       ),
     runQuerySync: (parentUid: string) => {
       const queryArgs = parseQuery(parentUid);
       return fireQuerySync(queryArgs);
     },
-    listActiveQueries: () => listActiveQueries(extensionAPI),
+    listActiveQueries: () => listActiveQueries(),
     isDiscourseNode: isDiscourseNode,
     // @ts-expect-error - we are still using roamjs-components global definition
     getDiscourseNodes: getDiscourseNodes,

apps/roam/src/utils/calcCanvasNodeSizeAndImg.ts

@@ -107,12 +107,8 @@ const calcCanvasNodeSizeAndImg = async ({
 
   let imageUrl;
   if (keyImageOption === "query-builder") {
-    const parentUid = resolveQueryBuilderRef({
-      queryRef: qbAlias,
-      extensionAPI,
-    });
+    const parentUid = resolveQueryBuilderRef({ queryRef: qbAlias });
     const results = await runQuery({
-      extensionAPI,
       parentUid,
       // eslint-disable-next-line @typescript-eslint/naming-convention
       inputs: { NODETEXT: nodeText, NODEUID: uid },

apps/roam/src/utils/createDiscourseNode.ts

@@ -82,12 +82,8 @@ const createDiscourseNode = async ({
       if (keyImageOption === "query-builder") {
         if (!extensionAPI) return;
 
-        const parentUid = resolveQueryBuilderRef({
-          queryRef: qbAlias,
-          extensionAPI,
-        });
+        const parentUid = resolveQueryBuilderRef({ queryRef: qbAlias });
         const results = await runQuery({
-          extensionAPI,
           parentUid,
           inputs: { NODETEXT: text, NODEUID: pageUid },
         });

apps/roam/src/utils/isQueryPage.ts

@@ -1,15 +1,7 @@
-import { OnloadArgs } from "roamjs-components/types";
-import { getQueryPages } from "~/components/settings/QueryPagesPanel";
+import { getQueryPages } from "~/components/settings/utils/accessors";
 
-export const isQueryPage = ({
-  title,
-  onloadArgs,
-}: {
-  title: string;
-  onloadArgs: OnloadArgs;
-}): boolean => {
-  const { extensionAPI } = onloadArgs;
-  const queryPages = getQueryPages(extensionAPI);
+export const isQueryPage = ({ title }: { title: string }): boolean => {
+  const queryPages = getQueryPages();
 
   const matchesQueryPage = queryPages.some((queryPage) => {
     const escapedPattern = queryPage