web: add org icons to select default org dropdown in settings

[ameer2468]

Summary by CodeRabbit

• New Features
  • Organization dropdown now displays organization icons alongside names, providing improved visual identification when selecting your default organization.

[coderabbitai]

Walkthrough

The Select component's option type is extended to optionally include an image property, with rendering updated to display images alongside labels. This enhancement is then applied to the organization selection dropdown in account settings to display organization icons.

Changes

Cohort / File(s)	Summary
Select component enhancement packages/ui/src/components/Select.tsx	Extended options type to support optional image?: React.ReactNode property; updated rendering to display images and labels in a flex row layout alongside each option.
Settings page integration apps/web/app/(org)/dashboard/settings/account/Settings.tsx	Added SignedImageUrl import and updated Default organization select options to include organization icon images rendered via SignedImageUrl component.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Possibly related PRs

• Populate orgId col on videos table #1066: Directly modifies the same Select component and account Settings page to alter option rendering and organization presentation.

Suggested reviewers

• Brendonovich

Poem

🐰 ✨
Icons now dance in dropdown rows,
Where organizations glow,
Select grows smart with images bright,
Settings shine with visual delight!
thump thump 🎨

Pre-merge checks and finishing touches

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	You can run @coderabbitai generate docstrings to improve docstring coverage.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title Check	✅ Passed	The pull request title "web: add org icons to select default org dropdown in settings" directly and accurately describes the primary change in the changeset. The changes add organization icons to the select dropdown component used for choosing the default organization in the settings page, which is exactly what the title states. The title is concise, specific, and uses clear language without vague terms or unnecessary noise. A teammate reviewing the commit history would immediately understand that this PR adds visual icons to an organization selection dropdown.

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch add-org-icons-to-select-dropdown

---

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: 1

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 38d1d7b and ddc6268.

📒 Files selected for processing (2)

• apps/web/app/(org)/dashboard/settings/account/Settings.tsx (2 hunks)
• packages/ui/src/components/Select.tsx (2 hunks)

🧰 Additional context used

📓 Path-based instructions (6)

**/*.{ts,tsx}

📄 CodeRabbit inference engine (AGENTS.md)

**/*.{ts,tsx}: Use a 2-space indent for TypeScript code.
Use Biome for formatting and linting TypeScript/JavaScript files by running pnpm format.

Use strict TypeScript and avoid any; leverage shared types

Files:

• packages/ui/src/components/Select.tsx
• apps/web/app/(org)/dashboard/settings/account/Settings.tsx

**/*.{ts,tsx,js,jsx}

📄 CodeRabbit inference engine (AGENTS.md)

**/*.{ts,tsx,js,jsx}: Use kebab-case for filenames for TypeScript/JavaScript modules (e.g., user-menu.tsx).
Use PascalCase for React/Solid components.

Files:

• packages/ui/src/components/Select.tsx
• apps/web/app/(org)/dashboard/settings/account/Settings.tsx

packages/ui/**/*.{ts,tsx,js,jsx}

📄 CodeRabbit inference engine (AGENTS.md)

Component files in packages/ui should use PascalCase naming if they define React/Solid components.

Files:

• packages/ui/src/components/Select.tsx

apps/web/**/*.{ts,tsx,js,jsx}

📄 CodeRabbit inference engine (AGENTS.md)

On the client, always use useEffectQuery or useEffectMutation from @/lib/EffectRuntime; never call EffectRuntime.run* directly in components.

Files:

• apps/web/app/(org)/dashboard/settings/account/Settings.tsx

apps/web/**/*.{ts,tsx}

📄 CodeRabbit inference engine (CLAUDE.md)

apps/web/**/*.{ts,tsx}: Use TanStack Query v5 for all client-side server state and fetching in the web app
Mutations should call Server Actions directly and perform targeted cache updates with setQueryData/setQueriesData
Run server-side effects via the ManagedRuntime from apps/web/lib/server.ts using EffectRuntime.runPromise/runPromiseExit; do not create runtimes ad hoc
Client code should use helpers from apps/web/lib/EffectRuntime.ts (useEffectQuery, useEffectMutation, useRpcClient); never call ManagedRuntime.make inside components

Files:

• apps/web/app/(org)/dashboard/settings/account/Settings.tsx

apps/web/app/**/*.{ts,tsx}

📄 CodeRabbit inference engine (CLAUDE.md)

Server components needing Effect services must call EffectRuntime.runPromise(effect.pipe(provideOptionalAuth))

Files:

• apps/web/app/(org)/dashboard/settings/account/Settings.tsx

🧬 Code graph analysis (1)

apps/web/app/(org)/dashboard/settings/account/Settings.tsx (1)

apps/web/components/SignedImageUrl.tsx (1)

• SignedImageUrl (20-64)

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (3)

• GitHub Check: Build Desktop (aarch64-apple-darwin, macos-latest)
• GitHub Check: Build Desktop (x86_64-pc-windows-msvc, windows-latest)
• GitHub Check: Analyze (rust)

🔇 Additional comments (3)

apps/web/app/(org)/dashboard/settings/account/Settings.tsx (2)

19-19: LGTM! Import added correctly.

The SignedImageUrl import is properly placed and used within the file.

---

247-254: LGTM! Organization icons integrated correctly.

The SignedImageUrl component is properly configured with appropriate props for displaying organization icons. The component gracefully handles null/undefined iconUrl values by falling back to an avatar with initials.

packages/ui/src/components/Select.tsx (1)

15-19: LGTM! Type definition extended cleanly.

The optional image property maintains backward compatibility while enabling icon support. Using React.ReactNode provides flexibility for various image implementations.