ENG-2183 Build the new setting-item row component

apps/roam/src/components/DiscourseNodeMenu.tsx

@@ -4,11 +4,11 @@ import {
   Popover,
   Position,
   Button,
-  InputGroup,
   getKeyCombo,
   IKeyCombo,
   Icon,
 } from "@blueprintjs/core";
+import SettingKeycapInput from "~/components/settings/components/SettingKeycapInput";
 import React, {
   useCallback,
   useEffect,
@@ -496,7 +496,8 @@ export const NodeMenuTriggerComponent = ({
   const shortcut = useMemo(() => comboToString(comboKey), [comboKey]);
 
   return (
-    <InputGroup
+    <SettingKeycapInput
+      wide
       inputRef={inputRef}
       placeholder={
         isActive ? "Press keys" : (placeholder ?? "Click to set trigger")

apps/roam/src/components/DiscourseNodeSearchMenu.tsx

@@ -11,9 +11,9 @@ import {
   Popover,
   Position,
   Button,
-  InputGroup,
   Intent,
 } from "@blueprintjs/core";
+import SettingKeycapInput from "~/components/settings/components/SettingKeycapInput";
 import ReactDOM from "react-dom";
 import getUids from "roamjs-components/dom/getUids";
 import getTextByBlockUid from "roamjs-components/queries/getTextByBlockUid";
@@ -712,7 +712,7 @@ export const NodeSearchMenuTriggerSetting = ({
     setPersonalSetting([PERSONAL_KEYS.nodeSearchMenuTrigger], trigger);
   };
   return (
-    <InputGroup
+    <SettingKeycapInput
       value={nodeSearchTrigger}
       onChange={handleNodeSearchTriggerChange}
       placeholder="Click to set trigger"

apps/roam/src/components/ExportOptions.tsx

@@ -40,6 +40,7 @@ const ExportOptions = ({
           order={1}
           uid={exportSettings.removeSpecialCharacters.uid}
           parentUid={parentUid}
+          compact
         />
 
         <GlobalFlagPanel
@@ -53,6 +54,7 @@ const ExportOptions = ({
           order={3}
           uid={exportSettings.optsRefs.uid}
           parentUid={parentUid}
+          compact
         />
         <GlobalFlagPanel
           title="resolve block embeds"
@@ -65,6 +67,7 @@ const ExportOptions = ({
           order={4}
           uid={exportSettings.optsEmbeds.uid}
           parentUid={parentUid}
+          compact
         />
 
         <GlobalFlagPanel
@@ -78,6 +81,7 @@ const ExportOptions = ({
           order={6}
           uid={exportSettings.appendRefNodeContext.uid}
           parentUid={parentUid}
+          compact
         />
       </div>
       <div className="link-type-select-wrapper">
@@ -93,6 +97,7 @@ const ExportOptions = ({
           options={["alias", "wikilinks", "roam url"]}
           uid={exportSettings.linkType.uid}
           parentUid={parentUid}
+          compact
         />
       </div>
       <GlobalNumberPanel
@@ -106,6 +111,7 @@ const ExportOptions = ({
         order={0}
         uid={exportSettings.maxFilenameLength.uid}
         parentUid={parentUid}
+        compact
       />
       <GlobalMultiTextPanel
         title="frontmatter"
@@ -118,6 +124,7 @@ const ExportOptions = ({
         order={2}
         uid={exportSettings.frontmatter.uid}
         parentUid={parentUid}
+        compact
       />
     </div>
   );

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

@@ -1,14 +1,8 @@
 import React, { useState, useCallback, useMemo, useRef } from "react";
 import { OnloadArgs } from "roamjs-components/types";
-import {
-  InputGroup,
-  Button,
-  getKeyCombo,
-  IKeyCombo,
-  Label,
-} from "@blueprintjs/core";
-import Description from "~/components/settings/SettingsDescription";
-import { settingAnchor } from "~/components/settings/utils/settingAnchor";
+import { Button, getKeyCombo, IKeyCombo } from "@blueprintjs/core";
+import SettingKeycapInput from "~/components/settings/components/SettingKeycapInput";
+import SettingItemRow from "~/components/settings/components/SettingItemRow";
 import { DISCOURSE_TOOL_SHORTCUT_KEY } from "~/data/userSettings";
 import { setPersonalSetting } from "~/components/settings/utils/accessors";
 import { comboToString } from "~/components/DiscourseNodeMenu";
@@ -93,26 +87,32 @@ const KeyboardShortcutInput = ({
   }, [extensionAPI, settingKey, blockPropKey]);
 
   return (
-    <Label {...settingAnchor([blockPropKey])}>
-      {label}
-      <Description description={description} />
-      <InputGroup
-        inputRef={inputRef}
-        placeholder={isActive ? "Press keys" : placeholder}
-        value={shortcut}
-        onKeyDown={handleKeyDown}
-        onFocus={() => setIsActive(true)}
-        onBlur={() => setIsActive(false)}
-        rightElement={
-          <Button
-            hidden={!comboKey.key}
-            icon="remove"
-            onClick={handleClear}
-            minimal
-          />
-        }
-      />
-    </Label>
+    <SettingItemRow
+      label={label}
+      description={description}
+      scope="personal"
+      settingKeys={[blockPropKey]}
+      control={(controlId) => (
+        <SettingKeycapInput
+          wide
+          id={controlId}
+          inputRef={inputRef}
+          placeholder={isActive ? "Press keys" : placeholder}
+          value={shortcut}
+          onKeyDown={handleKeyDown}
+          onFocus={() => setIsActive(true)}
+          onBlur={() => setIsActive(false)}
+          rightElement={
+            <Button
+              hidden={!comboKey.key}
+              icon="remove"
+              onClick={handleClear}
+              minimal
+            />
+          }
+        />
+      )}
+    />
   );
 };
 

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

@@ -1,14 +1,7 @@
 import React, { useState, useCallback, useEffect, useRef } from "react";
 import getDiscourseNodes, { DiscourseNode } from "~/utils/getDiscourseNodes";
 import { getSubTree } from "roamjs-components/util";
-import Description from "~/components/settings/SettingsDescription";
-import {
-  Label,
-  InputGroup,
-  ControlGroup,
-  Tooltip,
-  Icon,
-} from "@blueprintjs/core";
+import { InputGroup, ControlGroup, Tooltip, Icon } from "@blueprintjs/core";
 import DiscourseNodeSpecification from "./DiscourseNodeSpecification";
 import DiscourseNodeAttributes from "./DiscourseNodeAttributes";
 import DiscourseNodeCanvasSettings, {
@@ -34,7 +27,8 @@ import {
 } from "./components/BlockPropSettingPanels";
 import { ROAM_DOCS, withDocsLink } from "./utils/docs";
 import { SettingsGroup } from "./components/SettingsHeadings";
-import SettingsDrillDownRow from "./components/SettingsDrillDownRow";
+import SettingItemRow from "./components/SettingItemRow";
+import SettingDrillDownSummary from "./components/SettingDrillDownSummary";
 import { useSettingsNav } from "./navigation/SettingsNavContext";
 import { nodeConfigSegmentIds } from "./utils/settingsNavigation";
 
@@ -116,38 +110,41 @@ const DiscourseNodeColorSetting = ({
           </span>
         </div>
       )}
-      <Label>
-        Color
-        <Description description="Changes the color of tags and canvas nodes" />
-        <ControlGroup>
-          <InputGroup
-            style={{ width: 120 }}
-            type={"color"}
-            value={color}
-            onChange={(e) => {
-              const nextColor = e.target.value;
-              const colorValue = nextColor.replace("#", ""); // remove hash to not create roam link
-              setColor(nextColor);
-              persistColorAfterPause(colorValue);
-            }}
-          />
-          <Tooltip content={color ? "Unset" : "Color not set"}>
-            <Icon
-              className={"ml-2 align-middle opacity-80"}
-              icon={color ? "delete" : "info-sign"}
-              onClick={() => {
-                if (colorWriteTimeoutRef.current) {
-                  window.clearTimeout(colorWriteTimeoutRef.current);
-                  colorWriteTimeoutRef.current = null;
-                }
-                pendingColorRef.current = null;
-                setColor("");
-                persistColorValue("");
+      <SettingItemRow
+        label="Color"
+        description="Changes the color of tags and canvas nodes"
+        scope="global"
+        control={
+          <ControlGroup>
+            <InputGroup
+              style={{ width: 120 }}
+              type={"color"}
+              value={color}
+              onChange={(e) => {
+                const nextColor = e.target.value;
+                const colorValue = nextColor.replace("#", ""); // remove hash to not create roam link
+                setColor(nextColor);
+                persistColorAfterPause(colorValue);
               }}
             />
-          </Tooltip>
-        </ControlGroup>
-      </Label>
+            <Tooltip content={color ? "Unset" : "Color not set"}>
+              <Icon
+                className={"ml-2 align-middle opacity-80"}
+                icon={color ? "delete" : "info-sign"}
+                onClick={() => {
+                  if (colorWriteTimeoutRef.current) {
+                    window.clearTimeout(colorWriteTimeoutRef.current);
+                    colorWriteTimeoutRef.current = null;
+                  }
+                  pendingColorRef.current = null;
+                  setColor("");
+                  persistColorValue("");
+                }}
+              />
+            </Tooltip>
+          </ControlGroup>
+        }
+      />
     </>
   );
 };
@@ -293,11 +290,16 @@ const NodeConfig = ({ node }: { node: DiscourseNode }) => {
   return (
     <div className="dg-settings-node-page">
       <SettingsGroup title="Identity">
-        <SettingsDrillDownRow
-          title="Index"
+        <SettingItemRow
+          label="Index"
           description={`The saved list of all ${node.text} pages \u2014 which pages appear and which columns show.`}
-          buttonText={`See all ${node.text} nodes`}
-          onClick={() => nav.push(nodeConfigSegmentIds.index)}
+          scope="global"
+          control={
+            <SettingDrillDownSummary
+              summary={`See all ${node.text} nodes`}
+              onClick={() => nav.push(nodeConfigSegmentIds.index)}
+            />
+          }
         />
         <DiscourseNodeTextPanel
           nodeType={node.type}
@@ -368,14 +370,19 @@ const NodeConfig = ({ node }: { node: DiscourseNode }) => {
           parentUid={node.type}
           uid={shortcutUid}
         />
-        <SettingsDrillDownRow
-          title="Template"
+        <SettingItemRow
+          label="Template"
           description={withDocsLink(
             `The template that auto fills ${node.text} page when generated.`,
             ROAM_DOCS.creatingNodes,
           )}
-          buttonText="Edit template"
-          onClick={() => nav.push(nodeConfigSegmentIds.template)}
+          scope="global"
+          control={
+            <SettingDrillDownSummary
+              summary="Edit template"
+              onClick={() => nav.push(nodeConfigSegmentIds.template)}
+            />
+          }
         />
       </SettingsGroup>
 
@@ -394,26 +401,28 @@ const NodeConfig = ({ node }: { node: DiscourseNode }) => {
       </SettingsGroup>
 
       <SettingsGroup title="Legacy">
-        <Label>
-          Specification
-          <Description
-            description={withDocsLink(
-              `The conditions specified to identify a ${node.text} node.`,
-              ROAM_DOCS.grammarNodes,
-            )}
-          />
-          <DiscourseNodeSpecification
-            node={node}
-            parentUid={specificationUid}
-            parentSetEnabled={(isSpecificationEnabled) => {
-              validate({
-                tag: tagValue,
-                format: formatValue,
-                isSpecificationEnabled,
-              });
-            }}
-          />
-        </Label>
+        <SettingItemRow
+          label="Specification"
+          description={withDocsLink(
+            `The conditions specified to identify a ${node.text} node.`,
+            ROAM_DOCS.grammarNodes,
+          )}
+          scope="global"
+          controlPlacement="below"
+          control={
+            <DiscourseNodeSpecification
+              node={node}
+              parentUid={specificationUid}
+              parentSetEnabled={(isSpecificationEnabled) => {
+                validate({
+                  tag: tagValue,
+                  format: formatValue,
+                  isSpecificationEnabled,
+                });
+              }}
+            />
+          }
+        />
       </SettingsGroup>
 
       {isSyncEnabled() && (