ENG-1273: Migrate small personal settings (#691)

* fix

* port more simple components, revert git ignore

* restack

* Sentence case

* revert sentence case for readers that use old style

* prettier

* prettier, change default to initial

Author: sid597

.gitignore

@@ -37,4 +37,4 @@ yarn-error.log*
 
 # Local development files
 local/*
-.cursor/debug.log
+.cursor/debug.log

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

@@ -381,7 +381,7 @@ const FeatureFlagsTab = (): React.ReactElement => {
         }}
         labelElement={
           <>
-            (BETA) Suggestive Mode Enabled
+            (BETA) Suggestive mode enabled
             <Description
               description={
                 "Whether or not to enable the suggestive mode, if this is first time enabling it, you will need to generate and upload all node embeddings to supabase. Go to Suggestive Mode -> Sync Config -> Click on 'Generate & Upload All Node Embeddings'"
@@ -453,7 +453,7 @@ const FeatureFlagsTab = (): React.ReactElement => {
         }}
         labelElement={
           <>
-            Reified Relation Triples
+            Reified relation triples
             <Description
               description={
                 "When ON, relations are read/written as reifiedRelationUid in [[roam/js/discourse-graph/relations]]."
@@ -525,7 +525,7 @@ const AdminPanel = (): React.ReactElement => {
       {settings.suggestiveModeEnabled.value && (
         <Tab
           id="suggestive-mode-settings"
-          title="Suggestive Mode"
+          title="Suggestive mode"
           className="overflow-y-auto"
           panel={<SuggestiveModeSettings />}
         />

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

@@ -85,7 +85,7 @@ const NodeAttributes = ({ uid }: { uid: string }) => {
         ))}
       </div>
       <div>
-        <Label style={{ marginBottom: 8 }}>Attribute Label</Label>
+        <Label style={{ marginBottom: 8 }}>Attribute label</Label>
         <div style={{ display: "flex", alignItems: "center" }}>
           <InputGroup
             value={newAttribute}

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

@@ -46,7 +46,7 @@ const DiscourseNodeCanvasSettings = ({ uid }: { uid: string }) => {
   return (
     <div>
       <div className="mb-4">
-        <Label style={{ marginBottom: "4px" }}>Color Picker</Label>
+        <Label style={{ marginBottom: "4px" }}>Color picker</Label>
         <ControlGroup>
           <InputGroup
             style={{ width: 120 }}
@@ -78,7 +78,7 @@ const DiscourseNodeCanvasSettings = ({ uid }: { uid: string }) => {
         </ControlGroup>
       </div>
       <Label style={{ width: 240 }}>
-        Display Alias
+        Display alias
         <InputGroup
           value={alias}
           onChange={(e) => {
@@ -113,7 +113,7 @@ const DiscourseNodeCanvasSettings = ({ uid }: { uid: string }) => {
           }
         }}
       >
-        Key Image
+        Key image
         <Tooltip content={"Add an image to the discourse node"}>
           <Icon
             icon={"info-sign"}
@@ -126,7 +126,7 @@ const DiscourseNodeCanvasSettings = ({ uid }: { uid: string }) => {
       <RadioGroup
         disabled={!isKeyImage}
         selectedValue={!!keyImageOption ? keyImageOption : "first-image"}
-        label="Key Image Location"
+        label="Key image location"
         onChange={(e) => {
           const target = e.target as HTMLInputElement;
           setKeyImageOption(target.value);
@@ -139,8 +139,8 @@ const DiscourseNodeCanvasSettings = ({ uid }: { uid: string }) => {
       >
         <Radio label="First image on page" value="first-image" />
         <Radio value="query-builder">
-          Query Builder reference
-          <Tooltip content={"Use a Query Builder alias or block reference"}>
+          Query builder reference
+          <Tooltip content={"Use a query builder alias or block reference"}>
             <Icon
               icon={"info-sign"}
               iconSize={12}

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

@@ -66,7 +66,7 @@ const DiscourseNodeConfigPanel: React.FC<DiscourseNodeConfigPanelProps> = ({
           className={"roamjs-discourse-config-label"}
         />
         <Button
-          text={"Add Node"}
+          text={"Add node"}
           intent={Intent.PRIMARY}
           icon={"plus"}
           className="select-none"
@@ -167,10 +167,10 @@ const DiscourseNodeConfigPanel: React.FC<DiscourseNodeConfigPanelProps> = ({
                       (r) => r.source === n.type || r.destination === n.type,
                     );
 
-                    let dialogMessage = `Are you sure you want to delete the Node Type "${n.text}"?`;
+                    let dialogMessage = `Are you sure you want to delete the node type "${n.text}"?`;
 
                     if (affectedRelations.length > 0) {
-                      dialogMessage = `The Node Type "${n.text}" is used by the following relations, which will also be deleted:\n\n${affectedRelations
+                      dialogMessage = `The node type "${n.text}" is used by the following relations, which will also be deleted:\n\n${affectedRelations
                         .map((r) => {
                           const sourceNodeDetails = nodes.find(
                             (s) => s.type === r.source,

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

@@ -137,7 +137,7 @@ const DiscourseNodeSuggestiveRules = ({
       />
 
       <Button
-        text="Update Embeddings"
+        text="Update embeddings"
         intent={Intent.NONE}
         onClick={() => void handleUpdateEmbeddings()}
         loading={isUpdating}

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

@@ -877,7 +877,7 @@ export const RelationEditPanel = ({
                 />
               </Tooltip>
               {!!getSetting("discourse-relation-copy") && (
-                <Tooltip content={"Paste Relation"}>
+                <Tooltip content={"Paste relation"}>
                   <Button
                     minimal
                     icon={"clipboard"}
@@ -910,7 +910,7 @@ export const RelationEditPanel = ({
                   />
                 </Tooltip>
               )}
-              <Tooltip content={"Copy Relation"}>
+              <Tooltip content={"Copy relation"}>
                 <Button
                   minimal
                   icon={"duplicate"}
@@ -923,7 +923,7 @@ export const RelationEditPanel = ({
                     ).catch(() => undefined);
                     renderToast({
                       id: "relation-copy",
-                      content: "Copied Relation",
+                      content: "Copied relation",
                       intent: Intent.PRIMARY,
                     });
                   }}
@@ -1099,7 +1099,7 @@ const DiscourseRelationConfigPanel: CustomField["options"]["component"] = ({
         className="mb-4 select-none"
         onClick={onNewRelation}
         icon={"plus"}
-        text={"Add Relation"}
+        text={"Add relation"}
         intent={Intent.PRIMARY}
       />
 

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

@@ -13,11 +13,13 @@ const DiscourseGraphExport = () => {
   const parentUid = settings.export.exportUid;
   return (
     <div className="flex flex-col gap-4 p-1">
+      {/* TODO: Titles kept as lowercase to match legacy readers in getExportSettings.ts.
+          Update titles to Sentence case once read side is migrated to block props. */}
       <div>
         <GlobalFlagPanel
           title="remove special characters"
           description="Whether or not to remove the special characters in a file name"
-          settingKeys={["Export", "Remove Special Characters"]}
+          settingKeys={["Export", "Remove special characters"]}
           initialValue={exportSettings.removeSpecialCharacters.value}
           order={1}
           uid={exportSettings.removeSpecialCharacters.uid}
@@ -27,7 +29,7 @@ const DiscourseGraphExport = () => {
         <GlobalFlagPanel
           title="resolve block references"
           description="Replaces block references in the markdown content with the block's content"
-          settingKeys={["Export", "Resolve Block References"]}
+          settingKeys={["Export", "Resolve block references"]}
           initialValue={exportSettings.optsRefs.value}
           order={3}
           uid={exportSettings.optsRefs.uid}
@@ -36,7 +38,7 @@ const DiscourseGraphExport = () => {
         <GlobalFlagPanel
           title="resolve block embeds"
           description="Replaces block embeds in the markdown content with the block's content tree"
-          settingKeys={["Export", "Resolve Block Embeds"]}
+          settingKeys={["Export", "Resolve block embeds"]}
           initialValue={exportSettings.optsEmbeds.value}
           order={4}
           uid={exportSettings.optsEmbeds.uid}
@@ -46,7 +48,7 @@ const DiscourseGraphExport = () => {
         <GlobalFlagPanel
           title="append referenced node"
           description="If a referenced node is defined in a node's format, it will be appended to the discourse context"
-          settingKeys={["Export", "Append Referenced Node"]}
+          settingKeys={["Export", "Append referenced node"]}
           initialValue={exportSettings.appendRefNodeContext.value}
           order={6}
           uid={exportSettings.appendRefNodeContext.uid}
@@ -57,7 +59,7 @@ const DiscourseGraphExport = () => {
         <GlobalSelectPanel
           title="link type"
           description="How to format links that appear in your export."
-          settingKeys={["Export", "Link Type"]}
+          settingKeys={["Export", "Link type"]}
           initialValue={exportSettings.linkType.value || "alias"}
           order={5}
           options={["alias", "wikilinks", "roam url"]}
@@ -68,7 +70,7 @@ const DiscourseGraphExport = () => {
       <GlobalNumberPanel
         title="max filename length"
         description="Set the maximum name length for markdown file exports"
-        settingKeys={["Export", "Max Filename Length"]}
+        settingKeys={["Export", "Max filename length"]}
         initialValue={exportSettings.maxFilenameLength.value || 64}
         order={0}
         uid={exportSettings.maxFilenameLength.uid}

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

@@ -17,6 +17,8 @@ const DiscourseGraphHome = () => {
   const [isAlertOpen, setIsAlertOpen] = useState(false);
   return (
     <div className="flex flex-col gap-4 p-1">
+      {/* TODO: Titles kept as legacy casing to match readers in discourseConfigRef.ts and initializeObserversAndListeners.ts.
+          Update titles to Sentence case once read side is migrated to block props. */}
       <GlobalTextPanel
         title="trigger"
         description="The trigger to create the node menu."
@@ -29,7 +31,7 @@ const DiscourseGraphHome = () => {
       <GlobalTextPanel
         title="Canvas Page Format"
         description="The page format for canvas pages"
-        settingKeys={["Canvas Page Format"]}
+        settingKeys={["Canvas page format"]}
         initialValue={
           settings.canvasPageFormat.value || DEFAULT_CANVAS_PAGE_FORMAT
         }
@@ -40,8 +42,8 @@ const DiscourseGraphHome = () => {
       <FeatureFlagPanel
         title="(BETA) Left Sidebar"
         description="Whether or not to enable the left sidebar."
-        featureKey="Enable Left Sidebar"
         initialValue={settings.leftSidebarEnabled.value}
+        featureKey="Enable left sidebar"
         order={2}
         uid={settings.leftSidebarEnabled.uid}
         parentUid={settings.settingsUid}