[ENG-869] Key figure

[trangdoan982]

https://www.loom.com/share/dad6f94dbbf54d9693562f53a4dffe38

Summary by CodeRabbit

• New Features
  • Added boolean field support in settings, including a “Key image” option for node types.
  • Discourse nodes can automatically display a key image (first image in the note) when enabled.
  • Nodes now auto-resize to fit title, subtitle, and image for improved readability.
  • Selecting an existing note preloads the key image when available for faster, smoother rendering.

[linear]

ENG-869 Key figure

[supabase]

This pull request has been ignored for the connected project zytfjzqyijgagqxrzbmz because there are no changes detected in packages/database/supabase directory. You can change this behaviour in Project Integrations Settings ↗︎.

---

Preview Branches by Supabase.
Learn more about Supabase Branching ↗︎.

[trangdoan982]

• [ENG-869] Key figure #490 👈 (View in Graphite)
• main

This stack of pull requests is managed by Graphite. Learn more about stacking.

[trangdoan982]

@coderabbitai review

[coderabbitai]

✅ Actions performed

Review triggered.

Note: CodeRabbit is an incremental review system and does not re-review already reviewed commits. This command is applicable only when automatic reviews are paused.

[coderabbitai]

📝 Walkthrough

Walkthrough

Adds optional key-image support for discourse nodes: introduces a boolean node-type setting (keyImage), a helper to extract the first image from a note, preloads and passes imageSrc into DiscourseNodeShape, and adjusts rendering and sizing when an image is present. Extends field rendering to support boolean types.

Changes

Cohort / File(s)	Summary
NodeType settings (boolean + keyImage) apps/obsidian/src/components/NodeTypeSettings.tsx	Adds boolean field type to BaseFieldConfig and rendering (BooleanField). Introduces keyImage boolean config in FIELD_CONFIGS. Updates handlers and render paths to accept string
Existing node selection (image preload) apps/obsidian/src/components/canvas/ExistingNodeSearch.tsx	On select, reads node frontmatter, and if keyImage is enabled, preloads first image via getFirstImageSrcForFile. Computes an initial height when image is present. Adjusts dependencies.
Discourse node shape (image-aware) apps/obsidian/src/components/canvas/shapes/DiscourseNodeShape.tsx	Adds optional imageSrc prop and default. Loads/clears imageSrc based on nodeType.keyImage and file content. Renders an img element when present and recalculates height (padding/title/subtitle/image). Updates effect deps.
Shape utilities (image extraction) apps/obsidian/src/components/canvas/shapes/discourseNodeShapeUtils.ts	Exports getFirstImageSrcForFile(app, file): parses note content for first image (markdown or wiki-style), resolves internal/external sources, returns vault resource path or URL; returns null on none/error.
Types (node keyImage flag) apps/obsidian/src/types.ts	Extends DiscourseNode with optional keyImage?: boolean.

Sequence Diagram(s)

sequenceDiagram
  autonumber
  actor User
  participant Search as ExistingNodeSearch
  participant Utils as discourseNodeShapeUtils
  participant Shape as DiscourseNodeShape

  User->>Search: Select file
  Search->>Search: Read frontmatter → nodeType
  alt nodeType.keyImage enabled
    Search->>Utils: getFirstImageSrcForFile(app, file)
    Utils-->>Search: imageSrc or null
    Search->>Shape: Create node with props { imageSrc? }
  else
    Search->>Shape: Create node without imageSrc
  end

  Shape->>Shape: useEffect on nodeType/keyImage
  alt imageSrc available
    Shape->>Shape: Compute height (title/subtitle/image/padding)
    Shape->>Shape: Render with <img .../>
  else
    Shape->>Shape: Render without image
  end

Loading

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~60 minutes

Possibly related PRs

• [ENG-599] Discourse node shape #341 — Touches the same Discourse node shape and utilities, likely adjacent to adding imageSrc and keyImage-driven rendering.
• [ENG-524] Restructure the UI for Node Types setting #271 — Modifies NodeTypeSettings and FIELD_CONFIGS, overlapping with the added boolean type and keyImage field.
• [ENG-602] Add color setting #300 — Prior changes to NodeTypeSettings (e.g., adding color type) that this PR extends by introducing boolean and keyImage.

Pre-merge checks

❌ Failed checks (1 inconclusive)

Check name	Status	Explanation	Resolution
Title Check	❓ Inconclusive	The title consists solely of a ticket reference and the phrase “Key figure,” which is too vague to convey the primary changes of the pull request, such as adding boolean support for key images and rendering them in Discourse nodes.	Please provide a more descriptive title that summarizes the main change, for example “Add support for displaying key images in Discourse nodes.”

✅ Passed checks (2 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Docstring Coverage	✅ Passed	No functions found in the changes. Docstring coverage check skipped.

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 4

🧹 Nitpick comments (2)

apps/obsidian/src/components/NodeTypeSettings.tsx (1)

263-273: Type-aware validation: future-proof boolean fields

Good gating in handleNodeTypeChange. However, validateNodeType assumes strings and uses trim; a required boolean field would break.

Consider updating validateNodeType to branch on fieldConfig.type:

// Inside validateNodeType
Object.entries(FIELD_CONFIGS).forEach(([key, config]) => {
  const field = key as EditableFieldKey;
  const raw = nodeType[field];

  if (config.type === "boolean") {
    // For required booleans, ensure value is true or explicitly present
    if (config.required && raw !== true) {
      newErrors[field] = `${config.label} is required`;
      isValid = false;
    }
    return;
  }

  const value = (raw as string) ?? "";
  if (config.required && !value.trim()) {
    newErrors[field] = `${config.label} is required`;
    isValid = false;
    return;
  }
  if (config.validate && value) {
    const { isValid: fieldValid, error } = config.validate(value, nodeType, nodeTypes);
    if (!fieldValid) {
      newErrors[field] = error || `Invalid ${config.label.toLowerCase()}`;
      isValid = false;
    }
  }
});

apps/obsidian/src/components/canvas/shapes/DiscourseNodeShape.tsx (1)

221-230: Effect dependencies: consider narrowing for fewer re-renders

Depending on shape.props (object) causes the effect to run on any prop change. Consider narrowing to specific props: src, imageSrc, h, and nodeType?.keyImage.

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between e876042 and 33ea6a8.

📒 Files selected for processing (5)

• apps/obsidian/src/components/NodeTypeSettings.tsx (5 hunks)
• apps/obsidian/src/components/canvas/ExistingNodeSearch.tsx (3 hunks)
• apps/obsidian/src/components/canvas/shapes/DiscourseNodeShape.tsx (6 hunks)
• apps/obsidian/src/components/canvas/shapes/discourseNodeShapeUtils.ts (1 hunks)
• apps/obsidian/src/types.ts (1 hunks)

🔇 Additional comments (3)

apps/obsidian/src/types.ts (1)

11-11: Addition of keyImage flag looks good

Optional boolean is safe and aligns with downstream usage.

apps/obsidian/src/components/NodeTypeSettings.tsx (1)

90-103: BooleanField: OK

Checkbox implementation is fine and integrates cleanly with FieldWrapper.

apps/obsidian/src/components/canvas/shapes/DiscourseNodeShape.tsx (1)

49-50: Props/API additions look good

imageSrc prop and defaults are consistent with TL validators.

Also applies to: 59-60, 29-30

[mdroidian]

Good start 👍. A few issues and bugs

https://www.loom.com/share/0c00b3f51b2a4ed891ff5335406060c7

[mdroidian]

DRY (this is used elsewhere), make this into a function

[mdroidian]

nit: Any particular reason for the spread for a single value? Something like this would be much cleaner:
imageSrc: preloadedImageSrc ?? "",