Pass the org title into the Avatar

Author: matt-aitken

apps/webapp/app/components/navigation/SideMenu.tsx

@@ -304,7 +304,7 @@ function ProjectSelector({
         )}
       >
         <span className="flex items-center gap-1.5 overflow-hidden">
-          <Avatar avatar={organization.avatar} size={1.25} />
+          <Avatar avatar={organization.avatar} size={1.25} orgName={organization.title} />
           <SelectorDivider />
           <span className="truncate text-2sm font-normal text-text-bright">
             {project.name ?? "Select a project"}
@@ -319,7 +319,7 @@ function ProjectSelector({
         <div className="flex flex-col gap-2 bg-charcoal-750 p-2">
           <div className="flex items-center gap-2.5">
             <div className="box-content size-10 overflow-clip rounded-sm bg-charcoal-800">
-              <Avatar avatar={organization.avatar} size={2.5} includePadding />
+              <Avatar avatar={organization.avatar} size={2.5} orgName={organization.title} />
             </div>
             <div className="space-y-0.5">
               <Paragraph variant="small/bright">{organization.title}</Paragraph>
@@ -483,7 +483,7 @@ function SwitchOrganizations({
                 key={org.id}
                 to={organizationPath(org)}
                 title={org.title}
-                icon={<Avatar size={1} avatar={org.avatar} />}
+                icon={<Avatar size={1} avatar={org.avatar} orgName={org.title} />}
                 leadingIconClassName="text-text-dimmed"
                 isSelected={org.id === organization.id}
               />

apps/webapp/app/components/primitives/Avatar.tsx

@@ -8,7 +8,6 @@ import {
 } from "@heroicons/react/20/solid";
 import { type Prisma } from "@trigger.dev/database";
 import { z } from "zod";
-import { useOrganization } from "~/hooks/useOrganizations";
 import { logger } from "~/services/logger.server";
 import { cn } from "~/utils/cn";
 
@@ -54,17 +53,26 @@ export function Avatar({
   avatar,
   size,
   includePadding,
+  orgName,
 }: {
   avatar: Avatar;
   /** Size in rems of the icon */
   size: number;
   includePadding?: boolean;
+  orgName: string;
 }) {
   switch (avatar.type) {
     case "icon":
       return <AvatarIcon avatar={avatar} size={size} includePadding={includePadding} />;
     case "letters":
-      return <AvatarLetters avatar={avatar} size={size} includePadding={includePadding} />;
+      return (
+        <AvatarLetters
+          avatar={avatar}
+          size={size}
+          includePadding={includePadding}
+          orgName={orgName}
+        />
+      );
     case "image":
       return <AvatarImage avatar={avatar} size={size} />;
   }
@@ -110,13 +118,14 @@ function AvatarLetters({
   avatar,
   size,
   includePadding,
+  orgName,
 }: {
   avatar: LettersAvatar;
   size: number;
   includePadding?: boolean;
+  orgName: string;
 }) {
-  const organization = useOrganization();
-  const letters = organization.title.slice(0, 2);
+  const letters = orgName.slice(0, 2);
 
   const style = {
     backgroundColor: avatar.hex,

apps/webapp/app/routes/_app.orgs.$organizationSlug.settings._index/route.tsx

@@ -374,7 +374,7 @@ export default function Page() {
   );
 }
 
-function LogoForm({ organization }: { organization: { avatar: Avatar } }) {
+function LogoForm({ organization }: { organization: { avatar: Avatar; title: string } }) {
   const navigation = useNavigation();
 
   const isSubmitting =
@@ -392,7 +392,7 @@ function LogoForm({ organization }: { organization: { avatar: Avatar } }) {
         <Label>Icon</Label>
         <div className="flex w-full items-end justify-between gap-2">
           <div className="grid place-items-center overflow-hidden rounded-sm border border-charcoal-750 bg-background-bright">
-            <Avatar avatar={avatar} size={5} includePadding />
+            <Avatar avatar={avatar} size={5} includePadding orgName={organization.title} />
           </div>
           {/* Letters */}
           <Form method="post">
@@ -418,6 +418,7 @@ function LogoForm({ organization }: { organization: { avatar: Avatar } }) {
                 }}
                 size={2.5}
                 includePadding
+                orgName={organization.title}
               />
             </button>
           </Form>
@@ -449,6 +450,7 @@ function LogoForm({ organization }: { organization: { avatar: Avatar } }) {
                   }}
                   size={2.5}
                   includePadding
+                  orgName={organization.title}
                 />
               </button>
             </Form>

apps/webapp/app/routes/storybook.avatar/route.tsx

@@ -20,7 +20,7 @@ export default function Story() {
         <h2 className="mb-4 text-lg font-semibold text-white">Size 8</h2>
         <div className="flex flex-wrap gap-2">
           {avatars.map((avatar, index) => (
-            <Avatar key={`small-${index}`} avatar={avatar} size={2} />
+            <Avatar key={`small-${index}`} avatar={avatar} size={2} orgName={`Org ${index}`} />
           ))}
         </div>
       </div>
@@ -30,7 +30,7 @@ export default function Story() {
         <h2 className="mb-4 text-lg font-semibold text-white">Size 12</h2>
         <div className="flex flex-wrap gap-4">
           {avatars.map((avatar, index) => (
-            <Avatar key={`large-${index}`} avatar={avatar} size={3} />
+            <Avatar key={`large-${index}`} avatar={avatar} size={3} orgName={`Org ${index}`} />
           ))}
         </div>
       </div>