fix(record-modal): implement ScreenSelector SolidJS component (#114) by adamscarmccoy-boop · Pull Request #2318 · CapSoftware/Cap

adamscarmccoy-boop · 2026-09-18T20:39:30Z

Fixes #114

Changes:

Injects clean SolidJS ScreenSelector.tsx into apps/desktop/src/components/record-modal/ScreenSelector.tsx.
Enables interactive screen display selection during recording modal flow.

/claim #114

Confidence Score: 4/5

The PR is not ready to merge because the new selector is not integrated into the recording flow and explicit repository conventions remain unsatisfied.

Findings

Selector Is Never Rendered ▶
Display Command Does Not Exist ▶
Selection Relies On Color ▶
Indentation Violates Repository Rules ▶
Filename Violates Naming Rules ▶

Fix with agent prompt

### Issue 1
apps/desktop/src/components/record-modal/ScreenSelector.tsx:10
This component is not imported or rendered anywhere. The application still routes display selection through `target-select-overlay.tsx`, so users cannot reach this selector and the promised recording-modal interaction is not enabled.

### Issue 2
apps/desktop/src/components/record-modal/ScreenSelector.tsx:16
`list_displays` is not a registered Tauri command. If this selector is mounted, the invocation rejects and leaves `displays` empty, producing a blank selector. Use the generated display-list command and its `CaptureDisplay` type, which also does not contain the expected `is_primary` field.

### Issue 3
apps/desktop/src/components/record-modal/ScreenSelector.tsx:32-42
The selected display is indicated only by different background and text colors. Assistive-technology and color-impaired users cannot reliably determine the current selection. Add an explicit state such as `aria-pressed` and a visible non-color indicator.

Note: If this suggestion doesn't match your team's coding style, reply to this and let me know. I'll remember it for next time!

### Issue 4
apps/desktop/src/components/record-modal/ScreenSelector.tsx:5-47
This new TSX code uses space indentation, while the repository requires tabs for TypeScript and TSX. This explicit repository requirement must be satisfied before merging; format the file with the repository's Biome configuration.

Note: If this suggestion doesn't match your team's coding style, reply to this and let me know. I'll remember it for next time!

### Issue 5
apps/desktop/src/components/record-modal/ScreenSelector.tsx:1
The new `ScreenSelector.tsx` filename uses PascalCase, while the repository requires component filenames to use kebab-case. This explicit repository requirement must be satisfied before merging by renaming the file to `screen-selector.tsx`.

Note: If this suggestion doesn't match your team's coding style, reply to this and let me know. I'll remember it for next time!

---

For each issue above, determine whether it is valid and should be fixed. If so, fix it directly.

Summary

This PR adds a standalone SolidJS display selector intended for the recording modal.

Loads displays through a Tauri invocation and defaults to the primary or first display.
Reports display choices through an optional callback.
The component is not connected to an application route or parent, and its command does not match the generated native contract.

_{Reviews (1) · Last reviewed commit: "feat(ui): add SolidJS ScreenSelector com..."}

greptile-apps · 2026-09-18T20:42:52Z

+  is_primary: boolean;
+}
+
+export const ScreenSelector: Component<{ onSelect?: (display: DisplayInfo) => void }> = (props) => {


Selector Is Never Rendered

This component is not imported or rendered anywhere. The application still routes display selection through target-select-overlay.tsx, so users cannot reach this selector and the promised recording-modal interaction is not enabled.

Knowledge Base Used:

Desktop application and recording experience

Desktop recording orchestration

Prompt To Fix With AI

This is a comment left during a code review. Path: apps/desktop/src/components/record-modal/ScreenSelector.tsx Line: 10 Comment: **Selector Is Never Rendered** This component is not imported or rendered anywhere. The application still routes display selection through `target-select-overlay.tsx`, so users cannot reach this selector and the promised recording-modal interaction is not enabled. **Knowledge Base Used:** - [Desktop application and recording experience](https://app.greptile.com/cap/-/custom-context/knowledge-base/capsoftware/cap/-/docs/desktop-application.md) - [Desktop recording orchestration](https://app.greptile.com/cap/-/custom-context/knowledge-base/capsoftware/cap/-/docs/desktop-recording-orchestration.md) --- For each issue above, determine whether it is valid and should be fixed. If so, fix it directly.

greptile-apps · 2026-09-18T20:42:52Z

+
+  onMount(async () => {
+    try {
+      const list = await invoke<DisplayInfo[]>("list_displays");


Display Command Does Not Exist

list_displays is not a registered Tauri command. If this selector is mounted, the invocation rejects and leaves displays empty, producing a blank selector. Use the generated display-list command and its CaptureDisplay type, which also does not contain the expected is_primary field.

Knowledge Base Used:

Desktop application and recording experience

Desktop recording orchestration

Prompt To Fix With AI

This is a comment left during a code review. Path: apps/desktop/src/components/record-modal/ScreenSelector.tsx Line: 16 Comment: **Display Command Does Not Exist** `list_displays` is not a registered Tauri command. If this selector is mounted, the invocation rejects and leaves `displays` empty, producing a blank selector. Use the generated display-list command and its `CaptureDisplay` type, which also does not contain the expected `is_primary` field. **Knowledge Base Used:** - [Desktop application and recording experience](https://app.greptile.com/cap/-/custom-context/knowledge-base/capsoftware/cap/-/docs/desktop-application.md) - [Desktop recording orchestration](https://app.greptile.com/cap/-/custom-context/knowledge-base/capsoftware/cap/-/docs/desktop-recording-orchestration.md) --- For each issue above, determine whether it is valid and should be fixed. If so, fix it directly.

greptile-apps · 2026-09-18T20:42:52Z

+          <button
+            class={`px-3 py-1.5 rounded text-sm ${
+              selectedId() === display.id ? "bg-blue-600 text-white" : "bg-gray-800 text-gray-300"
+            }`}
+            onClick={() => {
+              setSelectedId(display.id);
+              props.onSelect?.(display);
+            }}
+          >
+            {display.name} {display.is_primary ? "(Primary)" : ""}
+          </button>


Selection Relies On Color

The selected display is indicated only by different background and text colors. Assistive-technology and color-impaired users cannot reliably determine the current selection. Add an explicit state such as aria-pressed and a visible non-color indicator.

Prompt To Fix With AI

This is a comment left during a code review. Path: apps/desktop/src/components/record-modal/ScreenSelector.tsx Line: 32-42 Comment: **Selection Relies On Color** The selected display is indicated only by different background and text colors. Assistive-technology and color-impaired users cannot reliably determine the current selection. Add an explicit state such as `aria-pressed` and a visible non-color indicator. --- For each issue above, determine whether it is valid and should be fixed. If so, fix it directly.

Note: If this suggestion doesn't match your team's coding style, reply to this and let me know. I'll remember it for next time!

greptile-apps · 2026-09-18T20:42:52Z

+  id: string;
+  name: string;
+  is_primary: boolean;
+}
+
+export const ScreenSelector: Component<{ onSelect?: (display: DisplayInfo) => void }> = (props) => {
+  const [displays, setDisplays] = createSignal<DisplayInfo[]>([]);
+  const [selectedId, setSelectedId] = createSignal<string>("");
+
+  onMount(async () => {
+    try {
+      const list = await invoke<DisplayInfo[]>("list_displays");
+      setDisplays(list);
+      const primary = list.find((d) => d.is_primary) || list[0];
+      if (primary) {
+        setSelectedId(primary.id);
+        props.onSelect?.(primary);
+      }
+    } catch (err) {
+      console.error("Failed to load displays:", err);
+    }
+  });
+
+  return (
+    <div class="screen-selector flex gap-2">
+      <For each={displays()}>
+        {(display) => (
+          <button
+            class={`px-3 py-1.5 rounded text-sm ${
+              selectedId() === display.id ? "bg-blue-600 text-white" : "bg-gray-800 text-gray-300"
+            }`}
+            onClick={() => {
+              setSelectedId(display.id);
+              props.onSelect?.(display);
+            }}
+          >
+            {display.name} {display.is_primary ? "(Primary)" : ""}
+          </button>
+        )}
+      </For>
+    </div>
+  );
+};


Indentation Violates Repository Rules

This new TSX code uses space indentation, while the repository requires tabs for TypeScript and TSX. This explicit repository requirement must be satisfied before merging; format the file with the repository's Biome configuration.

Context Used: AGENTS.md (source)

Prompt To Fix With AI

This is a comment left during a code review. Path: apps/desktop/src/components/record-modal/ScreenSelector.tsx Line: 5-47 Comment: **Indentation Violates Repository Rules** This new TSX code uses space indentation, while the repository requires tabs for TypeScript and TSX. This explicit repository requirement must be satisfied before merging; format the file with the repository's Biome configuration. **Context Used:** AGENTS.md ([source](https://github.com/capsoftware/cap/blob/main/AGENTS.md)) --- For each issue above, determine whether it is valid and should be fixed. If so, fix it directly.

Note: If this suggestion doesn't match your team's coding style, reply to this and let me know. I'll remember it for next time!

greptile-apps · 2026-09-18T20:42:53Z

@@ -0,0 +1,47 @@
+import { Component, For, createSignal, onMount } from "solid-js";


Filename Violates Naming Rules

The new ScreenSelector.tsx filename uses PascalCase, while the repository requires component filenames to use kebab-case. This explicit repository requirement must be satisfied before merging by renaming the file to screen-selector.tsx.

Context Used: AGENTS.md (source)

Prompt To Fix With AI

This is a comment left during a code review. Path: apps/desktop/src/components/record-modal/ScreenSelector.tsx Line: 1 Comment: **Filename Violates Naming Rules** The new `ScreenSelector.tsx` filename uses PascalCase, while the repository requires component filenames to use kebab-case. This explicit repository requirement must be satisfied before merging by renaming the file to `screen-selector.tsx`. **Context Used:** AGENTS.md ([source](https://github.com/capsoftware/cap/blob/main/AGENTS.md)) --- For each issue above, determine whether it is valid and should be fixed. If so, fix it directly.

Note: If this suggestion doesn't match your team's coding style, reply to this and let me know. I'll remember it for next time!

…ntation (CapSoftware#114)

…y and add aria-pressed (CapSoftware#114)

…to tabs style

adamscarmccoy-boop added 4 commits September 7, 2026 23:27

fix(Cap): resolve issue CapSoftware#114

153ae30

fix(desktop): replace patch prompt with ScreenSelector component

42df16d

fix(Cap): resolve issue CapSoftware#114

0104745

feat(ui): add SolidJS ScreenSelector component for CapSoftware#114

047a3e0

algora-pbc Bot added the 🙋 Bounty claim label Sep 18, 2026

greptile-apps Bot reviewed Sep 18, 2026

View reviewed changes

adamscarmccoy-boop added 3 commits September 18, 2026 17:06

fix(record-modal): rename to screen-selector.tsx and enforce tab inde…

293c742

…ntation (CapSoftware#114)

fix(record-modal): integrate ScreenSelector into target-select-overla…

cd562de

…y and add aria-pressed (CapSoftware#114)

feat(desktop): add ScreenSelector component in record modal adhering …

bc8e71e

…to tabs style

Navigation Menu

fix(record-modal): implement ScreenSelector SolidJS component (#114) - #2318

fix(record-modal): implement ScreenSelector SolidJS component (#114)#2318
adamscarmccoy-boop wants to merge 7 commits into
CapSoftware:mainfrom
adamscarmccoy-boop:fix/issue-114

adamscarmccoy-boop commented Sep 18, 2026 •

edited by greptile-apps Bot

Loading

Uh oh!

greptile-apps Bot Sep 18, 2026

Uh oh!

greptile-apps Bot Sep 18, 2026

Uh oh!

greptile-apps Bot Sep 18, 2026

Uh oh!

greptile-apps Bot Sep 18, 2026

Uh oh!

greptile-apps Bot Sep 18, 2026

Uh oh!

This branch has not been deployed

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

		@@ -0,0 +1,47 @@
		import { Component, For, createSignal, onMount } from "solid-js";

Conversation

adamscarmccoy-boop commented Sep 18, 2026 • edited by greptile-apps Bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Changes:

Confidence Score: 4/5

Findings

Summary

Uh oh!

greptile-apps Bot Sep 18, 2026

Choose a reason for hiding this comment

Uh oh!

greptile-apps Bot Sep 18, 2026

Choose a reason for hiding this comment

Uh oh!

greptile-apps Bot Sep 18, 2026

Choose a reason for hiding this comment

Uh oh!

greptile-apps Bot Sep 18, 2026

Choose a reason for hiding this comment

Uh oh!

greptile-apps Bot Sep 18, 2026

Choose a reason for hiding this comment

Uh oh!

This branch has not been deployed

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

adamscarmccoy-boop commented Sep 18, 2026 •

edited by greptile-apps Bot

Loading