Refactor renamed the component groups to something less obtuse:

Elements -> Groups -> Screens -> Views

clients/web/src/components/groups/ToolListItem/ToolListItem.stories.tsx

@@ -0,0 +1,43 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { fn } from "storybook/test";
+import { ToolListItem } from "./ToolListItem";
+
+const meta: Meta<typeof ToolListItem> = {
+  title: "Groups/ToolListItem",
+  component: ToolListItem,
+  args: {
+    onClick: fn(),
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof ToolListItem>;
+
+export const Default: Story = {
+  args: {
+    name: "get_weather",
+    selected: false,
+  },
+};
+
+export const Selected: Story = {
+  args: {
+    name: "get_weather",
+    selected: true,
+  },
+};
+
+export const WithTitle: Story = {
+  args: {
+    name: "get_weather",
+    title: "Get Weather",
+    selected: false,
+  },
+};
+
+export const LongName: Story = {
+  args: {
+    name: "this_is_a_very_long_tool_name_that_might_need_to_wrap_across_multiple_lines_in_the_ui",
+    selected: false,
+  },
+};

clients/web/src/components/groups/ToolListItem/ToolListItem.tsx

@@ -0,0 +1,45 @@
+import { Stack, Text, UnstyledButton } from "@mantine/core";
+
+export interface ToolListItemProps {
+  name: string;
+  title?: string;
+  selected: boolean;
+  onClick: () => void;
+}
+
+const ItemLabel = Text.withProps({
+  fw: 500,
+  truncate: true,
+});
+
+const ItemSubLabel = Text.withProps({
+  size: "xs",
+  c: "dimmed",
+  truncate: true,
+});
+
+function resolveLabel(name: string, title?: string): string {
+  return title ?? name;
+}
+
+export function ToolListItem({
+  name,
+  title,
+  selected,
+  onClick,
+}: ToolListItemProps) {
+  return (
+    <UnstyledButton
+      w="100%"
+      p="sm"
+      variant="listItem"
+      bg={selected ? "var(--mantine-primary-color-light)" : undefined}
+      onClick={onClick}
+    >
+      <Stack gap={2}>
+        <ItemLabel>{resolveLabel(name, title)}</ItemLabel>
+        {title && <ItemSubLabel>{name}</ItemSubLabel>}
+      </Stack>
+    </UnstyledButton>
+  );
+}