fix: use Intl.Segmenter for avatar first character extraction

Handles unicode characters made up of multiple code points correctly.

Author: Adebesin-Cell

app/components/BlueskyComment.vue

@@ -38,6 +38,11 @@ function getHostname(uri: string): string {
     return uri
   }
 }
+
+function firstChar(str: string): string {
+  const segmenter = new Intl.Segmenter({ granularity: 'grapheme' })
+  return Array.from(segmenter.segment(str))[0]?.segment ?? ''
+}
 </script>
 
 <template>
@@ -65,7 +70,7 @@ function getHostname(uri: string): string {
           depth === 0 ? 'w-10 h-10' : 'w-8 h-8 text-sm',
         ]"
       >
-        {{ (comment.author.displayName || comment.author.handle).charAt(0).toUpperCase() }}
+        {{ firstChar(comment.author.displayName || comment.author.handle).toUpperCase() }}
       </div>
     </a>