fix(web): use message-square icon for settled icon-less project threads in sidebar v2 (#4279)

Utkarsh Patil committed 3 months ago

Commit 020179c1 parent 571a8b42 files · +27 −5Browse files

Unified · Split

2 files

apps/web/src/components/ProjectFavicon.tsx +25 −5
apps/web/src/components/SidebarV2.tsx +2 −0

apps/web/src/components/ProjectFavicon.tsx+25−5

 import type { EnvironmentId } from "@t3tools/contracts";
 import { isProjectFaviconFallbackUrl } from "@t3tools/shared/projectFavicon";
 import { FolderIcon } from "lucide-react";
+import type { ComponentType } from "react";
 import { useState } from "react";
 import { useAssetUrl } from "../assets/assetUrls";
   environmentId: EnvironmentId;
   cwd: string;
   className?: string | undefined;
+  fallbackIcon?: ComponentType<{ className?: string }>;
 }) {
   const src = useAssetUrl(input.environmentId, {
     _tag: "project-favicon",
     cwd: input.cwd,
   });
+  const FallbackIcon = input.fallbackIcon ?? FolderIcon;
   if (!src || isProjectFaviconFallbackUrl(src)) {
-    return <ProjectFaviconFallback className={input.className} />;
+    return <ProjectFaviconFallback className={input.className} icon={FallbackIcon} />;
   }
-  return <ProjectFaviconImage key={src} src={src} className={input.className} />;
+  return (
+    <ProjectFaviconImage
+      key={src}
+      src={src}
+      className={input.className}
+      fallbackIcon={FallbackIcon}
+    />
+  );
 }
-function ProjectFaviconFallback({ className }: { readonly className?: string | undefined }) {
+function ProjectFaviconFallback({
-  return <FolderIcon className={`size-3.5 shrink-0 text-muted-foreground/50 ${className ?? ""}`} />;
+  className,
+  icon: Icon,
+}: {
+  readonly className?: string | undefined;
+  readonly icon: ComponentType<{ className?: string }>;
+}) {
+  return <Icon className={`size-3.5 shrink-0 text-muted-foreground/50 ${className ?? ""}`} />;
 }
 function ProjectFaviconImage({
   src,
   className,
+  fallbackIcon: FallbackIcon,
 }: {
   readonly src: string;
   readonly className?: string | undefined;
+  readonly fallbackIcon: ComponentType<{ className?: string }>;
 }) {
   const [status, setStatus] = useState<"loading" | "loaded" | "error">(() =>
     loadedProjectFaviconSrcs.has(src) ? "loaded" : "loading",
   return (
     <>
-      {status !== "loaded" ? <ProjectFaviconFallback className={className} /> : null}
+      {status !== "loaded" ? (
+        <ProjectFaviconFallback className={className} icon={FallbackIcon} />
+      ) : null}
       <img
         src={src}
         alt=""

apps/web/src/components/SidebarV2.tsx+2−0

   CircleDashedIcon,
   CloudIcon,
   FolderPlusIcon,
+  MessageSquareIcon,
   PlusIcon,
   SearchIcon,
   SquarePenIcon,
               environmentId={thread.environmentId}
               cwd={props.projectCwd ?? ""}
               className="size-3.5"
+              fallbackIcon={MessageSquareIcon}
             />
           </span>
           {title}