feat(dashboard): Enhance team onboarding with member avatar and framework selection

- Add OrgMemberAvatarInput component with improved member selection using Popover and Command
- Implement ComboboxDemo for framework selection
- Update Button variant and add cmdk package
- Improve UI components with more flexible selection and filtering

Tool: gitpod/catfood.gitpod.cloud

Author: filiptronicek

components/dashboard/package.json

@@ -31,6 +31,7 @@
     "buffer": "^4.3.0",
     "class-variance-authority": "^0.7.0",
     "classnames": "^2.3.1",
+    "cmdk": "^1.0.4",
     "configcat-js": "^6.0.0",
     "countries-list": "^2.6.1",
     "crypto-browserify": "3.12.0",

components/dashboard/src/components/podkit/buttons/Button.tsx

@@ -17,7 +17,7 @@ export const buttonVariants = cva(
                 default:
                     "bg-gray-900 hover:bg-gray-800 dark:bg-kumquat-base dark:hover:bg-kumquat-ripe text-gray-50 dark:text-gray-900",
                 destructive: "bg-red-600 hover:bg-red-700 text-gray-100 dark:text-red-100",
-                outline: "border border-input bg-transparent hover:bg-kumquat-ripe hover:text-gray-600",
+                outline: "border border-input bg-transparent hover:bg-pk-surface-secondary hover:text-gray-600",
                 secondary:
                     "bg-gray-100 dark:bg-gray-700 hover:bg-gray-200 dark:hover:bg-gray-600 text-gray-500 dark:text-gray-100 hover:text-gray-600",
                 ghost: "bg-transparent hover:opacity-50",

components/dashboard/src/components/podkit/command/Command.tsx

@@ -0,0 +1,134 @@
+/**
+ * Copyright (c) 2025 Gitpod GmbH. All rights reserved.
+ * Licensed under the GNU Affero General Public License (AGPL).
+ * See License.AGPL.txt in the project root for license information.
+ */
+
+import * as React from "react";
+import { Command as CommandPrimitive } from "cmdk";
+import { Search } from "lucide-react";
+
+import { cn } from "@podkit/lib/cn";
+
+const Command = React.forwardRef<
+    React.ElementRef<typeof CommandPrimitive>,
+    React.ComponentPropsWithoutRef<typeof CommandPrimitive>
+>(({ className, ...props }, ref) => (
+    <CommandPrimitive
+        ref={ref}
+        className={cn(
+            "flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground",
+            className,
+        )}
+        {...props}
+    />
+));
+Command.displayName = CommandPrimitive.displayName;
+
+// todo(ft): Add when needed
+// const CommandDialog = ({ children, ...props }: DialogProps) => {
+//   return (
+//     <Dialog {...props}>
+//       <DialogContent className="overflow-hidden p-0 shadow-lg">
+//         <Command className="[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
+//           {children}
+//         </Command>
+//       </DialogContent>
+//     </Dialog>
+//   )
+// }
+
+const CommandInput = React.forwardRef<
+    React.ElementRef<typeof CommandPrimitive.Input>,
+    React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input>
+>(({ className, ...props }, ref) => (
+    <div className="flex items-center border-b px-3" cmdk-input-wrapper="">
+        <Search className="mr-2 h-4 w-4 shrink-0 opacity-50" />
+        <CommandPrimitive.Input
+            ref={ref}
+            className={cn(
+                "flex h-11 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
+                className,
+            )}
+            {...props}
+        />
+    </div>
+));
+
+CommandInput.displayName = CommandPrimitive.Input.displayName;
+
+const CommandList = React.forwardRef<
+    React.ElementRef<typeof CommandPrimitive.List>,
+    React.ComponentPropsWithoutRef<typeof CommandPrimitive.List>
+>(({ className, ...props }, ref) => (
+    <CommandPrimitive.List
+        ref={ref}
+        className={cn("max-h-[300px] overflow-y-auto overflow-x-hidden", className)}
+        {...props}
+    />
+));
+
+CommandList.displayName = CommandPrimitive.List.displayName;
+
+const CommandEmpty = React.forwardRef<
+    React.ElementRef<typeof CommandPrimitive.Empty>,
+    React.ComponentPropsWithoutRef<typeof CommandPrimitive.Empty>
+>((props, ref) => <CommandPrimitive.Empty ref={ref} className="py-6 text-center text-sm" {...props} />);
+
+CommandEmpty.displayName = CommandPrimitive.Empty.displayName;
+
+const CommandGroup = React.forwardRef<
+    React.ElementRef<typeof CommandPrimitive.Group>,
+    React.ComponentPropsWithoutRef<typeof CommandPrimitive.Group>
+>(({ className, ...props }, ref) => (
+    <CommandPrimitive.Group
+        ref={ref}
+        className={cn(
+            "overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground",
+            className,
+        )}
+        {...props}
+    />
+));
+
+CommandGroup.displayName = CommandPrimitive.Group.displayName;
+
+const CommandSeparator = React.forwardRef<
+    React.ElementRef<typeof CommandPrimitive.Separator>,
+    React.ComponentPropsWithoutRef<typeof CommandPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+    <CommandPrimitive.Separator ref={ref} className={cn("-mx-1 h-px bg-border", className)} {...props} />
+));
+CommandSeparator.displayName = CommandPrimitive.Separator.displayName;
+
+const CommandItem = React.forwardRef<
+    React.ElementRef<typeof CommandPrimitive.Item>,
+    React.ComponentPropsWithoutRef<typeof CommandPrimitive.Item>
+>(({ className, ...props }, ref) => (
+    <CommandPrimitive.Item
+        ref={ref}
+        className={cn(
+            "relative flex cursor-default gap-2 select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled=true]:pointer-events-none data-[selected='true']:bg-accent data-[selected=true]:text-accent-foreground data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+            className,
+        )}
+        {...props}
+    />
+));
+
+CommandItem.displayName = CommandPrimitive.Item.displayName;
+
+const CommandShortcut = ({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>) => {
+    return <span className={cn("ml-auto text-xs tracking-widest text-muted-foreground", className)} {...props} />;
+};
+CommandShortcut.displayName = "CommandShortcut";
+
+export {
+    Command,
+    CommandInput,
+    CommandList,
+    CommandEmpty,
+    CommandGroup,
+    CommandItem,
+    CommandShortcut,
+    CommandSeparator,
+};

components/dashboard/src/teams/TeamOnboarding.tsx

@@ -26,6 +26,12 @@ import { RepositoryListItem } from "../repositories/list/RepoListItem";
 import { LoadingState } from "@podkit/loading/LoadingState";
 import { Table, TableHeader, TableRow, TableHead, TableBody } from "@podkit/tables/Table";
 import { WelcomeMessageConfigurationField } from "./onboarding/WelcomeMessageConfigurationField";
+import { OrgMemberAvatarInput } from "./onboarding/OrgMemberAvatarInput";
+import { Popover, PopoverContent, PopoverTrigger } from "@podkit/popover/Popover";
+import { Button } from "@podkit/buttons/Button";
+import { Check, ChevronsUpDown } from "lucide-react";
+import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from "@podkit/command/Command";
+import { cn } from "@podkit/lib/cn";
 
 export type UpdateTeamSettingsOptions = {
     throwMutateError?: boolean;
@@ -44,6 +50,9 @@ export default function TeamOnboardingPage() {
 
     const [internalLink, setInternalLink] = useState<string | undefined>(undefined);
 
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    const [featuredMemberId, setFeaturedMemberId] = useState<string | undefined>(undefined);
+
     const handleUpdateTeamSettings = useCallback(
         async (newSettings: UpdateOrganizationSettingsArgs, options?: UpdateTeamSettingsOptions) => {
             if (!org?.id) {
@@ -163,8 +172,181 @@ export default function TeamOnboardingPage() {
                     )}
                 </ConfigurationSettingsField>
 
+                <OrgMemberAvatarInput
+                    settings={settings?.onboardingSettings?.welcomeMessage}
+                    setFeaturedMemberId={setFeaturedMemberId}
+                />
+                <ComboboxDemo />
+
                 <WelcomeMessageConfigurationField handleUpdateTeamSettings={handleUpdateTeamSettings} />
             </div>
         </OrgSettingsPage>
     );
 }
+
+const frameworks = [
+    {
+        value: "next.js",
+        label: "AAAANext.js",
+    },
+    {
+        value: "sveltekit",
+        label: "SvelteKit",
+    },
+    {
+        value: "nuxt.js",
+        label: "Nuxt.js",
+    },
+    {
+        value: "remix",
+        label: "Remix",
+    },
+    {
+        value: "astro",
+        label: "Astro",
+    },
+    {
+        value: "gatsby",
+        label: "Gatsby",
+    },
+    {
+        value: "angular",
+        label: "Angular",
+    },
+    {
+        value: "ember",
+        label: "Ember.js",
+    },
+    {
+        value: "qwik",
+        label: "Qwik",
+    },
+    {
+        value: "solid",
+        label: "SolidJS",
+    },
+    {
+        value: "vite",
+        label: "Vite",
+    },
+    {
+        value: "eleventy",
+        label: "Eleventy",
+    },
+    {
+        value: "redwood",
+        label: "RedwoodJS",
+    },
+    {
+        value: "fresh",
+        label: "Fresh",
+    },
+    {
+        value: "nest",
+        label: "NestJS",
+    },
+    {
+        value: "vue",
+        label: "Vue.js",
+    },
+    {
+        value: "create-react-app",
+        label: "Create React App",
+    },
+    {
+        value: "preact",
+        label: "Preact",
+    },
+    {
+        value: "gridsome",
+        label: "Gridsome",
+    },
+    {
+        value: "blitz",
+        label: "Blitz.js",
+    },
+    {
+        value: "hydrogen",
+        label: "Hydrogen",
+    },
+    {
+        value: "remix-indie",
+        label: "Remix Indie Stack",
+    },
+    {
+        value: "expo",
+        label: "Expo",
+    },
+    {
+        value: "docusaurus",
+        label: "Docusaurus",
+    },
+    {
+        value: "react-native",
+        label: "React Native",
+    },
+    {
+        value: "t3-app",
+        label: "Create T3 App",
+    },
+    {
+        value: "ionic",
+        label: "Ionic",
+    },
+    {
+        value: "vitepress",
+        label: "VitePress",
+    },
+    {
+        value: "nextra",
+        label: "Nextra",
+    },
+    {
+        value: "adonis",
+        label: "AdonisJS",
+    },
+];
+
+export function ComboboxDemo() {
+    const [open, setOpen] = useState(false);
+    const [value, setValue] = useState("");
+
+    return (
+        <Popover open={open} onOpenChange={setOpen}>
+            <PopoverTrigger asChild>
+                <Button variant="outline" role="combobox" aria-expanded={open} className="w-[200px] justify-between">
+                    {value ? frameworks.find((framework) => framework.value === value)?.label : "Select framework..."}
+                    <ChevronsUpDown className="opacity-50" />
+                </Button>
+            </PopoverTrigger>
+            <PopoverContent className="w-[200px] p-0">
+                <Command>
+                    <CommandInput placeholder="Search framework..." className="h-9" />
+                    <CommandList>
+                        <CommandEmpty>No framework found.</CommandEmpty>
+                        <CommandGroup>
+                            {frameworks.map((framework) => (
+                                <CommandItem
+                                    key={framework.value}
+                                    value={framework.value}
+                                    onSelect={(currentValue) => {
+                                        setValue(currentValue === value ? "" : currentValue);
+                                        setOpen(false);
+                                    }}
+                                >
+                                    {framework.label}
+                                    <Check
+                                        className={cn(
+                                            "ml-auto",
+                                            value === framework.value ? "opacity-100" : "opacity-0",
+                                        )}
+                                    />
+                                </CommandItem>
+                            ))}
+                        </CommandGroup>
+                    </CommandList>
+                </Command>
+            </PopoverContent>
+        </Popover>
+    );
+}