add org icons to select org dropdown (#1261)

Author: ameer2468

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

@@ -16,6 +16,7 @@ import { useEffect, useId, useState } from "react";
 import { toast } from "sonner";
 import { removeProfileImage } from "@/actions/account/remove-profile-image";
 import { uploadProfileImage } from "@/actions/account/upload-profile-image";
+import { SignedImageUrl } from "@/components/SignedImageUrl";
 import { useDashboardContext } from "../../Contexts";
 import { ProfileImage } from "./components/ProfileImage";
 import { patchAccountSettings } from "./server";
@@ -243,6 +244,14 @@ export const Settings = ({
 						options={(organizationData || []).map((org) => ({
 							value: org.organization.id,
 							label: org.organization.name,
+							image: (
+								<SignedImageUrl
+									className="size-5"
+									image={org.organization.iconUrl}
+									name={org.organization.name}
+									type="organization"
+								/>
+							),
 						}))}
 					/>
 				</Card>

packages/ui/src/components/Select.tsx

@@ -12,7 +12,11 @@ function Select({
 	value,
 	...props
 }: React.ComponentProps<typeof SelectPrimitive.Root> & {
-	options: { value: string; label: string }[];
+	options: {
+		value: string;
+		label: string;
+		image?: React.ReactNode;
+	}[];
 	onValueChange: (value: string) => void;
 	placeholder: string;
 }) {
@@ -29,7 +33,10 @@ function Select({
 			<SelectContent>
 				{options.map((option) => (
 					<SelectItem key={option.value} value={option.value}>
-						{option.label}
+						<div className="flex gap-2 items-center">
+							{option.image}
+							{option.label}
+						</div>
 					</SelectItem>
 				))}
 			</SelectContent>