Refactor renamed the component groups to something less obtuse:

Elements -> Groups -> Screens -> Views

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

@@ -0,0 +1,30 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { fn } from "storybook/test";
+import { ResourceListItem } from "./ResourceListItem";
+
+const meta: Meta<typeof ResourceListItem> = {
+  title: "Groups/ResourceListItem",
+  component: ResourceListItem,
+  args: {
+    onClick: fn(),
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof ResourceListItem>;
+
+export const Default: Story = {
+  args: {
+    name: "config.json",
+    uri: "file:///config.json",
+    selected: false,
+  },
+};
+
+export const Selected: Story = {
+  args: {
+    name: "config.json",
+    uri: "file:///config.json",
+    selected: true,
+  },
+};

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

@@ -0,0 +1,32 @@
+import { Text, UnstyledButton } from "@mantine/core";
+
+export interface ResourceAnnotations {
+  audience?: string;
+  priority?: number;
+}
+
+export interface ResourceListItemProps {
+  name: string;
+  uri: string;
+  annotations?: ResourceAnnotations;
+  selected: boolean;
+  onClick: () => void;
+}
+
+export function ResourceListItem({
+  name,
+  selected,
+  onClick,
+}: ResourceListItemProps) {
+  return (
+    <UnstyledButton
+      w="100%"
+      p="sm"
+      variant="listItem"
+      bg={selected ? "var(--mantine-primary-color-light)" : undefined}
+      onClick={onClick}
+    >
+      <Text fw={500}>{name}</Text>
+    </UnstyledButton>
+  );
+}