Optimize sidebar sorting and favicon reuse

- Avoid cloning thread arrays before sorting - Cache loaded project favicons across sidebar renders - Update sidebar sort labels for clearer wording

Julius Marminge committed 7 months ago

Commit d9ef0ca1 parent eac49092 files · +15 −10Browse files

Unified · Split

2 files

apps/web/src/components/Sidebar.logic.ts +1 −1
apps/web/src/components/Sidebar.tsx +14 −9

apps/web/src/components/Sidebar.logic.ts+1−1

@@ -224,7 +224,7 @@ export function getThreadSortTimestamp( · 223 unmodified lines
224	export function sortThreadsForSidebar<	224	export function sortThreadsForSidebar<
225	T extends Pick<Thread, "id" \| "createdAt" \| "updatedAt" \| "messages">,	225	T extends Pick<Thread, "id" \| "createdAt" \| "updatedAt" \| "messages">,
226	>(threads: readonly T[], sortOrder: SidebarThreadSortOrder): T[] {	226	>(threads: readonly T[], sortOrder: SidebarThreadSortOrder): T[] {
227	return [...threads].toSorted((left, right) => {	227	return threads.toSorted((left, right) => {
228	const byTimestamp =	228	const byTimestamp =
229	getThreadSortTimestamp(right, sortOrder) - getThreadSortTimestamp(left, sortOrder);	229	getThreadSortTimestamp(right, sortOrder) - getThreadSortTimestamp(left, sortOrder);
230	if (byTimestamp !== 0) return byTimestamp;	230	if (byTimestamp !== 0) return byTimestamp;

apps/web/src/components/Sidebar.tsx+14−9

 const THREAD_PREVIEW_LIMIT = 6;
 const SIDEBAR_SORT_LABELS: Record<SidebarProjectSortOrder, string> = {
   updated_at: "Last user message",
-  created_at: "Created",
+  created_at: "Created at",
   manual: "Manual",
 };
 const SIDEBAR_THREAD_SORT_LABELS: Record<SidebarThreadSortOrder, string> = {
   updated_at: "Last user message",
-  created_at: "Created",
+  created_at: "Created at",
 };
 const SIDEBAR_LIST_ANIMATION_OPTIONS = {
   duration: 180,
   easing: "ease-out",
 } as const;
+const loadedProjectFaviconSrcs = new Set<string>();
 function formatRelativeTime(iso: string): string {
   const diff = Date.now() - new Date(iso).getTime();
 const serverHttpOrigin = getServerHttpOrigin();
 function ProjectFavicon({ cwd }: { cwd: string }) {
-  const [status, setStatus] = useState<"loading" | "loaded" | "error">("loading");
   const src = `${serverHttpOrigin}/api/project-favicon?cwd=${encodeURIComponent(cwd)}`;
+  const [status, setStatus] = useState<"loading" | "loaded" | "error">(() =>
+    loadedProjectFaviconSrcs.has(src) ? "loaded" : "loading",
+  );
   if (status === "error") {
     return <FolderIcon className="size-3.5 shrink-0 text-muted-foreground/50" />;
       src={src}
       alt=""
       className={`size-3.5 shrink-0 rounded-sm object-contain ${status === "loading" ? "hidden" : ""}`}
-      onLoad={() => setStatus("loaded")}
+      onLoad={() => {
+        loadedProjectFaviconSrcs.add(src);
+        setStatus("loaded");
+      }}
       onError={() => setStatus("error")}
     />
   );
       </Tooltip>
       <MenuPopup align="end" side="bottom" className="min-w-44">
         <MenuGroup>
-          <div className="px-2 py-1 text-[11px] font-medium text-muted-foreground">
+          <div className="px-2 py-1 sm:text-xs font-medium text-muted-foreground">
             Sort projects
           </div>
           <MenuRadioGroup
           >
             {(Object.entries(SIDEBAR_SORT_LABELS) as Array<[SidebarProjectSortOrder, string]>).map(
               ([value, label]) => (
-                <MenuRadioItem key={value} value={value} className="min-h-7 py-1 text-xs">
+                <MenuRadioItem key={value} value={value} className="min-h-7 py-1 sm:text-xs">
                   {label}
                 </MenuRadioItem>
               ),
           </MenuRadioGroup>
         </MenuGroup>
         <MenuGroup>
-          <div className="px-2 pt-2 pb-1 text-[11px] font-medium text-muted-foreground">
+          <div className="px-2 pt-2 pb-1 sm:text-xs font-medium text-muted-foreground">
             Sort threads
           </div>
           <MenuRadioGroup
             {(
               Object.entries(SIDEBAR_THREAD_SORT_LABELS) as Array<[SidebarThreadSortOrder, string]>
             ).map(([value, label]) => (
-              <MenuRadioItem key={value} value={value} className="min-h-7 py-1 text-xs">
+              <MenuRadioItem key={value} value={value} className="min-h-7 py-1 sm:text-xs">
                 {label}
               </MenuRadioItem>
             ))}