feat(tools): design pass on the tools directory and tool pages

packages/shared/src/components/charm/CharmEmptyState.tsx

@@ -15,6 +15,7 @@ import Link from '../utilities/Link';
 interface CharmEmptyStateActionBase {
   label: string;
   icon?: ButtonProps<'button'>['icon'];
+  loading?: boolean;
 }
 
 /** Exactly one of `href` (renders a link) or `onClick` (renders a button). */
@@ -102,6 +103,7 @@ export function CharmEmptyState({
             variant={ButtonVariant.Primary}
             size={ButtonSize.Medium}
             icon={action.icon}
+            loading={action.loading}
             onClick={action.onClick}
             className="mt-5"
           >

packages/shared/src/components/tools/ToolLogo.tsx

@@ -11,8 +11,14 @@ interface ToolLogoProps {
   url?: string | null;
   /** Pixel size to request from the icon service. */
   size?: number;
-  /** Styles the tile: size, radius, background, border, padding. */
+  /** Styles the tile: size, radius, border. */
   className?: string;
+  /**
+   * Plate styles (background, inset) applied only while a real logo renders.
+   * The initial fallback stays on the ambient surface so its token color
+   * keeps contrast in both themes.
+   */
+  plateClassName?: string;
   /** Replaces the initial when there is no logo to show. */
   fallback?: ReactNode;
 }
@@ -26,12 +32,14 @@ export const ToolLogo = ({
   url,
   size,
   className,
+  plateClassName,
   fallback,
 }: ToolLogoProps): ReactElement => {
   const [hasFailed, setHasFailed] = useState(false);
   const src = faviconUrl || (url ? getSiteIconUrl({ url, size }) : null);
+  const showsLogo = !!src && !hasFailed;
 
-  if (fallback && (!src || hasFailed)) {
+  if (fallback && !showsLogo) {
     return <>{fallback}</>;
   }
 
@@ -40,9 +48,10 @@ export const ToolLogo = ({
       className={classNames(
         'grid flex-none place-items-center overflow-hidden',
         className,
+        showsLogo && plateClassName,
       )}
     >
-      {!src || hasFailed ? (
+      {!showsLogo ? (
         <span aria-hidden className="font-bold text-text-tertiary">
           {title.charAt(0).toUpperCase()}
         </span>

packages/shared/src/features/profile/components/stack/UserStackItem.tsx

@@ -176,8 +176,11 @@ function UserStackItemBody({
                 url={sponsoredCreative ? null : tool.url}
                 className={classNames(
                   'size-6 typo-footnote',
-                  sponsoredCreative ? 'rounded-full bg-white p-0.5' : 'rounded',
+                  sponsoredCreative ? 'rounded-full' : 'rounded',
                 )}
+                plateClassName={
+                  sponsoredCreative ? 'bg-white p-0.5' : undefined
+                }
               />
               {!!title && (
                 <div className="flex min-w-0 flex-1 flex-col">

packages/shared/src/graphql/tools.ts

@@ -396,9 +396,19 @@ export interface DirectoryTool {
   stackCount: number;
 }
 
-const TOP_TOOLS_QUERY = gql`
-  query TopTools($first: Int, $category: String, $trending: Boolean) {
-    topTools(first: $first, category: $category, trending: $trending) {
+export const TOP_TOOLS_QUERY = gql`
+  query TopTools(
+    $first: Int
+    $category: String
+    $trending: Boolean
+    $query: String
+  ) {
+    topTools(
+      first: $first
+      category: $category
+      trending: $trending
+      query: $query
+    ) {
       id
       title
       slug
@@ -414,14 +424,16 @@ export const getTopTools = async ({
   first = 6,
   category,
   trending,
+  query,
 }: {
   first?: number;
   category?: string;
   trending?: boolean;
+  query?: string;
 } = {}): Promise<DirectoryTool[]> => {
   const result = await gqlClient.request<{ topTools: DirectoryTool[] }>(
     TOP_TOOLS_QUERY,
-    { first, category, trending },
+    { first, category, trending, query },
   );
   return result.topTools;
 };
@@ -431,7 +443,7 @@ export interface ToolCategoryStat {
   toolCount: number;
 }
 
-const TOOL_CATEGORIES_QUERY = gql`
+export const TOOL_CATEGORIES_QUERY = gql`
   query ToolCategories {
     toolCategories {
       category

packages/shared/src/graphql/user/userStack.ts

@@ -22,6 +22,7 @@ export interface ToolTopSquad {
   name: string;
   handle: string;
   image: string;
+  description: string | null;
   membersCount: number;
 }
 
@@ -151,6 +152,7 @@ const TOP_SQUADS_FOR_TOOL_QUERY = gql`
           name
           handle
           image
+          description
           membersCount
         }
       }

packages/shared/src/lib/log.ts

@@ -138,6 +138,7 @@ export enum LogEvent {
   Impression = 'impression',
   ManageTags = 'click manage tags',
   SearchTags = 'search tags',
+  SearchTools = 'search tools',
   ClickFeedTagChip = 'click feed tag chip',
   ClickOnboardingBack = 'click onboarding back',
   ClickOnboardingNext = 'click onboarding next',

packages/webapp/__tests__/ToolPage.spec.tsx

@@ -5,10 +5,13 @@ import type { RenderResult } from '@testing-library/react';
 import { render, screen } from '@testing-library/react';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import AuthContext from '@dailydotdev/shared/src/contexts/AuthContext';
+import type { LoggedUser } from '@dailydotdev/shared/src/lib/user';
+import loggedUser from '@dailydotdev/shared/__tests__/fixture/loggedUser';
 import SettingsContext from '@dailydotdev/shared/src/contexts/SettingsContext';
 import { settingsContext } from '@dailydotdev/shared/__tests__/helpers/boot';
 import { SourceType } from '@dailydotdev/shared/src/graphql/sources';
 import { apiUrl } from '@dailydotdev/shared/src/lib/config';
+import { formatDataTileValue } from '@dailydotdev/shared/src/lib/numberFormat';
 import type { ToolPageProps } from '../pages/tools/[slug]';
 import ToolPage from '../pages/tools/[slug]';
 
@@ -57,6 +60,7 @@ const defaultProps: ToolPageProps = {
       name: 'Platform crew',
       handle: 'platform',
       image: 'https://daily.dev/squad.png',
+      description: null,
       membersCount: 42,
     },
   ],
@@ -124,12 +128,16 @@ const defaultProps: ToolPageProps = {
   facts: [],
 };
 
-const renderComponent = (props: ToolPageProps = defaultProps): RenderResult =>
+const renderComponent = (
+  props: ToolPageProps = defaultProps,
+  user?: LoggedUser,
+): RenderResult =>
   render(
     <QueryClientProvider client={new QueryClient()}>
       <AuthContext.Provider
         value={{
-          isLoggedIn: false,
+          user,
+          isLoggedIn: !!user,
           shouldShowLogin: false,
           showLogin: jest.fn(),
           logout: jest.fn(),
@@ -164,7 +172,7 @@ it('should render the stat tiles from adoption and vote data', async () => {
   renderComponent();
 
   expect(await screen.findByText('In stacks')).toBeInTheDocument();
-  expect(screen.getByText('1,200')).toBeInTheDocument();
+  expect(screen.getByText(formatDataTileValue(1200))).toBeInTheDocument();
   expect(screen.getByText('Dev sentiment')).toBeInTheDocument();
   expect(screen.getByText('80%')).toBeInTheDocument();
   expect(screen.getByText('Top 3%')).toBeInTheDocument();
@@ -201,6 +209,7 @@ it('should skip sections without data', async () => {
   const headings = await screen.findAllByRole('heading', { level: 2 });
 
   expect(headings.map((heading) => heading.textContent)).toEqual([
+    'Adoption on daily.dev',
     'Discussion',
   ]);
 });
@@ -218,3 +227,45 @@ it('should show the real logo for tools without one in the dataset', async () =>
     'https://daily.dev/docker.png',
   );
 });
+
+it('should show the discussion empty state when nobody commented yet', async () => {
+  renderComponent();
+
+  expect(await screen.findByText('No comments yet')).toBeInTheDocument();
+  expect(
+    screen.getByRole('button', { name: 'Start the discussion' }),
+  ).toBeInTheDocument();
+});
+
+it('should hold the discussion behind the verification check when logged in', async () => {
+  renderComponent(defaultProps, loggedUser);
+
+  await screen.findByRole('heading', { level: 1, name: 'Docker' });
+
+  // The companies query never resolves here, so the placeholder wins.
+  expect(screen.queryByText('No comments yet')).not.toBeInTheDocument();
+});
+
+it('should render squads with the directory card details', async () => {
+  const props: ToolPageProps = {
+    ...defaultProps,
+    topSquads: [
+      {
+        id: 's1',
+        name: 'Platform crew',
+        handle: 'platform',
+        image: 'https://daily.dev/squad.png',
+        description: 'Where the platform folks hang out.',
+        membersCount: 42,
+      },
+    ],
+  };
+  renderComponent(props);
+
+  expect(await screen.findByText('Platform crew')).toBeInTheDocument();
+  expect(
+    screen.getByText('Where the platform folks hang out.'),
+  ).toBeInTheDocument();
+  expect(screen.getByText(/@platform/)).toBeInTheDocument();
+  expect(screen.getByText('42 members')).toBeInTheDocument();
+});