ENG-2213 Settings catalog: address every setting by key and location

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

@@ -5,6 +5,7 @@ import getDiscourseNodes, {
   excludeDefaultNodes,
 } from "~/utils/getDiscourseNodes";
 import { setPersonalSetting } from "~/components/settings/utils/accessors";
+import { settingAnchor } from "~/components/settings/utils/settingAnchor";
 import { PERSONAL_KEYS } from "~/components/settings/utils/settingKeys";
 import { setSetting } from "~/utils/extensionSettings";
 import { CANVAS_NODE_SHORTCUTS_KEY } from "~/data/userSettings";
@@ -103,7 +104,10 @@ const CanvasShortcutSettings = ({
   };
 
   return (
-    <div className="inline-grid grid-cols-[auto_auto] items-center gap-x-4 gap-y-2 p-1">
+    <div
+      className="inline-grid grid-cols-[auto_auto] items-center gap-x-4 gap-y-2 p-1"
+      {...settingAnchor([PERSONAL_KEYS.canvasNodeShortcuts])}
+    >
       <div className="col-span-2 mb-2">
         <div className="text-base">Override the canvas keyboard shortcuts</div>
         <div className="text-sm italic text-gray-500">

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

@@ -17,6 +17,7 @@ import {
   CANVAS_KEYS,
   DISCOURSE_NODE_KEYS,
   SPECIFICATION_KEYS,
+  TEMPLATE_SETTING_KEYS,
 } from "~/components/settings/utils/settingKeys";
 import DiscourseNodeSuggestiveRules from "./DiscourseNodeSuggestiveRules";
 import { getNodeTagStyles } from "~/utils/getDiscourseNodeColors";
@@ -114,6 +115,7 @@ const DiscourseNodeColorSetting = ({
         label="Color"
         description="Changes the color of tags and canvas nodes"
         scope="global"
+        settingKeys={[DISCOURSE_NODE_KEYS.canvasSettings, CANVAS_KEYS.color]}
         control={
           <ControlGroup>
             <InputGroup
@@ -359,6 +361,7 @@ const NodeConfig = ({ node }: { node: DiscourseNode }) => {
             ROAM_DOCS.grammarNodes,
           )}
           scope="global"
+          settingKeys={[DISCOURSE_NODE_KEYS.specification]}
           controlPlacement="below"
           control={
             <DiscourseNodeSpecification
@@ -378,6 +381,7 @@ const NodeConfig = ({ node }: { node: DiscourseNode }) => {
           label="Index"
           description={`The saved list of all ${node.text} pages \u2014 which pages appear and which columns show.`}
           scope="global"
+          settingKeys={[DISCOURSE_NODE_KEYS.index]}
           control={
             <SettingDrillDownSummary
               summary={`See all ${node.text} nodes`}
@@ -410,6 +414,7 @@ const NodeConfig = ({ node }: { node: DiscourseNode }) => {
             ROAM_DOCS.creatingNodes,
           )}
           scope="global"
+          settingKeys={TEMPLATE_SETTING_KEYS}
           control={
             <SettingDrillDownSummary
               summary="Edit template"

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

@@ -133,6 +133,10 @@ const PageGroupsPanel = ({
       label="Page groups"
       description="Organize pages into named groups that will be can be selected when generating discourse suggestions."
       scope="global"
+      settingKeys={[
+        GLOBAL_KEYS.suggestiveMode,
+        SUGGESTIVE_MODE_KEYS.pageGroups,
+      ]}
       controlPlacement="below"
       control={
         <div className="flex flex-col gap-2">

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

@@ -150,7 +150,7 @@ const PreferencesGeneral = ({
           "Use stored relations instead of legacy pattern-based relations",
           ROAM_DOCS.migrationToStoredRelations,
         )}
-        settingKeys={["Reified relation triples"]}
+        settingKeys={[PERSONAL_KEYS.reifiedRelationTriples]}
         initialValue={personalSettings["Reified relation triples"]}
         value={storedRelations}
         onBeforeChange={async (checked) => {

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

@@ -33,7 +33,7 @@ import { getVersionWithDate } from "~/utils/getVersion";
 import posthog from "posthog-js";
 import { bulkReadSettings } from "./utils/accessors";
 import { onSettingChange, settingKeys } from "./utils/settingsEmitter";
-import { SETTINGS_TAB_IDS } from "./utils/settingsTabs";
+import { SETTINGS_TAB_IDS, SETTINGS_TAB_META } from "./utils/settingsTabs";
 import {
   resolveInitialSettingsPath,
   settingsNavReducer,
@@ -188,7 +188,7 @@ export const SettingsDialog = ({
           <SectionHeader>Preferences</SectionHeader>
           <Tab
             id={SETTINGS_TAB_IDS.preferencesGeneral}
-            title="General"
+            title={SETTINGS_TAB_META[SETTINGS_TAB_IDS.preferencesGeneral].label}
             className="overflow-y-auto"
             panel={
               <PreferencesGeneral
@@ -200,7 +200,7 @@ export const SettingsDialog = ({
           />
           <Tab
             id={SETTINGS_TAB_IDS.preferencesStyling}
-            title="Styling"
+            title={SETTINGS_TAB_META[SETTINGS_TAB_IDS.preferencesStyling].label}
             className="overflow-y-auto"
             panel={
               <PreferencesStyling
@@ -211,7 +211,9 @@ export const SettingsDialog = ({
           <SectionHeader>Features</SectionHeader>
           <Tab
             id={SETTINGS_TAB_IDS.featuresDiscourseContext}
-            title="Discourse context"
+            title={
+              SETTINGS_TAB_META[SETTINGS_TAB_IDS.featuresDiscourseContext].label
+            }
             className="overflow-y-auto"
             panel={
               <DiscourseContextSettings
@@ -222,7 +224,7 @@ export const SettingsDialog = ({
           />
           <Tab
             id={SETTINGS_TAB_IDS.featuresCanvas}
-            title="Canvas"
+            title={SETTINGS_TAB_META[SETTINGS_TAB_IDS.featuresCanvas].label}
             className="overflow-y-auto"
             panel={
               <CanvasSettings
@@ -234,7 +236,9 @@ export const SettingsDialog = ({
           />
           <Tab
             id={SETTINGS_TAB_IDS.featuresLeftSidebar}
-            title="Left sidebar"
+            title={
+              SETTINGS_TAB_META[SETTINGS_TAB_IDS.featuresLeftSidebar].label
+            }
             className="overflow-y-auto"
             panel={
               <LeftSidebarSettings
@@ -249,7 +253,7 @@ export const SettingsDialog = ({
           <SectionHeader>Grammar</SectionHeader>
           <Tab
             id={SETTINGS_TAB_IDS.grammarNodes}
-            title="Nodes"
+            title={SETTINGS_TAB_META[SETTINGS_TAB_IDS.grammarNodes].label}
             panel={
               <SettingsNavProvider path={path} dispatch={dispatch}>
                 <GrammarNodesRoute onloadArgs={onloadArgs} />
@@ -258,7 +262,7 @@ export const SettingsDialog = ({
           />
           <Tab
             id={SETTINGS_TAB_IDS.grammarRelations}
-            title="Relations"
+            title={SETTINGS_TAB_META[SETTINGS_TAB_IDS.grammarRelations].label}
             className="overflow-y-auto"
             panel={
               <DiscourseRelationConfigPanel
@@ -272,7 +276,7 @@ export const SettingsDialog = ({
           <SectionHeader>Advanced</SectionHeader>
           <Tab
             id={SETTINGS_TAB_IDS.advancedQueries}
-            title="Queries"
+            title={SETTINGS_TAB_META[SETTINGS_TAB_IDS.advancedQueries].label}
             className="overflow-y-auto"
             panel={
               <QuerySettings

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

@@ -235,6 +235,7 @@ const DualWriteBlocksPanel = ({
           label={title}
           description={description}
           scope="global"
+          settingKeys={settingKeys}
           controlPlacement="below"
           control={blocksContainer}
         />

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

@@ -1,6 +1,8 @@
 import React, { useId } from "react";
 import { Icon, type IconName, Position, Tooltip } from "@blueprintjs/core";
 import { settingAnchor } from "~/components/settings/utils/settingAnchor";
+import { describedSetting } from "~/components/settings/utils/settingsCatalog";
+import { withDocsLink } from "~/components/settings/utils/docs";
 
 /** Per-node settings are `global`: they live on the node type's page, so the whole graph sees them. */
 export type SettingScope = "personal" | "global";
@@ -58,6 +60,16 @@ const SettingItemRow = ({
 }: SettingItemRowProps): React.ReactElement => {
   const controlId = useId();
   const isAssociated = typeof control === "function";
+  // Falls back to the catalog so the row and search read one description.
+  const authored =
+    description === undefined ? describedSetting(settingKeys) : undefined;
+  const resolvedDescription =
+    description ??
+    (authored
+      ? authored.docsLink
+        ? withDocsLink(authored.description, authored.docsLink)
+        : authored.description
+      : undefined);
   // Description is a sibling of the label: nested, its doc links would toggle the control (ENG-2080).
   const LabelTag = isAssociated ? "label" : "div";
 
@@ -80,8 +92,10 @@ const SettingItemRow = ({
           {scope && !compact ? <SettingScopeIndicator scope={scope} /> : null}
           <span>{label}</span>
         </LabelTag>
-        {description ? (
-          <div className="text-sm font-normal text-gray-500">{description}</div>
+        {resolvedDescription ? (
+          <div className="text-sm font-normal text-gray-500">
+            {resolvedDescription}
+          </div>
         ) : null}
         {error ? (
           <div className="text-sm font-medium text-red-600">{error}</div>