Add custom screen picker dialog for Windows audio capture and update version to 0.5.10

src/components/app/CheatingDaddyApp.js

@@ -6,6 +6,7 @@ import { HelpView } from '../views/HelpView.js';
 import { HistoryView } from '../views/HistoryView.js';
 import { AssistantView } from '../views/AssistantView.js';
 import { OnboardingView } from '../views/OnboardingView.js';
+import { ScreenPickerDialog } from '../views/ScreenPickerDialog.js';
 
 export class CheatingDaddyApp extends LitElement {
     static styles = css`
@@ -112,6 +113,8 @@ export class CheatingDaddyApp extends LitElement {
         _storageLoaded: { state: true },
         aiProvider: { type: String },
         modelInfo: { type: Object },
+        showScreenPicker: { type: Boolean },
+        screenSources: { type: Array },
     };
 
     constructor() {
@@ -137,6 +140,8 @@ export class CheatingDaddyApp extends LitElement {
         this._storageLoaded = false;
         this.aiProvider = 'gemini';
         this.modelInfo = { model: '', visionModel: '', whisperModel: '' };
+        this.showScreenPicker = false;
+        this.screenSources = [];
 
         // Load from storage
         this._loadFromStorage();
@@ -549,6 +554,16 @@ export class CheatingDaddyApp extends LitElement {
                         <div class="view-container">${this.renderCurrentView()}</div>
                     </div>
                 </div>
+                ${this.showScreenPicker
+                    ? html`
+                          <screen-picker-dialog
+                              ?visible=${this.showScreenPicker}
+                              .sources=${this.screenSources}
+                              @source-selected=${this.handleSourceSelected}
+                              @cancelled=${this.handlePickerCancelled}
+                          ></screen-picker-dialog>
+                      `
+                    : ''}
             </div>
         `;
     }
@@ -579,6 +594,44 @@ export class CheatingDaddyApp extends LitElement {
 
         this.requestUpdate();
     }
+
+    async showScreenPickerDialog() {
+        const { ipcRenderer } = window.require('electron');
+        const result = await ipcRenderer.invoke('get-screen-sources');
+        
+        if (result.success) {
+            this.screenSources = result.sources;
+            this.showScreenPicker = true;
+            return new Promise((resolve) => {
+                this._screenPickerResolve = resolve;
+            });
+        } else {
+            console.error('Failed to get screen sources:', result.error);
+            return { cancelled: true };
+        }
+    }
+
+    async handleSourceSelected(event) {
+        const { source } = event.detail;
+        const { ipcRenderer } = window.require('electron');
+        
+        // Tell main process which source was selected
+        await ipcRenderer.invoke('set-selected-source', source.id);
+        
+        this.showScreenPicker = false;
+        if (this._screenPickerResolve) {
+            this._screenPickerResolve({ source });
+            this._screenPickerResolve = null;
+        }
+    }
+
+    handlePickerCancelled() {
+        this.showScreenPicker = false;
+        if (this._screenPickerResolve) {
+            this._screenPickerResolve({ cancelled: true });
+            this._screenPickerResolve = null;
+        }
+    }
 }
 
 customElements.define('cheating-daddy-app', CheatingDaddyApp);

src/components/views/ScreenPickerDialog.js

@@ -0,0 +1,175 @@
+import { html, css, LitElement } from '../../assets/lit-core-2.7.4.min.js';
+
+export class ScreenPickerDialog extends LitElement {
+    static properties = {
+        sources: { type: Array },
+        visible: { type: Boolean },
+    };
+
+    static styles = css`
+        :host {
+            display: none;
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: rgba(0, 0, 0, 0.8);
+            z-index: 10000;
+            align-items: center;
+            justify-content: center;
+        }
+
+        :host([visible]) {
+            display: flex;
+        }
+
+        .dialog {
+            background: var(--background-color);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            padding: 24px;
+            max-width: 800px;
+            max-height: 80vh;
+            overflow-y: auto;
+        }
+
+        h2 {
+            margin: 0 0 16px 0;
+            color: var(--text-color);
+            font-size: 18px;
+            font-weight: 500;
+        }
+
+        .sources-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+            gap: 12px;
+            margin-bottom: 16px;
+        }
+
+        .source-item {
+            background: var(--input-background);
+            border: 2px solid transparent;
+            border-radius: 6px;
+            padding: 12px;
+            cursor: pointer;
+            transition: all 0.2s ease;
+        }
+
+        .source-item:hover {
+            border-color: var(--border-default);
+            background: var(--button-hover);
+        }
+
+        .source-item.selected {
+            border-color: var(--accent-color);
+            background: var(--button-hover);
+        }
+
+        .source-thumbnail {
+            width: 100%;
+            height: 120px;
+            object-fit: contain;
+            background: #1a1a1a;
+            border-radius: 4px;
+            margin-bottom: 8px;
+        }
+
+        .source-name {
+            color: var(--text-color);
+            font-size: 13px;
+            text-align: center;
+            word-break: break-word;
+        }
+
+        .buttons {
+            display: flex;
+            gap: 8px;
+            justify-content: flex-end;
+        }
+
+        button {
+            background: var(--button-background);
+            color: var(--text-color);
+            border: 1px solid var(--border-color);
+            padding: 8px 16px;
+            border-radius: 3px;
+            cursor: pointer;
+            font-size: 13px;
+            transition: background-color 0.1s ease;
+        }
+
+        button:hover {
+            background: var(--button-hover);
+        }
+
+        button.primary {
+            background: var(--accent-color);
+            color: white;
+            border-color: var(--accent-color);
+        }
+
+        button.primary:hover {
+            background: var(--accent-hover);
+        }
+
+        button:disabled {
+            opacity: 0.5;
+            cursor: not-allowed;
+        }
+    `;
+
+    constructor() {
+        super();
+        this.sources = [];
+        this.visible = false;
+        this.selectedSource = null;
+    }
+
+    selectSource(source) {
+        this.selectedSource = source;
+        this.requestUpdate();
+    }
+
+    confirm() {
+        if (this.selectedSource) {
+            this.dispatchEvent(
+                new CustomEvent('source-selected', {
+                    detail: { source: this.selectedSource },
+                })
+            );
+        }
+    }
+
+    cancel() {
+        this.dispatchEvent(new CustomEvent('cancelled'));
+    }
+
+    render() {
+        return html`
+            <div class="dialog">
+                <h2>Choose screen or window to share</h2>
+                <div class="sources-grid">
+                    ${this.sources.map(
+                        source => html`
+                            <div
+                                class="source-item ${this.selectedSource?.id === source.id ? 'selected' : ''}"
+                                @click=${() => this.selectSource(source)}
+                            >
+                                <img class="source-thumbnail" src="${source.thumbnail}" alt="${source.name}" />
+                                <div class="source-name">${source.name}</div>
+                            </div>
+                        `
+                    )}
+                </div>
+                <div class="buttons">
+                    <button @click=${this.cancel}>Cancel</button>
+                    <button class="primary" @click=${this.confirm} ?disabled=${!this.selectedSource}>Share</button>
+                </div>
+            </div>
+        `;
+    }
+}
+
+customElements.define('screen-picker-dialog', ScreenPickerDialog);