improvement(org): collapse repeated recents and give every chip a mark

(cherry picked from commit 33fd602)

Author: waleedlatif1

apps/sim/hooks/queries/search-history.ts

@@ -45,27 +45,31 @@ export function useClearSearchHistory(organizationId: string, userId: string) {
   })
 }
 
-/** Takes the source off the list at once and restores it if the server refuses. */
+/** Takes the sources off the list at once and restores them if the server refuses. */
 export function useRemoveSearchHistorySource(organizationId: string, userId: string | undefined) {
   const queryClient = useQueryClient()
   const queryKey = searchHistoryKeys.list(organizationId, userId)
   return useMutation({
-    mutationFn: (url: string) =>
-      requestJson(removeSearchHistorySourceContract, {
-        params: { id: organizationId },
-        body: { url },
-      }),
-    onMutate: async (url) => {
+    mutationFn: (urls: readonly string[]) =>
+      Promise.all(
+        urls.map((url) =>
+          requestJson(removeSearchHistorySourceContract, {
+            params: { id: organizationId },
+            body: { url },
+          })
+        )
+      ),
+    onMutate: async (urls) => {
       await queryClient.cancelQueries({ queryKey })
       const previous = queryClient.getQueryData<SearchHistoryResponse>(queryKey)
       if (previous)
         queryClient.setQueryData<SearchHistoryResponse>(queryKey, {
           ...previous,
-          sources: previous.sources.filter((source) => source.url !== url),
+          sources: previous.sources.filter((source) => !urls.includes(source.url)),
         })
       return { previous }
     },
-    onError: (_error, _url, context) => {
+    onError: (_error, _urls, context) => {
       if (context?.previous) queryClient.setQueryData(queryKey, context.previous)
     },
     onSettled: () => queryClient.invalidateQueries({ queryKey }),

apps/sim/platform/design-system/components/icon/provider-marks.ts

@@ -27,9 +27,12 @@ const ASSET_MARKS = new Set([
   'zoom',
 ])
 
+/** What a provider without its own mark gets. */
+export const FALLBACK_PROVIDER_MARK: IconName = 'I070'
+
 export function providerMark(providerId: string): IconName | { href: string } {
   const shared = SHARED_MARKS.get(providerId)
   if (shared) return shared
-  if (!ASSET_MARKS.has(providerId.replaceAll('-', '_'))) return 'I070'
+  if (!ASSET_MARKS.has(providerId.replaceAll('-', '_'))) return FALLBACK_PROVIDER_MARK
   return { href: publicAssetPath(`/provider-marks/${providerId.replaceAll('_', '-')}.svg#mark`) }
 }

apps/sim/platform/design-system/components/recent-items/recent-items.module.css

@@ -19,4 +19,5 @@
 }
 .recentLane > li {
   flex: none;
+  max-inline-size: var(--container-216);
 }

apps/sim/platform/design-system/components/recent-items/recent-items.tsx

@@ -1,3 +1,4 @@
+import type { ReactNode } from 'react'
 import Link from 'next/link'
 import type { IconName } from '@/platform/design-system/catalog/icon-geometry'
 import { IconButton } from '@/platform/design-system/components/button/button'
@@ -9,6 +10,8 @@ export interface RecentItem {
   id: string
   label: string
   icon?: IconName
+  /** A mark the caller draws, for one no icon name can express. */
+  leading?: ReactNode
   /** An external link opens independently of the current workspace. */
   href?: string
 }
@@ -34,7 +37,8 @@ export function RecentItems({ label, title = label, items, onSelect, onRemove }:
               <ControlRow
                 label={item.label}
                 icon={item.icon}
-                actionSide={item.icon ? 'start' : 'end'}
+                leading={item.leading}
+                actionSide={item.icon || item.leading ? 'start' : 'end'}
                 render={
                   item.href ? (
                     <Link href={item.href} target='_blank' rel='noopener noreferrer' />

apps/sim/platform/embedded/app/(shell)/_components/site-mark/site-mark.module.css

@@ -0,0 +1,16 @@
+.mark {
+  display: grid;
+  flex: none;
+  place-items: center;
+  inline-size: var(--spacing-16);
+  block-size: var(--spacing-16);
+}
+.mark > * {
+  grid-area: 1 / 1;
+}
+.favicon {
+  flex: none;
+  inline-size: var(--spacing-16);
+  block-size: var(--spacing-16);
+  border-radius: var(--radius-2);
+}

apps/sim/platform/embedded/app/(shell)/_components/site-mark/site-mark.tsx

@@ -0,0 +1,26 @@
+'use client'
+
+import { useState } from 'react'
+import { Favicon } from '@/components/favicon'
+import { Icon } from '@/platform/design-system/components/icon/icon'
+import styles from '@/platform/embedded/app/(shell)/_components/site-mark/site-mark.module.css'
+
+interface SiteMarkProps {
+  host: string | null
+}
+
+/** A site's favicon, held by the globe until it paints and replaced by it when there is none, so a row never shows an empty slot. */
+export function SiteMark({ host }: SiteMarkProps) {
+  const [loaded, setLoaded] = useState(false)
+  return (
+    <span className={styles.mark}>
+      {!loaded && <Icon name='I041' />}
+      <Favicon
+        host={host}
+        fallback={null}
+        className={styles.favicon}
+        onLoad={() => setLoaded(true)}
+      />
+    </span>
+  )
+}

apps/sim/platform/embedded/app/(shell)/home/_components/home-dashboard/home-dashboard.tsx

@@ -5,7 +5,6 @@ import type { ChatRequestMode } from '@/app/workspace/[workspaceId]/home/types'
 import { FailureNotice } from '@/platform/design-system/components'
 import { Icon } from '@/platform/design-system/components/icon/icon'
 import { ActionMenu } from '@/platform/design-system/components/menu/action-menu'
-import { RecentItems } from '@/platform/design-system/components/recent-items/recent-items'
 import { Surface } from '@/platform/design-system/components/surface/surface'
 import { HomeActivityChart } from '@/platform/embedded/app/(shell)/home/_components/activity-chart/activity-chart'
 import {
@@ -16,6 +15,7 @@ import { CalendarDay } from '@/platform/embedded/app/(shell)/home/_components/ca
 import { ConnectedWidget } from '@/platform/embedded/app/(shell)/home/_components/connected-widget/connected-widget'
 import { GetStarted } from '@/platform/embedded/app/(shell)/home/_components/get-started/get-started'
 import styles from '@/platform/embedded/app/(shell)/home/_components/home-dashboard/home-dashboard.module.css'
+import { HomeRecents } from '@/platform/embedded/app/(shell)/home/_components/home-recents/home-recents'
 import { HomeWorkspaces } from '@/platform/embedded/app/(shell)/home/_components/home-workspaces/home-workspaces'
 import { SkeletonLane } from '@/platform/embedded/app/(shell)/home/_components/widget-skeleton/widget-skeleton'
 import type { HomeActions, HomeView } from '@/platform/embedded/lib/data/home-view'
@@ -112,11 +112,7 @@ export function HomeDashboard({ view, actions, requestMode, composer }: HomeDash
             )}
             {view.recents.status === 'ready' && view.recents.items.length > 0 && (
               <div className={styles.recents}>
-                <RecentItems
-                  label='Recents'
-                  items={view.recents.items}
-                  onRemove={actions.removeRecent}
-                />
+                <HomeRecents items={view.recents.items} onRemove={actions.removeRecent} />
               </div>
             )}
             {view.getStarted.length > 0 && <GetStarted steps={view.getStarted} />}

apps/sim/platform/embedded/app/(shell)/home/_components/home-recents/home-recents.tsx

@@ -0,0 +1,23 @@
+'use client'
+
+import { RecentItems } from '@/platform/design-system/components/recent-items/recent-items'
+import { SiteMark } from '@/platform/embedded/app/(shell)/_components/site-mark/site-mark'
+import type { HomeRecentItem } from '@/platform/embedded/lib/data/home-view'
+
+interface HomeRecentsProps {
+  items: readonly HomeRecentItem[]
+  onRemove: (id: string) => void
+}
+
+export function HomeRecents({ items, onRemove }: HomeRecentsProps) {
+  return (
+    <RecentItems
+      label='Recents'
+      items={items.map((item) => ({
+        ...item,
+        leading: item.icon ? undefined : <SiteMark key={item.host} host={item.host} />,
+      }))}
+      onRemove={onRemove}
+    />
+  )
+}

apps/sim/platform/embedded/app/(shell)/links/_components/links-page/links-page.module.css

@@ -29,14 +29,7 @@
   min-inline-size: 0;
 }
 .nameLeading {
-  display: grid;
   flex: none;
-  place-items: center;
-  inline-size: var(--spacing-16);
-  block-size: var(--spacing-16);
-}
-.nameLeading > * {
-  grid-area: 1 / 1;
 }
 .nameCell {
   display: grid;
@@ -69,12 +62,6 @@
     display: grid;
   }
 }
-.favicon {
-  flex: none;
-  inline-size: var(--spacing-16);
-  block-size: var(--spacing-16);
-  border-radius: var(--radius-2);
-}
 .learnMore {
   margin-inline-start: calc(-1 * var(--spacing-8));
 }

apps/sim/platform/embedded/app/(shell)/links/_components/links-page/links-page.tsx

@@ -1,7 +1,6 @@
 'use client'
 
 import { type MouseEvent, memo, type ReactNode, type TouchEvent, useMemo, useState } from 'react'
-import { Favicon } from '@/components/favicon'
 import type { SimLink } from '@/lib/api/contracts/sim-links'
 import { simLinkOrigin } from '@/lib/sim-links/validation'
 import { QueryBoundary } from '@/platform/design-system/components'
@@ -18,6 +17,7 @@ import { ActionMenu, ContextActionMenu } from '@/platform/design-system/componen
 import { ConfirmDialog } from '@/platform/design-system/components/modal/confirm-dialog'
 import { OverflowText } from '@/platform/design-system/components/overflow-text/overflow-text'
 import type { LoadMoreState } from '@/platform/design-system/components/scroll-area/use-load-more'
+import { SiteMark } from '@/platform/embedded/app/(shell)/_components/site-mark/site-mark'
 import { LinkEditor } from '@/platform/embedded/app/(shell)/links/_components/links-page/link-editor'
 import { LinksFrame } from '@/platform/embedded/app/(shell)/links/_components/links-page/links-frame'
 import styles from '@/platform/embedded/app/(shell)/links/_components/links-page/links-page.module.css'
@@ -105,22 +105,6 @@ function LinkRowContextMenu({ links, children, ...actions }: LinkRowContextMenuP
   )
 }
 
-/** Holds the favicon's box with the globe until the image paints, so a row never shows a gap. */
-function LinkMark({ host }: { host: string | null }) {
-  const [loaded, setLoaded] = useState(false)
-  return (
-    <span className={styles.nameLeading}>
-      {!loaded && <Icon name='I041' />}
-      <Favicon
-        host={host}
-        fallback={null}
-        className={styles.favicon}
-        onLoad={() => setLoaded(true)}
-      />
-    </span>
-  )
-}
-
 interface LinkSummaryProps {
   link: SimLink
   updated: string
@@ -173,7 +157,11 @@ const LinksTable = memo(function LinksTable({
         cells: {
           name: (
             <TableLabel
-              leading={<LinkMark key={origin} host={origin ? new URL(origin).hostname : null} />}
+              leading={
+                <span className={styles.nameLeading}>
+                  <SiteMark key={origin} host={origin ? new URL(origin).hostname : null} />
+                </span>
+              }
             >
               <span className={styles.nameCell}>
                 <OverflowText text={link.name}>{link.name}</OverflowText>