fix: Missing locations for initial prop (#10779)

app/actions/definitions/documents.tsx

@@ -110,7 +110,11 @@ export const openDocument = createActionWithChildren({
         id: item.url,
         name: item.title,
         icon: item.icon ? (
-          <Icon value={item.icon} color={item.color ?? undefined} />
+          <Icon
+            value={item.icon}
+            initial={item.title}
+            color={item.color ?? undefined}
+          />
         ) : (
           <DocumentIcon />
         ),

app/components/Avatar/Avatar.tsx

@@ -59,6 +59,8 @@ function Avatar(props: Props) {
   } = props;
   const src = props.src || model?.avatarUrl;
   const [error, handleError] = useBoolean(false);
+  const initial =
+    model?.initial || (model?.name ? model.name[0] : "").toUpperCase();
 
   const content = (
     <Relative
@@ -71,7 +73,7 @@ function Avatar(props: Props) {
         <Image onError={handleError} src={src} {...rest} />
       ) : model ? (
         <Initials color={model.color} {...rest}>
-          {model.initial?.toUpperCase()}
+          {initial}
         </Initials>
       ) : (
         <Initials {...rest} />

app/components/Collection/CollectionForm.tsx

@@ -67,7 +67,13 @@ export const CollectionForm = observer(function CollectionForm_({
   const [hasOpenedIconPicker, setHasOpenedIconPicker] = useBoolean(false);
 
   const iconColor = useIconColor(collection);
-  const fallbackIcon = <Icon value="collection" color={iconColor} />;
+  const fallbackIcon = (
+    <Icon
+      value="collection"
+      initial={collection?.initial ?? "?"}
+      color={iconColor}
+    />
+  );
 
   const {
     register,

app/components/CommandBar/useRecentDocumentActions.tsx

@@ -20,7 +20,11 @@ const useRecentDocumentActions = (count = 6) => {
             analyticsName: "Recently viewed document",
             section: RecentSection,
             icon: item.icon ? (
-              <Icon value={item.icon} color={item.color ?? undefined} />
+              <Icon
+                value={item.icon}
+                initial={item.initial}
+                color={item.color ?? undefined}
+              />
             ) : (
               <DocumentIcon />
             ),

app/components/CommandBar/useTemplatesAction.tsx

@@ -27,7 +27,11 @@ const useTemplatesAction = () => {
             ? TeamSection
             : ActiveCollectionSection,
           icon: template.icon ? (
-            <Icon value={template.icon} color={template.color ?? undefined} />
+            <Icon
+              value={template.icon}
+              initial={template.initial}
+              color={template.color ?? undefined}
+            />
           ) : (
             <NewDocumentIcon />
           ),

app/components/DocumentCard.tsx

@@ -187,12 +187,12 @@ function DocumentCard(props: Props) {
 
 const DocumentSquircle = ({
   icon,
-  color,
   initial,
+  color,
 }: {
   icon: string;
+  initial: string;
   color?: string;
-  initial?: string;
 }) => {
   const theme = useTheme();
   const iconType = determineIconType(icon)!;

app/components/DocumentExplorer.tsx

@@ -268,7 +268,9 @@ function DocumentExplorer({ onSubmit, onSelect, items, defaultValue }: Props) {
         title = doc?.title ?? node.title;
 
         if (icon) {
-          renderedIcon = <Icon value={icon} color={color} />;
+          renderedIcon = (
+            <Icon value={icon} initial={node.title} color={color} />
+          );
         } else if (doc?.isStarred) {
           renderedIcon = <StarredIcon color={theme.yellow} />;
         } else {

app/components/IconPicker/index.tsx

@@ -38,7 +38,7 @@ type Props = {
   icon: string | null;
   color: string;
   size?: number;
-  initial?: string;
+  initial: string;
   className?: string;
   popoverPosition: "bottom-start" | "right";
   allowDelete?: boolean;

app/components/Sidebar/components/SharedCollectionLink.tsx

@@ -28,7 +28,11 @@ function CollectionLink({ node, shareId, hideRootNode }: Props) {
               title: node.title,
             },
           }}
-          icon={icon && <Icon value={icon} color={node.color} />}
+          icon={
+            icon && (
+              <Icon value={icon} initial={node.title} color={node.color} />
+            )
+          }
           label={node.title || t("Untitled")}
           depth={0}
           exact={false}

app/components/Sidebar/hooks/useDragAndDrop.tsx

@@ -176,6 +176,7 @@ export function useDragDocument(
 ) {
   const icon = document?.icon || node.icon || node.emoji;
   const color = document?.color || node.color;
+  const initial = document?.initial || node.title;
 
   const [{ isDragging }, draggableRef, preview] = useDrag<
     DragObject,
@@ -187,7 +188,9 @@ export function useDragDocument(
       ({
         ...node,
         depth,
-        icon: icon ? <Icon value={icon} color={color} /> : undefined,
+        icon: icon ? (
+          <Icon initial={initial} value={icon} color={color} />
+        ) : undefined,
         collectionId: document?.collectionId || "",
       }) as DragObject,
     canDrag: () => !!document?.isActive && !isEditing,

app/editor/components/EmojiMenu.tsx

@@ -15,7 +15,7 @@ type Emoji = {
   title: string;
   emoji: string;
   description: string;
-  attrs: { markup: string; "data-name": string };
+  attrs: { "data-name": string };
 };
 
 type Props = Omit<
@@ -42,7 +42,7 @@ const EmojiMenu = (props: Props) => {
           // @ts-expect-error emojiMartToGemoji key
           const id = emojiMartToGemoji[item.id] || item.id;
           const type = determineIconType(id);
-          const shortcode = type === IconType.Custom ? id : snakeCase(id);
+          const value = type === IconType.Custom ? id : snakeCase(id);
           const emoji = item.value;
 
           return {
@@ -53,7 +53,7 @@ const EmojiMenu = (props: Props) => {
                 ? item.name
                 : capitalize(item.name.toLowerCase()),
             emoji,
-            attrs: { markup: shortcode, "data-name": shortcode },
+            attrs: { "data-name": value },
           };
         })
         .slice(0, 15),

app/editor/components/LinkEditor.tsx

@@ -224,7 +224,11 @@ const LinkEditor: React.FC<Props> = ({ mark, dictionary, view }) => {
                   title={doc.title}
                   icon={
                     doc.icon ? (
-                      <Icon value={doc.icon} color={doc.color ?? undefined} />
+                      <Icon
+                        value={doc.icon}
+                        initial={doc.initial}
+                        color={doc.color ?? undefined}
+                      />
                     ) : (
                       <DocumentIcon />
                     )

app/editor/components/MentionMenu.tsx

@@ -143,7 +143,11 @@ function MentionMenu({ search, isActive, ...rest }: Props) {
                 ({
                   name: "mention",
                   icon: doc.icon ? (
-                    <Icon value={doc.icon} color={doc.color ?? undefined} />
+                    <Icon
+                      value={doc.icon}
+                      initial={doc.initial}
+                      color={doc.color ?? undefined}
+                    />
                   ) : (
                     <DocumentIcon />
                   ),
@@ -178,6 +182,7 @@ function MentionMenu({ search, isActive, ...rest }: Props) {
                   icon: collection.icon ? (
                     <Icon
                       value={collection.icon}
+                      initial={collection.initial}
                       color={collection.color ?? undefined}
                     />
                   ) : (

app/hooks/useTemplateMenuActions.tsx

@@ -47,7 +47,11 @@ export function useTemplateMenuActions({
         ),
         section: DocumentsSection,
         icon: template.icon ? (
-          <Icon value={template.icon} color={template.color ?? undefined} />
+          <Icon
+            value={template.icon}
+            initial={template.initial}
+            color={template.color ?? undefined}
+          />
         ) : (
           <DocumentIcon />
         ),

app/scenes/Document/components/DocumentTitle.tsx

@@ -233,9 +233,9 @@ const DocumentTitle = React.forwardRef(function _DocumentTitle(
   );
 
   const dir = ref.current?.getComputedDirection();
-  const initial = title.slice(0, 1).toUpperCase();
+  const initial = title.charAt(0).toUpperCase();
   const fallbackIcon = icon ? (
-    <Icon value={icon} color={color} size={40} />
+    <Icon value={icon} initial={initial} color={color} size={40} />
   ) : null;
 
   return (

app/scenes/Document/components/Header.tsx

@@ -173,7 +173,11 @@ function DocumentHeader({
         title={
           <Flex gap={4}>
             {document.icon && (
-              <Icon value={document.icon} color={document.color ?? undefined} />
+              <Icon
+                value={document.icon}
+                initial={document.initial}
+                color={document.color ?? undefined}
+              />
             )}
             {document.title}
           </Flex>
@@ -226,7 +230,11 @@ function DocumentHeader({
         title={
           <Flex gap={4} align="center">
             {document.icon && (
-              <Icon value={document.icon} color={document.color ?? undefined} />
+              <Icon
+                value={document.icon}
+                initial={document.initial}
+                color={document.color ?? undefined}
+              />
             )}
             {document.title}
             {document.isArchived && <Badge>{t("Archived")}</Badge>}

app/scenes/Document/components/PublicBreadcrumb.tsx

@@ -57,7 +57,7 @@ const PublicBreadcrumb: React.FC<Props> = ({
             name: item.title,
             section: ActiveDocumentSection,
             icon: item.icon ? (
-              <Icon value={item.icon} color={item.color} />
+              <Icon value={item.icon} initial={item.title} color={item.color} />
             ) : undefined,
             to: sharedModelPath(shareId, item.url),
           })

shared/components/Icon.tsx

@@ -18,7 +18,7 @@ export type Props = {
   /** The size of the icon */
   size?: number;
   /** The initial to display if the icon is a letter icon */
-  initial?: string;
+  initial: string;
   /** Optional additional class name */
   className?: string;
   /**
@@ -103,7 +103,7 @@ const SVGIcon = observer(
 
     return (
       <Component color={color} size={size} className={className}>
-        {initial}
+        {initial?.charAt(0).toUpperCase()}
       </Component>
     );
   }

shared/editor/components/Mentions.tsx

@@ -115,7 +115,12 @@ export const MentionDocument = observer(function MentionDocument_(
       to={doc?.path ?? `/doc/${node.attrs.modelId}`}
     >
       {doc?.icon ? (
-        <Icon value={doc?.icon} color={doc?.color} size={18} />
+        <Icon
+          value={doc.icon}
+          initial={doc.initial}
+          color={doc.color}
+          size={18}
+        />
       ) : (
         <DocumentIcon size={18} />
       )}
@@ -148,7 +153,12 @@ export const MentionCollection = observer(function MentionCollection_(
       to={collection?.path ?? `/collection/${node.attrs.modelId}`}
     >
       {collection?.icon ? (
-        <Icon value={collection?.icon} color={collection?.color} size={18} />
+        <Icon
+          value={collection.icon}
+          initial={collection.initial}
+          color={collection.color}
+          size={18}
+        />
       ) : (
         <CollectionIcon size={18} />
       )}