fix: More locations where LetterIcon is incorrect (#9734)

Related #9720

app/components/Collection/CollectionForm.tsx

@@ -125,6 +125,8 @@ export const CollectionForm = observer(function CollectionForm_({
     [setFocus, setValue, values.icon]
   );
 
+  const initial = values.name.charAt(0).toUpperCase();
+
   return (
     <form onSubmit={formHandleSubmit(handleSubmit)}>
       <Text as="p">
@@ -145,7 +147,7 @@ export const CollectionForm = observer(function CollectionForm_({
               <StyledIconPicker
                 icon={values.icon}
                 color={values.color ?? iconColor}
-                initial={values.name[0]}
+                initial={initial}
                 popoverPosition="right"
                 onOpen={setHasOpenedIconPicker}
                 onChange={handleIconChange}

app/components/DocumentCard.tsx

@@ -123,6 +123,7 @@ function DocumentCard(props: Props) {
               <DocumentSquircle
                 icon={document.icon}
                 color={document.color ?? undefined}
+                initial={document.initial}
               />
             ) : (
               <Squircle
@@ -194,17 +195,22 @@ const ReadingTime = ({ document }: { document: Document }) => {
 const DocumentSquircle = ({
   icon,
   color,
+  initial,
 }: {
   icon: string;
   color?: string;
+  initial?: string;
 }) => {
   const theme = useTheme();
   const iconType = determineIconType(icon)!;
   const squircleColor = iconType === IconType.SVG ? color : theme.slateLight;
+  const style = {
+    "--background": squircleColor,
+  } as React.CSSProperties;
 
   return (
-    <Squircle color={squircleColor}>
-      <Icon value={icon} color={theme.white} forceColor />
+    <Squircle color={squircleColor} style={style}>
+      <Icon value={icon} color={theme.white} initial={initial} forceColor />
     </Squircle>
   );
 };

app/components/DocumentListItem.tsx

@@ -107,7 +107,11 @@ function DocumentListItem(
         <Heading dir={document.dir}>
           {document.icon && (
             <>
-              <Icon value={document.icon} color={document.color ?? undefined} />
+              <Icon
+                value={document.icon}
+                color={document.color ?? undefined}
+                initial={document.initial}
+              />
               &nbsp;
             </>
           )}

app/components/Sidebar/components/DocumentLink.tsx

@@ -182,7 +182,7 @@ function InnerDocumentLink(
   const can = policies.abilities(node.id);
   const icon = document?.icon || node.icon || node.emoji;
   const color = document?.color || node.color;
-  const initial = (document?.title || node.title).slice(0, 1).toUpperCase();
+  const initial = document?.initial || node.title.charAt(0).toUpperCase();
 
   const iconElement = React.useMemo(
     () =>

app/models/Collection.ts

@@ -167,7 +167,7 @@ export default class Collection extends ParanoidModel {
   /** The initial letter of the collection name as a string. */
   @computed
   get initial() {
-    return (this.name ? this.name[0] : "?").toUpperCase();
+    return (this.name?.charAt(0) ?? "?").toUpperCase();
   }
 
   @computed

app/models/Document.ts

@@ -257,6 +257,14 @@ export default class Document extends ArchivableModel implements Searchable {
     return isRTL(this.title);
   }
 
+  /**
+   * Returns the initial character of the document title in uppercase
+   */
+  @computed
+  get initial(): string {
+    return (this.title?.charAt(0) ?? "?").toUpperCase();
+  }
+
   @computed
   get path(): string {
     const prefix =

app/scenes/Collection/index.tsx

@@ -197,7 +197,7 @@ const CollectionScene = observer(function _CollectionScene() {
                   <IconPicker
                     icon={collection.icon ?? "collection"}
                     color={collection.color ?? colorPalette[0]}
-                    initial={collection.name[0]}
+                    initial={collection.initial}
                     size={40}
                     popoverPosition="bottom-start"
                     onChange={handleIconChange}

shared/components/LetterIcon.tsx

@@ -29,7 +29,7 @@ const LetterIconWrapper = styled.div<{ $size: number }>`
 
   font-weight: 700;
   font-size: ${({ $size }) => $size / 2}px;
-  color: ${s("background")};
+  color: var(--background, ${s("background")});
 `;
 
 export default LetterIcon;

shared/components/Squircle.tsx

@@ -9,6 +9,7 @@ type Props = {
   color?: string;
   children?: React.ReactNode;
   className?: string;
+  style?: React.CSSProperties;
 };
 
 /**
@@ -21,8 +22,15 @@ const Squircle: React.FC<Props> = ({
   size = 28,
   children,
   className,
+  style,
 }: Props) => (
-  <Wrapper size={size} align="center" justify="center" className={className}>
+  <Wrapper
+    size={size}
+    align="center"
+    justify="center"
+    className={className}
+    style={style}
+  >
     <svg width={size} height={size} fill={color} viewBox="0 0 28 28">
       <path d="M0 11.1776C0 1.97285 1.97285 0 11.1776 0H16.8224C26.0272 0 28 1.97285 28 11.1776V16.8224C28 26.0272 26.0272 28 16.8224 28H11.1776C1.97285 28 0 26.0272 0 16.8224V11.1776Z" />
     </svg>