ENG-1240 - Hide query metadata by default (#685)

* Enhance query metadata settings and toggle functionality

- Introduced a new setting for hiding metadata in query results, allowing users to control its visibility.
- Updated QueryBuilder and QuerySettings components to utilize the new hideMetadata setting.
- Added a command palette option to toggle the visibility of query metadata, improving user experience.
- Refactored settings retrieval to ensure consistent handling of the hideMetadata state across components.

* Align hideMetadata fallback behavior with other settings accessors.

Author: mdroidian

apps/roam/src/components/QueryBuilder.tsx

@@ -25,6 +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";
 
 type QueryPageComponent = (props: {
   pageUid: string;
@@ -37,7 +38,9 @@ type Props = Parameters<QueryPageComponent>[0];
 const QueryBuilder = ({ pageUid, isEditBlock, showAlias }: Props) => {
   const extensionAPI = useExtensionAPI();
   const hideMetadata = useMemo(
-    () => !!extensionAPI && !!extensionAPI.settings.get("hide-metadata"),
+    () =>
+      (extensionAPI?.settings.get(HIDE_METADATA_KEY) as boolean | undefined) ??
+      true,
     [extensionAPI],
   );
   const tree = useMemo(() => getBasicTreeByParentUid(pageUid), [pageUid]);

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

@@ -6,20 +6,21 @@ 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";
 
 const QuerySettings = ({
   extensionAPI,
 }: {
   extensionAPI: OnloadArgs["extensionAPI"];
 }) => {
-  const { globalPageSize } = getSettings(extensionAPI);
+  const { globalPageSize, hideMetadata } = getSettings(extensionAPI);
   return (
     <div className="flex flex-col gap-4 p-1">
       <Checkbox
-        defaultChecked={extensionAPI.settings.get(HIDE_METADATA_KEY) as boolean}
+        defaultChecked={hideMetadata}
         onChange={(e) => {
           const target = e.target as HTMLInputElement;
-          extensionAPI.settings.set(HIDE_METADATA_KEY, target.checked);
+          void setSetting<boolean>(HIDE_METADATA_KEY, target.checked);
         }}
         labelElement={
           <>
@@ -40,7 +41,7 @@ const QuerySettings = ({
         <NumericInput
           defaultValue={globalPageSize.toString()}
           onValueChange={(value) =>
-            extensionAPI.settings.set(DEFAULT_PAGE_SIZE_KEY, value)
+            void extensionAPI.settings.set(DEFAULT_PAGE_SIZE_KEY, value)
           }
         />
       </Label>

apps/roam/src/utils/parseResultSettings.ts

@@ -11,6 +11,7 @@ import getSettingValuesFromTree from "roamjs-components/util/getSettingValuesFro
 import {
   DEFAULT_FILTERS_KEY,
   DEFAULT_PAGE_SIZE_KEY,
+  HIDE_METADATA_KEY,
 } from "~/data/userSettings";
 import getTextByBlockUid from "roamjs-components/queries/getTextByBlockUid";
 
@@ -81,6 +82,8 @@ export const getSettings = (extensionAPI?: OnloadArgs["extensionAPI"]) => {
     ),
     globalPageSize:
       Number(extensionAPI?.settings.get(DEFAULT_PAGE_SIZE_KEY)) || 10,
+    hideMetadata:
+      (extensionAPI?.settings.get(HIDE_METADATA_KEY) as boolean) ?? true,
   };
 };
 

apps/roam/src/utils/registerCommandPaletteCommands.ts

@@ -16,6 +16,7 @@ import {
   getOverlayHandler,
   onPageRefObserverChange,
 } from "./pageRefObserverHandlers";
+import { HIDE_METADATA_KEY } from "~/data/userSettings";
 
 export const registerCommandPaletteCommands = (onloadArgs: OnloadArgs) => {
   const { extensionAPI } = onloadArgs;
@@ -161,6 +162,26 @@ export const registerCommandPaletteCommands = (onloadArgs: OnloadArgs) => {
     });
   };
 
+  const toggleQueryMetadata = async () => {
+    const currentValue =
+      (extensionAPI.settings.get(HIDE_METADATA_KEY) as boolean) ?? true;
+    const newValue = !currentValue;
+    try {
+      await extensionAPI.settings.set(HIDE_METADATA_KEY, newValue);
+    } catch (error) {
+      const e = error as Error;
+      renderToast({
+        id: "query-metadata-toggle-error",
+        content: `Failed to toggle query metadata: ${e.message}`,
+      });
+      return;
+    }
+    renderToast({
+      id: "query-metadata-toggle",
+      content: `Query metadata ${newValue ? "hidden" : "shown"}`,
+    });
+  };
+
   const addCommand = (label: string, callback: () => void) => {
     return extensionAPI.ui.commandPalette.addCommand({
       label,
@@ -177,6 +198,10 @@ export const registerCommandPaletteCommands = (onloadArgs: OnloadArgs) => {
     "DG: Toggle - Discourse context overlay",
     toggleDiscourseContextOverlay,
   );
+  void addCommand(
+    "DG: Toggle - Hide query metadata",
+    () => void toggleQueryMetadata(),
+  );
   void addCommand("DG: Query block - Create", createQueryBlock);
   void addCommand("DG: Query block - Refresh", refreshCurrentQueryBuilder);
 };