generate text avatars

frontend/package.json

@@ -14,6 +14,7 @@
     "@ionic/react-router": "^7.0.0",
     "@types/react-router": "^5.1.20",
     "@types/react-router-dom": "^5.3.3",
+    "consistent-color-generation": "^0.4.0",
     "fuse.js": "^6.6.2",
     "ionicons": "^7.1.2",
     "preact": "^10.17.0",

frontend/public/version.txt

@@ -1 +1 @@
-2.2.1
+2.3.0

frontend/src/components/BotItem.tsx

@@ -8,6 +8,7 @@ import {
 } from "@ionic/react";
 import { languageOutline, openOutline } from "ionicons/icons";
 
+import TextAvatar from "./TextAvatar";
 import { Bot, recently } from "../store";
 import { getText as _ } from "../i18n";
 import "./BotItem.css";
@@ -52,9 +53,7 @@ export default function BotItem({
           href={bot.url}
         >
           <IonChip>
-            <IonAvatar>
-              <img src="icon.png" />
-            </IonAvatar>
+            <TextAvatar text={bot.addr} />
             <IonLabel>{bot.addr} </IonLabel>
             <IonIcon icon={openOutline} />
           </IonChip>

frontend/src/components/TextAvatar.tsx

@@ -0,0 +1,21 @@
+import { IonAvatar } from "@ionic/react";
+// @ts-ignore
+import getRGB from "consistent-color-generation";
+
+export default function TextAvatar({ text }: { text: string }) {
+  const backgroundColor = getRGB(text).toString();
+  const textColor = "#ffffff";
+  const fontFamily = "Arial";
+  const fontSize = 50;
+  const svg = btoa(
+    `<svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' viewBox='0 0 100 100' width='100' height='100'><rect width='100' height='100' x='0' y='0' fill='${backgroundColor}'></rect><text x='50%' y='50%' alignment-baseline='central' text-anchor='middle' font-family='${fontFamily}' font-size='${fontSize}' fill='${textColor}' dominant-baseline='middle'>${text.charAt(
+      0,
+    )}</text></svg>`,
+  );
+  const url = `data:image/svg+xml;base64,${svg}`;
+  return (
+    <IonAvatar>
+      <img src={url} />
+    </IonAvatar>
+  );
+}