Refactor renamed the component groups to something less obtuse:

Elements -> Groups -> Screens -> Views

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

@@ -0,0 +1,113 @@
+import {
+  ActionIcon,
+  Alert,
+  Button,
+  Divider,
+  Group,
+  Stack,
+  Table,
+  Text,
+  TextInput,
+  Title,
+} from "@mantine/core";
+
+export interface RootEntry {
+  name: string;
+  uri: string;
+}
+
+export interface RootsTableProps {
+  roots: RootEntry[];
+  newRootName: string;
+  newRootPath: string;
+  onRemoveRoot: (uri: string) => void;
+  onNewRootNameChange: (name: string) => void;
+  onNewRootPathChange: (path: string) => void;
+  onAddRoot: () => void;
+  onBrowse: () => void;
+}
+
+const HintText = Text.withProps({
+  size: "sm",
+  c: "dimmed",
+});
+
+const RemoveIcon = ActionIcon.withProps({
+  color: "red",
+  variant: "subtle",
+});
+
+const AddRootButton = Button.withProps({
+  variant: "light",
+  fullWidth: true,
+});
+
+export function RootsTable({
+  roots,
+  newRootName,
+  newRootPath,
+  onRemoveRoot,
+  onNewRootNameChange,
+  onNewRootPathChange,
+  onAddRoot,
+  onBrowse,
+}: RootsTableProps) {
+  return (
+    <Stack gap="md">
+      <Title order={4}>Roots Configuration</Title>
+      <HintText>Filesystem roots exposed to the connected server:</HintText>
+
+      {roots.length > 0 && (
+        <Table>
+          <Table.Thead>
+            <Table.Tr>
+              <Table.Th>Name</Table.Th>
+              <Table.Th>URI</Table.Th>
+              <Table.Th>Actions</Table.Th>
+            </Table.Tr>
+          </Table.Thead>
+          <Table.Tbody>
+            {roots.map((root) => (
+              <Table.Tr key={root.uri}>
+                <Table.Td>{root.name}</Table.Td>
+                <Table.Td>{root.uri}</Table.Td>
+                <Table.Td>
+                  <RemoveIcon onClick={() => onRemoveRoot(root.uri)}>
+                    X
+                  </RemoveIcon>
+                </Table.Td>
+              </Table.Tr>
+            ))}
+          </Table.Tbody>
+        </Table>
+      )}
+
+      <AddRootButton onClick={onAddRoot}>+ Add Root</AddRootButton>
+
+      <Divider />
+
+      <Title order={5}>Add New Root:</Title>
+      <TextInput
+        label="Name"
+        value={newRootName}
+        onChange={(e) => onNewRootNameChange(e.currentTarget.value)}
+      />
+      <TextInput
+        label="Path"
+        value={newRootPath}
+        onChange={(e) => onNewRootPathChange(e.currentTarget.value)}
+      />
+      <Group justify="flex-end">
+        <Button variant="light" onClick={onBrowse}>
+          Browse
+        </Button>
+        <Button onClick={onAddRoot}>Add</Button>
+      </Group>
+
+      <Alert color="yellow" title="Warning">
+        Roots give the server access to these directories. Only add directories
+        you trust the server to access.
+      </Alert>
+    </Stack>
+  );
+}