|
1 | 1 | import { useState, useEffect } from "react" |
2 | 2 | import { Building2 } from "lucide-react" |
3 | 3 | import { Select, SelectContent, SelectItem, SelectTrigger, SelectSeparator } from "@/components/ui/select" |
4 | | -import { StandardTooltip } from "@src/components/ui" |
5 | 4 | import { useAppTranslation } from "@src/i18n/TranslationContext" |
6 | 5 | import { vscode } from "@src/utils/vscode" |
7 | 6 | import { useExtensionState } from "@src/context/ExtensionStateContext" |
@@ -86,64 +85,62 @@ export const CloudAccountSwitcher = () => { |
86 | 85 | } |
87 | 86 |
|
88 | 87 | return ( |
89 | | - <StandardTooltip content={t("cloud:switchAccount")}> |
90 | | - <div className="inline-block ml-1"> |
91 | | - <Select value={currentValue} onValueChange={handleOrganizationChange} disabled={isLoading}> |
92 | | - <SelectTrigger |
93 | | - className={cn( |
94 | | - "h-4.5 w-4.5 p-0 gap-0", |
95 | | - "bg-transparent opacity-90 hover:opacity-50", |
96 | | - "flex items-center justify-center", |
97 | | - "rounded-lg overflow-clip", |
98 | | - "border border-vscode-dropdown-border", |
99 | | - "[&>svg]:hidden", // Hide the default chevron/caret |
100 | | - isLoading && "opacity-50", |
101 | | - )} |
102 | | - aria-label={selectedOrgId ? currentOrg?.organization.name : t("cloud:personalAccount")}> |
103 | | - {renderAccountIcon()} |
104 | | - </SelectTrigger> |
| 88 | + <div className="inline-block ml-1"> |
| 89 | + <Select value={currentValue} onValueChange={handleOrganizationChange} disabled={isLoading}> |
| 90 | + <SelectTrigger |
| 91 | + className={cn( |
| 92 | + "h-4.5 w-4.5 p-0 gap-0", |
| 93 | + "bg-transparent opacity-90 hover:opacity-50", |
| 94 | + "flex items-center justify-center", |
| 95 | + "rounded-lg overflow-clip", |
| 96 | + "border border-vscode-dropdown-border", |
| 97 | + "[&>svg]:hidden", // Hide the default chevron/caret |
| 98 | + isLoading && "opacity-50", |
| 99 | + )} |
| 100 | + aria-label={selectedOrgId ? currentOrg?.organization.name : t("cloud:personalAccount")}> |
| 101 | + {renderAccountIcon()} |
| 102 | + </SelectTrigger> |
105 | 103 |
|
106 | | - <SelectContent> |
107 | | - {/* Personal Account Option */} |
108 | | - <SelectItem value="personal"> |
| 104 | + <SelectContent> |
| 105 | + {/* Personal Account Option */} |
| 106 | + <SelectItem value="personal"> |
| 107 | + <div className="flex items-center gap-2"> |
| 108 | + {cloudUserInfo.picture ? ( |
| 109 | + <img |
| 110 | + src={cloudUserInfo.picture} |
| 111 | + alt={cloudUserInfo.name || cloudUserInfo.email} |
| 112 | + className="w-4.5 h-4.5 rounded-full object-cover overflow-clip" |
| 113 | + /> |
| 114 | + ) : ( |
| 115 | + <div className="w-4.5 h-4.5 rounded-full flex items-center justify-center bg-vscode-button-background text-vscode-button-foreground text-xs"> |
| 116 | + {cloudUserInfo.name?.charAt(0) || cloudUserInfo.email?.charAt(0) || "?"} |
| 117 | + </div> |
| 118 | + )} |
| 119 | + <span>{t("cloud:personalAccount")}</span> |
| 120 | + </div> |
| 121 | + </SelectItem> |
| 122 | + |
| 123 | + {cloudOrganizations.length > 0 && <SelectSeparator />} |
| 124 | + |
| 125 | + {/* Organization Options */} |
| 126 | + {cloudOrganizations.map((org) => ( |
| 127 | + <SelectItem key={org.organization.id} value={org.organization.id}> |
109 | 128 | <div className="flex items-center gap-2"> |
110 | | - {cloudUserInfo.picture ? ( |
| 129 | + {org.organization.image_url ? ( |
111 | 130 | <img |
112 | | - src={cloudUserInfo.picture} |
113 | | - alt={cloudUserInfo.name || cloudUserInfo.email} |
| 131 | + src={org.organization.image_url} |
| 132 | + alt="" |
114 | 133 | className="w-4.5 h-4.5 rounded-full object-cover overflow-clip" |
115 | 134 | /> |
116 | 135 | ) : ( |
117 | | - <div className="w-4.5 h-4.5 rounded-full flex items-center justify-center bg-vscode-button-background text-vscode-button-foreground text-xs"> |
118 | | - {cloudUserInfo.name?.charAt(0) || cloudUserInfo.email?.charAt(0) || "?"} |
119 | | - </div> |
| 136 | + <Building2 className="w-4.5 h-4.5" /> |
120 | 137 | )} |
121 | | - <span>{t("cloud:personalAccount")}</span> |
| 138 | + <span className="truncate">{org.organization.name}</span> |
122 | 139 | </div> |
123 | 140 | </SelectItem> |
124 | | - |
125 | | - {cloudOrganizations.length > 0 && <SelectSeparator />} |
126 | | - |
127 | | - {/* Organization Options */} |
128 | | - {cloudOrganizations.map((org) => ( |
129 | | - <SelectItem key={org.organization.id} value={org.organization.id}> |
130 | | - <div className="flex items-center gap-2"> |
131 | | - {org.organization.image_url ? ( |
132 | | - <img |
133 | | - src={org.organization.image_url} |
134 | | - alt="" |
135 | | - className="w-4.5 h-4.5 rounded-full object-cover overflow-clip" |
136 | | - /> |
137 | | - ) : ( |
138 | | - <Building2 className="w-4.5 h-4.5" /> |
139 | | - )} |
140 | | - <span className="truncate">{org.organization.name}</span> |
141 | | - </div> |
142 | | - </SelectItem> |
143 | | - ))} |
144 | | - </SelectContent> |
145 | | - </Select> |
146 | | - </div> |
147 | | - </StandardTooltip> |
| 141 | + ))} |
| 142 | + </SelectContent> |
| 143 | + </Select> |
| 144 | + </div> |
148 | 145 | ) |
149 | 146 | } |
0 commit comments