From b20ec4889d06f44fde643798bce7771d519f485c Mon Sep 17 00:00:00 2001
From: Cedric van Putten <github@cedric.dev>
Date: Thu, 29 Aug 2024 01:05:54 +0200
Subject: [PATCH] refactor(webui): group bundle selection by platform and
 introduce environment icons

---
 webui/src/components/BundleSelectForm.tsx | 127 +++++++++++-------
 webui/src/components/BundleTag.tsx        |  52 +++-----
 webui/src/components/EnvironmentIcon.tsx  |  21 +++
 webui/src/components/EnvironmentName.tsx  |  18 +++
 webui/src/components/PlatformName.tsx     |  38 ++++++
 webui/src/ui/Select.tsx                   | 154 ++++++++++++++++++++++
 6 files changed, 323 insertions(+), 87 deletions(-)
 create mode 100644 webui/src/components/EnvironmentIcon.tsx
 create mode 100644 webui/src/components/EnvironmentName.tsx
 create mode 100644 webui/src/components/PlatformName.tsx
 create mode 100644 webui/src/ui/Select.tsx

diff --git a/webui/src/components/BundleSelectForm.tsx b/webui/src/components/BundleSelectForm.tsx
index b23fdd0..2eeeec0 100644
--- a/webui/src/components/BundleSelectForm.tsx
+++ b/webui/src/components/BundleSelectForm.tsx
@@ -1,63 +1,88 @@
-import * as Select from '@radix-ui/react-select';
-import { cx } from 'class-variance-authority';
 import { useRouter } from 'expo-router';
-// @ts-expect-error
-import ChevronDownIcon from 'lucide-react/dist/esm/icons/chevron-down';
+import { useMemo } from 'react';
 
-import { BundleTag } from '~/components/BundleTag';
+import { EnvironmentIcon } from '~/components/EnvironmentIcon';
+import { PlatformName } from '~/components/PlatformName';
 import { useBundle } from '~/providers/bundle';
-import { Button } from '~/ui/Button';
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectTrigger,
+  SelectValue,
+} from '~/ui/Select';
 import { relativeBundlePath } from '~/utils/bundle';
+import type { PartialAtlasBundle } from '~core/data/types';
 
 export function BundleSelectForm() {
   const router = useRouter();
   const { bundle, bundles } = useBundle();
+  const bundlesByPlatform = useMemo(() => groupBundlesByPlatform(bundles), [bundles]);
 
   return (
-    <Select.Root value={bundle.id} onValueChange={(bundle) => router.setParams({ bundle })}>
-      <Select.Trigger asChild>
-        <Button variant="quaternary" size="sm">
-          <BundleTag
-            className="mr-2"
-            size="xs"
-            platform={bundle.platform}
-            environment={bundle.environment}
-          />
-          <Select.Value placeholder="Select bundle to inspect" />
-          <Select.Icon className="text-icon-default">
-            <ChevronDownIcon size={16} className="m-1 mr-0 align-middle" />
-          </Select.Icon>
-        </Button>
-      </Select.Trigger>
-      <Select.Portal>
-        <Select.Content
-          side="bottom"
-          collisionPadding={{ left: 16, right: 16 }}
-          className={cx(
-            'flex min-w-[220px] flex-col gap-0.5 rounded-md border border-default bg-default p-1 shadow-md',
-            'transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-200 data-[state=open]:duration-300',
-            'data-[state=closed]:fade-out data-[state=closed]:slide-out-to-top-1/3 data-[state=open]:fade-in data-[state=open]:slide-in-from-top-1/3'
-          )}
-        >
-          <Select.Viewport className="py-2">
-            {bundles.map((item) => (
-              <div key={item.id}>
-                <Select.Item value={item.id} asChild>
-                  <Button variant="quaternary" size="sm" className="w-full !justify-start my-0.5">
-                    <BundleTag
-                      className="mr-2"
-                      size="xs"
-                      platform={item.platform}
-                      environment={item.environment}
-                    />
-                    <Select.ItemText>{relativeBundlePath(item, item.entryPoint)}</Select.ItemText>
-                  </Button>
-                </Select.Item>
-              </div>
-            ))}
-          </Select.Viewport>
-        </Select.Content>
-      </Select.Portal>
-    </Select.Root>
+    <Select value={bundle.id} onValueChange={(bundle) => router.setParams({ bundle })}>
+      <SelectTrigger className="!w-auto">
+        <SelectValue placeholder="Select a fruit" />
+      </SelectTrigger>
+      <SelectContent side="bottom" collisionPadding={{ left: 16, right: 16 }}>
+        {bundlesByPlatform.map(([platform, bundles]) => {
+          // Hide empty `unknown` platforms. If there are unknown platforms, render them.
+          if (platform === 'unknown' && bundles.length === 0) {
+            return null;
+          }
+
+          return (
+            <SelectGroup key={platform}>
+              <SelectLabel className="m-0.5 capitalize">
+                <PlatformName platform={platform} />
+              </SelectLabel>
+              {bundles.length === 0 ? (
+                <SelectItem disabled value="none" className="italic mb-1">
+                  No bundle available for this platform
+                </SelectItem>
+              ) : (
+                bundles.map((item) => (
+                  <SelectItem key={item.id} value={item.id}>
+                    <span className="inline-flex items-center select-none mb-0.5">
+                      <PlatformName platform={item.platform}>
+                        <EnvironmentIcon environment={item.environment} size={16} />
+                      </PlatformName>
+                      <span className="ml-2 mr-1">{relativeBundlePath(item, item.entryPoint)}</span>
+                    </span>
+                  </SelectItem>
+                ))
+              )}
+            </SelectGroup>
+          );
+        })}
+      </SelectContent>
+    </Select>
+  );
+}
+
+function groupBundlesByPlatform(bundles: PartialAtlasBundle[]) {
+  const groups: Record<PartialAtlasBundle['platform'], PartialAtlasBundle[]> = {
+    android: [],
+    ios: [],
+    web: [],
+    unknown: [],
+  };
+
+  for (const bundle of bundles) {
+    if (groups[bundle.platform]) {
+      groups[bundle.platform]!.push(bundle);
+    }
+  }
+
+  return Object.entries(groups).map(
+    ([platform, bundles]) =>
+      [platform as PartialAtlasBundle['platform'], bundles.sort(sortBundlesByEnvironment)] as const
   );
 }
+
+/** Sort all bundles by environment, in alphabetical order "client -> node -> react-server" */
+function sortBundlesByEnvironment(a: PartialAtlasBundle, b: PartialAtlasBundle) {
+  return a.environment.localeCompare(b.environment);
+}
diff --git a/webui/src/components/BundleTag.tsx b/webui/src/components/BundleTag.tsx
index cde692d..04c0797 100644
--- a/webui/src/components/BundleTag.tsx
+++ b/webui/src/components/BundleTag.tsx
@@ -1,22 +1,25 @@
 import { cva, type VariantProps } from 'class-variance-authority';
 import { type ComponentProps } from 'react';
 
+import { EnvironmentIcon } from '~/components/EnvironmentIcon';
+import { EnvironmentName } from '~/components/EnvironmentName';
+import { PlatformName } from '~/components/PlatformName';
 import { Tag } from '~/ui/Tag';
 import type { AtlasBundle } from '~core/data/types';
 
 const bundleTagVariants = cva('', {
   variants: {
     platform: {
-      android: 'bg-palette-green3 text-palette-green11',
-      ios: 'bg-palette-blue3 text-palette-blue11',
-      web: 'bg-palette-orange3 text-palette-orange11',
+      android: 'bg-palette-green3',
+      ios: 'bg-palette-blue3',
+      web: 'bg-palette-orange3',
       unknown: '',
-    } satisfies typeof platformChildren,
+    } satisfies Record<AtlasBundle['platform'], string>,
     environment: {
       client: '',
-      node: 'bg-palette-orange3 text-palette-orange11',
-      'react-server': 'bg-palette-green3 text-palette-green11',
-    } satisfies typeof environmentChildren,
+      node: 'bg-palette-orange3',
+      'react-server': 'bg-palette-orange3',
+    } satisfies Record<AtlasBundle['environment'], string>,
   },
   defaultVariants: {
     platform: 'unknown', // Default platform value, see MetroGraphSource
@@ -24,19 +27,6 @@ const bundleTagVariants = cva('', {
   },
 });
 
-const platformChildren: Record<AtlasBundle['platform'], string> = {
-  android: 'Android',
-  ios: 'iOS',
-  web: 'Web',
-  unknown: '???',
-};
-
-const environmentChildren: Record<AtlasBundle['environment'], string> = {
-  client: 'Client',
-  node: 'SSR',
-  'react-server': 'RSC',
-};
-
 type BundelTagProps = Omit<
   ComponentProps<typeof Tag> & VariantProps<typeof bundleTagVariants>,
   'children'
@@ -49,22 +39,12 @@ export function BundleTag({ className, platform, environment, ...props }: Bundel
       variant="none"
       {...props}
     >
-      {getBundelTagChildren({ platform, environment })}
+      <PlatformName platform={platform!} className="inline-flex items-center gap-1.5">
+        <PlatformName platform={platform!} />
+        <span>×</span>
+        <EnvironmentName environment={environment!} />
+        <EnvironmentIcon environment={environment!} size={14} />
+      </PlatformName>
     </Tag>
   );
 }
-
-function getBundelTagChildren(props: BundelTagProps) {
-  const children: string[] = [];
-
-  if (props.platform) {
-    children.push(platformChildren[props.platform]);
-  }
-
-  // Only add the environment specifier if it's not bundled for the client
-  if (props.environment && props.environment !== 'client') {
-    children.push(environmentChildren[props.environment]);
-  }
-
-  return children.join(' × ');
-}
diff --git a/webui/src/components/EnvironmentIcon.tsx b/webui/src/components/EnvironmentIcon.tsx
new file mode 100644
index 0000000..7726be9
--- /dev/null
+++ b/webui/src/components/EnvironmentIcon.tsx
@@ -0,0 +1,21 @@
+import type { LucideProps } from 'lucide-react';
+
+import type { AtlasBundle } from '~core/data/types';
+
+type EnvironmentIconProps = Omit<
+  LucideProps & {
+    environment: AtlasBundle['environment'];
+  },
+  'children'
+>;
+
+const iconsByEnvironment: Record<AtlasBundle['environment'], any> = {
+  client: require('lucide-react/dist/esm/icons/tablet-smartphone').default,
+  node: require('lucide-react/dist/esm/icons/hexagon').default,
+  'react-server': require('lucide-react/dist/esm/icons/server').default,
+};
+
+export function EnvironmentIcon({ className, environment, ...props }: EnvironmentIconProps) {
+  const Icon = iconsByEnvironment[environment];
+  return <Icon {...props} />;
+}
diff --git a/webui/src/components/EnvironmentName.tsx b/webui/src/components/EnvironmentName.tsx
new file mode 100644
index 0000000..d070576
--- /dev/null
+++ b/webui/src/components/EnvironmentName.tsx
@@ -0,0 +1,18 @@
+import type { PropsWithChildren } from 'react';
+
+import type { AtlasBundle } from '~core/data/types';
+
+type EnvironmentNameProps = PropsWithChildren<{
+  environment: AtlasBundle['environment'];
+  className?: string;
+}>;
+
+export const environmentNames: Record<AtlasBundle['environment'], string> = {
+  client: 'Client',
+  node: 'SSR',
+  'react-server': 'RSC',
+};
+
+export function EnvironmentName({ children, environment, ...props }: EnvironmentNameProps) {
+  return <span {...props}>{children || environmentNames[environment]}</span>;
+}
diff --git a/webui/src/components/PlatformName.tsx b/webui/src/components/PlatformName.tsx
new file mode 100644
index 0000000..455d47f
--- /dev/null
+++ b/webui/src/components/PlatformName.tsx
@@ -0,0 +1,38 @@
+import { cva } from 'class-variance-authority';
+import type { PropsWithChildren } from 'react';
+
+import type { AtlasBundle } from '~core/data/types';
+
+type PlatformNameProps = PropsWithChildren<{
+  platform: AtlasBundle['platform'];
+  className?: string;
+}>;
+
+export const platformVariants = cva('', {
+  variants: {
+    platform: {
+      android: 'text-palette-green11',
+      ios: 'text-palette-blue11',
+      web: 'text-palette-orange11',
+      unknown: 'text-secondary',
+    } satisfies Record<AtlasBundle['platform'], string>,
+  },
+  defaultVariants: {
+    platform: 'unknown',
+  },
+});
+
+export const platformNames: Record<AtlasBundle['platform'], string> = {
+  android: 'Android',
+  ios: 'iOS',
+  web: 'Web',
+  unknown: 'Unknown',
+};
+
+export function PlatformName({ children, className, platform }: PlatformNameProps) {
+  return (
+    <span className={platformVariants({ className, platform })}>
+      {children || platformNames[platform]}
+    </span>
+  );
+}
diff --git a/webui/src/ui/Select.tsx b/webui/src/ui/Select.tsx
new file mode 100644
index 0000000..cf4a6a3
--- /dev/null
+++ b/webui/src/ui/Select.tsx
@@ -0,0 +1,154 @@
+// see: https://ui.shadcn.com/docs/components/select
+
+import * as SelectPrimitive from '@radix-ui/react-select';
+import { cx } from 'class-variance-authority';
+// @ts-expect-error
+import CheckIcon from 'lucide-react/dist/esm/icons/check';
+// @ts-expect-error
+import ChevronDownIcon from 'lucide-react/dist/esm/icons/chevron-down';
+// @ts-expect-error
+import ChevronUpIcon from 'lucide-react/dist/esm/icons/chevron-up';
+import { type ComponentPropsWithoutRef, type ElementRef, forwardRef } from 'react';
+
+export const Select = SelectPrimitive.Root;
+
+export const SelectGroup = SelectPrimitive.Group;
+
+export const SelectValue = SelectPrimitive.Value;
+
+export const SelectTrigger = forwardRef<
+  ElementRef<typeof SelectPrimitive.Trigger>,
+  ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>
+>(({ className, children, ...props }, ref) => (
+  <SelectPrimitive.Trigger
+    ref={ref}
+    className={cx(
+      'h-10 px-3 py-2 w-full flex items-center justify-between whitespace-nowrap group',
+      'text-sm shadow-sm border rounded-md border-default bg-transparent hover:bg-subtle focus:bg-subtle transition-colors ring-offset-background',
+      'hover:text-default data-[state=closed]:text-secondary focus:outline-none focus:ring-1 focus:ring-ring',
+      'disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1',
+      className
+    )}
+    {...props}
+  >
+    {children}
+    <SelectPrimitive.Icon asChild>
+      <ChevronDownIcon className="h-4 w-4 text-icon-secondary transition-transform duration-200 group-data-[state=open]:rotate-180" />
+    </SelectPrimitive.Icon>
+  </SelectPrimitive.Trigger>
+));
+SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
+
+export const SelectScrollUpButton = forwardRef<
+  ElementRef<typeof SelectPrimitive.ScrollUpButton>,
+  ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.ScrollUpButton
+    ref={ref}
+    className={cx('flex cursor-default items-center justify-center py-1', className)}
+    {...props}
+  >
+    <ChevronUpIcon className="text-icon-default" size={16} />
+  </SelectPrimitive.ScrollUpButton>
+));
+SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
+
+export const SelectScrollDownButton = forwardRef<
+  ElementRef<typeof SelectPrimitive.ScrollDownButton>,
+  ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.ScrollDownButton
+    ref={ref}
+    className={cx('flex cursor-default items-center justify-center py-1', className)}
+    {...props}
+  >
+    <ChevronDownIcon className="text-icon-default" size={16} />
+  </SelectPrimitive.ScrollDownButton>
+));
+SelectScrollDownButton.displayName = SelectPrimitive.ScrollDownButton.displayName;
+
+export const SelectContent = forwardRef<
+  ElementRef<typeof SelectPrimitive.Content>,
+  ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
+>(({ className, children, position = 'popper', ...props }, ref) => (
+  <SelectPrimitive.Portal>
+    <SelectPrimitive.Content
+      ref={ref}
+      className={cx(
+        'relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border border-default bg-default text-popover-foreground shadow-md ',
+        'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95',
+        'data-[side=bottom]:slide-in-from-top-1/3 data-[side=left]:slide-in-from-right-1/3 data-[side=right]:slide-in-from-left-1/3 data-[side=top]:slide-in-from-bottom-1/3',
+        position === 'popper' &&
+          'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',
+        className
+      )}
+      position={position}
+      {...props}
+    >
+      <SelectScrollUpButton />
+      <SelectPrimitive.Viewport
+        className={cx(
+          'p-1',
+          position === 'popper' &&
+            'h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]'
+        )}
+      >
+        {children}
+      </SelectPrimitive.Viewport>
+      <SelectScrollDownButton />
+    </SelectPrimitive.Content>
+  </SelectPrimitive.Portal>
+));
+SelectContent.displayName = SelectPrimitive.Content.displayName;
+
+export const SelectLabel = forwardRef<
+  ElementRef<typeof SelectPrimitive.Label>,
+  ComponentPropsWithoutRef<typeof SelectPrimitive.Label>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.Label
+    ref={ref}
+    className={cx(
+      'px-2 py-1 text-2xs leading-[1.6154] tracking-[-0.003rem] font-semibold text-secondary truncate',
+      className
+    )}
+    {...props}
+  />
+));
+SelectLabel.displayName = SelectPrimitive.Label.displayName;
+
+export const SelectItem = forwardRef<
+  ElementRef<typeof SelectPrimitive.Item>,
+  ComponentPropsWithoutRef<typeof SelectPrimitive.Item>
+>(({ className, children, ...props }, ref) => (
+  <SelectPrimitive.Item
+    ref={ref}
+    className={cx(
+      'relative w-full py-1.5 pl-2 pr-8 flex items-center cursor-pointer select-none rounded-sm text-sm text-secondary outline-none transition-colors',
+      'hover:bg-subtle focus:bg-subtle focus:text-default hover:text-default',
+      'data-[state=checked]:bg-subtle data-[state=checked]:text-default data-[state=checked]:cursor-default',
+      'data-[disabled]:cursor-default data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+      className
+    )}
+    {...props}
+  >
+    <span className="absolute right-2 flex h-3.5 w-3.5 items-center justify-center">
+      <SelectPrimitive.ItemIndicator>
+        <CheckIcon className="h-4 w-4 text-icon-secondary" />
+      </SelectPrimitive.ItemIndicator>
+    </span>
+    <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+  </SelectPrimitive.Item>
+));
+SelectItem.displayName = SelectPrimitive.Item.displayName;
+
+export const SelectSeparator = forwardRef<
+  ElementRef<typeof SelectPrimitive.Separator>,
+  ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.Separator
+    ref={ref}
+    className={cx('-mx-1 my-1 h-px bg-muted', className)}
+    {...props}
+  />
+));
+SelectSeparator.displayName = SelectPrimitive.Separator.displayName;