Allows you to add your company url to generate a logo from the settings page

Author: samejr

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

@@ -1,8 +1,10 @@
 import {
+  BoltIcon,
   BuildingOffice2Icon,
   CodeBracketSquareIcon,
   FaceSmileIcon,
   FireIcon,
+  GlobeAltIcon,
   RocketLaunchIcon,
   StarIcon,
 } from "@heroicons/react/20/solid";
@@ -25,7 +27,8 @@ export const AvatarData = z.discriminatedUnion("type", [
   }),
   z.object({
     type: z.literal(AvatarType.enum.image),
-    url: z.string().url(),
+    url: z.string(),
+    lastIconHex: z.string().optional(),
   }),
 ]);
 
@@ -85,6 +88,7 @@ export const avatarIcons: Record<string, React.ComponentType<React.SVGProps<SVGS
   "hero:fire": FireIcon,
   "hero:star": StarIcon,
   "hero:face-smile": FaceSmileIcon,
+  "hero:bolt": BoltIcon,
 };
 
 export const defaultAvatarColors = [
@@ -179,9 +183,21 @@ function AvatarIcon({
 }
 
 function AvatarImage({ avatar, size }: { avatar: ImageAvatar; size: number }) {
+  if (!avatar.url) {
+    return (
+      <span className="grid shrink-0 place-items-center" style={styleFromSize(size)}>
+        <GlobeAltIcon className="size-[90%] text-text-dimmed" />
+      </span>
+    );
+  }
+
   return (
-    <span className="grid place-items-center" style={styleFromSize(size)}>
-      <img src={avatar.url} alt="Organization avatar" className="size-6" />
+    <span className="grid shrink-0 place-items-center" style={styleFromSize(size)}>
+      <img
+        src={avatar.url}
+        alt="Organization avatar"
+        className="size-full rounded-[10%] object-contain"
+      />
     </span>
   );
 }

apps/webapp/app/hooks/useFaviconUrl.ts

@@ -0,0 +1,31 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+import { extractDomain, faviconUrl } from "~/utils/favicon";
+
+export function useFaviconUrl(urlInput: string, size: number = 64) {
+  const [url, setUrl] = useState<string | null>(null);
+  const timeoutRef = useRef<ReturnType<typeof setTimeout>>();
+
+  const update = useCallback(
+    (value: string) => {
+      if (timeoutRef.current) clearTimeout(timeoutRef.current);
+      timeoutRef.current = setTimeout(() => {
+        const domain = extractDomain(value);
+        if (domain && domain.includes(".")) {
+          setUrl(faviconUrl(domain, size));
+        } else {
+          setUrl(null);
+        }
+      }, 400);
+    },
+    [size]
+  );
+
+  useEffect(() => {
+    update(urlInput);
+    return () => {
+      if (timeoutRef.current) clearTimeout(timeoutRef.current);
+    };
+  }, [urlInput, update]);
+
+  return url;
+}