Add support for dynamic sidebar logos

.env.sample

@@ -34,3 +34,7 @@ VITE_KEYGEN_MODE=singleplayer
 # Environment label used on each BetterStack error report, e.g. development or production.
 # Defaults to "production" if not set, which is Sentry's default environment label.
 # VITE_SENTRY_ENVIRONMENT=
+
+# Publishable Logo.dev token (e.g. pk_...) used to show business logos in the sidebar.
+# https://logo.dev/
+# VITE_LOGODEV_TOKEN=

env.d.ts

@@ -7,6 +7,7 @@ interface ImportMetaEnv {
   readonly VITE_KEYGEN_ACCOUNT_ID?: string
   readonly VITE_KEYGEN_EDITION?: string
   readonly VITE_KEYGEN_DEFAULT_PLAN_ID?: string
+  readonly VITE_LOGODEV_TOKEN?: string
   readonly VITE_SENTRY_DSN?: string
   readonly VITE_SENTRY_ENVIRONMENT?: string
 }

src/components/sidebar/account-logo.tsx

@@ -0,0 +1,60 @@
+import { useState } from "react"
+
+import { Skeleton } from "@/components/ui/skeleton"
+
+import { cn } from "@/lib/utils"
+import { logoDevImageUrl, getInitials } from "@/lib/logo"
+
+const BASE_STYLES = "size-8 shrink-0 rounded-sm"
+
+export function AccountLogo({
+  name,
+  className,
+}: {
+  name?: string | null
+  className?: string
+}): React.ReactElement {
+  const [loadedSrc, setLoadedSrc] = useState<string | null>(null)
+  const [erroredSrc, setErroredSrc] = useState<string | null>(null)
+
+  if (!name) {
+    return <Skeleton className={cn(BASE_STYLES, className)} />
+  }
+
+  const candidate = logoDevImageUrl(name)
+  const src = candidate && candidate !== erroredSrc ? candidate : null
+
+  if (src) {
+    const loaded = loadedSrc === src
+    return (
+      <>
+        {!loaded && <Skeleton className={cn(BASE_STYLES, className)} />}
+        <img
+          src={src}
+          alt=""
+          className={cn(
+            BASE_STYLES,
+            "size-6 object-contain",
+            !loaded && "hidden",
+            className,
+          )}
+          onLoad={() => setLoadedSrc(src)}
+          onError={() => setErroredSrc(src)}
+        />
+      </>
+    )
+  }
+
+  return (
+    <span
+      aria-hidden
+      className={cn(
+        BASE_STYLES,
+        "flex items-center justify-center bg-background-4 text-base font-medium text-white",
+        className,
+      )}
+    >
+      {getInitials(name)}
+    </span>
+  )
+}

src/components/sidebar/combobox.tsx

@@ -14,7 +14,7 @@ import {
   CommandItem,
 } from "@/components/ui/command"
 
-import { Droplet, Check, ChevronsUpDown, Circle } from "lucide-react"
+import { Check, ChevronsUpDown, Circle } from "lucide-react"
 
 import { Environment } from "@/types/environments"
 
@@ -25,6 +25,8 @@ import { useEdition } from "@/hooks/use-edition"
 
 import * as Environments from "@/components/environments"
 
+import { AccountLogo } from "@/components/sidebar/account-logo"
+
 const GLOBAL_ENVIRONMENT = {
   id: "__global",
   code: null,
@@ -35,10 +37,9 @@ function CeCombobox(): React.ReactElement {
   const { data: account } = useGetAccount()
 
   return (
-    <div className="flex h-9 items-center px-1">
-      {/* TODO(cazden) Use company logo */}
-      <Droplet className="mr-2 size-6 rounded-sm bg-content-loud p-1 text-background" />
-      <div className="flex max-w-32 flex-col text-left text-content-loud">
+    <div className="flex h-9 items-start px-1 pt-1">
+      <AccountLogo name={account?.attributes.name} className="mr-2" />
+      <div className="flex max-w-32 flex-col text-left text-sm text-content-loud">
         {account ? (
           <span className="truncate">{account.attributes.name}</span>
         ) : (
@@ -108,14 +109,8 @@ function EeCombobox(): React.ReactElement {
     <>
       <Popover open={openPopover} onOpenChange={setOpenPopover}>
         <PopoverTrigger asChild>
-          <Button
-            variant="ghost"
-            aria-expanded={openPopover}
-            size="default"
-            className="px-1! py-0!"
-          >
-            {/* TODO(cazden) Use company logo */}
-            <Droplet className="mr-2 size-6 rounded-sm bg-content-loud p-1 text-background" />
+          <Button variant="ghost" className="h-auto px-1.5 py-1">
+            <AccountLogo name={account?.attributes.name} className="mr-2" />
 
             <div className="flex max-w-32 flex-col text-left text-content-loud">
               <div className="flex items-center gap-2">

src/keygen/config.ts

@@ -11,6 +11,7 @@ const config = {
     import.meta.env.VITE_KEYGEN_MODE === "multiplayer" &&
     CLOUD_HOSTS.includes(import.meta.env.VITE_KEYGEN_HOST),
   version: import.meta.env.VITE_KEYGEN_VERSION,
+  logoDevToken: import.meta.env.VITE_LOGODEV_TOKEN,
 
   get id(): string {
     return import.meta.env.VITE_KEYGEN_ACCOUNT_ID || activeAccountId

src/lib/logo.ts

@@ -0,0 +1,27 @@
+import config from "@/keygen/config"
+
+const ENDPOINT = "https://img.logo.dev/name"
+
+export function logoDevImageUrl(name: string): string | null {
+  const token = config.logoDevToken
+  if (!token) return null
+
+  const params = new URLSearchParams({
+    token,
+    size: "64",
+    format: "webp",
+    theme: "dark",
+    fallback: "404", // we use our own monogram
+  })
+
+  return `${ENDPOINT}/${encodeURIComponent(name)}?${params}`
+}
+
+export function getInitials(name: string): string {
+  const words = name.trim().split(/\s+/).filter(Boolean)
+
+  if (words.length === 0) return "?"
+  if (words.length === 1) return words[0].slice(0, 1).toUpperCase()
+
+  return (words[0][0] + words[words.length - 1][0]).toUpperCase()
+}